@ni/nimble-components 19.8.3 → 19.8.5

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 20 Jul 2023 02:55:33 GMT
+   * Generated on Fri, 21 Jul 2023 16:51:13 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -30899,11 +30899,11 @@
           this.visibleColumns = [];
           this.currentTotalDelta = 0;
           this.dragStart = 0;
-          this.initialColumnPixelWidths = [];
+          this.initialColumnWidths = [];
           this.onDividerMouseMove = (event) => {
               const mouseEvent = event;
               for (let i = 0; i < this.visibleColumns.length; i++) {
-                  this.visibleColumns[i].columnInternals.currentPixelWidth = this.initialColumnPixelWidths[i]?.initialPixelWidth;
+                  this.visibleColumns[i].columnInternals.currentPixelWidth = this.initialColumnWidths[i]?.initialPixelWidth;
               }
               this.currentTotalDelta = this.getAllowedSizeDelta(mouseEvent.clientX - this.dragStart);
               this.performCascadeSizeLeft(this.leftColumnIndex, this.currentTotalDelta);
@@ -30982,7 +30982,7 @@
           // size left
           let currentIndex = this.leftColumnIndex;
           while (currentIndex >= 0) {
-              const columnInitialWidths = this.initialColumnPixelWidths[currentIndex];
+              const columnInitialWidths = this.initialColumnWidths[currentIndex];
               availableSpace
                   += columnInitialWidths.initialPixelWidth
                       - columnInitialWidths.minPixelWidth;
@@ -30992,7 +30992,7 @@
       }
       performCascadeSizeLeft(leftColumnIndex, delta) {
           let currentDelta = delta;
-          const leftColumnInitialWidths = this.initialColumnPixelWidths[leftColumnIndex];
+          const leftColumnInitialWidths = this.initialColumnWidths[leftColumnIndex];
           const allowedDelta = delta < 0
               ? Math.max(leftColumnInitialWidths.minPixelWidth
                   - leftColumnInitialWidths.initialPixelWidth, currentDelta)
@@ -31007,7 +31007,7 @@
       }
       performCascadeSizeRight(rightColumnIndex, delta) {
           let currentDelta = delta;
-          const rightColumnInitialWidths = this.initialColumnPixelWidths[rightColumnIndex];
+          const rightColumnInitialWidths = this.initialColumnWidths[rightColumnIndex];
           const allowedDelta = delta > 0
               ? Math.min(rightColumnInitialWidths.initialPixelWidth
                   - rightColumnInitialWidths.minPixelWidth, currentDelta)
@@ -31031,9 +31031,9 @@
           }
       }
       cacheColumnInitialPixelWidths() {
-          this.initialColumnPixelWidths = [];
+          this.initialColumnWidths = [];
           for (const column of this.visibleColumns) {
-              this.initialColumnPixelWidths.push({
+              this.initialColumnWidths.push({
                   initalColumnFractionalWidth: column.columnInternals.currentFractionalWidth,
                   initialPixelWidth: column.columnInternals.currentPixelWidth,
                   minPixelWidth: column.columnInternals.minPixelWidth
@@ -31051,9 +31051,8 @@
               if (column === this.gridSizedColumns[gridColumnIndex]) {
                   gridColumnIndex += 1;
                   column.columnInternals.currentFractionalWidth = (column.columnInternals.currentPixelWidth
-                      / this.initialColumnPixelWidths[i].initialPixelWidth)
-                      * this.initialColumnPixelWidths[i]
-                          .initalColumnFractionalWidth;
+                      / this.initialColumnWidths[i].initialPixelWidth)
+                      * this.initialColumnWidths[i].initalColumnFractionalWidth;
                   column.columnInternals.currentPixelWidth = undefined;
               }
           }
@@ -31656,6 +31655,8 @@
           this.table = createTable(this.options);
           this.virtualizer = new Virtualizer(this, this.table);
           this.layoutManager = new TableLayoutManager(this);
+          this.layoutManagerNotifier = Observable.getNotifier(this.layoutManager);
+          this.layoutManagerNotifier.subscribe(this, 'isColumnBeingSized');
           this.selectionManager = new InteractiveSelectionManager(this.table, this.selectionMode);
       }
       get validity() {
@@ -31743,6 +31744,13 @@
                   this.tableUpdateTracker.trackColumnPropertyChanged(args);
               }
           }
+          else if (source instanceof TableLayoutManager
+              && args === 'isColumnBeingSized'
+              && !this.layoutManager.isColumnBeingSized) {
+              // 'isColumnBeingSized' changing to 'false' indicates an interactive
+              // column sizing operation has been completed
+              this.emitColumnConfigurationChangeEvent();
+          }
       }
       /** @internal */
       onRowSelectionToggle(rowIndex, event) {
@@ -32452,10 +32460,6 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
-
-    .placeholder {
-        color: ${controlLabelFontColor};
-    }
 `;
 
   /* eslint-disable @typescript-eslint/indent */
@@ -32483,17 +32487,16 @@
                 download="${x => x.columnConfig.download}"
                 underline-hidden="${x => x.columnConfig.underlineHidden}"
                 appearance="${x => x.columnConfig.appearance}"
-                title=${x => (x.hasOverflow && x.content ? x.content : null)}
+                title=${x => (x.hasOverflow ? x.text : null)}
             >
-                ${x => x.content}
+                ${x => x.text}
             </${anchorTag}>`)}
         ${when(x => typeof x.cellRecord.href !== 'string', html `
             <span
                 ${overflow('hasOverflow')}
-                class="${x => (typeof x.cellRecord.label === 'string' ? '' : 'placeholder')}"
-                title=${x => (x.hasOverflow && x.content ? x.content : null)}
+                title=${x => (x.hasOverflow ? x.text : null)}
             >
-                ${x => x.content}
+                ${x => x.text}
             </span>`)}
     </template>
 `;
@@ -32507,14 +32510,14 @@
           /** @internal */
           this.hasOverflow = false;
       }
-      get content() {
+      get text() {
           if (typeof this.cellRecord.label === 'string') {
               return this.cellRecord.label;
           }
           if (typeof this.cellRecord.href === 'string') {
               return this.cellRecord.href;
           }
-          return this.columnConfig.placeholder;
+          return '';
       }
       focusedRecycleCallback() {
           this.anchor?.blur();
@@ -32525,7 +32528,7 @@
   ], TableColumnAnchorCellView.prototype, "hasOverflow", void 0);
   __decorate$1([
       volatile
-  ], TableColumnAnchorCellView.prototype, "content", null);
+  ], TableColumnAnchorCellView.prototype, "text", null);
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
       template: template$7,
@@ -32543,20 +32546,9 @@
           /** @internal */
           this.hasOverflow = false;
           /**
-           * Text to render in the cell when it contains a valid value (i.e. when shouldUsePlaceholder is false).
+           * Text to render in the cell.
            */
           this.text = '';
-          /**
-           * Text to render in the cell when it contains an invalid value (i.e. when shouldUsePlaceholder is true).
-           */
-          this.placeholder = '';
-          /**
-           * Returns whether to display the placeholder value or the text value
-           */
-          this.shouldUsePlaceholder = true;
-      }
-      get content() {
-          return this.shouldUsePlaceholder ? this.placeholder : this.text;
       }
   }
   __decorate$1([
@@ -32565,23 +32557,13 @@
   __decorate$1([
       observable
   ], TableColumnTextGroupHeaderViewBase.prototype, "text", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnTextGroupHeaderViewBase.prototype, "placeholder", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnTextGroupHeaderViewBase.prototype, "shouldUsePlaceholder", void 0);
-  __decorate$1([
-      volatile
-  ], TableColumnTextGroupHeaderViewBase.prototype, "content", null);
 
   const template$6 = html `
     <span
         ${overflow('hasOverflow')}
-        class="${x => (x.shouldUsePlaceholder ? 'placeholder' : '')}"
-        title="${x => (x.hasOverflow && x.content ? x.content : undefined)}"
+        title="${x => (x.hasOverflow && x.text ? x.text : null)}"
     >
-        ${x => x.content}
+        ${x => x.text}
     </span>
 `;
 
@@ -32593,28 +32575,16 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
-
-    .placeholder {
-        color: ${controlLabelFontColor};
-    }
 `;
 
   /**
    * The group header view for displaying string fields as text.
    */
   class TableColumnTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
-      columnConfigChanged() {
-          this.placeholder = this.columnConfig?.placeholder ?? '';
-      }
       groupHeaderValueChanged() {
-          if (typeof this.groupHeaderValue === 'string') {
-              this.text = this.groupHeaderValue;
-              this.shouldUsePlaceholder = false;
-          }
-          else {
-              this.text = '';
-              this.shouldUsePlaceholder = true;
-          }
+          this.text = typeof this.groupHeaderValue === 'string'
+              ? this.groupHeaderValue
+              : '';
       }
   }
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
@@ -32657,9 +32627,6 @@
               this.hrefFieldName
           ];
       }
-      placeholderChanged() {
-          this.updateColumnConfig();
-      }
       appearanceChanged() {
           this.updateColumnConfig();
       }
@@ -32689,7 +32656,6 @@
       }
       updateColumnConfig() {
           this.columnInternals.columnConfig = {
-              placeholder: this.placeholder ?? '',
               appearance: this.appearance,
               underlineHidden: this.underlineHidden,
               hreflang: this.hreflang,
@@ -32708,9 +32674,6 @@
   __decorate$1([
       attr({ attribute: 'href-field-name' })
   ], TableColumnAnchor.prototype, "hrefFieldName", void 0);
-  __decorate$1([
-      attr
-  ], TableColumnAnchor.prototype, "placeholder", void 0);
   __decorate$1([
       attr
   ], TableColumnAnchor.prototype, "appearance", void 0);
@@ -32751,31 +32714,22 @@
   /**
    * The base class for table columns that display fields of any type as text.
    */
-  class TableColumnTextBase extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumn))) {
+  class TableColumnTextBase extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(TableColumn)) {
       fieldNameChanged() {
           this.columnInternals.dataRecordFieldNames = [this.fieldName];
           this.columnInternals.operandDataRecordFieldName = this.fieldName;
       }
-      placeholderChanged() {
-          this.columnInternals.columnConfig = {
-              placeholder: this.placeholder ?? ''
-          };
-      }
   }
   __decorate$1([
       attr({ attribute: 'field-name' })
   ], TableColumnTextBase.prototype, "fieldName", void 0);
-  __decorate$1([
-      attr
-  ], TableColumnTextBase.prototype, "placeholder", void 0);
 
   const template$5 = html `
     <span
         ${overflow('hasOverflow')}
-        class="${x => (x.shouldUsePlaceholder ? 'placeholder' : '')}"
-        title=${x => (x.hasOverflow && x.content ? x.content : null)}
+        title=${x => (x.hasOverflow && x.text ? x.text : null)}
     >
-        ${x => x.content}
+        ${x => x.text}
     </span>
 `;
 
@@ -32787,10 +32741,6 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
-
-    .placeholder {
-        color: ${controlLabelFontColor};
-    }
 `;
 
   /**
@@ -32802,20 +32752,9 @@
           /** @internal */
           this.hasOverflow = false;
           /**
-           * Text to render in the cell when it contains a valid value (i.e. when shouldUsePlaceholder is false).
+           * Text to render in the cell.
            */
           this.text = '';
-          /**
-           * Text to render in the cell when it contains an invalid value (i.e. when shouldUsePlaceholder is true).
-           */
-          this.placeholder = '';
-          /**
-           * Returns whether to display the placeholder value or the text value
-           */
-          this.shouldUsePlaceholder = true;
-      }
-      get content() {
-          return this.shouldUsePlaceholder ? this.placeholder : this.text;
       }
   }
   __decorate$1([
@@ -32824,32 +32763,15 @@
   __decorate$1([
       observable
   ], TableColumnTextCellViewBase.prototype, "text", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnTextCellViewBase.prototype, "placeholder", void 0);
-  __decorate$1([
-      observable
-  ], TableColumnTextCellViewBase.prototype, "shouldUsePlaceholder", void 0);
-  __decorate$1([
-      volatile
-  ], TableColumnTextCellViewBase.prototype, "content", null);
 
   /**
    * A cell view for displaying string fields as text
    */
   class TableColumnTextCellView extends TableColumnTextCellViewBase {
-      columnConfigChanged() {
-          this.placeholder = this.columnConfig.placeholder;
-      }
       cellRecordChanged() {
-          if (typeof this.cellRecord.value === 'string') {
-              this.text = this.cellRecord.value;
-              this.shouldUsePlaceholder = false;
-          }
-          else {
-              this.text = '';
-              this.shouldUsePlaceholder = true;
-          }
+          this.text = typeof this.cellRecord.value === 'string'
+              ? this.cellRecord.value
+              : '';
       }
   }
   const textCellView = TableColumnTextCellView.compose({