package.src.vaadin-month-calendar.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of date-picker Show documentation
Web component providing a date selection field with scrollable month calendar
There is a newer version: 24.6.0
/**
 * @license
 * Copyright (c) 2016 - 2024 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
import '@polymer/polymer/lib/elements/dom-repeat.js';
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { dateAllowed, dateEquals, normalizeDate } from './vaadin-date-picker-helper.js';
import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
import { monthCalendarStyles } from './vaadin-month-calendar-styles.js';

registerStyles('vaadin-month-calendar', monthCalendarStyles, {
  moduleId: 'vaadin-month-calendar-styles',
});

/**
 * @customElement
 * @extends HTMLElement
 * @private
 */
class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
  static get template() {
    return html`
      [[_getTitle(month, i18n)]]
      
        
          
            
            
          
        
        
          
        
      
    `;
  }

  static get is() {
    return 'vaadin-month-calendar';
  }

  static get properties() {
    return {
      /** @protected */
      _days: {
        type: Array,
        computed: '_getDays(month, i18n, minDate, maxDate, isDateDisabled)',
      },

      /** @protected */
      _weeks: {
        type: Array,
        computed: '_getWeeks(_days)',
      },

      disabled: {
        type: Boolean,
        reflectToAttribute: true,
        computed: '_isDisabled(month, minDate, maxDate)',
      },
    };
  }

  static get observers() {
    return ['_showWeekNumbersChanged(showWeekNumbers, i18n)'];
  }

  /** @private */
  _showWeekNumbersChanged(showWeekNumbers, i18n) {
    if (showWeekNumbers && i18n && i18n.firstDayOfWeek === 1) {
      this.setAttribute('week-numbers', '');
    } else {
      this.removeAttribute('week-numbers');
    }
  }

  /** @private */
  // eslint-disable-next-line @typescript-eslint/max-params
  __getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled) {
    const result = ['date'];
    const greaterThanToday = date > normalizeDate(new Date());
    const lessThanToday = date < normalizeDate(new Date());

    if (this.__isDayDisabled(date, minDate, maxDate, isDateDisabled)) {
      result.push('disabled');
    }

    if (this.__isDayFocused(date, focusedDate)) {
      result.push('focused');
    }

    if (this.__isDaySelected(date, selectedDate)) {
      result.push('selected');
    }

    if (this._isToday(date)) {
      result.push('today');
    }

    if (lessThanToday) {
      result.push('past');
    }

    if (greaterThanToday) {
      result.push('future');
    }

    return result.join(' ');
  }

  /** @private */
  __isDayFocused(date, focusedDate) {
    return dateEquals(date, focusedDate);
  }

  /** @private */
  __isDaySelected(date, selectedDate) {
    return dateEquals(date, selectedDate);
  }

  /** @private */
  __getDayAriaSelected(date, selectedDate) {
    if (this.__isDaySelected(date, selectedDate)) {
      return 'true';
    }
  }

  /** @private */
  __isDayDisabled(date, minDate, maxDate, isDateDisabled) {
    return !dateAllowed(date, minDate, maxDate, isDateDisabled);
  }

  /** @private */
  __getDayAriaDisabled(date, min, max, isDateDisabled) {
    if (date === undefined || (min === undefined && max === undefined && isDateDisabled === undefined)) {
      return;
    }

    if (this.__isDayDisabled(date, min, max, isDateDisabled)) {
      return 'true';
    }
  }

  /** @private */
  __getDayTabindex(date, focusedDate) {
    if (this.__isDayFocused(date, focusedDate)) {
      return '0';
    }

    return '-1';
  }
}

defineCustomElement(MonthCalendar);