@globalpayments/vega 2.44.0 → 2.46.0

package/dist/collection/components/vega-flag-icon/slimmers/controllers/vega-flag-icon-controller.js

@@ -0,0 +1,102 @@
+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 { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import { LogUtility } from '../../../../utils/log';
+import { FLAG_ICON_LOADED } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import { Observer } from '../../../../helpers/change-manager/observer/observer';
+import changeManager from '../../../../helpers/change-manager/change-manager';
+import { forceUpdate } from '@stencil/core';
+/**
+ * The function `dynamicLoadTheCountryFlags` will dynamic import and register flags of all countries at once
+ */
+export async function dynamicLoadTheCountryFlags() {
+  try {
+    const countryFlags = (await import('../../assets/country-flags')).CountryFlags;
+    VegaInternalIconManager.register(countryFlags);
+    changeManager.notify(FLAG_ICON_LOADED, {});
+  }
+  catch (err) {
+    /* istanbul ignore next */
+    LogUtility.error(`Error loading flag module:`, err);
+  }
+}
+/**
+ * The `VegaFlagIconController` class in TypeScript manage country flag and
+ * country codes, dynamic import the flags of all countries and get the country icon by specific code.
+ */
+export class VegaFlagIconController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Determines whether the observer should accept changes.
+     *
+     * @returns {boolean} Always returns true in the current implementation.
+     */
+    this.isAcceptObserver = () => {
+      return true;
+    };
+    /**
+     * This function listens whether the logo icon is imported asynchronously.
+     */
+    this.listenerCallback = () => {
+      forceUpdate(this.host);
+    };
+  }
+  /**
+   * componentWillLoad
+   */
+  componentWillLoad() {
+    if (!this.country)
+      return;
+    const hasIcon = this.isFlagForCountryCodeLoaded(this.country);
+    if (!hasIcon)
+      this.registerObserver();
+  }
+  /**
+   * disconnectedCallback
+   */
+  unRegisterObserver() {
+    if (this.observer) {
+      changeManager.unregister(FLAG_ICON_LOADED, this.observer);
+      this.observer = null;
+    }
+  }
+  /**
+   * The function creates an observer to observe the subject of FLAG_ICON_LOADED.
+   */
+  registerObserver() {
+    this.observer = new Observer(this.isAcceptObserver.bind(this), this.listenerCallback.bind(this));
+    changeManager.register(FLAG_ICON_LOADED, this.observer);
+  }
+  /**
+   * Checks if the country icon exists by country code.
+   *
+   * @param {VegaCountryCode} countryCode - The `country` parameter is of type `VegaCountryCode`, which is likely a
+   * custom data type representing a country code.
+   * @returns {boolean} return the icon is exist or not.
+   */
+  isFlagForCountryCodeLoaded(countryCode) {
+    const icon = VegaInternalIconManager.getIconKey(countryCode);
+    return VegaInternalIconManager.hasIcon(icon);
+  }
+}
+(() => {
+  void dynamicLoadTheCountryFlags();
+})();
+__decorate([
+  MapToComponentField()
+], VegaFlagIconController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFlagIconController.prototype, "country", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaFlagIconController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaFlagIconController.prototype, "unRegisterObserver", null);

package/dist/collection/components/vega-flag-icon/slimmers/renderers/vega-flag-icon-renderer.js

@@ -0,0 +1,28 @@
+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, VegaSlimmer } from 'vega-slimmer/core';
+import { h } from '@stencil/core';
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import { VegaIconManager } from '../../../../helpers/icon/icon-manager';
+import { formatAndValidResponsiveToken } from '../../../../utils/design-token';
+export class VegaFlagIconRenderer extends VegaSlimmer {
+  render() {
+    const icon = VegaInternalIconManager.getIconKey(this.country);
+    const hasIcon = VegaIconManager.hasIcon(icon);
+    const height = formatAndValidResponsiveToken(this.size, 'widthAndHeight');
+    const width = `calc(${height} * 4 / 3)`;
+    if (!hasIcon)
+      return (h("vega-skeleton", { type: "image", corners: "rounded-2", height: height, width: width }));
+    return h("vega-icon", { icon: icon, size: this.size, style: { width: width } });
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaFlagIconRenderer.prototype, "size", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFlagIconRenderer.prototype, "country", void 0);

package/dist/collection/components/vega-flag-icon/vega-flag-icon.css

@@ -0,0 +1,13 @@
+/* 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: inline-block;
+}
+:host vega-icon,
+:host vega-skeleton,
+:host svg {
+  display: block;
+}

package/dist/collection/components/vega-flag-icon/vega-flag-icon.js

@@ -0,0 +1,106 @@
+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 { Component, Prop, h, Element, Host } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../utils/component';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { VegaFlagIconRenderer } from './slimmers/renderers/vega-flag-icon-renderer';
+import { VegaFlagIconController } from './slimmers/controllers/vega-flag-icon-controller';
+/**
+ * @vegaVersion 2.46.0
+ */
+export class VegaFlagIcon {
+  constructor() {
+    this.globalSlimmers = {};
+    this.renderer = new VegaFlagIconRenderer();
+    this.vegaFlagIconController = new VegaFlagIconController();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    /**
+     * Specifies the width and height of the icon.
+     *
+     * @vegaVersion 2.46.0
+     */
+    this.size = 'size-16';
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  static get is() { return "vega-flag-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-flag-icon.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-flag-icon.css"]
+  }; }
+  static get properties() { return {
+    "country": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaCountryCode",
+        "resolved": "\"AC\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CF\" | \"CG\" | \"CH\" | \"CI\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CV\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB\" | \"GD\" | \"GE\" | \"GF\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GP\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MF\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NC\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PM\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RE\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SD\" | \"SE\" | \"SG\" | \"SH\" | \"SI\" | \"SJ\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TA\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VA\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WF\" | \"WS\" | \"XK\" | \"YE\" | \"YT\" | \"ZA\" | \"ZM\" | \"ZW\"",
+        "references": {
+          "VegaCountryCode": {
+            "location": "import",
+            "path": "../../types/flag.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.46.0"
+          }],
+        "text": "Specifies the country code using the two-letter uppercase country code."
+      },
+      "attribute": "country",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "SpacingTokenType",
+        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\"",
+        "references": {
+          "SpacingTokenType": {
+            "location": "import",
+            "path": "../../types/design-token.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.46.0"
+          }],
+        "text": "Specifies the width and height of the icon."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'size-16'"
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaFlagIcon.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFlagIcon.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFlagIcon.prototype, "vegaFlagIconController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFlagIcon.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

package/dist/collection/components/vega-input-phone-number/vega-input-phone-number.js

@@ -109,8 +109,10 @@ export class VegaInputPhoneNumber {
     this.allowedCountryCodes = CountrySelectController.defaultAllowedCountryCodes;
     /**
      * Specifies whether the phone number input field can be set to an empty value.
-     *   When set to true, the value of phoneNumber is cleared when the input field is empty.
-     *   When set to false, the value of phoneNumber is always composed of the country code and phone number, even if the input field is empty.
+     * - `true`:
+     *      The value property is cleared when the input field is empty.
+     * - `false`:
+     *      The value property is `+1` when no phone number is entered.
      *
      * @vegaVersion 2.35.0
      */
@@ -118,7 +120,8 @@ export class VegaInputPhoneNumber {
     /**
      * Specifies the value of the phone number input in [E.164]{@link https://en.wikipedia.org/wiki/E.164} format.
      *
-     * @VegaWarning Note: The input phone number field will always have a value. If no phone number is entered, the default format is `+{default_country_code}`. For example, if the default country code is US, the default value will be `+1`.
+     * @VegaWarning - Note: The input phone number field will always have a value. If no phone number is entered, the default format is `+{default_country_code}`.
+     *              - For example, if the default country code is US, the default value will be `+1`.
      * @vegaVersion 2.18.0
      * @defaultValue +1
      */
@@ -270,7 +273,7 @@ export class VegaInputPhoneNumber {
         "references": {
           "VegaCountryCode": {
             "location": "import",
-            "path": "./types"
+            "path": "../../types/flag.type"
           }
         }
       },
@@ -299,7 +302,7 @@ export class VegaInputPhoneNumber {
         "references": {
           "VegaCountryCode": {
             "location": "import",
-            "path": "./types"
+            "path": "../../types/flag.type"
           }
         }
       },
@@ -332,7 +335,7 @@ export class VegaInputPhoneNumber {
             "name": "vegaVersion",
             "text": "2.35.0"
           }],
-        "text": "Specifies whether the phone number input field can be set to an empty value.\n  When set to true, the value of phoneNumber is cleared when the input field is empty.\n  When set to false, the value of phoneNumber is always composed of the country code and phone number, even if the input field is empty."
+        "text": "Specifies whether the phone number input field can be set to an empty value.\n- `true`:\n     The value property is cleared when the input field is empty.\n- `false`:\n     The value property is `+1` when no phone number is entered."
       },
       "attribute": "empty-value-enabled",
       "reflect": false,
@@ -351,7 +354,7 @@ export class VegaInputPhoneNumber {
       "docs": {
         "tags": [{
             "name": "VegaWarning",
-            "text": "Note: The input phone number field will always have a value. If no phone number is entered, the default format is `+{default_country_code}`. For example, if the default country code is US, the default value will be `+1`."
+            "text": "- Note: The input phone number field will always have a value. If no phone number is entered, the default format is `+{default_country_code}`.\n- For example, if the default country code is US, the default value will be `+1`."
           }, {
             "name": "vegaVersion",
             "text": "2.18.0"

package/dist/collection/components/vega-input-select/slimmers/controllers/vega-input-select-dropdown-controller.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaSearchTrigger, } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaReset, VegaSearchTrigger, } from '../../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalDropdownTemplateItemsChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /** The `VegaInputSelectDropdownController` class is a TypeScript React component that controls the behavior of a dropdown select input. */
 export class VegaInputSelectDropdownController extends VegaSlimmer {
@@ -60,6 +60,9 @@ export class VegaInputSelectDropdownController extends VegaSlimmer {
       }));
       this.sourceController.appendSourceItems(addedItems);
     });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaReset, async () => {
+      this.vegaInputSelectValueController.setValue(this.selectType === 'multiple' ? [] : '');
+    });
   }
 }
 __decorate([
@@ -89,3 +92,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "hideEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownController.prototype, "selectType", void 0);

package/dist/collection/components/vega-input-select/vega-input-select.js

@@ -516,7 +516,7 @@ export class VegaInputSelect {
       "mutable": false,
       "complexType": {
         "original": "VegaDropdownPropsForSelect",
-        "resolved": "{ size?: ResponsiveType<SizeType>; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; matchContainerHeight?: boolean; searchable?: boolean; caseSensitive?: boolean; useDefaultFilter?: boolean; searchTriggerBy?: VegaDropdownSearchTriggerByType; isScreenPosition?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; matchContainerHeight?: boolean; searchable?: boolean; caseSensitive?: boolean; useDefaultFilter?: boolean; searchTriggerBy?: VegaDropdownSearchTriggerByType; isScreenPosition?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; resettable?: boolean; }",
         "references": {
           "VegaDropdownPropsForSelect": {
             "location": "import",

package/dist/collection/components/vega-nav/slimmers/renderers/vega-nav-list-renderer.js

@@ -29,14 +29,14 @@ export class VegaNavListRenderer extends VegaSlimmer {
   }
   renderSection(section) {
     var _a;
-    return (h("vega-left-nav-section", { sectionHeader: section.sectionHeader }, (_a = section.children) === null || _a === void 0 ? void 0 : _a.map((item) => item.type == 'group' ? this.renderGroup(item) : this.renderLink(item))));
+    return (h("vega-left-nav-section", { itemKey: section.key, sectionHeader: section.sectionHeader }, (_a = section.children) === null || _a === void 0 ? void 0 : _a.map((item) => item.type == 'group' ? this.renderGroup(item) : this.renderLink(item))));
   }
   renderGroup(item) {
     var _a;
-    return (h("vega-left-nav-group", { key: item.name, icon: item.icon, label: item.name, "open-by-default": item.openByDefault }, (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child) => child.type == 'group' ? this.renderGroup(child) : this.renderLink(child))));
+    return (h("vega-left-nav-group", { itemKey: item.key, key: item.key || item.name, icon: item.icon, label: item.name, "open-by-default": item.openByDefault }, (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child) => child.type == 'group' ? this.renderGroup(child) : this.renderLink(child))));
   }
   renderLink(item) {
-    return (h("vega-left-nav-link", { key: item.name, icon: item.icon, url: item.url, selected: item.selected, counterBadge: item.counterBadge }, item.name));
+    return (h("vega-left-nav-link", { itemKey: item.key, key: item.key || item.name, icon: item.icon, url: item.url, selected: item.selected, counterBadge: item.counterBadge }, item.name));
   }
 }
 __decorate([

package/dist/collection/components/vega-nav/vega-left-nav-group/slimmers/renderers/vega-left-nav-group-renderer.js

@@ -86,3 +86,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaLeftNavGroupRenderer.prototype, "openByDefault", void 0);
+__decorate([
+  MapToComponentField()
+], VegaLeftNavGroupRenderer.prototype, "itemKey", void 0);

package/dist/collection/components/vega-nav/vega-left-nav-group/vega-left-nav-group.js

@@ -4,7 +4,7 @@ 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 { h, Component, Prop, Element, Event, State } from '@stencil/core';
+import { h, Component, Prop, Element, Event, State, Host } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../../utils/component';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, slotPlaceholder, } from 'vega-slimmer/core';
 import { VegaLeftNavGroupRenderer } from './slimmers/renderers/vega-left-nav-group-renderer';
@@ -38,7 +38,7 @@ export class VegaLeftNavGroup {
   }
   render() {
     slotPlaceholder(h("slot", null));
-    return sanitizeVegaComponent(this.renderer.render(), this.host);
+    return (h(Host, { "data-key": this.itemKey }, sanitizeVegaComponent(this.renderer.render(), this.host)));
   }
   static get is() { return "vega-left-nav-group"; }
   static get encapsulation() { return "shadow"; }
@@ -110,6 +110,26 @@ export class VegaLeftNavGroup {
       "attribute": "open-by-default",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "itemKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.45.0"
+          }],
+        "text": "Defines a unique key for the left nav group item."
+      },
+      "attribute": "item-key",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/vega-nav/vega-left-nav-link/slimmers/renderers/vega-left-nav-link-renderer.js

@@ -30,7 +30,7 @@ export class VegaLeftNavLinkRenderer extends VegaSlimmer {
     var _a;
     const url = this.url || 'javascript:void(0);';
     const classList = this.selected === true ? 'selected' : '';
-    return (h(Host, { class: classList },
+    return (h(Host, { class: classList, "data-key": this.itemKey },
       h("a", { href: url, onClick: this.handleClick },
         this.icon && (h("div", { class: "vega-links-icon" },
           h("div", { class: "prefix-icon" },
@@ -76,3 +76,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "customSelectionEnabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaLeftNavLinkRenderer.prototype, "itemKey", void 0);

package/dist/collection/components/vega-nav/vega-left-nav-link/vega-left-nav-link.js

@@ -26,6 +26,7 @@ export class VegaLeftNavLink {
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     /**
      * A boolean that indicates whether the current link item is selected.
+     *
      * @VegaWarning Note: Ensure that the `custom-selection-enabled` property is set to `true` before modifying this value, as modifying it without this setting may lead to unexpected behavior.
      * @vegaVersion 1.31.0
      */
@@ -161,6 +162,26 @@ export class VegaLeftNavLink {
           }],
         "text": "config the counter badge for left nav link items"
       }
+    },
+    "itemKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.45.0"
+          }],
+        "text": "Defines a unique key for the left nav link item."
+      },
+      "attribute": "item-key",
+      "reflect": false
     }
   }; }
   static get events() { return [{

package/dist/collection/components/vega-nav/vega-left-nav-section/slimmers/renderers/vega-left-nav-section-renderer.js

@@ -10,7 +10,7 @@ import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-man
 import { VegaClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
 export class VegaLeftNavSectionRenderer extends VegaSlimmer {
   render() {
-    return (h(Host, null,
+    return (h(Host, { "data-key": this.itemKey },
       this.renderSectionHeader(),
       h("slot", null),
       this.renderListSeparator()));
@@ -38,3 +38,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaLeftNavSectionRenderer.prototype, "actionClickEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaLeftNavSectionRenderer.prototype, "itemKey", void 0);

package/dist/collection/components/vega-nav/vega-left-nav-section/vega-left-nav-section.js

@@ -56,6 +56,26 @@ export class VegaLeftNavSection {
           }],
         "text": "sectionHeader attached to the left nav section **"
       }
+    },
+    "itemKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.45.0"
+          }],
+        "text": "Defines a unique key for the left nav nav section item."
+      },
+      "attribute": "item-key",
+      "reflect": false
     }
   }; }
   static get events() { return [{

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

@@ -83,10 +83,11 @@ export class VegaPagination {
      * It refers to additional elements or components that can be added to
      *    enhance the functionality or appearance of each pagination item.
      *
-     * @VegaWarning Note: The default value is controlled by feature flag `VEGA_PAGINATION.ENABLE_EXTENSIONS_RESPONSIVE_DEFAULT_VALUE`, which is disabled by default. To enable the new responsive default value `{
-          default: [['pageSizeSelectorMobile_currentPageLabel'], ['pageSelectorMobile_goTo']],
-          M: [['pageSelector']],
-        }`, please enable the feature flag.
+     * @VegaWarning - Note: The default value is controlled by feature flag `VEGA_PAGINATION.ENABLE_EXTENSIONS_RESPONSIVE_DEFAULT_VALUE`, which is disabled by default.
+     *              - To enable the new responsive default value `{
+              default: [['pageSizeSelectorMobile_currentPageLabel'], ['pageSelectorMobile_goTo']],
+                M: [['pageSelector']],
+                    }`, please enable the feature flag.
      * @vegaVersion 1.25.0
      * @defaultValue [['pageSelector']]
      */
@@ -317,7 +318,7 @@ export class VegaPagination {
       "docs": {
         "tags": [{
             "name": "VegaWarning",
-            "text": "Note: The default value is controlled by feature flag `VEGA_PAGINATION.ENABLE_EXTENSIONS_RESPONSIVE_DEFAULT_VALUE`, which is disabled by default. To enable the new responsive default value `{\ndefault: [['pageSizeSelectorMobile_currentPageLabel'], ['pageSelectorMobile_goTo']],\nM: [['pageSelector']],\n}`, please enable the feature flag."
+            "text": "- Note: The default value is controlled by feature flag `VEGA_PAGINATION.ENABLE_EXTENSIONS_RESPONSIVE_DEFAULT_VALUE`, which is disabled by default. \n- To enable the new responsive default value `{\ndefault: [['pageSizeSelectorMobile_currentPageLabel'], ['pageSelectorMobile_goTo']],\nM: [['pageSelector']],\n}`, please enable the feature flag."
           }, {
             "name": "vegaVersion",
             "text": "1.25.0"

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

@@ -59,10 +59,8 @@ export class VegaPopover {
     /**
      * Determines whether the popover's position is calculated relative to the screen.
      *
-     * @VegaWarning When enabled (set to true), it overrides the positionRelativeTo property, making it ineffective.
-     *
-     * @VegaWarning Currently, when set to true, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content).
-     *
+     * @VegaWarning - It will overrides the positionRelativeTo and matchContainerHeight properties, rendering them ineffective.
+     *              - Currently, when set to true, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content).
      * @vegaVersion 2.39.0
      */
     this.isScreenPosition = false;
@@ -279,10 +277,7 @@ export class VegaPopover {
       "docs": {
         "tags": [{
             "name": "VegaWarning",
-            "text": "When enabled (set to true), it overrides the positionRelativeTo property, making it ineffective."
-          }, {
-            "name": "VegaWarning",
-            "text": "Currently, when set to true, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content)."
+            "text": "- It will overrides the positionRelativeTo and matchContainerHeight properties, rendering them ineffective.\n- Currently, when set to true, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content)."
           }, {
             "name": "vegaVersion",
             "text": "2.39.0"

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/text-styles-toolbar-button-slimmer.js

@@ -59,7 +59,7 @@ export class TextStylesToolbarButtonSlimmer extends ToolbarButtonSlimmer {
       const boldAnnotation = new BoldAnnotation(item.bold);
       return (h("vega-dropdown-item", { key: item.key, itemKey: item.key },
         h("vega-box", { padding: { right: 'size-20' } },
-          h("div", { style: Object.assign(Object.assign({}, textStyleAnnotation.render()), boldAnnotation.render()) }, item.label))));
+          h("div", { style: Object.assign(Object.assign({}, textStyleAnnotation.render()), boldAnnotation.render()) }, this.translationSlimmer.t(item.label)))));
     })));
   }
   isSelected() {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/toolbar-button-slimmer.abstract.js

@@ -13,7 +13,7 @@ export class ToolbarButtonSlimmer extends VegaSlimmer {
     super();
     this.renderBtn = ({ showArrowIcon, iconColor } = {}) => {
       var _a;
-      return (h("vega-tooltip", { text: this.tooltip.text, placement: ['bottom', 'top'] },
+      return (h("vega-tooltip", { text: this.translationSlimmer.t(this.tooltip.text), placement: ['bottom', 'top'] },
         h("vega-rich-text-editor-toolbar-button", Object.assign({ showArrowIcon: showArrowIcon, icon: this.icon, iconColor: iconColor, ref: (ref) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
               this.handleClick();
@@ -60,6 +60,9 @@ export class ToolbarButtonSlimmer extends VegaSlimmer {
     };
   }
 }
+__decorate([
+  MapToComponentField()
+], ToolbarButtonSlimmer.prototype, "translationSlimmer", void 0);
 __decorate([
   MapToComponentField()
 ], ToolbarButtonSlimmer.prototype, "selectionController", void 0);

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.js

@@ -42,12 +42,14 @@ import { FocusController } from './slimmers/controllers/focus-controller';
 import { TextNodeColorController } from './slimmers/controllers/text-node-color-controller';
 import { InsertCompositionTextController } from './slimmers/controllers/insert-composition-text-controller';
 import { DeleteSelectedNodesController } from './slimmers/controllers/delete-selected-nodes-controller';
+import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 /**
  * @vegaVersion 2.34.0
  */
 export class VegaRichTextEditor {
   constructor() {
     this.globalSlimmers = {};
+    this.translationSlimmer = new TranslationSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.formFieldController = new FormFieldControllerSlimmer({
       propertyRules: [
@@ -585,6 +587,9 @@ export class VegaRichTextEditor {
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaRichTextEditor.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "translationSlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);