@ni/ok-components 1.8.0 → 1.8.1

package/dist/custom-elements.json

@@ -1723,6 +1723,83 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv/sticky-header/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Displays an alternate header in a sticky overlay after the primary header leaves the viewport.",
+          "name": "FvStickyHeader",
+          "members": [
+            {
+              "kind": "field",
+              "name": "headerVisibility",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Map<Element, boolean>()"
+            },
+            {
+              "kind": "field",
+              "name": "headerIntersectionObserver",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new IntersectionObserver(entries => { this.handleHeaderIntersection(entries); })"
+            },
+            {
+              "kind": "method",
+              "name": "observeHeader",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateStickyHeaderContent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@ni/fast-foundation"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "fvStickyHeaderTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'ok-fv-sticky-header'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FvStickyHeader",
+          "declaration": {
+            "name": "FvStickyHeader",
+            "module": "src/fv/sticky-header/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fvStickyHeaderTag",
+          "declaration": {
+            "name": "fvStickyHeaderTag",
+            "module": "src/fv/sticky-header/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/fv/summary-panel/index.ts",

package/dist/custom-elements.md

@@ -308,6 +308,16 @@
 
 <hr/>
 
+## class: `FvStickyHeader`
+
+### Superclass
+
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
+
+<hr/>
+
 ## class: `FvSummaryPanel`
 
 ### Superclass

package/dist/esm/fv/all-fv.d.ts

@@ -6,6 +6,7 @@ import './master-detail-list-item';
 import './master-detail-list';
 import './split-button';
 import './split-button-anchor';
+import './sticky-header';
 import './summary-panel';
 import './summary-panel-tile';
 import './search-input';

package/dist/esm/fv/all-fv.js

@@ -6,6 +6,7 @@ import './master-detail-list-item';
 import './master-detail-list';
 import './split-button';
 import './split-button-anchor';
+import './sticky-header';
 import './summary-panel';
 import './summary-panel-tile';
 import './search-input';

package/dist/esm/fv/all-fv.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-fv.js","sourceRoot":"","sources":["../../../src/fv/all-fv.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,QAAQ,CAAC;AAChB,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,2BAA2B,CAAC;AACnC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC;AACxB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC","sourcesContent":["import './accordion-item';\nimport './card';\nimport './chip-selector';\nimport './context-help';\nimport './master-detail-list-item';\nimport './master-detail-list';\nimport './split-button';\nimport './split-button-anchor';\nimport './summary-panel';\nimport './summary-panel-tile';\nimport './search-input';\n"]}
+{"version":3,"file":"all-fv.js","sourceRoot":"","sources":["../../../src/fv/all-fv.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,QAAQ,CAAC;AAChB,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,2BAA2B,CAAC;AACnC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC;AACxB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC","sourcesContent":["import './accordion-item';\nimport './card';\nimport './chip-selector';\nimport './context-help';\nimport './master-detail-list-item';\nimport './master-detail-list';\nimport './split-button';\nimport './split-button-anchor';\nimport './sticky-header';\nimport './summary-panel';\nimport './summary-panel-tile';\nimport './search-input';\n"]}

package/dist/esm/fv/sticky-header/index.d.ts

@@ -0,0 +1,38 @@
+import { FoundationElement } from '@ni/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-sticky-header': FvStickyHeader;
+    }
+}
+/**
+ * Displays an alternate header in a sticky overlay after the primary header leaves the viewport.
+ */
+export declare class FvStickyHeader extends FoundationElement {
+    /** @internal */
+    hasHeader: boolean;
+    /** @internal */
+    hasStickyHeader: boolean;
+    /** @internal */
+    headerIsVisible: boolean;
+    /** @internal */
+    showStickyHeader: boolean;
+    /** @internal */
+    readonly headerSlot: HTMLSlotElement;
+    /** @internal */
+    readonly stickyHeaderSlot: HTMLSlotElement;
+    private readonly headerVisibility;
+    private readonly headerIntersectionObserver;
+    /** @internal */
+    connectedCallback(): void;
+    /** @internal */
+    disconnectedCallback(): void;
+    /** @internal */
+    handleHeaderSlotChange(): void;
+    /** @internal */
+    handleStickyHeaderSlotChange(event: Event): void;
+    /** @internal */
+    handleHeaderIntersection(entries: IntersectionObserverEntry[]): void;
+    private observeHeader;
+    private updateStickyHeaderContent;
+}
+export declare const fvStickyHeaderTag = "ok-fv-sticky-header";

package/dist/esm/fv/sticky-header/index.js

@@ -0,0 +1,90 @@
+import { __decorate } from "tslib";
+import { observable } from '@ni/fast-element';
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * Displays an alternate header in a sticky overlay after the primary header leaves the viewport.
+ */
+export class FvStickyHeader extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.hasHeader = false;
+        /** @internal */
+        this.hasStickyHeader = false;
+        /** @internal */
+        this.headerIsVisible = true;
+        /** @internal */
+        this.showStickyHeader = false;
+        this.headerVisibility = new Map();
+        this.headerIntersectionObserver = new IntersectionObserver(entries => {
+            this.handleHeaderIntersection(entries);
+        });
+    }
+    /** @internal */
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateStickyHeaderContent();
+        this.observeHeader();
+    }
+    /** @internal */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.headerIntersectionObserver.disconnect();
+    }
+    /** @internal */
+    handleHeaderSlotChange() {
+        this.observeHeader();
+    }
+    /** @internal */
+    handleStickyHeaderSlotChange(event) {
+        this.hasStickyHeader = event.target.assignedElements({ flatten: true }).length > 0;
+        this.updateStickyHeaderContent();
+    }
+    /** @internal */
+    handleHeaderIntersection(entries) {
+        entries.forEach(entry => {
+            const hasLeftViewport = !entry.isIntersecting && entry.boundingClientRect.top < 0;
+            this.headerVisibility.set(entry.target, !hasLeftViewport);
+        });
+        this.headerIsVisible = Array.from(this.headerVisibility.values()).some(Boolean);
+        this.updateStickyHeaderContent();
+    }
+    observeHeader() {
+        this.headerIntersectionObserver.disconnect();
+        const headerElements = this.headerSlot.assignedElements({ flatten: true });
+        this.hasHeader = headerElements.length > 0;
+        this.headerIsVisible = true;
+        this.headerVisibility.clear();
+        headerElements.forEach(element => {
+            this.headerVisibility.set(element, true);
+            this.headerIntersectionObserver.observe(element);
+        });
+        this.updateStickyHeaderContent();
+    }
+    updateStickyHeaderContent() {
+        this.hasStickyHeader = this.stickyHeaderSlot.assignedElements({ flatten: true }).length > 0;
+        this.showStickyHeader = this.hasHeader && this.hasStickyHeader && !this.headerIsVisible;
+    }
+}
+__decorate([
+    observable
+], FvStickyHeader.prototype, "hasHeader", void 0);
+__decorate([
+    observable
+], FvStickyHeader.prototype, "hasStickyHeader", void 0);
+__decorate([
+    observable
+], FvStickyHeader.prototype, "headerIsVisible", void 0);
+__decorate([
+    observable
+], FvStickyHeader.prototype, "showStickyHeader", void 0);
+const okFvStickyHeader = FvStickyHeader.compose({
+    baseName: 'fv-sticky-header',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okFvStickyHeader());
+export const fvStickyHeaderTag = 'ok-fv-sticky-header';
+//# sourceMappingURL=index.js.map

package/dist/esm/fv/sticky-header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/sticky-header/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { observable } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-sticky-header': FvStickyHeader;\n    }\n}\n\n/**\n * Displays an alternate header in a sticky overlay after the primary header leaves the viewport.\n */\nexport class FvStickyHeader extends FoundationElement {\n    /** @internal */\n    @observable\n    public hasHeader = false;\n\n    /** @internal */\n    @observable\n    public hasStickyHeader = false;\n\n    /** @internal */\n    @observable\n    public headerIsVisible = true;\n\n    /** @internal */\n    @observable\n    public showStickyHeader = false;\n\n    /** @internal */\n    public readonly headerSlot!: HTMLSlotElement;\n\n    /** @internal */\n    public readonly stickyHeaderSlot!: HTMLSlotElement;\n\n    private readonly headerVisibility = new Map<Element, boolean>();\n    private readonly headerIntersectionObserver = new IntersectionObserver(entries => {\n        this.handleHeaderIntersection(entries);\n    });\n\n    /** @internal */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.updateStickyHeaderContent();\n        this.observeHeader();\n    }\n\n    /** @internal */\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.headerIntersectionObserver.disconnect();\n    }\n\n    /** @internal */\n    public handleHeaderSlotChange(): void {\n        this.observeHeader();\n    }\n\n    /** @internal */\n    public handleStickyHeaderSlotChange(event: Event): void {\n        this.hasStickyHeader = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n        this.updateStickyHeaderContent();\n    }\n\n    /** @internal */\n    public handleHeaderIntersection(entries: IntersectionObserverEntry[]): void {\n        entries.forEach(entry => {\n            const hasLeftViewport = !entry.isIntersecting && entry.boundingClientRect.top < 0;\n            this.headerVisibility.set(entry.target, !hasLeftViewport);\n        });\n        this.headerIsVisible = Array.from(this.headerVisibility.values()).some(Boolean);\n        this.updateStickyHeaderContent();\n    }\n\n    private observeHeader(): void {\n        this.headerIntersectionObserver.disconnect();\n        const headerElements = this.headerSlot.assignedElements({ flatten: true });\n        this.hasHeader = headerElements.length > 0;\n        this.headerIsVisible = true;\n        this.headerVisibility.clear();\n        headerElements.forEach(element => {\n            this.headerVisibility.set(element, true);\n            this.headerIntersectionObserver.observe(element);\n        });\n        this.updateStickyHeaderContent();\n    }\n\n    private updateStickyHeaderContent(): void {\n        this.hasStickyHeader = this.stickyHeaderSlot.assignedElements({ flatten: true }).length > 0;\n        this.showStickyHeader = this.hasHeader && this.hasStickyHeader && !this.headerIsVisible;\n    }\n}\n\nconst okFvStickyHeader = FvStickyHeader.compose({\n    baseName: 'fv-sticky-header',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvStickyHeader());\nexport const fvStickyHeaderTag = 'ok-fv-sticky-header';\n"]}

package/dist/esm/fv/sticky-header/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@ni/fast-element").ElementStyles;

package/dist/esm/fv/sticky-header/styles.js

@@ -0,0 +1,22 @@
+import { css } from '@ni/fast-element';
+import { elevation2BoxShadow, headerBackgroundColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../utilities/style/display';
+export const styles = css `
+    ${display('block')}
+
+    .sticky-header {
+        position: fixed;
+        inset-block-start: 0;
+        inset-inline: 0;
+        z-index: 1;
+        box-sizing: border-box;
+        width: 100%;
+        background-color: var(${headerBackgroundColor.cssCustomProperty});
+        box-shadow: var(${elevation2BoxShadow.cssCustomProperty});
+    }
+
+    .sticky-header[hidden] {
+        display: none;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/fv/sticky-header/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/sticky-header/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,6DAA6D,CAAC;AACzH,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;gCASU,qBAAqB,CAAC,iBAAiB;0BAC7C,mBAAmB,CAAC,iBAAiB;;;;;;CAM9D,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { elevation2BoxShadow, headerBackgroundColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    ${display('block')}\n\n    .sticky-header {\n        position: fixed;\n        inset-block-start: 0;\n        inset-inline: 0;\n        z-index: 1;\n        box-sizing: border-box;\n        width: 100%;\n        background-color: var(${headerBackgroundColor.cssCustomProperty});\n        box-shadow: var(${elevation2BoxShadow.cssCustomProperty});\n    }\n\n    .sticky-header[hidden] {\n        display: none;\n    }\n`;\n"]}

package/dist/esm/fv/sticky-header/template.d.ts

@@ -0,0 +1,2 @@
+import type { FvStickyHeader } from '.';
+export declare const template: import("@ni/fast-element").ViewTemplate<FvStickyHeader, any>;

package/dist/esm/fv/sticky-header/template.js

@@ -0,0 +1,22 @@
+import { html, ref } from '@ni/fast-element';
+export const template = html `
+    <div class="header" part="header">
+        <slot
+            name="header"
+            ${ref('headerSlot')}
+            @slotchange="${x => x.handleHeaderSlotChange()}"
+        ></slot>
+    </div>
+    <div
+        class="sticky-header"
+        part="sticky-header"
+        ?hidden="${x => !x.showStickyHeader}"
+    >
+        <slot
+            name="sticky-header"
+            ${ref('stickyHeaderSlot')}
+            @slotchange="${(x, c) => x.handleStickyHeaderSlotChange(c.event)}"
+        ></slot>
+    </div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv/sticky-header/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/sticky-header/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAG7C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAgB;;;;cAI9B,GAAG,CAAC,YAAY,CAAC;2BACJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,sBAAsB,EAAE;;;;;;mBAMvC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,gBAAgB;;;;cAI7B,GAAG,CAAC,kBAAkB,CAAC;2BACV,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,KAAK,CAAC;;;CAG3E,CAAC","sourcesContent":["import { html, ref } from '@ni/fast-element';\nimport type { FvStickyHeader } from '.';\n\nexport const template = html<FvStickyHeader>`\n    <div class=\"header\" part=\"header\">\n        <slot\n            name=\"header\"\n            ${ref('headerSlot')}\n            @slotchange=\"${x => x.handleHeaderSlotChange()}\"\n        ></slot>\n    </div>\n    <div\n        class=\"sticky-header\"\n        part=\"sticky-header\"\n        ?hidden=\"${x => !x.showStickyHeader}\"\n    >\n        <slot\n            name=\"sticky-header\"\n            ${ref('stickyHeaderSlot')}\n            @slotchange=\"${(x, c) => x.handleStickyHeaderSlotChange(c.event)}\"\n        ></slot>\n    </div>\n`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/ok-components",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "NI Ok Components",
   "scripts": {
     "build": "npm run build:components && npm run build:cem",