@ni/nimble-components 19.4.2 → 19.4.4

package/dist/all-components-bundle.js

@@ -16232,7 +16232,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Wed, 28 Jun 2023 13:18:12 GMT
+     * Generated on Fri, 30 Jun 2023 15:45:58 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -28253,7 +28253,7 @@
             this.sortDirection = TableColumnSortDirection.none;
             this.sortingDisabled = false;
             /** @internal */
-            this.isValidContentAndHasOverflow = false;
+            this.hasOverflow = false;
         }
         checkValidity() {
             return this.columnInternals.validConfiguration;
@@ -28312,7 +28312,7 @@
     ], TableColumn.prototype, "sortingDisabled", void 0);
     __decorate$1([
         observable
-    ], TableColumn.prototype, "isValidContentAndHasOverflow", void 0);
+    ], TableColumn.prototype, "hasOverflow", void 0);
 
     /**
      * Helper class for the nimble-table to validate that the table's configuration
@@ -31361,20 +31361,68 @@
     }
 `;
 
+    /**
+     * The runtime behavior for template overflow detection.
+     * @public
+     */
+    class OverflowBehavior {
+        /**
+         * Creates an instance of OverflowBehavior.
+         * @param target - The element to check for overflow.
+         * @param propertyName - The name of the property to assign the overflow state to.
+         */
+        constructor(target, propertyName) {
+            this.target = target;
+            this.propertyName = propertyName;
+        }
+        /**
+         * Bind this behavior to the source.
+         * @param source - The source to bind to.
+         * @param context - The execution context that the binding is operating within.
+         */
+        bind(source) {
+            this.source = source;
+            this.setSourceValue(false);
+            this.mouseOverHandler = () => {
+                const hasOverflow = this.target.offsetWidth < this.target.scrollWidth;
+                this.setSourceValue(hasOverflow);
+            };
+            this.mouseOutHandler = () => {
+                this.setSourceValue(false);
+            };
+            this.target.addEventListener('mouseover', this.mouseOverHandler);
+            this.target.addEventListener('mouseout', this.mouseOutHandler);
+        }
+        /**
+         * Unbinds this behavior from the source.
+         * @param source - The source to unbind from.
+         */
+        unbind() {
+            this.source = undefined;
+            this.target.removeEventListener('mouseover', this.mouseOverHandler);
+            this.target.removeEventListener('mouseout', this.mouseOutHandler);
+        }
+        setSourceValue(value) {
+            // @ts-expect-error set property on source
+            this.source[this.propertyName] = value;
+        }
+    }
+    /**
+     * A directive that observes if an element has overflow and sets a flag.
+     * @param propertyName - The name of the property to assign the overflow flag.
+     * @public
+     */
+    function overflow(propertyName) {
+        return new AttachedBehaviorHTMLDirective('nimble-overflow', OverflowBehavior, propertyName);
+    }
+
     // prettier-ignore
     const template$8 = html `
     <template slot="${x => x.columnInternals.uniqueId}">
         <span
-            ${ref('headerSpan')}
+            ${overflow('hasOverflow')}
             class="header-content"
-            @mouseover="${x => {
-    x.isValidContentAndHasOverflow = !!x.headerTextContent
-        && x.headerSpan.offsetWidth < x.headerSpan.scrollWidth;
-}}"
-            @mouseout="${x => {
-    x.isValidContentAndHasOverflow = false;
-}}"
-            title=${x => (x.isValidContentAndHasOverflow ? x.headerTextContent : null)}
+            title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
         >
             <slot ${ref('contentSlot')}></slot>
         </span>
@@ -31490,6 +31538,7 @@
         ${when(x => typeof x.cellRecord.href === 'string', html `
             <${anchorTag}
                 ${ref('anchor')}
+                ${overflow('hasOverflow')}
                 href="${x => x.cellRecord.href}"
                 hreflang="${x => x.columnConfig.hreflang}"
                 ping="${x => x.columnConfig.ping}"
@@ -31500,27 +31549,15 @@
                 download="${x => x.columnConfig.download}"
                 underline-hidden="${x => x.columnConfig.underlineHidden}"
                 appearance="${x => x.columnConfig.appearance}"
-                title=${x => (x.isValidContentAndHasOverflow ? x.content : null)}
-                @mouseover="${x => {
-    x.isValidContentAndHasOverflow = !!x.content && x.anchor.offsetWidth < x.anchor.scrollWidth;
-}}"
-                @mouseout="${x => {
-    x.isValidContentAndHasOverflow = false;
-}}"
+                title=${x => (x.hasOverflow && x.content ? x.content : null)}
             >
                 ${x => x.content}
             </${anchorTag}>`)}
         ${when(x => typeof x.cellRecord.href !== 'string', html `
             <span
-                ${ref('textSpan')}
+                ${overflow('hasOverflow')}
                 class="${x => (typeof x.cellRecord.label === 'string' ? '' : 'placeholder')}"
-                title=${x => (x.isValidContentAndHasOverflow ? x.content : null)}
-                @mouseover="${x => {
-    x.isValidContentAndHasOverflow = !!x.content && x.textSpan.offsetWidth < x.textSpan.scrollWidth;
-}}"
-                @mouseout="${x => {
-    x.isValidContentAndHasOverflow = false;
-}}"
+                title=${x => (x.hasOverflow && x.content ? x.content : null)}
             >
                 ${x => x.content}
             </span>`)}
@@ -31534,7 +31571,7 @@
         constructor() {
             super(...arguments);
             /** @internal */
-            this.isValidContentAndHasOverflow = false;
+            this.hasOverflow = false;
         }
         get content() {
             if (typeof this.cellRecord.label === 'string') {
@@ -31551,7 +31588,7 @@
     }
     __decorate$1([
         observable
-    ], TableColumnAnchorCellView.prototype, "isValidContentAndHasOverflow", void 0);
+    ], TableColumnAnchorCellView.prototype, "hasOverflow", void 0);
     __decorate$1([
         volatile
     ], TableColumnAnchorCellView.prototype, "content", null);
@@ -31571,32 +31608,43 @@
             super(...arguments);
             /** @internal */
             this.hasOverflow = false;
+            /**
+             * Text to render in the cell when it contains a valid value (i.e. when shouldUsePlaceholder is false).
+             */
+            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;
         }
-        /** @internal */
-        updateTitleOverflow() {
-            this.hasOverflow = this.textSpan.offsetWidth < this.textSpan.scrollWidth;
-        }
-        /** @internal */
-        clearTitleOverflow() {
-            this.hasOverflow = false;
-        }
     }
     __decorate$1([
         observable
     ], TableColumnTextGroupHeaderViewBase.prototype, "hasOverflow", void 0);
+    __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
-        ${ref('textSpan')}
+        ${overflow('hasOverflow')}
         class="${x => (x.shouldUsePlaceholder ? 'placeholder' : '')}"
-        @mouseover="${x => x.updateTitleOverflow()}"
-        @mouseout="${x => x.clearTitleOverflow()}"
         title="${x => (x.hasOverflow && x.content ? x.content : undefined)}"
     >
         ${x => x.content}
@@ -31621,14 +31669,18 @@
      * The group header view for displaying string fields as text.
      */
     class TableColumnTextGroupHeaderView extends TableColumnTextGroupHeaderViewBase {
-        get text() {
-            return this.groupHeaderValue;
+        columnConfigChanged() {
+            this.placeholder = this.columnConfig?.placeholder ?? '';
         }
-        get placeholder() {
-            return this.columnConfig?.placeholder ?? '';
-        }
-        get shouldUsePlaceholder() {
-            return typeof this.groupHeaderValue !== 'string';
+        groupHeaderValueChanged() {
+            if (typeof this.groupHeaderValue === 'string') {
+                this.text = this.groupHeaderValue;
+                this.shouldUsePlaceholder = false;
+            }
+            else {
+                this.text = '';
+                this.shouldUsePlaceholder = true;
+            }
         }
     }
     const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
@@ -31785,15 +31837,9 @@
 
     const template$5 = html `
     <span
-        ${ref('textSpan')}
+        ${overflow('hasOverflow')}
         class="${x => (x.shouldUsePlaceholder ? 'placeholder' : '')}"
-        @mouseover="${x => {
-    x.isValidContentAndHasOverflow = !!x.content && x.textSpan.offsetWidth < x.textSpan.scrollWidth;
-}}"
-        @mouseout="${x => {
-    x.isValidContentAndHasOverflow = false;
-}}"
-        title=${x => (x.isValidContentAndHasOverflow ? x.content : null)}
+        title=${x => (x.hasOverflow && x.content ? x.content : null)}
     >
         ${x => x.content}
     </span>
@@ -31820,7 +31866,19 @@
         constructor() {
             super(...arguments);
             /** @internal */
-            this.isValidContentAndHasOverflow = false;
+            this.hasOverflow = false;
+            /**
+             * Text to render in the cell when it contains a valid value (i.e. when shouldUsePlaceholder is false).
+             */
+            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;
@@ -31828,7 +31886,16 @@
     }
     __decorate$1([
         observable
-    ], TableColumnTextCellViewBase.prototype, "isValidContentAndHasOverflow", void 0);
+    ], TableColumnTextCellViewBase.prototype, "hasOverflow", void 0);
+    __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);
@@ -31837,14 +31904,18 @@
      * A cell view for displaying string fields as text
      */
     class TableColumnTextCellView extends TableColumnTextCellViewBase {
-        get text() {
-            return this.cellRecord.value;
+        columnConfigChanged() {
+            this.placeholder = this.columnConfig.placeholder;
         }
-        get placeholder() {
-            return this.columnConfig.placeholder;
-        }
-        get shouldUsePlaceholder() {
-            return typeof this.cellRecord.value !== 'string';
+        cellRecordChanged() {
+            if (typeof this.cellRecord.value === 'string') {
+                this.text = this.cellRecord.value;
+                this.shouldUsePlaceholder = false;
+            }
+            else {
+                this.text = '';
+                this.shouldUsePlaceholder = true;
+            }
         }
     }
     const textCellView = TableColumnTextCellView.compose({