@globalpayments/vega 2.34.1 → 2.36.0

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-calendar-month-year-dropdown-renderer.js

@@ -0,0 +1,316 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaDropdownClick } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalDropdownUpdateTarget } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import { Icons } from '../../assets/icons';
+export class VegaDatePickerMonthYearDropdownRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.startDropdownRef = {
+      month: null,
+      year: null,
+    };
+    this.endDropdownRef = {
+      month: null,
+      year: null,
+    };
+    /**
+     * When interacting with open vega-dropdown, prevent it from collapsing since is treated as outside element by litepicker
+     *
+     * @param {MouseEvent} event - Click event
+     */
+    this.onVegaDropdownContentBoxClick = (event) => {
+      const elementOnClick = event.target;
+      if (elementOnClick.tagName === 'VEGA-DROPDOWN-CONTENT-BOX') {
+        this.datePickerCalendar.classList.remove('vega-force-hidden');
+        // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+        this.datePickerCalendar.shadowRoot.querySelector('.litepicker').style.display =
+          'block';
+      }
+    };
+    /**
+     * Prevent collapsing of dropdown when selecting option. VD-5544
+     *
+     * @param {Event} event - Focus event
+     */
+    this.onVegaDropdownContentBoxActivate = (event) => {
+      const element = event.target;
+      if (element.tagName === 'VEGA-DROPDOWN-CONTENT-BOX') {
+        this.isMonthsOrYearsDropdownContentBoxOnFocus = true;
+        element.classList.remove('vega-force-hidden');
+      }
+      else {
+        this.isMonthsOrYearsDropdownContentBoxOnFocus = false;
+      }
+    };
+  }
+  /**
+   * This method creates months and years dropdowns and replaces the current default select elements of litepicker
+   *
+   * @param {Litepicker} datePicker - Litepicker instance
+   */
+  renderMonthYearDropdowns(datePicker) {
+    this.datePicker = datePicker;
+    this.datePickerCalendar = this.vegaDatePickerCalendarRenderer.getCalendarContainerRef();
+    this.renderMonthButton(this.datePicker.ui);
+    this.renderYearButton(this.datePicker.ui);
+    this.initSetup();
+  }
+  render() {
+    return (h("div", { class: "month-year-dropdown-container", style: { display: 'none' } },
+      h("div", { class: "start-date-month-year" },
+        this.renderDropdown('month', 'start'),
+        this.renderDropdown('year', 'start')),
+      h("div", { class: "end-date-month-year" },
+        this.renderDropdown('month', 'end'),
+        this.renderDropdown('year', 'end'))));
+  }
+  /**
+   * From default months select dropdowns, get passed options and create vega-dropdown component with months as options
+   *
+   * @param {HTMLElement} ui - Litepicker ui
+   */
+  renderMonthButton(ui) {
+    ui.querySelectorAll('select.month-item-name').forEach((item, index) => {
+      this.syncDropdownOptions('month', item, index);
+      const selectedOptionValue = this.getSelectedOptionFromSelect(item);
+      const value = VegaDatePickerMonthYearDropdownRenderer.monthName[parseInt(selectedOptionValue)];
+      const monthButton = document.createElement('span');
+      monthButton.classList.add('dropdown-current-value');
+      monthButton.innerText = `${this.translationSlimmer.t(value)}`;
+      this.appendDropdownIconToButton(monthButton);
+      if (item.parentNode) {
+        item.parentNode.replaceChild(monthButton, item);
+      }
+      const dropdown = index === 0 ? this.startDropdownRef.month : this.endDropdownRef.month;
+      if (dropdown) {
+        this.updateDropdownValueAndTarget(monthButton, dropdown, item.value);
+      }
+      monthButton.addEventListener('click', () => {
+        this.setDropdownAsActive(monthButton);
+      });
+    });
+  }
+  /**
+   * From default years select dropdowns, get passed options and create vega-dropdown component with years as options
+   *
+   * @param {HTMLElement} ui - Litepicker ui
+   */
+  renderYearButton(ui) {
+    ui.querySelectorAll('select.month-item-year').forEach((item, index) => {
+      this.syncDropdownOptions('year', item, index);
+      const value = this.getSelectedOptionFromSelect(item);
+      const yearButton = document.createElement('span');
+      yearButton.classList.add('dropdown-current-value');
+      yearButton.innerText = `${this.translationSlimmer.t(value)}`;
+      this.appendDropdownIconToButton(yearButton);
+      if (item.parentNode) {
+        item.parentNode.replaceChild(yearButton, item);
+      }
+      const dropdown = index === 0 ? this.startDropdownRef.year : this.endDropdownRef.year;
+      if (dropdown) {
+        this.updateDropdownValueAndTarget(yearButton, dropdown, item.value);
+      }
+      yearButton.addEventListener('click', () => {
+        this.setDropdownAsActive(yearButton);
+      });
+    });
+  }
+  getSelectedOptionFromSelect(select) {
+    const options = Array.from(select.querySelectorAll('option'));
+    const selectedOption = options.find((option) => option.selected);
+    // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+    return selectedOption.value;
+  }
+  /**
+   * Render vega-dropdown component
+   *
+   * @param {MonthOrYearType} type - Month or year dropdown
+   * @param {DateIndexType} dateIndex - start date index for both single or range and end date index for range date picker mode
+   */
+  renderDropdown(type, dateIndex) {
+    return (h("vega-dropdown", { trigger: "click", selectType: "single", class: "vega-force-hidden", "match-target-width": "false", "max-height": "300", ref: (node) => {
+        this.onDropdownShowOrHide(node);
+        if (dateIndex === 'start') {
+          this.startDropdownRef[type] = node;
+        }
+        else {
+          this.endDropdownRef[type] = node;
+        }
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaDropdownClick, (input) => {
+          this.setDefaultViewValues(type, node);
+          this.monthYearDropdownClick(type, dateIndex, input.detail);
+        });
+      } },
+      h("span", null, type)));
+  }
+  /**
+   * When calendar opens, update sources for the vega-dropdown components for both months and years dropdown
+   *
+   * @param {MonthOrYearType} type - Month or year dropdown
+   * @param {HTMLSelectElement} select - Native select from litepicker ui
+   * @param {number} index - dropdown count
+   */
+  syncDropdownOptions(type, select, index) {
+    const options = select.querySelectorAll('option');
+    const dropdownOptions = Array.from(options).map((option) => ({
+      key: option.value,
+      label: this.translationSlimmer.t(option.text),
+      disabled: option.disabled ? true : false,
+    }));
+    if (type === 'month') {
+      const dropdown = index === 0 ? this.startDropdownRef.month : this.endDropdownRef.month;
+      if (dropdown) {
+        dropdown.source = dropdownOptions;
+      }
+    }
+    if (type === 'year') {
+      dropdownOptions.sort((a, b) => Number(a.key) - Number(b.key));
+      const dropdown = index === 0 ? this.startDropdownRef.year : this.endDropdownRef.year;
+      if (dropdown) {
+        dropdown.source = dropdownOptions;
+      }
+    }
+  }
+  /**
+   * Litepicker treats vega-dropdown-content-box as an external element that when dropdowns open and you click, it closes automaticall. This method is to initialize event listeners the moment months or years dropdown is opened to prevent litepicker from collpasing
+   *
+   * @param {HTMLVegaDropdownElement} dropdown - Month or year dropdown
+   */
+  onDropdownShowOrHide(dropdown) {
+    dropdown === null || dropdown === void 0 ? void 0 : dropdown.addEventListener('vegaShow', () => {
+      this.onDropdownShow();
+    });
+    dropdown === null || dropdown === void 0 ? void 0 : dropdown.addEventListener('vegaHide', () => {
+      this.onDropdownHide();
+    });
+  }
+  setDefaultViewValues(type, node) {
+    if (type === 'month') {
+      const yearDropdown = node.nextElementSibling;
+      this.currentStartYearInView = parseInt(yearDropdown.selectedSourceKey);
+    }
+    else {
+      const monthDropdown = node.previousElementSibling;
+      this.currentStartMonthInView = parseInt(monthDropdown.selectedSourceKey);
+    }
+  }
+  appendDropdownIconToButton(parentElement) {
+    parentElement.innerHTML += `<vega-icon icon='${VegaInternalIconManager.getIconKey('caret-down')}'></vega-icon>`;
+    parentElement.tabIndex = 0;
+  }
+  monthYearDropdownClick(type, dateIndex, detail) {
+    const value = parseInt(detail);
+    this.updateDatePickerOnSelect(type, dateIndex, value);
+  }
+  updateDropdownValueAndTarget(target, dropdownRef, dropdownSelectedKey) {
+    const parentDiv = target.closest('div');
+    if (parentDiv) {
+      parentDiv.classList.add('dropdown-section');
+    }
+    dropdownRef.selectedSourceKey = dropdownSelectedKey;
+    remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(dropdownRef, VegaInternalDropdownUpdateTarget), target);
+  }
+  updateDatePickerOnSelect(type, dateIndex, value) {
+    if (type === 'month') {
+      if (this.currentStartYearInView !== null) {
+        if (dateIndex === 'start') {
+          this.datePicker.gotoDate(new Date(this.currentStartYearInView, value, 1));
+        }
+        if (dateIndex === 'end') {
+          this.datePicker.gotoDate(new Date(this.currentStartYearInView, value - 1, 1));
+        }
+      }
+    }
+    else {
+      if (this.currentStartMonthInView !== null) {
+        if (dateIndex === 'start') {
+          this.datePicker.gotoDate(new Date(value, this.currentStartMonthInView, 1));
+        }
+        if (dateIndex === 'end') {
+          this.datePicker.gotoDate(new Date(value, this.currentStartMonthInView - 1, 1));
+        }
+      }
+    }
+  }
+  setDropdownAsActive(element) {
+    Array.from(this.datePicker.ui.querySelectorAll('.dropdown-current-value.active')).forEach((item) => item.classList.remove('active'));
+    element.classList.add('active');
+  }
+  removeActiveDropdownClass() {
+    Array.from(this.datePicker.ui.querySelectorAll('.dropdown-current-value.active')).forEach((item) => item.classList.remove('active'));
+  }
+  onDropdownShow() {
+    document.addEventListener('mouseenter', this.onVegaDropdownContentBoxActivate, true);
+    document.addEventListener('click', this.onVegaDropdownContentBoxClick);
+  }
+  onDropdownHide() {
+    this.isMonthsOrYearsDropdownContentBoxOnFocus = false;
+    this.removeActiveDropdownClass();
+    document.removeEventListener('mouseenter', this.onVegaDropdownContentBoxActivate, true);
+    document.removeEventListener('click', this.onVegaDropdownContentBoxClick);
+  }
+  /**
+   * When you collapse date picker while vega-dropdown is still open, close vega-dropdown too
+   */
+  initSetup() {
+    const hideLitepicker = this.datePicker.hide.bind(this.datePicker);
+    this.datePicker.hide = async () => {
+      const activeElement = document.activeElement;
+      if (!this.isMonthsOrYearsDropdownContentBoxOnFocus &&
+        (activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) !== 'VEGA-DROPDOWN-CONTENT-BOX') {
+        await this.closeOpenDropdowns();
+        hideLitepicker();
+      }
+    };
+  }
+  /**
+   * Close any open vega-dropdown when litepicker is collapse
+   */
+  async closeOpenDropdowns() {
+    const dropdowns = [this.startDropdownRef, this.endDropdownRef];
+    await Promise.all(dropdowns
+      .flatMap((ref) => [ref.month, ref.year])
+      .filter(Boolean)
+      .map((dropdown) => {
+      if (dropdown) {
+        void dropdown.hide();
+      }
+    }));
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'caret-down': Icons['caret-down'],
+  });
+})();
+VegaDatePickerMonthYearDropdownRenderer.monthName = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+__decorate([
+  MapToComponentField()
+], VegaDatePickerMonthYearDropdownRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerMonthYearDropdownRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-calendar-renderer.js

@@ -7,11 +7,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, VegaSlimmer, MapToComponentMethod } from 'vega-slimmer/core';
 import { Litepicker } from 'litepicker/dist/nocss/litepicker.umd.js';
 import { Icons } from '../../assets/icons';
+import { LogUtility } from '../../../../utils/log';
 export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.alterLitePickerHeader = (ui) => {
-      this.renderMonthName(ui);
+      if (this.showYearMonthDropdowns) {
+        this.monthYearDropdownRenderer.renderMonthYearDropdowns(this.datePicker);
+      }
+      else {
+        this.renderMonthName(ui);
+      }
       this.renderWeekdays(ui);
       this.renderPrevAndNextMonthButtons(ui);
     };
@@ -69,6 +75,9 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
         mainContainer.append(footerContainer);
       }
     };
+    this.getSystemTimeZone = () => {
+      return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    };
   }
   /*
    * The below method is e2e-test covered in
@@ -191,6 +200,12 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
   watchMode() {
     this.requireRefreshLitePicker = true;
   }
+  /**
+   * Update datePicker settings property if showYearMonthDropdowns is changed
+   */
+  watchShowYearMonthDropdowns() {
+    this.requireRefreshLitePicker = true;
+  }
   /**
    * get the reference of datePicker
    *
@@ -225,9 +240,39 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
    */
   renderMonthName(ui) {
     ui.querySelectorAll('.month-item-name').forEach((item) => {
-      item.innerText = this.translationSlimmer.t(item.innerText);
+      const currentMonthName = item.innerText;
+      item.innerText = this.translationSlimmer.t(currentMonthName);
     });
   }
+  resetTodayByTimezone() {
+    if (this.timezone && this.timezone !== this.getSystemTimeZone()) {
+      try {
+        const formattedDate = new Intl.DateTimeFormat([], {
+          timeZone: this.timezone,
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        }).format(new Date());
+        const dateByTimezone = new Date(formattedDate.split('/').join('-')).getTime();
+        const dayItems = 
+        // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+        this.calendarContainerRef.shadowRoot.querySelectorAll('.day-item');
+        for (let i = 0; i < dayItems.length; i++) {
+          if (dayItems[i].classList.contains('is-today') &&
+            Number(dayItems[i].dataset.time) !== dateByTimezone) {
+            dayItems[i].classList.remove('is-today');
+          }
+          if (!dayItems[i].classList.contains('is-today') &&
+            Number(dayItems[i].dataset.time) === dateByTimezone) {
+            dayItems[i].classList.add('is-today');
+          }
+        }
+      }
+      catch (_a) {
+        LogUtility.warn('Invalid timezone: ', this.timezone);
+      }
+    }
+  }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-date-picker-render-ui-with-single}
@@ -250,6 +295,7 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
       if (this.vegaDatePickerMobileController.getIsMobileDevice()) {
         this.vegaDatePickerMobileController.preventElementTouchMoveInMobile();
       }
+      this.resetTodayByTimezone();
     })
       .on('selected', this.vegaDatePickerCalendarController.onDatePickerSelected)
       .on('before:show', () => {
@@ -292,6 +338,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "format", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "showYearMonthDropdowns", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerCalendarController", void 0);
@@ -313,9 +362,15 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerRangeInputRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "monthYearDropdownRenderer", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "timezone", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaDatePickerCalendarRenderer.prototype, "connectedCallback", null);
@@ -349,3 +404,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchMode')
 ], VegaDatePickerCalendarRenderer.prototype, "watchMode", null);
+__decorate([
+  MapToComponentMethod('watchShowYearMonthDropdowns')
+], VegaDatePickerCalendarRenderer.prototype, "watchShowYearMonthDropdowns", null);

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-renderer.js

@@ -18,7 +18,11 @@ export class VegaDatePickerRenderer extends VegaSlimmer {
       return (h("div", { class: "vega-input-prefix" },
         h("vega-icon", { icon: VegaInternalIconManager.getIconKey('calendar'), color: "text-secondary", 
           // eslint-disable-next-line react/jsx-no-bind
-          onClick: () => this.focusInput() })));
+          onClick: () => {
+            if (!this.disabled) {
+              this.focusInput();
+            }
+          } })));
     };
     /**
      * return true if input is enabled, otherwise false
@@ -63,9 +67,11 @@ export class VegaDatePickerRenderer extends VegaSlimmer {
         disabled: this.disabled,
       } },
       this.renderLabel(),
-      h("div", { class: arrayToClassString(classNames), ref: (ref) => (this.datePickerContainer = ref) }, this.mode === 'range'
-        ? this.vegaDatePickerRangeInputRenderer.render()
-        : this.vegaDatePickerSingleInputRenderer.render())));
+      h("div", { class: arrayToClassString(classNames), ref: (ref) => (this.datePickerContainer = ref) },
+        this.mode === 'range'
+          ? this.vegaDatePickerRangeInputRenderer.render()
+          : this.vegaDatePickerSingleInputRenderer.render(),
+        this.showYearMonthDropdowns && this.monthYearDropdownRenderer.render())));
   }
 }
 (() => {
@@ -95,6 +101,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "showYearMonthDropdowns", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "vegaDatePickerMobileController", void 0);
@@ -107,3 +116,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "monthYearDropdownRenderer", void 0);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/vega-date-picker-calendar.css

@@ -637,4 +637,28 @@ html.dark .litepicker .container__days .day-item.is-start-date.is-end-date:after
 .button-previous-month svg {
   width: 12px;
   height: 16px;
+}
+
+.litepicker .month-item-header > div.dropdown-section {
+  display: flex;
+  gap: 12px;
+}
+.litepicker .month-item-header > div.dropdown-section .dropdown-current-value {
+  position: relative;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  cursor: pointer;
+}
+.litepicker .month-item-header > div.dropdown-section .dropdown-current-value.active {
+  color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
+}
+.litepicker .month-item-header > div.dropdown-section .dropdown-current-value.active:active {
+  color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
+}
+.litepicker .month-item-header > div.dropdown-section .dropdown-current-value.active:hover {
+  color: rgba(var(--v-text-link-hover, 4, 112, 236, 1));
+}
+.litepicker .month-item-header > div.dropdown-section .dropdown-current-value.active:focus-visible {
+  color: rgba(var(--v-text-link-focus, 4, 112, 236, 1));
 }

package/dist/collection/components/vega-date-picker/vega-date-picker.js

@@ -29,6 +29,7 @@ import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimm
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaDatePickerRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-date-picker/runtime-metrics-payload-definition';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
+import { VegaDatePickerMonthYearDropdownRenderer } from './slimmers/renderers/vega-date-picker-calendar-month-year-dropdown-renderer';
 /**
  * @vegaVersion 1.3.0
  */
@@ -86,6 +87,7 @@ export class VegaDatePicker {
     this.changeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaChange);
     this.inputEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaDatePickerRenderer.getDatePickerContainer());
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaDatePickerRuntimeMetricsPayloadDefinition);
+    this.monthYearDropdownRenderer = new VegaDatePickerMonthYearDropdownRenderer();
     /**
      * Specifies the selection mode of the date picker.
      *
@@ -179,6 +181,13 @@ export class VegaDatePicker {
      * @vegaVersion 2.33.0
      */
     this.showClearIcon = true;
+    /**
+     * Determines whether to show months and years dropdown in date picker
+     * If set to true, date picker calendar will have months and years dropdown
+     *
+     * @vegaVersion 2.36.0
+     */
+    this.showYearMonthDropdowns = false;
     /**
      * Specifies whether the date picker field is disabled.
      *
@@ -231,6 +240,9 @@ export class VegaDatePicker {
   watchAllowRepick() {
     methodPlaceholder();
   }
+  watchShowYearMonthDropdowns() {
+    methodPlaceholder();
+  }
   watchDisabled() {
     methodPlaceholder();
   }
@@ -641,6 +653,27 @@ export class VegaDatePicker {
       "reflect": false,
       "defaultValue": "true"
     },
+    "showYearMonthDropdowns": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.36.0"
+          }],
+        "text": "Determines whether to show months and years dropdown in date picker\nIf set to true, date picker calendar will have months and years dropdown"
+      },
+      "attribute": "show-year-month-dropdowns",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,
@@ -661,6 +694,26 @@ export class VegaDatePicker {
       "attribute": "disabled",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "timezone": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.35.0"
+          }],
+        "text": "Specifies the IANA time zone or Etc/GMT\u00B1n format.\n    It accepts values such as \"America/New_York\" or \"Etc/GMT+12\".\n    For a complete list of IANA time zones, refer to Time Zone DB(https://timezonedb.com/time-zones).\n\t   If not configured, the time zone will default to the system's time zone."
+      },
+      "attribute": "timezone",
+      "reflect": false
     }
   }; }
   static get events() { return [{
@@ -771,6 +824,9 @@ export class VegaDatePicker {
     }, {
       "propName": "allowRepick",
       "methodName": "watchAllowRepick"
+    }, {
+      "propName": "showYearMonthDropdowns",
+      "methodName": "watchShowYearMonthDropdowns"
     }, {
       "propName": "disabled",
       "methodName": "watchDisabled"
@@ -833,6 +889,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "monthYearDropdownRenderer", void 0);
 __decorate([
   ComponentLoadRequired()
 ], VegaDatePicker.prototype, "watchValue", null);