@heartlandone/vega-sandbox-pr-1520-a229ce0611c7d8c9884a7af1466ecb6a43e7f28d 2.27.0

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

@@ -0,0 +1,297 @@
+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 } from '../utils';
+import { createEnterKeyHandlerToTriggerClick } from '../../../utils/accessibility';
+import { sanitizeVegaComponent } from '../../../utils/component';
+import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/event-emit-slimmer';
+import { VegaClick } from '../../../helpers/event-manager/event-id/vega-event-id';
+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/responsive-format-facade';
+import { getCurrentBreakpoint } from '../../../utils/breakpoints';
+import { PageResizeObserverSlimmer } from '../../../helpers/slimmers/page-resize-observer-slimmer';
+import { VegaInternalIconManager } from '../../../helpers/icon/internal-icon-manager';
+import chevronUp from '../../../global/icons/chevron-up';
+import chevronDown from '../../../global/icons/chevron-down';
+import arrowUpArrowDown from '../../../global/icons/arrow-up-arrow-down';
+import circleArrowDown from '../../../global/icons/circle-arrow-down';
+import circleArrowUp from '../../../global/icons/circle-arrow-up';
+import { FeatureFlag } from '../../../helpers/feature-control/feature-flag-controller';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
+import { SortIconRenderer } from './slimmers/renderers/sort-icon-renderer';
+/**
+ * @vegaVersion 1.44.0
+ */
+export class VegaTableHeadCell {
+  constructor() {
+    this.globalSlimmers = {};
+    this.clickEventEmitter = createEventEmitSlimmer(VegaTableHeadCell, VegaClick);
+    this.vegaTableHeadCellStateController = new VegaTableHeadCellStateController();
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.sortIconRenderer = new SortIconRenderer();
+    this.currentBreakpoint = getCurrentBreakpoint();
+    this.handleSort = (e) => {
+      this.sortOrder = this.getNextSortOrder(this.sortOrder);
+      this.clickEventEmitter.emit({ sortOrder: this.sortOrder }, e);
+    };
+    /**
+     * Get the next sorter order
+     *
+     * @param {string} sortOrder - The prop name of which sorter is sorted by
+     * @returns {Nullable<'desc' | 'asc'>} Return the next sorter order
+     */
+    this.getNextSortOrder = (sortOrder) => {
+      let nextSortOrder;
+      switch (sortOrder) {
+        case 'desc':
+          nextSortOrder = 'asc';
+          break;
+        case 'asc':
+          nextSortOrder = null;
+          break;
+        default:
+          nextSortOrder = 'desc';
+          break;
+      }
+      return nextSortOrder;
+    };
+  }
+  render() {
+    const sortableConfig = this.sorter
+      ? {
+        role: 'button',
+        onKeyDown: createEnterKeyHandlerToTriggerClick(),
+        tabIndex: 0,
+        onClick: (e) => this.handleSort(e),
+      }
+      : null;
+    const cellClassNames = ['vega-table-cell'];
+    if (!FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE')) {
+      cellClassNames.push('break-word');
+    }
+    return sanitizeVegaComponent(h(Host, { class: {
+        [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
+        sortable: !!this.sorter,
+        [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
+      }, style: { width: this.width } },
+      h("th", Object.assign({ class: arrayToClassString(cellClassNames) }, sortableConfig),
+        h("div", { class: arrayToClassString(['vega-table-column', this.textAlign]) },
+          h("span", { class: "vega-table-column-label" },
+            h("slot", null)),
+          this.sortIconRenderer.render()))), 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",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaTableColumnBreakpoint",
+        "resolved": "\"L\" | \"M\" | \"S\" | \"XL\"",
+        "references": {
+          "VegaTableColumnBreakpoint": {
+            "location": "import",
+            "path": "../interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "1.44.0"
+          }],
+        "text": "Defines the screen width at which the column becomes hidden.\n   If not set, the column remains visible at all times."
+      },
+      "attribute": "breakpoint",
+      "reflect": false
+    },
+    "sorter": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaTableSorterConfig",
+        "resolved": "\"event\" | ((a: VegaTableDataSourceItem, b: VegaTableDataSourceItem) => number)",
+        "references": {
+          "VegaTableSorterConfig": {
+            "location": "import",
+            "path": "../interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "1.44.0"
+          }],
+        "text": "Defines the column's sorting configuration."
+      },
+      "attribute": "sorter",
+      "reflect": false
+    },
+    "sortOrder": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "VegaTableSortOrderType",
+        "resolved": "\"asc\" | \"desc\"",
+        "references": {
+          "VegaTableSortOrderType": {
+            "location": "import",
+            "path": "../interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.8.0"
+          }],
+        "text": "Defines the column's sorting order."
+      },
+      "attribute": "sort-order",
+      "reflect": false
+    },
+    "textAlign": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'left' | 'right' | 'center'",
+        "resolved": "\"center\" | \"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "1.44.0"
+          }],
+        "text": "Determines the alignment of text within the head cell."
+      },
+      "attribute": "text-align",
+      "reflect": false
+    },
+    "width": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "1.44.0"
+          }],
+        "text": "Specifies the width of the head cell."
+      },
+      "attribute": "width",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "currentBreakpoint": {},
+    "density": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaClick",
+      "name": "vegaClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "1.44.0"
+          }],
+        "text": "An event emitter notifying that the head cell has been clicked."
+      },
+      "complexType": {
+        "original": "VegaTableHeadCellClickEvent",
+        "resolved": "{ sortOrder: VegaTableSortOrderType; }",
+        "references": {
+          "VegaTableHeadCellClickEvent": {
+            "location": "import",
+            "path": "../interface"
+          }
+        }
+      }
+    }, {
+      "method": "click",
+      "name": "click",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.0.0"
+          }],
+        "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"; }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'chevron-up': chevronUp,
+    'chevron-down': chevronDown,
+    'arrow-up-arrow-down': arrowUpArrowDown,
+    'circle-arrow-down': circleArrowDown,
+    'circle-arrow-up': circleArrowUp,
+  });
+})();
+__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);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableHeadCell.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableHeadCell.prototype, "sortIconRenderer", void 0);

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

@@ -0,0 +1,54 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import ChangeManager from '../../../../../helpers/change-manager/change-manager';
+import { TABLE_ROW_SELECTION_ALL } from '../../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import { Observer } from '../../../../../helpers/change-manager/observer/observer';
+import { isAcceptableTableObserver } from '../../../type-guard';
+/**
+ *
+ */
+export class VegaTableHeadRowController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]{@link VegaTableHeadRow.connectedCallback}
+   */
+  connectedCallback() {
+    this.initRowSelectionAllObserver();
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]{@link VegaTableHeadRow.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    ChangeManager.unregister(TABLE_ROW_SELECTION_ALL, this.rowSelectionAllObserver);
+  }
+  /**
+   * Initialize the row selection all observer.
+   */
+  initRowSelectionAllObserver() {
+    this.rowSelectionAllObserver = new Observer(isAcceptableTableObserver.bind({ host: this.host }), (payload) => {
+      if (!payload.noneChecked && payload.checked === false) {
+        this.checkedAll = null; // indeterminate status
+      }
+      else {
+        this.checkedAll = payload.checked;
+      }
+    });
+    ChangeManager.register(TABLE_ROW_SELECTION_ALL, this.rowSelectionAllObserver);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaTableHeadRowController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableHeadRowController.prototype, "checkedAll", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaTableHeadRowController.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableHeadRowController.prototype, "disconnectedCallback", null);

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

@@ -0,0 +1,103 @@
+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 } from 'vega-slimmer/core';
+import { findParent } from '../../../../../utils/ui';
+import { SubStateObserverSlimmer } from '../../../../../helpers/slimmers/sub-state/sub-state-observer-slimmer';
+/**
+ * Controller for the table head row
+ */
+export class VegaTableHeadRowStateController extends SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      parent: 'vega-table',
+      subStates: [
+        {
+          subStateName: 'expandable',
+          parentStateName: 'rowExpandable',
+        },
+        {
+          subStateName: 'paddingX',
+          parentStateName: 'paddingX',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (value) => {
+            const table = findParent(this.host, 'vega-table');
+            if (table.dataSource.length === 0 || table.columns.length === 0) {
+              this.paddingX = value;
+            }
+          },
+        },
+        {
+          subStateName: 'selectionType',
+          parentStateName: 'rowSelection',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (rowSelection) => {
+            this.updateSelectionType(rowSelection);
+          },
+        },
+        {
+          subStateName: 'columnDivider',
+          parentStateName: 'columnDivider',
+        },
+        {
+          subStateName: 'density',
+          parentStateName: 'density',
+        },
+        {
+          subStateName: 'isTemplateRenderMode',
+          parentStateName: 'isTemplateRenderMode',
+        },
+        {
+          subStateName: 'isEmptyTable',
+          parentStateName: 'currentData',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (currentData) => {
+            this.isEmptyTable = currentData.length === 0;
+          },
+        },
+      ],
+    });
+    /**
+     * Update the selection config with the new config
+     *
+     * @param {VegaTableRowSelectionConfig} rowSelection - The updated row selection config.
+     */
+    this.updateSelectionType = (rowSelection) => {
+      if (rowSelection) {
+        const { type = 'multiple' } = rowSelection;
+        this.selectionType = type;
+      }
+      else {
+        this.selectionType = null;
+      }
+    };
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaTableHeadRowStateController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableHeadRowStateController.prototype, "expandable", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableHeadRowStateController.prototype, "selectionType", void 0);
+__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);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableHeadRowStateController.prototype, "isTemplateRenderMode", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableHeadRowStateController.prototype, "isEmptyTable", void 0);

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

@@ -0,0 +1,119 @@
+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, methodPlaceholder, VegaSlimmer } from 'vega-slimmer/core';
+import { h } from '@stencil/core';
+import { isNonNullable } from '../../../../../types/type-guard';
+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 remoteInvocationRegistry from '../../../../../helpers/remote-invocation/remote-invocation-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);
+    this.renderHeaderSelectionCell = () => {
+      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, onClick: this.handleClick, 
+          /* eslint-disable-next-line react/jsx-no-bind */
+          ref: (ref) => {
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handleSelectAll);
+          } })))));
+    };
+    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 = () => {
+      return this.expandable && h("th", { class: "vega-table-expand-action-column" });
+    };
+    this.handleClick = (e) => {
+      e.stopPropagation();
+      const event = remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(findParent(this.host, 'vega-table'), VegaInternalTableRowSelectAll), {
+        host: this.host,
+        checked: !this.checkedAll,
+      });
+      if (event.defaultPrevented) {
+        e.preventDefault();
+      }
+    };
+  }
+  /**
+   * Used by {@link currentDataObserver}
+   */
+  connectedCallback() {
+    methodPlaceholder();
+  }
+  /**
+   * Used by {@link currentDataObserver}
+   */
+  disconnectedCallback() {
+    methodPlaceholder();
+  }
+  /**
+   * Used by {@link currentDataObserver}
+   */
+  componentDidLoad() {
+    methodPlaceholder();
+  }
+  render() {
+    var _a, _b;
+    return (h("tr", null,
+      h("th", { style: { width: (_a = this.paddingX) === null || _a === void 0 ? void 0 : _a[0] } }),
+      this.renderHeaderSelectionCell(),
+      h("slot", null),
+      this.renderHeaderExpandableCell(),
+      h("th", { style: { width: (_b = this.paddingX) === null || _b === void 0 ? void 0 : _b[1] } })));
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "paddingX", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "selectionType", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "hideSelectAll", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "selectAllDisabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "checkedAll", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "expandable", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "isEmptyTable", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "isTemplateRenderMode", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaTableHeadRowRenderer.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableHeadRowRenderer.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaTableHeadRowRenderer.prototype, "componentDidLoad", null);

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

@@ -0,0 +1,74 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+:host {
+  display: 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;
+}