Pickers modal display plugin

components/datepicker/_datepicker.scss

@@ -1,18 +1,11 @@
-/* Modal */
-// @removed since v2.2.1
-/*.datepicker-modal {
-  max-width: 325px;
-  // @removed since v2.2.1-dev regarding Material M3 standards
-  min-width: 300px;
-  max-height: none;
-}*/
+@use './mixins.module.scss' as *;
 
 .datepicker-container {
   display: flex;
   flex-direction: column;
   max-width: 325px;
   padding: 0;
-  background-color: var(--md-sys-color-surface);
+  background-color: var(--md-sys-color-inverse-on-surface);
 }
 
 .datepicker-controls {
@@ -34,8 +27,8 @@
       text-align: center;
 
       &:focus {
-        border-bottom: none;
-        background-color: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-primary);
+        background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
       }
 
       &::selection {
@@ -70,6 +63,12 @@
   .month-next {
     display: inline-flex;
     align-items: center;
+
+    @include btn($height: 49px);
+
+    &:focus {
+      background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+    }
   }
 
   .month-prev > svg,
@@ -261,3 +260,9 @@
   color: var(--md-sys-color-error);
 }
 
+/* Display modes */
+.datepicker-modal {
+  max-width: calc(325px + var(--modal-padding)*2);
+  max-height: none;
+  background-color: var(--md-sys-color-inverse-on-surface);
+}

components/datepicker/datepicker.ts

@@ -2,6 +2,7 @@ import { Utils } from '../../src/utils';
 import { BaseOptions, Component, I18nOptions, InitElements, MElement } from '../../src/component';
 import { FormSelect } from '../text-fields/select';
 import { DockedDisplayPlugin } from '../../src/dockedDisplayPlugin';
+import { ModalDisplayPlugin } from '../../src/modalDisplayPlugin';
 
 export interface DateI18nOptions extends I18nOptions {
   previousMonth: string;
@@ -293,7 +294,7 @@ const _defaults: DatepickerOptions = {
   displayPlugin: null,
   displayPluginOptions: null,
   onConfirm: null,
-  onCancel: null
+  onCancel: null,
 };
 
 export class Datepicker extends Component<DatepickerOptions> {
@@ -321,7 +322,7 @@ export class Datepicker extends Component<DatepickerOptions> {
   calendars: [{ month: number; year: number }];
   private _y: number;
   private _m: number;
-  private displayPlugin: DockedDisplayPlugin;
+  private displayPlugin: DockedDisplayPlugin | ModalDisplayPlugin;
   private footer: HTMLElement;
   static _template: string;
 
@@ -348,46 +349,8 @@ export class Datepicker extends Component<DatepickerOptions> {
     this._setupVariables();
     this._insertHTMLIntoDOM();
     this._setupEventHandlers();
-
-    if (!this.options.defaultDate) {
-      this.options.defaultDate = new Date(Date.parse(this.el.value));
-    }
-
-    const defDate = this.options.defaultDate;
-    if (Datepicker._isDate(defDate)) {
-      if (this.options.setDefaultDate) {
-        this.setDate(defDate, true);
-        this.setInputValue(this.el, defDate);
-      } else {
-        this.gotoDate(defDate);
-      }
-    } else {
-      this.gotoDate(new Date());
-    }
-    if (this.options.isDateRange) {
-      this.multiple = true;
-      const defEndDate = this.options.defaultEndDate;
-      if (Datepicker._isDate(defEndDate)) {
-        if (this.options.setDefaultEndDate) {
-          this.setDate(defEndDate, true, true);
-          this.setInputValue(this.endDateEl, defEndDate);
-        }
-      }
-    }
-    if (this.options.isMultipleSelection) {
-      this.multiple = true;
-      this.dates = [];
-      this.dateEls = [];
-      this.dateEls.push(el);
-    }
-    if (this.options.displayPlugin) {
-      if (this.options.displayPlugin === 'docked')
-        this.displayPlugin = DockedDisplayPlugin.init(
-          this.el,
-          this.containerEl,
-          this.options.displayPluginOptions
-        );
-    }
+    if (this.options.displayPlugin) this._setupDisplayPlugin();
+    this._pickerSetup();
   }
 
   static get defaults() {
@@ -510,12 +473,6 @@ export class Datepicker extends Component<DatepickerOptions> {
       }
     }
 
-    /*if (this.options.showClearBtn) {
-      this.clearBtn.style.visibility = '';
-      this.clearBtn.innerText = this.options.i18n.clear;
-    }
-    this.doneBtn.innerText = this.options.i18n.done;
-    this.cancelBtn.innerText = this.options.i18n.cancel;*/
     Utils.createButton(
       this.footer,
       this.options.i18n.clear,
@@ -540,13 +497,7 @@ export class Datepicker extends Component<DatepickerOptions> {
         optEl instanceof HTMLElement ? optEl : (document.querySelector(optEl) as HTMLElement);
       this.options.container.append(this.containerEl);
     } else {
-      //this.containerEl.before(this.el);
       const appendTo = !this.endDateEl ? this.el : this.endDateEl;
-      if (!this.options.openByDefault)
-        (this.containerEl as HTMLElement).setAttribute(
-          'style',
-          'display: none; visibility: hidden;'
-        );
       appendTo.parentElement.after(this.containerEl);
     }
   }
@@ -723,6 +674,38 @@ export class Datepicker extends Component<DatepickerOptions> {
     );
   }
 
+  /**
+   * Display plugin setup.
+   */
+  _setupDisplayPlugin() {
+    const displayPluginOptions = {
+      ...this.options.displayPluginOptions,
+      ...{
+        onOpen: () => {
+          document.querySelectorAll('.select-dropdown').forEach((e: HTMLInputElement) => {
+            e.tabIndex = 0;
+          });
+        },
+        onClose: () => {
+          document.querySelectorAll('.select-dropdown').forEach((e: HTMLInputElement) => {
+            e.tabIndex = -1;
+          });
+        }
+      }
+    }
+
+    if (this.options.displayPlugin === 'docked') this.displayPlugin = DockedDisplayPlugin.init(this.el, this.containerEl, displayPluginOptions);
+    if (this.options.displayPlugin === 'modal') {
+      this.displayPlugin = ModalDisplayPlugin.init(this.el, this.containerEl, {
+        ...displayPluginOptions,
+        ...{ classList: ['datepicker-modal'] }
+      });
+      this.footer.remove();
+      this.footer = this.displayPlugin.footer;
+    }
+    if (this.options.openByDefault) this.displayPlugin.show();
+  }
+
   /**
    * Renders the date in the modal head section.
    */
@@ -1093,7 +1076,6 @@ export class Datepicker extends Component<DatepickerOptions> {
       maxYear = opts.maxYear,
       minMonth = opts.minMonth,
       maxMonth = opts.maxMonth;
-    let html = '';
 
     if (this._y <= minYear) {
       this._y = minYear;
@@ -1108,12 +1090,19 @@ export class Datepicker extends Component<DatepickerOptions> {
       }
     }
 
+    setTimeout(() => {
+      this.drawHTML();
+    }, 10);
+  }
+
+  drawHTML() {
     const randId =
       'datepicker-title-' +
       Math.random()
         .toString(36)
         .replace(/[^a-z]+/g, '')
         .substr(0, 2);
+    let html = '';
 
     for (let c = 0; c < 1; c++) {
       if (!this.options.isDateRange) {
@@ -1163,12 +1152,6 @@ export class Datepicker extends Component<DatepickerOptions> {
     this.el.addEventListener('keydown', this._handleInputKeydown);
     this.el.addEventListener('change', this._handleInputChange);
     this.calendarEl.addEventListener('click', this._handleCalendarClick);
-    /* this.doneBtn.addEventListener('click', this._confirm);
-    this.cancelBtn.addEventListener('click', this._cancel);
-
-    if (this.options.showClearBtn) {
-      this.clearBtn.addEventListener('click', this._handleClearClick);
-    }*/
   }
 
   _setupVariables() {
@@ -1180,11 +1163,6 @@ export class Datepicker extends Component<DatepickerOptions> {
     this.calendarEl = this.containerEl.querySelector('.datepicker-calendar');
     this.yearTextEl = this.containerEl.querySelector('.year-text');
     this.dateTextEl = this.containerEl.querySelector('.date-text');
-    /* if (this.options.showClearBtn) {
-      this.clearBtn = this.containerEl.querySelector('.datepicker-clear');
-    }
-    this.doneBtn = this.containerEl.querySelector('.datepicker-done');
-    this.cancelBtn = this.containerEl.querySelector('.datepicker-cancel');*/
     this.footer = this.containerEl.querySelector('.datepicker-footer');
 
     this.formats = {
@@ -1223,6 +1201,42 @@ export class Datepicker extends Component<DatepickerOptions> {
     };
   }
 
+  _pickerSetup() {
+    if (!this.options.defaultDate) {
+      this.options.defaultDate = new Date(Date.parse(this.el.value));
+    }
+
+    const defDate = this.options.defaultDate;
+    if (Datepicker._isDate(defDate)) {
+      if (this.options.setDefaultDate) {
+        this.setDate(defDate, true);
+        this.setInputValue(this.el, defDate);
+      } else {
+        this.gotoDate(defDate);
+      }
+    } else {
+      this.gotoDate(new Date());
+    }
+
+    if (this.options.isDateRange) {
+      this.multiple = true;
+      const defEndDate = this.options.defaultEndDate;
+      if (Datepicker._isDate(defEndDate)) {
+        if (this.options.setDefaultEndDate) {
+          this.setDate(defEndDate, true, true);
+          this.setInputValue(this.endDateEl, defEndDate);
+        }
+      }
+    }
+
+    if (this.options.isMultipleSelection) {
+      this.multiple = true;
+      this.dates = [];
+      this.dateEls = [];
+      this.dateEls.push(this.el);
+    }
+  }
+
   _removeEventHandlers() {
     this.el.removeEventListener('click', this._handleInputClick);
     this.el.removeEventListener('keydown', this._handleInputKeydown);
@@ -1276,10 +1290,15 @@ export class Datepicker extends Component<DatepickerOptions> {
         }
 
         if (this.options.isDateRange) {
+          const confirmAfterSelection = Datepicker._isDate(this.date) && this.options.autoSubmit;
           this._handleDateRangeCalendarClick(selectedDate);
+
+          if(confirmAfterSelection) {
+            this._confirm();
+          }
         }
 
-        if (this.options.autoSubmit) this._finishSelection();
+        if (!this.options.isDateRange && this.options.autoSubmit) this._confirm();
       } else if (target.closest('.month-prev')) {
         this.prevMonth();
       } else if (target.closest('.month-next')) {
@@ -1294,7 +1313,7 @@ export class Datepicker extends Component<DatepickerOptions> {
         return;
       }
 
-      this.setDate(date, false, Datepicker._isDate(this.date));
+      this.setDate(date, true, Datepicker._isDate(this.date));
       return;
     }
 
@@ -1389,10 +1408,12 @@ export class Datepicker extends Component<DatepickerOptions> {
 
   _confirm = () => {
     this._finishSelection();
+    if (this.displayPlugin) this.displayPlugin.hide();
     if (typeof this.options.onConfirm === 'function') this.options.onConfirm.call(this);
   };
 
   _cancel = () => {
+    if (this.displayPlugin) this.displayPlugin.hide();
     if (typeof this.options.onCancel === 'function') this.options.onCancel.call(this);
   };
 

components/datepicker/datepickerSpec.js

@@ -136,14 +136,14 @@ describe('Datepicker Plugin', () => {
         setTimeout(() => {
           expect(input.value)
             .withContext('value should change with confirm interaction')
-            .toEqual(`${month < 10 ? `0${month}` : month}/0${day}/${year}`);
+            .toEqual(`${month < 10 ? `0${month}` : month}/${day < 10 ? '0' + day : day}/${year}`);
           dayEl = document.querySelector('.datepicker-container button[data-day="1"]');
           dayEl.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
           cancelBtn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
           setTimeout(() => {
             expect(input.value)
               .withContext('value should not change with cancel interaction')
-              .toEqual(`${month < 10 ? `0${month}` : month}/0${day}/${year}`);
+              .toEqual(`${month < 10 ? `0${month}` : month}/${day < 10 ? '0' + day : day}/${year}`);
             clearBtn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
             setTimeout(() => {
               expect(input.value.length)
@@ -156,7 +156,7 @@ describe('Datepicker Plugin', () => {
             }, 10);
           }, 10);
         }, 10);
-      });
+      }, 10);
     });
   });
 });

components/dialog/_modal.scss

@@ -40,19 +40,23 @@
     flex-shrink: 0;
     position: sticky;
     top: 0;
-    background-color: var(--modal-background-color);
+    // disabled since background color inheritance from parent element
+    // background-color: var(--modal-background-color);
   }
   .modal-content {
     padding: 0 var(--modal-padding);
   }
   .modal-footer {
+    display: flex;
     border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
     padding: var(--modal-padding);
     text-align: right;
     flex-shrink: 0;
     position: sticky;
     bottom: 0;
-    background-color: var(--modal-background-color);
+    // disabled since background color inheritance from parent element
+    // background-color: var(--modal-background-color);
+    justify-content: space-between;
   }
 
   .modal-close {