@ni/spright-components 1.0.18 → 1.0.20

package/dist/all-components-bundle.js

@@ -15159,10 +15159,12 @@
   }
 
   /**
-   * This utility will generate the appropriate display style, as well as a style rule
-   * to hide the host element when its `hidden` attribute is set.
+   * Each element should use the display utility which will create styles to:
+   * - Set the `:host` display property
+   * - Respond to the `hidden` attribute set on `:host`
+   * - Configure `box-sizing` for `:host`, all elements in shadow root, and `::before` / `::after` pseudoelements
    */
-  const display$1 = (displayValue) => `${display$2(displayValue)}`;
+  const display$1 = (displayValue) => `${display$2(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;
 
   /**
    * This file is a workaround for: https://github.com/prettier/prettier/issues/11400
@@ -16278,7 +16280,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Sat, 08 Jun 2024 17:42:14 GMT
+   * Generated on Thu, 13 Jun 2024 16:48:33 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -17019,7 +17021,6 @@
         ${display$1('inline')}
 
         :host {
-            box-sizing: border-box;
             font: ${linkFont};
         }
 
@@ -17322,7 +17323,6 @@
             cursor: pointer;
             outline: none;
             border: none;
-            box-sizing: border-box;
             ${
 /*
     Not sure why but this is needed to get buttons with icons and buttons
@@ -17337,7 +17337,6 @@
             height: 100%;
             width: 100%;
             border: ${borderWidth} solid transparent;
-            box-sizing: border-box;
             color: inherit;
             border-radius: inherit;
             fill: inherit;
@@ -17371,10 +17370,9 @@
             width: 100%;
             height: 100%;
             pointer-events: none;
-            box-sizing: border-box;
             outline: 0px solid transparent;
             color: transparent;
-            background-clip: content-box;
+            background-clip: border-box;
             transition: outline ${smallDelay} ease-in-out;
         }
 
@@ -17721,7 +17719,6 @@
         display: grid;
         contain: layout;
         overflow: visible;
-        box-sizing: border-box;
         height: ${controlHeight};
         grid-template-columns: 1fr;
         column-gap: 8px;
@@ -17899,7 +17896,6 @@
 
     :host {
         position: relative;
-        box-sizing: border-box;
         font: ${buttonLabelFont};
         height: ${controlHeight};
         color: ${bodyFontColor};
@@ -18075,7 +18071,6 @@
     ${display$1('grid')}
 
     :host {
-        box-sizing: border-box;
         grid-template-columns: auto 1fr;
         grid-template-rows: auto 1fr;
     }
@@ -18352,7 +18347,6 @@
     .positioning-region {
         display: flex;
         position: relative;
-        box-sizing: border-box;
         height: calc(${iconSize} * 2);
         width: 100%;
     }
@@ -19970,7 +19964,6 @@
     ${display$1('inline-block')}
 
     :host {
-        box-sizing: border-box;
         font: ${linkFont};
         --ni-private-breadcrumb-link-font-color: ${linkFontColor};
         --ni-private-breadcrumb-link-active-font-color: ${linkActiveFontColor};
@@ -20016,7 +20009,6 @@
 
     :host {
         height: ${controlHeight};
-        box-sizing: border-box;
         padding-left: calc(4px - ${borderWidth});
 
         ${
@@ -20150,7 +20142,6 @@
         cursor: pointer;
         outline: none;
         border: none;
-        box-sizing: border-box;
         transition: box-shadow ${smallDelay};
     }
 
@@ -20324,7 +20315,6 @@
     .control {
         width: calc(${controlHeight} / 2);
         height: calc(${controlHeight} / 2);
-        box-sizing: border-box;
         flex-shrink: 0;
         border: ${borderWidth} solid ${borderColor};
         padding: 2px;
@@ -20660,7 +20650,6 @@
     ${display$1('inline-flex')}
 
     :host {
-        box-sizing: border-box;
         color: ${bodyFontColor};
         font: ${bodyFont};
         height: ${controlHeight};
@@ -20738,7 +20727,6 @@
 
     .control {
         align-items: center;
-        box-sizing: border-box;
         cursor: pointer;
         display: flex;
         min-height: 100%;
@@ -20765,7 +20753,6 @@
     }
 
     .listbox {
-        box-sizing: border-box;
         display: inline-flex;
         flex-direction: column;
         overflow-y: auto;
@@ -20983,7 +20970,7 @@
         border-right: 2px solid rgba(${borderRgbPartialColor}, 0.15);
         height: calc(${controlHeight} - 12px);
         align-self: center;
-        padding-left: 4px;
+        margin-left: 4px;
     }
 
     .dropdown-button {
@@ -22120,7 +22107,6 @@
     }
 
     .dialog-contents {
-        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         position: absolute;
@@ -25448,7 +25434,7 @@
     }
 
     ::slotted(hr) {
-        box-sizing: content-box;
+        box-sizing: border-box;
         height: 2px;
         margin: ${smallPadding};
         border: none;
@@ -25793,7 +25779,6 @@
     :host {
         contain: layout;
         overflow: visible;
-        box-sizing: border-box;
         height: ${controlHeight};
         grid-template-columns: 1fr;
         column-gap: 8px;
@@ -25930,7 +25915,6 @@
     }
 
     .root {
-        box-sizing: border-box;
         position: relative;
         display: flex;
         flex-direction: row;
@@ -26047,7 +26031,7 @@
 
     .error-icon {
         order: 1;
-        padding-right: ${smallPadding};
+        margin-right: ${smallPadding};
     }
 `.withBehaviors(appearanceBehavior(NumberFieldAppearance.underline, css `
             .root {
@@ -26177,7 +26161,6 @@
         position: relative;
         width: calc(${controlHeight} / 2);
         height: calc(${controlHeight} / 2);
-        box-sizing: border-box;
         flex-shrink: 0;
         border: ${borderWidth} solid ${borderColor};
         border-radius: 100%;
@@ -44448,7 +44431,6 @@ img.ProseMirror-separator {
     }
 
     .container {
-        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         position: relative;
@@ -44529,7 +44511,6 @@ img.ProseMirror-separator {
         ${
 /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''}
         padding-right: calc(${iconSize});
-        box-sizing: border-box;
         position: relative;
         color: inherit;
     }
@@ -44651,7 +44632,6 @@ img.ProseMirror-separator {
     ${toolbarTag}::part(positioning-region) {
         background: transparent;
         padding-right: 8px;
-        box-sizing: border-box;
         gap: 0px;
         height: var(--ni-private-rich-text-editor-footer-section-height);
     }
@@ -59224,7 +59204,6 @@ img.ProseMirror-separator {
     .viewer {
         font: inherit;
         outline: none;
-        box-sizing: border-box;
         position: relative;
         color: inherit;
         overflow-wrap: anywhere;
@@ -60867,7 +60846,6 @@ img.ProseMirror-separator {
         display: flex;
         height: var(--ni-private-switch-height);
         width: calc(var(--ni-private-switch-height) * 2);
-        box-sizing: border-box;
         background-color: ${fillHoverColor};
         border-radius: calc(var(--ni-private-switch-height) / 2);
         align-items: center;
@@ -60896,7 +60874,6 @@ img.ProseMirror-separator {
         justify-content: center;
         align-items: center;
         background-color: var(--ni-private-switch-indicator-background-color);
-        box-sizing: border-box;
         width: var(--ni-private-switch-indicator-size);
         height: var(--ni-private-switch-indicator-size);
         border-radius: calc(var(--ni-private-switch-indicator-size) / 2);
@@ -61037,7 +61014,6 @@ img.ProseMirror-separator {
 
     :host {
         position: relative;
-        box-sizing: border-box;
         font: ${buttonLabelFont};
         height: ${controlHeight};
         color: ${bodyFontColor};
@@ -61151,7 +61127,6 @@ img.ProseMirror-separator {
     ${display$1('block')}
 
     :host {
-        box-sizing: border-box;
         font: ${bodyFont};
         color: ${bodyFontColor};
         padding-top: ${standardPadding};
@@ -64581,6 +64556,10 @@ img.ProseMirror-separator {
            * the resolved value of the fractionalWidth after updates programmatic or interactive updates.
            */
           this.currentFractionalWidth = defaultFractionalWidth;
+          /**
+           * Whether or not this column can be sorted
+           */
+          this.sortingDisabled = false;
           /**
            * @internal Do not write to this value directly. It is used by the Table in order to store
            * the resolved value of the sortDirection after programmatic or interactive updates.
@@ -64639,6 +64618,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], ColumnInternals.prototype, "currentPixelWidth", void 0);
+  __decorate$1([
+      observable
+  ], ColumnInternals.prototype, "sortingDisabled", void 0);
   __decorate$1([
       observable
   ], ColumnInternals.prototype, "currentSortIndex", void 0);
@@ -64667,8 +64649,6 @@ img.ProseMirror-separator {
            */
           this.columnInternals = new ColumnInternals(this.getColumnInternalsOptions());
           this.columnHidden = false;
-          this.sortDirection = TableColumnSortDirection.none;
-          this.sortingDisabled = false;
           /** @internal */
           this.hasOverflow = false;
       }
@@ -64690,26 +64670,6 @@ img.ProseMirror-separator {
           // Done here to enforce consistency across headers as they may have custom templates
           this.setAttribute('slot', this.columnInternals.uniqueId);
       }
-      sortDirectionChanged() {
-          if (!this.sortingDisabled) {
-              this.columnInternals.currentSortDirection = this.sortDirection;
-          }
-      }
-      sortIndexChanged() {
-          if (!this.sortingDisabled) {
-              this.columnInternals.currentSortIndex = this.sortIndex;
-          }
-      }
-      sortingDisabledChanged() {
-          if (this.sortingDisabled) {
-              this.columnInternals.currentSortDirection = TableColumnSortDirection.none;
-              this.columnInternals.currentSortIndex = undefined;
-          }
-          else {
-              this.columnInternals.currentSortDirection = this.sortDirection;
-              this.columnInternals.currentSortIndex = this.sortIndex;
-          }
-      }
   }
   __decorate$1([
       attr({ attribute: 'column-id' })
@@ -64723,15 +64683,6 @@ img.ProseMirror-separator {
   __decorate$1([
       attr({ attribute: 'column-hidden', mode: 'boolean' })
   ], TableColumn.prototype, "columnHidden", void 0);
-  __decorate$1([
-      attr({ attribute: 'sort-index', converter: nullableNumberConverter })
-  ], TableColumn.prototype, "sortIndex", void 0);
-  __decorate$1([
-      attr({ attribute: 'sort-direction' })
-  ], TableColumn.prototype, "sortDirection", void 0);
-  __decorate$1([
-      attr({ attribute: 'sorting-disabled', mode: 'boolean' })
-  ], TableColumn.prototype, "sortingDisabled", void 0);
   __decorate$1([
       observable
   ], TableColumn.prototype, "hasOverflow", void 0);
@@ -65191,7 +65142,6 @@ img.ProseMirror-separator {
         background-color: ${applicationBackgroundColor};
         height: calc(${controlHeight} + 2 * ${borderWidth});
         border-top: calc(2 * ${borderWidth}) solid transparent;
-        box-sizing: border-box;
         background-clip: padding-box;
     }
 
@@ -65200,7 +65150,6 @@ img.ProseMirror-separator {
         width: 100%;
         height: ${controlHeight};
         pointer-events: none;
-        box-sizing: border-box;
         bottom: 0px;
         position: absolute;
     }
@@ -65219,9 +65168,13 @@ img.ProseMirror-separator {
 
     .expand-collapse-button {
         flex: 0 0 auto;
-        padding-left: calc(
-            ${mediumPadding} + (var(--ni-private-table-row-indent-level) - 1) *
-                ${controlHeight}
+        margin-left: max(
+            calc(
+                ${mediumPadding} +
+                    (var(--ni-private-table-row-indent-level) - 1) *
+                    ${controlHeight}
+            ),
+            0px
         );
     }
 
@@ -65233,9 +65186,13 @@ img.ProseMirror-separator {
         display: flex;
         align-items: center;
         justify-content: center;
-        padding-left: calc(
-            ${mediumPadding} + (var(--ni-private-table-row-indent-level) - 1) *
-                ${controlHeight}
+        margin-left: max(
+            calc(
+                ${mediumPadding} +
+                    (var(--ni-private-table-row-indent-level) - 1) *
+                    ${controlHeight}
+            ),
+            0px
         );
     }
 
@@ -65760,7 +65717,6 @@ img.ProseMirror-separator {
         align-items: center;
         height: calc(${controlHeight} + 2 * ${borderWidth});
         border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};
-        box-sizing: border-box;
         grid-template-columns:
             calc(
                 ${controlHeight} *
@@ -67304,8 +67260,7 @@ img.ProseMirror-separator {
           else if (isColumnInternalsProperty(changedColumnProperty, 'operandDataRecordFieldName', 'sortOperation')) {
               this.track('columnDefinition');
           }
-          else if (isColumnProperty(changedColumnProperty, 'sortingDisabled')
-              || isColumnInternalsProperty(changedColumnProperty, 'currentSortDirection', 'currentSortIndex')) {
+          else if (isColumnInternalsProperty(changedColumnProperty, 'sortingDisabled', 'currentSortDirection', 'currentSortIndex')) {
               this.track('columnSort');
           }
           else if (isColumnProperty(changedColumnProperty, 'columnHidden')
@@ -68243,7 +68198,7 @@ img.ProseMirror-separator {
        * @internal
        */
       toggleColumnSort(column, allowMultiSort) {
-          if (column.sortingDisabled) {
+          if (column.columnInternals.sortingDisabled) {
               return;
           }
           const allSortedColumns = this.getColumnsParticipatingInSorting().sort((x, y) => x.columnInternals.currentSortIndex
@@ -68427,7 +68382,7 @@ img.ProseMirror-separator {
           }
       }
       getColumnsParticipatingInSorting() {
-          return this.columns.filter(x => !x.sortingDisabled
+          return this.columns.filter(x => !x.columnInternals.sortingDisabled
               && x.columnInternals.currentSortDirection
                   !== TableColumnSortDirection.none
               && typeof x.columnInternals.currentSortIndex === 'number');
@@ -68802,20 +68757,10 @@ img.ProseMirror-separator {
        */
       class FractionalWidthColumn extends base {
           fractionalWidthChanged() {
-              if (typeof this.fractionalWidth === 'number') {
-                  this.columnInternals.fractionalWidth = this.fractionalWidth;
-              }
-              else {
-                  this.columnInternals.fractionalWidth = defaultFractionalWidth;
-              }
+              this.columnInternals.fractionalWidth = this.fractionalWidth ?? defaultFractionalWidth;
           }
           minPixelWidthChanged() {
-              if (typeof this.minPixelWidth === 'number') {
-                  this.columnInternals.minPixelWidth = this.minPixelWidth;
-              }
-              else {
-                  this.columnInternals.minPixelWidth = defaultMinPixelWidth;
-              }
+              this.columnInternals.minPixelWidth = this.minPixelWidth ?? defaultMinPixelWidth;
           }
       }
       attr({ attribute: 'fractional-width', converter: nullableNumberConverter })(
@@ -68838,18 +68783,12 @@ img.ProseMirror-separator {
           constructor() {
               super(...arguments);
               this.groupingDisabled = false;
-              this.groupIndex = null;
           }
           groupingDisabledChanged() {
               this.columnInternals.groupingDisabled = this.groupingDisabled;
           }
           groupIndexChanged() {
-              if (typeof this.groupIndex === 'number') {
-                  this.columnInternals.groupIndex = this.groupIndex;
-              }
-              else {
-                  this.columnInternals.groupIndex = undefined;
-              }
+              this.columnInternals.groupIndex = this.groupIndex ?? undefined;
           }
       }
       attr({ attribute: 'grouping-disabled', mode: 'boolean' })(
@@ -69108,10 +69047,60 @@ img.ProseMirror-separator {
       .register(tableColumnTextGroupHeaderView());
   const tableColumnTextGroupHeaderViewTag = 'nimble-table-column-text-group-header-view';
 
+  // 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 mixinSortableColumnAPI(base) {
+      /**
+       * The Mixin that provides a concrete column with the API to allow sorting
+       * by the values in that column.
+       */
+      class SortableColumn extends base {
+          constructor() {
+              super(...arguments);
+              this.sortingDisabled = false;
+              this.sortDirection = TableColumnSortDirection.none;
+          }
+          /** @internal */
+          sortingDisabledChanged() {
+              this.columnInternals.sortingDisabled = this.sortingDisabled;
+              if (this.sortingDisabled) {
+                  this.columnInternals.currentSortDirection = TableColumnSortDirection.none;
+                  this.columnInternals.currentSortIndex = undefined;
+              }
+              else {
+                  this.columnInternals.currentSortDirection = this.sortDirection;
+                  this.columnInternals.currentSortIndex = this.sortIndex ?? undefined;
+              }
+          }
+          /** @internal */
+          sortDirectionChanged() {
+              if (!this.sortingDisabled) {
+                  this.columnInternals.currentSortDirection = this.sortDirection;
+              }
+          }
+          /** @internal */
+          sortIndexChanged() {
+              if (!this.sortingDisabled) {
+                  this.columnInternals.currentSortIndex = this.sortIndex ?? undefined;
+              }
+          }
+      }
+      attr({ attribute: 'sorting-disabled', mode: 'boolean' })(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      SortableColumn.prototype, 'sortingDisabled');
+      attr({ attribute: 'sort-index', converter: nullableNumberConverter })(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      SortableColumn.prototype, 'sortIndex');
+      attr({ attribute: 'sort-direction' })(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      SortableColumn.prototype, 'sortDirection');
+      return SortableColumn;
+  }
+
   /**
    * A table column for displaying links.
    */
-  class TableColumnAnchor extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI((TableColumn)))) {
+  class TableColumnAnchor extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI(mixinSortableColumnAPI((TableColumn))))) {
       constructor() {
           super(...arguments);
           this.underlineHidden = false;
@@ -69240,7 +69229,7 @@ img.ProseMirror-separator {
   ], TableColumnTextBase.prototype, "fieldName", void 0);
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type, @typescript-eslint/no-explicit-any
   function mixinTextBase(base) {
-      return mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI(base)));
+      return mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI(mixinSortableColumnAPI(base))));
   }
 
   function formatNumericDate(formatter, date) {
@@ -70355,7 +70344,7 @@ img.ProseMirror-separator {
    * Table column that maps number, boolean, or string values to an icon, a spinner,
    * text, or an icon/spinner with text.
    */
-  class TableColumnMapping extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI((TableColumnEnumBase))) {
+  class TableColumnMapping extends mixinGroupableColumnAPI(mixinFractionalWidthColumnAPI(mixinSortableColumnAPI((TableColumnEnumBase)))) {
       minPixelWidthChanged() {
           if (this.widthMode !== TableColumnMappingWidthMode.iconSize) {
               this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();
@@ -71072,7 +71061,6 @@ img.ProseMirror-separator {
     ${display$1('grid')}
 
     :host {
-        box-sizing: border-box;
         grid-template-columns: auto 1fr;
         grid-template-rows: auto 1fr;
     }
@@ -71121,7 +71109,6 @@ img.ProseMirror-separator {
     :host {
         align-items: center;
         height: ${controlHeight};
-        box-sizing: border-box;
         font: ${bodyFont};
         color: ${bodyFontColor};
     }
@@ -71230,7 +71217,6 @@ img.ProseMirror-separator {
         font: inherit;
         flex-grow: 1;
         outline: none;
-        box-sizing: border-box;
         position: relative;
         color: inherit;
         border-radius: 0px;
@@ -71535,7 +71521,6 @@ img.ProseMirror-separator {
     }
 
     .root {
-        box-sizing: border-box;
         position: relative;
         display: flex;
         flex-direction: row;
@@ -71804,7 +71789,6 @@ img.ProseMirror-separator {
     }
 
     .tooltip {
-        box-sizing: border-box;
         flex-shrink: 0;
         max-width: 440px;
         box-shadow: ${elevation2BoxShadow};
@@ -72057,7 +72041,6 @@ img.ProseMirror-separator {
     .positioning-region {
         display: flex;
         position: relative;
-        box-sizing: border-box;
         height: calc(${iconSize} * 2);
     }
 
@@ -79540,10 +79523,12 @@ img.ProseMirror-separator {
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleWaferMap());
 
   /**
-   * This utility will generate the appropriate display style, as well as a style rule
-   * to hide the host element when its `hidden` attribute is set.
+   * Each element should use the display utility which will create styles to:
+   * - Set the `:host` display property
+   * - Respond to the `hidden` attribute set on `:host`
+   * - Configure `box-sizing` for `:host`, all elements in shadow root, and `::before` / `::after` pseudoelements
    */
-  const display = (displayValue) => `${display$2(displayValue)}`;
+  const display = (displayValue) => `${display$2(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;
 
   const styles = css `
     ${display('inline-block')}