@ni/ok-components 1.5.2 → 1.6.1

package/dist/custom-elements.json

@@ -16,13 +16,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/ts/all-ts.ts",
+      "path": "src/fv/all-fv.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/fv/all-fv.ts",
+      "path": "src/ts/all-ts.ts",
       "declarations": [],
       "exports": []
     },
@@ -67,74 +67,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/ts/icon-dynamic/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Base class for dynamic icons. Not intended to be used directly, instead use to register dynamic icons:\n```\ncustomElements.get('ok-ts-icon-dynamic').registerIconDynamic('ok-ts-icon-dynamic-awesome', '<img data uri or arbitrary url>');\n```\nAfter calling successfully, the icon can be used like any other icon:\n```\n<ok-ts-icon-dynamic-awesome></ok-ts-icon-dynamic-awesome>\n<nimble-mapping-icon icon=\"ok-ts-icon-dynamic-awesome\"></nimble-mapping-icon>\n```",
-          "name": "TsIconDynamic",
-          "members": [
-            {
-              "kind": "method",
-              "name": "registerIconDynamic",
-              "privacy": "public",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "tagName",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "url",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            }
-          ],
-          "superclass": {
-            "name": "Icon",
-            "package": "@ni/nimble-components/dist/esm/icon-base"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "tsIconDynamicTag",
-          "type": {
-            "text": "string"
-          },
-          "default": "'ok-ts-icon-dynamic'"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "TsIconDynamic",
-          "declaration": {
-            "name": "TsIconDynamic",
-            "module": "src/ts/icon-dynamic/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "tsIconDynamicTag",
-          "declaration": {
-            "name": "tsIconDynamicTag",
-            "module": "src/ts/icon-dynamic/index.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/fv/accordion-item/index.ts",
@@ -876,6 +808,329 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv/master-detail-list/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A filterable master-detail list with keyboard selection.",
+          "name": "FvMasterDetailList",
+          "members": [
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "'Filter items...'"
+            },
+            {
+              "kind": "field",
+              "name": "filterInput",
+              "type": {
+                "text": "HTMLInputElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "selectedItem",
+              "type": {
+                "text": "FvMasterDetailListItem | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "visibleItems",
+              "type": {
+                "text": "FvMasterDetailListItem[]"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "refreshItems",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "applyFilter",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "emitSelectionChange",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setSelectedItem",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "nextItem",
+                  "type": {
+                    "text": "FvMasterDetailListItem | null"
+                  }
+                },
+                {
+                  "name": "emitChange",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Filter items...'",
+              "fieldName": "placeholder"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@ni/fast-foundation"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "fvMasterDetailListTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'ok-fv-master-detail-list'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FvMasterDetailList",
+          "declaration": {
+            "name": "FvMasterDetailList",
+            "module": "src/fv/master-detail-list/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fvMasterDetailListTag",
+          "declaration": {
+            "name": "fvMasterDetailListTag",
+            "module": "src/fv/master-detail-list/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv/master-detail-list-item/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A selectable master-detail list item with title, subtitle, and optional status content.",
+          "name": "FvMasterDetailListItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "titleText",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "subtitle",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "statusColor",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "statusLabel",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''"
+            },
+            {
+              "kind": "method",
+              "name": "syncSelectionAria",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "title-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "titleText"
+            },
+            {
+              "name": "subtitle",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "subtitle"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "value"
+            },
+            {
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "compact"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selected"
+            },
+            {
+              "name": "status-color",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "statusColor"
+            },
+            {
+              "name": "status-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "statusLabel"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@ni/fast-foundation"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "fvMasterDetailListItemTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'ok-fv-master-detail-list-item'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FvMasterDetailListItem",
+          "declaration": {
+            "name": "FvMasterDetailListItem",
+            "module": "src/fv/master-detail-list-item/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fvMasterDetailListItemTag",
+          "declaration": {
+            "name": "fvMasterDetailListItemTag",
+            "module": "src/fv/master-detail-list-item/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/fv/search-input/index.ts",
@@ -1744,6 +1999,74 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/ts/icon-dynamic/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Base class for dynamic icons. Not intended to be used directly, instead use to register dynamic icons:\n```\ncustomElements.get('ok-ts-icon-dynamic').registerIconDynamic('ok-ts-icon-dynamic-awesome', '<img data uri or arbitrary url>');\n```\nAfter calling successfully, the icon can be used like any other icon:\n```\n<ok-ts-icon-dynamic-awesome></ok-ts-icon-dynamic-awesome>\n<nimble-mapping-icon icon=\"ok-ts-icon-dynamic-awesome\"></nimble-mapping-icon>\n```",
+          "name": "TsIconDynamic",
+          "members": [
+            {
+              "kind": "method",
+              "name": "registerIconDynamic",
+              "privacy": "public",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "tagName",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "url",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            }
+          ],
+          "superclass": {
+            "name": "Icon",
+            "package": "@ni/nimble-components/dist/esm/icon-base"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "tsIconDynamicTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'ok-ts-icon-dynamic'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TsIconDynamic",
+          "declaration": {
+            "name": "TsIconDynamic",
+            "module": "src/ts/icon-dynamic/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "tsIconDynamicTag",
+          "declaration": {
+            "name": "tsIconDynamicTag",
+            "module": "src/ts/icon-dynamic/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/ts/table-column/breakpoint/index.ts",

package/dist/custom-elements.md

@@ -8,22 +8,6 @@
 
 <hr/>
 
-## class: `TsIconDynamic`
-
-### Superclass
-
-| Name   | Module | Package                                  |
-| ------ | ------ | ---------------------------------------- |
-| `Icon` |        | @ni/nimble-components/dist/esm/icon-base |
-
-### Static Methods
-
-| Name                  | Privacy | Description | Parameters                     | Return | Inherited From |
-| --------------------- | ------- | ----------- | ------------------------------ | ------ | -------------- |
-| `registerIconDynamic` | public  |             | `tagName: string, url: string` | `void` |                |
-
-<hr/>
-
 ## class: `FvAccordionItem`
 
 ### Superclass
@@ -152,6 +136,68 @@
 
 <hr/>
 
+## class: `FvMasterDetailList`
+
+### Superclass
+
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
+
+### Fields
+
+| Name          | Privacy | Type     | Default             | Description | Inherited From |
+| ------------- | ------- | -------- | ------------------- | ----------- | -------------- |
+| `placeholder` | public  | `string` | `'Filter items...'` |             |                |
+
+### Events
+
+| Name     | Type          | Description | Inherited From |
+| -------- | ------------- | ----------- | -------------- |
+| `change` | `CustomEvent` |             |                |
+
+### Attributes
+
+| Name          | Field       | Inherited From |
+| ------------- | ----------- | -------------- |
+| `placeholder` | placeholder |                |
+
+<hr/>
+
+## class: `FvMasterDetailListItem`
+
+### Superclass
+
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
+
+### Fields
+
+| Name          | Privacy | Type      | Default | Description | Inherited From |
+| ------------- | ------- | --------- | ------- | ----------- | -------------- |
+| `titleText`   | public  | `string`  | `''`    |             |                |
+| `subtitle`    | public  | `string`  | `''`    |             |                |
+| `value`       | public  | `string`  | `''`    |             |                |
+| `compact`     | public  | `boolean` | `false` |             |                |
+| `selected`    | public  | `boolean` | `false` |             |                |
+| `statusColor` | public  | `string`  | `''`    |             |                |
+| `statusLabel` | public  | `string`  | `''`    |             |                |
+
+### Attributes
+
+| Name           | Field       | Inherited From |
+| -------------- | ----------- | -------------- |
+| `title-text`   | titleText   |                |
+| `subtitle`     | subtitle    |                |
+| `value`        | value       |                |
+| `compact`      | compact     |                |
+| `selected`     | selected    |                |
+| `status-color` | statusColor |                |
+| `status-label` | statusLabel |                |
+
+<hr/>
+
 ## class: `FvSearchInput`
 
 ### Superclass
@@ -324,6 +370,22 @@
 
 <hr/>
 
+## class: `TsIconDynamic`
+
+### Superclass
+
+| Name   | Module | Package                                  |
+| ------ | ------ | ---------------------------------------- |
+| `Icon` |        | @ni/nimble-components/dist/esm/icon-base |
+
+### Static Methods
+
+| Name                  | Privacy | Description | Parameters                     | Return | Inherited From |
+| --------------------- | ------- | ----------- | ------------------------------ | ------ | -------------- |
+| `registerIconDynamic` | public  |             | `tagName: string, url: string` | `void` |                |
+
+<hr/>
+
 ## class: `TsTableColumnBreakpoint`
 
 ### Superclass

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

@@ -2,6 +2,8 @@ import './accordion-item';
 import './card';
 import './chip-selector';
 import './context-help';
+import './master-detail-list-item';
+import './master-detail-list';
 import './split-button';
 import './split-button-anchor';
 import './summary-panel';

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

@@ -2,6 +2,8 @@ import './accordion-item';
 import './card';
 import './chip-selector';
 import './context-help';
+import './master-detail-list-item';
+import './master-detail-list';
 import './split-button';
 import './split-button-anchor';
 import './summary-panel';

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,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 './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,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"]}

package/dist/esm/fv/master-detail-list/index.d.ts

@@ -0,0 +1,50 @@
+import { FoundationElement } from '@ni/fast-foundation';
+import { FvMasterDetailListItem } from '../master-detail-list-item';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-master-detail-list': FvMasterDetailList;
+    }
+}
+export interface FvMasterDetailListChangeDetail {
+    item: FvMasterDetailListItem | null;
+    value: string | null;
+}
+/**
+ * A filterable master-detail list with keyboard selection.
+ */
+export declare class FvMasterDetailList extends FoundationElement {
+    placeholder: string;
+    /** @internal */
+    filterText: string;
+    /** @internal */
+    activeItemId: string | null;
+    /** @internal */
+    items: FvMasterDetailListItem[];
+    /** @internal */
+    readonly inputId: string;
+    /** @internal */
+    readonly listboxId: string;
+    private filterInput;
+    private selectedItem;
+    /** @internal */
+    connectedCallback(): void;
+    /** @internal */
+    filterTextChanged(): void;
+    /** @internal */
+    captureFilterInput(input: HTMLInputElement | null): void;
+    /** @internal */
+    get hasVisibleItems(): boolean;
+    /** @internal */
+    handleFilterInput(event: Event): void;
+    /** @internal */
+    handleFilterKeydown(event: KeyboardEvent): boolean;
+    /** @internal */
+    handleItemsSlotChange(): void;
+    /** @internal */
+    handleItemsClick(event: Event): void;
+    private get visibleItems();
+    private refreshItems;
+    private applyFilter;
+    private setSelectedItem;
+}
+export declare const fvMasterDetailListTag = "ok-fv-master-detail-list";