@hashicorp/design-system-components 4.23.1 → 4.24.0-rc-20250924193840

package/dist/components/hds/advanced-table/th-reorder-drop-target.js

@@ -0,0 +1,133 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { modifier } from 'ember-modifier';
+import { BORDER_WIDTH } from './index.js';
+import { requestAnimationFrameWaiter } from './utils.js';
+import { HdsAdvancedTableColumnReorderSideValues } from './types.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { g, i, n } from 'decorator-transforms/runtime';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n<div\n  class={{this.classNames}}\n  aria-hidden=\"true\"\n  {{style height=this.height}}\n  {{this._registerElement}}\n  {{on \"dragover\" this.handleDragOver}}\n  {{on \"drop\" this.handleDrop}}\n  ...attributes\n/>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+class HdsAdvancedTableThReorderDropTarget extends Component {
+  static {
+    g(this.prototype, "_dragSide", [tracked], function () {
+      return null;
+    });
+  }
+  #_dragSide = (i(this, "_dragSide"), void 0);
+  static {
+    g(this.prototype, "_isUpdateQueued", [tracked], function () {
+      return false;
+    });
+  }
+  #_isUpdateQueued = (i(this, "_isUpdateQueued"), void 0);
+  _element;
+  _registerElement = modifier(element => {
+    this._element = element;
+  });
+
+  // determines whether the drag event is occurring on the left or right side of the element
+  _getDragSide(event) {
+    const rect = this._element.getBoundingClientRect();
+    const mouseX = event.clientX;
+    const elementMiddleX = rect.left + rect.width / 2;
+    return mouseX < elementMiddleX ? HdsAdvancedTableColumnReorderSideValues.Left : HdsAdvancedTableColumnReorderSideValues.Right;
+  }
+  get isDraggingOver() {
+    const {
+      table
+    } = this.args.column;
+    return table.reorderHoveredColumn?.key === this.args.column.key;
+  }
+  get classNames() {
+    const {
+      column
+    } = this.args;
+    const classes = ['hds-advanced-table__th-reorder-drop-target'];
+    if (column.isFirst && !this.args.hasSelectableRows) {
+      classes.push('hds-advanced-table__th-reorder-drop-target--is-first');
+    } else if (column.isLast) {
+      classes.push('hds-advanced-table__th-reorder-drop-target--is-last');
+    }
+    if (column.isBeingDragged) {
+      classes.push('hds-advanced-table__th-reorder-drop-target--is-being-dragged');
+    } else if (this.isDraggingOver && this._dragSide !== null) {
+      classes.push(...['hds-advanced-table__th-reorder-drop-target--is-dragging-over', `hds-advanced-table__th-reorder-drop-target--is-dragging-over--${this._dragSide}`]);
+    }
+    return classes.join(' ');
+  }
+  get height() {
+    const {
+      tableHeight
+    } = this.args;
+    if (tableHeight === undefined) {
+      return;
+    }
+    return `${tableHeight - BORDER_WIDTH * 2}px`;
+  }
+  handleDragOver(event) {
+    event.preventDefault();
+    if (this._isUpdateQueued) {
+      return;
+    }
+    this._isUpdateQueued = true;
+    requestAnimationFrameWaiter(() => {
+      const {
+        column
+      } = this.args;
+      const {
+        table
+      } = column;
+      if (table.reorderDraggedColumn !== null) {
+        if (table.reorderDraggedColumn.key === column.key) {
+          table.reorderHoveredColumn = null;
+        } else {
+          table.reorderHoveredColumn = column;
+          const {
+            next,
+            previous
+          } = table.reorderDraggedColumn.siblings;
+          const dragSide = this._getDragSide(event);
+          if (column === previous && dragSide === HdsAdvancedTableColumnReorderSideValues.Left || column === next && dragSide === HdsAdvancedTableColumnReorderSideValues.Right || column !== previous && column !== next) {
+            this._dragSide = dragSide;
+          }
+        }
+      }
+      this._isUpdateQueued = false;
+    });
+  }
+  static {
+    n(this.prototype, "handleDragOver", [action]);
+  }
+  handleDrop(event) {
+    event.preventDefault();
+    const {
+      column,
+      onReorderDrop
+    } = this.args;
+    const {
+      _dragSide
+    } = this;
+    if (column === undefined || _dragSide === null || typeof onReorderDrop !== 'function') {
+      return;
+    }
+    onReorderDrop(column, _dragSide);
+    this._dragSide = null;
+    column.table.reorderHoveredColumn = null;
+  }
+  static {
+    n(this.prototype, "handleDrop", [action]);
+  }
+}
+setComponentTemplate(TEMPLATE, HdsAdvancedTableThReorderDropTarget);
+
+export { HdsAdvancedTableThReorderDropTarget as default };
+//# sourceMappingURL=th-reorder-drop-target.js.map

package/dist/components/hds/advanced-table/th-reorder-drop-target.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"th-reorder-drop-target.js","sources":["../../../../src/components/hds/advanced-table/th-reorder-drop-target.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { modifier } from 'ember-modifier';\nimport { BORDER_WIDTH } from './index.ts';\nimport { requestAnimationFrameWaiter } from './utils.ts';\nimport { HdsAdvancedTableColumnReorderSideValues } from './types.ts';\n\nimport type HdsAdvancedTableColumn from './models/column.ts';\nimport type { HdsAdvancedTableColumnReorderSide } from './types.ts';\nimport type { HdsAdvancedTableSignature } from './index.ts';\n\nexport interface HdsAdvancedTableThReorderDropTargetSignature {\n  Args: {\n    column: HdsAdvancedTableColumn;\n    hasSelectableRows?: HdsAdvancedTableSignature['Args']['isSelectable'];\n    tableHeight?: number;\n    onReorderDrop?: (\n      column: HdsAdvancedTableColumn,\n      side: HdsAdvancedTableColumnReorderSide\n    ) => void;\n  };\n  Blocks: {\n    default?: [];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsAdvancedTableThReorderDropTarget extends Component<HdsAdvancedTableThReorderDropTargetSignature> {\n  @tracked private _dragSide: HdsAdvancedTableColumnReorderSide | null = null;\n  @tracked private _isUpdateQueued: boolean = false;\n\n  private _element!: HdsAdvancedTableThReorderDropTargetSignature['Element'];\n\n  private _registerElement = modifier(\n    (element: HdsAdvancedTableThReorderDropTargetSignature['Element']) => {\n      this._element = element;\n    }\n  );\n\n  // determines whether the drag event is occurring on the left or right side of the element\n  private _getDragSide(event: DragEvent): HdsAdvancedTableColumnReorderSide {\n    const rect = this._element.getBoundingClientRect();\n    const mouseX = event.clientX;\n    const elementMiddleX = rect.left + rect.width / 2;\n\n    return mouseX < elementMiddleX\n      ? HdsAdvancedTableColumnReorderSideValues.Left\n      : HdsAdvancedTableColumnReorderSideValues.Right;\n  }\n\n  get isDraggingOver(): boolean {\n    const { table } = this.args.column;\n\n    return table.reorderHoveredColumn?.key === this.args.column.key;\n  }\n\n  get classNames(): string {\n    const { column } = this.args;\n\n    const classes = ['hds-advanced-table__th-reorder-drop-target'];\n\n    if (column.isFirst && !this.args.hasSelectableRows) {\n      classes.push('hds-advanced-table__th-reorder-drop-target--is-first');\n    } else if (column.isLast) {\n      classes.push('hds-advanced-table__th-reorder-drop-target--is-last');\n    }\n\n    if (column.isBeingDragged) {\n      classes.push(\n        'hds-advanced-table__th-reorder-drop-target--is-being-dragged'\n      );\n    } else if (this.isDraggingOver && this._dragSide !== null) {\n      classes.push(\n        ...[\n          'hds-advanced-table__th-reorder-drop-target--is-dragging-over',\n          `hds-advanced-table__th-reorder-drop-target--is-dragging-over--${this._dragSide}`,\n        ]\n      );\n    }\n\n    return classes.join(' ');\n  }\n\n  get height(): string | undefined {\n    const { tableHeight } = this.args;\n\n    if (tableHeight === undefined) {\n      return;\n    }\n\n    return `${tableHeight - BORDER_WIDTH * 2}px`;\n  }\n\n  @action\n  handleDragOver(event: DragEvent): void {\n    event.preventDefault();\n\n    if (this._isUpdateQueued) {\n      return;\n    }\n\n    this._isUpdateQueued = true;\n\n    requestAnimationFrameWaiter(() => {\n      const { column } = this.args;\n      const { table } = column;\n\n      if (table.reorderDraggedColumn !== null) {\n        if (table.reorderDraggedColumn.key === column.key) {\n          table.reorderHoveredColumn = null;\n        } else {\n          table.reorderHoveredColumn = column;\n\n          const { next, previous } = table.reorderDraggedColumn.siblings;\n          const dragSide = this._getDragSide(event);\n\n          if (\n            (column === previous &&\n              dragSide === HdsAdvancedTableColumnReorderSideValues.Left) ||\n            (column === next &&\n              dragSide === HdsAdvancedTableColumnReorderSideValues.Right) ||\n            (column !== previous && column !== next)\n          ) {\n            this._dragSide = dragSide;\n          }\n        }\n      }\n\n      this._isUpdateQueued = false;\n    });\n  }\n\n  @action\n  handleDrop(event: DragEvent): void {\n    event.preventDefault();\n\n    const { column, onReorderDrop } = this.args;\n    const { _dragSide } = this;\n\n    if (\n      column === undefined ||\n      _dragSide === null ||\n      typeof onReorderDrop !== 'function'\n    ) {\n      return;\n    }\n\n    onReorderDrop(column, _dragSide);\n\n    this._dragSide = null;\n    column.table.reorderHoveredColumn = null;\n  }\n}\n"],"names":["HdsAdvancedTableThReorderDropTarget","Component","g","prototype","tracked","i","void 0","_element","_registerElement","modifier","element","_getDragSide","event","rect","getBoundingClientRect","mouseX","clientX","elementMiddleX","left","width","HdsAdvancedTableColumnReorderSideValues","Left","Right","isDraggingOver","table","args","column","reorderHoveredColumn","key","classNames","classes","isFirst","hasSelectableRows","push","isLast","isBeingDragged","_dragSide","join","height","tableHeight","undefined","BORDER_WIDTH","handleDragOver","preventDefault","_isUpdateQueued","requestAnimationFrameWaiter","reorderDraggedColumn","next","previous","siblings","dragSide","n","action","handleDrop","onReorderDrop","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/advanced-table/th-reorder-handle.js

@@ -0,0 +1,104 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { modifier } from 'ember-modifier';
+import { scheduleOnce } from '@ember/runloop';
+import { precompileTemplate } from '@ember/template-compilation';
+import { n } from 'decorator-transforms/runtime';
+import { setComponentTemplate } from '@ember/component';
+
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n\n{{! template-lint-disable no-unsupported-role-attributes require-presentational-children }}\n<div\n  role=\"button\"\n  draggable=\"true\"\n  class=\"hds-advanced-table__th-reorder-handle\"\n  tabindex=\"0\"\n  aria-description={{hds-t\n    \"hds.components.advanced-table.th-reorder-handle.aria-description\"\n    default=\"Use left and right arrow keys while focused on this button to move the column to a new position.\"\n  }}\n  aria-label={{hds-t\n    \"hds.components.advanced-table.th-reorder-handle.aria-label\"\n    columnLabel=@column.label\n    default=(concat \"Reorder \" @column.label \" column\")\n  }}\n  {{this._registerElement}}\n  {{on \"dragstart\" this.handleDragStart}}\n  {{on \"dragend\" this.handleDragEnd}}\n  {{on \"keydown\" this.handleKeydown}}\n  ...attributes\n>\n  <div class=\"hds-advanced-table__th-reorder-handle__inner\">\n    <Hds::Icon @name=\"move-horizontal\" />\n  </div>\n</div>");
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+function constructDragPreview(width, height) {
+  const dragPreviewElement = document.createElement('div');
+  dragPreviewElement.className = 'hds-advanced-table__th-reorder-drag-preview';
+  dragPreviewElement.style.width = `${width}px`;
+  if (height) {
+    dragPreviewElement.style.height = `${height}px`;
+  }
+  document.body.appendChild(dragPreviewElement);
+  return dragPreviewElement;
+}
+class HdsAdvancedTableThReorderHandle extends Component {
+  _registerElement = modifier(element => {
+    this.args.column.reorderHandleElement = element;
+  });
+  handleDragStart(event) {
+    const {
+      column,
+      tableHeight,
+      onReorderDragStart
+    } = this.args;
+    const {
+      key,
+      thElement
+    } = column;
+    if (key === undefined || thElement === undefined) {
+      return;
+    }
+    column.isBeingDragged = true;
+    const thElementWidth = thElement.offsetWidth;
+    event.dataTransfer?.setData('text/plain', key);
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move';
+    }
+    const dragPreview = constructDragPreview(thElementWidth, tableHeight);
+    document.body.appendChild(dragPreview);
+
+    // set the drag image, center it, and offset it vertically by 10px
+    event.dataTransfer?.setDragImage(dragPreview, thElementWidth / 2, 10);
+    setTimeout(() => document.body.removeChild(dragPreview), 0);
+    onReorderDragStart(column);
+  }
+  static {
+    n(this.prototype, "handleDragStart", [action]);
+  }
+  handleDragEnd() {
+    const {
+      column,
+      onReorderDragEnd
+    } = this.args;
+    column.isBeingDragged = false;
+    if (typeof onReorderDragEnd === 'function') {
+      onReorderDragEnd();
+    }
+  }
+  static {
+    n(this.prototype, "handleDragEnd", [action]);
+  }
+  handleKeydown(event) {
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        {
+          event.preventDefault();
+          const {
+            column
+          } = this.args;
+          const direction = event.key === 'ArrowLeft' ? -1 : 1;
+          column.table.stepColumn(column, direction);
+
+          // we need to wait for the next run loop to ensure that the element has been registered with the column after moving
+          // eslint-disable-next-line ember/no-runloop
+          scheduleOnce('afterRender', this, this.args.column.focusReorderHandle.bind(this));
+          break;
+        }
+      case ' ':
+        {
+          event.preventDefault();
+          break;
+        }
+    }
+  }
+  static {
+    n(this.prototype, "handleKeydown", [action]);
+  }
+}
+setComponentTemplate(TEMPLATE, HdsAdvancedTableThReorderHandle);
+
+export { HdsAdvancedTableThReorderHandle as default };
+//# sourceMappingURL=th-reorder-handle.js.map

package/dist/components/hds/advanced-table/th-reorder-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"th-reorder-handle.js","sources":["../../../../src/components/hds/advanced-table/th-reorder-handle.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\nimport { modifier } from 'ember-modifier';\nimport { scheduleOnce } from '@ember/runloop';\n\nimport type HdsAdvancedTableColumn from './models/column.ts';\n\nexport interface HdsAdvancedTableThReorderHandleSignature {\n  Args: {\n    column: HdsAdvancedTableColumn;\n    tableHeight?: number;\n    onReorderDragStart: (column: HdsAdvancedTableColumn) => void;\n    onReorderDragEnd?: () => void;\n  };\n  Blocks: {\n    default?: [];\n  };\n  Element: HTMLDivElement;\n}\n\nfunction constructDragPreview(width: number, height?: number): HTMLDivElement {\n  const dragPreviewElement = document.createElement('div');\n\n  dragPreviewElement.className = 'hds-advanced-table__th-reorder-drag-preview';\n\n  dragPreviewElement.style.width = `${width}px`;\n\n  if (height) {\n    dragPreviewElement.style.height = `${height}px`;\n  }\n\n  document.body.appendChild(dragPreviewElement);\n\n  return dragPreviewElement;\n}\n\nexport default class HdsAdvancedTableThReorderHandle extends Component<HdsAdvancedTableThReorderHandleSignature> {\n  private _registerElement = modifier((element: HTMLDivElement) => {\n    this.args.column.reorderHandleElement = element;\n  });\n\n  @action\n  handleDragStart(event: DragEvent): void {\n    const { column, tableHeight, onReorderDragStart } = this.args;\n    const { key, thElement } = column;\n\n    if (key === undefined || thElement === undefined) {\n      return;\n    }\n\n    column.isBeingDragged = true;\n\n    const thElementWidth = thElement.offsetWidth;\n\n    event.dataTransfer?.setData('text/plain', key);\n\n    if (event.dataTransfer) {\n      event.dataTransfer.effectAllowed = 'move';\n    }\n\n    const dragPreview = constructDragPreview(thElementWidth, tableHeight);\n\n    document.body.appendChild(dragPreview);\n\n    // set the drag image, center it, and offset it vertically by 10px\n    event.dataTransfer?.setDragImage(dragPreview, thElementWidth / 2, 10);\n\n    setTimeout(() => document.body.removeChild(dragPreview), 0);\n\n    onReorderDragStart(column);\n  }\n\n  @action\n  handleDragEnd(): void {\n    const { column, onReorderDragEnd } = this.args;\n\n    column.isBeingDragged = false;\n\n    if (typeof onReorderDragEnd === 'function') {\n      onReorderDragEnd();\n    }\n  }\n\n  @action\n  handleKeydown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowRight': {\n        event.preventDefault();\n\n        const { column } = this.args;\n        const direction = event.key === 'ArrowLeft' ? -1 : 1;\n        column.table.stepColumn(column, direction);\n\n        // we need to wait for the next run loop to ensure that the element has been registered with the column after moving\n        // eslint-disable-next-line ember/no-runloop\n        scheduleOnce(\n          'afterRender',\n          this,\n          this.args.column.focusReorderHandle.bind(this)\n        );\n        break;\n      }\n\n      case ' ': {\n        event.preventDefault();\n        break;\n      }\n\n      default:\n        break;\n    }\n  }\n}\n"],"names":["constructDragPreview","width","height","dragPreviewElement","document","createElement","className","style","body","appendChild","HdsAdvancedTableThReorderHandle","Component","_registerElement","modifier","element","args","column","reorderHandleElement","handleDragStart","event","tableHeight","onReorderDragStart","key","thElement","undefined","isBeingDragged","thElementWidth","offsetWidth","dataTransfer","setData","effectAllowed","dragPreview","setDragImage","setTimeout","removeChild","n","prototype","action","handleDragEnd","onReorderDragEnd","handleKeydown","preventDefault","direction","table","stepColumn","scheduleOnce","focusReorderHandle","bind","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/advanced-table/th-resize-handle.js

@@ -2,6 +2,8 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { modifier } from 'ember-modifier';
+import { requestAnimationFrameWaiter } from './utils.js';
+import { BORDER_WIDTH } from './index.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { g, i, n } from 'decorator-transforms/runtime';
 import { setComponentTemplate } from '@ember/component';
@@ -13,7 +15,6 @@ var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-
  * SPDX-License-Identifier: MPL-2.0
  */
 
-const TABLE_BORDER_WIDTH = 1;
 const KEYBOARD_RESIZE_STEP = 10;
 function calculateEffectiveDelta(deltaX, col, startColW, nextCol, startNextColW) {
   const colMin = col.pxMinWidth ?? 0;
@@ -56,7 +57,19 @@ class HdsAdvancedTableThResizeHandle extends Component {
       return 0;
     });
   }
-  #_transientDelta = (i(this, "_transientDelta"), void 0);
+  #_transientDelta = (i(this, "_transientDelta"), void 0); // track the width change as it is changing, applied when resizing stops
+  static {
+    g(this.prototype, "_isUpdateQueued", [tracked], function () {
+      return false;
+    });
+  }
+  #_isUpdateQueued = (i(this, "_isUpdateQueued"), void 0);
+  static {
+    g(this.prototype, "_lastPointerEvent", [tracked], function () {
+      return null;
+    });
+  }
+  #_lastPointerEvent = (i(this, "_lastPointerEvent"), void 0);
   _handleElement;
   _boundResize;
   _boundStopResize;
@@ -75,7 +88,7 @@ class HdsAdvancedTableThResizeHandle extends Component {
     if (tableHeight === undefined) {
       return;
     }
-    return `${tableHeight - TABLE_BORDER_WIDTH * 2}px`;
+    return `${tableHeight - BORDER_WIDTH * 2}px`;
   }
   get classNames() {
     const classes = ['hds-advanced-table__th-resize-handle'];
@@ -202,26 +215,36 @@ class HdsAdvancedTableThResizeHandle extends Component {
     }
   }
   _resize(event) {
-    if (this.resizing === null) {
+    this._lastPointerEvent = event;
+    if (this._isUpdateQueued) {
       return;
     }
-    event.preventDefault();
-    const {
-      column
-    } = this.args;
-    const {
-      next: nextColumn
-    } = column.siblings;
-    const {
-      startX,
-      startColumnPxWidth,
-      startNextColumnPxWidth
-    } = this.resizing;
-    const deltaX = event.clientX - startX;
-    this._applyResizeDelta(deltaX, column, startColumnPxWidth,
-    // Width at the start of the drag
-    nextColumn, startNextColumnPxWidth // Width of next col at the start of the drag
-    );
+    this._isUpdateQueued = true;
+    requestAnimationFrameWaiter(() => {
+      if (this.resizing === null || this._lastPointerEvent === null) {
+        this._isUpdateQueued = false;
+        return;
+      }
+      const event = this._lastPointerEvent;
+      event.preventDefault();
+      const {
+        column
+      } = this.args;
+      const {
+        next: nextColumn
+      } = column.siblings;
+      const {
+        startX,
+        startColumnPxWidth,
+        startNextColumnPxWidth
+      } = this.resizing;
+      const deltaX = event.clientX - startX;
+      this._applyResizeDelta(deltaX, column, startColumnPxWidth,
+      // Width at the start of the drag
+      nextColumn, startNextColumnPxWidth // Width of next col at the start of the drag
+      );
+      this._isUpdateQueued = false;
+    });
   }
   _stopResize() {
     const {

package/dist/components/hds/advanced-table/th-resize-handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"th-resize-handle.js","sources":["../../../../src/components/hds/advanced-table/th-resize-handle.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { modifier } from 'ember-modifier';\n\nimport type HdsAdvancedTableColumn from './models/column.ts';\nimport type { HdsAdvancedTableSignature } from './index.ts';\n\nconst TABLE_BORDER_WIDTH = 1;\nconst KEYBOARD_RESIZE_STEP = 10;\n\nfunction calculateEffectiveDelta(\n  deltaX: number,\n  col: HdsAdvancedTableColumn,\n  startColW: number,\n  nextCol: HdsAdvancedTableColumn,\n  startNextColW: number\n): number {\n  const colMin = col.pxMinWidth ?? 0;\n  const colMax = col.pxMaxWidth ?? Infinity;\n  const nextMin = nextCol.pxMinWidth ?? 0;\n  const nextMax = nextCol.pxMaxWidth ?? Infinity;\n\n  let effectiveDelta = 0;\n\n  // expanding col, shrinking nextCol\n  if (deltaX > 0) {\n    const maxCanExpandCol = colMax - startColW;\n    const maxCanShrinkNext = startNextColW - nextMin;\n\n    effectiveDelta = Math.min(deltaX, maxCanExpandCol, maxCanShrinkNext);\n    effectiveDelta = Math.max(0, effectiveDelta);\n  }\n  // shrinking col, expanding nextCol\n  else if (deltaX < 0) {\n    const absDeltaX = -deltaX;\n    const maxCanShrinkCol = startColW - colMin;\n\n    let maxCanExpandNext: number;\n    if (startNextColW > nextMax) {\n      maxCanExpandNext = Infinity;\n    } else {\n      maxCanExpandNext = nextMax - startNextColW;\n    }\n\n    effectiveDelta = -Math.min(absDeltaX, maxCanShrinkCol, maxCanExpandNext);\n    effectiveDelta = Math.min(0, effectiveDelta);\n  }\n\n  return effectiveDelta;\n}\n\nexport interface HdsAdvancedTableThResizeHandleSignature {\n  Args: {\n    column: HdsAdvancedTableColumn;\n    hasResizableColumns: HdsAdvancedTableSignature['Args']['hasResizableColumns'];\n    tableHeight?: number;\n    onColumnResize?: HdsAdvancedTableSignature['Args']['onColumnResize'];\n  };\n  Blocks: {\n    default?: [];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsAdvancedTableThResizeHandle extends Component<HdsAdvancedTableThResizeHandleSignature> {\n  @tracked resizing: {\n    startX: number;\n    startColumnPxWidth: number;\n    startNextColumnPxWidth?: number;\n  } | null = null;\n  @tracked private _transientDelta: number = 0;\n\n  private _handleElement!: HdsAdvancedTableThResizeHandleSignature['Element'];\n  private _boundResize: (event: PointerEvent) => void;\n  private _boundStopResize: () => void;\n\n  private _registerHandleElement = modifier(\n    (element: HdsAdvancedTableThResizeHandleSignature['Element']) => {\n      this._handleElement = element;\n    }\n  );\n\n  constructor(\n    owner: unknown,\n    args: HdsAdvancedTableThResizeHandleSignature['Args']\n  ) {\n    super(owner, args);\n\n    this._boundResize = this._resize.bind(this);\n    this._boundStopResize = this._stopResize.bind(this);\n  }\n\n  get height(): string | undefined {\n    const { tableHeight } = this.args;\n\n    if (tableHeight === undefined) {\n      return;\n    }\n\n    return `${tableHeight - TABLE_BORDER_WIDTH * 2}px`;\n  }\n\n  get classNames(): string {\n    const classes = ['hds-advanced-table__th-resize-handle'];\n\n    if (this.resizing !== null) {\n      classes.push('hds-advanced-table__th-resize-handle--resizing');\n    }\n\n    return classes.join(' ');\n  }\n\n  private _applyTransientWidths() {\n    const { column } = this.args;\n    const { next: nextColumn } = column.siblings;\n\n    column.width = column.appliedWidth;\n\n    if (nextColumn !== undefined) {\n      nextColumn.width = nextColumn.appliedWidth;\n    }\n  }\n\n  @action\n  onColumnResize(key?: string, width?: string): void {\n    const { onColumnResize } = this.args;\n\n    if (typeof onColumnResize === 'function' && key !== undefined) {\n      onColumnResize(key, width);\n    }\n  }\n\n  @action\n  handleKeydown(event: KeyboardEvent): void {\n    const validKeys = ['ArrowLeft', 'ArrowRight'];\n\n    if (!validKeys.includes(event.key)) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { column } = this.args;\n    const { next: nextColumn } = column.siblings;\n\n    if (nextColumn === undefined) {\n      return;\n    }\n\n    column.table.setTransientColumnWidths({ roundValues: true });\n\n    const startColumnPxWidth = Math.round(column.pxAppliedWidth ?? 0);\n    const startNextColumnPxWidth = Math.round(nextColumn.pxAppliedWidth ?? 0);\n    const deltaX =\n      event.key === 'ArrowRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;\n\n    this._applyResizeDelta(\n      deltaX,\n      column,\n      startColumnPxWidth,\n      nextColumn,\n      startNextColumnPxWidth\n    );\n\n    // ensure the resize handle remains visible during keyboard navigation.\n    this._handleElement.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'nearest',\n    });\n\n    // use a microtask to commit the final state after the render pass.\n    queueMicrotask(() => {\n      // reset transient values\n      this._setWidthDebts();\n      this._applyTransientWidths();\n      column.table.resetTransientColumnWidths();\n      this._transientDelta = 0;\n\n      this.onColumnResize(column.key, column.width);\n    });\n  }\n\n  @action\n  startResize(event: PointerEvent): void {\n    if (event.button !== 0) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { column } = this.args;\n    const { next: nextColumn } = column.siblings;\n\n    column.table.setTransientColumnWidths();\n\n    this.resizing = {\n      startX: event.clientX,\n      startColumnPxWidth: Math.round(column.pxAppliedWidth ?? 0),\n      startNextColumnPxWidth: Math.round(nextColumn?.pxAppliedWidth ?? 0),\n    };\n\n    window.addEventListener('pointermove', this._boundResize);\n    window.addEventListener('pointerup', this._boundStopResize);\n  }\n\n  private _setColumnWidth(column: HdsAdvancedTableColumn, width: number): void {\n    if (width > column.pxMaxWidth || width < column.pxMinWidth) {\n      column.pxTransientWidth = width;\n    } else {\n      column.setPxTransientWidth(width);\n    }\n  }\n\n  private _applyResizeDelta(\n    deltaX: number,\n    column: HdsAdvancedTableColumn,\n    startColumnPxWidth: number,\n    nextColumn?: HdsAdvancedTableColumn,\n    startNextColumnPxWidth?: number\n  ): void {\n    const canResizeNeighbor =\n      nextColumn !== undefined && startNextColumnPxWidth !== undefined;\n\n    if (canResizeNeighbor) {\n      const effectiveDelta = calculateEffectiveDelta(\n        deltaX,\n        column,\n        startColumnPxWidth,\n        nextColumn,\n        startNextColumnPxWidth\n      );\n\n      // set the width for the current column\n      this._setColumnWidth(\n        column,\n        Math.round(startColumnPxWidth + effectiveDelta)\n      );\n\n      // the actual new column width may differ from the intended width due to min/max constraints.\n      const actualNewColumnWidth = column.pxAppliedWidth ?? startColumnPxWidth;\n      const actualAppliedDelta = actualNewColumnWidth - startColumnPxWidth;\n\n      // set the width for the next sibling column\n      this._setColumnWidth(\n        nextColumn,\n        Math.round(startNextColumnPxWidth - actualAppliedDelta)\n      );\n\n      this._transientDelta = actualAppliedDelta;\n    } else {\n      column.setPxTransientWidth(Math.round(startColumnPxWidth + deltaX));\n    }\n  }\n\n  private _resize(event: PointerEvent): void {\n    if (this.resizing === null) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const { column } = this.args;\n    const { next: nextColumn } = column.siblings;\n    const { startX, startColumnPxWidth, startNextColumnPxWidth } =\n      this.resizing;\n    const deltaX = event.clientX - startX;\n\n    this._applyResizeDelta(\n      deltaX,\n      column,\n      startColumnPxWidth, // Width at the start of the drag\n      nextColumn,\n      startNextColumnPxWidth // Width of next col at the start of the drag\n    );\n  }\n\n  private _stopResize(): void {\n    const { column } = this.args;\n\n    window.removeEventListener('pointermove', this._boundResize);\n    window.removeEventListener('pointerup', this._boundStopResize);\n\n    this._setWidthDebts();\n\n    this._applyTransientWidths();\n\n    // reset the transient width\n    column.table.resetTransientColumnWidths();\n\n    // reset the resizing state\n    this.resizing = null;\n    this._transientDelta = 0;\n\n    this.onColumnResize(column.key, column.appliedWidth);\n  }\n\n  private _addDebt(\n    borrower: HdsAdvancedTableColumn,\n    lenderKey: string,\n    amount: number\n  ): void {\n    borrower.widthDebts = {\n      ...borrower.widthDebts,\n      [lenderKey]: (borrower.widthDebts[lenderKey] ?? 0) + amount,\n    };\n  }\n\n  private _setWidthDebts(): void {\n    const { column } = this.args;\n    const { next: nextColumn } = column.siblings;\n    const delta = this._transientDelta;\n\n    if (\n      delta === 0 ||\n      nextColumn === undefined ||\n      nextColumn.key === undefined ||\n      column.key === undefined\n    ) {\n      return;\n    }\n\n    // Determine the borrower, lender, and the amount of width transferred\n    const borrower = delta > 0 ? column : nextColumn;\n    const lender = delta > 0 ? nextColumn : column;\n    let amount = Math.abs(delta);\n\n    if (borrower.key === undefined || lender.key === undefined) {\n      return;\n    }\n\n    // Check if the lender already has a debt to the borrower.\n    // If so, this transaction is a \"payment\" against that existing debt.\n    const existingDebt = lender.widthDebts[borrower.key] ?? 0;\n\n    if (existingDebt > 0) {\n      const paymentAmount = Math.min(amount, existingDebt);\n\n      // Reduce the lender's debt by the payment amount\n      lender.widthDebts[borrower.key] = existingDebt - paymentAmount;\n\n      if (lender.widthDebts[borrower.key]! <= 0) {\n        delete lender.widthDebts[borrower.key];\n      }\n\n      // The amount of the new debt is reduced by the amount paid\n      amount = amount - paymentAmount;\n    }\n\n    // If there is still a remaining amount, create a new debt for the borrower.\n    if (amount > 0) {\n      this._addDebt(borrower, lender.key, amount);\n    }\n  }\n}\n"],"names":["TABLE_BORDER_WIDTH","KEYBOARD_RESIZE_STEP","calculateEffectiveDelta","deltaX","col","startColW","nextCol","startNextColW","colMin","pxMinWidth","colMax","pxMaxWidth","Infinity","nextMin","nextMax","effectiveDelta","maxCanExpandCol","maxCanShrinkNext","Math","min","max","absDeltaX","maxCanShrinkCol","maxCanExpandNext","HdsAdvancedTableThResizeHandle","Component","g","prototype","tracked","i","void 0","_handleElement","_boundResize","_boundStopResize","_registerHandleElement","modifier","element","constructor","owner","args","_resize","bind","_stopResize","height","tableHeight","undefined","classNames","classes","resizing","push","join","_applyTransientWidths","column","next","nextColumn","siblings","width","appliedWidth","onColumnResize","key","n","action","handleKeydown","event","validKeys","includes","preventDefault","stopPropagation","table","setTransientColumnWidths","roundValues","startColumnPxWidth","round","pxAppliedWidth","startNextColumnPxWidth","_applyResizeDelta","scrollIntoView","behavior","block","inline","queueMicrotask","_setWidthDebts","resetTransientColumnWidths","_transientDelta","startResize","button","startX","clientX","window","addEventListener","_setColumnWidth","pxTransientWidth","setPxTransientWidth","canResizeNeighbor","actualNewColumnWidth","actualAppliedDelta","removeEventListener","_addDebt","borrower","lenderKey","amount","widthDebts","delta","lender","abs","existingDebt","paymentAmount","setComponentTemplate","TEMPLATE"],"mappings":"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"}
+{"version":3,"file":"th-resize-handle.js","sources":["../../../../src/components/hds/advanced-table/th-resize-handle.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { modifier } from 'ember-modifier';\nimport { requestAnimationFrameWaiter } from './utils.ts';\nimport { BORDER_WIDTH } from './index.ts';\n\nimport type HdsAdvancedTableColumn from './models/column.ts';\nimport type { HdsAdvancedTableSignature } from './index.ts';\n\nconst KEYBOARD_RESIZE_STEP = 10;\n\nfunction calculateEffectiveDelta(\n  deltaX: number,\n  col: HdsAdvancedTableColumn,\n  startColW: number,\n  nextCol: HdsAdvancedTableColumn,\n  startNextColW: number\n): number {\n  const colMin = col.pxMinWidth ?? 0;\n  const colMax = col.pxMaxWidth ?? Infinity;\n  const nextMin = nextCol.pxMinWidth ?? 0;\n  const nextMax = nextCol.pxMaxWidth ?? Infinity;\n\n  let effectiveDelta = 0;\n\n  // expanding col, shrinking nextCol\n  if (deltaX > 0) {\n    const maxCanExpandCol = colMax - startColW;\n    const maxCanShrinkNext = startNextColW - nextMin;\n\n    effectiveDelta = Math.min(deltaX, maxCanExpandCol, maxCanShrinkNext);\n    effectiveDelta = Math.max(0, effectiveDelta);\n  }\n  // shrinking col, expanding nextCol\n  else if (deltaX < 0) {\n    const absDeltaX = -deltaX;\n    const maxCanShrinkCol = startColW - colMin;\n\n    let maxCanExpandNext: number;\n    if (startNextColW > nextMax) {\n      maxCanExpandNext = Infinity;\n    } else {\n      maxCanExpandNext = nextMax - startNextColW;\n    }\n\n    effectiveDelta = -Math.min(absDeltaX, maxCanShrinkCol, maxCanExpandNext);\n    effectiveDelta = Math.min(0, effectiveDelta);\n  }\n\n  return effectiveDelta;\n}\n\nexport interface HdsAdvancedTableThResizeHandleSignature {\n  Args: {\n    column: HdsAdvancedTableColumn;\n    tableHeight?: number;\n    onColumnResize?: HdsAdvancedTableSignature['Args']['onColumnResize'];\n  };\n  Blocks: {\n    default?: [];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsAdvancedTableThResizeHandle extends Component<HdsAdvancedTableThResizeHandleSignature> {\n  @tracked resizing: {\n    startX: number;\n    startColumnPxWidth: number;\n    startNextColumnPxWidth?: number;\n  } | null = null;\n  // track the width change as it is changing, applied when resizing stops\n  @tracked private _transientDelta: number = 0;\n  @tracked private _isUpdateQueued: boolean = false;\n  @tracked private _lastPointerEvent: PointerEvent | null = null;\n\n  private _handleElement!: HdsAdvancedTableThResizeHandleSignature['Element'];\n  private _boundResize: (event: PointerEvent) => void;\n  private _boundStopResize: () => void;\n\n  private _registerHandleElement = modifier(\n    (element: HdsAdvancedTableThResizeHandleSignature['Element']) => {\n      this._handleElement = element;\n    }\n  );\n\n  constructor(\n    owner: unknown,\n    args: HdsAdvancedTableThResizeHandleSignature['Args']\n  ) {\n    super(owner, args);\n\n    this._boundResize = this._resize.bind(this);\n    this._boundStopResize = this._stopResize.bind(this);\n  }\n\n  get height(): string | undefined {\n    const { tableHeight } = this.args;\n\n    if (tableHeight === undefined) {\n      return;\n    }\n\n    return `${tableHeight - BORDER_WIDTH * 2}px`;\n  }\n\n  get classNames(): string {\n    const classes = ['hds-advanced-table__th-resize-handle'];\n\n    if (this.resizing !== null) {\n      classes.push('hds-advanced-table__th-resize-handle--resizing');\n    }\n\n    return classes.join(' ');\n  }\n\n  private _applyTransientWidths() {\n    const { column } = this.args;\n    const { next: nextColumn } = column.siblings;\n\n    column.width = column.appliedWidth;\n\n    if (nextColumn !== undefined) {\n      nextColumn.width = nextColumn.appliedWidth;\n    }\n  }\n\n  @action\n  onColumnResize(key?: string, width?: string): void {\n    const { onColumnResize } = this.args;\n\n    if (typeof onColumnResize === 'function' && key !== undefined) {\n      onColumnResize(key, width);\n    }\n  }\n\n  @action\n  handleKeydown(event: KeyboardEvent): void {\n    const validKeys = ['ArrowLeft', 'ArrowRight'];\n\n    if (!validKeys.includes(event.key)) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { column } = this.args;\n    const { next: nextColumn } = column.siblings;\n\n    if (nextColumn === undefined) {\n      return;\n    }\n\n    column.table.setTransientColumnWidths({ roundValues: true });\n\n    const startColumnPxWidth = Math.round(column.pxAppliedWidth ?? 0);\n    const startNextColumnPxWidth = Math.round(nextColumn.pxAppliedWidth ?? 0);\n    const deltaX =\n      event.key === 'ArrowRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;\n\n    this._applyResizeDelta(\n      deltaX,\n      column,\n      startColumnPxWidth,\n      nextColumn,\n      startNextColumnPxWidth\n    );\n\n    // ensure the resize handle remains visible during keyboard navigation.\n    this._handleElement.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'nearest',\n    });\n\n    // use a microtask to commit the final state after the render pass.\n    queueMicrotask(() => {\n      // reset transient values\n      this._setWidthDebts();\n      this._applyTransientWidths();\n      column.table.resetTransientColumnWidths();\n      this._transientDelta = 0;\n\n      this.onColumnResize(column.key, column.width);\n    });\n  }\n\n  @action\n  startResize(event: PointerEvent): void {\n    if (event.button !== 0) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { column } = this.args;\n    const { next: nextColumn } = column.siblings;\n\n    column.table.setTransientColumnWidths();\n\n    this.resizing = {\n      startX: event.clientX,\n      startColumnPxWidth: Math.round(column.pxAppliedWidth ?? 0),\n      startNextColumnPxWidth: Math.round(nextColumn?.pxAppliedWidth ?? 0),\n    };\n\n    window.addEventListener('pointermove', this._boundResize);\n    window.addEventListener('pointerup', this._boundStopResize);\n  }\n\n  private _setColumnWidth(column: HdsAdvancedTableColumn, width: number): void {\n    if (width > column.pxMaxWidth || width < column.pxMinWidth) {\n      column.pxTransientWidth = width;\n    } else {\n      column.setPxTransientWidth(width);\n    }\n  }\n\n  private _applyResizeDelta(\n    deltaX: number,\n    column: HdsAdvancedTableColumn,\n    startColumnPxWidth: number,\n    nextColumn?: HdsAdvancedTableColumn,\n    startNextColumnPxWidth?: number\n  ): void {\n    const canResizeNeighbor =\n      nextColumn !== undefined && startNextColumnPxWidth !== undefined;\n\n    if (canResizeNeighbor) {\n      const effectiveDelta = calculateEffectiveDelta(\n        deltaX,\n        column,\n        startColumnPxWidth,\n        nextColumn,\n        startNextColumnPxWidth\n      );\n\n      // set the width for the current column\n      this._setColumnWidth(\n        column,\n        Math.round(startColumnPxWidth + effectiveDelta)\n      );\n\n      // the actual new column width may differ from the intended width due to min/max constraints.\n      const actualNewColumnWidth = column.pxAppliedWidth ?? startColumnPxWidth;\n      const actualAppliedDelta = actualNewColumnWidth - startColumnPxWidth;\n\n      // set the width for the next sibling column\n      this._setColumnWidth(\n        nextColumn,\n        Math.round(startNextColumnPxWidth - actualAppliedDelta)\n      );\n\n      this._transientDelta = actualAppliedDelta;\n    } else {\n      column.setPxTransientWidth(Math.round(startColumnPxWidth + deltaX));\n    }\n  }\n\n  private _resize(event: PointerEvent): void {\n    this._lastPointerEvent = event;\n\n    if (this._isUpdateQueued) {\n      return;\n    }\n\n    this._isUpdateQueued = true;\n\n    requestAnimationFrameWaiter(() => {\n      if (this.resizing === null || this._lastPointerEvent === null) {\n        this._isUpdateQueued = false;\n\n        return;\n      }\n\n      const event = this._lastPointerEvent;\n\n      event.preventDefault();\n\n      const { column } = this.args;\n      const { next: nextColumn } = column.siblings;\n      const { startX, startColumnPxWidth, startNextColumnPxWidth } =\n        this.resizing;\n      const deltaX = event.clientX - startX;\n\n      this._applyResizeDelta(\n        deltaX,\n        column,\n        startColumnPxWidth, // Width at the start of the drag\n        nextColumn,\n        startNextColumnPxWidth // Width of next col at the start of the drag\n      );\n\n      this._isUpdateQueued = false;\n    });\n  }\n\n  private _stopResize(): void {\n    const { column } = this.args;\n\n    window.removeEventListener('pointermove', this._boundResize);\n    window.removeEventListener('pointerup', this._boundStopResize);\n\n    this._setWidthDebts();\n\n    this._applyTransientWidths();\n\n    // reset the transient width\n    column.table.resetTransientColumnWidths();\n\n    // reset the resizing state\n    this.resizing = null;\n    this._transientDelta = 0;\n\n    this.onColumnResize(column.key, column.appliedWidth);\n  }\n\n  private _addDebt(\n    borrower: HdsAdvancedTableColumn,\n    lenderKey: string,\n    amount: number\n  ): void {\n    borrower.widthDebts = {\n      ...borrower.widthDebts,\n      [lenderKey]: (borrower.widthDebts[lenderKey] ?? 0) + amount,\n    };\n  }\n\n  private _setWidthDebts(): void {\n    const { column } = this.args;\n    const { next: nextColumn } = column.siblings;\n    const delta = this._transientDelta;\n\n    if (\n      delta === 0 ||\n      nextColumn === undefined ||\n      nextColumn.key === undefined ||\n      column.key === undefined\n    ) {\n      return;\n    }\n\n    // Determine the borrower, lender, and the amount of width transferred\n    const borrower = delta > 0 ? column : nextColumn;\n    const lender = delta > 0 ? nextColumn : column;\n    let amount = Math.abs(delta);\n\n    if (borrower.key === undefined || lender.key === undefined) {\n      return;\n    }\n\n    // Check if the lender already has a debt to the borrower.\n    // If so, this transaction is a \"payment\" against that existing debt.\n    const existingDebt = lender.widthDebts[borrower.key] ?? 0;\n\n    if (existingDebt > 0) {\n      const paymentAmount = Math.min(amount, existingDebt);\n\n      // Reduce the lender's debt by the payment amount\n      lender.widthDebts[borrower.key] = existingDebt - paymentAmount;\n\n      if (lender.widthDebts[borrower.key]! <= 0) {\n        delete lender.widthDebts[borrower.key];\n      }\n\n      // The amount of the new debt is reduced by the amount paid\n      amount = amount - paymentAmount;\n    }\n\n    // If there is still a remaining amount, create a new debt for the borrower.\n    if (amount > 0) {\n      this._addDebt(borrower, lender.key, amount);\n    }\n  }\n}\n"],"names":["KEYBOARD_RESIZE_STEP","calculateEffectiveDelta","deltaX","col","startColW","nextCol","startNextColW","colMin","pxMinWidth","colMax","pxMaxWidth","Infinity","nextMin","nextMax","effectiveDelta","maxCanExpandCol","maxCanShrinkNext","Math","min","max","absDeltaX","maxCanShrinkCol","maxCanExpandNext","HdsAdvancedTableThResizeHandle","Component","g","prototype","tracked","i","void 0","_handleElement","_boundResize","_boundStopResize","_registerHandleElement","modifier","element","constructor","owner","args","_resize","bind","_stopResize","height","tableHeight","undefined","BORDER_WIDTH","classNames","classes","resizing","push","join","_applyTransientWidths","column","next","nextColumn","siblings","width","appliedWidth","onColumnResize","key","n","action","handleKeydown","event","validKeys","includes","preventDefault","stopPropagation","table","setTransientColumnWidths","roundValues","startColumnPxWidth","round","pxAppliedWidth","startNextColumnPxWidth","_applyResizeDelta","scrollIntoView","behavior","block","inline","queueMicrotask","_setWidthDebts","resetTransientColumnWidths","_transientDelta","startResize","button","startX","clientX","window","addEventListener","_setColumnWidth","pxTransientWidth","setPxTransientWidth","canResizeNeighbor","actualNewColumnWidth","actualAppliedDelta","_lastPointerEvent","_isUpdateQueued","requestAnimationFrameWaiter","removeEventListener","_addDebt","borrower","lenderKey","amount","widthDebts","delta","lender","abs","existingDebt","paymentAmount","setComponentTemplate","TEMPLATE"],"mappings":"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"}

package/dist/components/hds/advanced-table/th-sort.js

@@ -11,7 +11,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { g, i, n } from 'decorator-transforms/runtime';
 import { setComponentTemplate } from '@ember/component';
 
-var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<div\n  class={{this.classNames}}\n  aria-sort={{this.ariaSort}}\n  role=\"columnheader\"\n  aria-rowspan={{@rowspan}}\n  aria-colspan={{@colspan}}\n  {{hds-advanced-table-cell\n    handleEnableFocusTrap=this.enableFocusTrap\n    shouldTrapFocus=this._shouldTrapFocus\n    setCellElement=this.setElement\n  }}\n  {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}\n  {{focus-trap\n    isActive=this._shouldTrapFocus\n    focusTrapOptions=(hash\n      onDeactivate=this.onFocusTrapDeactivate initialFocus=this.getInitialFocus clickOutsideDeactivates=true\n    )\n  }}\n  ...attributes\n>\n  <Hds::Layout::Flex @justify=\"space-between\" @align=\"center\" @gap=\"8\">\n    <div class=\"hds-advanced-table__th-content\">\n      <span\n        id={{this._labelId}}\n        class=\"hds-advanced-table__th-content-text hds-typography-body-200 hds-font-weight-semibold\"\n      >\n        {{yield}}\n      </span>\n\n      {{#if @tooltip}}\n        <Hds::AdvancedTable::ThButtonTooltip @tooltip={{@tooltip}} @labelId={{this._labelId}} />\n      {{/if}}\n    </div>\n\n    <Hds::Layout::Flex class=\"hds-advanced-table__th-actions\" @align=\"center\" @gap=\"8\">\n      <Hds::AdvancedTable::ThButtonSort\n        @sortOrder={{@sortOrder}}\n        @onClick={{@onClickSort}}\n        @labelId={{this._labelId}}\n      />\n\n      {{#if @column}}\n        {{#if this.showContextMenu}}\n          <Hds::AdvancedTable::ThContextMenu\n            @column={{@column}}\n            @isStickyColumn={{@isStickyColumn}}\n            @hasResizableColumns={{@hasResizableColumns}}\n            @resizeHandleElement={{this._resizeHandleElement}}\n            @onColumnResize={{@onColumnResize}}\n            @onPinFirstColumn={{@onPinFirstColumn}}\n          />\n        {{/if}}\n\n        {{#if (and @hasResizableColumns (not @column.isLast))}}\n          <Hds::AdvancedTable::ThResizeHandle\n            @column={{@column}}\n            @hasResizableColumns={{@hasResizableColumns}}\n            @tableHeight={{@tableHeight}}\n            @onColumnResize={{@onColumnResize}}\n            {{this._registerResizeHandleElement}}\n          />\n        {{/if}}\n      {{/if}}\n    </Hds::Layout::Flex>\n  </Hds::Layout::Flex>\n</div>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<div\n  class={{this.classNames}}\n  aria-sort={{this.ariaSort}}\n  role=\"columnheader\"\n  aria-rowspan={{@rowspan}}\n  aria-colspan={{@colspan}}\n  {{hds-advanced-table-cell\n    handleEnableFocusTrap=this.enableFocusTrap\n    shouldTrapFocus=this._shouldTrapFocus\n    setCellElement=this.setElement\n  }}\n  {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}\n  {{focus-trap\n    isActive=this._shouldTrapFocus\n    focusTrapOptions=(hash\n      onDeactivate=this.onFocusTrapDeactivate initialFocus=this.getInitialFocus clickOutsideDeactivates=true\n    )\n  }}\n  ...attributes\n>\n  <Hds::Layout::Flex @justify=\"space-between\" @align=\"center\" @gap=\"8\">\n    <div class=\"hds-advanced-table__th-content\">\n      <span\n        id={{this._labelId}}\n        class=\"hds-advanced-table__th-content-text hds-typography-body-200 hds-font-weight-semibold\"\n      >\n        {{yield}}\n      </span>\n\n      {{#if @tooltip}}\n        <Hds::AdvancedTable::ThButtonTooltip @tooltip={{@tooltip}} @labelId={{this._labelId}} />\n      {{/if}}\n    </div>\n\n    <Hds::Layout::Flex class=\"hds-advanced-table__th-actions\" @align=\"center\" @gap=\"8\">\n      <Hds::AdvancedTable::ThButtonSort\n        @sortOrder={{@sortOrder}}\n        @onClick={{@onClickSort}}\n        @labelId={{this._labelId}}\n      />\n\n      {{#if @column}}\n        <Hds::AdvancedTable::ThContextMenu\n          @column={{@column}}\n          @hasReorderableColumns={{@hasReorderableColumns}}\n          @hasResizableColumns={{@hasResizableColumns}}\n          @isStickyColumn={{@isStickyColumn}}\n          @reorderHandleElement={{this._reorderHandleElement}}\n          @resizeHandleElement={{this._resizeHandleElement}}\n          @onColumnResize={{@onColumnResize}}\n          @onPinFirstColumn={{@onPinFirstColumn}}\n        />\n\n        {{#if (and @hasReorderableColumns (not @isStickyColumn))}}\n          <Hds::AdvancedTable::ThReorderHandle\n            @column={{@column}}\n            @tableHeight={{@tableHeight}}\n            @onReorderDragStart={{this.handleDragStart}}\n            @onReorderDragEnd={{@onReorderDragEnd}}\n            {{this._registerReorderHandleElement}}\n          />\n        {{/if}}\n\n        {{#if (and @hasResizableColumns (not @column.isLast) (not @column.table.hasColumnBeingDragged))}}\n          <Hds::AdvancedTable::ThResizeHandle\n            @column={{@column}}\n            @tableHeight={{@tableHeight}}\n            @onColumnResize={{@onColumnResize}}\n            {{this._registerResizeHandleElement}}\n          />\n        {{/if}}\n      {{/if}}\n    </Hds::Layout::Flex>\n  </Hds::Layout::Flex>\n\n  {{#if @column}}\n    {{#if (and @column.table.hasColumnBeingDragged (not @isStickyColumn))}}\n      <Hds::AdvancedTable::ThReorderDropTarget\n        @column={{@column}}\n        @hasSelectableRows={{@hasSelectableRows}}\n        @tableHeight={{@tableHeight}}\n        @onReorderDrop={{@onReorderDrop}}\n      />\n    {{/if}}\n  {{/if}}\n</div>");
 
 /**
  * Copyright (c) HashiCorp, Inc.
@@ -29,6 +29,10 @@ class HdsAdvancedTableThSort extends Component {
     });
   }
   #_shouldTrapFocus = (i(this, "_shouldTrapFocus"), void 0);
+  static {
+    g(this.prototype, "_reorderHandleElement", [tracked]);
+  }
+  #_reorderHandleElement = (i(this, "_reorderHandleElement"), void 0);
   static {
     g(this.prototype, "_resizeHandleElement", [tracked]);
   }
@@ -62,13 +66,6 @@ class HdsAdvancedTableThSort extends Component {
     assert(`@align for "Hds::Table" must be one of the following: ${ALIGNMENTS.join(', ')}; received: ${align}`, ALIGNMENTS.includes(align));
     return align;
   }
-  get showContextMenu() {
-    const {
-      hasResizableColumns,
-      isStickyColumn
-    } = this.args;
-    return (hasResizableColumns || isStickyColumn !== undefined) ?? false;
-  }
   get classNames() {
     const classes = ['hds-advanced-table__th', 'hds-advanced-table__th--sort'];
 
@@ -82,8 +79,17 @@ class HdsAdvancedTableThSort extends Component {
     if (this.args.isStickyColumn && this.args.isStickyColumnPinned) {
       classes.push('hds-advanced-table__th--is-sticky-column-pinned');
     }
+    if (this.args.column?.isBeingDragged) {
+      classes.push('hds-advanced-table__th--is-being-dragged');
+    }
     return classes.join(' ');
   }
+  handleDragStart(column) {
+    this.args.onReorderDragStart?.(column);
+  }
+  static {
+    n(this.prototype, "handleDragStart", [action]);
+  }
   onFocusTrapDeactivate() {
     this._shouldTrapFocus = false;
     onFocusTrapDeactivate(this._element);
@@ -106,10 +112,16 @@ class HdsAdvancedTableThSort extends Component {
   }
   setElement(element) {
     this._element = element;
+    if (this.args.column !== undefined) {
+      this.args.column.thElement = element;
+    }
   }
   static {
     n(this.prototype, "setElement", [action]);
   }
+  _registerReorderHandleElement = modifier(element => {
+    this._reorderHandleElement = element;
+  });
   _registerResizeHandleElement = modifier(element => {
     this._resizeHandleElement = element;
   });

package/dist/components/hds/advanced-table/th-sort.js.map

@@ -1 +1 @@
-{"version":3,"file":"th-sort.js","sources":["../../../../src/components/hds/advanced-table/th-sort.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { guidFor } from '@ember/object/internals';\nimport { assert } from '@ember/debug';\nimport { action } from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\nimport { focusable, type FocusableElement } from 'tabbable';\nimport type Owner from '@ember/owner';\nimport { modifier } from 'ember-modifier';\n\nimport {\n  HdsAdvancedTableHorizontalAlignmentValues,\n  HdsAdvancedTableThSortOrderValues,\n  HdsAdvancedTableThSortOrderLabelValues,\n} from './types.ts';\nimport type {\n  HdsAdvancedTableHorizontalAlignment,\n  HdsAdvancedTableThSortOrder,\n  HdsAdvancedTableThSortOrderLabels,\n} from './types.ts';\nimport type { HdsAdvancedTableThButtonSortSignature } from './th-button-sort.ts';\nimport { onFocusTrapDeactivate } from '../../../modifiers/hds-advanced-table-cell/dom-management.ts';\nimport type { HdsAdvancedTableThSignature } from './th.ts';\nimport type { HdsAdvancedTableSignature } from './index.ts';\nimport type { HdsAdvancedTableThResizeHandleSignature } from './th-resize-handle.ts';\n\nexport const ALIGNMENTS: string[] = Object.values(\n  HdsAdvancedTableHorizontalAlignmentValues\n);\nexport const DEFAULT_ALIGN = HdsAdvancedTableHorizontalAlignmentValues.Left;\n\nexport interface HdsAdvancedTableThSortSignature {\n  Args: {\n    column?: HdsAdvancedTableThSignature['Args']['column'];\n    align?: HdsAdvancedTableHorizontalAlignment;\n    hasResizableColumns?: HdsAdvancedTableSignature['Args']['hasResizableColumns'];\n    onClickSort?: HdsAdvancedTableThButtonSortSignature['Args']['onClick'];\n    sortOrder?: HdsAdvancedTableThSortOrder;\n    tooltip?: string;\n    rowspan?: number;\n    colspan?: number;\n    tableHeight?: number;\n    isStickyColumn?: boolean;\n    isStickyColumnPinned?: boolean;\n    onColumnResize?: HdsAdvancedTableSignature['Args']['onColumnResize'];\n    onPinFirstColumn?: () => void;\n  };\n  Blocks: {\n    default?: [];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsAdvancedTableThSort extends Component<HdsAdvancedTableThSortSignature> {\n  private _labelId = guidFor(this);\n  private _element!: HTMLDivElement;\n\n  @tracked private _shouldTrapFocus = false;\n  @tracked\n  private _resizeHandleElement?: HdsAdvancedTableThResizeHandleSignature['Element'];\n\n  constructor(owner: Owner, args: HdsAdvancedTableThSortSignature['Args']) {\n    super(owner, args);\n\n    const { rowspan, colspan, isStickyColumn } = args;\n\n    if (isStickyColumn) {\n      assert(\n        'Cannot have custom rowspan or colspan if there are nested rows.',\n        rowspan === undefined || colspan === undefined\n      );\n    }\n  }\n\n  get ariaSort(): HdsAdvancedTableThSortOrderLabels {\n    switch (this.args.sortOrder) {\n      case HdsAdvancedTableThSortOrderValues.Asc:\n        return HdsAdvancedTableThSortOrderLabelValues.Asc;\n      case HdsAdvancedTableThSortOrderValues.Desc:\n        return HdsAdvancedTableThSortOrderLabelValues.Desc;\n      default:\n        // none is the default per the spec.\n        return HdsAdvancedTableThSortOrderLabelValues.None;\n    }\n  }\n\n  get align(): HdsAdvancedTableHorizontalAlignment {\n    const { align = DEFAULT_ALIGN } = this.args;\n\n    assert(\n      `@align for \"Hds::Table\" must be one of the following: ${ALIGNMENTS.join(\n        ', '\n      )}; received: ${align}`,\n      ALIGNMENTS.includes(align)\n    );\n    return align;\n  }\n\n  get showContextMenu(): boolean {\n    const { hasResizableColumns, isStickyColumn } = this.args;\n\n    return (hasResizableColumns || isStickyColumn !== undefined) ?? false;\n  }\n\n  get classNames(): string {\n    const classes = ['hds-advanced-table__th', 'hds-advanced-table__th--sort'];\n\n    // add a class based on the @align argument\n    if (this.align) {\n      classes.push(`hds-advanced-table__th--align-${this.align}`);\n    }\n\n    if (this.args.isStickyColumn) {\n      classes.push('hds-advanced-table__th--is-sticky-column');\n    }\n\n    if (this.args.isStickyColumn && this.args.isStickyColumnPinned) {\n      classes.push('hds-advanced-table__th--is-sticky-column-pinned');\n    }\n\n    return classes.join(' ');\n  }\n\n  @action onFocusTrapDeactivate(): void {\n    this._shouldTrapFocus = false;\n    onFocusTrapDeactivate(this._element);\n  }\n\n  @action enableFocusTrap(): void {\n    this._shouldTrapFocus = true;\n  }\n\n  @action getInitialFocus(): FocusableElement | undefined {\n    const cellFocusableElements = focusable(this._element);\n    return cellFocusableElements[0];\n  }\n\n  @action setElement(element: HTMLDivElement): void {\n    this._element = element;\n  }\n\n  private _registerResizeHandleElement = modifier(\n    (element: HdsAdvancedTableThResizeHandleSignature['Element']) => {\n      this._resizeHandleElement = element;\n    }\n  );\n}\n"],"names":["ALIGNMENTS","Object","values","HdsAdvancedTableHorizontalAlignmentValues","DEFAULT_ALIGN","Left","HdsAdvancedTableThSort","Component","_labelId","guidFor","_element","g","prototype","tracked","i","void 0","constructor","owner","args","rowspan","colspan","isStickyColumn","assert","undefined","ariaSort","sortOrder","HdsAdvancedTableThSortOrderValues","Asc","HdsAdvancedTableThSortOrderLabelValues","Desc","None","align","join","includes","showContextMenu","hasResizableColumns","classNames","classes","push","isStickyColumnPinned","onFocusTrapDeactivate","_shouldTrapFocus","n","action","enableFocusTrap","getInitialFocus","cellFocusableElements","focusable","setElement","element","_registerResizeHandleElement","modifier","_resizeHandleElement","setComponentTemplate","TEMPLATE"],"mappings":"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"}
+{"version":3,"file":"th-sort.js","sources":["../../../../src/components/hds/advanced-table/th-sort.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { guidFor } from '@ember/object/internals';\nimport { assert } from '@ember/debug';\nimport { action } from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\nimport { focusable, type FocusableElement } from 'tabbable';\nimport type Owner from '@ember/owner';\nimport { modifier } from 'ember-modifier';\n\nimport {\n  HdsAdvancedTableHorizontalAlignmentValues,\n  HdsAdvancedTableThSortOrderValues,\n  HdsAdvancedTableThSortOrderLabelValues,\n} from './types.ts';\nimport type {\n  HdsAdvancedTableHorizontalAlignment,\n  HdsAdvancedTableThSortOrder,\n  HdsAdvancedTableThSortOrderLabels,\n  HdsAdvancedTableColumnReorderSide,\n} from './types.ts';\nimport type { HdsAdvancedTableThReorderHandleSignature } from './th-reorder-handle.ts';\nimport type { HdsAdvancedTableThButtonSortSignature } from './th-button-sort.ts';\nimport { onFocusTrapDeactivate } from '../../../modifiers/hds-advanced-table-cell/dom-management.ts';\nimport type { HdsAdvancedTableThSignature } from './th.ts';\nimport type { HdsAdvancedTableSignature } from './index.ts';\nimport type { HdsAdvancedTableThResizeHandleSignature } from './th-resize-handle.ts';\nimport type HdsAdvancedTableColumn from './models/column.ts';\n\nexport const ALIGNMENTS: HdsAdvancedTableHorizontalAlignment[] = Object.values(\n  HdsAdvancedTableHorizontalAlignmentValues\n);\nexport const DEFAULT_ALIGN = HdsAdvancedTableHorizontalAlignmentValues.Left;\n\nexport interface HdsAdvancedTableThSortSignature {\n  Args: {\n    column?: HdsAdvancedTableThSignature['Args']['column'];\n    align?: HdsAdvancedTableHorizontalAlignment;\n    hasReorderableColumns?: HdsAdvancedTableSignature['Args']['hasReorderableColumns'];\n    hasResizableColumns?: HdsAdvancedTableSignature['Args']['hasResizableColumns'];\n    hasSelectableRows?: HdsAdvancedTableSignature['Args']['isSelectable'];\n    onClickSort?: HdsAdvancedTableThButtonSortSignature['Args']['onClick'];\n    sortOrder?: HdsAdvancedTableThSortOrder;\n    tooltip?: string;\n    rowspan?: number;\n    colspan?: number;\n    tableHeight?: number;\n    isStickyColumn?: boolean;\n    isStickyColumnPinned?: boolean;\n    onColumnResize?: HdsAdvancedTableSignature['Args']['onColumnResize'];\n    onPinFirstColumn?: () => void;\n    onReorderDragEnd?: () => void;\n    onReorderDragStart?: (column: HdsAdvancedTableColumn) => void;\n    onReorderDrop?: (\n      column: HdsAdvancedTableColumn,\n      side: HdsAdvancedTableColumnReorderSide\n    ) => void;\n  };\n  Blocks: {\n    default?: [];\n  };\n  Element: HTMLDivElement;\n}\n\nexport default class HdsAdvancedTableThSort extends Component<HdsAdvancedTableThSortSignature> {\n  private _labelId = guidFor(this);\n  private _element!: HTMLDivElement;\n\n  @tracked private _shouldTrapFocus = false;\n  @tracked\n  private _reorderHandleElement?: HdsAdvancedTableThReorderHandleSignature['Element'];\n  @tracked\n  private _resizeHandleElement?: HdsAdvancedTableThResizeHandleSignature['Element'];\n\n  constructor(owner: Owner, args: HdsAdvancedTableThSortSignature['Args']) {\n    super(owner, args);\n\n    const { rowspan, colspan, isStickyColumn } = args;\n\n    if (isStickyColumn) {\n      assert(\n        'Cannot have custom rowspan or colspan if there are nested rows.',\n        rowspan === undefined || colspan === undefined\n      );\n    }\n  }\n\n  get ariaSort(): HdsAdvancedTableThSortOrderLabels {\n    switch (this.args.sortOrder) {\n      case HdsAdvancedTableThSortOrderValues.Asc:\n        return HdsAdvancedTableThSortOrderLabelValues.Asc;\n      case HdsAdvancedTableThSortOrderValues.Desc:\n        return HdsAdvancedTableThSortOrderLabelValues.Desc;\n      default:\n        // none is the default per the spec.\n        return HdsAdvancedTableThSortOrderLabelValues.None;\n    }\n  }\n\n  get align(): HdsAdvancedTableHorizontalAlignment {\n    const { align = DEFAULT_ALIGN } = this.args;\n\n    assert(\n      `@align for \"Hds::Table\" must be one of the following: ${ALIGNMENTS.join(\n        ', '\n      )}; received: ${align}`,\n      ALIGNMENTS.includes(align)\n    );\n    return align;\n  }\n\n  get classNames(): string {\n    const classes = ['hds-advanced-table__th', 'hds-advanced-table__th--sort'];\n\n    // add a class based on the @align argument\n    if (this.align) {\n      classes.push(`hds-advanced-table__th--align-${this.align}`);\n    }\n\n    if (this.args.isStickyColumn) {\n      classes.push('hds-advanced-table__th--is-sticky-column');\n    }\n\n    if (this.args.isStickyColumn && this.args.isStickyColumnPinned) {\n      classes.push('hds-advanced-table__th--is-sticky-column-pinned');\n    }\n\n    if (this.args.column?.isBeingDragged) {\n      classes.push('hds-advanced-table__th--is-being-dragged');\n    }\n\n    return classes.join(' ');\n  }\n\n  @action\n  handleDragStart(column: HdsAdvancedTableColumn): void {\n    this.args.onReorderDragStart?.(column);\n  }\n\n  @action onFocusTrapDeactivate(): void {\n    this._shouldTrapFocus = false;\n    onFocusTrapDeactivate(this._element);\n  }\n\n  @action enableFocusTrap(): void {\n    this._shouldTrapFocus = true;\n  }\n\n  @action getInitialFocus(): FocusableElement | undefined {\n    const cellFocusableElements = focusable(this._element);\n    return cellFocusableElements[0];\n  }\n\n  @action setElement(element: HTMLDivElement): void {\n    this._element = element;\n\n    if (this.args.column !== undefined) {\n      this.args.column.thElement = element;\n    }\n  }\n\n  private _registerReorderHandleElement = modifier(\n    (element: HdsAdvancedTableThReorderHandleSignature['Element']) => {\n      this._reorderHandleElement = element;\n    }\n  );\n\n  private _registerResizeHandleElement = modifier(\n    (element: HdsAdvancedTableThResizeHandleSignature['Element']) => {\n      this._resizeHandleElement = element;\n    }\n  );\n}\n"],"names":["ALIGNMENTS","Object","values","HdsAdvancedTableHorizontalAlignmentValues","DEFAULT_ALIGN","Left","HdsAdvancedTableThSort","Component","_labelId","guidFor","_element","g","prototype","tracked","i","void 0","constructor","owner","args","rowspan","colspan","isStickyColumn","assert","undefined","ariaSort","sortOrder","HdsAdvancedTableThSortOrderValues","Asc","HdsAdvancedTableThSortOrderLabelValues","Desc","None","align","join","includes","classNames","classes","push","isStickyColumnPinned","column","isBeingDragged","handleDragStart","onReorderDragStart","n","action","onFocusTrapDeactivate","_shouldTrapFocus","enableFocusTrap","getInitialFocus","cellFocusableElements","focusable","setElement","element","thElement","_registerReorderHandleElement","modifier","_reorderHandleElement","_registerResizeHandleElement","_resizeHandleElement","setComponentTemplate","TEMPLATE"],"mappings":"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"}