@heartlandone/vega 2.0.0-temp-test-0.2 → 2.0.0

package/dist/collection/components/vega-table/vega-table-head-cell/vega-table-head-cell.css

@@ -0,0 +1,121 @@
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+:host(.v-hidden) {
+  display: none;
+}
+
+@media (min-width: 320px) {
+  :host(.S\:v-table-cell) {
+    display: table-cell;
+  }
+}
+@media (min-width: 768px) {
+  :host(.M\:v-table-cell) {
+    display: table-cell;
+  }
+}
+@media (min-width: 1024px) {
+  :host(.L\:v-table-cell) {
+    display: table-cell;
+  }
+}
+@media (min-width: 1440px) {
+  :host(.XL\:v-table-cell) {
+    display: table-cell;
+  }
+}
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+:host {
+  display: table-cell;
+  background-color: rgba(var(--v-bg-table-header, 240, 243, 247, 1));
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  text-align: left;
+  vertical-align: middle;
+}
+
+th {
+  display: block;
+  padding: 0px;
+  padding: 12px;
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18px;
+  word-break: break-word;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  th {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  th {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  th {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+th.vega-table-cell.sortable {
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.vega-table-column {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.vega-table-column-sorter {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-left: 4px;
+  cursor: pointer;
+  outline: none;
+}
+.vega-table-column-sorter span {
+  display: inline-flex;
+}
+.vega-table-column-sorter span.v-text-link {
+  color: rgba(var(--v-text-link, 19, 98, 226, 1));
+}
+
+.vega-table-column-label {
+  flex-grow: 1;
+}
+.vega-table-column-label.v-text-center {
+  text-align: center;
+}
+.vega-table-column-label.v-text-left {
+  text-align: left;
+}
+.vega-table-column-label.v-text-right {
+  text-align: right;
+}
+
+:host(.density-default) .vega-table-cell {
+  padding: 12px;
+}
+
+:host(.density-compact) .vega-table-cell {
+  padding: 4px;
+}
+
+:host(.density-relaxed) .vega-table-cell {
+  padding: 16px;
+}

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

@@ -1,13 +1,31 @@
+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, Host, h, Prop, Element, Event, State } from '@stencil/core';
 import { arrayToClassString } from '../../../utils/ui';
 import { generateResponsiveClass, generateTextAlignClass } from '../utils';
 import { createEnterKeyHandlerToTriggerClick } from '../../../utils/accessibility';
 import { sanitizeVegaComponent } from '../../../utils/component';
+import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/eventEmitSlimmer';
+import { VegaClick } from '../../../helpers/event-manager/eventID/vegaEventId';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaTableHeadCellStateController } from './slimmers/controllers/vega-table-head-cell-state-controller';
+import ResponsiveFormatFacade from '../../../helpers/formatter/responsive-map-formatter/responsiveFormatFacade';
+import { getCurrentBreakpoint } from '../../../utils/breakpoints';
+import { PageResizeObserverSlimmer } from '../../../helpers/slimmers/pageResizeObserverSlimmer';
 export class VegaTableHeadCell {
   constructor() {
-    this.handleSort = () => {
+    this.globalSlimmers = {};
+    this.clickEventEmitter = createEventEmitSlimmer(VegaTableHeadCell, VegaClick);
+    this.vegaTableHeadCellStateController = new VegaTableHeadCellStateController();
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.currentBreakpoint = getCurrentBreakpoint();
+    this.handleSort = (e) => {
       this.currentSortOrder = this.getNextSortOrder(this.currentSortOrder);
-      this.vegaClick.emit({ sortOrder: this.currentSortOrder });
+      this.clickEventEmitter.emit({ sortOrder: this.currentSortOrder }, e);
     };
     this.renderSortIconButton = () => {
       if (!this.sorter)
@@ -46,7 +64,6 @@ export class VegaTableHeadCell {
   render() {
     const cellClassName = arrayToClassString([
       'vega-table-cell',
-      generateResponsiveClass(this.breakpoint, 'v-table-cell'),
       this.sorter ? 'sortable' : null,
     ]);
     const labelAlignClassName = generateTextAlignClass(this.textAlign);
@@ -55,17 +72,27 @@ export class VegaTableHeadCell {
         role: 'button',
         onKeyDown: createEnterKeyHandlerToTriggerClick(),
         tabIndex: 0,
-        onClick: () => this.handleSort(),
+        onClick: (e) => this.handleSort(e),
       }
       : null;
-    return sanitizeVegaComponent(h(Host, null,
-      h("th", Object.assign({ class: cellClassName }, sortableConfig, { style: { width: this.width } }),
+    return sanitizeVegaComponent(h(Host, { class: {
+        [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
+        [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
+      }, style: { width: this.width } },
+      h("th", Object.assign({ class: cellClassName }, sortableConfig),
         h("div", { class: "vega-table-column" },
           h("span", { class: `vega-table-column-label ${labelAlignClassName}` },
             h("slot", null)),
           this.renderSortIconButton()))), this.host);
   }
   static get is() { return "vega-table-head-cell"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-table-head-cell.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-table-head-cell.css"]
+  }; }
   static get properties() { return {
     "breakpoint": {
       "type": "string",
@@ -147,7 +174,9 @@ export class VegaTableHeadCell {
     }
   }; }
   static get states() { return {
-    "currentSortOrder": {}
+    "currentSortOrder": {},
+    "currentBreakpoint": {},
+    "density": {}
   }; }
   static get events() { return [{
       "method": "vegaClick",
@@ -169,6 +198,41 @@ export class VegaTableHeadCell {
           }
         }
       }
+    }, {
+      "method": "click",
+      "name": "click",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying that the head cell has been clicked."
+      },
+      "complexType": {
+        "original": "VegaTableHeadCellClickEvent",
+        "resolved": "{ sortOrder: VegaTableSortOrderType; }",
+        "references": {
+          "VegaTableHeadCellClickEvent": {
+            "location": "import",
+            "path": "../interface"
+          }
+        }
+      }
     }]; }
   static get elementRef() { return "host"; }
 }
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaTableHeadCell.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableHeadCell.prototype, "clickEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableHeadCell.prototype, "vegaTableHeadCellStateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableHeadCell.prototype, "pageResizeObserverSlimmer", void 0);

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

@@ -5,9 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
-import ChangeManager from '../../../../../helpers/observer/changeManager';
-import { TABLE_ROW_SELECTION_ALL } from '../../../../../helpers/observer/subject';
-import { Observer } from '../../../../../helpers/observer/observer';
+import ChangeManager from '../../../../../helpers/change-manager/changeManager';
+import { TABLE_ROW_SELECTION_ALL } from '../../../../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import { Observer } from '../../../../../helpers/change-manager/observer/observer';
 import { isAcceptableTableObserver } from '../../../typeGuard';
 /**
  *

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

@@ -39,6 +39,14 @@ export class VegaTableHeadRowStateController extends SubStateObserverSlimmer {
             this.updateSelectionType(rowSelection);
           },
         },
+        {
+          subStateName: 'columnDivider',
+          parentStateName: 'columnDivider',
+        },
+        {
+          subStateName: 'density',
+          parentStateName: 'density',
+        },
       ],
     });
     /**
@@ -49,12 +57,7 @@ export class VegaTableHeadRowStateController extends SubStateObserverSlimmer {
     this.updateSelectionType = (rowSelection) => {
       if (rowSelection) {
         const { type = 'multiple' } = rowSelection;
-        if (type === 'checkbox') {
-          this.selectionType = 'multiple'; // TODO: Remove this line after 'checkbox' deprecated.
-        }
-        else {
-          this.selectionType = type;
-        }
+        this.selectionType = type;
       }
       else {
         this.selectionType = null;
@@ -74,3 +77,9 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTableHeadRowStateController.prototype, "paddingX", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableHeadRowStateController.prototype, "columnDivider", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableHeadRowStateController.prototype, "density", void 0);

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

@@ -7,8 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { h } from '@stencil/core';
 import { isNonNullable } from '../../../../../types/typeGuard';
-import ChangeManager from '../../../../../helpers/observer/changeManager';
-import { TABLE_ROW_SELECTION_ALL } from '../../../../../helpers/observer/subject';
+import ChangeManager from '../../../../../helpers/change-manager/changeManager';
+import { TABLE_ROW_SELECTION_ALL } from '../../../../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory';
+import { VegaChange } from '../../../../../helpers/event-manager/eventID/vegaEventId';
 export class VegaTableHeadRowRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -18,17 +20,19 @@ export class VegaTableHeadRowRenderer extends VegaSlimmer {
       return (h("th", { class: "vega-table-selection-column" }, !this.hideSelectAll && (h("div", { class: "vega-table-checkbox-wrapper" },
         h("vega-checkbox", { size: "small", disabled: this.selectAllDisabled, checked: this.checkedAll, 
           /* eslint-disable-next-line react/jsx-no-bind */
-          onVegaChange: (e) => {
-            e.stopPropagation();
-            this.handleSelectAll(e.detail);
+          ref: (ref) => {
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handleSelectAll);
           } })))));
     };
-    this.handleSelectAll = (checked) => {
-      if (isNonNullable(checked) && checked !== this.checkedAll) {
-        ChangeManager.notify(TABLE_ROW_SELECTION_ALL, {
-          host: this.host,
-          checked: checked,
-        });
+    this.handleSelectAll = (input) => {
+      if (input.eventName === 'vegaChange') {
+        const checked = input.detail;
+        if (isNonNullable(checked) && checked !== this.checkedAll) {
+          ChangeManager.notify(TABLE_ROW_SELECTION_ALL, {
+            host: this.host,
+            checked: checked,
+          });
+        }
       }
     };
     this.renderHeaderExpandableCell = () => {

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

@@ -0,0 +1,70 @@
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+:host {
+  display: table-row;
+}
+:host tr {
+  display: contents;
+}
+
+th {
+  background-color: rgba(var(--v-bg-table-header, 240, 243, 247, 1));
+  padding: 0px;
+  vertical-align: middle;
+}
+th:first-of-type {
+  border-top-left-radius: 12px;
+  border-bottom-left-radius: 12px;
+}
+th:last-of-type {
+  border-top-right-radius: 12px;
+  border-bottom-right-radius: 12px;
+}
+
+:host(.column-divider) ::slotted(vega-table-head-cell:not(:last-of-type)) {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-right-width: 1px;
+  border-right-style: solid;
+}
+
+.vega-table-checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:host(.density-default) th:first-of-type {
+  border-top-left-radius: 12px;
+  border-bottom-left-radius: 12px;
+}
+:host(.density-default) th:last-of-type {
+  border-top-right-radius: 12px;
+  border-bottom-right-radius: 12px;
+}
+
+:host(.density-compact) th:first-of-type {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+:host(.density-compact) th:last-of-type {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+:host(.density-relaxed) th:first-of-type {
+  border-top-left-radius: 12px;
+  border-bottom-left-radius: 12px;
+}
+:host(.density-relaxed) th:last-of-type {
+  border-top-right-radius: 12px;
+  border-bottom-right-radius: 12px;
+}
+
+.vega-table-expand-action-column {
+  width: 40px;
+  min-width: 40px;
+}
+
+.vega-table-selection-column {
+  width: 40px;
+  min-width: 40px;
+}

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

@@ -5,16 +5,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Host, h, Element, Prop, State } from '@stencil/core';
-import { InjectVegaSlimmer, slotPlaceholder } from 'vega-slimmer/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, slotPlaceholder, } from 'vega-slimmer/core';
 import { VegaTableHeadRowRenderer } from './slimmers/renderers/vega-table-head-row-renderer';
 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 ResponsiveFormatFacade from '../../../helpers/formatter/responsive-map-formatter/responsiveFormatFacade';
+import { getCurrentBreakpoint } from '../../../utils/breakpoints';
+import { PageResizeObserverSlimmer } from '../../../helpers/slimmers/pageResizeObserverSlimmer';
 export class VegaTableHeadRow {
   constructor() {
+    this.globalSlimmers = {};
     this.vegaTableHeadRowRenderer = new VegaTableHeadRowRenderer();
     this.vegaTableHeadRowController = new VegaTableHeadRowController();
     this.vegaTableHeadRowStateController = new VegaTableHeadRowStateController();
+    this.headCellEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick, VegaChange], () => this.host);
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.currentBreakpoint = getCurrentBreakpoint();
     /**
      * Indicates whether the row is expandable.
      */
@@ -22,9 +31,19 @@ export class VegaTableHeadRow {
   }
   render() {
     slotPlaceholder(h("slot", null));
-    return sanitizeVegaComponent(h(Host, null, this.vegaTableHeadRowRenderer.render()), this.host);
+    return sanitizeVegaComponent(h(Host, { class: {
+        'column-divider': this.columnDivider,
+        [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
+      } }, this.vegaTableHeadRowRenderer.render()), this.host);
   }
   static get is() { return "vega-table-head-row"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-table-head-row.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-table-head-row.css"]
+  }; }
   static get properties() { return {
     "selectAllDisabled": {
       "type": "boolean",
@@ -62,13 +81,19 @@ export class VegaTableHeadRow {
     }
   }; }
   static get states() { return {
+    "currentBreakpoint": {},
     "expandable": {},
     "selectionType": {},
     "paddingX": {},
-    "checkedAll": {}
+    "checkedAll": {},
+    "columnDivider": {},
+    "density": {}
   }; }
   static get elementRef() { return "host"; }
 }
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaTableHeadRow.prototype, "globalSlimmers", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableHeadRow.prototype, "vegaTableHeadRowRenderer", void 0);
@@ -78,3 +103,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableHeadRow.prototype, "vegaTableHeadRowStateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableHeadRow.prototype, "headCellEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableHeadRow.prototype, "pageResizeObserverSlimmer", void 0);

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

@@ -5,9 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentMethod, MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
-import ChangeManager from '../../../../../helpers/observer/changeManager';
-import { TABLE_ROW_CLICK } from '../../../../../helpers/observer/subject';
-import { Observer } from '../../../../../helpers/observer/observer';
+import ChangeManager from '../../../../../helpers/change-manager/changeManager';
+import { TABLE_ROW_CLICK } from '../../../../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import { Observer } from '../../../../../helpers/change-manager/observer/observer';
 import { isAcceptableTableRowObserver } from '../../../typeGuard';
 /**
  * The row click controller for table row
@@ -30,7 +30,7 @@ export class VegaTableRowClickController extends VegaSlimmer {
    */
   handleRowClick() {
     ChangeManager.notify(TABLE_ROW_CLICK, { host: this.host, rowKey: this.rowKey });
-    this.vegaClick.emit({ rowKey: this.rowKey });
+    this.clickEventEmitter.emit({ rowKey: this.rowKey });
   }
   /**
    * Initialize row click observer
@@ -69,6 +69,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableRowClickController.prototype, "vegaTableRowSelectionController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowClickController.prototype, "clickEventEmitter", 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

@@ -5,9 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentMethod, MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
-import ChangeManager from '../../../../../helpers/observer/changeManager';
-import { TABLE_EXPAND_ROW } from '../../../../../helpers/observer/subject';
-import { Observer } from '../../../../../helpers/observer/observer';
+import ChangeManager from '../../../../../helpers/change-manager/changeManager';
+import { TABLE_EXPAND_ROW } from '../../../../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import { Observer } from '../../../../../helpers/change-manager/observer/observer';
 import { isAcceptableTableObserver } from '../../../typeGuard';
 /**
  * The row expand controller for expandable table row.

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

@@ -5,9 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentMethod, MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
-import { Observer } from '../../../../../helpers/observer/observer';
-import ChangeManager from '../../../../../helpers/observer/changeManager';
-import { TABLE_ROW_SELECTION, TABLE_ROW_SELECTION_ALL } from '../../../../../helpers/observer/subject';
+import { Observer } from '../../../../../helpers/change-manager/observer/observer';
+import ChangeManager from '../../../../../helpers/change-manager/changeManager';
+import { TABLE_ROW_SELECTION, TABLE_ROW_SELECTION_ALL, } from '../../../../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
 import { isAcceptableTableObserver } from '../../../typeGuard';
 /**
  * The row selection controller for the table row

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

@@ -42,18 +42,25 @@ export class VegaTableRowStateController extends SubStateObserverSlimmer {
           callback: (value) => {
             if (value) {
               const { type = 'multiple' } = value;
-              if (type === 'checkbox') {
-                this.selectionType = 'multiple'; // TODO: Remove this line after 'checkbox' deprecated.
-              }
-              else {
-                this.selectionType = type;
-              }
+              this.selectionType = type;
             }
             else {
               this.selectionType = null;
             }
           },
         },
+        {
+          subStateName: 'rowDivider',
+          parentStateName: 'rowDivider',
+        },
+        {
+          subStateName: 'columnDivider',
+          parentStateName: 'columnDivider',
+        },
+        {
+          subStateName: 'density',
+          parentStateName: 'density',
+        },
       ],
     });
   }
@@ -61,7 +68,21 @@ export class VegaTableRowStateController extends SubStateObserverSlimmer {
    * Component watch method - [watchRowSelection]{@link VegaTableRow.watchSelectionType}
    */
   watchSelectionType() {
-    if (this.selectionType !== null) {
+    this.updateClickable();
+  }
+  /**
+   * The `@MapToComponentMethod('componentWillLoad')` decorator is used to map the `handleComponentWillLoad` method
+   * to the `componentWillLoad` lifecycle hook of the component.
+   */
+  handleComponentWillLoad() {
+    this.updateClickable();
+  }
+  /**
+   * The function updates the value of the "clickable" property based on the value of the
+   * "selectionType" property.
+   */
+  updateClickable() {
+    if (this.selectionType) {
       this.clickable = this.selectionType === 'single' || this.clickable;
     }
   }
@@ -81,6 +102,18 @@ __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);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController.prototype, "density", void 0);
 __decorate([
   MapToComponentMethod('watchSelectionType')
 ], VegaTableRowStateController.prototype, "watchSelectionType", null);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableRowStateController.prototype, "handleComponentWillLoad", null);

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

@@ -6,6 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Fragment, h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory';
+import { VegaChange } from '../../../../../helpers/event-manager/eventID/vegaEventId';
 export class VegaTableRowRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -16,22 +18,25 @@ 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 */
-            onVegaChange: this.onRowSelectionChange, 
+            onClick: this.stopRowSelectionPropagation, 
             /* eslint-disable-next-line react/jsx-no-bind */
-            onClick: this.stopRowSelectionPropagation }))));
+            ref: (ref) => {
+              DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.onRowSelectionChange);
+            } }))));
     };
     this.renderExpandIcon = () => {
       return (this.expandable && (h("td", { class: "vega-table-expand-action-column" },
         h("div", { class: "vega-table-expand-icon-wrapper" },
-          h("vega-icon", { icon: "chevron-down", onClick: this.onExpandIconClick })))));
+          h("vega-icon", { icon: "chevron-down", color: "text-link", onClick: this.onExpandIconClick })))));
     };
     this.onRowClick = (e) => {
       e.stopPropagation();
       this.vegaTableRowClickController.handleRowClick();
     };
-    this.onRowSelectionChange = (e) => {
-      e.stopPropagation();
-      this.vegaTableRowSelectionController.handleRowSelect(e.detail);
+    this.onRowSelectionChange = (input) => {
+      if (input.eventName === 'vegaChange') {
+        this.vegaTableRowSelectionController.handleRowSelect(input.detail);
+      }
     };
     this.stopRowSelectionPropagation = (e) => {
       e.stopPropagation();