@ni/nimble-components 29.8.2 → 30.0.0

package/dist/all-components-bundle.js

@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 11 Jul 2024 21:51:38 GMT
+   * Generated on Tue, 16 Jul 2024 22:15:12 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -19043,6 +19043,10 @@
       name: 'arrow_partial_rotate_left_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 11.988a3.086 3.086 0 0 0 3.143-3.025 3.08 3.08 0 0 0-3.085-3.02v.088l.826 2.067-5.598-2.796L8.884 2.5l-.742 1.932a4.62 4.62 0 0 1 4.572 4.53A4.63 4.63 0 0 1 8 13.5Z" class="cls-1"/></svg>`,
   };
+  const arrowRightThin16X16 = {
+      name: 'arrow_right_thin_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m7.831 4.386-.706 1.127 3.128 1.837H2v1.3h8.365L7.49 10.528l.768 1.085L13.875 8z" class="cls-1"/></svg>`,
+  };
   const arrowRightToLine16X16 = {
       name: 'arrow_right_to_line_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12 14h2V2h-2Zm-6.9-3 1.287-2H2V7l4.412.004L5.1 5 11 7.982Z" class="cls-1"/></svg>`,
@@ -19051,8 +19055,16 @@
       name: 'arrow_rotate_right_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8.9 2.773v1.715a3.366 3.366 0 0 1 3.3 3.428 3.366 3.366 0 0 1-3.3 3.429 3.36 3.36 0 0 1-3.293-3.366h.095l2.255.901-3.05-6.107L1.85 8.88l2.108-.808A5.04 5.04 0 0 0 8.9 13.059a5.05 5.05 0 0 0 4.95-5.143A5.05 5.05 0 0 0 8.9 2.773" class="cls-1"/></svg>`,
   };
-  const arrowURotateLeft16X16 = {
-      name: 'arrow_u_rotate_left_16_x_16',
+  const arrowULeft16X16 = {
+      name: 'arrow_u_left_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m9.453 8.857-1.68-2.571h.908a3 3 0 0 1 0 6H3.11V14h5.571a4.714 4.714 0 0 0 0-9.429h-.908L9.453 2 2.604 5.403z" class="cls-1"/></svg>`,
+  };
+  const arrowURight16X16 = {
+      name: 'arrow_u_right_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.547 8.857 1.68-2.571H7.32a3 3 0 0 0 0 6h5.571V14H7.319a4.714 4.714 0 0 1 0-9.429h.908L6.547 2l6.849 3.403z" class="cls-1"/></svg>`,
+  };
+  const arrowUUp16X16 = {
+      name: 'arrow_u_up_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8.857 9.453-2.571-1.68v.908a3 3 0 0 0 3 3 3 3 0 0 0 3-3V3.11H14v5.571a4.714 4.714 0 0 1-4.714 4.715A4.714 4.714 0 0 1 4.57 8.68v-.908L2 9.453l3.403-6.849Z" class="cls-1"/></svg>`,
   };
   const arrowUp16X16 = {
@@ -19067,9 +19079,9 @@
       name: 'arrow_up_right_and_arrow_down_left_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m11.023 4.195-2.296-.45L14 2l-1.762 5.256-.458-2.301-6.803 6.85 2.296.45L2 14l1.762-5.256.458 2.301z" class="cls-1"/></svg>`,
   };
-  const arrowUpRightFromSquare = {
-      name: 'arrow_up_right_from_square',
-      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m13.042 2.97-2.063 6.281-.49-2.344-4.117 4.122-1.414-1.414L9.06 5.513 6.736 5.01zM12 9v3H4V4h3V3H3v10h10V9z" class="cls-1"/></svg>`,
+  const arrowUpRightFromSquare16X16 = {
+      name: 'arrow_up_right_from_square_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10.436 10h1v3h-9V4h3v1h-2v7h7zm-3.42-6.173.298 1.296 2.92-.748L5.068 9.53l.925.926L11.13 5.33l-.52 2.532 1.31.225 1.2-5.839z" class="cls-1"/></svg>`,
   };
   const arrowsMaximize16X16 = {
       name: 'arrows_maximize_16_x_16',
@@ -19115,17 +19127,37 @@
       name: 'book_magnifying_glass_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 10c0-.347.058-.678.142-1H5V8h1.556c.22-.378.498-.714.826-1H5V6h5c.732 0 1.41.212 2 .556V2H3v11h4.382A3.98 3.98 0 0 1 6 10M5 4h5v1H5z" class="cls-1"/><path d="m9.99 7.01-.076.002a3 3 0 1 0 1.799 5.452l1.593 1.53.69-.725-1.58-1.516a2.97 2.97 0 0 0 .57-1.816A3 3 0 0 0 9.99 7.01M10 12c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2" class="cls-1"/></svg>`,
   };
-  const calendar16X16 = {
-      name: 'calendar_16_x_16',
-      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12 3V2h-2v1H6V2H4v1H2v11h12V3zm1 10H3V6h10zM6 9H4V7h2zm3-2H7v2h2zm3 0h-2v2h2zm-6 3H4v2h2zm3 0H7v2h2z" class="cls-1"/></svg>`,
-  };
   const calendarCheckLines16X16 = {
       name: 'calendar_check_lines_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12 3V2h-2v1H6V2H4v1H2v11h12V3zm1 10H3V6h10z" class="cls-2"/><path d="M5.743 11 4 9.242l.766-.742.97 1.007L8.273 7 9 7.758zM10 8h2v1h-2zM8 10h4v1H8z" class="cls-1"/></svg>`,
   };
+  const calendarClock16X16 = {
+      name: 'calendar_clock_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14 8.79V3h-2V2h-2v1H6V2H4v1H2v11h7.47c.545.35 1.19.559 1.885.559a3.5 3.5 0 0 0 3.5-3.5c0-.87-.33-1.657-.855-2.269M3 6h10v1.987a3.46 3.46 0 0 0-1.645-.428A3.5 3.5 0 0 0 8.445 13H3zm9.978 7.041a391 391 0 0 1-1.288-1.304.743.743 0 1 1 0-1.338l.908-.908c.081-.081.356-.149.49-.149 0 .09-.06.358-.134.462-.068.095-.791.822-.917.948a.75.75 0 0 1 0 .633l1.386 1.389s.312.327.268.625c-.208 0-.416-.06-.713-.358" class="cls-1"/></svg>`,
+  };
   const calendarDay16X16 = {
       name: 'calendar_day_16_x_16',
-      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12 3V2h-2v1H6V2H4v1H2v11h12V3zm1 10H3V6h10zM6 9H4V7h2z" class="cls-1"/></svg>`,
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M7 10H4V7h3zm7-7v11H2V3h2V2h2v1h4V2h2v1zm-1 3H3v7h10z" class="cls-1"/></svg>`,
+  };
+  const calendarDayOutline16X16 = {
+      name: 'calendar_day_outline_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12 3V2h-2v1H6V2H4v1H2v11h12V3zm1 10H3V6h10zM7 7H4v3h3zM6 9H5V8h1z" class="cls-1"/></svg>`,
+  };
+  const calendarDays16X16 = {
+      name: 'calendar_days_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12 3V2h-2v1H6V2H4v1H2v11h12V3zm1 10H3V6h10zM6 9H4V7h2zm3-2H7v2h2zm3 0h-2v2h2zm-6 3H4v2h2zm3 0H7v2h2z" class="cls-1"/></svg>`,
+  };
+  const calendarLines16X16 = {
+      name: 'calendar_lines_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12 3V2h-2v1H6V2H4v1H2v11h12V3zm1 10H3V6h10zm-1-5H4V7h8zm0 2H4V9h8zm0 2H4v-1h8z" class="cls-1"/></svg>`,
+  };
+  const calendarRectangle16X16 = {
+      name: 'calendar_rectangle_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12 3V2h-2v1H6V2H4v1H2v11h12V3zm1 10H3V6h10zm-1-1H4V7h8z" class="cls-1"/></svg>`,
+  };
+  const calendarWeek16X16 = {
+      name: 'calendar_week_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g class="cls-3"><path d="M12 3V2h-2v1H6V2H4v1H2v11h12V3zm1 10H3V6h10zm-1-4H4V7h8z" class="cls-1"/></g></svg>`,
   };
   const chartDiagram16X16 = {
       name: 'chart_diagram_16_x_16',
@@ -21288,6 +21320,8 @@ so this becomes the fallback color for the slot */ ''}
            */
           this.open = false;
           /**
+           * @internal
+           *
            * The collection of currently filtered options.
            */
           this.filteredOptions = [];
@@ -22622,6 +22656,18 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIcon('icon-arrow-partial-rotate-left', IconArrowPartialRotateLeft);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'arrowRightThin' icon
+   */
+  class IconArrowRightThin extends Icon {
+      constructor() {
+          super(arrowRightThin16X16);
+      }
+  }
+  registerIcon('icon-arrow-right-thin', IconArrowRightThin);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -22649,14 +22695,38 @@ so this becomes the fallback color for the slot */ ''}
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
-   * The icon component for the 'arrowURotateLeft' icon
+   * The icon component for the 'arrowULeft' icon
+   */
+  class IconArrowULeft extends Icon {
+      constructor() {
+          super(arrowULeft16X16);
+      }
+  }
+  registerIcon('icon-arrow-u-left', IconArrowULeft);
+
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'arrowURight' icon
+   */
+  class IconArrowURight extends Icon {
+      constructor() {
+          super(arrowURight16X16);
+      }
+  }
+  registerIcon('icon-arrow-u-right', IconArrowURight);
+
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'arrowUUp' icon
    */
-  class IconArrowURotateLeft extends Icon {
+  class IconArrowUUp extends Icon {
       constructor() {
-          super(arrowURotateLeft16X16);
+          super(arrowUUp16X16);
       }
   }
-  registerIcon('icon-arrow-u-rotate-left', IconArrowURotateLeft);
+  registerIcon('icon-arrow-u-up', IconArrowUUp);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
@@ -22702,7 +22772,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   class IconArrowUpRightFromSquare extends Icon {
       constructor() {
-          super(arrowUpRightFromSquare);
+          super(arrowUpRightFromSquare16X16);
       }
   }
   registerIcon('icon-arrow-up-right-from-square', IconArrowUpRightFromSquare);
@@ -22843,26 +22913,26 @@ so this becomes the fallback color for the slot */ ''}
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
-   * The icon component for the 'calendar' icon
+   * The icon component for the 'calendarCheckLines' icon
    */
-  class IconCalendar extends Icon {
+  class IconCalendarCheckLines extends Icon {
       constructor() {
-          super(calendar16X16);
+          super(calendarCheckLines16X16);
       }
   }
-  registerIcon('icon-calendar', IconCalendar);
+  registerIcon('icon-calendar-check-lines', IconCalendarCheckLines);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
-   * The icon component for the 'calendarCheckLines' icon
+   * The icon component for the 'calendarClock' icon
    */
-  class IconCalendarCheckLines extends Icon {
+  class IconCalendarClock extends Icon {
       constructor() {
-          super(calendarCheckLines16X16);
+          super(calendarClock16X16);
       }
   }
-  registerIcon('icon-calendar-check-lines', IconCalendarCheckLines);
+  registerIcon('icon-calendar-clock', IconCalendarClock);
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
@@ -22876,6 +22946,66 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIcon('icon-calendar-day', IconCalendarDay);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'calendarDayOutline' icon
+   */
+  class IconCalendarDayOutline extends Icon {
+      constructor() {
+          super(calendarDayOutline16X16);
+      }
+  }
+  registerIcon('icon-calendar-day-outline', IconCalendarDayOutline);
+
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'calendarDays' icon
+   */
+  class IconCalendarDays extends Icon {
+      constructor() {
+          super(calendarDays16X16);
+      }
+  }
+  registerIcon('icon-calendar-days', IconCalendarDays);
+
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'calendarLines' icon
+   */
+  class IconCalendarLines extends Icon {
+      constructor() {
+          super(calendarLines16X16);
+      }
+  }
+  registerIcon('icon-calendar-lines', IconCalendarLines);
+
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'calendarRectangle' icon
+   */
+  class IconCalendarRectangle extends Icon {
+      constructor() {
+          super(calendarRectangle16X16);
+      }
+  }
+  registerIcon('icon-calendar-rectangle', IconCalendarRectangle);
+
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'calendarWeek' icon
+   */
+  class IconCalendarWeek extends Icon {
+      constructor() {
+          super(calendarWeek16X16);
+      }
+  }
+  registerIcon('icon-calendar-week', IconCalendarWeek);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -54474,16 +54604,32 @@ img.ProseMirror-separator {
           return this.trackedItems[key];
       }
       track(key) {
-          this.trackedItems[key] = true;
+          const wasTracked = this.trackedItems[key];
+          if (!wasTracked) {
+              this.trackedItems[key] = true;
+              this.onTrackingChange();
+          }
       }
       untrack(key) {
-          this.trackedItems[key] = false;
+          const wasTracked = this.trackedItems[key];
+          if (wasTracked) {
+              this.trackedItems[key] = false;
+              this.onTrackingChange();
+          }
       }
       trackAll() {
+          if (this.allTracked()) {
+              return;
+          }
           this.setAllKeys(true);
+          this.onTrackingChange();
       }
       untrackAll() {
+          if (this.noneTracked()) {
+              return;
+          }
           this.setAllKeys(false);
+          this.onTrackingChange();
       }
       allTracked() {
           return Object.values(this.trackedItems).every(x => x);
@@ -54494,6 +54640,7 @@ img.ProseMirror-separator {
       noneTracked() {
           return Object.values(this.trackedItems).every(x => !x);
       }
+      onTrackingChange() { }
       setAllKeys(value) {
           this.trackedItems = Object.keys(this.trackedItems).reduce((r, key) => {
               return {
@@ -68457,6 +68604,10 @@ focus outline in that case.
       getValidity() {
           return this.getValidationFlags();
       }
+      onTrackingChange() {
+          super.onTrackingChange();
+          this.isColumnValid = this.isValid();
+      }
       /**
        * Sets a particular validity condition flag's value, e.g. "hasInvalidFooValue" = true
        */
@@ -68467,10 +68618,6 @@ focus outline in that case.
           else {
               this.untrack(name);
           }
-          this.updateColumnInternalsFlag();
-      }
-      updateColumnInternalsFlag() {
-          this.isColumnValid = this.isValid();
       }
   }
   __decorate$1([
@@ -70760,25 +70907,105 @@ focus outline in that case.
       return SortableColumn;
   }
 
+  // As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+  function mixinCustomSortOrderColumnAPI(base) {
+      /**
+       * The Mixin that provides a concrete column with the API to allow sorting
+       * by a field other than the default for that column.
+       */
+      class CustomSortOrderColumn extends base {
+          constructor() {
+              super(...arguments);
+              /** @internal */
+              this.customSortOrderColumnChangeHandler = {
+                  handleChange: this.handleCustomSortOrderColumnChange.bind(this)
+              };
+          }
+          getResolvedOperandDataRecordFieldName(initialOperandFieldName) {
+              return typeof this.sortByFieldName === 'string'
+                  ? this.sortByFieldName
+                  : initialOperandFieldName;
+          }
+          getResolvedSortOperation(initialSortOperation) {
+              return typeof this.sortByFieldName === 'string'
+                  ? TableColumnSortOperation.basic
+                  : initialSortOperation;
+          }
+          /** @internal */
+          sortByFieldNameChanged() {
+              this.handleSortConfigurationChange();
+              this.updateCustomColumnSortingValidity();
+              if (typeof this.sortByFieldName === 'string'
+                  && !this.customSortOrderColumnNotifier) {
+                  this.customSortOrderColumnNotifier = Observable.getNotifier(this.columnInternals);
+                  this.customSortOrderColumnNotifier.subscribe(this.customSortOrderColumnChangeHandler);
+              }
+              else {
+                  this.customSortOrderColumnNotifier?.unsubscribe(this.customSortOrderColumnChangeHandler);
+                  this.customSortOrderColumnNotifier = undefined;
+              }
+          }
+          /** @internal */
+          handleCustomSortOrderColumnChange(_source, args) {
+              if (args === 'groupingDisabled') {
+                  this.updateCustomColumnSortingValidity();
+              }
+          }
+          /** @internal */
+          updateCustomColumnSortingValidity() {
+              const hasCustomColumnSorting = typeof this.sortByFieldName === 'string';
+              const isGroupingEnabled = !this.columnInternals.groupingDisabled;
+              const isValid = !isGroupingEnabled || !hasCustomColumnSorting;
+              if (isValid) {
+                  this.columnInternals.validator.untrack('invalidCustomSortWithGrouping');
+              }
+              else {
+                  this.columnInternals.validator.track('invalidCustomSortWithGrouping');
+              }
+          }
+      }
+      attr({ attribute: 'sort-by-field-name' })(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      CustomSortOrderColumn.prototype, 'sortByFieldName');
+      return CustomSortOrderColumn;
+  }
+
+  const columnAnchorValidityFlagNames = [
+      'invalidCustomSortWithGrouping'
+  ];
+  /**
+   * Validator class for the anchor table column.
+   */
+  class TableColumnAnchorValidator extends ColumnValidator {
+      constructor() {
+          super(columnAnchorValidityFlagNames);
+      }
+  }
+
   /**
    * A table column for displaying links.
    */
-  class TableColumnAnchor extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI(mixinSortableColumnAPI((TableColumn))))) {
+  class TableColumnAnchor extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI(mixinSortableColumnAPI(mixinCustomSortOrderColumnAPI((TableColumn)))))) {
       constructor() {
           super(...arguments);
           this.underlineHidden = false;
+          this.defaultSortOperation = TableColumnSortOperation.localeAwareCaseSensitive;
       }
       placeholderChanged() {
           this.updateColumnConfig();
       }
+      handleSortConfigurationChange() {
+          this.updateColumnInternalsSortConfiguration();
+      }
       getColumnInternalsOptions() {
           return {
               cellRecordFieldNames: ['label', 'href'],
               cellViewTag: tableColumnAnchorCellViewTag,
               groupHeaderViewTag: tableColumnTextGroupHeaderViewTag,
               delegatedEvents: ['click'],
-              sortOperation: TableColumnSortOperation.localeAwareCaseSensitive,
-              validator: new ColumnValidator([])
+              sortOperation: this.getResolvedSortOperation(this.defaultSortOperation),
+              validator: new TableColumnAnchorValidator()
           };
       }
       labelFieldNameChanged() {
@@ -70786,7 +71013,7 @@ focus outline in that case.
               this.labelFieldName,
               this.hrefFieldName
           ];
-          this.columnInternals.operandDataRecordFieldName = this.labelFieldName;
+          this.updateColumnInternalsSortConfiguration();
       }
       hrefFieldNameChanged() {
           this.columnInternals.dataRecordFieldNames = [
@@ -70835,6 +71062,10 @@ focus outline in that case.
               placeholder: this.placeholder
           };
       }
+      updateColumnInternalsSortConfiguration() {
+          this.columnInternals.operandDataRecordFieldName = this.getResolvedOperandDataRecordFieldName(this.labelFieldName);
+          this.columnInternals.sortOperation = this.getResolvedSortOperation(this.defaultSortOperation);
+      }
   }
   __decorate$1([
       attr({ attribute: 'label-field-name' })
@@ -72852,25 +73083,52 @@ focus outline in that case.
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';
 
+  const columnTextValidityFlagNames = [
+      'invalidCustomSortWithGrouping'
+  ];
+  /**
+   * Validator class for the text table column.
+   */
+  class TableColumnTextValidator extends ColumnValidator {
+      constructor() {
+          super(columnTextValidityFlagNames);
+      }
+  }
+
   /**
    * The table column for displaying string fields as text.
    */
-  class TableColumnText extends mixinTextBase((TableColumnTextBase)) {
+  class TableColumnText extends mixinCustomSortOrderColumnAPI(mixinTextBase((TableColumnTextBase))) {
+      constructor() {
+          super(...arguments);
+          this.defaultSortOperation = TableColumnSortOperation.localeAwareCaseSensitive;
+      }
       placeholderChanged() {
           this.columnInternals.columnConfig = {
               placeholder: this.placeholder
           };
       }
+      handleSortConfigurationChange() {
+          this.updateColumnInternalsSortConfiguration();
+      }
       getColumnInternalsOptions() {
           return {
               cellRecordFieldNames: ['value'],
               cellViewTag: tableColumnTextCellViewTag,
               groupHeaderViewTag: tableColumnTextGroupHeaderViewTag,
               delegatedEvents: [],
-              sortOperation: TableColumnSortOperation.localeAwareCaseSensitive,
-              validator: new ColumnValidator([])
+              sortOperation: this.getResolvedSortOperation(this.defaultSortOperation),
+              validator: new TableColumnTextValidator()
           };
       }
+      fieldNameChanged() {
+          this.columnInternals.dataRecordFieldNames = [this.fieldName];
+          this.updateColumnInternalsSortConfiguration();
+      }
+      updateColumnInternalsSortConfiguration() {
+          this.columnInternals.operandDataRecordFieldName = this.getResolvedOperandDataRecordFieldName(this.fieldName);
+          this.columnInternals.sortOperation = this.getResolvedSortOperation(this.defaultSortOperation);
+      }
   }
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',