@ni/nimble-components 20.4.2 → 20.4.3

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 20 Sep 2023 15:04:09 GMT
+   * Generated on Wed, 20 Sep 2023 16:15:01 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -23702,7 +23702,13 @@
       tableGroupExpandLabel: 'Expand group',
       tableGroupsCollapseAllLabel: 'Collapse all groups',
       tableCellActionMenuLabel: 'Options',
-      tableColumnHeaderGroupedIndicatorLabel: 'Grouped'
+      tableColumnHeaderGroupedLabel: 'Grouped',
+      tableColumnHeaderSortedAscendingLabel: 'Sorted ascending',
+      tableColumnHeaderSortedDescendingLabel: 'Sorted descending',
+      tableSelectAllLabel: 'Select all rows',
+      tableGroupSelectAllLabel: 'Select all rows in group',
+      tableRowSelectLabel: 'Select row',
+      tableRowOperationColumnLabel: 'Row operations'
   };
 
   const tableGroupCollapseLabel = DesignToken.create({
@@ -23721,17 +23727,47 @@
       name: 'table-cell-action-menu-label',
       cssCustomPropertyName: null
   }).withDefault(tableLabelDefaults.tableCellActionMenuLabel);
-  const tableColumnHeaderGroupedIndicatorLabel = DesignToken.create({
-      name: 'table-column-header-grouped-indicator-label',
+  const tableColumnHeaderGroupedLabel = DesignToken.create({
+      name: 'table-column-header-grouped-label',
       cssCustomPropertyName: null
-  }).withDefault(tableLabelDefaults.tableColumnHeaderGroupedIndicatorLabel);
+  }).withDefault(tableLabelDefaults.tableColumnHeaderGroupedLabel);
+  const tableColumnHeaderSortedAscendingLabel = DesignToken.create({
+      name: 'table-column-header-sorted-ascending-label',
+      cssCustomPropertyName: null
+  }).withDefault(tableLabelDefaults.tableColumnHeaderSortedAscendingLabel);
+  const tableColumnHeaderSortedDescendingLabel = DesignToken.create({
+      name: 'table-column-header-sorted-descending-label',
+      cssCustomPropertyName: null
+  }).withDefault(tableLabelDefaults.tableColumnHeaderSortedDescendingLabel);
+  const tableSelectAllLabel = DesignToken.create({
+      name: 'table-select-all-label',
+      cssCustomPropertyName: null
+  }).withDefault(tableLabelDefaults.tableSelectAllLabel);
+  const tableGroupSelectAllLabel = DesignToken.create({
+      name: 'table-group-select-all-label',
+      cssCustomPropertyName: null
+  }).withDefault(tableLabelDefaults.tableGroupSelectAllLabel);
+  const tableRowSelectLabel = DesignToken.create({
+      name: 'table-row-select-label',
+      cssCustomPropertyName: null
+  }).withDefault(tableLabelDefaults.tableRowSelectLabel);
+  const tableRowOperationColumnLabel = DesignToken.create({
+      name: 'table-row-operation-column-label',
+      cssCustomPropertyName: null
+  }).withDefault(tableLabelDefaults.tableRowOperationColumnLabel);
 
   const supportedLabels = {
       groupCollapse: tableGroupCollapseLabel,
       groupExpand: tableGroupExpandLabel,
       groupsCollapseAll: tableGroupsCollapseAllLabel,
       cellActionMenu: tableCellActionMenuLabel,
-      columnHeaderGroupedIndicator: tableColumnHeaderGroupedIndicatorLabel
+      columnHeaderGrouped: tableColumnHeaderGroupedLabel,
+      columnHeaderSortedAscending: tableColumnHeaderSortedAscendingLabel,
+      columnHeaderSortedDescending: tableColumnHeaderSortedDescendingLabel,
+      selectAll: tableSelectAllLabel,
+      groupSelectAll: tableGroupSelectAllLabel,
+      rowSelect: tableRowSelectLabel,
+      rowOperationColumn: tableRowOperationColumnLabel
   };
   /**
    * Label provider for the Nimble table (and its sub-components and columns)
@@ -23755,8 +23791,26 @@
       attr({ attribute: 'cell-action-menu' })
   ], LabelProviderTable.prototype, "cellActionMenu", void 0);
   __decorate$1([
-      attr({ attribute: 'column-header-grouped-indicator' })
-  ], LabelProviderTable.prototype, "columnHeaderGroupedIndicator", void 0);
+      attr({ attribute: 'column-header-grouped' })
+  ], LabelProviderTable.prototype, "columnHeaderGrouped", void 0);
+  __decorate$1([
+      attr({ attribute: 'column-header-sorted-ascending' })
+  ], LabelProviderTable.prototype, "columnHeaderSortedAscending", void 0);
+  __decorate$1([
+      attr({ attribute: 'column-header-sorted-descending' })
+  ], LabelProviderTable.prototype, "columnHeaderSortedDescending", void 0);
+  __decorate$1([
+      attr({ attribute: 'select-all' })
+  ], LabelProviderTable.prototype, "selectAll", void 0);
+  __decorate$1([
+      attr({ attribute: 'group-select-all' })
+  ], LabelProviderTable.prototype, "groupSelectAll", void 0);
+  __decorate$1([
+      attr({ attribute: 'row-select' })
+  ], LabelProviderTable.prototype, "rowSelect", void 0);
+  __decorate$1([
+      attr({ attribute: 'row-operation-column' })
+  ], LabelProviderTable.prototype, "rowOperationColumn", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
       baseName: 'label-provider-table'
   });
@@ -63839,6 +63893,25 @@ img.ProseMirror-separator {
     .row {
         position: relative;
     }
+
+    .accessibly-hidden {
+        ${
+/**
+ * Hide content visually while keeping it screen reader-accessible.
+ * Source: https://webaim.org/techniques/css/invisiblecontent/#techniques
+ * See discussion here: https://github.com/microsoft/fast/issues/5740#issuecomment-1068195035
+ */
+''}
+        display: inline-block;
+        height: 1px;
+        width: 1px;
+        position: absolute;
+        margin: -1px;
+        clip: rect(1px, 1px, 1px, 1px);
+        clip-path: inset(50%);
+        overflow: hidden;
+        padding: 0;
+    }
 `.withBehaviors(themeBehavior(Theme.color, css `
             .table-row-container::before {
                 content: '';
@@ -63878,15 +63951,27 @@ img.ProseMirror-separator {
         @mousedown="${(_x, c) => !(c.event.detail > 1)}"
     >
         <slot></slot>
-        ${'' /* Omit title attribute for sort indicators because aria-sort is set on the 1st sorted column */}
+        ${'' /* Set aria-hidden="true" on sort indicators because aria-sort is set on the 1st sorted column */}
         ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html `
-            <${iconArrowUpTag} class="sort-indicator" aria-hidden="true"></${iconArrowUpTag}>
+            <${iconArrowUpTag}
+                class="sort-indicator"
+                title="${x => tableColumnHeaderSortedAscendingLabel.getValueFor(x)}"
+                aria-hidden="true"
+            ></${iconArrowUpTag}>
         `)}
         ${when(x => x.sortDirection === TableColumnSortDirection.descending, html `
-            <${iconArrowDownTag} class="sort-indicator" aria-hidden="true"></${iconArrowDownTag}>
+            <${iconArrowDownTag}
+                class="sort-indicator"
+                title="${x => tableColumnHeaderSortedDescendingLabel.getValueFor(x)}"
+                aria-hidden="true"
+            ></${iconArrowDownTag}>
         `)}
         ${when(x => x.isGrouped, html `
-            <${iconTwoSquaresInBracketsTag} class="grouped-indicator" title="${x => tableColumnHeaderGroupedIndicatorLabel.getValueFor(x)}"></${iconTwoSquaresInBracketsTag}>
+            <${iconTwoSquaresInBracketsTag}
+                class="grouped-indicator"
+                title="${x => tableColumnHeaderGroupedLabel.getValueFor(x)}"
+                aria-label="${x => tableColumnHeaderGroupedLabel.getValueFor(x)}"
+            ></${iconTwoSquaresInBracketsTag}>
         `)}
     </template>
 `;
@@ -63973,7 +64058,7 @@ img.ProseMirror-separator {
         background-color: ${fillHoverSelectedColor};
     }
 
-    .checkbox-container {
+    .row-operations-container {
         display: flex;
     }
 
@@ -64071,6 +64156,7 @@ img.ProseMirror-separator {
                 @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
                 @click="${(_, c) => c.event.stopPropagation()}"
                 class="action-menu"
+                title="${x => x.actionMenuLabel ?? tableCellActionMenuLabel.getValueFor(x)}"
             >
                 <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
                 ${x => x.actionMenuLabel ?? tableCellActionMenuLabel.getValueFor(x)}
@@ -64137,15 +64223,19 @@ img.ProseMirror-separator {
   // prettier-ignore
   const template$e = html `
     <template role="row" aria-selected=${x => x.ariaSelected}>
-        ${when(x => x.selectable && !x.hideSelection, html `
-            <span role="gridcell" class="checkbox-container">
-                <${checkboxTag}
-                    ${ref('selectionCheckbox')}
-                    class="selection-checkbox"
-                    @change="${(x, c) => x.onSelectionChange(c.event)}"
-                    @click="${(_, c) => c.event.stopPropagation()}"
-                >
-                </${checkboxTag}>
+        ${when(x => !x.rowOperationGridCellHidden, html `
+            <span role="gridcell" class="row-operations-container">
+                ${when(x => x.selectable && !x.hideSelection, html `
+                    <${checkboxTag}
+                        ${ref('selectionCheckbox')}
+                        class="selection-checkbox"
+                        @change="${(x, c) => x.onSelectionChange(c.event)}"
+                        @click="${(_, c) => c.event.stopPropagation()}"
+                        title="${x => tableRowSelectLabel.getValueFor(x)}"
+                        aria-label="${x => tableRowSelectLabel.getValueFor(x)}"
+                    >
+                    </${checkboxTag}>
+                `)}
             </span>
         `)}
         ${'' /* This is needed to help align the cell widths exactly with the column headers, due to the space reserved for
@@ -64199,6 +64289,7 @@ img.ProseMirror-separator {
           this.columns = [];
           this.nestingLevel = 0;
           this.menuOpen = false;
+          this.rowOperationGridCellHidden = false;
           /**
            * @internal
            * An array that parallels the `columns` array and contains the indent
@@ -64369,6 +64460,9 @@ img.ProseMirror-separator {
   __decorate$1([
       attr({ attribute: 'menu-open', mode: 'boolean' })
   ], TableRow.prototype, "menuOpen", void 0);
+  __decorate$1([
+      attr({ attribute: 'row-operation-grid-cell-hidden', mode: 'boolean' })
+  ], TableRow.prototype, "rowOperationGridCellHidden", void 0);
   __decorate$1([
       observable
   ], TableRow.prototype, "cellIndentLevels", void 0);
@@ -64511,6 +64605,8 @@ img.ProseMirror-separator {
                     class="selection-checkbox"
                     @change="${(x, c) => x.onSelectionChange(c.event)}"
                     @click="${(_, c) => c.event.stopPropagation()}"
+                    title="${x => tableGroupSelectAllLabel.getValueFor(x)}"
+                    aria-label="${x => tableGroupSelectAllLabel.getValueFor(x)}"
                 >
                 </${checkboxTag}>
             </span>
@@ -64522,6 +64618,7 @@ img.ProseMirror-separator {
                 content-hidden
                 class="expand-collapse-button"
                 tabindex="-1"
+                title="${x => (x.expanded ? tableGroupCollapseLabel.getValueFor(x) : tableGroupExpandLabel.getValueFor(x))}"
             >
                 <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot="start" class="expander-icon ${x => x.animationClass}"></${iconArrowExpanderRightTag}>
                 ${x => (x.expanded ? tableGroupCollapseLabel.getValueFor(x) : tableGroupExpandLabel.getValueFor(x))}
@@ -64659,29 +64756,34 @@ img.ProseMirror-separator {
             <div class="glass-overlay">
                 <div role="rowgroup" class="header-row-container">
                     <div class="header-row" role="row">
-                        <span class="header-row-action-container" ${ref('headerRowActionContainer')}>
+                        <span role="${x => (x.showRowOperationColumn ? 'columnheader' : '')}" class="header-row-action-container" ${ref('headerRowActionContainer')}>
+                            ${when(x => x.showRowOperationColumn, html `
+                                <span class="accessibly-hidden">
+                                    ${x => tableRowOperationColumnLabel.getValueFor(x)}
+                                </span>
+                            `)}
                             ${when(x => x.selectionMode === TableRowSelectionMode.multiple, html `
-                                <span role="columnheader" class="checkbox-container">
+                                <span class="checkbox-container">
                                     <${checkboxTag}
                                         ${ref('selectionCheckbox')}
                                         class="${x => `selection-checkbox ${x.selectionMode ?? ''}`}"
                                         @change="${(x, c) => x.onAllRowsSelectionChange(c.event)}"
+                                        title="${x => tableSelectAllLabel.getValueFor(x)}"
+                                        aria-label="${x => tableSelectAllLabel.getValueFor(x)}"
                                     >
                                     </${checkboxTag}>
                                 </span>
                             `)}
-                            <span role="gridcell">
-                                <${buttonTag}
-                                    class="collapse-all-button ${x => `${x.showCollapseAll ? 'visible' : ''}`}"
-                                    content-hidden
-                                    appearance="${ButtonAppearance.ghost}"
-                                    title="${x => tableGroupsCollapseAllLabel.getValueFor(x)}"
-                                    @click="${x => x.handleCollapseAllGroupRows()}"
-                                >
-                                    <${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
-                                    ${x => tableGroupsCollapseAllLabel.getValueFor(x)}
-                                </${buttonTag}>
-                            </span>
+                            <${buttonTag}
+                                class="collapse-all-button ${x => `${x.showCollapseAll ? 'visible' : ''}`}"
+                                content-hidden
+                                appearance="${ButtonAppearance.ghost}"
+                                title="${x => tableGroupsCollapseAllLabel.getValueFor(x)}"
+                                @click="${x => x.handleCollapseAllGroupRows()}"
+                            >
+                                <${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
+                                ${x => tableGroupsCollapseAllLabel.getValueFor(x)}
+                            </${buttonTag}>
                         </span>
                         <span class="column-headers-container" ${ref('columnHeadersContainer')}>
                             ${repeat(x => x.visibleColumns, html `
@@ -64742,6 +64844,7 @@ img.ProseMirror-separator {
                                         :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
                                         :columns="${(_, c) => c.parent.columns}"
                                         :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
+                                        ?row-operation-grid-cell-hidden="${(_, c) => !c.parent.showRowOperationColumn}"
                                         @click="${(x, c) => c.parent.onRowClick(x.index, c.event)}"
                                         @row-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
                                         @row-action-menu-beforetoggle="${(x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
@@ -66356,6 +66459,13 @@ img.ProseMirror-separator {
       get validity() {
           return this.tableValidator.getValidity();
       }
+      /**
+       * @internal
+       */
+      get showRowOperationColumn() {
+          return (this.selectionMode === TableRowSelectionMode.multiple
+              || this.showCollapseAll);
+      }
       async setData(newData) {
           await this.processPendingUpdates();
           const data = newData.map(record => {