@ni/ok-components 1.7.0 → 1.8.1

package/dist/custom-elements.json

@@ -67,6 +67,124 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv/accordion-item/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An accordion item component that can be expanded or collapsed to\nshow or hide its content.",
+          "name": "FvAccordionItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "header",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "FvAccordionItemAppearance"
+              },
+              "privacy": "public"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "header",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "header"
+            },
+            {
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "expanded"
+            },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "FvAccordionItemAppearance"
+              },
+              "fieldName": "appearance"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@ni/fast-foundation"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "fvAccordionItemTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'ok-fv-accordion-item'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FvAccordionItem",
+          "declaration": {
+            "name": "FvAccordionItem",
+            "module": "src/fv/accordion-item/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fvAccordionItemTag",
+          "declaration": {
+            "name": "fvAccordionItemTag",
+            "module": "src/fv/accordion-item/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv/accordion-item/types.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "FvAccordionItemAppearance",
+          "type": {
+            "text": "{\n    outline: 'outline',\n    ghost: 'ghost',\n    block: 'block'\n}"
+          },
+          "default": "{ outline: 'outline', ghost: 'ghost', block: 'block' }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FvAccordionItemAppearance",
+          "declaration": {
+            "name": "FvAccordionItemAppearance",
+            "module": "src/fv/accordion-item/types.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/fv/card/index.ts",
@@ -690,124 +808,6 @@
       "declarations": [],
       "exports": []
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/fv/accordion-item/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "An accordion item component that can be expanded or collapsed to\nshow or hide its content.",
-          "name": "FvAccordionItem",
-          "members": [
-            {
-              "kind": "field",
-              "name": "header",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "''"
-            },
-            {
-              "kind": "field",
-              "name": "expanded",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "appearance",
-              "type": {
-                "text": "FvAccordionItemAppearance"
-              },
-              "privacy": "public"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "header",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "header"
-            },
-            {
-              "name": "expanded",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "expanded"
-            },
-            {
-              "name": "appearance",
-              "type": {
-                "text": "FvAccordionItemAppearance"
-              },
-              "fieldName": "appearance"
-            }
-          ],
-          "superclass": {
-            "name": "FoundationElement",
-            "package": "@ni/fast-foundation"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "fvAccordionItemTag",
-          "type": {
-            "text": "string"
-          },
-          "default": "'ok-fv-accordion-item'"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FvAccordionItem",
-          "declaration": {
-            "name": "FvAccordionItem",
-            "module": "src/fv/accordion-item/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "fvAccordionItemTag",
-          "declaration": {
-            "name": "fvAccordionItemTag",
-            "module": "src/fv/accordion-item/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/fv/accordion-item/types.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "FvAccordionItemAppearance",
-          "type": {
-            "text": "{\n    outline: 'outline',\n    ghost: 'ghost',\n    block: 'block'\n}"
-          },
-          "default": "{ outline: 'outline', ghost: 'ghost', block: 'block' }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FvAccordionItemAppearance",
-          "declaration": {
-            "name": "FvAccordionItemAppearance",
-            "module": "src/fv/accordion-item/types.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/fv/master-detail-list/index.ts",
@@ -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",
@@ -1750,6 +1827,14 @@
               "privacy": "public",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "FvSummaryPanelSizeType"
+              },
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "editItemsButtonLabel",
@@ -1759,9 +1844,39 @@
               "privacy": "public",
               "default": "'Configure'"
             },
+            {
+              "kind": "field",
+              "name": "summaryItemsResizeObserver",
+              "type": {
+                "text": "ResizeObserver"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "new ResizeObserver(() => this.updateOverflow())"
+            },
+            {
+              "kind": "method",
+              "name": "observeSummaryItems",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
-              "name": "syncTileLegacyStyle",
+              "name": "updateOverflow",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "syncTileAttributes",
               "privacy": "private",
               "return": {
                 "type": {
@@ -1795,6 +1910,13 @@
               "default": "false",
               "fieldName": "legacyStyle"
             },
+            {
+              "name": "size",
+              "type": {
+                "text": "FvSummaryPanelSizeType"
+              },
+              "fieldName": "size"
+            },
             {
               "name": "edit-items-button-label",
               "type": {
@@ -1819,6 +1941,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "FvSummaryPanelSize",
+          "declaration": {
+            "name": "FvSummaryPanelSize",
+            "module": "./types"
+          }
+        },
         {
           "kind": "js",
           "name": "FvSummaryPanel",
@@ -1837,6 +1967,30 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv/summary-panel/types.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "FvSummaryPanelSize",
+          "type": {
+            "text": "{\n    default: 'default',\n    compact: 'compact'\n}"
+          },
+          "default": "{ default: 'default', compact: 'compact' }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FvSummaryPanelSize",
+          "declaration": {
+            "name": "FvSummaryPanelSize",
+            "module": "src/fv/summary-panel/types.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/fv/summary-panel-tile/index.ts",
@@ -1873,6 +2027,14 @@
               "privacy": "public",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "FvSummaryPanelSizeType"
+              },
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "selected",
@@ -1926,6 +2088,13 @@
               "default": "false",
               "fieldName": "legacyStyle"
             },
+            {
+              "name": "size",
+              "type": {
+                "text": "FvSummaryPanelSizeType"
+              },
+              "fieldName": "size"
+            },
             {
               "name": "selected",
               "type": {

package/dist/custom-elements.md

@@ -8,6 +8,32 @@
 
 <hr/>
 
+## class: `FvAccordionItem`
+
+### Superclass
+
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
+
+### Fields
+
+| Name         | Privacy | Type                        | Default | Description | Inherited From |
+| ------------ | ------- | --------------------------- | ------- | ----------- | -------------- |
+| `header`     | public  | `string`                    | `''`    |             |                |
+| `expanded`   | public  | `boolean`                   | `false` |             |                |
+| `appearance` | public  | `FvAccordionItemAppearance` |         |             |                |
+
+### Attributes
+
+| Name         | Field      | Inherited From |
+| ------------ | ---------- | -------------- |
+| `header`     | header     |                |
+| `expanded`   | expanded   |                |
+| `appearance` | appearance |                |
+
+<hr/>
+
 ## class: `FvCard`
 
 ### Superclass
@@ -110,32 +136,6 @@
 
 <hr/>
 
-## class: `FvAccordionItem`
-
-### Superclass
-
-| Name                | Module | Package             |
-| ------------------- | ------ | ------------------- |
-| `FoundationElement` |        | @ni/fast-foundation |
-
-### Fields
-
-| Name         | Privacy | Type                        | Default | Description | Inherited From |
-| ------------ | ------- | --------------------------- | ------- | ----------- | -------------- |
-| `header`     | public  | `string`                    | `''`    |             |                |
-| `expanded`   | public  | `boolean`                   | `false` |             |                |
-| `appearance` | public  | `FvAccordionItemAppearance` |         |             |                |
-
-### Attributes
-
-| Name         | Field      | Inherited From |
-| ------------ | ---------- | -------------- |
-| `header`     | header     |                |
-| `expanded`   | expanded   |                |
-| `appearance` | appearance |                |
-
-<hr/>
-
 ## class: `FvMasterDetailList`
 
 ### Superclass
@@ -308,6 +308,16 @@
 
 <hr/>
 
+## class: `FvStickyHeader`
+
+### Superclass
+
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
+
+<hr/>
+
 ## class: `FvSummaryPanel`
 
 ### Superclass
@@ -318,11 +328,12 @@
 
 ### Fields
 
-| Name                   | Privacy | Type      | Default       | Description | Inherited From |
-| ---------------------- | ------- | --------- | ------------- | ----------- | -------------- |
-| `showEditItemsButton`  | public  | `boolean` | `false`       |             |                |
-| `legacyStyle`          | public  | `boolean` | `false`       |             |                |
-| `editItemsButtonLabel` | public  | `string`  | `'Configure'` |             |                |
+| Name                   | Privacy | Type                     | Default       | Description | Inherited From |
+| ---------------------- | ------- | ------------------------ | ------------- | ----------- | -------------- |
+| `showEditItemsButton`  | public  | `boolean`                | `false`       |             |                |
+| `legacyStyle`          | public  | `boolean`                | `false`       |             |                |
+| `size`                 | public  | `FvSummaryPanelSizeType` |               |             |                |
+| `editItemsButtonLabel` | public  | `string`                 | `'Configure'` |             |                |
 
 ### Events
 
@@ -336,6 +347,7 @@
 | ------------------------- | -------------------- | -------------- |
 | `show-edit-items-button`  | showEditItemsButton  |                |
 | `legacy-style`            | legacyStyle          |                |
+| `size`                    | size                 |                |
 | `edit-items-button-label` | editItemsButtonLabel |                |
 
 <hr/>
@@ -355,6 +367,7 @@
 | `count`        | public  | `string`                             | `''`    |             |                |
 | `label`        | public  | `string`                             | `''`    |             |                |
 | `legacyStyle`  | public  | `boolean`                            | `false` |             |                |
+| `size`         | public  | `FvSummaryPanelSizeType`             |         |             |                |
 | `selected`     | public  | `boolean`                            | `false` |             |                |
 | `textPosition` | public  | `FvSummaryPanelTileTextPositionType` |         |             |                |
 
@@ -365,6 +378,7 @@
 | `count`         | count        |                |
 | `label`         | label        |                |
 | `legacy-style`  | legacyStyle  |                |
+| `size`          | size         |                |
 | `selected`      | selected     |                |
 | `text-position` | textPosition |                |
 

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";