@ni/nimble-components 21.8.1 → 21.8.2

package/dist/all-components-bundle.js

@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Fri, 01 Mar 2024 22:47:47 GMT
+   * Generated on Mon, 04 Mar 2024 18:45:22 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -63093,6 +63093,17 @@ img.ProseMirror-separator {
         height: ${controlSlimHeight};
         cursor: col-resize;
         position: absolute;
+        z-index: ${ZIndexLevels.zIndex1};
+    }
+
+    .column-divider:hover,
+    .column-divider.divider-active {
+        border-color: ${borderHoverColor};
+    }
+
+    .column-divider.column-active,
+    .header-container:hover .column-divider {
+        display: block;
     }
 
     .column-divider::before {
@@ -63109,17 +63120,6 @@ img.ProseMirror-separator {
         );
     }
 
-    .column-divider.active {
-        display: block;
-        z-index: ${ZIndexLevels.zIndex1};
-    }
-
-    .header-container:hover .column-divider.left,
-    .header-container:hover .column-divider.right {
-        display: block;
-        z-index: ${ZIndexLevels.zIndex1};
-    }
-
     .column-divider.left {
         left: -1px;
     }
@@ -64167,8 +64167,14 @@ img.ProseMirror-separator {
                             ${repeat(x => x.visibleColumns, html `
                                 <div class="header-container">
                                     ${when((_, c) => c.index > 0, html `
-                                        <div class="column-divider left ${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'active' : ''}`}" 
-                                             @mousedown="${(_, c) => c.parent.onLeftDividerMouseDown(c.event, c.index)}">
+                                        <div
+                                            class="
+                                                column-divider
+                                                left
+                                                ${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
+                                                ${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getLeftDividerIndex(c.index) ? 'divider-active' : ''}`}
+                                            "
+                                            @mousedown="${(_, c) => c.parent.onLeftDividerMouseDown(c.event, c.index)}">
                                         </div>
                                     `)}
                                         <${tableHeaderTag}
@@ -64181,7 +64187,13 @@ img.ProseMirror-separator {
                                             <slot name="${x => x.slot}"></slot>
                                         </${tableHeaderTag}>
                                     ${when((_, c) => c.index < c.length - 1, html `
-                                        <div class="column-divider right ${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'active' : ''}`}"
+                                        <div
+                                            class="
+                                                column-divider
+                                                right
+                                                ${(_, c) => `${c.parent.layoutManager.activeColumnIndex === c.index ? 'column-active' : ''}`}
+                                                ${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getRightDividerIndex(c.index) ? 'divider-active' : ''}`}
+                                            "
                                              @mousedown="${(_, c) => c.parent.onRightDividerMouseDown(c.event, c.index)}">
                                         </div>
                                     `)}                        
@@ -65112,6 +65124,7 @@ img.ProseMirror-separator {
               this.resetGridSizedColumns();
               this.isColumnBeingSized = false;
               this.activeColumnIndex = undefined;
+              this.activeColumnDivider = undefined;
           };
       }
       getGridTemplateColumns() {
@@ -65261,6 +65274,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], TableLayoutManager.prototype, "activeColumnIndex", void 0);
+  __decorate$1([
+      observable
+  ], TableLayoutManager.prototype, "activeColumnDivider", void 0);
 
   const isColumnProperty = (changedProperty, ...args) => {
       for (const arg of args) {
@@ -66209,16 +66225,24 @@ img.ProseMirror-separator {
       /** @internal */
       onRightDividerMouseDown(event, columnIndex) {
           if (event.button === 0) {
-              this.layoutManager.beginColumnInteractiveSize(event.clientX, columnIndex * 2);
+              this.layoutManager.beginColumnInteractiveSize(event.clientX, this.getRightDividerIndex(columnIndex));
           }
       }
       /** @internal */
       onLeftDividerMouseDown(event, columnIndex) {
           if (event.button === 0) {
-              this.layoutManager.beginColumnInteractiveSize(event.clientX, columnIndex * 2 - 1);
+              this.layoutManager.beginColumnInteractiveSize(event.clientX, this.getLeftDividerIndex(columnIndex));
           }
       }
       /** @internal */
+      getLeftDividerIndex(columnIndex) {
+          return columnIndex * 2 - 1;
+      }
+      /** @internal */
+      getRightDividerIndex(columnIndex) {
+          return columnIndex * 2;
+      }
+      /** @internal */
       handleGroupRowExpanded(rowIndex, event) {
           this.toggleRowExpanded(rowIndex);
           event.stopPropagation();