@materializecss/materialize 1.2.2 → 2.0.1-alpha

package/{js/datepicker.js → src/datepicker.ts}

@@ -1,131 +1,127 @@
-(function($) {
-  'use strict';
-
-  let _defaults = {
-    // Close when date is selected
-    autoClose: false,
-
-    // the default output format for the input field value
-    format: 'mmm dd, yyyy',
-
-    // Used to create date object from current input string
-    parse: null,
-
-    // The initial date to view when first opened
-    defaultDate: null,
-
-    // Make the `defaultDate` the initial selected value
-    setDefaultDate: false,
-
-    disableWeekends: false,
-
-    disableDayFn: null,
-
-    // First day of week (0: Sunday, 1: Monday etc)
-    firstDay: 0,
-
-    // The earliest date that can be selected
-    minDate: null,
-    // Thelatest date that can be selected
-    maxDate: null,
-
-    // Number of years either side, or array of upper/lower range
-    yearRange: 10,
-
-    // used internally (don't config outside)
-    minYear: 0,
-    maxYear: 9999,
-    minMonth: undefined,
-    maxMonth: undefined,
-
-    startRange: null,
-    endRange: null,
-
-    isRTL: false,
-
-    // Render the month after year in the calendar title
-    showMonthAfterYear: false,
-
-    // Render days of the calendar grid that fall in the next or previous month
-    showDaysInNextAndPreviousMonths: false,
-
-    // Specify a DOM element to render the calendar in
-    container: null,
-
-    // Show clear button
-    showClearBtn: false,
-
-    // internationalization
-    i18n: {
-      cancel: 'Cancel',
-      clear: 'Clear',
-      done: 'Ok',
-      previousMonth: '‹',
-      nextMonth: '›',
-      months: [
-        'January',
-        'February',
-        'March',
-        'April',
-        'May',
-        'June',
-        'July',
-        'August',
-        'September',
-        'October',
-        'November',
-        'December'
-      ],
-      monthsShort: [
-        'Jan',
-        'Feb',
-        'Mar',
-        'Apr',
-        'May',
-        'Jun',
-        'Jul',
-        'Aug',
-        'Sep',
-        'Oct',
-        'Nov',
-        'Dec'
-      ],
-      weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
-      weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-      weekdaysAbbrev: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
-    },
-
-    // events array
-    events: [],
-
-    // callback function
-    onSelect: null,
-    onOpen: null,
-    onClose: null,
-    onDraw: null
-  };
-
-  /**
-   * @class
-   *
-   */
-  class Datepicker extends Component {
-    /**
-     * Construct Datepicker instance and set up overlay
-     * @constructor
-     * @param {Element} el
-     * @param {Object} options
-     */
+import { Component } from "./component";
+import { M } from "./global";
+import { Modal } from "./modal";
+import { FormSelect } from "./select";
+
+let _defaults = {
+  // Close when date is selected
+  autoClose: false,
+  // the default output format for the input field value
+  format: 'mmm dd, yyyy',
+  // Used to create date object from current input string
+  parse: null,
+  // The initial date to view when first opened
+  defaultDate: null,
+  // Make the `defaultDate` the initial selected value
+  setDefaultDate: false,
+  disableWeekends: false,
+  disableDayFn: null,
+  // First day of week (0: Sunday, 1: Monday etc)
+  firstDay: 0,
+  // The earliest date that can be selected
+  minDate: null,
+  // Thelatest date that can be selected
+  maxDate: null,
+  // Number of years either side, or array of upper/lower range
+  yearRange: 10,
+  // used internally (don't config outside)
+  minYear: 0,
+  maxYear: 9999,
+  minMonth: undefined,
+  maxMonth: undefined,
+  startRange: null,
+  endRange: null,
+  isRTL: false,
+  // Render the month after year in the calendar title
+  showMonthAfterYear: false,
+  // Render days of the calendar grid that fall in the next or previous month
+  showDaysInNextAndPreviousMonths: false,
+  // Specify a DOM element to render the calendar in
+  container: null,
+  // Show clear button
+  showClearBtn: false,
+  // internationalization
+  i18n: {
+    cancel: 'Cancel',
+    clear: 'Clear',
+    done: 'Ok',
+    previousMonth: '‹',
+    nextMonth: '›',
+    months: [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December'
+    ],
+    monthsShort: [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec'
+    ],
+    weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    weekdaysAbbrev: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
+  },
+  // events array
+  events: [],
+  // callback function
+  onSelect: null,
+  onOpen: null,
+  onClose: null,
+  onDraw: null
+};
+
+  export class Datepicker extends Component {
+    el: HTMLInputElement
+    id: string;
+    isOpen: boolean;
+    modal: Modal;
+    calendarEl: HTMLElement;
+    clearBtn: HTMLElement;
+    doneBtn: HTMLElement;
+    cancelBtn: HTMLElement;
+    modalEl: HTMLElement;
+    yearTextEl: HTMLElement;
+    dateTextEl: HTMLElement;
+    date: any;
+    formats: any;
+    calendars: any;
+    private _y: any;
+    private _m: any;
+    private _handleInputKeydownBound: any;
+    private _handleInputClickBound: any;
+    private _handleInputChangeBound: any;
+    private _handleCalendarClickBound: any;
+    private _finishSelectionBound: any;
+    private _closeBound: any;
+    private _handleClearClickBound: any;
+    static _template: string;
+
     constructor(el, options) {
       super(Datepicker, el, options);
-
-      this.el.M_Datepicker = this;
-
-      this.options = $.extend({}, Datepicker.defaults, options);
+      (this.el as any).M_Datepicker = this;
+      this.options = {...Datepicker.defaults, ...options};
 
       // make sure i18n defaults are not lost when only few i18n option properties are passed
       if (!!options && options.hasOwnProperty('i18n') && typeof options.i18n === 'object') {
-        this.options.i18n = $.extend({}, Datepicker.defaults.i18n, options.i18n);
+        this.options.i18n = {...Datepicker.defaults.i18n, ...options.i18n};
       }
 
       // Remove time component from minDate and maxDate options
@@ -137,7 +133,6 @@
       this._setupVariables();
       this._insertHTMLIntoDOM();
       this._setupModal();
-
       this._setupEventHandlers();
 
       if (!this.options.defaultDate) {
@@ -149,17 +144,14 @@
         if (this.options.setDefaultDate) {
           this.setDate(defDate, true);
           this.setInputValue();
-        } else {
+        }
+        else {
           this.gotoDate(defDate);
         }
-      } else {
+      }
+      else {
         this.gotoDate(new Date());
       }
-
-      /**
-       * Describes open/close state of datepicker
-       * @type {Boolean}
-       */
       this.isOpen = false;
     }
 
@@ -198,94 +190,74 @@
     static _compareDates(a, b) {
       // weak date comparison (use setToStartOfDay(date) to ensure correct result)
       return a.getTime() === b.getTime();
-    }
+    }  
 
-    static _setToStartOfDay(date) {
-      if (Datepicker._isDate(date)) date.setHours(0, 0, 0, 0);
-    }
-
-    /**
-     * Get Instance
-     */
     static getInstance(el) {
       let domElem = !!el.jquery ? el[0] : el;
       return domElem.M_Datepicker;
     }
 
-    /**
-     * Teardown component
-     */
     destroy() {
       this._removeEventHandlers();
       this.modal.destroy();
-      $(this.modalEl).remove();
+      this.modalEl.remove();
       this.destroySelects();
-      this.el.M_Datepicker = undefined;
+      (this.el as any).M_Datepicker = undefined;
     }
 
     destroySelects() {
       let oldYearSelect = this.calendarEl.querySelector('.orig-select-year');
       if (oldYearSelect) {
-        M.FormSelect.getInstance(oldYearSelect).destroy();
+        FormSelect.getInstance(oldYearSelect).destroy();
       }
       let oldMonthSelect = this.calendarEl.querySelector('.orig-select-month');
       if (oldMonthSelect) {
-        M.FormSelect.getInstance(oldMonthSelect).destroy();
+        FormSelect.getInstance(oldMonthSelect).destroy();
       }
     }
 
     _insertHTMLIntoDOM() {
       if (this.options.showClearBtn) {
-        $(this.clearBtn).css({ visibility: '' });
-        this.clearBtn.innerHTML = this.options.i18n.clear;
+        this.clearBtn.style.visibility = '';
+        this.clearBtn.innerText = this.options.i18n.clear;
       }
-
-      this.doneBtn.innerHTML = this.options.i18n.done;
-      this.cancelBtn.innerHTML = this.options.i18n.cancel;
+      this.doneBtn.innerText = this.options.i18n.done;
+      this.cancelBtn.innerText = this.options.i18n.cancel;
 
       if (this.options.container) {
         const optEl = this.options.container;
         this.options.container =
           optEl instanceof HTMLElement ? optEl : document.querySelector(optEl);
-        this.$modalEl.appendTo(this.options.container);
-      } else {
-        this.$modalEl.insertBefore(this.el);
+        this.options.container.append(this.modalEl);
+      }
+      else {
+        //this.modalEl.before(this.el);
+        this.el.parentElement.appendChild(this.modalEl);
       }
     }
 
     _setupModal() {
       this.modalEl.id = 'modal-' + this.id;
-      this.modal = M.Modal.init(this.modalEl, {
+      this.modal = Modal.init(this.modalEl, {
         onCloseEnd: () => {
           this.isOpen = false;
         }
       });
     }
 
-    toString(format) {
+    toString(format: string | ((d: Date) => string) = null): string {
       format = format || this.options.format;
-      if (typeof format === 'function') {
-        return format(this.date);
-      }
-
-      if (!Datepicker._isDate(this.date)) {
-        return '';
-      }
-
-      let formatArray = format.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g);
-      let formattedDate = formatArray
-        .map((label) => {
-          if (this.formats[label]) {
-            return this.formats[label]();
-          }
-
-          return label;
-        })
+      if (typeof format === 'function') return format(this.date);
+      if (!Datepicker._isDate(this.date)) return '';
+      // String Format
+      const formatArray = format.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g);
+      const formattedDate = formatArray
+        .map(label => this.formats[label] ? this.formats[label]() : label)
         .join('');
       return formattedDate;
     }
 
-    setDate(date, preventOnSelect) {
+    setDate(date, preventOnSelect: boolean = false) {
       if (!date) {
         this.date = null;
         this._renderDateDisplay();
@@ -297,23 +269,18 @@
       if (!Datepicker._isDate(date)) {
         return;
       }
-
       let min = this.options.minDate,
         max = this.options.maxDate;
-
       if (Datepicker._isDate(min) && date < min) {
         date = min;
-      } else if (Datepicker._isDate(max) && date > max) {
+      }
+      else if (Datepicker._isDate(max) && date > max) {
         date = max;
       }
-
       this.date = new Date(date.getTime());
-
       this._renderDateDisplay();
-
       Datepicker._setToStartOfDay(this.date);
       this.gotoDate(this.date);
-
       if (!preventOnSelect && typeof this.options.onSelect === 'function') {
         this.options.onSelect.call(this, this.date);
       }
@@ -321,7 +288,7 @@
 
     setInputValue() {
       this.el.value = this.toString();
-      this.$el.trigger('change', { firedBy: this });
+      this.el.dispatchEvent(new CustomEvent('change', {detail: {firedBy: this}}));
     }
 
     _renderDateDisplay() {
@@ -334,16 +301,11 @@
       this.dateTextEl.innerHTML = `${day}, ${month} ${date}`;
     }
 
-    /**
-     * change view to a specific date
-     */
     gotoDate(date) {
       let newCalendar = true;
-
       if (!Datepicker._isDate(date)) {
         return;
       }
-
       if (this.calendars) {
         let firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1),
           lastVisibleDate = new Date(
@@ -358,7 +320,6 @@
         newCalendar =
           visibleDate < firstVisibleDate.getTime() || lastVisibleDate.getTime() < visibleDate;
       }
-
       if (newCalendar) {
         this.calendars = [
           {
@@ -367,7 +328,6 @@
           }
         ];
       }
-
       this.adjustCalendars();
     }
 
@@ -596,15 +556,13 @@
         );
       }
 
-      monthHtml =
-        '<select class="datepicker-select orig-select-month" tabindex="-1">' +
-        arr.join('') +
-        '</select>';
+      monthHtml = '<select class="datepicker-select orig-select-month" tabindex="-1">'+arr.join('')+'</select>';
 
-      if ($.isArray(opts.yearRange)) {
+      if (Array.isArray(opts.yearRange)) {
         i = opts.yearRange[0];
         j = opts.yearRange[1] + 1;
-      } else {
+      }
+      else {
         i = year - opts.yearRange;
         j = 1 + year + opts.yearRange;
       }
@@ -614,19 +572,15 @@
           arr.push(`<option value="${i}" ${i === year ? 'selected="selected"' : ''}>${i}</option>`);
         }
       }
-      if (opts.yearRangeReverse) {
-        arr.reverse();
-      }
+      if (opts.yearRangeReverse) arr.reverse();
 
-      yearHtml = `<select class="datepicker-select orig-select-year" tabindex="-1">${arr.join(
-        ''
-      )}</select>`;
+      yearHtml = `<select class="datepicker-select orig-select-year" tabindex="-1">${arr.join('')}</select>`;
 
       let leftArrow =
-        '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>';
+        '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>';
       html += `<button class="month-prev${
         prev ? '' : ' is-disabled'
-      }" type="button">${leftArrow}</button>`;
+      } btn-flat" type="button">${leftArrow}</button>`;
 
       html += '<div class="selects-container">';
       if (opts.showMonthAfterYear) {
@@ -645,21 +599,17 @@
       }
 
       let rightArrow =
-        '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>';
+        '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>';
       html += `<button class="month-next${
         next ? '' : ' is-disabled'
-      }" type="button">${rightArrow}</button>`;
+      } btn-flat" type="button">${rightArrow}</button>`;
 
       return (html += '</div>');
     }
 
-    /**
-     * refresh the HTML
-     */
-    draw(force) {
-      if (!this.isOpen && !force) {
-        return;
-      }
+    // refresh HTML
+    draw(force: boolean = false) {
+      if (!this.isOpen && !force) return;
       let opts = this.options,
         minYear = opts.minYear,
         maxYear = opts.maxYear,
@@ -708,11 +658,11 @@
       // Init Materialize Select
       let yearSelect = this.calendarEl.querySelector('.orig-select-year');
       let monthSelect = this.calendarEl.querySelector('.orig-select-month');
-      M.FormSelect.init(yearSelect, {
+      FormSelect.init(yearSelect, {
         classes: 'select-year',
         dropdownOptions: { container: document.body, constrainWidth: false }
       });
-      M.FormSelect.init(monthSelect, {
+      FormSelect.init(monthSelect, {
         classes: 'select-month',
         dropdownOptions: { container: document.body, constrainWidth: false }
       });
@@ -726,9 +676,6 @@
       }
     }
 
-    /**
-     * Setup Event Handlers
-     */
     _setupEventHandlers() {
       this._handleInputKeydownBound = this._handleInputKeydown.bind(this);
       this._handleInputClickBound = this._handleInputClick.bind(this);
@@ -752,11 +699,11 @@
     }
 
     _setupVariables() {
-      this.$modalEl = $(Datepicker._template);
-      this.modalEl = this.$modalEl[0];
+      const template = document.createElement('template');
+      template.innerHTML = Datepicker._template.trim();
+      this.modalEl = <HTMLElement>template.content.firstChild;
 
       this.calendarEl = this.modalEl.querySelector('.datepicker-calendar');
-
       this.yearTextEl = this.modalEl.querySelector('.year-text');
       this.dateTextEl = this.modalEl.querySelector('.date-text');
       if (this.options.showClearBtn) {
@@ -801,9 +748,6 @@
       };
     }
 
-    /**
-     * Remove Event Handlers
-     */
     _removeEventHandlers() {
       this.el.removeEventListener('click', this._handleInputClickBound);
       this.el.removeEventListener('keydown', this._handleInputKeydownBound);
@@ -823,17 +767,14 @@
     }
 
     _handleCalendarClick(e) {
-      if (!this.isOpen) {
-        return;
-      }
-
-      let $target = $(e.target);
-      if (!$target.hasClass('is-disabled')) {
+      if (!this.isOpen) return;
+      const target = <HTMLElement>(e.target);
+      if (!target.classList.contains('is-disabled')) {
         if (
-          $target.hasClass('datepicker-day-button') &&
-          !$target.hasClass('is-empty') &&
-          !$target.parent().hasClass('is-disabled')
-        ) {
+          target.classList.contains('datepicker-day-button') &&
+          !target.classList.contains('is-empty') &&
+          !target.parentElement.classList.contains('is-disabled')
+        ) {          
           this.setDate(
             new Date(
               e.target.getAttribute('data-year'),
@@ -844,9 +785,11 @@
           if (this.options.autoClose) {
             this._finishSelection();
           }
-        } else if ($target.closest('.month-prev').length) {
+        }
+        else if (target.closest('.month-prev')) {
           this.prevMonth();
-        } else if ($target.closest('.month-next').length) {
+        }
+        else if (target.closest('.month-next')) {
           this.nextMonth();
         }
       }
@@ -866,9 +809,7 @@
       this.gotoYear(e.target.value);
     }
 
-    /**
-     * change view to a specific month (zero-index, e.g. 0: January)
-     */
+    // change view to a specific month (zero-index, e.g. 0: January)
     gotoMonth(month) {
       if (!isNaN(month)) {
         this.calendars[0].month = parseInt(month, 10);
@@ -876,9 +817,7 @@
       }
     }
 
-    /**
-     * change view to a specific full year (e.g. "2012")
-     */
+    // change view to a specific full year (e.g. "2012")
     gotoYear(year) {
       if (!isNaN(year)) {
         this.calendars[0].year = parseInt(year, 10);
@@ -886,25 +825,20 @@
       }
     }
 
-    _handleInputChange(e) {
+    _handleInputChange(e: Event) {
       let date;
-
       // Prevent change event from being fired when triggered by the plugin
-      if (e.firedBy === this) {
-        return;
-      }
+      if (e['detail']?.firedBy === this) return;
       if (this.options.parse) {
         date = this.options.parse(this.el.value, this.options.format);
-      } else {
-        date = new Date(Date.parse(this.el.value));
       }
-
-      if (Datepicker._isDate(date)) {
-        this.setDate(date);
+      else {
+        date = new Date(Date.parse(this.el.value));
       }
+      if (Datepicker._isDate(date)) this.setDate(date);
     }
 
-    renderDayName(opts, day, abbr) {
+    renderDayName(opts, day, abbr: boolean = false) {
       day += opts.firstDay;
       while (day >= 7) {
         day -= 7;
@@ -912,39 +846,25 @@
       return abbr ? opts.i18n.weekdaysAbbrev[day] : opts.i18n.weekdays[day];
     }
 
-    /**
-     * Set input value to the selected date and close Datepicker
-     */
+    // Set input value to the selected date and close Datepicker
     _finishSelection() {
       this.setInputValue();
       this.close();
     }
 
-    /**
-     * Open Datepicker
-     */
     open() {
-      if (this.isOpen) {
-        return;
-      }
-
+      if (this.isOpen) return;
       this.isOpen = true;
       if (typeof this.options.onOpen === 'function') {
         this.options.onOpen.call(this);
       }
       this.draw();
-      this.modal.open();
+      this.modal.open(undefined);
       return this;
     }
 
-    /**
-     * Close Datepicker
-     */
     close() {
-      if (!this.isOpen) {
-        return;
-      }
-
+      if (!this.isOpen) return;
       this.isOpen = false;
       if (typeof this.options.onClose === 'function') {
         this.options.onClose.call(this);
@@ -952,32 +872,26 @@
       this.modal.close();
       return this;
     }
-  }
-
-  Datepicker._template = [
-    '<div class= "modal datepicker-modal">',
-    '<div class="modal-content datepicker-container">',
-    '<div class="datepicker-date-display">',
-    '<span class="year-text"></span>',
-    '<span class="date-text"></span>',
-    '</div>',
-    '<div class="datepicker-calendar-container">',
-    '<div class="datepicker-calendar"></div>',
-    '<div class="datepicker-footer">',
-    '<button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>',
-    '<div class="confirmation-btns">',
-    '<button class="btn-flat datepicker-cancel waves-effect" type="button"></button>',
-    '<button class="btn-flat datepicker-done waves-effect" type="button"></button>',
-    '</div>',
-    '</div>',
-    '</div>',
-    '</div>',
-    '</div>'
-  ].join('');
-
-  M.Datepicker = Datepicker;
-
-  if (M.jQueryLoaded) {
-    M.initializeJqueryWrapper(Datepicker, 'datepicker', 'M_Datepicker');
-  }
-})(cash);
+
+    static {
+      Datepicker._template = `
+        <div class="modal datepicker-modal">
+          <div class="modal-content datepicker-container">
+            <div class="datepicker-date-display">
+              <span class="year-text"></span>
+              <span class="date-text"></span>
+            </div>
+            <div class="datepicker-calendar-container">
+              <div class="datepicker-calendar"></div>
+              <div class="datepicker-footer">
+                <button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>
+                <div class="confirmation-btns">
+                  <button class="btn-flat datepicker-cancel waves-effect" type="button"></button>
+                  <button class="btn-flat datepicker-done waves-effect" type="button"></button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>`;
+    }
+  }