@globalpayments/vega 2.89.0 → 2.91.0

package/dist/collection/components/vega-app-footer/vega-app-footer.js

@@ -4,19 +4,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { Component, Host, h, Prop, Element, Fragment, State } from '@stencil/core';
+import { Component, Host, h, Prop, Element, Fragment, State, Event } from '@stencil/core';
 import { HEARTLAND_PRIVACY_URL, HEARTLAND_TOS_URL, HEARTLAND_GOOGLE_PRIVACY_POLICY_URL, HEARTLAND_GOOGLE_TREMS_SERVICE_URL, GLOBALPAYMENTS_TOS_URL, GLOBALPAYMENTS_PRIVACY_URL, GLOBALPAYMENTS_CONTENT, HEARTLAND_CONTENT, } from '../../constants/misc';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaInternalThemeManager } from '../../helpers/theme/internal-theme-manager';
 import { BrandSwitchControllerSlimmer } from '../../helpers/slimmers/brand-switch-state-controller-slimmer';
+import { VegaAppFooterAdditionalLinksRenderer } from './slimmers/renderers/vega-app-footer-additional-links-renderer';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
+import { VegaAdditionalLinkClick } from '../../helpers/event-manager/event-id/vega-event-id';
 /**
  * @vegaVersion 1.3.0
  */
 export class VegaAppFooter {
   constructor() {
     this.globalSlimmers = {};
+    this.additionalLinkClickEventEmitter = createEventEmitSlimmer(VegaAppFooter, VegaAdditionalLinkClick);
+    this.additionalLinksRenderer = new VegaAppFooterAdditionalLinksRenderer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.brandSwitchControllerSlimmer = new BrandSwitchControllerSlimmer();
     this.googlePrivacyPolicyUrl = HEARTLAND_GOOGLE_PRIVACY_POLICY_URL;
@@ -138,7 +143,7 @@ export class VegaAppFooter {
   renderLinks() {
     return (h("div", { class: "vega-link" },
       !this.hideDefaultLinks ? this.renderDefaultLinks() : null,
-      this.additionalLinks.length ? this.renderAdditionalLinks() : null));
+      this.additionalLinksRenderer.render()));
   }
   renderDefaultLinks() {
     return (h(Fragment, null,
@@ -157,16 +162,6 @@ export class VegaAppFooter {
       ? this.privacyPolicyUrl
       : this.getDefaultPrivacyPolicyUrl();
   }
-  renderAdditionalLinks() {
-    return (h(Fragment, null,
-      !this.hideDefaultLinks ? h("span", { class: "v-separator" }) : null,
-      this.additionalLinks.map((link, index) => {
-        return (link.URL &&
-          link.label && (h(Fragment, null,
-          h("a", { id: link.id, target: link.target, href: link.URL }, link.label),
-          this.additionalLinks.length === index + 1 ? null : (h("span", { class: "v-separator" })))));
-      })));
-  }
   renderDisclaimer() {
     return (this.showDisclaimer && (h("div", { class: "vega-app-footer-disclaimer" },
       h("div", { class: "h-separator" }),
@@ -497,11 +492,67 @@ export class VegaAppFooter {
   static get states() { return {
     "currentBranding": {}
   }; }
+  static get events() { return [{
+      "method": "vegaAdditionalLinkClick",
+      "name": "vegaAdditionalLinkClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.91.0"
+          }],
+        "text": "An event emitter notifying the click event of the additional link in the app footer."
+      },
+      "complexType": {
+        "original": "VegaAppFooterLink",
+        "resolved": "{ id?: string; label: string; URL: string; target?: LinkTargetType; }",
+        "references": {
+          "VegaAppFooterLink": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "additionalLinkClick",
+      "name": "additionalLinkClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.91.0"
+          }],
+        "text": "An event emitter notifying the click event of the additional link in the app footer."
+      },
+      "complexType": {
+        "original": "VegaAppFooterLink",
+        "resolved": "{ id?: string; label: string; URL: string; target?: LinkTargetType; }",
+        "references": {
+          "VegaAppFooterLink": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }]; }
   static get elementRef() { return "host"; }
 }
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaAppFooter.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaAppFooter.prototype, "additionalLinkClickEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaAppFooter.prototype, "additionalLinksRenderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaAppFooter.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

package/dist/collection/components/vega-calendar/slimmers/common/controllers/vega-calendar-current-period-controller.js

@@ -7,10 +7,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { CalendarDate, DayPeriod, MonthPeriod, WeekPeriod, } from '../../../../../helpers/calendar';
 import { getClosestWorkday } from '../../../utils';
+import { InternalCalendarPeriodConverter } from '../../../../../helpers/calendar/calendar-period/internal-calendar-period-factory';
 /** This TypeScript class `VegaCalendarCurrentPeriodController` updates the current period based on the view mode in a calendar component. */
 export class VegaCalendarCurrentPeriodController extends VegaSlimmer {
   /**
-   * set new current period
+   * set new current period from VegaCalendarCurrentPeriodType
    *
    * @param {CalendarPeriod} newPeriod new value
    */
@@ -60,10 +61,7 @@ export class VegaCalendarCurrentPeriodController extends VegaSlimmer {
     if (newValue && newValue.type !== this.viewMode) {
       this.viewMode = newValue.type;
     }
-    this.changeEventEmitter.emit({
-      viewMode: newValue.type,
-      currentPeriod: this.getCurrentPeriodSummary(),
-    });
+    this.changeEventEmitter.emit(InternalCalendarPeriodConverter.toCalendarPeriodType(newValue));
   }
   /**
    * update the current period when view mode change
@@ -82,27 +80,20 @@ export class VegaCalendarCurrentPeriodController extends VegaSlimmer {
     this.updateCalendarPeriod(this.viewMode, this.currentPeriod.current);
   }
   /**
-   * The function `getStartDateAndEndDate` returns an array of `VegaCalendarDateType` objects based on the `startDate` and `endDate` properties of the `currentPeriod` object.
+   * set new current period from VegaCalendarPeriodType
    *
-   * @returns {VegaCalendarChangeEventType['currentPeriod']} An array of objects containing the date, month, and year properties of the currentPeriod's
-   * start date and end date.
+   * @param {VegaCalendarPeriodType} newPeriod new value
    */
-  getCurrentPeriodSummary() {
-    const { current, startDate, endDate } = this.currentPeriod;
-    return {
-      year: current.year,
-      month: current.month,
-      startDate: {
-        date: startDate.date,
-        month: startDate.month,
-        year: startDate.year,
-      },
-      endDate: {
-        date: endDate.date,
-        month: endDate.month,
-        year: endDate.year,
-      },
-    };
+  setCurrentPeriodFromExternal(newPeriod) {
+    this.setCurrentPeriod(InternalCalendarPeriodConverter.fromCalendarPeriodType(newPeriod, this.timezone, this.showWeekends));
+  }
+  /**
+   * Get the current calendar period.
+   *
+   * @returns {VegaCalendarPeriodType} the current calendar period
+   */
+  getCurrentPeriod() {
+    return InternalCalendarPeriodConverter.toCalendarPeriodType(this.currentPeriod);
   }
 }
 __decorate([
@@ -132,3 +123,9 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchShowWeekendsChange')
 ], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodAfterHideWeekEndsChange", null);
+__decorate([
+  MapToComponentMethod('setCurrentPeriod')
+], VegaCalendarCurrentPeriodController.prototype, "setCurrentPeriodFromExternal", null);
+__decorate([
+  MapToComponentMethod('getCurrentPeriod')
+], VegaCalendarCurrentPeriodController.prototype, "getCurrentPeriod", null);

package/dist/collection/components/vega-calendar/slimmers/common/renderers/vega-calendar-switch-panel.js

@@ -7,11 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 { VegaChange, VegaClick, VegaDropdownClick, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaChange, VegaDropdownClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
-import chevronRight from '../../../../../global/icons/chevron-right';
-import chevronLeft from '../../../../../global/icons/chevron-left';
-import ellipsisVertical from '../../../icons/ellipsis-vertical';
+import ellipsisVerticalIcon from '../../../icons/ellipsis-vertical';
+import { VegaInternalCurrentPeriodChange } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /** The `VegaCalendarSwitchPanelRenderer` class in TypeScript React renders a calendar switch panel with date navigation, view selection, and action buttons. */
 export class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
   constructor() {
@@ -24,24 +23,6 @@ export class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
     this.handleViewChange = (input) => {
       this.currentPeriodController.updateCalendarPeriod(input.detail, this.postOperationDate);
     };
-    /**
-     * reset view content to today
-     */
-    this.todayButtonClick = () => {
-      this.currentPeriodController.setCurrentPeriod(this.currentPeriod.now());
-    };
-    /**
-     * update view content after click next button
-     */
-    this.nextButtonClick = () => {
-      this.currentPeriodController.setCurrentPeriod(this.currentPeriod.next());
-    };
-    /**
-     * update view content after click previous button
-     */
-    this.prevButtonClick = () => {
-      this.currentPeriodController.setCurrentPeriod(this.currentPeriod.previous());
-    };
     /**
      * The more action menu item click
      *
@@ -71,31 +52,10 @@ export class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
         this.showSwitchView ? this.renderViewSwitch() : null,
         this.renderMoreActionMenu())));
   }
-  /**
-   * The `renderDateSwitch` function returns a container with buttons for switching dates and displaying the current date.
-   *
-   * @returns {HTMLDivElement} action button elements container.
-   */
   renderDateSwitch() {
-    return (h("div", { class: "calendar-date-switch-container" },
-      h("vega-button", { variant: "secondary", size: "small", ref: (button) => {
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.todayButtonClick);
-        }, label: this.translationSlimmer.t('Today') }),
-      h("vega-button-circle", { variant: "secondary", size: "small", icon: VegaInternalIconManager.getIconKey('chevron-left'), label: "previous", showTooltip: false, ref: (button) => {
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.prevButtonClick);
-        } }),
-      h("vega-button-circle", { variant: "secondary", size: "small", icon: VegaInternalIconManager.getIconKey('chevron-right'), label: "next", showTooltip: false, ref: (button) => {
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.nextButtonClick);
-        } }),
-      this.renderCurrentPeriod()));
-  }
-  /**
-   * The function `renderCurrentPeriod` returns an HTML element displaying the view date content summary info.
-   *
-   * @returns {HTMLVegaFontElement} The text content inside the element is "Current Date Test".
-   */
-  renderCurrentPeriod() {
-    return (h("vega-font", { class: "calendar-current-date", variant: "font-field-label", color: "text-primary" }, this.getViewDateSummary()));
+    return (h("vega-calendar-period-switcher", { viewMode: this.viewMode, timezone: this.timezone, showWeekends: this.showWeekends, ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaInternalCurrentPeriodChange, (input) => this.currentPeriodController.setCurrentPeriod(input.detail));
+      } }));
   }
   /**
    * The function `renderViewSwitch` returns a JSX element for rendering a segment control component in a TypeScript React application.
@@ -121,42 +81,10 @@ export class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
         h("vega-button-circle", { "data-aria-label": this.translationSlimmer.t('More actions'), size: "small", icon: VegaInternalIconManager.getIconKey('ellipsis-vertical'), variant: "icon-only" })));
     }
   }
-  /**
-   * Get the view content date summary info, such as `January, 2024` or `10 January, 2024` or `28 December, 2023 - 3 January, 2024`
-   *
-   * @returns {string} string
-   */
-  getViewDateSummary() {
-    const currentDate = this.currentPeriod.current;
-    let result = '';
-    switch (this.viewMode) {
-      case 'day': {
-        const monthName = this.translationSlimmer.t(currentDate.getMonthName());
-        result = `${currentDate.date} ${monthName}, ${currentDate.year}`;
-        break;
-      }
-      case 'week': {
-        const weekItems = this.calendarView.dateItems[0];
-        const start = weekItems[0];
-        const end = weekItems[weekItems.length - 1];
-        const [startMonthName, endMonthName] = [start, end].map((item) => this.translationSlimmer.t(item.getMonthName()));
-        result = `${start.date} ${startMonthName}${start.year === end.year ? '' : ', ' + start.year} - ${end.date} ${endMonthName}, ${end.year}`;
-        break;
-      }
-      case 'month': {
-        const monthName = this.translationSlimmer.t(currentDate.getMonthName());
-        result = `${monthName}, ${currentDate.year}`;
-        break;
-      }
-    }
-    return result;
-  }
 }
 (() => {
   VegaInternalIconManager.register({
-    'chevron-right': chevronRight,
-    'chevron-left': chevronLeft,
-    'ellipsis-vertical': ellipsisVertical,
+    'ellipsis-vertical': ellipsisVerticalIcon,
   });
 })();
 VegaCalendarSwitchPanelRenderer.views = [
@@ -194,3 +122,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "showSwitchView", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "timezone", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "showWeekends", void 0);

package/dist/collection/components/vega-calendar/vega-calendar-period-switcher/slimmers/controllers/vega-calendar-period-current-period-controller.js

@@ -0,0 +1,153 @@
+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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { CalendarDate, DayPeriod, MonthPeriod, WeekPeriod, } from '../../../../../helpers/calendar';
+import { InternalCalendarPeriodConverter } from '../../../../../helpers/calendar/calendar-period/internal-calendar-period-factory';
+import ChangeManager from '../../../../../helpers/change-manager/change-manager';
+import DomNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalCurrentPeriodChange } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { getClosestWorkday } from '../../../utils';
+/**
+ * Controller for managing the current period of a calendar component.
+ */
+export class VegaCalendarPeriodCurrentPeriodController extends VegaSlimmer {
+  /**
+   * Initialize the current period based on the view mode and timezone.
+   * This method is called when the component loads and when relevant properties change.
+   */
+  componentWillLoad() {
+    this.updateCalendarPeriod(this.viewMode, CalendarDate.from(new Date(), this.timezone));
+  }
+  /**
+   * set new current period from VegaCalendarPeriodType
+   *
+   * @param {CalendarPeriod} newPeriod new value
+   */
+  setCurrentPeriod(newPeriod) {
+    this.currentPeriod = newPeriod;
+  }
+  /**
+   * The calendar period should update when the property viewMode changes
+   */
+  watchViewModeChange() {
+    if (this.currentPeriod && this.viewMode !== this.currentPeriod.type) {
+      this.updateCalendarPeriod(this.viewMode, this.currentPeriod.current);
+    }
+  }
+  /**
+   * The calendar period should update when the property showWeekends changes
+   */
+  watchShowWeekendsChange() {
+    if (this.currentPeriod && this.showWeekends !== this.currentPeriod.showWeekends) {
+      this.updateCalendarPeriod(this.viewMode, this.currentPeriod.current);
+    }
+  }
+  /**
+   * The calendar period should update when the property timezone changes
+   */
+  watchTimezoneChange() {
+    if (this.currentPeriod && this.timezone !== this.currentPeriod.timezone) {
+      this.updateCalendarPeriod(this.viewMode, this.currentPeriod.current);
+    }
+  }
+  /**
+   * Watch for changes in the current period and emit an event if it changes.
+   *
+   * @param {CalendarPeriod} newValue - The new current period.
+   * @param {CalendarPeriod} oldValue - The previous current period.
+   */
+  watchCurrentPeriodChange(newValue, oldValue) {
+    if (newValue &&
+      oldValue &&
+      newValue.startDate.equal(oldValue.startDate) &&
+      newValue.endDate.equal(oldValue.endDate)) {
+      return;
+    }
+    if (newValue && newValue.type !== this.viewMode) {
+      this.viewMode = newValue.type;
+    }
+    ChangeManager.notify(DomNodeSubjectFactory.getSubject(this.host, VegaInternalCurrentPeriodChange), {
+      detail: this.currentPeriod,
+    });
+    this.changeEventEmitter.emit(InternalCalendarPeriodConverter.toCalendarPeriodType(this.currentPeriod));
+  }
+  /**
+   * Get the current calendar period.
+   *
+   * @param {VegaCalendarPeriodType} period - The new calendar period to set.
+   */
+  setCurrentPeriodFromExternal(period) {
+    this.setCurrentPeriod(InternalCalendarPeriodConverter.fromCalendarPeriodType(period, this.timezone, this.showWeekends));
+  }
+  /**
+   * Get the current calendar period.
+   *
+   * @returns {VegaCalendarPeriodType} the current calendar period
+   */
+  getCurrentPeriod() {
+    return InternalCalendarPeriodConverter.toCalendarPeriodType(this.currentPeriod);
+  }
+  /**
+   * Update the current calendar period based on the view mode and a reference date.
+   *
+   * @param {VegaCalendarViewModeType} viewMode - The current view mode of the calendar.
+   * @param {CalendarDate} date - A reference date to calculate the new period.
+   */
+  updateCalendarPeriod(viewMode, date) {
+    switch (viewMode) {
+      case 'month':
+        this.setCurrentPeriod(new MonthPeriod(date, this.showWeekends, this.timezone));
+        break;
+      case 'week':
+        date = this.showWeekends === false ? getClosestWorkday(date) : date;
+        this.setCurrentPeriod(new WeekPeriod(date, this.showWeekends, this.timezone));
+        break;
+      case 'day':
+        this.setCurrentPeriod(new DayPeriod(date, this.showWeekends, this.timezone));
+        break;
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarPeriodCurrentPeriodController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaCalendarPeriodCurrentPeriodController.prototype, "currentPeriod", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaCalendarPeriodCurrentPeriodController.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarPeriodCurrentPeriodController.prototype, "timezone", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarPeriodCurrentPeriodController.prototype, "showWeekends", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarPeriodCurrentPeriodController.prototype, "changeEventEmitter", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaCalendarPeriodCurrentPeriodController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchViewModeChange')
+], VegaCalendarPeriodCurrentPeriodController.prototype, "watchViewModeChange", null);
+__decorate([
+  MapToComponentMethod('watchShowWeekendsChange')
+], VegaCalendarPeriodCurrentPeriodController.prototype, "watchShowWeekendsChange", null);
+__decorate([
+  MapToComponentMethod('watchTimezoneChange')
+], VegaCalendarPeriodCurrentPeriodController.prototype, "watchTimezoneChange", null);
+__decorate([
+  MapToComponentMethod('watchCurrentPeriodChange')
+], VegaCalendarPeriodCurrentPeriodController.prototype, "watchCurrentPeriodChange", null);
+__decorate([
+  MapToComponentMethod('setCurrentPeriod')
+], VegaCalendarPeriodCurrentPeriodController.prototype, "setCurrentPeriodFromExternal", null);
+__decorate([
+  MapToComponentMethod('getCurrentPeriod')
+], VegaCalendarPeriodCurrentPeriodController.prototype, "getCurrentPeriod", null);

package/dist/collection/components/vega-calendar/vega-calendar-period-switcher/slimmers/controllers/vega-calendar-period-state-controller.js

@@ -0,0 +1,32 @@
+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 { MapToComponentField } from 'vega-slimmer/core';
+import { SubStateObserverSlimmer } from '../../../../../helpers/slimmers/sub-state/sub-state-observer-slimmer';
+/** The `VegaCalendarPeriodStateController` class in TypeScript initializes a calendar with specified subStates. */
+export class VegaCalendarPeriodStateController extends SubStateObserverSlimmer {
+  /**
+   * The constructor function initializes a calendar with specified subStates in TypeScript.
+   */
+  constructor() {
+    super({
+      parent: 'vega-calendar',
+      subStates: [
+        {
+          subStateName: 'currentPeriod',
+          parentStateName: 'currentPeriod',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (value) => {
+            this.currentPeriodController.setCurrentPeriod(value);
+          },
+        },
+      ],
+    });
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarPeriodStateController.prototype, "currentPeriodController", void 0);

package/dist/collection/components/vega-calendar/vega-calendar-period-switcher/slimmers/renderers/vega-calendar-period-renderer.js

@@ -0,0 +1,55 @@
+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 chevronRight from '../../../../../global/icons/chevron-right';
+import chevronLeft from '../../../../../global/icons/chevron-left';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+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 VegaCalendarPeriodRenderer extends VegaSlimmer {
+  render() {
+    return (h("div", { class: "calendar-date-switch-container" },
+      this.renderTodayButton(),
+      this.renderPreviousButton(),
+      this.renderNextButton(),
+      this.renderDateSummary()));
+  }
+  renderTodayButton() {
+    return (h("vega-button", { variant: "secondary", size: "small", ref: (button) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, () => this.currentPeriodController.setCurrentPeriod(this.currentPeriod.now()));
+      }, label: this.translationSlimmer.t('Today') }));
+  }
+  renderPreviousButton() {
+    return (h("vega-button-circle", { variant: "secondary", size: "small", icon: VegaInternalIconManager.getIconKey('chevron-left'), label: this.translationSlimmer.t('Previous'), showTooltip: false, ref: (button) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, () => this.currentPeriodController.setCurrentPeriod(this.currentPeriod.previous()));
+      } }));
+  }
+  renderNextButton() {
+    return (h("vega-button-circle", { variant: "secondary", size: "small", icon: VegaInternalIconManager.getIconKey('chevron-right'), label: this.translationSlimmer.t('Next'), showTooltip: false, ref: (button) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, () => this.currentPeriodController.setCurrentPeriod(this.currentPeriod.next()));
+      } }));
+  }
+  renderDateSummary() {
+    return (h("vega-font", { class: "calendar-current-date", variant: "font-field-label", color: "text-primary" }, this.currentPeriod.getViewDateSummary()));
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'chevron-right': chevronRight,
+    'chevron-left': chevronLeft,
+  });
+})();
+__decorate([
+  MapToComponentField()
+], VegaCalendarPeriodRenderer.prototype, "currentPeriod", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarPeriodRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarPeriodRenderer.prototype, "currentPeriodController", void 0);

package/dist/collection/components/vega-calendar/vega-calendar-period-switcher/vega-calendar-period-switcher.css

@@ -0,0 +1,20 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+:host {
+  display: flex;
+  align-items: center;
+}
+
+.calendar-date-switch-container {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-direction: row;
+}
+
+.calendar-current-date {
+  padding-left: 8px;
+}