@globalpayments/vega 2.90.0 → 2.92.0

package/dist/cjs/{wait-for-component-did-render-762084fc.js → wait-for-component-did-render-02ca4bee.js}

@@ -3,7 +3,7 @@
 const observer = require('./observer-f49483e8.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
-const vegaInternalEventId = require('./vega-internal-event-id-e138d4d6.js');
+const vegaInternalEventId = require('./vega-internal-event-id-ecc5b87a.js');
 
 /**
  * Wait for the component has been rendered.

package/dist/cjs/xmark-large-faae5a80.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const xmarkLarge = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M393.4 41.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L269.3 256 438.6 425.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 301.3 54.6 470.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 9.4 86.6C-3.1 74.1-3.1 53.9 9.4 41.4s32.8-12.5 45.3 0L224 210.7 393.4 41.4z"/></svg>`,
+};
+
+exports.xmarkLarge = xmarkLarge;

package/dist/cjs/{y-axis-input-processor-54a26515.js → y-axis-input-processor-d3a3839c.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const legendInputProcessor = require('./legend-input-processor-1e53e5bc.js');
+const legendInputProcessor = require('./legend-input-processor-ce9b38f8.js');
 const array = require('./array-249289f2.js');
 
 /* eslint-disable jsdoc/require-param-type, jsdoc/require-returns-type, jsdoc/require-param, jsdoc/require-returns */

package/dist/collection/collection-manifest.json

@@ -1,5 +1,6 @@
 {
   "entries": [
+    "./components/vega-rich-text-editor/extensions/find-replace/vega-rich-text-find-replace-panel/vega-rich-text-find-replace-panel.js",
     "./components/vega-accordion/vega-accordion.js",
     "./components/vega-app-footer/vega-app-footer.js",
     "./components/vega-app-header-button/vega-app-header-button.js",
@@ -17,6 +18,7 @@
     "./components/vega-calendar/vega-calendar.js",
     "./components/vega-calendar/vega-calendar-event/vega-calendar-event.js",
     "./components/vega-calendar/vega-calendar-event-slot/vega-calendar-event-slot.js",
+    "./components/vega-calendar/vega-calendar-period-switcher/vega-calendar-period-switcher.js",
     "./components/vega-card/vega-card.js",
     "./components/vega-carousel/vega-carousel.js",
     "./components/vega-chart/vega-bar-chart/vega-bar-chart.js",
@@ -383,6 +385,11 @@
         "vega-rich-text-special-characters-panel"
       ]
     },
+    {
+      "components": [
+        "vega-rich-text-find-replace-panel"
+      ]
+    },
     {
       "components": [
         "vega-rich-text-content"
@@ -511,14 +518,6 @@
         "vega-rich-text-table-setting"
       ]
     },
-    {
-      "components": [
-        "vega-calendar",
-        "vega-calendar-event",
-        "vega-calendar-event-preview",
-        "vega-calendar-event-slot"
-      ]
-    },
     {
       "components": [
         "vega-rich-text-editor",
@@ -545,6 +544,15 @@
         "vega-nav-card"
       ]
     },
+    {
+      "components": [
+        "vega-calendar",
+        "vega-calendar-event",
+        "vega-calendar-event-preview",
+        "vega-calendar-event-slot",
+        "vega-calendar-period-switcher"
+      ]
+    },
     {
       "components": [
         "vega-table",

package/dist/collection/components/vega-accordion/slimmers/vega-accordion-renderer.js

@@ -70,15 +70,20 @@ export class VegaAccordionRenderer extends VegaSlimmer {
       h("slot", { name: "accordion-title" })));
   }
   getExpandIconAriaLabel() {
-    if (this.accordionTitle) {
+    const title = this.accordionTitle || this.getSlottedTitleText();
+    if (title) {
       return this.expand
-        ? this.translationSlimmer.t('Collapse {0} accordion', this.accordionTitle)
-        : this.translationSlimmer.t('Expand {0} accordion', this.accordionTitle);
+        ? this.translationSlimmer.t('Collapse {0} accordion', title)
+        : this.translationSlimmer.t('Expand {0} accordion', title);
     }
     return this.expand
       ? this.translationSlimmer.t('Collapse accordion')
       : this.translationSlimmer.t('Expand accordion');
   }
+  getSlottedTitleText() {
+    const slotted = this.host.querySelector('[slot="title"], [slot="accordion-title"]');
+    return slotted ? (slotted.textContent || '').trim() : '';
+  }
 }
 (() => {
   VegaInternalIconManager.register({
@@ -116,3 +121,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaAccordionRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaAccordionRenderer.prototype, "host", void 0);

package/dist/collection/components/vega-app-footer/slimmers/renderers/vega-app-footer-additional-links-renderer.js

@@ -0,0 +1,45 @@
+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 { Fragment, h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+/**
+ * This class is a slimmer that renders the additional links in the footer.
+ * It is used to separate the rendering logic from the main component.
+ */
+export class VegaAppFooterAdditionalLinksRenderer extends VegaSlimmer {
+  render() {
+    return (this.additionalLinks.length > 0 && (h(Fragment, null,
+      !this.hideDefaultLinks ? h("span", { class: "v-separator" }) : null,
+      this.additionalLinks.map((link, index) => {
+        return this.renderAdditionalLink(link, index);
+      }))));
+  }
+  renderAdditionalLink(link, index) {
+    return (link.URL &&
+      link.label && (h(Fragment, null,
+      h("a", { id: link.id, target: link.target, href: link.URL, 
+        // Inline binding is acceptable here since footer re-renders are infrequent
+        // eslint-disable-next-line react/jsx-no-bind
+        onClick: (e) => this.onAdditionalLinkClick(e, link) }, link.label),
+      this.additionalLinks.length === index + 1 ? null : h("span", { class: "v-separator" }))));
+  }
+  onAdditionalLinkClick(event, link) {
+    const emittedEvent = this.additionalLinkClickEventEmitter.emit(link);
+    if (emittedEvent.defaultPrevented) {
+      event.preventDefault();
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaAppFooterAdditionalLinksRenderer.prototype, "additionalLinks", void 0);
+__decorate([
+  MapToComponentField()
+], VegaAppFooterAdditionalLinksRenderer.prototype, "hideDefaultLinks", void 0);
+__decorate([
+  MapToComponentField()
+], VegaAppFooterAdditionalLinksRenderer.prototype, "additionalLinkClickEventEmitter", void 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-box/vega-box.js

@@ -651,7 +651,7 @@ export class VegaBox {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<AlignSelfType>",
-        "resolved": "\"auto\" | \"inherit\" | \"initial\" | \"normal\" | \"revert\" | \"revert-layer\" | \"unset\" | { S?: AlignSelfType; M?: AlignSelfType; L?: AlignSelfType; XL?: AlignSelfType; default?: AlignSelfType; } | ({ [x: number]: string; [Symbol.iterator]: () => IterableIterator<string>; small: () => string; toString: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; }; match: { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; slice: (start?: number, end?: number) => string; split: { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: (locales?: string | string[]) => string; toUpperCase: () => string; toLocaleUpperCase: (locales?: string | string[]) => string; trim: () => string; readonly length: number; substr: (from: number, length?: number) => string; valueOf: () => string; codePointAt: (pos: number) => number; includes: (searchString: string, position?: number) => boolean; endsWith: (searchString: string, endPosition?: number) => boolean; normalize: { (form: \"NFC\" | \"NFD\" | \"NFKC\" | \"NFKD\"): string; (form?: string): string; }; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; big: () => string; blink: () => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; link: (url: string) => string; strike: () => string; sub: () => string; sup: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>; at: (index: number) => string; })",
+        "resolved": "\"auto\" | \"inherit\" | \"initial\" | \"normal\" | \"revert\" | \"revert-layer\" | \"unset\" | { S?: AlignSelfType; M?: AlignSelfType; L?: AlignSelfType; XL?: AlignSelfType; default?: AlignSelfType; } | ({ [x: number]: string; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; [Symbol.iterator]: () => IterableIterator<string>; small: () => string; toString: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; }; match: { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; slice: (start?: number, end?: number) => string; split: { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: (locales?: string | string[]) => string; toUpperCase: () => string; toLocaleUpperCase: (locales?: string | string[]) => string; trim: () => string; readonly length: number; substr: (from: number, length?: number) => string; valueOf: () => string; codePointAt: (pos: number) => number; includes: (searchString: string, position?: number) => boolean; endsWith: (searchString: string, endPosition?: number) => boolean; normalize: { (form: \"NFC\" | \"NFD\" | \"NFKC\" | \"NFKD\"): string; (form?: string): string; }; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; big: () => string; blink: () => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; link: (url: string) => string; strike: () => string; sub: () => string; sup: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>; at: (index: number) => string; })",
         "references": {
           "ResponsiveType": {
             "location": "import",
@@ -715,7 +715,7 @@ export class VegaBox {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<GridColumnType>",
-        "resolved": "\"auto / auto\" | \"auto\" | `${number} / ${number}` | `${number} / auto` | `${number} / span ${number}` | `auto / ${number}` | `auto / span ${number}` | `span ${number} / ${number}` | `span ${number} / auto` | `span ${number} / span ${number}` | `span ${number}` | number | { S?: GridColumnType; M?: GridColumnType; L?: GridColumnType; XL?: GridColumnType; default?: GridColumnType; } | ({ [x: number]: string; [Symbol.iterator]: () => IterableIterator<string>; small: () => string; toString: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; }; match: { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; slice: (start?: number, end?: number) => string; split: { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: (locales?: string | string[]) => string; toUpperCase: () => string; toLocaleUpperCase: (locales?: string | string[]) => string; trim: () => string; readonly length: number; substr: (from: number, length?: number) => string; valueOf: () => string; codePointAt: (pos: number) => number; includes: (searchString: string, position?: number) => boolean; endsWith: (searchString: string, endPosition?: number) => boolean; normalize: { (form: \"NFC\" | \"NFD\" | \"NFKC\" | \"NFKD\"): string; (form?: string): string; }; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; big: () => string; blink: () => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; link: (url: string) => string; strike: () => string; sub: () => string; sup: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>; at: (index: number) => string; })",
+        "resolved": "\"auto / auto\" | \"auto\" | `${number} / ${number}` | `${number} / auto` | `${number} / span ${number}` | `auto / ${number}` | `auto / span ${number}` | `span ${number} / ${number}` | `span ${number} / auto` | `span ${number} / span ${number}` | `span ${number}` | number | { S?: GridColumnType; M?: GridColumnType; L?: GridColumnType; XL?: GridColumnType; default?: GridColumnType; } | ({ [x: number]: string; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; [Symbol.iterator]: () => IterableIterator<string>; small: () => string; toString: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; }; match: { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; slice: (start?: number, end?: number) => string; split: { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: (locales?: string | string[]) => string; toUpperCase: () => string; toLocaleUpperCase: (locales?: string | string[]) => string; trim: () => string; readonly length: number; substr: (from: number, length?: number) => string; valueOf: () => string; codePointAt: (pos: number) => number; includes: (searchString: string, position?: number) => boolean; endsWith: (searchString: string, endPosition?: number) => boolean; normalize: { (form: \"NFC\" | \"NFD\" | \"NFKC\" | \"NFKD\"): string; (form?: string): string; }; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; big: () => string; blink: () => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; link: (url: string) => string; strike: () => string; sub: () => string; sup: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>; at: (index: number) => string; })",
         "references": {
           "ResponsiveType": {
             "location": "import",
@@ -747,7 +747,7 @@ export class VegaBox {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<GridRowType>",
-        "resolved": "\"auto / auto\" | \"auto\" | `${number} / ${number}` | `${number} / auto` | `${number} / span ${number}` | `auto / ${number}` | `auto / span ${number}` | `span ${number} / ${number}` | `span ${number} / auto` | `span ${number} / span ${number}` | `span ${number}` | number | { S?: GridRowType; M?: GridRowType; L?: GridRowType; XL?: GridRowType; default?: GridRowType; } | ({ [x: number]: string; [Symbol.iterator]: () => IterableIterator<string>; small: () => string; toString: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; }; match: { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; slice: (start?: number, end?: number) => string; split: { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: (locales?: string | string[]) => string; toUpperCase: () => string; toLocaleUpperCase: (locales?: string | string[]) => string; trim: () => string; readonly length: number; substr: (from: number, length?: number) => string; valueOf: () => string; codePointAt: (pos: number) => number; includes: (searchString: string, position?: number) => boolean; endsWith: (searchString: string, endPosition?: number) => boolean; normalize: { (form: \"NFC\" | \"NFD\" | \"NFKC\" | \"NFKD\"): string; (form?: string): string; }; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; big: () => string; blink: () => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; link: (url: string) => string; strike: () => string; sub: () => string; sup: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>; at: (index: number) => string; })",
+        "resolved": "\"auto / auto\" | \"auto\" | `${number} / ${number}` | `${number} / auto` | `${number} / span ${number}` | `auto / ${number}` | `auto / span ${number}` | `span ${number} / ${number}` | `span ${number} / auto` | `span ${number} / span ${number}` | `span ${number}` | number | { S?: GridRowType; M?: GridRowType; L?: GridRowType; XL?: GridRowType; default?: GridRowType; } | ({ [x: number]: string; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; [Symbol.iterator]: () => IterableIterator<string>; small: () => string; toString: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; }; match: { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; slice: (start?: number, end?: number) => string; split: { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: (locales?: string | string[]) => string; toUpperCase: () => string; toLocaleUpperCase: (locales?: string | string[]) => string; trim: () => string; readonly length: number; substr: (from: number, length?: number) => string; valueOf: () => string; codePointAt: (pos: number) => number; includes: (searchString: string, position?: number) => boolean; endsWith: (searchString: string, endPosition?: number) => boolean; normalize: { (form: \"NFC\" | \"NFD\" | \"NFKC\" | \"NFKD\"): string; (form?: string): string; }; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; big: () => string; blink: () => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; link: (url: string) => string; strike: () => string; sub: () => string; sup: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>; at: (index: number) => string; })",
         "references": {
           "ResponsiveType": {
             "location": "import",

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