@aurelia-mdc-web/all 9.3.1-au2 → 9.3.3-au2

package/src/circular-progress/mdc-circular-progress.ts

@@ -1,91 +1,91 @@
-import { MdcComponent, number } from '../base';
-import { inject, customElement, bindable } from 'aurelia';
-import { MDCCircularProgressFoundation, MDCCircularProgressAdapter, strings } from '@material/circular-progress';
-import template from './mdc-circular-progress.html?raw';
-
-/**
- * @selector mdc-circular-progress
- */
-@inject(Element)
-@customElement({ name: 'mdc-circular-progress', template })
-export class MdcCircularProgress extends MdcComponent<MDCCircularProgressFoundation> {
-  private determinateCircle_?: HTMLElement;
-
-  radius: number = 47.5;
-  strokeDasharray: number;
-  strokeDashoffset: number;
-
-  /** Size in pixels */
-  @bindable({ set: number })
-  size: number = 100;
-  sizeChanged() {
-    this.updateSizeAndStroke();
-  }
-
-  /** Stroke width in pixels */
-  @bindable({ set: number })
-  strokeWidth: number = 10;
-  strokeWidthChanged() {
-    this.updateSizeAndStroke();
-  }
-
-  /** The current progress value, which must be between 0 and 1 or undefined for an indeterminate spinner */
-  @bindable({ set: number })
-  progress?: number;
-  progressChanged() {
-    const determinate = this.progress !== undefined && !isNaN(this.progress);
-    this.foundation?.setDeterminate(determinate);
-    if (determinate) {
-      this.foundation?.setProgress(this.progress!);
-    }
-  }
-
-  binding() {
-    this.updateSizeAndStroke();
-  }
-
-  updateSizeAndStroke() {
-    this.radius = (this.size - 4) / 2 - this.strokeWidth;
-    // foundation gets the radius from the element itself
-    // set the attribute explicitly to avoid issues related to async binding
-    this.determinateCircle_?.setAttribute('r', this.radius.toString());
-    this.strokeDasharray = 2 * this.radius * Math.PI;
-    this.strokeDashoffset = this.strokeDasharray / 2;
-  }
-
-  initialSyncWithDOM() {
-    this.progressChanged();
-  }
-
-  getDefaultFoundation() {
-    // DO NOT INLINE this variable. For backward compatibility, foundations take
-    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
-    // methods, we need a separate, strongly typed adapter variable.
-    const adapter: MDCCircularProgressAdapter = {
-      addClass: (className: string) => this.root.classList.add(className),
-      getDeterminateCircleAttribute: (attributeName: string) => this.determinateCircle_?.getAttribute(attributeName) ?? null,
-      hasClass: (className: string) => this.root.classList.contains(className),
-      removeClass: (className: string) => this.root.classList.remove(className),
-      removeAttribute: (attributeName: string) => this.root.removeAttribute(attributeName),
-      setAttribute: (attributeName: string, value: string) => this.root.setAttribute(attributeName, value),
-      setDeterminateCircleAttribute: (attributeName: string, value: string) => {
-        if (attributeName === strings.STROKE_DASHOFFSET) {
-          // set offset via binding, otherwise it gets overwritten
-          this.strokeDashoffset = parseInt(value);
-        } else {
-          this.determinateCircle_?.setAttribute(attributeName, value);
-        }
-      },
-    };
-    return new MDCCircularProgressFoundation(adapter);
-  }
-}
-
-/** @hidden */
-export interface IMdcCircularProgressElement extends HTMLElement {
-  au: {
-    controller: {
-      viewModel: MdcCircularProgress;
-    };
-  };
-}
+import { MdcComponent, number } from '../base';
+import { inject, customElement, bindable } from 'aurelia';
+import { MDCCircularProgressFoundation, MDCCircularProgressAdapter, strings } from '@material/circular-progress';
+import template from './mdc-circular-progress.html?raw';
+
+/**
+ * @selector mdc-circular-progress
+ */
+@inject(Element)
+@customElement({ name: 'mdc-circular-progress', template })
+export class MdcCircularProgress extends MdcComponent<MDCCircularProgressFoundation> {
+  private determinateCircle_?: HTMLElement;
+
+  radius: number = 47.5;
+  strokeDasharray: number;
+  strokeDashoffset: number;
+
+  /** Size in pixels */
+  @bindable({ set: number })
+  size: number = 100;
+  sizeChanged() {
+    this.updateSizeAndStroke();
+  }
+
+  /** Stroke width in pixels */
+  @bindable({ set: number })
+  strokeWidth: number = 10;
+  strokeWidthChanged() {
+    this.updateSizeAndStroke();
+  }
+
+  /** The current progress value, which must be between 0 and 1 or undefined for an indeterminate spinner */
+  @bindable({ set: number })
+  progress?: number;
+  progressChanged() {
+    const determinate = this.progress !== undefined && !isNaN(this.progress);
+    this.foundation?.setDeterminate(determinate);
+    if (determinate) {
+      this.foundation?.setProgress(this.progress!);
+    }
+  }
+
+  binding() {
+    this.updateSizeAndStroke();
+  }
+
+  updateSizeAndStroke() {
+    this.radius = (this.size - 4) / 2 - this.strokeWidth;
+    // foundation gets the radius from the element itself
+    // set the attribute explicitly to avoid issues related to async binding
+    this.determinateCircle_?.setAttribute('r', this.radius.toString());
+    this.strokeDasharray = 2 * this.radius * Math.PI;
+    this.strokeDashoffset = this.strokeDasharray / 2;
+  }
+
+  initialSyncWithDOM() {
+    this.progressChanged();
+  }
+
+  getDefaultFoundation() {
+    // DO NOT INLINE this variable. For backward compatibility, foundations take
+    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
+    // methods, we need a separate, strongly typed adapter variable.
+    const adapter: MDCCircularProgressAdapter = {
+      addClass: (className: string) => this.root.classList.add(className),
+      getDeterminateCircleAttribute: (attributeName: string) => this.determinateCircle_?.getAttribute(attributeName) ?? null,
+      hasClass: (className: string) => this.root.classList.contains(className),
+      removeClass: (className: string) => this.root.classList.remove(className),
+      removeAttribute: (attributeName: string) => this.root.removeAttribute(attributeName),
+      setAttribute: (attributeName: string, value: string) => this.root.setAttribute(attributeName, value),
+      setDeterminateCircleAttribute: (attributeName: string, value: string) => {
+        if (attributeName === strings.STROKE_DASHOFFSET) {
+          // set offset via binding, otherwise it gets overwritten
+          this.strokeDashoffset = parseInt(value);
+        } else {
+          this.determinateCircle_?.setAttribute(attributeName, value);
+        }
+      },
+    };
+    return new MDCCircularProgressFoundation(adapter);
+  }
+}
+
+/** @hidden */
+export interface IMdcCircularProgressElement extends HTMLElement {
+  au: {
+    controller: {
+      viewModel: MdcCircularProgress;
+    };
+  };
+}

package/src/circular-progress/styles/_index.scss

@@ -1 +1 @@
-@forward "mdc-circular-progress";
+@forward "mdc-circular-progress";

package/src/circular-progress/styles/mdc-circular-progress.import.scss

@@ -1 +1 @@
-@forward "mdc-circular-progress";
+@forward "mdc-circular-progress";

package/src/circular-progress/styles/mdc-circular-progress.scss

@@ -1,14 +1,14 @@
-.mdc-circular-progress {
-  width: var(--mdc-circular-progress-size);
-  height: var(--mdc-circular-progress-size);
-
-  .mdc-circular-progress__indeterminate-circle-graphic {
-    stroke-width: var(--mdc-circular-progress-stroke-width);
-  }
-
-  .mdc-circular-progress__gap-patch {
-    .mdc-circular-progress__indeterminate-circle-graphic {
-      stroke-width: var(--mdc-circular-progress-gap-patch-stroke-width);
-    }
-  }
-}
+.mdc-circular-progress {
+  width: var(--mdc-circular-progress-size);
+  height: var(--mdc-circular-progress-size);
+
+  .mdc-circular-progress__indeterminate-circle-graphic {
+    stroke-width: var(--mdc-circular-progress-stroke-width);
+  }
+
+  .mdc-circular-progress__gap-patch {
+    .mdc-circular-progress__indeterminate-circle-graphic {
+      stroke-width: var(--mdc-circular-progress-gap-patch-stroke-width);
+    }
+  }
+}

package/src/data-table/mdc-data-table-row.ts

@@ -1,24 +1,24 @@
-import { customAttribute, inject } from 'aurelia';
-import { cssClasses } from '@material/data-table';
-
-/**
- * Required. Marks the table row.
- * @selector [mdc-data-table-row]
- */
-@customAttribute('mdc-data-table-row')
-@inject(Element)
-export class MdcDataTableRow {
-  constructor(private root: HTMLTableRowElement) { }
-
-  attached() {
-    this.root.classList.add(cssClasses.ROW);
-    const cells = this.root.querySelectorAll<HTMLElement>('th,td');
-    for (const cell of Array.from(cells)) {
-      cell.classList.add(cssClasses.CELL);
-      cell.classList.toggle(cssClasses.CELL_NUMERIC, cell.hasAttribute('numeric'));
-      if (cell.tagName === 'TH') {
-        cell.setAttribute('scope', 'row');
-      }
-    }
-  }
-}
+import { customAttribute, inject } from 'aurelia';
+import { cssClasses } from '@material/data-table';
+
+/**
+ * Required. Marks the table row.
+ * @selector [mdc-data-table-row]
+ */
+@customAttribute('mdc-data-table-row')
+@inject(Element)
+export class MdcDataTableRow {
+  constructor(private root: HTMLTableRowElement) { }
+
+  attached() {
+    this.root.classList.add(cssClasses.ROW);
+    const cells = this.root.querySelectorAll<HTMLElement>('th,td');
+    for (const cell of Array.from(cells)) {
+      cell.classList.add(cssClasses.CELL);
+      cell.classList.toggle(cssClasses.CELL_NUMERIC, cell.hasAttribute('numeric'));
+      if (cell.tagName === 'TH') {
+        cell.setAttribute('scope', 'row');
+      }
+    }
+  }
+}

package/src/data-table/mdc-data-table.html

@@ -1,49 +1,50 @@
-<template class="mdc-data-table ${stickyHeader ? 'mdc-data-table--sticky-header' : ''}">
-  <div class="mdc-data-table__table-container">
-    <au-slot></au-slot>
-  </div>
-  <div class="mdc-data-table__pagination" if.bind="pagination">
-    <div class="mdc-data-table__pagination-trailing">
-      <div class="mdc-data-table__pagination-rows-per-page">
-        <div class="mdc-data-table__pagination-rows-per-page-label">${rowsPerPageLabel}</div>
-
-        <mdc-select value.bind="pageSize" outlined class="mdc-data-table__pagination-rows-per-page-select"
-          hoist-to-body.bind="hoistPageSelectToBody">
-          <mdc-list>
-            <mdc-list-item repeat.for="ps of pageSizes" value.bind="ps">${ps}</mdc-list-item>
-          </mdc-list>
-        </mdc-select>
-      </div>
-
-      <div class="mdc-data-table__pagination-navigation">
-        <div class="mdc-data-table__pagination-total">
-          <au-slot name="pagination-total">${paginationTotal}</au-slot>
-        </div>
-        <button mdc-icon-button class="mdc-data-table__pagination-button" data-first-page="true"
-          disabled.bind="!paginationPosition || paginationPosition === 'first'"
-          click.trigger="handleNavigationClick('first')">
-          <mdc-icon>first_page</mdc-icon>
-        </button>
-        <button mdc-icon-button class="mdc-data-table__pagination-button" data-prev-page="true"
-          disabled.bind="!paginationPosition || paginationPosition === 'first'"
-          click.trigger="handleNavigationClick('prev')">
-          <mdc-icon>chevron_left</mdc-icon>
-        </button>
-        <button mdc-icon-button class="mdc-data-table__pagination-button" data-next-page="true"
-          disabled.bind="!paginationPosition || paginationPosition === 'last'"
-          click.trigger="handleNavigationClick('next')">
-          <mdc-icon>chevron_right</mdc-icon>
-        </button>
-        <button mdc-icon-button class="mdc-data-table__pagination-button" data-last-page="true"
-          disabled.bind="!paginationPosition || paginationPosition === 'last'"
-          click.trigger="handleNavigationClick('last')">
-          <mdc-icon>last_page</mdc-icon>
-        </button>
-      </div>
-    </div>
-  </div>
-  <div class="mdc-data-table__progress-indicator">
-    <div class="mdc-data-table__scrim"></div>
-    <mdc-linear-progress class="mdc-data-table__linear-progress"></mdc-linear-progress>
-  </div>
-</template>
+<template
+  class="mdc-data-table ${stickyHeader ? 'mdc-data-table--sticky-header' : ''} ${columnResized ? 'mdc-data-table--column-resized' : ''}">
+  <div class="mdc-data-table__table-container">
+    <au-slot></au-slot>
+  </div>
+  <div class="mdc-data-table__pagination" if.bind="pagination">
+    <div class="mdc-data-table__pagination-trailing">
+      <div class="mdc-data-table__pagination-rows-per-page">
+        <div class="mdc-data-table__pagination-rows-per-page-label">${rowsPerPageLabel}</div>
+
+        <mdc-select value.bind="pageSize" outlined class="mdc-data-table__pagination-rows-per-page-select"
+          hoist-to-body.bind="hoistPageSelectToBody">
+          <mdc-list>
+            <mdc-list-item repeat.for="ps of pageSizes" value.bind="ps">${ps}</mdc-list-item>
+          </mdc-list>
+        </mdc-select>
+      </div>
+
+      <div class="mdc-data-table__pagination-navigation">
+        <div class="mdc-data-table__pagination-total">
+          <au-slot name="pagination-total">${paginationTotal}</au-slot>
+        </div>
+        <button mdc-icon-button class="mdc-data-table__pagination-button" data-first-page="true"
+          disabled.bind="!paginationPosition || paginationPosition === 'first'"
+          click.trigger="handleNavigationClick('first')">
+          <mdc-icon>first_page</mdc-icon>
+        </button>
+        <button mdc-icon-button class="mdc-data-table__pagination-button" data-prev-page="true"
+          disabled.bind="!paginationPosition || paginationPosition === 'first'"
+          click.trigger="handleNavigationClick('prev')">
+          <mdc-icon>chevron_left</mdc-icon>
+        </button>
+        <button mdc-icon-button class="mdc-data-table__pagination-button" data-next-page="true"
+          disabled.bind="!paginationPosition || paginationPosition === 'last'"
+          click.trigger="handleNavigationClick('next')">
+          <mdc-icon>chevron_right</mdc-icon>
+        </button>
+        <button mdc-icon-button class="mdc-data-table__pagination-button" data-last-page="true"
+          disabled.bind="!paginationPosition || paginationPosition === 'last'"
+          click.trigger="handleNavigationClick('last')">
+          <mdc-icon>last_page</mdc-icon>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="mdc-data-table__progress-indicator">
+    <div class="mdc-data-table__scrim"></div>
+    <mdc-linear-progress class="mdc-data-table__linear-progress"></mdc-linear-progress>
+  </div>
+</template>

package/src/data-table/mdc-data-table.ts

@@ -17,6 +17,10 @@ events.SORTED = events.SORTED.toLowerCase();
 events.UNSELECTED_ALL = events.UNSELECTED_ALL.toLowerCase();
 const NAVIGATION_EVENT = 'mdcdatatable:navigation';
 
+export interface MDCDataTableColumnsResizedEventDetail {
+  widths: string[];
+}
+
 /**
  * Use `pagination-total` replaceable part to customise pagination total label.
  * @selector mdc-data-table
@@ -69,6 +73,8 @@ const NAVIGATION_EVENT = 'mdcdatatable:navigation';
 export class MdcDataTable extends MdcComponent<MDCDataTableFoundation> implements EventListenerObject {
   header: HTMLElement;
   content: HTMLElement;
+  columnResized: boolean;
+  private mutationObserver: MutationObserver;
 
   /** Shows pagination footer */
   @bindable({ set: booleanAttr })
@@ -91,6 +97,14 @@ export class MdcDataTable extends MdcComponent<MDCDataTableFoundation> implement
   @bindable({ set: booleanAttr })
   stickyHeader: boolean;
 
+  /** Turns off checkbox handling by the MDC framework */
+  @bindable({ set: booleanAttr })
+  manualCheckboxHandling: boolean;
+
+  /** Turns on automatic column widths saving to localStorage */
+  @bindable({ set: booleanAttr })
+  saveColumnWidths: boolean;
+
   get paginationPosition(): 'first' | 'between' | 'last' | undefined {
     if (typeof this.pageSize !== 'number' || this.pageSize === undefined || isNaN(this.activePage) || isNaN(this.recordsCount)) {
       return undefined;
@@ -180,21 +194,21 @@ export class MdcDataTable extends MdcComponent<MDCDataTableFoundation> implement
   }
 
   /**
-   * @return Returns array of header row cell elements.
+   * Returns array of header row cell elements.
    */
-  getHeaderCells(): Element[] {
-    return [].slice.call(this.root.querySelectorAll(selectors.HEADER_CELL)) as Element[];
+  getHeaderCells(): HTMLElement[] {
+    return [].slice.call(this.root.querySelectorAll(selectors.HEADER_CELL)) as HTMLElement[];
   }
 
   /**
-   * @return Returns array of row elements.
+   * Returns array of row elements.
    */
   getRows(): Element[] {
     return this.foundation!.getRows();
   }
 
   /**
-   * @return Returns array of selected row ids.
+   * Returns array of selected row ids.
    */
   getSelectedRowIds(): (string | null)[] {
     return this.foundation!.getSelectedRowIds();
@@ -226,12 +240,24 @@ export class MdcDataTable extends MdcComponent<MDCDataTableFoundation> implement
 
   beforeFoundationCreated() {
     this.header = this.root.querySelector<HTMLElement>(`.${cssClasses.HEADER_ROW}`)!;
-    this.header.addEventListener('change', this);
+    this.content = this.root.querySelector<HTMLElement>(`.${cssClasses.CONTENT}`)!;
     this.header.addEventListener('click', this);
+    this.header.querySelectorAll('th[resizeable]').forEach(x => {
+      const resizeHandle = document.createElement('div');
+      resizeHandle.addEventListener('mousedown', (event) => this.startColumnResize(event, x as HTMLElement));
+      x.insertBefore(document.createElement('div'), x.firstChild).classList.add('mdc-data-table__header-cell__hover-indicator');
+      x.appendChild(resizeHandle).classList.add('mdc-data-table__header-cell__resize-handle');
+    });
+    if (this.saveColumnWidths) {
+      this.restoreColumnWidths();
+      this.mutationObserver = new MutationObserver(() => this.restoreColumnWidths());
+      this.mutationObserver.observe(this.content, { childList: true, subtree: false });
+    }
 
-    this.content = this.root.querySelector<HTMLElement>(`.${cssClasses.CONTENT}`)!;
-    this.content.addEventListener('change', this);
-    this.content.addEventListener('click', this);
+    if (!this.manualCheckboxHandling) {
+      this.header.addEventListener('change', this);
+      this.content.addEventListener('change', this);
+    }
 
     const rowCheckboxList = this.rowCheckboxList;
     this.rowCheckboxList.forEach(x => x.root.classList.add(cssClasses.ROW_CHECKBOX));
@@ -241,23 +267,95 @@ export class MdcDataTable extends MdcComponent<MDCDataTableFoundation> implement
     }
   }
 
+  public restoreColumnWidths() {
+    const widths = JSON.parse(localStorage.getItem(`mdc-data-table-${this.root.id}-column-widths`) ?? '[]');
+    this.setColumnWidths(widths);
+  }
+
   initialSyncWithDOM() {
     if (this.busy !== undefined) {
       this.busyChanged();
     }
-    const rowCheckboxList = this.rowCheckboxList;
-    for (let i = 0; i < rowCheckboxList.length; ++i) {
-      if (rowCheckboxList[i].checked) {
-        this.getRowByIndex(i).classList.add(cssClasses.ROW_SELECTED);
+    if (!this.manualCheckboxHandling) {
+      const rowCheckboxList = this.rowCheckboxList;
+      for (let i = 0; i < rowCheckboxList.length; ++i) {
+        if (rowCheckboxList[i].checked) {
+          this.getRowByIndex(i).classList.add(cssClasses.ROW_SELECTED);
+        }
       }
     }
     this.foundation?.layout();
   }
 
+  private startColumnResize(event: MouseEvent, headerCell: HTMLElement): void {
+    this.columnResized = true;
+    const startX = event.clientX;
+    const resizeHandle = event.target as HTMLElement;
+    const initialHandlePosition = resizeHandle.offsetLeft;
+
+    // Create a visual indicator for the resize handle
+    const handleIndicator = document.createElement('div');
+    handleIndicator.classList.add('mdc-data-table__header-cell__resize-handle-indicator');
+    handleIndicator.style.left = `${initialHandlePosition}px`;
+    handleIndicator.style.height = `${headerCell.offsetHeight}px`;
+    document.body.style.cursor = 'col-resize';
+    headerCell.classList.add('mdc-data-table__header-cell--resizing');
+    headerCell.appendChild(handleIndicator);
+
+    const onMouseMove = (moveEvent: MouseEvent) => {
+      const deltaX = moveEvent.clientX - startX;
+      handleIndicator.style.left = `${Math.max(initialHandlePosition + deltaX, headerCell.clientLeft)}px`;
+    };
+
+    const onMouseUp = () => {
+      const finalDeltaX = parseInt(handleIndicator.style.left, 10) - initialHandlePosition;
+      const newWidth = Math.max(5, headerCell.offsetWidth + finalDeltaX); // Minimum width of 5px
+
+      // Apply the new width to the column
+      headerCell.style.minWidth = headerCell.style.maxWidth = `${newWidth}px`;
+      this.content.querySelectorAll(`tr td:nth-child(${Array.from(headerCell.parentElement!.children).indexOf(headerCell) + 1})`)
+        .forEach((cell: HTMLElement) => {
+          cell.style.minWidth = cell.style.maxWidth = `${newWidth}px`;
+        });
+
+      // Clean up
+      handleIndicator.remove();
+      this.columnResized = false;
+      document.body.style.cursor = '';
+      headerCell.classList.remove('mdc-data-table__header-cell--resizing');
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+
+      // Save the new widths if required
+      const widths = this.getHeaderCells().map(x => x.style.minWidth);
+      if (this.saveColumnWidths) {
+        localStorage.setItem(`mdc-data-table-${this.root.id}-column-widths`, JSON.stringify(widths));
+      }
+
+      this.emit<MDCDataTableColumnsResizedEventDetail>('mdcdatatable:columnsresized', { widths }, true);
+    };
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  }
+
   destroy() {
     this.header.removeEventListener('change', this);
     this.header.removeEventListener('click', this);
     this.content.removeEventListener('change', this);
+    this.mutationObserver?.disconnect();
+  }
+
+  public setColumnWidths(widths: string[]) {
+    if (!widths || widths.length === 0) {
+      return;
+    }
+    this.getHeaderCells().forEach((x, i) => {
+      x.style.minWidth = x.style.maxWidth = widths[i];
+      this.content.querySelectorAll(`tr td:nth-child(${i + 1})`).forEach((cell: HTMLElement) => {
+        cell.style.minWidth = cell.style.maxWidth = widths[i];
+      });
+    });
   }
 
   getDefaultFoundation() {

package/src/data-table/styles/_index.scss

@@ -0,0 +1 @@
+@forward './mdc-data-table.scss';

package/src/data-table/styles/mdc-data-table.import.scss

@@ -0,0 +1 @@
+@forward './mdc-data-table.scss';

package/src/data-table/styles/mdc-data-table.scss

@@ -0,0 +1,64 @@
+@use "@material/data-table";
+
+
+.mdc-data-table__header-cell {
+  &--resizing {
+    .mdc-data-table__header-cell__hover-indicator {
+      display: block!important;
+    }
+
+    // this puts the column above the other columns so that resizing indicator is visible
+    z-index: 2 !important;
+  }
+
+  &__resize-handle {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 5px;
+    cursor: col-resize;
+    z-index: 1;
+    background-color: transparent;
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+    transition: background-color 0.2s;
+  }
+
+  .mdc-data-table__header-cell__hover-indicator {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    left: 0;
+    background-color: data-table.$row-hover-fill-color;
+    display: none;
+  }
+
+  .mdc-data-table__header-cell__resize-handle-indicator {
+    position: absolute;
+    top: 0;
+    width: 2px;
+    background-color: var(--mdc-theme-primary);
+    pointer-events: none;
+    z-index: 1000;
+  }
+
+  &:has(.mdc-data-table__header-cell__resize-handle-indicator) {
+    overflow: visible;
+  }
+}
+
+.mdc-data-table:not(.mdc-data-table--column-resized) {
+  .mdc-data-table__header-cell[resizeable] {
+    &:hover {
+      .mdc-data-table__header-cell__hover-indicator {
+        display: block;
+      }
+    }
+  }
+}
+
+.mdc-data-table--column-resized {
+  user-select: none;
+}