@globalpayments/vega 2.73.0 → 2.75.1

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

@@ -13,31 +13,18 @@ import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-man
 import { VegaDropdownClick, VegaDropdownHide, VegaDropdownShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
 import { MonthNames } from '../../constants';
 export class VegaDatePickerCalendarYearMonthSwitcherRenderer extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.startDropdownRef = {
-      month: null,
-      year: null,
-    };
-    this.endDropdownRef = {
-      month: null,
-      year: null,
-    };
-  }
-  render(period, type) {
-    return (h("vega-flex", { gap: 'size-8', justifyContent: 'center' },
+  render() {
+    const canRender = this.mode !== 'range' || this.showYearMonthDropdowns || this.isMobileDevice;
+    return (canRender && (h("vega-flex", { justifyContent: 'center' },
       this.showYearMonthDropdowns
-        ? this.renderMonthDropdownSwitcher(period, type)
-        : this.renderCurrentMonth(period),
+        ? this.renderMonthDropdownSwitcher()
+        : this.renderCurrentMonth(),
       this.showYearMonthDropdowns
-        ? this.renderYearDropdownSwitcher(period, type)
-        : this.renderCurrentYear(period)));
+        ? this.renderYearDropdownSwitcher()
+        : this.renderCurrentYear())));
   }
-  getMonthDropdownOptions(type) {
-    let currentYear = this.currentPeriod.current.year;
-    const currentMonth = this.currentPeriod.current.month;
-    if (type === 'end' && currentMonth === 12)
-      currentYear += 1;
+  getMonthDropdownOptions() {
+    const currentYear = this.currentPeriod.current.year;
     return MonthNames.map((month, index) => {
       return {
         key: `${index}`,
@@ -72,37 +59,25 @@ export class VegaDatePickerCalendarYearMonthSwitcherRenderer extends VegaSlimmer
     }
     return years;
   }
-  renderMonthDropdownSwitcher(period, type) {
-    const { month } = period.current;
+  renderMonthDropdownSwitcher() {
+    const { month } = this.currentPeriod.current;
     const monthIndex = month - 1;
-    return (h("vega-dropdown", { trigger: "click", selectType: "single", source: this.getMonthDropdownOptions(type), selectedSourceKey: monthIndex.toString(), "max-height": "300", isScreenPosition: this.yearMonthDropdownProps.isScreenPosition, ref: (node) => {
-        if (type === 'start') {
-          this.startDropdownRef.month = node;
-        }
-        else {
-          this.endDropdownRef.month = node;
-        }
+    return (h("vega-dropdown", { trigger: "click", selectType: "single", source: this.getMonthDropdownOptions(), selectedSourceKey: monthIndex.toString(), "max-height": "300", isScreenPosition: this.yearMonthDropdownProps.isScreenPosition, ref: (node) => {
         this.onDropdownShowOrHide(node);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaDropdownClick, (payload) => {
           const selectedMonth = parseInt(payload.detail);
-          this.setDateBasedOnSelectedMonth(period, selectedMonth, type);
+          this.setDateBasedOnSelectedMonth(selectedMonth);
         });
-      } }, this.renderCurrentMonth(period)));
+      } }, this.renderCurrentMonth()));
   }
-  renderYearDropdownSwitcher(period, type) {
-    const { year } = period.current;
+  renderYearDropdownSwitcher() {
+    const { year } = this.currentPeriod.current;
     return (h("vega-dropdown", { trigger: "click", selectType: "single", source: this.getYearDropdownOptions(), selectedSourceKey: year.toString(), "max-height": "300", isScreenPosition: this.yearMonthDropdownProps.isScreenPosition, ref: (node) => {
-        if (type === 'start') {
-          this.startDropdownRef.year = node;
-        }
-        else {
-          this.endDropdownRef.year = node;
-        }
         this.onDropdownShowOrHide(node);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaDropdownClick, (payload) => {
-          this.setDateBasedOnSelectedYear(period, parseInt(payload.detail), type);
+          this.setDateBasedOnSelectedYear(parseInt(payload.detail));
         });
-      } }, this.renderCurrentYear(period)));
+      } }, this.renderCurrentYear()));
   }
   /**
    * Control ui when dropdown shows or closes
@@ -111,7 +86,6 @@ export class VegaDatePickerCalendarYearMonthSwitcherRenderer extends VegaSlimmer
    */
   onDropdownShowOrHide(dropdown) {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdown, VegaDropdownShow, async () => {
-      await this.closeOpenDropdowns(dropdown);
       dropdown.classList.add('active');
     });
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdown, VegaDropdownHide, () => {
@@ -122,45 +96,34 @@ export class VegaDatePickerCalendarYearMonthSwitcherRenderer extends VegaSlimmer
       }
     });
   }
-  renderCurrentMonth(period) {
-    return (h("div", { class: "month-item-name" },
-      h("span", null, this.translationSlimmer.t(period.current.getMonthName())),
+  renderCurrentMonth() {
+    const label = this.translationSlimmer.t(this.currentPeriod.current.getMonthName());
+    return this.size === 'small' && this.showYearMonthDropdowns ? (h("vega-button-link", { class: "small-month-item-name", size: "small", label: label })) : (h("div", { class: "month-item-name" },
+      h("span", null, label),
       this.renderDropdownSwitchIcon()));
   }
-  renderCurrentYear(period) {
-    return (h("div", { class: "month-item-year" },
-      h("span", null, period.current.year),
+  renderCurrentYear() {
+    const label = this.currentPeriod.current.year.toString();
+    return this.size === 'small' && this.showYearMonthDropdowns ? (h("vega-button-link", { class: "small-month-item-year", size: "small", label: label })) : (h("div", { class: "month-item-year" },
+      h("span", null, label),
       this.renderDropdownSwitchIcon()));
   }
   renderDropdownSwitchIcon() {
-    return (this.showYearMonthDropdowns && (h("vega-icon", { icon: VegaInternalIconManager.getIconKey('caret-down') })));
+    return (this.showYearMonthDropdowns && (h("vega-icon", { icon: VegaInternalIconManager.getIconKey('caret-down'), color: 'text-link' })));
   }
-  setDateBasedOnSelectedMonth(period, monthIndex, type) {
-    const { year } = period.current;
-    const date = type === 'start' ? new Date(year, monthIndex, 1) : new Date(year, monthIndex - 1, 1);
+  setDateBasedOnSelectedMonth(monthIndex) {
+    const { year } = this.currentPeriod.current;
+    const date = new Date(year, monthIndex, 1);
     const newPeriod = new MonthPeriod(CalendarDate.from(date));
     this.currentPeriodController.updateCalendarPeriod(newPeriod);
   }
-  setDateBasedOnSelectedYear(period, year, type) {
-    const { month } = period.current;
+  setDateBasedOnSelectedYear(year) {
+    const { month } = this.currentPeriod.current;
     const startMonthIndex = month - 1;
-    const endMonthIndex = startMonthIndex - 1;
-    const date = type === 'start' ? new Date(year, startMonthIndex, 1) : new Date(year, endMonthIndex, 1);
+    const date = new Date(year, startMonthIndex, 1);
     const newPeriod = new MonthPeriod(CalendarDate.from(date));
     this.currentPeriodController.updateCalendarPeriod(newPeriod);
   }
-  /**
-   * Close any open vega-dropdown and ignore currently clicked one
-   *
-   * * @param {HTMLVegaDropdownElement} dropdownToIgnore - Dropdown to ignore
-   */
-  async closeOpenDropdowns(dropdownToIgnore) {
-    const dropdowns = [this.startDropdownRef, this.endDropdownRef];
-    await Promise.all(dropdowns
-      .flatMap((ref) => [ref.month, ref.year])
-      .filter((dropdown) => Boolean(dropdown) && dropdown !== dropdownToIgnore)
-      .map((dropdown) => dropdown.hide()));
-  }
 }
 (() => {
   VegaInternalIconManager.register({
@@ -190,3 +153,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "currentPeriod", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "size", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "mode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "isMobileDevice", void 0);

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

@@ -8,11 +8,7 @@ import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { MonthViewGenerator } from '../../../../../helpers/calendar';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
-import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
-import { Icons } from '../../../assets/icons';
 import { isCalendarDateType } from '../../../../../types/type-guard';
-import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
 export class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -22,37 +18,16 @@ export class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
     const period = type === 'end' ? this.currentPeriod.next() : this.currentPeriod;
     const periodView = this.monthViewGenerator.generate(period);
     return (h("div", { class: "month-item" },
-      this.renderMonthHeader(period, type),
+      this.renderCurrentYearMonth(period),
       this.renderWeek(periodView),
       this.renderDays(periodView, period)));
   }
-  renderMonthHeader(period, type) {
-    return (h("vega-grid", { class: "month-item-header", column: '3-auto', row: 1 },
-      this.renderPrevIcon(period, type),
-      this.yearMonthSwitcherRender.render(period, type),
-      this.renderNextIcon(period, type)));
-  }
-  renderPrevIcon(period, type) {
-    var _a;
-    const firstDateOfMonth = period.current.firstDateOfMonth();
-    const lockedPreviousPeriod = this.isBeforeMinDate(firstDateOfMonth) || ((_a = this.minCalendarDate) === null || _a === void 0 ? void 0 : _a.equal(firstDateOfMonth));
-    const needHide = !this.isMobileDevice && this.mode === 'range' && type === 'end';
-    return lockedPreviousPeriod || needHide ? (h("div", { class: "locked-month-button" })) : (h("vega-button-circle", { class: "button-previous-month", variant: "icon-only", icon: VegaInternalIconManager.getIconKey('chevron-left'), ref: (ref) => {
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
-          this.currentPeriodController.gotoPreviousPeriod();
-        });
-      }, size: this.getNavigationIconSize() }));
-  }
-  renderNextIcon(period, type) {
-    var _a;
-    const lastDateOfMonth = period.current.lastDateOfMonth();
-    const lockedNextPeriod = this.isAfterMaxDate(lastDateOfMonth) || ((_a = this.maxCalendarDate) === null || _a === void 0 ? void 0 : _a.equal(lastDateOfMonth));
-    const needHide = !this.isMobileDevice && this.mode === 'range' && type === 'start';
-    return lockedNextPeriod || needHide ? (h("div", { class: "locked-month-button" })) : (h("vega-button-circle", { class: "button-next-month", variant: "icon-only", icon: VegaInternalIconManager.getIconKey('chevron-right'), ref: (ref) => {
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
-          this.currentPeriodController.gotoNextPeriod();
-        });
-      }, size: this.getNavigationIconSize() }));
+  renderCurrentYearMonth(period) {
+    return (this.mode === 'range' &&
+      !this.isMobileDevice && (h("vega-box", { class: "current-month-year" },
+      this.translationSlimmer.t(period.current.getMonthName()),
+      ' ',
+      period.current.year)));
   }
   renderWeek(periodView) {
     return (h("vega-grid", { class: "month-item-weekdays-row", column: '7-auto', row: 1 }, periodView.weekdays.map((weekDay) => {
@@ -107,20 +82,7 @@ export class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
   isAfterMaxDate(day) {
     return this.maxCalendarDate && day.isAfter(this.maxCalendarDate);
   }
-  getNavigationIconSize() {
-    if (this.size === 'large')
-      return 'default';
-    if (this.size === 'small')
-      return 'extra-small';
-    return 'small';
-  }
 }
-(() => {
-  VegaInternalIconManager.register({
-    'chevron-left': Icons['chevron-left'],
-    'chevron-right': Icons['chevron-right'],
-  });
-})();
 __decorate([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "currentPeriod", void 0);
@@ -130,15 +92,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "translationSlimmer", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "yearMonthSwitcherRender", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "mode", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "currentPeriodController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "hoverDate", void 0);
@@ -156,10 +109,13 @@ __decorate([
 ], VegaDatePickerMonthItemRenderer.prototype, "calendarSelection", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "size", void 0);
+], VegaDatePickerMonthItemRenderer.prototype, "staticHeight", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "staticHeight", void 0);
+], VegaDatePickerMonthItemRenderer.prototype, "mode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "size", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "isDateDisabled", void 0);