@gravitee/ui-components 3.25.3-typescript-ad6021f → 3.25.3-typescript-bfd8f67

package/src/atoms/gv-date-picker-calendar.js

@@ -1,894 +1 @@
-/*
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *         http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import './gv-date-picker-cell';
-import {
-  addDays,
-  addMonths,
-  addYears,
-  endOfMonth,
-  format,
-  getDay,
-  getMonth,
-  getYear,
-  isAfter,
-  isBefore,
-  parse,
-  setHours,
-  setMinutes,
-  startOfDay,
-  subMonths,
-  subYears,
-} from 'date-fns';
-import { classMap } from 'lit/directives/class-map';
-import { dispatchCustomEvent } from '../lib/events';
-import { i18n } from '../lib/i18n';
-import { LitElement, css, html } from 'lit';
-
-import { until } from 'lit/directives/until';
-
-/**
- * Date Picker Calendar
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-date-picker-cell:select - Custom event when user select cell
- * @fires gv-date-picker-cell:hover - Custom event when user hover cell
- *
- * @attr {Number} dateFrom - unix date form
- * @attr {Number} dateTo - unix date to
- * @attr {Array} disabledDates - array of disabled date
- * @attr {Number} hoveredDate - unix hovered date
- * @attr {Number} min - unix min date
- * @attr {Number} max - unix max date
- * @attr {Object} locale - date-fns locale object
- *
- * @cssprop {Color} [--gv-date-picker-hover--bgc=var(--gv-theme-color-light, #86c3d0)] - Hover background color
- * @cssprop {Color} [--gv-date-picker-hover--c=var(--gv-theme-font-color-dark, #262626)] - Hover color
- * @cssprop {Color} [--gv-date-picker-selected--bgc=var(--gv-theme-color, #5a7684)] - Selected background color
- * @cssprop {Color} [--gv-date-picker-selected--c=var(--gv-theme-font-color-light, #ffffff)] - Selected color
- */
-export class GvDatePickerCalendar extends LitElement {
-  static get properties() {
-    return {
-      dateFrom: { type: Number },
-      dateTo: { type: Number },
-      disabledDates: { type: Array },
-      hoveredDate: { type: Number },
-      locale: { type: Object },
-      max: { type: Number },
-      min: { type: Number },
-      month: { type: String },
-      monthMode: { type: Boolean },
-      next: { type: Boolean },
-      prev: { type: Boolean },
-      range: { type: Boolean },
-      time: { type: Boolean },
-      small: { type: Boolean, reflect: true },
-      strict: { type: Boolean },
-      year: { type: String },
-      yearMode: { type: Boolean },
-
-      _dayNamesOfWeek: { type: Array, attribute: false },
-      _dimensions: { type: Array, attribute: false },
-      _hasGoToday: { type: Boolean, attribute: false },
-      _hour: { type: Number, attribute: false },
-      _minute: { type: Number, attribute: false },
-      _second: { type: Number, attribute: false },
-      _monthsList: { type: Array, attribute: false },
-      _locale: { type: Object, attribute: false },
-      _from: { type: Number, attribute: false },
-      _to: { type: Number, attribute: false },
-    };
-  }
-
-  static get styles() {
-    return [
-      // language=CSS
-      css`
-        :host {
-          display: block;
-        }
-
-        :host > div {
-          overflow: hidden;
-        }
-
-        .nav,
-        .foot,
-        .nav-times {
-          display: flex;
-          padding: 0.5rem;
-          height: 30px;
-        }
-
-        .nav .current,
-        .foot {
-          flex: 1;
-          display: flex;
-          justify-content: center;
-        }
-
-        .monthName,
-        .day {
-          text-transform: capitalize;
-        }
-
-        .foot-time {
-          justify-content: flex-end;
-        }
-
-        .calendar-grid {
-          display: grid;
-          grid-template-columns: repeat(7, 1fr);
-          padding: 0.5rem 0.5rem 0 0.5rem;
-        }
-
-        .calendar-grid-large {
-          grid-template-columns: repeat(3, 1fr);
-        }
-
-        .header,
-        .content {
-          display: grid;
-          grid-template-columns: repeat(2, auto);
-        }
-
-        gv-date-picker-cell {
-          height: 32px;
-        }
-
-        .calendar-grid-large gv-date-picker-cell {
-          height: 48px;
-        }
-
-        .calendar-grid,
-        .foot,
-        .time {
-          border-top: 1px solid var(--gv-theme-neutral-color-dark);
-        }
-
-        .nav-times {
-          justify-content: center;
-          align-items: center;
-        }
-
-        .nav-times,
-        .time {
-          border-left: 1px solid var(--gv-theme-neutral-color-dark);
-        }
-
-        .day {
-          height: 32px;
-          width: 33px;
-          margin: 0;
-          padding: 0;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          font-size: 12px;
-        }
-
-        :host([small]) .day {
-          height: 25px;
-          width: 26px;
-        }
-
-        .box-col,
-        .times {
-          display: flex;
-        }
-
-        .box-col {
-          flex-direction: column;
-        }
-
-        .box-col:first-of-type {
-          width: 260px;
-        }
-
-        :host([small]) .box-col:first-of-type {
-          width: 195px;
-        }
-
-        .box {
-          display: flex;
-        }
-
-        .times {
-          max-height: 235px;
-          flex-direction: row;
-        }
-
-        .time {
-          scroll-behavior: smooth;
-          overflow-x: auto;
-          min-width: 50px;
-          width: 100%;
-        }
-
-        .time > div {
-          height: 32px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-
-        :host([small]) .time > div {
-          height: 25px;
-        }
-
-        .time > div:hover {
-          background: var(--gv-date-picker-hover--bgc, var(--gv-theme-color-light, #86c3d0));
-          color: var(--gv-date-picker-hover--c, var(--gv-theme-font-color-dark, #262626));
-        }
-
-        .time > div.selected {
-          background: var(--gv-date-picker-selected--bgc, var(--gv-theme-color, #5a7684));
-          color: var(--gv-date-picker-selected--c, var(--gv-theme-font-color-light, #ffffff));
-        }
-
-        .time > div.disabled {
-          opacity: 0.4;
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-    this._dayNamesOfWeek = [];
-    this._monthsList = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
-    this.range = false;
-    this.currentDate = parseInt(format(startOfDay(Date.now()), 't'), 10);
-    this._hasGoToday = true;
-
-    this._hours = this.computeArrayOfTime(24);
-    this._minutes = this.computeArrayOfTime(60);
-    this._seconds = this.computeArrayOfTime(60);
-  }
-
-  set dateFrom(value) {
-    this._from = value;
-    if (this.time && this._from) {
-      const date = new Date(this._from * 1000);
-      this._hour = format(date, 'HH');
-      this._minute = format(date, 'mm');
-      if (this.isStrictTime()) {
-        this._second = format(date, 'ss');
-      }
-    }
-  }
-
-  set dateTo(value) {
-    this._to = value;
-  }
-
-  computeArrayOfTime(size) {
-    return new Array(size).fill('').map((a, i) => {
-      let time = i.toString();
-      if (time.length === 1) {
-        time = `0${time}`;
-      }
-      return time;
-    });
-  }
-
-  _renderPreviousNav() {
-    if (this.prev || this.monthMode || this.yearMode) {
-      return html`
-        <gv-button link icon="navigation:angle-double-left" @click="${this._onPrevYear}" ?small="${this.small}"></gv-button>
-        ${this.monthMode || this.yearMode
-          ? ''
-          : html`<gv-button link icon="navigation:angle-left" ?small="${this.small}" @click="${this._onPrevMonth}"></gv-button>`}
-      `;
-    }
-    return '';
-  }
-
-  _renderCurrentNav() {
-    return html`
-      <div class="current">
-        ${this.yearMode
-          ? ''
-          : html`<gv-button link @click="${this._onSelectMonth}" ?small="${this.small}"
-              ><span class="monthName">${until(this.computeName(this.month, this.year))}</span></gv-button
-            >`}
-        <gv-button ?small="${this.small}" link @click="${this._onSelectYear}">${this.computeCurrentYearName()}</gv-button>
-      </div>
-    `;
-  }
-
-  _renderNextNav() {
-    if (this.next || this.monthMode || this.yearMode) {
-      return html`
-        ${this.monthMode || this.yearMode
-          ? ''
-          : html`<gv-button link icon="navigation:angle-right" ?small="${this.small}" @click="${this._onNextMonth}"></gv-button>`}
-        <gv-button ?small="${this.small}" link icon="navigation:angle-double-right" @click="${this._onNextYear}"></gv-button>
-      `;
-    }
-  }
-
-  _renderDays() {
-    return html` ${this._dayNamesOfWeek && this._dayNamesOfWeek.map((dayNameOfWeek) => html`<div class="day">${dayNameOfWeek}</div>`)}
-    ${this._dimensions &&
-    this._dimensions.map(
-      (dimension) =>
-        html`${dimension &&
-        dimension.map(
-          (data) => html` <div>
-            ${data
-              ? html`
-                  <gv-date-picker-cell
-                    .disabledDates="${this.disabledDates}"
-                    .min="${this.monthMode || this.yearMode ? null : this.min}"
-                    .max="${this.monthMode || this.yearMode ? null : this.max}"
-                    .month="${this.month}"
-                    .hoveredDate="${this.hoveredDate}"
-                    .dateTo="${this._to}"
-                    .dateFrom="${this._from}"
-                    .data="${data}"
-                    .time="${this.time}"
-                    ?isCurrent="${this.isCurrentDate(data)}"
-                    @gv-date-picker-cell:hover="${this._onHover}"
-                    @gv-date-picker-cell:select="${this._onSelect}"
-                  ></gv-date-picker-cell>
-                `
-              : null}
-          </div>`,
-        )}`,
-    )}`;
-  }
-
-  isStrictTime() {
-    return this.time === true && this.strict === true;
-  }
-
-  render() {
-    const classes = {
-      'calendar-grid': true,
-      'calendar-grid-large': this.monthMode || this.yearMode,
-    };
-    return html`
-      <div class="box">
-        ${this.isStrictTime()
-          ? ''
-          : html`<div class="box-col">
-              <div class="nav">${this._renderPreviousNav()} ${this._renderCurrentNav()} ${this._renderNextNav()}</div>
-              <div class="${classMap(classes)}">${this._renderDays()}</div>
-            </div>`}
-        ${this.time && !this.monthMode && !this.yearMode
-          ? html`<div class="box-col">
-              ${this.isStrictTime() ? '' : html`<div class="nav-times">${this.getTime()}</div>`}
-              <div class="times">
-                <div class="time">
-                  ${this._hours &&
-                  this._hours.map(
-                    (val) =>
-                      html`<div
-                        @click="${this._onSelectHour.bind(this, val)}"
-                        class="${classMap({
-                          hour: true,
-                          selected: this._hour === val,
-                          disabled: this.isHoursDisabled(val),
-                        })}"
-                      >
-                        ${val}
-                      </div>`,
-                  )}
-                </div>
-                <div class="time">
-                  ${this._minutes &&
-                  this._minutes.map(
-                    (val) =>
-                      html`<div
-                        @click="${this._onSelectMinute.bind(this, val)}"
-                        class="${classMap({
-                          minute: true,
-                          selected: this._minute === val,
-                          disabled: this.isMinutesDisabled(val),
-                        })}"
-                      >
-                        ${val}
-                      </div>`,
-                  )}
-                </div>
-
-                ${this.isStrictTime()
-                  ? html`<div class="time">
-                      ${this._seconds &&
-                      this._seconds.map(
-                        (val) =>
-                          html`<div
-                            @click="${this._onSelectSecond.bind(this, val)}"
-                            class="${classMap({
-                              second: true,
-                              selected: this._second === val,
-                              disabled: this.isSecondsDisabled(val),
-                            })}"
-                          >
-                            ${val}
-                          </div>`,
-                      )}
-                    </div>`
-                  : ''}
-              </div>
-            </div>`
-          : ''}
-      </div>
-      ${this.hasGoToday()
-        ? html` <div class="foot">
-            <gv-button link @click=${this.goToday}>${i18n('gv-date-picker.today')}</gv-button>
-          </div>`
-        : ''}
-      ${this.time && !this.monthMode && !this.yearMode
-        ? html` <div class="foot foot-time">
-            <gv-button primary outlined small @click=${this._onNow}
-              >${this.isStrictTime() ? i18n('gv-date-picker.currentTime') : i18n('gv-date-picker.now')}</gv-button
-            >
-            <gv-button primary small @click=${this._onDateTimeSelected} .disabled="${this.disableValidation === true}"
-              >${i18n('gv-date-picker.ok')}</gv-button
-            >
-          </div>`
-        : ''}
-    `;
-  }
-
-  isMinutesDisabled(value) {
-    if (this._from && this._hour != null) {
-      const selectedDate = new Date(this._from * 1000);
-      selectedDate.setHours(parseInt(this._hour, 10), parseInt(value, 10), 0, 0);
-      if (this.min) {
-        const minDate = new Date(this.min * 1000);
-        if (isBefore(selectedDate, minDate)) {
-          return true;
-        }
-      }
-
-      if (this.max) {
-        const maxDate = new Date(this.max * 1000);
-        if (isAfter(selectedDate, maxDate)) {
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-
-  isSecondsDisabled(value) {
-    if (this._from && this._hour != null) {
-      const selectedDate = new Date(this._from * 1000);
-      selectedDate.setHours(parseInt(this._hour, 10), parseInt(value, 10), 0, 0);
-      if (this.min) {
-        const minDate = new Date(this.min * 1000);
-        if (isBefore(selectedDate, minDate)) {
-          return true;
-        }
-      }
-
-      if (this.max) {
-        const maxDate = new Date(this.max * 1000);
-        if (isAfter(selectedDate, maxDate)) {
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-
-  isHoursDisabled(value) {
-    if (this._from) {
-      const selectedDate = new Date(this._from * 1000);
-      selectedDate.setHours(parseInt(value, 10));
-      if (this.min) {
-        const minDate = new Date(this.min * 1000);
-        minDate.setMinutes(0, 0, 0);
-        if (selectedDate.getTime() < minDate.getTime()) {
-          return true;
-        }
-      }
-
-      if (this.max) {
-        const maxDate = new Date(this.max * 1000);
-        if (selectedDate.getTime() > maxDate.getTime()) {
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-
-  _updateTime() {
-    setTimeout(() => {
-      if (!this._hour || this.isHoursDisabled(this._hour)) {
-        const hour = this.shadowRoot.querySelector('.hour:not(.disabled)');
-        if (hour) {
-          this._hour = hour.textContent;
-        }
-      }
-    }, 0);
-
-    setTimeout(() => {
-      if (!this._minute || this.isMinutesDisabled(this._minute)) {
-        const minute = this.shadowRoot.querySelector('.minute:not(.disabled)');
-        if (minute) {
-          this._minute = minute.textContent;
-        }
-      }
-    }, 0);
-
-    if (this.isStrictTime()) {
-      setTimeout(() => {
-        if (!this._second || this.isSecondsDisabled(this._second)) {
-          const second = this.shadowRoot.querySelector('.second:not(.disabled)');
-          if (second) {
-            this._second = second.textContent;
-          }
-        }
-      }, 0);
-    }
-  }
-
-  getTime() {
-    if (this._hour && this._minute) {
-      return `${this._hour}:${this._minute}`;
-    }
-    return '';
-  }
-
-  isCurrentDate(data) {
-    if (this.yearMode) {
-      return getYear(data.date * 1000) === getYear(this.currentDate * 1000);
-    } else if (this.monthMode) {
-      return getMonth(data.date * 1000) === getMonth(this.currentDate * 1000);
-    }
-    return data.date === this.currentDate;
-  }
-
-  updated(properties) {
-    if (properties.has('year')) {
-      this.dispatchEvent(new CustomEvent('year-changed', { detail: { value: this.year } }));
-    }
-    if (
-      properties.has('locale') ||
-      properties.has('year') ||
-      properties.has('month') ||
-      properties.has('monthMode') ||
-      properties.has('yearMode')
-    ) {
-      this.yearAndMonthChanged(this.year, this.month);
-    }
-
-    if (properties.has('_hour') || properties.has('_minute')) {
-      this.shadowRoot.querySelectorAll('.selected').forEach((time) => {
-        time.parentNode.scrollTop = time.offsetTop - time.parentNode.offsetTop;
-      });
-    }
-  }
-
-  _updateDays() {
-    const dayNames = [];
-    for (let i = 0; i < 7; i += 1) {
-      dayNames.push(this.locale.localize.day(i, { width: 'short' }));
-    }
-    const firstDayOfWeek = this.locale.options.weekStartsOn;
-    const tmp = dayNames.slice().splice(0, firstDayOfWeek);
-    this._dayNamesOfWeek = dayNames.slice().splice(firstDayOfWeek, dayNames.length).concat(tmp);
-  }
-
-  yearAndMonthChanged(year, month) {
-    if (year && month && this.locale) {
-      if (this.yearMode) {
-        this._dayNamesOfWeek = [];
-        const cols = [null];
-        const { start, end } = this.getYearInterval(year);
-        for (let c = start; c < end; c++) {
-          const startDateString = `01/${month}/${c}`;
-          const startDateFn = parse(startDateString, 'dd/MM/yyyy', new Date(), { awareOfUnicodeTokens: true });
-          cols.push({
-            hover: false,
-            date: parseInt(format(startDateFn, 't'), 10),
-            title: this.computeName(month, c, 'yyyy'),
-          });
-        }
-        cols.push(null);
-        this._dimensions = [cols];
-      } else if (this.monthMode) {
-        this._dayNamesOfWeek = [];
-        this._dimensions = [
-          this._monthsList.map((month) => {
-            const startDateString = `01/${month}/${year}`;
-            const startDateFn = parse(startDateString, 'dd/MM/yyyy', new Date(), { awareOfUnicodeTokens: true });
-            return {
-              hover: false,
-              date: parseInt(format(startDateFn, 't'), 10),
-              title: this.computeName(month, this.year, 'MMM'),
-            };
-          }),
-        ];
-      } else {
-        this._updateDays();
-        let monthMinus = month;
-        monthMinus = monthMinus.substring(monthMinus.length - 2);
-        let startDateString = `01/${monthMinus}/${year}`;
-        let startDateFn = parse(startDateString, 'dd/MM/yyyy', new Date(), { awareOfUnicodeTokens: true });
-        const endDateFn = endOfMonth(startDateFn);
-        const endDateString = format(endDateFn, 'dd/MM/yyyy', { awareOfUnicodeTokens: true });
-
-        const firstDayOfWeek = this.locale.options.weekStartsOn;
-        const rows = [];
-        let columns = [];
-
-        const lastDayOfWeek = 6;
-
-        while (startDateString !== endDateString) {
-          let dayNumberFn = getDay(startDateFn) - firstDayOfWeek;
-          if (dayNumberFn < 0) {
-            dayNumberFn = 6;
-          }
-
-          const columnFn = {
-            hover: false,
-            date: parseInt(format(startDateFn, 't'), 10),
-            title: parseInt(format(startDateFn, 'd', { awareOfUnicodeTokens: true }), 10),
-          };
-          columns.push(columnFn);
-
-          if (dayNumberFn === lastDayOfWeek) {
-            for (let i = columns.length; i < lastDayOfWeek + 1; i += 1) {
-              columns.unshift(0);
-            }
-            rows.push(columns.slice());
-            columns = [];
-          }
-
-          startDateFn = addDays(startDateFn, 1);
-          startDateString = format(startDateFn, 'dd/MM/yyyy', { awareOfUnicodeTokens: true });
-
-          if (startDateString === endDateString) {
-            const endColumnFn = {
-              hover: false,
-              date: parseInt(format(startDateFn, 't'), 10),
-              title: parseInt(format(startDateFn, 'd', { awareOfUnicodeTokens: true }), 10),
-            };
-            columns.push(endColumnFn);
-            for (let i = columns.length; i <= lastDayOfWeek; i += 1) {
-              columns.push(0);
-            }
-            rows.push(columns.slice());
-            columns = [];
-          }
-        }
-        this._dimensions = rows;
-      }
-    }
-  }
-
-  getYearInterval(year = this.year) {
-    let start = parseInt(year, 10);
-    while (start % 10 !== 0) {
-      start--;
-    }
-    return { start, end: start + 10 };
-  }
-
-  computeName(month, year, _format = 'MMMM') {
-    if (month && year) {
-      const dateFn = parse(`${month}/${year}`, 'MM/yyyy', new Date());
-      return format(dateFn, _format, { locale: this.locale });
-    }
-    return '';
-  }
-
-  computeCurrentYearName() {
-    if (this.yearMode) {
-      const { start, end } = this.getYearInterval();
-      return `${start}-${end - 1}`;
-    }
-    return this.year;
-  }
-
-  _onSelectHour(value) {
-    this._hour = value;
-    this._updateTime();
-  }
-
-  _onSelectMinute(value) {
-    this._minute = value;
-    this._updateTime();
-  }
-
-  _onSelectSecond(value) {
-    this._second = value;
-    this._updateTime();
-  }
-
-  _onSelectMonth() {
-    if (this.monthMode) {
-      this._from = this._dateFrom;
-    } else {
-      this._dateFrom = this._from;
-      this._from = null;
-    }
-    this.yearMode = false;
-    this.monthMode = !this.monthMode;
-    this.yearAndMonthChanged(this.year, this.month);
-    dispatchCustomEvent(this, 'month-mode', { mode: this.monthMode, month: this.month, year: this.year });
-  }
-
-  _onSelectYear() {
-    if (this.yearMode) {
-      this._from = this._dateFrom;
-    } else {
-      this._dateFrom = this._from;
-      this._from = null;
-    }
-    this.monthMode = false;
-    this.yearMode = !this.yearMode;
-    this.yearAndMonthChanged(this.year, this.month);
-    dispatchCustomEvent(this, 'year-mode', { mode: this.yearMode, month: this.month, year: this.year });
-  }
-
-  get datetimeSelected() {
-    if (this.isStrictTime() && this._from == null) {
-      this._from = new Date().valueOf() / 1000;
-    }
-    let selectedDate = new Date(this._from * 1000);
-    selectedDate = setHours(selectedDate, parseInt(this._hour ? this._hour : 0, 10));
-    selectedDate = setMinutes(selectedDate, parseInt(this._minute ? this._minute : 0, 10));
-    return selectedDate.getTime() / 1000;
-  }
-
-  _onDateTimeSelected() {
-    this.value = this.datetimeSelected;
-    this.dispatchEvent(new CustomEvent('date-from-changed', { detail: { value: this.value } }));
-  }
-
-  _onNow() {
-    const now = new Date();
-    if (!this.isStrictTime()) {
-      now.setSeconds(0, 0);
-    }
-    this._from = now.getTime() / 1000;
-    this.month = format(now, 'MM');
-    this.year = format(now, 'yyyy');
-    this._hour = format(now, 'HH');
-    this._minute = format(now, 'mm');
-    if (this.isStrictTime()) {
-      this._second = format(now, 'mm');
-    }
-    this.dispatchEvent(new CustomEvent('date-from-changed', { detail: { value: this._from } }));
-  }
-
-  get disableValidation() {
-    const date = this.datetimeSelected;
-    if (date) {
-      if (this.min && date < this.min) {
-        return true;
-      }
-      if (this.max && date > this.max) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  _onSelect({ detail }) {
-    const { date } = detail;
-    if (this.yearMode) {
-      this.yearMode = false;
-      this.monthMode = true;
-      this._from = this._dateFrom;
-      const selectedDate = new Date(date * 1000);
-      this.year = format(selectedDate, 'yyyy');
-      dispatchCustomEvent(this, 'year-changed', { year: this.year });
-    } else if (this.monthMode) {
-      this.monthMode = false;
-      this._from = this._dateFrom;
-      const selectedDate = new Date(date * 1000);
-      this.month = format(selectedDate, 'MM');
-      this.year = format(selectedDate, 'yyyy');
-      dispatchCustomEvent(this, 'month-changed', { month: this.month, year: this.year });
-    } else if (this.time) {
-      this._from = date;
-      this._updateTime();
-    } else if (this.range) {
-      if (this._from && this._to) {
-        this._from = date;
-        this._to = null;
-        this.hoveredDate = undefined;
-        this.dispatchEvent(new CustomEvent('hovered-date-changed', { detail: { value: this.hoveredDate } }));
-      } else if (!this._from || (this._from && date < this._from)) {
-        this._from = date;
-      } else if (!this._to || (this._to && date > this._to)) {
-        this._to = date;
-      }
-      this.dispatchEvent(new CustomEvent('date-from-changed', { detail: { value: this._from } }));
-      this.dispatchEvent(new CustomEvent('date-to-changed', { detail: { value: this._to } }));
-    } else {
-      this._from = date;
-      this.dispatchEvent(new CustomEvent('date-from-changed', { detail: { value: this._from } }));
-    }
-  }
-
-  _onHover(event) {
-    if (this.range) {
-      this.hoveredDate = event.detail.date;
-      this.dispatchEvent(new CustomEvent('hovered-date-changed', { detail: { value: this.hoveredDate } }));
-    }
-  }
-
-  _onNextMonth() {
-    const month = parse(this.month, 'MM', new Date());
-    const monthPlusDate = addMonths(month, 1);
-    const monthPlusString = format(monthPlusDate, 'MM', { locale: this.locale });
-
-    this.month = monthPlusString;
-    if (this.month === '01') {
-      const year = parse(this.year, 'yyyy', new Date());
-      const yearPlusDate = addYears(year, 1);
-      const yearPlusString = format(yearPlusDate, 'yyyy', { locale: this.locale });
-      this.year = yearPlusString;
-    }
-  }
-
-  _onPrevMonth() {
-    const month = parse(this.month, 'MM', new Date());
-    const monthMinusDate = subMonths(month, 1);
-    const monthMinusString = format(monthMinusDate, 'MM', { locale: this.locale });
-
-    this.month = monthMinusString;
-    if (this.month === '12') {
-      const year = parse(this.year, 'yyyy', new Date());
-      const yearMinusDate = subYears(year, 1);
-      const yearMinusString = format(yearMinusDate, 'yyyy', { locale: this.locale });
-      this.year = yearMinusString;
-    }
-  }
-
-  _onNextYear() {
-    if (this.yearMode) {
-      this.year = parseInt(this.year, 10) + 10;
-    }
-    const year = parse(this.year, 'yyyy', new Date());
-    const yearPlusDate = addYears(year, 1);
-    const yearPlusString = format(yearPlusDate, 'yyyy', { locale: this.locale });
-    this.year = yearPlusString;
-  }
-
-  _onPrevYear() {
-    if (this.yearMode) {
-      this.year = parseInt(this.year, 10) - 10;
-    }
-    const year = parse(this.year, 'yyyy', new Date());
-    const yearMinusDate = subYears(year, 1);
-    const yearMinusString = format(yearMinusDate, 'yyyy', { locale: this.locale });
-    this.year = yearMinusString;
-  }
-
-  goToday() {
-    this.month = `0${getMonth(new Date()) + 1}`.slice(-2);
-    this.year = getYear(new Date());
-    this._onSelect({ detail: { date: new Date().getTime() / 1000 } });
-  }
-
-  hasGoToday() {
-    return !this.range && !this.time && !this.monthMode && !this.yearMode && this._hasGoToday;
-  }
-}
-
-window.customElements.define('gv-date-picker-calendar', GvDatePickerCalendar);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvDatePickerCalendar=void 0,require("./gv-date-picker-cell");const t=require("date-fns"),e=require("lit/directives/class-map"),i=require("../lib/events"),s=require("../lib/i18n"),a=require("lit"),o=require("lit/directives/until");class r extends a.LitElement{static get properties(){return{dateFrom:{type:Number},dateTo:{type:Number},disabledDates:{type:Array},hoveredDate:{type:Number},locale:{type:Object},max:{type:Number},min:{type:Number},month:{type:String},monthMode:{type:Boolean},next:{type:Boolean},prev:{type:Boolean},range:{type:Boolean},time:{type:Boolean},small:{type:Boolean,reflect:!0},strict:{type:Boolean},year:{type:String},yearMode:{type:Boolean},_dayNamesOfWeek:{type:Array,attribute:!1},_dimensions:{type:Array,attribute:!1},_hasGoToday:{type:Boolean,attribute:!1},_hour:{type:Number,attribute:!1},_minute:{type:Number,attribute:!1},_second:{type:Number,attribute:!1},_monthsList:{type:Array,attribute:!1},_locale:{type:Object,attribute:!1},_from:{type:Number,attribute:!1},_to:{type:Number,attribute:!1}}}static get styles(){return[a.css`:host{display:block}:host>div{overflow:hidden}.foot,.nav,.nav-times{display:flex;padding:.5rem;height:30px}.foot,.nav .current{flex:1;display:flex;justify-content:center}.day,.monthName{text-transform:capitalize}.foot-time{justify-content:flex-end}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);padding:.5rem .5rem 0 .5rem}.calendar-grid-large{grid-template-columns:repeat(3,1fr)}.content,.header{display:grid;grid-template-columns:repeat(2,auto)}gv-date-picker-cell{height:32px}.calendar-grid-large gv-date-picker-cell{height:48px}.calendar-grid,.foot,.time{border-top:1px solid var(--gv-theme-neutral-color-dark)}.nav-times{justify-content:center;align-items:center}.nav-times,.time{border-left:1px solid var(--gv-theme-neutral-color-dark)}.day{height:32px;width:33px;margin:0;padding:0;display:flex;justify-content:center;align-items:center;font-size:12px}:host([small]) .day{height:25px;width:26px}.box-col,.times{display:flex}.box-col{flex-direction:column}.box-col:first-of-type{width:260px}:host([small]) .box-col:first-of-type{width:195px}.box{display:flex}.times{max-height:235px;flex-direction:row}.time{scroll-behavior:smooth;overflow-x:auto;min-width:50px;width:100%}.time>div{height:32px;display:flex;justify-content:center;align-items:center}:host([small]) .time>div{height:25px}.time>div:hover{background:var(--gv-date-picker-hover--bgc,var(--gv-theme-color-light,#86c3d0));color:var(--gv-date-picker-hover--c,var(--gv-theme-font-color-dark,#262626))}.time>div.selected{background:var(--gv-date-picker-selected--bgc,var(--gv-theme-color,#5a7684));color:var(--gv-date-picker-selected--c,var(--gv-theme-font-color-light,#fff))}.time>div.disabled{opacity:.4}`]}constructor(){super(),this._dayNamesOfWeek=[],this._monthsList=["01","02","03","04","05","06","07","08","09","10","11","12"],this.range=!1,this.currentDate=parseInt((0,t.format)((0,t.startOfDay)(Date.now()),"t"),10),this._hasGoToday=!0,this._hours=this.computeArrayOfTime(24),this._minutes=this.computeArrayOfTime(60),this._seconds=this.computeArrayOfTime(60)}set dateFrom(e){if(this._from=e,this.time&&this._from){const e=new Date(1e3*this._from);this._hour=(0,t.format)(e,"HH"),this._minute=(0,t.format)(e,"mm"),this.isStrictTime()&&(this._second=(0,t.format)(e,"ss"))}}set dateTo(t){this._to=t}computeArrayOfTime(t){return new Array(t).fill("").map(((t,e)=>{let i=e.toString();return 1===i.length&&(i=`0${i}`),i}))}_renderPreviousNav(){return this.prev||this.monthMode||this.yearMode?a.html`<gv-button link icon="navigation:angle-double-left" @click="${this._onPrevYear}" ?small="${this.small}"></gv-button>${this.monthMode||this.yearMode?"":a.html`<gv-button link icon="navigation:angle-left" ?small="${this.small}" @click="${this._onPrevMonth}"></gv-button>`}`:""}_renderCurrentNav(){return a.html`<div class="current">${this.yearMode?"":a.html`<gv-button link @click="${this._onSelectMonth}" ?small="${this.small}"><span class="monthName">${(0,o.until)(this.computeName(this.month,this.year))}</span></gv-button>`}<gv-button ?small="${this.small}" link @click="${this._onSelectYear}">${this.computeCurrentYearName()}</gv-button></div>`}_renderNextNav(){if(this.next||this.monthMode||this.yearMode)return a.html`${this.monthMode||this.yearMode?"":a.html`<gv-button link icon="navigation:angle-right" ?small="${this.small}" @click="${this._onNextMonth}"></gv-button>`}<gv-button ?small="${this.small}" link icon="navigation:angle-double-right" @click="${this._onNextYear}"></gv-button>`}_renderDays(){return a.html`${this._dayNamesOfWeek&&this._dayNamesOfWeek.map((t=>a.html`<div class="day">${t}</div>`))} ${this._dimensions&&this._dimensions.map((t=>a.html`${t&&t.map((t=>a.html`<div>${t?a.html`<gv-date-picker-cell .disabledDates="${this.disabledDates}" .min="${this.monthMode||this.yearMode?null:this.min}" .max="${this.monthMode||this.yearMode?null:this.max}" .month="${this.month}" .hoveredDate="${this.hoveredDate}" .dateTo="${this._to}" .dateFrom="${this._from}" .data="${t}" .time="${this.time}" ?isCurrent="${this.isCurrentDate(t)}" @gv-date-picker-cell:hover="${this._onHover}" @gv-date-picker-cell:select="${this._onSelect}"></gv-date-picker-cell>`:null}</div>`))}`))}`}isStrictTime(){return!0===this.time&&!0===this.strict}render(){const t={"calendar-grid":!0,"calendar-grid-large":this.monthMode||this.yearMode};return a.html`<div class="box">${this.isStrictTime()?"":a.html`<div class="box-col"><div class="nav">${this._renderPreviousNav()} ${this._renderCurrentNav()} ${this._renderNextNav()}</div><div class="${(0,e.classMap)(t)}">${this._renderDays()}</div></div>`} ${!this.time||this.monthMode||this.yearMode?"":a.html`<div class="box-col">${this.isStrictTime()?"":a.html`<div class="nav-times">${this.getTime()}</div>`}<div class="times"><div class="time">${this._hours&&this._hours.map((t=>a.html`<div @click="${this._onSelectHour.bind(this,t)}" class="${(0,e.classMap)({hour:!0,selected:this._hour===t,disabled:this.isHoursDisabled(t)})}">${t}</div>`))}</div><div class="time">${this._minutes&&this._minutes.map((t=>a.html`<div @click="${this._onSelectMinute.bind(this,t)}" class="${(0,e.classMap)({minute:!0,selected:this._minute===t,disabled:this.isMinutesDisabled(t)})}">${t}</div>`))}</div>${this.isStrictTime()?a.html`<div class="time">${this._seconds&&this._seconds.map((t=>a.html`<div @click="${this._onSelectSecond.bind(this,t)}" class="${(0,e.classMap)({second:!0,selected:this._second===t,disabled:this.isSecondsDisabled(t)})}">${t}</div>`))}</div>`:""}</div></div>`}</div>${this.hasGoToday()?a.html`<div class="foot"><gv-button link @click="${this.goToday}">${(0,s.i18n)("gv-date-picker.today")}</gv-button></div>`:""} ${!this.time||this.monthMode||this.yearMode?"":a.html`<div class="foot foot-time"><gv-button primary outlined small @click="${this._onNow}">${this.isStrictTime()?(0,s.i18n)("gv-date-picker.currentTime"):(0,s.i18n)("gv-date-picker.now")}</gv-button><gv-button primary small @click="${this._onDateTimeSelected}" .disabled="${!0===this.disableValidation}">${(0,s.i18n)("gv-date-picker.ok")}</gv-button></div>`}`}isMinutesDisabled(e){if(this._from&&null!=this._hour){const i=new Date(1e3*this._from);if(i.setHours(parseInt(this._hour,10),parseInt(e,10),0,0),this.min){const e=new Date(1e3*this.min);if((0,t.isBefore)(i,e))return!0}if(this.max){const e=new Date(1e3*this.max);if((0,t.isAfter)(i,e))return!0}}return!1}isSecondsDisabled(e){if(this._from&&null!=this._hour){const i=new Date(1e3*this._from);if(i.setHours(parseInt(this._hour,10),parseInt(e,10),0,0),this.min){const e=new Date(1e3*this.min);if((0,t.isBefore)(i,e))return!0}if(this.max){const e=new Date(1e3*this.max);if((0,t.isAfter)(i,e))return!0}}return!1}isHoursDisabled(t){if(this._from){const e=new Date(1e3*this._from);if(e.setHours(parseInt(t,10)),this.min){const t=new Date(1e3*this.min);if(t.setMinutes(0,0,0),e.getTime()<t.getTime())return!0}if(this.max){const t=new Date(1e3*this.max);if(e.getTime()>t.getTime())return!0}}return!1}_updateTime(){setTimeout((()=>{if(!this._hour||this.isHoursDisabled(this._hour)){const t=this.shadowRoot.querySelector(".hour:not(.disabled)");t&&(this._hour=t.textContent)}}),0),setTimeout((()=>{if(!this._minute||this.isMinutesDisabled(this._minute)){const t=this.shadowRoot.querySelector(".minute:not(.disabled)");t&&(this._minute=t.textContent)}}),0),this.isStrictTime()&&setTimeout((()=>{if(!this._second||this.isSecondsDisabled(this._second)){const t=this.shadowRoot.querySelector(".second:not(.disabled)");t&&(this._second=t.textContent)}}),0)}getTime(){return this._hour&&this._minute?`${this._hour}:${this._minute}`:""}isCurrentDate(e){return this.yearMode?(0,t.getYear)(1e3*e.date)===(0,t.getYear)(1e3*this.currentDate):this.monthMode?(0,t.getMonth)(1e3*e.date)===(0,t.getMonth)(1e3*this.currentDate):e.date===this.currentDate}updated(t){t.has("year")&&this.dispatchEvent(new CustomEvent("year-changed",{detail:{value:this.year}})),(t.has("locale")||t.has("year")||t.has("month")||t.has("monthMode")||t.has("yearMode"))&&this.yearAndMonthChanged(this.year,this.month),(t.has("_hour")||t.has("_minute"))&&this.shadowRoot.querySelectorAll(".selected").forEach((t=>{t.parentNode.scrollTop=t.offsetTop-t.parentNode.offsetTop}))}_updateDays(){const t=[];for(let e=0;e<7;e+=1)t.push(this.locale.localize.day(e,{width:"short"}));const e=this.locale.options.weekStartsOn,i=t.slice().splice(0,e);this._dayNamesOfWeek=t.slice().splice(e,t.length).concat(i)}yearAndMonthChanged(e,i){if(e&&i&&this.locale)if(this.yearMode){this._dayNamesOfWeek=[];const s=[null],{start:a,end:o}=this.getYearInterval(e);for(let e=a;e<o;e++){const a=`01/${i}/${e}`,o=(0,t.parse)(a,"dd/MM/yyyy",new Date,{awareOfUnicodeTokens:!0});s.push({hover:!1,date:parseInt((0,t.format)(o,"t"),10),title:this.computeName(i,e,"yyyy")})}s.push(null),this._dimensions=[s]}else if(this.monthMode)this._dayNamesOfWeek=[],this._dimensions=[this._monthsList.map((i=>{const s=`01/${i}/${e}`,a=(0,t.parse)(s,"dd/MM/yyyy",new Date,{awareOfUnicodeTokens:!0});return{hover:!1,date:parseInt((0,t.format)(a,"t"),10),title:this.computeName(i,this.year,"MMM")}}))];else{this._updateDays();let s=i;s=s.substring(s.length-2);let a=`01/${s}/${e}`,o=(0,t.parse)(a,"dd/MM/yyyy",new Date,{awareOfUnicodeTokens:!0});const r=(0,t.endOfMonth)(o),h=(0,t.format)(r,"dd/MM/yyyy",{awareOfUnicodeTokens:!0}),n=this.locale.options.weekStartsOn,d=[];let l=[];const m=6;for(;a!==h;){let e=(0,t.getDay)(o)-n;e<0&&(e=6);const i={hover:!1,date:parseInt((0,t.format)(o,"t"),10),title:parseInt((0,t.format)(o,"d",{awareOfUnicodeTokens:!0}),10)};if(l.push(i),e===m){for(let t=l.length;t<m+1;t+=1)l.unshift(0);d.push(l.slice()),l=[]}if(o=(0,t.addDays)(o,1),a=(0,t.format)(o,"dd/MM/yyyy",{awareOfUnicodeTokens:!0}),a===h){const e={hover:!1,date:parseInt((0,t.format)(o,"t"),10),title:parseInt((0,t.format)(o,"d",{awareOfUnicodeTokens:!0}),10)};l.push(e);for(let t=l.length;t<=m;t+=1)l.push(0);d.push(l.slice()),l=[]}}this._dimensions=d}}getYearInterval(t=this.year){let e=parseInt(t,10);for(;e%10!=0;)e--;return{start:e,end:e+10}}computeName(e,i,s="MMMM"){if(e&&i){const a=(0,t.parse)(`${e}/${i}`,"MM/yyyy",new Date);return(0,t.format)(a,s,{locale:this.locale})}return""}computeCurrentYearName(){if(this.yearMode){const{start:t,end:e}=this.getYearInterval();return`${t}-${e-1}`}return this.year}_onSelectHour(t){this._hour=t,this._updateTime()}_onSelectMinute(t){this._minute=t,this._updateTime()}_onSelectSecond(t){this._second=t,this._updateTime()}_onSelectMonth(){this.monthMode?this._from=this._dateFrom:(this._dateFrom=this._from,this._from=null),this.yearMode=!1,this.monthMode=!this.monthMode,this.yearAndMonthChanged(this.year,this.month),(0,i.dispatchCustomEvent)(this,"month-mode",{mode:this.monthMode,month:this.month,year:this.year})}_onSelectYear(){this.yearMode?this._from=this._dateFrom:(this._dateFrom=this._from,this._from=null),this.monthMode=!1,this.yearMode=!this.yearMode,this.yearAndMonthChanged(this.year,this.month),(0,i.dispatchCustomEvent)(this,"year-mode",{mode:this.yearMode,month:this.month,year:this.year})}get datetimeSelected(){this.isStrictTime()&&null==this._from&&(this._from=(new Date).valueOf()/1e3);let e=new Date(1e3*this._from);return e=(0,t.setHours)(e,parseInt(this._hour?this._hour:0,10)),e=(0,t.setMinutes)(e,parseInt(this._minute?this._minute:0,10)),e.getTime()/1e3}_onDateTimeSelected(){this.value=this.datetimeSelected,this.dispatchEvent(new CustomEvent("date-from-changed",{detail:{value:this.value}}))}_onNow(){const e=new Date;this.isStrictTime()||e.setSeconds(0,0),this._from=e.getTime()/1e3,this.month=(0,t.format)(e,"MM"),this.year=(0,t.format)(e,"yyyy"),this._hour=(0,t.format)(e,"HH"),this._minute=(0,t.format)(e,"mm"),this.isStrictTime()&&(this._second=(0,t.format)(e,"mm")),this.dispatchEvent(new CustomEvent("date-from-changed",{detail:{value:this._from}}))}get disableValidation(){const t=this.datetimeSelected;if(t){if(this.min&&t<this.min)return!0;if(this.max&&t>this.max)return!0}return!1}_onSelect({detail:e}){const{date:s}=e;if(this.yearMode){this.yearMode=!1,this.monthMode=!0,this._from=this._dateFrom;const e=new Date(1e3*s);this.year=(0,t.format)(e,"yyyy"),(0,i.dispatchCustomEvent)(this,"year-changed",{year:this.year})}else if(this.monthMode){this.monthMode=!1,this._from=this._dateFrom;const e=new Date(1e3*s);this.month=(0,t.format)(e,"MM"),this.year=(0,t.format)(e,"yyyy"),(0,i.dispatchCustomEvent)(this,"month-changed",{month:this.month,year:this.year})}else this.time?(this._from=s,this._updateTime()):this.range?(this._from&&this._to?(this._from=s,this._to=null,this.hoveredDate=void 0,this.dispatchEvent(new CustomEvent("hovered-date-changed",{detail:{value:this.hoveredDate}}))):!this._from||this._from&&s<this._from?this._from=s:(!this._to||this._to&&s>this._to)&&(this._to=s),this.dispatchEvent(new CustomEvent("date-from-changed",{detail:{value:this._from}})),this.dispatchEvent(new CustomEvent("date-to-changed",{detail:{value:this._to}}))):(this._from=s,this.dispatchEvent(new CustomEvent("date-from-changed",{detail:{value:this._from}})))}_onHover(t){this.range&&(this.hoveredDate=t.detail.date,this.dispatchEvent(new CustomEvent("hovered-date-changed",{detail:{value:this.hoveredDate}})))}_onNextMonth(){const e=(0,t.parse)(this.month,"MM",new Date),i=(0,t.addMonths)(e,1),s=(0,t.format)(i,"MM",{locale:this.locale});if(this.month=s,"01"===this.month){const e=(0,t.parse)(this.year,"yyyy",new Date),i=(0,t.addYears)(e,1),s=(0,t.format)(i,"yyyy",{locale:this.locale});this.year=s}}_onPrevMonth(){const e=(0,t.parse)(this.month,"MM",new Date),i=(0,t.subMonths)(e,1),s=(0,t.format)(i,"MM",{locale:this.locale});if(this.month=s,"12"===this.month){const e=(0,t.parse)(this.year,"yyyy",new Date),i=(0,t.subYears)(e,1),s=(0,t.format)(i,"yyyy",{locale:this.locale});this.year=s}}_onNextYear(){this.yearMode&&(this.year=parseInt(this.year,10)+10);const e=(0,t.parse)(this.year,"yyyy",new Date),i=(0,t.addYears)(e,1),s=(0,t.format)(i,"yyyy",{locale:this.locale});this.year=s}_onPrevYear(){this.yearMode&&(this.year=parseInt(this.year,10)-10);const e=(0,t.parse)(this.year,"yyyy",new Date),i=(0,t.subYears)(e,1),s=(0,t.format)(i,"yyyy",{locale:this.locale});this.year=s}goToday(){this.month=`0${(0,t.getMonth)(new Date)+1}`.slice(-2),this.year=(0,t.getYear)(new Date),this._onSelect({detail:{date:(new Date).getTime()/1e3}})}hasGoToday(){return!this.range&&!this.time&&!this.monthMode&&!this.yearMode&&this._hasGoToday}}exports.GvDatePickerCalendar=r,window.customElements.define("gv-date-picker-calendar",r);