@globalpayments/vega 2.22.0 → 2.24.0

package/dist/collection/components/vega-input/vega-input.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 { Component, Host, h, Prop, Element, Method, Event, Listen, Watch } from '@stencil/core';
+import { Component, Host, h, Prop, Element, Method, Event, Watch } from '@stencil/core';
 import { EmailFieldRule } from '../../helpers/validator/rules/email-field-rule';
 import { MaxNumberRule } from '../../helpers/validator/rules/max-number-rule';
 import { MaxStringLengthRule } from '../../helpers/validator/rules/max-string-length-rule';
@@ -90,6 +90,12 @@ export class VegaInput {
      *    an ellipsis for visual presentation.
      */
     this.value = '';
+    /**
+     * Specifies when the vegaChange event is triggered.
+     *     It controls whether the event is dispatched
+     *     after typing in the input or after a change event.
+     */
+    this.valueUpdateTrigger = 'input';
     /**
      * Defines the specific type or category of the input field.
      *
@@ -196,6 +202,28 @@ export class VegaInput {
     this.isClearIconVisible = () => {
       return !this.disabled && Boolean(this.value);
     };
+    /**
+     * Handles input event and updates the value based on a specified trigger.
+     * The below method is e2e-test covered in
+     * @see{module:vega-input-on-value-input}
+     */
+    /* istanbul ignore next */
+    this.onInputHandler = (e) => {
+      if (this.valueUpdateTrigger !== 'change') {
+        this.value = e.target.value;
+      }
+    };
+    /**
+     * Handles input change events and updates the value based on a specified trigger.
+     * The below method is e2e-test covered in
+     * @see{module:vega-input-on-value-change}
+     */
+    /* istanbul ignore next */
+    this.inputChangeHandler = (e) => {
+      if (this.valueUpdateTrigger === 'change') {
+        this.value = e.target.value;
+      }
+    };
   }
   /**
    * The input component is embedded in other components.
@@ -231,14 +259,6 @@ export class VegaInput {
   watchMaskChange() {
     this.maskConfigController.setupStringFormatter(this.inputRef);
   }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-input-on-value-input}
-   */
-  /* istanbul ignore next */
-  handleValueInput() {
-    this.value = this.inputRef.value;
-  }
   /**
    * Invoke this method to focus the current input.
    */
@@ -261,7 +281,7 @@ export class VegaInput {
         /* eslint-disable-next-line react/jsx-no-bind */
         onBlur: (e) => this.handleInputBlur(e), 
         /* eslint-disable-next-line react/jsx-no-bind */
-        onFocus: (e) => this.handleInputFocus(e) }, this.copyPasteController.getCopyPasteProps()))));
+        onFocus: (e) => this.handleInputFocus(e), onChange: this.inputChangeHandler, onInput: this.onInputHandler }, this.copyPasteController.getCopyPasteProps()))));
   }
   groupDom() {
     let containerClass = 'vega-input-container';
@@ -337,6 +357,29 @@ export class VegaInput {
       "reflect": true,
       "defaultValue": "''"
     },
+    "valueUpdateTrigger": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "InputValueUpdateTriggeredBy",
+        "resolved": "\"change\" | \"input\"",
+        "references": {
+          "InputValueUpdateTriggeredBy": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies when the vegaChange event is triggered.\n    It controls whether the event is dispatched\n    after typing in the input or after a change event."
+      },
+      "attribute": "value-update-trigger",
+      "reflect": false,
+      "defaultValue": "'input'"
+    },
     "type": {
       "type": "string",
       "mutable": false,
@@ -849,13 +892,6 @@ export class VegaInput {
       "propName": "maskConfig",
       "methodName": "watchMaskChange"
     }]; }
-  static get listeners() { return [{
-      "name": "input",
-      "method": "handleValueInput",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
 }
 __decorate([
   InjectVegaGlobalSlimmer()

package/dist/collection/components/vega-modal/slimmers/controllers/vega-nested-modal-controller.js

@@ -0,0 +1,33 @@
+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';
+/**
+ * Nested modal controller
+ */
+export class VegaNestedModalController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]
+   */
+  connectedCallback() {
+    this.appendNestedModalToBody();
+  }
+  /**
+   * The function appends all nested 'vega-modal' elements found within the host element to the document
+   * body.
+   */
+  appendNestedModalToBody() {
+    this.host.querySelectorAll('vega-modal').forEach((modal) => {
+      document.body.append(modal);
+    });
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaNestedModalController.prototype, "host", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaNestedModalController.prototype, "connectedCallback", null);

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

@@ -13,7 +13,7 @@ import { getCurrentBreakpoint } from '../../utils/breakpoints';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { findParent, getDeviceType } from '../../utils/ui';
 import { formatAndValidResponsiveToken } from '../../utils/design-token';
-import ZIndexManager from '../../helpers/zindex/z-index-manager';
+import InternalVegaZIndexManager from '../../helpers/zindex/internal-vega-z-index-manager';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
@@ -24,6 +24,7 @@ import mainContentStyle from './vega-modal-disable-body-scroll.css';
 import { createDeprecatedPropertySlimmer, } from '../../helpers/slimmers/deprecated-property-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaModalRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-modal/runtime-metrics-payload-definition';
+import { VegaNestedModalController } from './slimmers/controllers/vega-nested-modal-controller';
 export class VegaModal {
   constructor() {
     this.globalSlimmers = {};
@@ -38,6 +39,7 @@ export class VegaModal {
       },
       isDeferred: true,
     });
+    this.nestedModalController = new VegaNestedModalController();
     this.openEventEmitter = createEventEmitSlimmer(VegaModal, VegaOpen);
     this.closeEventEmitter = createEventEmitSlimmer(VegaModal, VegaClose);
     this.childNodesEventPrevent = new ChildNodesEventPreventSlimmer([VegaOpen, VegaClose], () => this.modalContainer);
@@ -306,16 +308,16 @@ export class VegaModal {
   }
   setModalZIndex() {
     if (this.open) {
-      ZIndexManager.setZIndex(this.backdropRef, 'base');
-      ZIndexManager.setZIndex(this.host, 'base');
+      InternalVegaZIndexManager.setZIndex(this.backdropRef, 'base');
+      InternalVegaZIndexManager.setZIndex(this.host, 'base');
     }
     else {
-      ZIndexManager.removeZIndex(this.backdropRef, 'base');
-      ZIndexManager.removeZIndex(this.host, 'base');
+      InternalVegaZIndexManager.removeZIndex(this.backdropRef, 'base');
+      InternalVegaZIndexManager.removeZIndex(this.host, 'base');
       const length = this.getVisibleModalLength();
       if (length > 0) {
-        ZIndexManager.setZIndex(this.backdropRef, 'base');
-        ZIndexManager.setZIndex(VegaModal.openedModalStack[length - 1], 'base');
+        InternalVegaZIndexManager.setZIndex(this.backdropRef, 'base');
+        InternalVegaZIndexManager.setZIndex(VegaModal.openedModalStack[length - 1], 'base');
       }
       this.removeBackdropWhileNoModalShow();
     }
@@ -850,6 +852,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaModal.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "nestedModalController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaModal.prototype, "openEventEmitter", void 0);

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/controllers/vega-left-nav-zindex-controller.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { executeAfterTransition } from '../../../../../utils/effect';
-import ZIndexManager from '../../../../../helpers/zindex/z-index-manager';
+import InternalVegaZIndexManager from '../../../../../helpers/zindex/internal-vega-z-index-manager';
 export class VegaLeftNavZIndexController extends VegaSlimmer {
   watchOpenState() {
     this.updateZIndex();
@@ -19,13 +19,13 @@ export class VegaLeftNavZIndexController extends VegaSlimmer {
   updateZIndex() {
     const backDrop = this.backdropController.getBackdrop();
     if (this.openState == 'open') {
-      ZIndexManager.setZIndex(backDrop, 'base');
-      ZIndexManager.setZIndex(this.host, 'base');
+      InternalVegaZIndexManager.setZIndex(backDrop, 'base');
+      InternalVegaZIndexManager.setZIndex(this.host, 'base');
     }
     else {
       executeAfterTransition(() => {
-        ZIndexManager.removeZIndex(backDrop, 'base');
-        ZIndexManager.removeZIndex(this.host, 'base');
+        InternalVegaZIndexManager.removeZIndex(backDrop, 'base');
+        InternalVegaZIndexManager.removeZIndex(this.host, 'base');
       }, this.host, 300);
     }
   }

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker.css

@@ -58,7 +58,7 @@
 :host(:not(.click-step-disabled)) .vega-progress-step.complete:active .vega-progress-step__icon vega-icon {
   color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
 }
-:host(:not(.click-step-disabled)) .vega-progress-step.complete.current .vega-progress-step__icon vega-icon {
+:host(:not(.click-step-disabled)) .vega-progress-step.complete.current:hover .vega-progress-step__icon vega-icon {
   color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
 }
 
@@ -204,6 +204,9 @@
 :host .vega-progress-step.complete .vega-progress-step__title {
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
 }
+:host .vega-progress-step.complete.current .vega-progress-step__icon vega-icon {
+  color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
+}
 
 :host .vega-progress-step.inProgress .vega-progress-step__icon,
 :host .vega-progress-step.current .vega-progress-step__icon {

package/dist/collection/components/vega-selection-chip/vega-selection-chip-group/slimmers/controllers/vega-selection-chip-group-items-controller.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, methodPlaceholder, VegaSlimmer, } from 'vega-slimmer/core';
 import { MutationObserverSlimmer } from '../../../../../helpers/slimmers/mutation-observer/mutation-observer-slimmer';
 import { TagNameAndAttributeMutationFilter } from '../../../../../helpers/slimmers/mutation-observer/mutation-observer-filters';
+import { isArrayEqual } from '../../../../../utils/array';
 /**
  * Observer child items change to update value.
  */
@@ -82,9 +83,14 @@ export class VegaSelectionChipGroupItemsController extends VegaSlimmer {
    * Sets the value of an element based on the checked items in a selection chip array.
    */
   setValueFromCheckboxItems() {
-    this.valueController.setValue(this.selectionChipArray
+    const currentValue = this.selectionChipArray
       .filter((chip) => chip.checked)
-      .map((chip) => chip.value));
+      .map((chip) => chip.value);
+    // Should skip update the value while same items with different order are in the two value arrays.
+    // ticket: https://gethired.atlassian.net/browse/VD-4534
+    if (!isArrayEqual(this.value, currentValue, true)) {
+      this.valueController.setValue(currentValue);
+    }
   }
   /**
    * Sets the value of a radio item based on the checked status of the items.

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-expand-row-controller.js

@@ -11,6 +11,9 @@ import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import { TABLE_EXPAND_ROW } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import { Observer } from '../../../../helpers/change-manager/observer/observer';
 import { findParent } from '../../../../utils/ui';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import staticRemoteInvocationCallRegistry from '../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import { VegaInternalTableRowExpand } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * The expand row controller of VegaTable
  */
@@ -154,6 +157,7 @@ export class VegaTableExpandRowController extends VegaSlimmer {
       this.mutationObserver.disconnect();
     }
     ChangeManager.unregister(TABLE_EXPAND_ROW, this.expandObserver);
+    staticRemoteInvocationCallRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowExpand));
   }
   /**
    * Component lifecycle - componentDidLoad
@@ -180,6 +184,12 @@ export class VegaTableExpandRowController extends VegaSlimmer {
       }
     });
     ChangeManager.register(TABLE_EXPAND_ROW, this.expandObserver);
+    staticRemoteInvocationCallRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowExpand), ({ rowKey, expanded }) => {
+      return this.rowExpandEventEmitter.emit({
+        record: this.vegaTableDataSourceController.getRecordByKey(rowKey),
+        expanded: expanded,
+      });
+    });
   }
   /**
    * The function checks if the input is an acceptable row observer.
@@ -202,6 +212,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandable", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableExpandRowController.prototype, "rowExpandEventEmitter", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowController.prototype, "vegaTableDataSourceController", void 0);

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-render-mode-controller.js

@@ -32,7 +32,7 @@ export class VegaTableRenderModeController extends VegaSlimmer {
      * @returns {boolean} return true if the mode is template, otherwise false
      */
     this.checkIsTemplateRenderMode = (tableRef) => {
-      return (Array.from(tableRef.children).filter((el) => { var _a; return !((_a = el.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.startsWith('vega-table-expand-row-')); }).length > 0);
+      return Array.from(tableRef.children).some((el) => el.tagName.startsWith('VEGA-TABLE-'));
     };
   }
   /**

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-row-selection-controller.js

@@ -9,6 +9,9 @@ import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import { Observer } from '../../../../helpers/change-manager/observer/observer';
 import { TABLE_ROW_CLICK, TABLE_ROW_SELECTION, TABLE_ROW_SELECTION_ALL, } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import { findParent } from '../../../../utils/ui';
+import staticRemoteInvocationCallRegistry from '../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalTableRowSelect, VegaInternalTableRowSelectAll, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  *
  */
@@ -145,7 +148,7 @@ export class VegaTableRowSelectionController extends VegaSlimmer {
    * Component lifecycle - connectedCallback
    */
   connectedCallback() {
-    this.initRowSelectionObserver();
+    this.initRowSelection();
     this.initRowClickObserver();
     this.initRowSelectionAllObserver();
   }
@@ -156,6 +159,8 @@ export class VegaTableRowSelectionController extends VegaSlimmer {
     ChangeManager.unregister(TABLE_ROW_SELECTION, this.rowSelectionObserver);
     ChangeManager.unregister(TABLE_ROW_SELECTION_ALL, this.rowSelectionAllObserver);
     ChangeManager.unregister(TABLE_ROW_CLICK, this.rowClickObserver);
+    staticRemoteInvocationCallRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelect));
+    staticRemoteInvocationCallRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelectAll));
   }
   /**
    * Component lifecycle - componentWillLoad
@@ -280,15 +285,33 @@ export class VegaTableRowSelectionController extends VegaSlimmer {
     }
   }
   /**
-   * The function initializes a row selection observer.
+   * The function initializes a row selection.
    */
-  initRowSelectionObserver() {
+  initRowSelection() {
     this.rowSelectionObserver = new Observer(this.isAcceptableRowSelectionObserver.bind(this), (payload) => {
       const { rowKey, checked } = payload;
       const record = this.vegaTableDataSourceController.getRecordByKey(rowKey);
       this.handleRowSelect(checked, record);
     });
     ChangeManager.register(TABLE_ROW_SELECTION, this.rowSelectionObserver);
+    staticRemoteInvocationCallRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelect), ({ rowKey, checked }) => {
+      return this.rowSelectEventEmitter.emit({
+        selected: checked,
+        record: this.vegaTableDataSourceController.getRecordByKey(rowKey),
+        selectedRows: this.getSelectedRecords(),
+      });
+    });
+    staticRemoteInvocationCallRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelectAll), ({ checked }) => {
+      return this.rowSelectAllEventEmitter.emit({
+        selected: checked,
+        selectedRows: this.getSelectedRecords(),
+        changedRows: checked
+          ? this.vegaTableDataSourceController
+            .getCurrentData()
+            .filter((record) => !this.selectedRowKeySet.has(record.key))
+          : this.getSelectedRecords(),
+      });
+    });
   }
   /**
    * The function initializes an observer for row selection all in a table
@@ -346,6 +369,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableRowSelectionController.prototype, "vegaTableDataSourceController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowSelectionController.prototype, "rowSelectEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowSelectionController.prototype, "rowSelectAllEventEmitter", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRowSelectionController.prototype, "connectedCallback", null);

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Host, h, Element, State } from '@stencil/core';
-import ZIndexManager from '../../../helpers/zindex/z-index-manager';
+import InternalVegaZIndexManager from '../../../helpers/zindex/internal-vega-z-index-manager';
 import { sanitizeVegaComponent } from '../../../utils/component';
 import { VegaTableHeadStateController } from './slimmers/controllers/vega-table-head-state-controller';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
@@ -24,16 +24,16 @@ export class VegaTableHead {
     this.fixed = false;
     this.handleTableHeadRefChange = (ref) => {
       if (this.tableHeadRef) {
-        ZIndexManager.removeZIndex(this.tableHeadRef, 'base');
+        InternalVegaZIndexManager.removeZIndex(this.tableHeadRef, 'base');
       }
       if (this.fixed) {
-        ZIndexManager.setZIndex(ref, 'base');
+        InternalVegaZIndexManager.setZIndex(ref, 'base');
       }
       this.tableHeadRef = ref;
     };
   }
   disconnectedCallback() {
-    ZIndexManager.removeZIndex(this.tableHeadRef, 'base');
+    InternalVegaZIndexManager.removeZIndex(this.tableHeadRef, 'base');
   }
   render() {
     return sanitizeVegaComponent(h(Host, { class: {

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

@@ -11,6 +11,10 @@ import ChangeManager from '../../../../../helpers/change-manager/change-manager'
 import { TABLE_ROW_SELECTION_ALL } from '../../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import staticRemoteInvocationCallRegistry from '../../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { findParent } from '../../../../../utils/ui';
+import { VegaInternalTableRowSelectAll } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
 export class VegaTableHeadRowRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -18,7 +22,7 @@ export class VegaTableHeadRowRenderer extends VegaSlimmer {
       if (this.selectionType !== 'multiple')
         return;
       return (h("th", { class: "vega-table-selection-column" }, !this.hideSelectAll && (h("div", { class: "vega-table-checkbox-wrapper" },
-        h("vega-checkbox", { size: "small", disabled: this.isEmptyTable || this.selectAllDisabled, checked: this.checkedAll, 
+        h("vega-checkbox", { size: "small", disabled: this.isEmptyTable || this.selectAllDisabled, checked: this.checkedAll, onClick: this.handleClick, 
           /* eslint-disable-next-line react/jsx-no-bind */
           ref: (ref) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handleSelectAll);
@@ -38,6 +42,16 @@ export class VegaTableHeadRowRenderer extends VegaSlimmer {
     this.renderHeaderExpandableCell = () => {
       return this.expandable && h("th", { class: "vega-table-expand-action-column" });
     };
+    this.handleClick = (e) => {
+      e.stopPropagation();
+      const event = staticRemoteInvocationCallRegistry.call(domNodeSubjectFactory.getSubject(findParent(this.host, 'vega-table'), VegaInternalTableRowSelectAll), {
+        host: this.host,
+        checked: !this.checkedAll,
+      });
+      if (event.defaultPrevented) {
+        e.preventDefault();
+      }
+    };
   }
   /**
    * Used by {@link currentDataObserver}

package/dist/collection/components/vega-table/vega-table-row/slimmers/controllers/vega-table-row-click-controller.js

@@ -9,6 +9,9 @@ import ChangeManager from '../../../../../helpers/change-manager/change-manager'
 import { TABLE_ROW_CLICK } from '../../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import { Observer } from '../../../../../helpers/change-manager/observer/observer';
 import { isAcceptableTableRowObserver } from '../../../type-guard';
+import staticRemoteInvocationCallRegistry from '../../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalTableRowSelect } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * The row click controller for table row
  */
@@ -29,8 +32,15 @@ export class VegaTableRowClickController extends VegaSlimmer {
    * Row click handler
    */
   handleRowClick() {
-    ChangeManager.notify(TABLE_ROW_CLICK, { host: this.host, rowKey: this.rowKey });
-    this.clickEventEmitter.emit({ rowKey: this.rowKey });
+    const rowSelectEvent = staticRemoteInvocationCallRegistry.call(domNodeSubjectFactory.getSubject(this.vegaTableRowRenderer.getParentTableRef(), VegaInternalTableRowSelect), {
+      host: this.host,
+      rowKey: this.rowKey,
+      checked: !this.checked,
+    });
+    if (!rowSelectEvent.defaultPrevented) {
+      ChangeManager.notify(TABLE_ROW_CLICK, { host: this.host, rowKey: this.rowKey });
+      this.clickEventEmitter.emit({ rowKey: this.rowKey });
+    }
   }
   /**
    * Initialize row click observer
@@ -74,6 +84,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableRowClickController.prototype, "clickEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowClickController.prototype, "vegaTableRowRenderer", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRowClickController.prototype, "connectedCallback", null);

package/dist/collection/components/vega-table/vega-table-row/slimmers/controllers/vega-table-row-expand-controller.js

@@ -9,6 +9,9 @@ import ChangeManager from '../../../../../helpers/change-manager/change-manager'
 import { TABLE_EXPAND_ROW } from '../../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import { Observer } from '../../../../../helpers/change-manager/observer/observer';
 import { isAcceptableTableObserver } from '../../../type-guard';
+import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import staticRemoteInvocationCallRegistry from '../../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import { VegaInternalTableRowExpand } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * The row expand controller for expandable table row.
  */
@@ -29,12 +32,19 @@ export class VegaTableRowExpandController extends VegaSlimmer {
    * The handler for expand icon click event.
    */
   handleExpandIconClick() {
-    this.expanded = !this.expanded;
-    ChangeManager.notify(TABLE_EXPAND_ROW, {
+    const rowExpandEvent = staticRemoteInvocationCallRegistry.call(domNodeSubjectFactory.getSubject(this.vegaTableRowRenderer.getParentTableRef(), VegaInternalTableRowExpand), {
       host: this.host,
       rowKey: this.rowKey,
-      expanded: this.expanded,
+      expanded: !this.expanded,
     });
+    if (!rowExpandEvent.defaultPrevented) {
+      this.expanded = !this.expanded;
+      ChangeManager.notify(TABLE_EXPAND_ROW, {
+        host: this.host,
+        rowKey: this.rowKey,
+        expanded: this.expanded,
+      });
+    }
   }
   /**
    * Initialize the row expand observer.
@@ -60,6 +70,9 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTableRowExpandController.prototype, "expanded", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowExpandController.prototype, "vegaTableRowRenderer", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRowExpandController.prototype, "connectedCallback", null);

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

@@ -5,11 +5,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Fragment, h } from '@stencil/core';
-import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
 import chevronDown from '../../../../../global/icons/chevron-down';
+import staticRemoteInvocationCallRegistry from '../../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalTableRowSelect } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { findParent } from '../../../../../utils/ui';
 export class VegaTableRowRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -20,7 +24,7 @@ export class VegaTableRowRenderer extends VegaSlimmer {
         h("div", { class: "vega-table-checkbox-wrapper" },
           h("vega-checkbox", { size: "small", checked: this.checked, 
             /* eslint-disable-next-line react/jsx-no-bind */
-            onClick: this.stopRowSelectionPropagation, 
+            onClick: this.handleClick, 
             /* eslint-disable-next-line react/jsx-no-bind */
             ref: (ref) => {
               DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.onRowSelectionChange);
@@ -39,8 +43,16 @@ export class VegaTableRowRenderer extends VegaSlimmer {
         this.vegaTableRowSelectionController.handleRowSelect(input.detail);
       }
     };
-    this.stopRowSelectionPropagation = (e) => {
+    this.handleClick = (e) => {
       e.stopPropagation();
+      const rowSelectEvent = staticRemoteInvocationCallRegistry.call(domNodeSubjectFactory.getSubject(this.parentTableRef, VegaInternalTableRowSelect), {
+        host: this.host,
+        rowKey: this.rowKey,
+        checked: !this.checked,
+      });
+      if (rowSelectEvent.defaultPrevented) {
+        e.preventDefault();
+      }
     };
     this.onExpandIconClick = async (e) => {
       e.stopPropagation();
@@ -53,6 +65,12 @@ export class VegaTableRowRenderer extends VegaSlimmer {
       }
     };
   }
+  connectedCallback() {
+    this.setParentTableRef();
+  }
+  getParentTableRef() {
+    return this.parentTableRef;
+  }
   render() {
     var _a, _b;
     return (h(Fragment, null,
@@ -75,6 +93,9 @@ export class VegaTableRowRenderer extends VegaSlimmer {
   renderExpandRowSpace(rowKey) {
     return (this.expandable && (h("tr", { key: `vega-table-expand-row-space-${rowKey}`, class: "expand-row-space" })));
   }
+  setParentTableRef() {
+    this.parentTableRef = findParent(this.host, 'vega-table');
+  }
 }
 (() => {
   VegaInternalIconManager.register({ 'chevron-down': chevronDown });
@@ -121,3 +142,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "expandEventEmitter", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaTableRowRenderer.prototype, "connectedCallback", null);