@globalpayments/vega 2.73.0 → 2.76.0

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeat-pattern/calendar-event-daily-repeat-pattern.js

@@ -1,5 +1,5 @@
 import { CalendarDate } from '../../../../../../helpers/calendar';
-import { VegaInternalTranslation } from '../../../../../../helpers/translation';
+import { VegaInternalTranslation } from '../../../../../../helpers/translation/internal-translation-controller';
 import { CalendarEventBaseRepeatPattern } from './base-repeat-pattern';
 /** The `CalendarEventDailyRepeatPattern` class in TypeScript represents a daily repeating pattern for calendar events. */
 export class CalendarEventDailyRepeatPattern extends CalendarEventBaseRepeatPattern {

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeat-pattern/calendar-event-monthly-repeat-pattern.js

@@ -1,5 +1,5 @@
 import { CalendarDate } from '../../../../../../helpers/calendar';
-import { VegaInternalTranslation } from '../../../../../../helpers/translation';
+import { VegaInternalTranslation } from '../../../../../../helpers/translation/internal-translation-controller';
 import { CalendarEventBaseRepeatPattern } from './base-repeat-pattern';
 /** The `CalendarEventMonthlyRepeatPattern` class in TypeScript represents a monthly repeat pattern for calendar events. */
 export class CalendarEventMonthlyRepeatPattern extends CalendarEventBaseRepeatPattern {

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeat-pattern/calendar-event-weekly-repeat-pattern.js

@@ -1,6 +1,6 @@
 import { CalendarDate } from '../../../../../../helpers/calendar';
 import { WeekdayLongNames } from '../../../../../../helpers/calendar/utils';
-import { VegaInternalTranslation } from '../../../../../../helpers/translation';
+import { VegaInternalTranslation } from '../../../../../../helpers/translation/internal-translation-controller';
 import { flatNestedArray } from '../../../../../../utils/array';
 import { CalendarEventBaseRepeatPattern } from './base-repeat-pattern';
 /** The `CalendarEventWeeklyRepeatPattern` class in TypeScript represents a weekly repeat pattern for calendar events, allowing for matching dates based on specific weekdays and generating future dates with optional constraints. */

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeat-pattern/calendar-event-yearly-repeat-pattern.js

@@ -1,5 +1,5 @@
 import { CalendarDate } from '../../../../../../helpers/calendar';
-import { VegaInternalTranslation } from '../../../../../../helpers/translation';
+import { VegaInternalTranslation } from '../../../../../../helpers/translation/internal-translation-controller';
 import { CalendarEventBaseRepeatPattern } from './base-repeat-pattern';
 /** The `CalendarEventYearlyRepeatPattern` class defines a yearly repeat pattern for calendar events, checking for matches and generating future dates based on specified criteria. */
 export class CalendarEventYearlyRepeatPattern extends CalendarEventBaseRepeatPattern {

package/dist/collection/components/vega-calendar/vega-calendar.js

@@ -330,7 +330,7 @@ export class VegaCalendar {
       "mutable": false,
       "complexType": {
         "original": "DropdownPropsForCalendar",
-        "resolved": "{ matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; trigger?: \"hover\" | \"click\"; source: (DropdownSourceItem | DropdownSourceGroup)[]; }",
+        "resolved": "{ matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; trigger?: \"click\" | \"hover\"; source: (DropdownSourceItem | DropdownSourceGroup)[]; }",
         "references": {
           "DropdownPropsForCalendar": {
             "location": "import",

package/dist/collection/components/vega-code-block/slimmers/controllers/prism-code-highlight-parse-controller.js

@@ -1,16 +1,7 @@
-import Prism from 'prismjs';
-// The language plugins.
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-c';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-typescript';
-import 'prismjs/components/prism-jsx';
-import 'prismjs/components/prism-tsx';
+import { tokenize, getLanguageGrammar } from '../../../../polyfill/prism';
 import { CodeHighlightParser } from './code-highlight-parser.abstract';
 /**
- * Use the plugin Prism to highlight the code content.
+ * Use the local syntax highlight tokenizer to highlight the code content.
  */
 export class PrismCodeHighlightParseController extends CodeHighlightParser {
   /**
@@ -23,15 +14,15 @@ export class PrismCodeHighlightParseController extends CodeHighlightParser {
     return code && language && this.isHighlightLanguage(language);
   }
   /**
-   * Use plugin to parse the string code into an array of nodes with different keywords.
+   * Use tokenizer to parse the string code into an array of nodes with different keywords.
    *
    * @returns {CodeNodeType[]} - The object contains content and highlight type.
    */
   parse() {
     const { code, language } = this.value;
     let result = [];
-    const parseLanguage = Prism.languages[language];
-    const tokens = Prism.tokenize(code, parseLanguage);
+    const parseLanguage = getLanguageGrammar(language);
+    const tokens = tokenize(code, parseLanguage);
     result = this.getHighlightNodes(tokens);
     return this.markLineNumberNodes(result);
   }

package/dist/collection/components/vega-combo-box/slimmers/renderers/vega-combo-box-dropdown-renderer.js

@@ -10,6 +10,7 @@ import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibi
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaClose, VegaCreate, VegaDropdownClick, VegaDropdownHide, } from '../../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalDropdownTemplateItemsChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { htmlSanitizer, labelSanitizeStrategy } from '../../../../utils/sanitize';
 export class VegaComboBoxDropdownRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -125,7 +126,7 @@ export class VegaComboBoxDropdownRenderer extends VegaSlimmer {
   renderSelectedChip(item) {
     return (h("vega-chip", { 
       //TODO: the key property test will add in https://gethired.atlassian.net/browse/VD-883
-      key: item.key, text: item.label, variant: "outlined", showCloseIcon: !this.disabled, size: "small", ref: (ref) => {
+      key: item.key, text: htmlSanitizer.sanitize(item.label, labelSanitizeStrategy), variant: "outlined", showCloseIcon: !this.disabled, size: "small", ref: (ref) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClose, async () => {
           await this.onChipClose(item.key);
         });

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

@@ -9,6 +9,9 @@ export const Icons = {
     icon: `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_41275_12898)"><path d="M5.75 2H10.25V0.75C10.25 0.335938 10.5844 0 11 0C11.4156 0 11.75 0.335938 11.75 0.75V2H13C14.1031 2 15 2.89531 15 4V14C15 15.1031 14.1031 16 13 16H3C1.89531 16 1 15.1031 1 14V4C1 2.89531 1.89531 2 3 2H4.25V0.75C4.25 0.335938 4.58437 0 5 0C5.41563 0 5.75 0.335938 5.75 0.75V2ZM2.5 7.75H5V6H2.5V7.75ZM2.5 9.25V11.25H5V9.25H2.5ZM6.5 9.25V11.25H9.5V9.25H6.5ZM11 9.25V11.25H13.5V9.25H11ZM13.5 6H11V7.75H13.5V6ZM13.5 12.75H11V14.5H13C13.275 14.5 13.5 14.275 13.5 14V12.75ZM9.5 12.75H6.5V14.5H9.5V12.75ZM5 12.75H2.5V14C2.5 14.275 2.72375 14.5 3 14.5H5V12.75ZM9.5 6H6.5V7.75H9.5V6Z" fill="currentColor"/></g><defs><clipPath id="clip0_41275_12898"><rect width="14" height="16" fill="white" transform="translate(1)"/></clipPath></defs></svg>`,
   },
   'caret-down': {
-    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>`,
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M199 401c9.4 9.4 24.6 9.4 33.9 0L425 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-175 175L41 175c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L199 401z"/></svg>`,
+  },
+  'bulls-eye': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM256 368a112 112 0 1 0 0-224 112 112 0 1 0 0 224zm0-272a160 160 0 1 1 0 320 160 160 0 1 1 0-320zm0 176a16 16 0 1 0 0-32 16 16 0 1 0 0 32zm0-80a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>`,
   },
 };

package/dist/collection/components/vega-date-picker/slimmers/controllers/vega-date-picker-calendar-open-state-controller.js

@@ -6,8 +6,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
-import { FeatureFlag } from '../../../../helpers/public-api';
+import { FeatureFlag } from '../../../../helpers/feature-control/feature-flag-controller';
 import { SynchronizeTaskQueue } from '../../../../helpers/queue/synchronize-task-queue';
+import { ClickOutsideOnlyToDismissStrategy } from '../../../../helpers/slimmers/element-appender/trigger-strategies/click-outside-only-to-dismiss-strategy';
 /** The date picker element appender controller slimmer */
 export class VegaDatePickerCalendarOpenStateController extends ElementAppenderSlimmer {
   /**
@@ -22,7 +23,7 @@ export class VegaDatePickerCalendarOpenStateController extends ElementAppenderSl
       placement: ['bottom', 'top'],
       alignment: ['start', 'end'],
       isScreenPosition: FeatureFlag.isEnabled('VEGA_DATE_PICKER.ENABLE_CALCULATION_POSITION_BY_SCREEN'),
-    }), () => 'custom', 'isCalendarShow');
+    }), () => new ClickOutsideOnlyToDismissStrategy(), 'isCalendarShow');
     this.clearCalendarStateTaskQueue = new SynchronizeTaskQueue();
   }
   /**

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

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { h } from '@stencil/core';
-import { FeatureFlag } from '../../../../helpers/public-api';
+import { FeatureFlag } from '../../../../helpers/feature-control/feature-flag-controller';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaClear, VegaClose, VegaOpen, VegaMonthYearChange, VegaSelectionChange, } from '../../../../helpers/event-manager/event-id/vega-event-id';
 import { tryGetDocument } from '../../../../utils/try-get-document';
@@ -109,11 +109,11 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
 VegaDatePickerCalendarRenderer.calendarModalSize = 344;
 VegaDatePickerCalendarRenderer.regularDatePickerCalendarDimensionsForSingle = {
   width: 280,
-  height: 316,
+  height: 320,
 };
 VegaDatePickerCalendarRenderer.regularDatePickerCalendarDimensionsForRange = {
   width: 608,
-  height: 324,
+  height: 358,
 };
 __decorate([
   MapToComponentField()

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

@@ -0,0 +1,109 @@
+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 { MonthPeriod } from '../../../../../helpers/calendar';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import { Icons } from '../../../assets/icons';
+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 VegaDatePickerCalendarHeaderRenderer extends VegaSlimmer {
+  render() {
+    return (h("vega-flex", { class: "month-item-header", alignItems: "center" },
+      this.renderSwitcher(),
+      this.yearMonthSwitcherRender.render()));
+  }
+  renderSwitcher() {
+    return (h("vega-flex", { gap: "size-8", alignItems: "center" },
+      this.renderPrevIcon(),
+      this.renderToday(),
+      this.renderNextIcon()));
+  }
+  renderPrevIcon() {
+    const startDate = this.currentPeriod.current.firstDateOfMonth();
+    const isDisabled = this.minCalendarDate &&
+      (startDate.isBefore(this.minCalendarDate) || startDate.equal(this.minCalendarDate));
+    return (h("vega-button-circle", { class: {
+        'button-previous-month': true,
+        'disabled': isDisabled,
+      }, variant: "icon-only", icon: VegaInternalIconManager.getIconKey('chevron-left'), ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+          this.currentPeriodController.gotoPreviousPeriod();
+        });
+      }, iconColor: isDisabled ? 'text-disabled' : 'text-link', size: this.getNavigationIconSize(), disabled: isDisabled }));
+  }
+  renderNextIcon() {
+    const period = this.mode === 'range' ? this.currentPeriod.next() : this.currentPeriod;
+    const endDate = period.current.lastDateOfMonth();
+    const isDisabled = this.maxCalendarDate &&
+      (endDate.isAfter(this.maxCalendarDate) || endDate.equal(this.maxCalendarDate));
+    return (h("vega-button-circle", { class: {
+        'button-next-month': true,
+        'disabled': isDisabled,
+      }, variant: "icon-only", icon: VegaInternalIconManager.getIconKey('chevron-right'), ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+          this.currentPeriodController.gotoNextPeriod();
+        });
+      }, size: this.getNavigationIconSize(), iconColor: isDisabled ? 'text-disabled' : 'text-link', disabled: isDisabled }));
+  }
+  renderToday() {
+    const hasLabel = this.mode === 'range' && !this.isMobileDevice && this.size !== 'small';
+    return (h("vega-button-link", { class: {
+        'button-today': true,
+        'with-label': hasLabel,
+      }, label: hasLabel ? this.translationSlimmer.t('Today') : '', ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+          this.currentPeriodController.updateCalendarPeriod(new MonthPeriod(this.today, true, this.timezone));
+        });
+      }, size: this.size === 'large' ? 'default' : 'small', icon: VegaInternalIconManager.getIconKey('bulls-eye') }));
+  }
+  getNavigationIconSize() {
+    if (this.size === 'large')
+      return 'small';
+    return 'extra-small';
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'chevron-left': Icons['chevron-left'],
+    'chevron-right': Icons['chevron-right'],
+    'bulls-eye': Icons['bulls-eye'],
+  });
+})();
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "currentPeriod", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "today", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "yearMonthSwitcherRender", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "mode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "currentPeriodController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "maxCalendarDate", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "minCalendarDate", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "size", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "timezone", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "isMobileDevice", void 0);

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

@@ -18,6 +18,7 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
         'static-height': this.staticHeight,
       } },
       h("div", { class: "container__main" },
+        this.headerRenderer.render(),
         this.renderContainer(),
         this.renderFooter())));
   }
@@ -74,3 +75,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "isMobileDevice", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "headerRenderer", void 0);

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);