@ni/ok-components 1.12.4 → 1.14.0

package/dist/custom-elements.json

@@ -1518,6 +1518,222 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv/filter-bar/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Displays an active query and dispatches edit and clear actions.",
+          "name": "FvFilterBar",
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "'Filters'",
+              "description": "Text shown before the active query expression."
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Prevents editing and clearing the displayed query."
+            },
+            {
+              "kind": "field",
+              "name": "showClearButton",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "true",
+              "description": "Controls visibility of the clear button when a query is active."
+            },
+            {
+              "kind": "field",
+              "name": "query",
+              "type": {
+                "text": "FvFilterBarQueryDocument"
+              },
+              "privacy": "public",
+              "default": "{ version: 1, root: null }",
+              "description": "Query document shared with FvQueryBuilder."
+            },
+            {
+              "kind": "field",
+              "name": "definition",
+              "type": {
+                "text": "FvFilterBarDefinition | undefined"
+              },
+              "privacy": "public",
+              "description": "Field and operator labels used to display the query."
+            },
+            {
+              "kind": "field",
+              "name": "expression",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handleEditClick",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleClearClick",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "formatNode",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "FvFilterBarToken[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "node",
+                  "type": {
+                    "text": "FvFilterBarQueryNode"
+                  }
+                },
+                {
+                  "name": "isRoot",
+                  "default": "false"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "formatValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "unknown"
+                  }
+                },
+                {
+                  "name": "schema",
+                  "type": {
+                    "text": "unknown"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "edit-filter",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "clear-filter",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Filters'",
+              "description": "Text shown before the active query expression.",
+              "fieldName": "label"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevents editing and clearing the displayed query.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "show-clear-button",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Controls visibility of the clear button when a query is active.",
+              "fieldName": "showClearButton"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@ni/fast-foundation"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "fvFilterBarTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'ok-fv-filter-bar'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FvFilterBar",
+          "declaration": {
+            "name": "FvFilterBar",
+            "module": "src/fv/filter-bar/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fvFilterBarTag",
+          "declaration": {
+            "name": "fvFilterBarTag",
+            "module": "src/fv/filter-bar/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv/filter-bar/types.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/fv/master-detail-list/index.ts",
@@ -3542,6 +3758,196 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv/toolbar/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A Nimble toolbar that automatically collapses declaratively configured actions.",
+          "name": "FvToolbar",
+          "members": [
+            {
+              "kind": "field",
+              "name": "overflowLabel",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "'More actions'"
+            },
+            {
+              "kind": "field",
+              "name": "items",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Map<Button, ResponsiveItem>()"
+            },
+            {
+              "kind": "field",
+              "name": "resizeObserver",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new ResizeObserver(() => this.scheduleLayout())"
+            },
+            {
+              "kind": "field",
+              "name": "mutationObserver",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new MutationObserver(records => { for (const record of records) { const item = record.target instanceof Button ? this.items.get(record.target) : undefined; if (item && record.attributeName === 'hidden') { item.hidden = item.button.hidden; } if (item && record.attributeName === 'content-hidden') { item.contentHidden = item.button.contentHidden; } } this.scheduleLayout(); })"
+            },
+            {
+              "kind": "field",
+              "name": "observedChildren",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Set<Element>()"
+            },
+            {
+              "kind": "field",
+              "name": "frame",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "allSlottedItems",
+              "type": {
+                "text": "(HTMLElement | Node)[]"
+              },
+              "privacy": "protected",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "observeMutations",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "scheduleLayout",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "restoreItem",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "ResponsiveItem"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "syncItems",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ResponsiveItem[]"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateLayout",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "showOverflow",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "show",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "fits",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "overflow-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'More actions'",
+              "fieldName": "overflowLabel"
+            }
+          ],
+          "superclass": {
+            "name": "Toolbar",
+            "package": "@ni/nimble-components/dist/esm/toolbar"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "fvToolbarTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'ok-fv-toolbar'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FvToolbar",
+          "declaration": {
+            "name": "FvToolbar",
+            "module": "src/fv/toolbar/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fvToolbarTag",
+          "declaration": {
+            "name": "fvToolbarTag",
+            "module": "src/fv/toolbar/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/ts/icon-dynamic/index.ts",

package/dist/custom-elements.md

@@ -230,6 +230,49 @@
 
 <hr/>
 
+## class: `FvFilterBar`
+
+### Superclass
+
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
+
+### Fields
+
+| Name              | Privacy | Type                                 | Default                      | Description                                                     | Inherited From |
+| ----------------- | ------- | ------------------------------------ | ---------------------------- | --------------------------------------------------------------- | -------------- |
+| `label`           | public  | `string`                             | `'Filters'`                  | Text shown before the active query expression.                  |                |
+| `disabled`        | public  | `boolean`                            | `false`                      | Prevents editing and clearing the displayed query.              |                |
+| `showClearButton` | public  | `boolean`                            | `true`                       | Controls visibility of the clear button when a query is active. |                |
+| `query`           | public  | `FvFilterBarQueryDocument`           | `{ version: 1, root: null }` | Query document shared with FvQueryBuilder.                      |                |
+| `definition`      | public  | `FvFilterBarDefinition \| undefined` |                              | Field and operator labels used to display the query.            |                |
+| `expression`      | public  | `string`                             |                              |                                                                 |                |
+
+### Methods
+
+| Name               | Privacy | Description | Parameters | Return | Inherited From |
+| ------------------ | ------- | ----------- | ---------- | ------ | -------------- |
+| `handleEditClick`  | public  |             |            | `void` |                |
+| `handleClearClick` | public  |             |            | `void` |                |
+
+### Events
+
+| Name           | Type          | Description | Inherited From |
+| -------------- | ------------- | ----------- | -------------- |
+| `edit-filter`  | `CustomEvent` |             |                |
+| `clear-filter` | `CustomEvent` |             |                |
+
+### Attributes
+
+| Name                | Field           | Inherited From |
+| ------------------- | --------------- | -------------- |
+| `label`             | label           |                |
+| `disabled`          | disabled        |                |
+| `show-clear-button` | showClearButton |                |
+
+<hr/>
+
 ## class: `FvMasterDetailList`
 
 ### Superclass
@@ -565,6 +608,29 @@
 
 <hr/>
 
+## class: `FvToolbar`
+
+### Superclass
+
+| Name      | Module | Package                                |
+| --------- | ------ | -------------------------------------- |
+| `Toolbar` |        | @ni/nimble-components/dist/esm/toolbar |
+
+### Fields
+
+| Name              | Privacy   | Type                      | Default          | Description | Inherited From |
+| ----------------- | --------- | ------------------------- | ---------------- | ----------- | -------------- |
+| `overflowLabel`   | public    | `string`                  | `'More actions'` |             |                |
+| `allSlottedItems` | protected | `(HTMLElement \| Node)[]` |                  |             |                |
+
+### Attributes
+
+| Name             | Field         | Inherited From |
+| ---------------- | ------------- | -------------- |
+| `overflow-label` | overflowLabel |                |
+
+<hr/>
+
 ## class: `TsIconDynamic`
 
 ### Superclass

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

@@ -4,6 +4,7 @@ import './bulk-edit-field';
 import './chip-selector';
 import './context-help';
 import './edit-commit-bar';
+import './filter-bar';
 import './master-detail-list-item';
 import './master-detail-list';
 import './split-button';
@@ -14,3 +15,4 @@ import './summary-panel-tile';
 import './search-input';
 import './splitter';
 import './split-layout';
+import './toolbar';

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

@@ -4,6 +4,7 @@ import './bulk-edit-field';
 import './chip-selector';
 import './context-help';
 import './edit-commit-bar';
+import './filter-bar';
 import './master-detail-list-item';
 import './master-detail-list';
 import './split-button';
@@ -14,4 +15,5 @@ import './summary-panel-tile';
 import './search-input';
 import './splitter';
 import './split-layout';
+import './toolbar';
 //# sourceMappingURL=all-fv.js.map

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,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,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;AACxB,OAAO,YAAY,CAAC;AACpB,OAAO,gBAAgB,CAAC","sourcesContent":["import './accordion-item';\nimport './card';\nimport './bulk-edit-field';\nimport './chip-selector';\nimport './context-help';\nimport './edit-commit-bar';\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';\nimport './splitter';\nimport './split-layout';\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,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,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;AACxB,OAAO,YAAY,CAAC;AACpB,OAAO,gBAAgB,CAAC;AACxB,OAAO,WAAW,CAAC","sourcesContent":["import './accordion-item';\nimport './card';\nimport './bulk-edit-field';\nimport './chip-selector';\nimport './context-help';\nimport './edit-commit-bar';\nimport './filter-bar';\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';\nimport './splitter';\nimport './split-layout';\nimport './toolbar';\n"]}

package/dist/esm/fv/filter-bar/index.d.ts

@@ -0,0 +1,30 @@
+import { FoundationElement } from '@ni/fast-foundation';
+import type { FvFilterBarDefinition, FvFilterBarQueryDocument, FvFilterBarToken } from './types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-filter-bar': FvFilterBar;
+    }
+}
+/** Displays an active query and dispatches edit and clear actions. */
+export declare class FvFilterBar extends FoundationElement {
+    /** Text shown before the active query expression. */
+    label: string;
+    /** Prevents editing and clearing the displayed query. */
+    disabled: boolean;
+    /** Controls visibility of the clear button when a query is active. */
+    showClearButton: boolean;
+    /** Query document shared with FvQueryBuilder. */
+    query: FvFilterBarQueryDocument;
+    /** Field and operator labels used to display the query. */
+    definition?: FvFilterBarDefinition;
+    /** @internal */
+    editButton: HTMLButtonElement;
+    get expression(): string;
+    /** @internal */
+    get queryTokens(): readonly FvFilterBarToken[];
+    handleEditClick(): void;
+    handleClearClick(): void;
+    private formatNode;
+    private formatValue;
+}
+export declare const fvFilterBarTag = "ok-fv-filter-bar";

package/dist/esm/fv/filter-bar/index.js

@@ -0,0 +1,120 @@
+import { __decorate } from "tslib";
+import { attr, observable, volatile } from '@ni/fast-element';
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+/** Displays an active query and dispatches edit and clear actions. */
+export class FvFilterBar extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /** Text shown before the active query expression. */
+        this.label = 'Filters';
+        /** Prevents editing and clearing the displayed query. */
+        this.disabled = false;
+        /** Controls visibility of the clear button when a query is active. */
+        this.showClearButton = true;
+        /** Query document shared with FvQueryBuilder. */
+        this.query = { version: 1, root: null };
+    }
+    get expression() {
+        return this.queryTokens.map(token => (token.kind === 'predicate'
+            ? `${token.field} ${token.operator}${token.value}`
+            : token.text)).join('');
+    }
+    /** @internal */
+    get queryTokens() {
+        return this.query.root ? this.formatNode(this.query.root, true) : [];
+    }
+    handleEditClick() {
+        this.dispatchEvent(new CustomEvent('edit-filter', {
+            bubbles: true,
+            composed: true,
+            detail: { query: this.query }
+        }));
+    }
+    handleClearClick() {
+        this.editButton.focus();
+        this.dispatchEvent(new CustomEvent('clear-filter', {
+            bubbles: true,
+            composed: true,
+            detail: { query: this.query }
+        }));
+    }
+    formatNode(node, isRoot = false) {
+        if (node.kind === 'predicate') {
+            const field = this.definition?.fields.find(candidate => candidate.id === node.fieldId);
+            const operator = this.definition?.operators.find(candidate => candidate.id === node.operatorId);
+            const valueSchema = operator?.operand?.kind === 'schema' ? operator.operand.schema : field?.valueSchema;
+            return [{
+                    kind: 'predicate',
+                    field: field?.label ?? node.fieldId,
+                    operator: operator?.label ?? node.operatorId,
+                    value: node.value === undefined ? '' : ` ${this.formatValue(node.value, valueSchema)}`
+                }];
+        }
+        const tokens = [];
+        for (const child of node.children) {
+            const childTokens = this.formatNode(child);
+            if (childTokens.length > 0) {
+                if (tokens.length > 0) {
+                    tokens.push({ kind: 'logic', text: ` ${node.combinator.toUpperCase()} ` });
+                }
+                tokens.push(...childTokens);
+            }
+        }
+        return tokens.length > 0 && !isRoot
+            ? [{ kind: 'group', text: '(' }, ...tokens, { kind: 'group', text: ')' }]
+            : tokens;
+    }
+    formatValue(value, schema) {
+        if (Array.isArray(value)) {
+            return value.map(item => this.formatValue(item, schema)).join(', ');
+        }
+        if (isRecord(schema) && Array.isArray(schema.oneOf)) {
+            for (const option of schema.oneOf) {
+                if (isRecord(option) && option.const === value && typeof option.title === 'string') {
+                    return option.title;
+                }
+            }
+        }
+        if (value !== null && typeof value === 'object') {
+            return JSON.stringify(value) ?? '';
+        }
+        if (typeof value === 'string') {
+            return value;
+        }
+        if (typeof value === 'number' || typeof value === 'boolean') {
+            return value.toString();
+        }
+        return 'null';
+    }
+}
+__decorate([
+    attr
+], FvFilterBar.prototype, "label", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], FvFilterBar.prototype, "disabled", void 0);
+__decorate([
+    attr({ attribute: 'show-clear-button', mode: 'boolean' })
+], FvFilterBar.prototype, "showClearButton", void 0);
+__decorate([
+    observable
+], FvFilterBar.prototype, "query", void 0);
+__decorate([
+    observable
+], FvFilterBar.prototype, "definition", void 0);
+__decorate([
+    volatile
+], FvFilterBar.prototype, "queryTokens", null);
+const okFvFilterBar = FvFilterBar.compose({
+    baseName: 'fv-filter-bar',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okFvFilterBar());
+export const fvFilterBarTag = 'ok-fv-filter-bar';
+//# sourceMappingURL=index.js.map