wcs-core 4.2.0 → 5.0.0

package/dist/esm/wcs-grid.entry.js

@@ -1,6 +1,7 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-dc4d96d4.js';
-import { G as GridPagination } from './grid-pagination-41354861.js';
-import { i as isObjectLike, b as baseGetTag, a as isArray, S as Symbol, c as isObject, g as getNative, e as eq, d as isPrototype, f as isArrayLike, h as arrayLikeKeys, M as MapCache, o as overArg, k as keys, r as root, j as getSymbols, s as stubArray, l as arrayPush, m as baseGetAllKeys, U as Uint8Array$1, n as getTag, p as baseUnary, q as nodeUtil, t as isBuffer, u as Stack, v as getAllKeys, w as isEqual } from './isEqual-20881bca.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-4f282598.js';
+import { G as GridPagination } from './grid-pagination-f7b01e2e.js';
+import { i as isObjectLike, b as baseGetTag, a as isArray, S as Symbol, c as isObject, g as getNative, e as eq, d as isPrototype, f as isArrayLike, h as arrayLikeKeys, M as MapCache, o as overArg, k as keys, r as root, j as getSymbols, s as stubArray, l as arrayPush, m as baseGetAllKeys, U as Uint8Array$1, n as getTag, p as baseUnary, q as nodeUtil, t as isBuffer, u as Stack, v as getAllKeys, w as keyboardShortcutFromKeyboardEvent, x as isEqual } from './keyboard-event-ba3d20e7.js';
+import './helpers-a21ae7d0.js';
 
 function getSortOrderInteger(sortOrder) {
   switch (sortOrder) {
@@ -1176,7 +1177,51 @@ function cloneDeep(value) {
   return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);
 }
 
-const gridCss = ":host{display:block;--wcs-grid-highlight-color:var(--wcs-light)}:host th{background-color:var(--wcs-light)}:host th:not(:first-child){border-left:solid 1px var(--wcs-text-light)}:host ::slotted([slot=grid-column]:first-child){--wcs-grid-column-border-left:none}:host table{width:100%;border-spacing:0}:host td{color:var(--wcs-gray-light);margin:0;padding:calc(var(--wcs-padding) / 2) var(--wcs-padding)}:host tr:not(:last-child) td{border-bottom:solid 1px var(--wcs-text-light)}:host .wcs-grid-selection-column{padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);width:40px}:host tr.selected{background-color:var(--wcs-grid-highlight-color)}:host .loading{text-align:center}:host([selection]) ::slotted([slot=grid-column]:first-child){--wcs-grid-column-border-left:solid 1px var(--wcs-text-light) !important}";
+/**
+ * We follow this https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+ * @param event
+ * @param type
+ */
+function getActionForKeyboardEvent(event, type) {
+  const keyboardShortcut = keyboardShortcutFromKeyboardEvent(event);
+  if (keyboardShortcut === 'UNKNOWN') {
+    return [];
+  }
+  switch (keyboardShortcut) {
+    case "UP_ARROW":
+      return [{ kind: 'FocusCell', target: 'up' }];
+    case "DOWN_ARROW":
+      return [{ kind: 'FocusCell', target: 'down' }];
+    case "LEFT_ARROW":
+      return [{ kind: 'FocusCell', target: 'left' }];
+    case "RIGHT_ARROW":
+      return [{ kind: 'FocusCell', target: 'right' }];
+    case "HOME":
+      return [{ kind: 'FocusCell', target: 'first_of_row' }];
+    case "END":
+      return [{ kind: 'FocusCell', target: 'last_of_row' }];
+    case "MAJ+SPACE":
+      switch (type) {
+        case "grid_selection_single":
+        case "grid_selection_multiple":
+          return [{ kind: 'SelectRow', target: 'one' }];
+      }
+      break;
+    case "CTRL+A":
+      switch (type) {
+        case "grid_selection_multiple":
+          return [{ kind: 'SelectRow', target: 'all' }];
+      }
+      break;
+    case "CTRL+HOME":
+      return [{ kind: 'FocusCell', target: 'first_of_grid' }];
+    case "CTRL+END":
+      return [{ kind: 'FocusCell', target: 'last_of_grid' }];
+  }
+  return [];
+}
+
+const gridCss = ":host{display:block;--wcs-grid-highlight-color:var(--wcs-light)}:host th{background-color:var(--wcs-light)}:host th:not(:first-child){border-left:solid 1px var(--wcs-text-light)}:host ::slotted([slot=grid-column]:first-child){--wcs-grid-column-border-left:none}:host table{width:100%;border-spacing:0}:host td{color:var(--wcs-gray-light);margin:0;padding:calc(var(--wcs-padding) / 2) var(--wcs-padding)}:host td:focus-visible{outline:2px dashed var(--wcs-primary);outline-offset:0;border-radius:0.1rem}:host tr:not(:last-child) td{border-bottom:solid 1px var(--wcs-text-light)}:host .wcs-grid-selection-column{padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);width:40px}:host tr.selected{background-color:var(--wcs-grid-highlight-color)}:host .loading{text-align:center}:host([selection]) ::slotted([slot=grid-column]:first-child){--wcs-grid-column-border-left:solid 1px var(--wcs-text-light) !important}";
 
 const Grid = class {
   constructor(hostRef) {
@@ -1193,6 +1238,11 @@ const Grid = class {
     this.columns = undefined;
     this.paginationEl = undefined;
     this.rows = [];
+    this.cursorPosition = { col: 0, row: 1 };
+  }
+  onCursorPositionChange(newValue) {
+    // Notify all grid columns that the cursorPosition has changed
+    this.getGridColumnsFromTemplate().forEach(g => g.cursorPosition = newValue);
   }
   onDataChange(newValue) {
     this.updateGridRows(newValue);
@@ -1201,10 +1251,141 @@ const Grid = class {
   onSelectedItemsPropertyChange(newValue) {
     this.updateSelectionWithValues(newValue);
   }
+  onFocus() {
+    var _a;
+    (_a = this.getElementToFocusAtCursorPosition()) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  /**
+   * If selectionConfig is different from `none`, that means that an extra column for radio or checkbox is rendered
+   * in the table.
+   */
+  hasSelectionColumn() {
+    return this.selectionConfig !== 'none';
+  }
+  /**
+   * Returns the element to focus at the current cursor position : it can be a cell (td, th) to focus or a nested
+   * checkbox / radio element if the selection mode is single or multiple
+   */
+  getElementToFocusAtCursorPosition() {
+    var _a, _b;
+    const el = (_a = this.gridElementsWithCoordinates.find(cell => { var _a, _b; return cell.col === ((_a = this.cursorPosition) === null || _a === void 0 ? void 0 : _a.col) && cell.row === ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.row); })) === null || _a === void 0 ? void 0 : _a.el;
+    return this.hasSelectionColumn()
+      ? (_b = el.querySelector('wcs-checkbox,wcs-radio')) !== null && _b !== void 0 ? _b : el
+      : el;
+  }
+  moveCursorPosition(directionX, directionY) {
+    var _a;
+    this.cursorPosition = {
+      col: directionX === 'first' ? 0 :
+        directionX === 'last' ? this.totalDisplayedColumnCount() - 1 :
+          Math.min(Math.max(this.cursorPosition.col + directionX, 0), this.totalDisplayedColumnCount() - 1),
+      row: directionY === 'first' ? 0 :
+        directionY === 'last' ? this.getRowsForCurrentPage().length :
+          Math.min(Math.max(this.cursorPosition.row + directionY, 0), this.getRowsForCurrentPage().length)
+    };
+    this.handleCursorPositionOnEmptyTh();
+    (_a = this.getElementToFocusAtCursorPosition()) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  /**
+   * When the grid has selectionConfig single, an empty th appears at col=0, row=0.
+   * It should not be focusable so the cursor navigates to col=1, row=0 instead.
+   */
+  handleCursorPositionOnEmptyTh() {
+    if (this.selectionConfig === 'single' && this.cursorPosition.col === 0 && this.cursorPosition.row === 0) {
+      this.cursorPosition = {
+        col: 1,
+        row: 0
+      };
+    }
+  }
   onHiddenColumnChange() {
     // We use forceUpdate because the fact of hiding a column or not does not modify the internal structure of the grid (WcsGridRow).
     // Hide a column only impacts the way it is rendered but the grid-column remains in the dom and in our internal model.
     forceUpdate(this);
+    this.cursorPosition = { col: 0, row: 1 };
+  }
+  onKeyDown(_event) {
+    var _a;
+    if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName) === 'WCS-GRID-PAGINATION') {
+      return;
+    }
+    let type;
+    switch (this.selectionConfig) {
+      case "multiple":
+        type = 'grid_selection_multiple';
+        break;
+      case "single":
+        type = 'grid_selection_single';
+        break;
+      case "none":
+        type = 'grid_no_selection';
+        break;
+    }
+    const actionsFromKeyboardEvents = getActionForKeyboardEvent(_event, type);
+    // If we have at least one associated actions, we prevent the default behavior of the event. 
+    // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)
+    if (actionsFromKeyboardEvents.length != 0) {
+      _event.preventDefault();
+    }
+    for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {
+      this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent, _event);
+    }
+  }
+  doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent, event) {
+    switch (actionFromKeyboardEvent.kind) {
+      case "FocusCell":
+        switch (actionFromKeyboardEvent.target) {
+          case "up":
+            this.moveCursorPosition(0, -1);
+            break;
+          case "down":
+            this.moveCursorPosition(0, 1);
+            break;
+          case "left":
+            this.moveCursorPosition(-1, 0);
+            break;
+          case "right":
+            this.moveCursorPosition(1, 0);
+            break;
+          case "first_of_row":
+            this.moveCursorPosition('first', 0);
+            break;
+          case "last_of_row":
+            this.moveCursorPosition('last', 0);
+            break;
+          case "first_of_grid":
+            this.moveCursorPosition('first', 'first');
+            break;
+          case "last_of_grid":
+            this.moveCursorPosition('last', 'last');
+            break;
+        }
+      case "SelectRow":
+        switch (actionFromKeyboardEvent.target) {
+          case "one":
+            event.preventDefault();
+            if (this.cursorPosition.row > 0) {
+              this.onRowSelection(this.rows[this.cursorPosition.row - 1]);
+            }
+            break;
+          case "all":
+            this.selectAllRows();
+            break;
+        }
+        break;
+      default:
+        throw new Error("Internal error");
+    }
+  }
+  onClick(_event) {
+    const clickedGridElement = _event.composedPath()
+      .filter(x => ['TD', 'TH']
+      .includes(x.nodeName))[0];
+    const clickedGridElementWithCoordinates = this.gridElementsWithCoordinates.find(e => e.el === clickedGridElement);
+    this.cursorPosition = {
+      col: clickedGridElementWithCoordinates.col,
+      row: clickedGridElementWithCoordinates.row,
+    };
   }
   updateSelectionWithValues(values) {
     if (this.selectionConfig === 'single') {
@@ -1240,7 +1421,10 @@ const Grid = class {
           selected: false,
           cells: []
         };
+        let index = 0;
         for (const column of this.columns) {
+          column.columnPosition = index + (this.hasSelectionColumn() ? 1 : 0);
+          index++;
           row.cells.push({
             content: get(data[i], column.path),
             column,
@@ -1268,14 +1452,14 @@ const Grid = class {
    * Handle existing column's filters (defined before the grid is instantiated)
    * @private
    */
-  refreshSort(refreshOthersColmumnsSortOrderState) {
+  refreshSort(refreshOthersColumnsSortOrderState) {
     //fixme: why the column property can be null or undefined?
     if (this.columns) {
       const [first, ...other] = this.columns.filter(c => c.sortOrder !== 'none');
       if (first && !this.serverMode) {
         this.sortBy(first);
       }
-      refreshOthersColmumnsSortOrderState && this.disableSortOrderForColumns(other);
+      refreshOthersColumnsSortOrderState && this.disableSortOrderForColumns(other);
     }
   }
   disableSortOrderForColumns(columns) {
@@ -1289,6 +1473,34 @@ const Grid = class {
     const slotted = this.el.shadowRoot.querySelector('slot[name="grid-pagination"]');
     return slotted.assignedElements();
   }
+  get gridElementsWithCoordinates() {
+    const gridElements = [];
+    // If selection multiple, the first cell should be added to the list
+    if (this.selectionConfig === 'multiple') {
+      gridElements.push({
+        el: this.el.shadowRoot.querySelector('th'),
+        row: 0,
+        col: 0
+      });
+    }
+    this.getGridColumnsFromTemplate()
+      .filter(col => !col.hidden)
+      .forEach((col, index) => {
+      gridElements.push({
+        el: col.shadowRoot.querySelector('th'),
+        row: 0,
+        col: index + (this.hasSelectionColumn() ? 1 : 0),
+      });
+    });
+    this.el.shadowRoot.querySelectorAll('td').forEach((cell, index) => {
+      gridElements.push({
+        el: cell,
+        row: 1 + Math.floor(index / this.totalDisplayedColumnCount()),
+        col: index % this.totalDisplayedColumnCount(),
+      });
+    });
+    return gridElements;
+  }
   sortChangeEventHandler(event) {
     if (event.detail.order === 'none')
       return;
@@ -1301,19 +1513,19 @@ const Grid = class {
   }
   /**
    * Sorts the grid rows according to the given column's configuration
-   * @param colmun Column from which to extract the sorting configuration
+   * @param column Column from which to extract the sorting configuration
    * @private
    */
-  sortBy(colmun) {
-    if (colmun.sortFn) {
+  sortBy(column) {
+    if (column.sortFn) {
       this.rows = cloneDeep(this.rows)
-        .sort((a, b) => colmun.sortFn(a.data, b.data, colmun) * getSortOrderInteger(colmun.sortOrder));
+        .sort((a, b) => column.sortFn(a.data, b.data, column) * getSortOrderInteger(column.sortOrder));
     }
     else {
       this.rows = cloneDeep(this.rows)
         .sort((a, b) => {
-        const path = colmun.path;
-        return ((get(a.data, path) < get(b.data, path)) ? -1 : (get(a.data, path) > get(b.data, path)) ? 1 : 0) * getSortOrderInteger(colmun.sortOrder);
+        const path = column.path;
+        return ((get(a.data, path) < get(b.data, path)) ? -1 : (get(a.data, path) > get(b.data, path)) ? 1 : 0) * getSortOrderInteger(column.sortOrder);
       });
     }
   }
@@ -1354,15 +1566,25 @@ const Grid = class {
     }
     row.selected = !row.selected;
     if (this.selectionConfig !== 'single' || row.selected) {
-      this.wcsGridSelectionChange.emit({ row: this.wcsGridRowToWcsGridRowData(row) });
+      this.wcsGridSelectionChange.emit({
+        selectedRows: this.selectedRows.map(row => this.wcsGridRowToWcsGridRowData(row)),
+        changedRow: this.wcsGridRowToWcsGridRowData(row)
+      });
     }
     this.rows = cloneDeep(this.rows);
   }
+  get selectedRows() {
+    return this.rows.filter(r => r.selected);
+  }
   selectAllRows() {
     const rows = this.getRowsForCurrentPage();
     const selected = !this.allRowsAreSelected();
     rows.map(r => r.selected = selected);
     this.wcsGridAllSelectionChange.emit({ rows: selected ? rows.map(row => this.wcsGridRowToWcsGridRowData(row)) : [] });
+    this.wcsGridSelectionChange.emit({
+      selectedRows: this.selectedRows.map(row => this.wcsGridRowToWcsGridRowData(row)),
+      changedRow: 'allCheckbox'
+    });
     this.rows = cloneDeep(this.rows);
   }
   allRowsAreSelected() {
@@ -1375,14 +1597,15 @@ const Grid = class {
     }
     return this.rows;
   }
-  renderSelectionColumn(row) {
+  renderSelectionColumn(row, rowIndex) {
+    var _a, _b, _c, _d;
     switch (this.selectionConfig) {
       case 'none':
         return;
       case 'single':
-        return h("td", null, h("wcs-radio", { checked: row.selected, onWcsRadioClick: this.onRowSelection.bind(this, row) }));
+        return h("td", { "aria-colindex": this.atLeastOneColumnHidden() ? 1 : null, tabIndex: ((_a = this.cursorPosition) === null || _a === void 0 ? void 0 : _a.col) === 0 && rowIndex + 1 === ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.row) ? 0 : -1 }, h("wcs-radio", { tabIndex: -1, checked: row.selected, onWcsRadioClick: this.onRowSelection.bind(this, row) }));
       case 'multiple':
-        return h("td", null, h("wcs-checkbox", { checked: row.selected, onWcsChange: this.onRowSelection.bind(this, row) }));
+        return h("td", { "aria-colindex": this.atLeastOneColumnHidden() ? 1 : null, tabIndex: ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.col) === 0 && rowIndex + 1 === ((_d = this.cursorPosition) === null || _d === void 0 ? void 0 : _d.row) ? 0 : -1 }, h("wcs-checkbox", { tabIndex: -1, checked: row.selected, onWcsChange: this.onRowSelection.bind(this, row) }));
     }
   }
   getCellContent(row, cell) {
@@ -1391,34 +1614,66 @@ const Grid = class {
     }
     return cell.content;
   }
+  /**
+   * Returns the total number of columns
+   * @private
+   */
   totalColumnCount() {
     if (!this.columns) {
       return 0;
     }
-    return this.columns.length + (this.selectionConfig === 'none' ? 0 : 1);
+    return this.columns.length + (this.hasSelectionColumn() ? 1 : 0);
+  }
+  /**
+   * Returns the total number of columns that are not hidden
+   * @private
+   */
+  totalDisplayedColumnCount() {
+    var _a, _b;
+    return (_b = this.totalColumnCount() - ((_a = this.columns) === null || _a === void 0 ? void 0 : _a.filter(col => col.hidden).length)) !== null && _b !== void 0 ? _b : 0;
+  }
+  /**
+   * Returns true if at least one column is hidden from the table
+   * @private
+   */
+  atLeastOneColumnHidden() {
+    return this.totalDisplayedColumnCount() !== this.totalColumnCount();
   }
   render() {
-    var _a;
-    return (h(Host, null, h("table", null, h("thead", null, this.selectionConfig === 'none' ? ''
+    var _a, _b, _c, _d;
+    return (h(Host, null, h("table", { role: "grid", "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, h("thead", null, h("tr", { "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
       : h("th", { class: "wcs-grid-selection-column" }, this.selectionConfig === 'single' ? '' :
-        h("wcs-checkbox", { checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { name: "grid-column" })), h("tbody", null, this.loading
-      ? h("tr", null, h("td", { colSpan: this.totalColumnCount(), class: "loading" }, h("wcs-spinner", null)))
-      : (_a = this.rows) === null || _a === void 0 ? void 0 : _a.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map(row => this.renderRow(row)))), h("slot", { name: "grid-pagination" })));
+        h("wcs-checkbox", { tabIndex: ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.col) === 0
+            && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { name: "grid-column" }))), h("tbody", null, this.loading
+      ? h("tr", { "aria-busy": "true" }, h("td", { colSpan: this.totalColumnCount(), class: "loading" }, h("wcs-spinner", null)))
+      : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), h("slot", { name: "grid-pagination" })));
   }
-  renderRow(row) {
+  /**
+   * Returns the row with all mapped cells inside.
+   * The aria-rowindex here starts at 2 because the header row starts at index 1.
+   * @private
+   */
+  renderRow(row, rowIndex) {
     var _a;
-    return h("tr", { class: row.selected ? 'selected' : '' }, this.renderSelectionColumn(row), (_a = row.cells) === null || _a === void 0 ? void 0 :
-      _a.map(cell => {
+    let hiddenColumnCount = 0;
+    return h("tr", { class: row.selected ? 'selected' : '', "aria-selected": row.selected ? 'true' : null, "aria-rowindex": rowIndex + 2 }, this.renderSelectionColumn(row, rowIndex), (_a = row.cells) === null || _a === void 0 ? void 0 :
+      _a.map((cell, cellIndex) => {
+        var _a, _b;
         if (cell.column.hidden) {
+          hiddenColumnCount++;
           return;
         }
+        const nonHiddenColumnIndex = cellIndex - hiddenColumnCount + 1 + (this.hasSelectionColumn() ? 1 : 0);
+        const cursorIsOnCell = nonHiddenColumnIndex - 1 === ((_a = this.cursorPosition) === null || _a === void 0 ? void 0 : _a.col)
+          && rowIndex + 1 === ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.row);
         return cell.column.customCells
-          ? (h("td", null, h("slot", { name: cell.column.id + '-' + row.data[this.rowIdPath] })))
-          : (h("td", { part: cell.column.path + '-column' }, this.getCellContent(row, cell)));
+          ? (h("td", { tabIndex: cursorIsOnCell ? 0 : -1, "aria-colindex": this.atLeastOneColumnHidden() ? nonHiddenColumnIndex : null }, h("slot", { name: cell.column.id + '-' + row.data[this.rowIdPath] })))
+          : (h("td", { tabIndex: cursorIsOnCell ? 0 : -1, "aria-colindex": this.atLeastOneColumnHidden() ? nonHiddenColumnIndex : null, part: cell.column.path + '-column' }, this.getCellContent(row, cell)));
       }));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
+    "cursorPosition": ["onCursorPositionChange"],
     "data": ["onDataChange"],
     "selectedItems": ["onSelectedItemsPropertyChange"]
   }; }