@ni/nimble-components 19.4.2 → 19.4.4

package/dist/esm/table-column/text-base/group-header-view/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/group-header-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAIpE;;GAEG;AACH,MAAM,OAAgB,kCAGpB,SAAQ,oBAAgD;IAH1D;;QAOI,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;IAqC/B,CAAC;IAbG,IAAW,OAAO;QACd,OAAO,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACpE,CAAC;IAED,gBAAgB;IACT,mBAAmB;QACtB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;IAC7E,CAAC;IAED,gBAAgB;IACT,kBAAkB;QACrB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC7B,CAAC;CACJ;AArCG;IADC,UAAU;uEACgB;AAwB3B;IADC,QAAQ;iEAGR"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/group-header-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAIpE;;GAEG;AACH,MAAM,OAAgB,kCAGpB,SAAQ,oBAAgD;IAH1D;;QAII,gBAAgB;QAET,gBAAW,GAAG,KAAK,CAAC;QAE3B;;WAEG;QAEI,SAAI,GAAG,EAAE,CAAC;QAEjB;;WAEG;QAEI,gBAAW,GAAG,EAAE,CAAC;QAExB;;WAEG;QAEI,yBAAoB,GAAG,IAAI,CAAC;IAMvC,CAAC;IAHG,IAAW,OAAO;QACd,OAAO,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACpE,CAAC;CACJ;AAxBG;IADC,UAAU;uEACgB;AAM3B;IADC,UAAU;gEACM;AAMjB;IADC,UAAU;uEACa;AAMxB;IADC,UAAU;gFACwB;AAGnC;IADC,QAAQ;iEAGR"}

package/dist/esm/table-column/text-base/group-header-view/template.js

@@ -1,10 +1,9 @@
-import { html, ref } from '@microsoft/fast-element';
+import { html } from '@microsoft/fast-element';
+import { overflow } from '../../../utilities/directive/overflow';
 export const template = 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}

package/dist/esm/table-column/text-base/group-header-view/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/group-header-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAoC;;UAEtD,GAAG,CAAC,UAAU,CAAC;iBACR,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;sBAC7C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;qBAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE;iBAC/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;;UAEhE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;;CAEvB,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/group-header-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAEjE,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAoC;;UAEtD,QAAQ,CAAC,aAAa,CAAC;iBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;iBAClD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;;UAEhE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;;CAEvB,CAAC"}

package/dist/esm/utilities/directive/overflow.d.ts

@@ -0,0 +1,36 @@
+import { type Behavior, type CaptureType } from '@microsoft/fast-element';
+/**
+ * The runtime behavior for template overflow detection.
+ * @public
+ */
+export declare class OverflowBehavior implements Behavior {
+    private readonly target;
+    private propertyName;
+    private mouseOverHandler;
+    private mouseOutHandler;
+    private source;
+    /**
+     * 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: HTMLElement, propertyName: string);
+    /**
+     * 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: unknown): void;
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     */
+    unbind(): void;
+    private setSourceValue;
+}
+/**
+ * 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
+ */
+export declare function overflow<T = unknown>(propertyName: keyof T & string): CaptureType<T>;

package/dist/esm/utilities/directive/overflow.js

@@ -0,0 +1,56 @@
+import { AttachedBehaviorHTMLDirective } from '@microsoft/fast-element';
+/**
+ * The runtime behavior for template overflow detection.
+ * @public
+ */
+export 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
+ */
+export function overflow(propertyName) {
+    return new AttachedBehaviorHTMLDirective('nimble-overflow', OverflowBehavior, propertyName);
+}
+//# sourceMappingURL=overflow.js.map

package/dist/esm/utilities/directive/overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow.js","sourceRoot":"","sources":["../../../../src/utilities/directive/overflow.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,6BAA6B,EAGhC,MAAM,yBAAyB,CAAC;AAEjC;;;GAGG;AACH,MAAM,OAAO,gBAAgB;IAKzB;;;;OAIG;IACH,YACqB,MAAmB,EAC5B,YAAoB;QADX,WAAM,GAAN,MAAM,CAAa;QAC5B,iBAAY,GAAZ,YAAY,CAAQ;IAC7B,CAAC;IAEJ;;;;OAIG;IACI,IAAI,CAAC,MAAe;QACvB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAC3B,IAAI,CAAC,gBAAgB,GAAG,GAAG,EAAE;YACzB,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC;YACtE,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;QACrC,CAAC,CAAC;QACF,IAAI,CAAC,eAAe,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC,CAAC;QACF,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACjE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IACnE,CAAC;IAED;;;OAGG;IACI,MAAM;QACT,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;QACxB,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACpE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IACtE,CAAC;IAEO,cAAc,CAAC,KAAc;QACjC,0CAA0C;QAC1C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;IAC3C,CAAC;CACJ;AAED;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CACpB,YAA8B;IAE9B,OAAO,IAAI,6BAA6B,CACpC,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,CACf,CAAC;AACN,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "19.4.2",
+  "version": "19.4.4",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",