@globalpayments/vega 2.17.0 → 2.18.1

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

@@ -0,0 +1,490 @@
+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, Element, Host, Prop, Watch, h, State, Event } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../utils/component';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { VegaInputPhoneNumberRenderer } from './slimmers/renderers/vega-input-phone-number-renderer';
+import { CountrySelectRenderer } from './slimmers/renderers/country-select-renderer';
+import { PhoneNumberInputRenderer } from './slimmers/renderers/phone-number-input-renderer';
+import { getCountryCallingCode } from 'libphonenumber-js';
+import { VegaInputPhoneNumberValueController } from './slimmers/controllers/vega-input-phone-number-value-controller';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/componentUsageRuntimeMetrics';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/formFieldControllerSlimmer';
+import { ValidPhoneNumberRule } from '../../helpers/validator/rules/validPhoneNumberRule';
+import { CountrySelectController } from './slimmers/controllers/country-select-controller';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/eventEmitSlimmer';
+import { VegaChange, VegaCountryChange } from '../../helpers/event-manager/eventID/vegaEventId';
+import { InputPhoneNumberRequiredRule } from '../../helpers/validator/rules/inputPhoneNumberRequiredRule';
+import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
+export class VegaInputPhoneNumber {
+  constructor() {
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.valueController = new VegaInputPhoneNumberValueController();
+    this.inputPhoneNumberRenderer = new VegaInputPhoneNumberRenderer();
+    this.countrySelectRenderer = new CountrySelectRenderer();
+    this.phoneNumberInputRenderer = new PhoneNumberInputRenderer();
+    this.countrySelectController = new CountrySelectController();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaInputPhoneNumber, VegaChange);
+    this.countryChangeEventEmitter = createEventEmitSlimmer(VegaInputPhoneNumber, VegaCountryChange);
+    this.inputPhoneNumberEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host, true);
+    this.formFieldController = new FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired) => isRequired
+            ? new InputPhoneNumberRequiredRule(() => this.phoneNumberInputRenderer.getInputRef().value)
+            : null,
+        },
+        {
+          propertyName: '',
+          ruleFactory: () => new ValidPhoneNumberRule(() => this.countryCode),
+        },
+        {
+          propertyName: 'countryCode',
+          ruleFactory: () => new ValidPhoneNumberRule(() => this.countryCode),
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: '+1',
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.inputPhoneNumberRenderer.getInputPhoneNumberContainerRef(),
+      touchableAreaGetter: () => [this.phoneNumberInputRenderer.getInputRef()],
+    });
+    this.countryCodeSearchString = '';
+    this.phoneNumberInputValue = '';
+    /**
+     * Specifies the label or title for the phone number input field.
+     *
+     * It provides descriptive text that helps identify the
+     *    purpose or content expected in the input field.
+     */
+    this.label = '';
+    /**
+     * Specifies the size of the phone number input field.
+     */
+    this.size = 'default';
+    /**
+     * Determines whether the phone number input field is required.
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.required = false;
+    /**
+     * Determines whether the phone number input field is disabled.
+     */
+    this.disabled = false;
+    /**
+     * Specifies the default country calling code using the two-letter uppercase country code.
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.countryCode = CountrySelectController.defaultCountryCode;
+    /**
+     * Specifies the countries available for selection.
+     *
+     * Note: By default, 245 codes are provided, but loading all of them may take time. To improve performance, it is recommended to include only the necessary codes.
+     */
+    this.allowedCountryCodes = CountrySelectController.defaultAllowedCountryCodes;
+    /**
+     * Specifies the value of the phone number input in [E.164]{@link https://en.wikipedia.org/wiki/E.164} format.
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.value = `+${getCountryCallingCode(this.countryCode)}`;
+    /**
+     * Specifies custom validation rules for the phone number input field.
+     */
+    this.validationRules = [];
+    /**
+     * Indicates whether the current value in the field is considered valid
+     *    based on the defined validation rules.
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
+    /**
+     * Determines whether the phone number input field should undergo automatic validation
+     *    during the user's input.
+     */
+    this.autoValidation = true;
+    /**
+     * Provides a supplementary prompt message that assists users in
+     *    understanding the expected value for the input field.
+     */
+    this.hint = '';
+  }
+  watchCountryCode(newCountryCode, oldCountryCode) {
+    methodPlaceholder(newCountryCode, oldCountryCode);
+  }
+  watchValue(value) {
+    methodPlaceholder(value);
+  }
+  watchValidationRules() {
+    methodPlaceholder();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.inputPhoneNumberRenderer.render()), this.host);
+  }
+  static get is() { return "vega-input-phone-number"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-input-phone-number.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-input-phone-number.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the label or title for the phone number input field.\n\nIt provides descriptive text that helps identify the\n   purpose or content expected in the input field."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'small'",
+        "resolved": "\"default\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the size of the phone number input field."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines whether the phone number input field is required."
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines whether the phone number input field is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "countryCode": {
+      "type": "string",
+      "mutable": true,
+      "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"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the default country calling code using the two-letter uppercase country code."
+      },
+      "attribute": "country-code",
+      "reflect": true,
+      "defaultValue": "CountrySelectController.defaultCountryCode"
+    },
+    "allowedCountryCodes": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaCountryCode[]",
+        "resolved": "CountryCode[]",
+        "references": {
+          "VegaCountryCode": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the countries available for selection.\n\nNote: By default, 245 codes are provided, but loading all of them may take time. To improve performance, it is recommended to include only the necessary codes."
+      },
+      "defaultValue": "CountrySelectController.defaultAllowedCountryCodes"
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the value of the phone number input in [E.164]{@link https ://en.wikipedia.org/wiki/E.164} format."
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "`+${getCountryCallingCode(this.countryCode)}`"
+    },
+    "validationRules": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "FormFieldValidationRule<unknown>[]",
+        "resolved": "FormFieldValidationRule<unknown>[]",
+        "references": {
+          "FormFieldValidationRule": {
+            "location": "import",
+            "path": "../../helpers/validator/rules/formFieldValidationRule"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies custom validation rules for the phone number input field."
+      },
+      "defaultValue": "[]"
+    },
+    "isValid": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether the current value in the field is considered valid\n   based on the defined validation rules."
+      },
+      "attribute": "is-valid",
+      "reflect": true,
+      "defaultValue": "null"
+    },
+    "autoValidation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines whether the phone number input field should undergo automatic validation\n   during the user's input."
+      },
+      "attribute": "auto-validation",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies a placeholder string that displays as a temporary hint\n   or example inside the input field."
+      },
+      "attribute": "placeholder",
+      "reflect": false
+    },
+    "hint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Provides a supplementary prompt message that assists users in\n   understanding the expected value for the input field."
+      },
+      "attribute": "hint",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "countryCodeSearchString": {},
+    "phoneNumberInputValue": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaChange",
+      "name": "vegaChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "An event emitter notifying a value change."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying a value change."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "vegaCountryChange",
+      "name": "vegaCountryChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "An event emitter notifying a country change."
+      },
+      "complexType": {
+        "original": "VegaCountryType",
+        "resolved": "{ callingCode: string; countryCode: CountryCode; name: string; }",
+        "references": {
+          "VegaCountryType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "countryChange",
+      "name": "countryChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying a country change."
+      },
+      "complexType": {
+        "original": "VegaCountryType",
+        "resolved": "{ callingCode: string; countryCode: CountryCode; name: string; }",
+        "references": {
+          "VegaCountryType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "countryCode",
+      "methodName": "watchCountryCode"
+    }, {
+      "propName": "value",
+      "methodName": "watchValue"
+    }, {
+      "propName": "validationRules",
+      "methodName": "watchValidationRules"
+    }]; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaInputPhoneNumber.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "valueController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "inputPhoneNumberRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "countrySelectRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "phoneNumberInputRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "countrySelectController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "countryChangeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "inputPhoneNumberEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "formFieldController", void 0);

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

@@ -210,10 +210,9 @@
 }
 
 :host .vega-input-select-prefix-icon {
-  width: 16px;
-  height: 16px;
+  text-align: center;
   color: rgba(var(--v-text-secondary, 107, 116, 125, 1));
-  padding-bottom: 2px;
+  font-size: 0px;
 }
 
 :host .vega-input-select-toggle-icon {

package/dist/collection/components/vega-page-notification/vega-page-notification.css

@@ -5,7 +5,6 @@
  */
 :host {
   display: inline-block;
-  padding: 24px;
   box-sizing: border-box;
   border-radius: 12px;
   max-width: 480px;
@@ -16,7 +15,6 @@
 :host(.mobile) {
   width: 100%;
   max-width: 100%;
-  padding: 16px;
   animation: fade-in-up 300ms ease-in-out;
 }
 

package/dist/collection/components/vega-page-notification/vega-page-notification.js

@@ -99,11 +99,12 @@ export class VegaPageNotification {
   render() {
     const classNames = arrayToClassString([this.type, this.isMobileDevice && 'mobile'].filter(Boolean));
     return sanitizeVegaComponent(h(Host, { class: classNames },
-      h("vega-flex", { gap: "size-16" },
-        this.renderPrefixIcon(),
-        this.renderContent(),
-        this.renderCloseButtons()),
-      this.renderActionButtons()), this.host);
+      h("vega-box", { padding: this.isMobileDevice ? 'size-16' : 'size-24' },
+        h("vega-flex", { gap: "size-16" },
+          this.renderPrefixIcon(),
+          this.renderContent(),
+          this.renderCloseButtons()),
+        this.renderActionButtons())), this.host);
   }
   renderCloseButtons() {
     if (!this.showCloseButton)

package/dist/collection/components/vega-tab-group/vega-tab-group-panel/vega-tab-group-panel.js

@@ -15,7 +15,7 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimme
 export class VegaTabGroupPanel {
   constructor() {
     this.globalSlimmers = {};
-    this.clickEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host);
+    this.clickEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, undefined, true);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     /**
      * Controls the visibility of the tab panel within the tab group.

package/dist/collection/components/vega-table/vega-table-head/vega-table-head.js

@@ -10,11 +10,14 @@ import { sanitizeVegaComponent } from '../../../utils/component';
 import { VegaTableHeadStateController } from './slimmers/controllers/vega-table-head-state-controller';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/componentUsageRuntimeMetrics';
+import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
+import { VegaChange } from '../../../helpers/event-manager/eventID/vegaEventId';
 export class VegaTableHead {
   constructor() {
     this.globalSlimmers = {};
     this.vegaTableHeadStateController = new VegaTableHeadStateController();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.headCellEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host);
     /**
      * Indicates whether the table header is fixed.
      */
@@ -61,3 +64,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableHead.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableHead.prototype, "headCellEventPrevent", void 0);

package/dist/collection/components/vega-table/vega-table-head-row/vega-table-head-row.js

@@ -11,7 +11,7 @@ import { sanitizeVegaComponent } from '../../../utils/component';
 import { VegaTableHeadRowController } from './slimmers/controllers/vega-table-head-row-controller';
 import { VegaTableHeadRowStateController } from './slimmers/controllers/vega-table-head-row-state-controller';
 import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
-import { VegaChange, VegaClick } from '../../../helpers/event-manager/eventID/vegaEventId';
+import { VegaClick } from '../../../helpers/event-manager/eventID/vegaEventId';
 import ResponsiveFormatFacade from '../../../helpers/formatter/responsive-map-formatter/responsiveFormatFacade';
 import { getCurrentBreakpoint } from '../../../utils/breakpoints';
 import { PageResizeObserverSlimmer } from '../../../helpers/slimmers/pageResizeObserverSlimmer';
@@ -22,7 +22,7 @@ export class VegaTableHeadRow {
     this.vegaTableHeadRowStateController = new VegaTableHeadRowStateController();
     this.vegaTableHeadRowRenderer = new VegaTableHeadRowRenderer();
     this.vegaTableHeadRowController = new VegaTableHeadRowController();
-    this.headCellEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick, VegaChange], () => this.host);
+    this.headCellEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, undefined, true);
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.currentBreakpoint = getCurrentBreakpoint();

package/dist/collection/components/vega-table/vega-table-row/slimmers/renderers/vega-table-row-renderer.js

@@ -31,8 +31,7 @@ export class VegaTableRowRenderer extends VegaSlimmer {
         h("div", { class: "vega-table-expand-icon-wrapper" },
           h("vega-icon", { icon: VegaInternalIconManager.getIconKey('chevron-down'), color: "text-link", onClick: this.onExpandIconClick })))));
     };
-    this.onRowClick = (e) => {
-      e.stopPropagation();
+    this.onRowClick = () => {
       this.vegaTableRowClickController.handleRowClick();
     };
     this.onRowSelectionChange = (input) => {

package/dist/collection/components/vega-table/vega-table-row/vega-table-row.js

@@ -13,7 +13,7 @@ import { VegaTableRowClickController } from './slimmers/controllers/vega-table-r
 import { sanitizeVegaComponent } from '../../../utils/component';
 import { VegaTableRowStateController } from './slimmers/controllers/vega-table-row-state-controller';
 import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/eventEmitSlimmer';
-import { VegaChange, VegaClick } from '../../../helpers/event-manager/eventID/vegaEventId';
+import { VegaClick } from '../../../helpers/event-manager/eventID/vegaEventId';
 import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
 import ResponsiveFormatFacade from '../../../helpers/formatter/responsive-map-formatter/responsiveFormatFacade';
 import { getCurrentBreakpoint } from '../../../utils/breakpoints';
@@ -28,7 +28,7 @@ export class VegaTableRow {
     this.vegaTableRowClickController = new VegaTableRowClickController();
     this.vegaTableRowStateController = new VegaTableRowStateController();
     this.clickEventEmitter = createEventEmitSlimmer(VegaTableRow, VegaClick);
-    this.checkboxValueChangeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaClick], () => this.host);
+    this.checkboxValueChangeEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, undefined, true);
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.currentBreakpoint = getCurrentBreakpoint();

package/dist/collection/constants/runtime-metrics-payload-definition/vega-input-select/runtime-metrics-payload-definition.js

@@ -23,4 +23,28 @@ export const VegaInputSelectRuntimeMetricsPayloadDefinition = [
      */
     payloadValue: (host) => host.autoValidation === false,
   },
+  {
+    payloadKey: 'IS_USING_TEMPLATE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the input select',
+    /**
+     * The function checks if the length `source` property of the `host` element is equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.source.length === 0,
+  },
+  {
+    payloadKey: 'IS_USING_DATA_SOURCE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the input select',
+    /**
+     * The function checks if the length `source` property of the `host` element is greater than to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.source.length > 0,
+  },
 ];

package/dist/collection/constants/ui.js

@@ -69,6 +69,8 @@ export const VegaNativeEventName = [
   'actionClick',
   'eventClick',
   'dateDblClick',
+  'countryChange',
+  'actionButtonClick',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const CssStates = ['default', 'hover', 'active', 'focus-visible'];