@ni/nimble-components 20.4.2 → 20.5.0

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 18:34:03 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -19214,6 +19214,10 @@
       name: 'hourglass_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M10.774 13.4h-.047v-.49h-.404a2.491 2.491 0 0 0 .355-1.258c0-1.826-2.083-2.886-2.083-3.652s2.083-1.826 2.083-3.652a2.491 2.491 0 0 0-.355-1.257h.404V2.6h.047a.556.556 0 0 0 .499-.6H4.727a.556.556 0 0 0 .499.6h.047v.49h.404a2.491 2.491 0 0 0-.355 1.258c0 1.826 2.083 2.87 2.083 3.652s-2.083 1.826-2.083 3.652a2.491 2.491 0 0 0 .355 1.257h-.404v.491h-.047a.556.556 0 0 0-.499.6h6.546a.556.556 0 0 0-.499-.6ZM8 12.957c-1.565 0-1.975-.585-1.975-1.305a7.183 7.183 0 0 1 1.723-.656c.268 0 .289-3.513 0-3.779l-.988-1h2.454l-.962 1c-.268.286-.275 3.779 0 3.779a7.651 7.651 0 0 1 1.738.656c0 .72-.409 1.305-1.99 1.305Z"/></svg>`
   };
+  const indent16X16 = {
+      name: 'indent_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="m2.5 7.5 1 2.5-1 2.5 5-2.5-5-2.5zM2 3h12v2H2zM9 7h5v2H9zM9 11h5v2H9z"/></svg>`
+  };
   const indeterminantCheckbox16X16 = {
       name: 'indeterminant_checkbox_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M12 3a1.001 1.001 0 0 1 1 1v8a1.001 1.001 0 0 1-1 1H4a1.001 1.001 0 0 1-1-1V4a1.001 1.001 0 0 1 1-1h8m0-1H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2ZM4 4v8h8V4Zm6 6H6V6h4Z"/></svg>`
@@ -19298,6 +19302,10 @@
       name: 'number_list_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16" xml:space="preserve"><path d="M14 11H6v2h8v-2zm0-4H6v2h8V7zm0-4H6v2h8V3zM1.999 4.644h.73V2.302h-.585v-.271c.295-.05.505-.13.681-.235h.32v2.848h.656v.346H1.999v-.346zM1.804 9.509c.951-.932 1.501-1.521 1.501-2.037 0-.365-.2-.621-.605-.621-.265 0-.496.17-.676.381l-.235-.226c.265-.3.551-.495.961-.495.591 0 .961.375.961.936 0 .621-.561 1.196-1.336 1.987.174-.016.37-.026.535-.026h.956v.355H1.804v-.254zM1.733 13.884l.21-.271c.19.201.44.376.816.376.385 0 .661-.226.661-.581 0-.38-.26-.635-1.021-.635v-.315c.676 0 .906-.261.906-.596 0-.306-.21-.501-.55-.501-.266 0-.491.136-.681.32l-.221-.26c.246-.23.541-.4.916-.4.556 0 .956.295.956.811 0 .386-.23.631-.576.761v.021c.385.09.691.37.691.811 0 .565-.471.91-1.056.91a1.363 1.363 0 0 1-1.051-.451z"/></svg>`
   };
+  const outdent16X16 = {
+      name: 'outdent_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="m7.5 12.5-1-2.5 1-2.5-5 2.5 5 2.5zM2 3h12v2H2zM9 7h5v2H9zM9 11h5v2H9z"/></svg>`
+  };
   const paste16X16 = {
       name: 'paste_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M9 5V3H3v6h2v1H2V2h8v3ZM6 6v8h8V6Z"/></svg>`
@@ -22769,6 +22777,19 @@
   registerIcon('icon-hourglass', IconHourglass);
   DesignSystem.tagFor(IconHourglass);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'indent' icon
+   */
+  class IconIndent extends Icon {
+      constructor() {
+          super(indent16X16);
+      }
+  }
+  registerIcon('icon-indent', IconIndent);
+  DesignSystem.tagFor(IconIndent);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -23029,6 +23050,19 @@
   registerIcon('icon-number-list', IconNumberList);
   const iconNumberListTag = DesignSystem.tagFor(IconNumberList);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'outdent' icon
+   */
+  class IconOutdent extends Icon {
+      constructor() {
+          super(outdent16X16);
+      }
+  }
+  registerIcon('icon-outdent', IconOutdent);
+  DesignSystem.tagFor(IconOutdent);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -23702,7 +23736,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 +23761,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.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.tableColumnHeaderGroupedIndicatorLabel);
+  }).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 +23825,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 +63927,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 +63985,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 +64092,7 @@ img.ProseMirror-separator {
         background-color: ${fillHoverSelectedColor};
     }
 
-    .checkbox-container {
+    .row-operations-container {
         display: flex;
     }
 
@@ -64071,6 +64190,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 +64257,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 +64323,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 +64494,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 +64639,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 +64652,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 +64790,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 +64878,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 +66493,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 => {