@heartlandone/vega 2.59.1 → 2.61.0

package/dist/collection/components/vega-date-picker/vega-date-picker.js

@@ -24,12 +24,13 @@ import { VegaDatePickerElementAppenderController } from './slimmers/controllers/
 import { VegaDatePickerKeyboardController } from './slimmers/controllers/vega-date-picker-keyboard-controller';
 import { ComponentLoadRequired } from '../../decorators/method-decorators/component-load-required';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaChange } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaChange, VegaMonthYearChange } from '../../helpers/event-manager/event-id/vega-event-id';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaDatePickerRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-date-picker/runtime-metrics-payload-definition';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 import { VegaDatePickerMonthYearDropdownRenderer } from './slimmers/renderers/vega-date-picker-calendar-month-year-dropdown-renderer';
+import { VegaDatePickerMonthYearChangeEventController } from './slimmers/controllers/vega-date-picker-month-year-change-event-controller';
 /**
  * @vegaVersion 1.3.0
  */
@@ -84,10 +85,12 @@ export class VegaDatePicker {
         ].filter(Boolean);
       },
     });
+    this.monthYearChangeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaMonthYearChange);
     this.changeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaChange);
     this.inputEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaDatePickerRenderer.getDatePickerContainer());
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaDatePickerRuntimeMetricsPayloadDefinition);
     this.monthYearDropdownRenderer = new VegaDatePickerMonthYearDropdownRenderer();
+    this.vegaDatePickerMonthYearChangeEventController = new VegaDatePickerMonthYearChangeEventController();
     /**
      * Specifies the selection mode of the date picker.
      *
@@ -194,6 +197,19 @@ export class VegaDatePicker {
      * @vegaVersion 1.3.0
      */
     this.disabled = false;
+    /**
+     * Specifies a predicate function that determines whether a given date in the date picker should be disabled (non-interactive).
+     *
+     * The function is called for each date cell before rendering.
+     *
+     * Return `true` to disable the cell, or false to keep it selectable.
+     * Default behavior: always returns `false` (no cells are disabled).
+     *
+     * @param date - The `Date` object for the cell being evaluated.
+     * @returns `true` if the cell should be disabled; otherwise `false`.
+     * @vegaVersion 2.60.0
+     */
+    this.isDateDisabled = () => false;
   }
   /*
    * The below method is e2e-test covered in
@@ -714,6 +730,36 @@ export class VegaDatePicker {
       },
       "attribute": "timezone",
       "reflect": false
+    },
+    "isDateDisabled": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DisabledDate",
+        "resolved": "(date: Date) => boolean",
+        "references": {
+          "DisabledDate": {
+            "location": "import",
+            "path": "../vega-calendar/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "param",
+            "text": "date - The `Date` object for the cell being evaluated."
+          }, {
+            "name": "returns",
+            "text": "`true` if the cell should be disabled; otherwise `false`."
+          }, {
+            "name": "vegaVersion",
+            "text": "2.60.0"
+          }],
+        "text": "Specifies a predicate function that determines whether a given date in the date picker should be disabled (non-interactive).\n\nThe function is called for each date cell before rendering.\n\nReturn `true` to disable the cell, or false to keep it selectable.\nDefault behavior: always returns `false` (no cells are disabled)."
+      },
+      "defaultValue": "() => false"
     }
   }; }
   static get events() { return [{
@@ -755,6 +801,55 @@ export class VegaDatePicker {
         "resolved": "string | string[]",
         "references": {}
       }
+    }, {
+      "method": "vegaMonthYearChange",
+      "name": "vegaMonthYearChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.61.0"
+          }],
+        "text": "An event emitter notifying the month and year change when the navigation buttons are clicked or the month and year dropdowns are selected in the date picker,\n   whether triggered programmatically or through user interaction."
+      },
+      "complexType": {
+        "original": "DatePickerMonthYearTypes",
+        "resolved": "DatePickerMonthYearType[] | { month: string; year: string; }",
+        "references": {
+          "DatePickerMonthYearTypes": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "monthYearChange",
+      "name": "monthYearChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.61.0"
+          }],
+        "text": "An event emitter notifying the month and year change when the navigation buttons are clicked or the month and year dropdowns are selected in the date picker,"
+      },
+      "complexType": {
+        "original": "DatePickerMonthYearTypes",
+        "resolved": "DatePickerMonthYearType[] | { month: string; year: string; }",
+        "references": {
+          "DatePickerMonthYearTypes": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
     }]; }
   static get methods() { return {
     "doClose": {
@@ -880,6 +975,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "formFieldController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "monthYearChangeEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "changeEventEmitter", void 0);
@@ -892,6 +990,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "monthYearDropdownRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerMonthYearChangeEventController", void 0);
 __decorate([
   ComponentLoadRequired()
 ], VegaDatePicker.prototype, "watchValue", null);

package/dist/collection/components/vega-input/slimmers/controllers/vega-input-mask-config-controller.js

@@ -11,8 +11,6 @@ import { NumberMaskStrategy, } from '../../../../helpers/formatter/string-format
 import { StringInputFormatterSlimmer } from '../../../../helpers/slimmers/string-input-formatter-slimmer';
 import { CustomFormatterStrategy } from '../../../../helpers/formatter/string-formatter/custom-formatter-strategy';
 import { NumberThousandCommaStrategy } from '../../../../helpers/formatter/string-formatter/number-thousand-comma-strategy';
-import { CreditCardInputMaskStrategy } from '../../../../helpers/formatter/string-formatter/credit-card-input-mask-strategy';
-import { CreditCardBlurMaskStrategy } from '../../../../helpers/formatter/string-formatter/credit-card-blur-mask-strategy';
 /** The `VegaInputMaskConfigController` class in TypeScript manages input mask configuration and string formatting for an input element within a component's shadow root. */
 export class VegaInputMaskConfigController extends StringInputFormatterSlimmer {
   constructor() {
@@ -108,14 +106,10 @@ export class VegaInputMaskConfigController extends StringInputFormatterSlimmer {
       case 'number':
         stringFormatStrategy = this.getNumberTypeMaskStrategy(maskConfig.options);
         break;
-      case 'credit-card':
-        stringFormatStrategy =
-          maskTrigger === 'input'
-            ? new CreditCardInputMaskStrategy()
-            : new CreditCardBlurMaskStrategy(maskConfig.hideCardNumberOnBlur);
-        break;
       case 'custom':
-        stringFormatStrategy = new StringMaskStrategy(maskConfig.options);
+        stringFormatStrategy = maskConfig.strategy
+          ? maskConfig.strategy()
+          : new StringMaskStrategy(maskConfig.options);
         break;
       case 'custom-formatter':
         stringFormatStrategy = new CustomFormatterStrategy(maskConfig.formatter, maskConfig.resetCaretPosition);
@@ -148,8 +142,7 @@ export class VegaInputMaskConfigController extends StringInputFormatterSlimmer {
    * 'custom' and a trigger of 'blur'.
    */
   isBlurModeMaskConfig(maskConfig) {
-    return ((maskConfig.type === 'custom' || maskConfig.type === 'credit-card') &&
-      maskConfig.trigger === 'blur');
+    return maskConfig.type === 'custom' && maskConfig.trigger === 'blur';
   }
 }
 __decorate([

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

@@ -283,6 +283,10 @@ input[type=number] {
   -moz-appearance: textfield;
 }
 
+input[type=password]::-ms-reveal {
+  display: none;
+}
+
 .vega-input-container.compact-input-width {
   gap: 0px;
 }

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

@@ -924,7 +924,7 @@ export class VegaInput {
       "mutable": false,
       "complexType": {
         "original": "MaskConfigType | MaskConfigType[]",
-        "resolved": "MaskConfigType[] | ({ type: \"number\" | \"phone\" | \"zipcode\" | \"taxId\" | \"custom\" | \"thousand-comma\" | \"custom-formatter\" | \"credit-card\"; options?: MaskConfig | NumberMaskConfig; trigger?: \"blur\" | \"input\"; formatter?: (value: string) => string; resetCaretPosition?: boolean; hideCardNumberOnBlur?: boolean; })",
+        "resolved": "MaskConfigType[] | ({ type: \"number\" | \"phone\" | \"zipcode\" | \"taxId\" | \"custom\" | \"thousand-comma\" | \"custom-formatter\"; options?: MaskConfig | NumberMaskConfig; trigger?: \"blur\" | \"input\"; formatter?: (value: string) => string; resetCaretPosition?: boolean; strategy?: () => StringFormatStrategy; })",
         "references": {
           "MaskConfigType": {
             "location": "import",

package/dist/collection/components/vega-input-credit-card/vega-input-credit-card.js

@@ -22,6 +22,8 @@ import { VegaInternalIconManager } from '../../helpers/icon/internal-icon-manage
 import { FeatureFlag } from '../../helpers/feature-control/feature-flag-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaInputCreditCardRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-input-credit-card/runtime-metrics-payload-definition';
+import { CreditCardInputMaskStrategy } from '../../helpers/formatter/string-formatter/credit-card-input-mask-strategy';
+import { CreditCardBlurMaskStrategy } from '../../helpers/formatter/string-formatter/credit-card-blur-mask-strategy';
 /**
  * @vegaVersion 1.26.0
  */
@@ -194,13 +196,14 @@ export class VegaInputCreditCard {
   getMaskConfig() {
     return [
       {
-        type: 'credit-card',
+        type: 'custom',
         trigger: 'input',
+        strategy: () => new CreditCardInputMaskStrategy(),
       },
       {
-        type: 'credit-card',
+        type: 'custom',
         trigger: 'blur',
-        hideCardNumberOnBlur: this.hideCardNumberOnBlur,
+        strategy: () => new CreditCardBlurMaskStrategy(this.hideCardNumberOnBlur),
       },
     ];
   }

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

@@ -9,24 +9,12 @@ import { MapToComponentField, 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 { parseIncompletePhoneNumber } from 'libphonenumber-js';
+import { VegaPhoneNumberInputStrategy } from '../../../../helpers/formatter/string-formatter/vega-phone-number-input-strategy';
 export class PhoneNumberInputRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.phoneNumberMaskFormatter = (rawValue) => {
       const newValue = parseIncompletePhoneNumber(rawValue);
-      /*
-       * The below method is e2e-test covered in
-       * @see{module:vega-input-phone-number-input-delete}
-       */
-      /* istanbul ignore next */
-      /**
-       * work around for keyboard press Backspace
-       * (123) -> (123
-       */
-      if (newValue === parseIncompletePhoneNumber(this.phoneNumberInputValue) &&
-        this.phoneNumberInputValue.length > rawValue.length) {
-        return this.phoneNumberInputValue.slice(0, -1);
-      }
       return this.valueController.formatNationalNumber(newValue);
     };
   }
@@ -52,9 +40,8 @@ export class PhoneNumberInputRenderer extends VegaSlimmer {
           this.inputRef = ref;
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handleInputChange.bind(this));
         }, value: this.phoneNumberInputValue, maskConfig: {
-          type: 'custom-formatter',
-          formatter: this.phoneNumberMaskFormatter,
-          resetCaretPosition: true,
+          type: 'custom',
+          strategy: () => new VegaPhoneNumberInputStrategy(this.phoneNumberMaskFormatter),
         } })));
   }
   /**

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

@@ -54,7 +54,7 @@ export class VegaTableChildrenController extends VegaSlimmer {
       /* istanbul ignore next */
       // eslint-disable-next-line jsdoc/require-jsdoc
       () => {
-        this.syncRowStriped();
+        this.syncRowStates();
       },
     });
     /**
@@ -71,15 +71,14 @@ export class VegaTableChildrenController extends VegaSlimmer {
     /**
      * Sync up the properties of vega-table-expand-row
      */
-    this.syncRowStriped = () => {
-      this.host
-        .querySelectorAll('vega-table-row')
-        .forEach((row, index) => {
+    this.syncRowStates = () => {
+      const rows = this.host.querySelectorAll('vega-table-row');
+      rows.forEach((row, index) => {
         this.updateRowStriped(row, index);
+        this.updateRowDivider(row, index === rows.length - 1);
       });
-      this.host
-        .querySelectorAll('vega-table-expand-row')
-        .forEach((row, index) => {
+      const expandRows = this.host.querySelectorAll('vega-table-expand-row');
+      expandRows.forEach((row, index) => {
         this.updateRowStriped(row, index);
       });
     };
@@ -122,7 +121,7 @@ export class VegaTableChildrenController extends VegaSlimmer {
   componentWillLoad() {
     this.syncUpTableCurrentData();
     this.syncUpTableHeadRowProps();
-    this.syncRowStriped();
+    this.syncRowStates();
   }
   /**
    * Used by rowStripedObserver{@link rowStripedObserver} and currentDataObserver{@link currentDataObserver}
@@ -144,7 +143,13 @@ export class VegaTableChildrenController extends VegaSlimmer {
    * {@link VegaTable.watchStriped}
    */
   watchStriped() {
-    this.syncRowStriped();
+    this.syncRowStates();
+  }
+  /**
+   * {@link VegaTable.watchRowDivider}
+   */
+  watchRowDivider() {
+    this.syncRowStates();
   }
   /**
    * Update the row striped attr
@@ -153,12 +158,16 @@ export class VegaTableChildrenController extends VegaSlimmer {
    * @param {number} index - index of the row
    */
   updateRowStriped(row, index) {
-    if (this.striped && index % 2 === 1) {
-      row.dataset['striped'] = 'striped';
-    }
-    else {
-      delete row.dataset['striped'];
-    }
+    row.striped = this.striped && index % 2 === 1;
+  }
+  /**
+   * Update the row striped attr
+   *
+   * @param {HTMLElement} row - row or expand row element
+   * @param {boolean} isLastRow - Is last row
+   */
+  updateRowDivider(row, isLastRow) {
+    row.rowDivider = this.rowDivider && !isLastRow;
   }
 }
 __decorate([
@@ -179,6 +188,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "striped", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "rowDivider", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableChildrenController.prototype, "vegaTableDataSourceController", void 0);
@@ -212,3 +224,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchStriped')
 ], VegaTableChildrenController.prototype, "watchStriped", null);
+__decorate([
+  MapToComponentMethod('watchRowDivider')
+], VegaTableChildrenController.prototype, "watchRowDivider", null);

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

@@ -11,21 +11,22 @@ export class VegaTableBodyRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.renderTableBody = (editable) => {
-      return (h("vega-table-body", null, this.vegaTableDataSourceController
-        .getCurrentData()
-        .map((record, index) => {
+      const currentData = this.vegaTableDataSourceController.getCurrentData();
+      return (h("vega-table-body", null, currentData.map((record, index) => {
         const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
         const isVisibleInCurrentPage = this.vegaTablePaginationController.isRowVisible(index);
+        const isLastRow = index === currentData.length - 1;
         return (h(Fragment, null,
           this.vegaTableRowRenderer.render({
             rowKey,
             index,
             record,
             isVisibleInCurrentPage,
+            isLastRow: isLastRow,
           }, editable),
           this.rowExpandable && (h("vega-table-expand-row", { class: {
               'v-hidden': !isVisibleInCurrentPage,
-            }, key: `vega-table-expanded-row-${rowKey}`, rowKey: rowKey, "data-striped": this.striped && index % 2 === 1 ? 'striped' : undefined },
+            }, key: `vega-table-expanded-row-${rowKey}`, rowKey: rowKey, striped: this.striped && index % 2 === 1 },
             h("slot", { name: `${VegaTableExpandRowController.expandRowSlotNamePrefix}${rowKey}` })))));
       })));
     };
@@ -43,6 +44,9 @@ export class VegaTableBodyRenderer extends VegaSlimmer {
 __decorate([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "striped", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "rowDivider", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "columns", void 0);

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

@@ -23,7 +23,7 @@ export class VegaTableRowRenderer extends VegaSlimmer {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
             this.rowClickEventEmitter.emit({ record: record, index: index });
           });
-        }, "data-striped": this.striped && index % 2 === 1 ? 'striped' : undefined }, renderInputs.map((renderInput) => {
+        }, striped: this.striped && index % 2 === 1, rowDivider: this.rowDivider && !rowProps.isLastRow }, renderInputs.map((renderInput) => {
         return this.vegaTableCellRenderer.render(renderInput, record, index);
       })));
     };
@@ -45,6 +45,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "striped", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "rowDivider", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "vegaTableRenderInputController", void 0);

package/dist/collection/components/vega-table/vega-table-cell/slimmers/controllers/vega-table-cell-state-controller.js

@@ -19,19 +19,6 @@ export class VegaTableCellStateController extends SubStateObserverSlimmer {
           subStateName: 'density',
           parentStateName: 'density',
         },
-        {
-          subStateName: 'rowDivider',
-          parentStateName: 'rowDivider',
-          // eslint-disable-next-line jsdoc/require-jsdoc
-          callback: (rowDivider) => {
-            const row = this.host.parentElement;
-            const body = row.parentElement;
-            if (row && body) {
-              const lastRow = body.querySelector('vega-table-row:last-of-type');
-              this.rowDivider = rowDivider && lastRow !== row;
-            }
-          },
-        },
         {
           subStateName: 'columnDivider',
           parentStateName: 'columnDivider',
@@ -58,9 +45,6 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTableCellStateController.prototype, "density", void 0);
-__decorate([
-  MapToComponentField({ writable: true })
-], VegaTableCellStateController.prototype, "rowDivider", void 0);
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTableCellStateController.prototype, "columnDivider", void 0);

package/dist/collection/components/vega-table/vega-table-cell/slimmers/controllers/{vega-table-row-state-controller.js → vega-table-row-state-subscriber.js}

@@ -5,11 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { SubStateObserverSlimmer } from '../../../../../helpers/slimmers/sub-state/sub-state-observer-slimmer';
-import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { MapToComponentField } from 'vega-slimmer/core';
 /**
  * Controller for the table row states
  */
-export class VegaTableRowStateController extends SubStateObserverSlimmer {
+export class VegaTableRowStateSubscriber extends SubStateObserverSlimmer {
   // eslint-disable-next-line jsdoc/require-jsdoc
   constructor() {
     super({
@@ -23,26 +23,27 @@ export class VegaTableRowStateController extends SubStateObserverSlimmer {
           subStateName: 'expanded',
           parentStateName: 'expanded',
         },
+        {
+          subStateName: 'striped',
+          parentStateName: 'striped',
+        },
+        {
+          subStateName: 'rowDivider',
+          parentStateName: 'rowDivider',
+        },
       ],
     });
   }
-  /**
-   * Component lifecycle - [componentWillLoad]{@link VegaTableCell.componentWillLoad}
-   */
-  componentWillRender() {
-    const row = this.host.parentElement;
-    this.striped = row && row.dataset.striped === 'striped';
-  }
 }
 __decorate([
   MapToComponentField({ writable: true })
-], VegaTableRowStateController.prototype, "checked", void 0);
+], VegaTableRowStateSubscriber.prototype, "checked", void 0);
 __decorate([
   MapToComponentField({ writable: true })
-], VegaTableRowStateController.prototype, "striped", void 0);
+], VegaTableRowStateSubscriber.prototype, "expanded", void 0);
 __decorate([
   MapToComponentField({ writable: true })
-], VegaTableRowStateController.prototype, "expanded", void 0);
+], VegaTableRowStateSubscriber.prototype, "striped", void 0);
 __decorate([
-  MapToComponentMethod('componentWillRender')
-], VegaTableRowStateController.prototype, "componentWillRender", null);
+  MapToComponentField({ writable: true })
+], VegaTableRowStateSubscriber.prototype, "rowDivider", void 0);

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

@@ -15,7 +15,7 @@ import { PageResizeObserverSlimmer } from '../../../helpers/slimmers/page-resize
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { FeatureFlag } from '../../../helpers/feature-control/feature-flag-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
-import { VegaTableRowStateController } from './slimmers/controllers/vega-table-row-state-controller';
+import { VegaTableRowStateSubscriber } from './slimmers/controllers/vega-table-row-state-subscriber';
 import domNodeSubjectFactory from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalColumnBodyCellRenderInputRIC } from '../../../helpers/event-manager/event-id/vega-internal-event-id';
 import remoteInvocationRegistry from '../../../helpers/remote-invocation/remote-invocation-registry';
@@ -26,7 +26,7 @@ export class VegaTableCell {
   constructor() {
     this.globalSlimmers = {};
     this.vegaTableCellStateController = new VegaTableCellStateController();
-    this.vegaTableRowStateController = new VegaTableRowStateController();
+    this.vegaTableRowStateSubscriber = new VegaTableRowStateSubscriber();
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.currentBreakpoint = getCurrentBreakpoint();
@@ -199,7 +199,7 @@ __decorate([
 ], VegaTableCell.prototype, "vegaTableCellStateController", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaTableCell.prototype, "vegaTableRowStateController", void 0);
+], VegaTableCell.prototype, "vegaTableRowStateSubscriber", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableCell.prototype, "pageResizeObserverSlimmer", void 0);

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

@@ -13,6 +13,7 @@ export class VegaTableExpandRowRenderer extends VegaSlimmer {
         'vega-table-expanded-row': true,
         'expanded': this.expanded,
         'checked': this.checked,
+        'striped': this.striped,
       }, key: `vega-table-expanded-row-${this.rowKey}`, "data-expanded-row-key": this.rowKey },
       h("td", null),
       h("td", { colSpan: this.colSpan, key: `${VegaTableExpandRowController.expandRowSlotNamePrefix}${this.rowKey}`, class: "vega-table-expanded-row-slot-container" },
@@ -36,3 +37,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "colSpan", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableExpandRowRenderer.prototype, "striped", void 0);

package/dist/collection/components/vega-table/vega-table-expand-row/vega-table-expand-row.css

@@ -7,7 +7,7 @@
   display: contents;
 }
 
-:host([data-striped=striped]) .vega-table-expanded-row:not(.checked) td {
+:host .vega-table-expanded-row.striped:not(.checked) td {
   background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
 }
 

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

@@ -81,6 +81,26 @@ export class VegaTableExpandRow {
       },
       "attribute": "row-key",
       "reflect": false
+    },
+    "striped": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.61.0"
+          }],
+        "text": "Specifies whether alternate colors should be applied to the expand row."
+      },
+      "attribute": "striped",
+      "reflect": false
     }
   }; }
   static get states() { return {

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

@@ -49,10 +49,6 @@ export class VegaTableRowStateController extends SubStateObserverSlimmer {
             }
           },
         },
-        {
-          subStateName: 'rowDivider',
-          parentStateName: 'rowDivider',
-        },
         {
           subStateName: 'columnDivider',
           parentStateName: 'columnDivider',
@@ -102,9 +98,6 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTableRowStateController.prototype, "selectionType", void 0);
-__decorate([
-  MapToComponentField({ writable: true })
-], VegaTableRowStateController.prototype, "rowDivider", void 0);
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTableRowStateController.prototype, "columnDivider", void 0);

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

@@ -25,7 +25,7 @@ td:last-of-type {
   border-bottom-right-radius: 12px;
 }
 
-:host([data-striped=striped]) .vega-table-row:not(.checked):not(.clickable:hover) td {
+:host(.striped) .vega-table-row:not(.checked):not(.clickable:hover) td {
   background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
 }