@ni/ok-components 1.12.4 → 1.13.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",

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

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

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

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","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';\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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/filter-bar/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, observable, volatile } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type {\n    FvFilterBarDefinition,\n    FvFilterBarEventDetail,\n    FvFilterBarQueryDocument,\n    FvFilterBarQueryNode,\n    FvFilterBarToken\n} from './types';\n\nfunction isRecord(value: unknown): value is { [key: string]: unknown } {\n    return typeof value === 'object' && value !== null;\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-filter-bar': FvFilterBar;\n    }\n}\n\n/** Displays an active query and dispatches edit and clear actions. */\nexport class FvFilterBar extends FoundationElement {\n    /** Text shown before the active query expression. */\n    @attr\n    public label = 'Filters';\n\n    /** Prevents editing and clearing the displayed query. */\n    @attr({ mode: 'boolean' })\n    public disabled = false;\n\n    /** Controls visibility of the clear button when a query is active. */\n    @attr({ attribute: 'show-clear-button', mode: 'boolean' })\n    public showClearButton = true;\n\n    /** Query document shared with FvQueryBuilder. */\n    @observable\n    public query: FvFilterBarQueryDocument = { version: 1, root: null };\n\n    /** Field and operator labels used to display the query. */\n    @observable\n    public definition?: FvFilterBarDefinition;\n\n    /** @internal */\n    public editButton!: HTMLButtonElement;\n\n    public get expression(): string {\n        return this.queryTokens.map(token => (token.kind === 'predicate'\n            ? `${token.field} ${token.operator}${token.value}`\n            : token.text)).join('');\n    }\n\n    /** @internal */\n    @volatile\n    public get queryTokens(): readonly FvFilterBarToken[] {\n        return this.query.root ? this.formatNode(this.query.root, true) : [];\n    }\n\n    public handleEditClick(): void {\n        this.dispatchEvent(new CustomEvent<FvFilterBarEventDetail>('edit-filter', {\n            bubbles: true,\n            composed: true,\n            detail: { query: this.query }\n        }));\n    }\n\n    public handleClearClick(): void {\n        this.editButton.focus();\n        this.dispatchEvent(new CustomEvent<FvFilterBarEventDetail>('clear-filter', {\n            bubbles: true,\n            composed: true,\n            detail: { query: this.query }\n        }));\n    }\n\n    private formatNode(node: FvFilterBarQueryNode, isRoot = false): FvFilterBarToken[] {\n        if (node.kind === 'predicate') {\n            const field = this.definition?.fields.find(candidate => candidate.id === node.fieldId);\n            const operator = this.definition?.operators.find(candidate => candidate.id === node.operatorId);\n            const valueSchema = operator?.operand?.kind === 'schema' ? operator.operand.schema : field?.valueSchema;\n            return [{\n                kind: 'predicate',\n                field: field?.label ?? node.fieldId,\n                operator: operator?.label ?? node.operatorId,\n                value: node.value === undefined ? '' : ` ${this.formatValue(node.value, valueSchema)}`\n            }];\n        }\n\n        const tokens: FvFilterBarToken[] = [];\n        for (const child of node.children) {\n            const childTokens = this.formatNode(child);\n            if (childTokens.length > 0) {\n                if (tokens.length > 0) {\n                    tokens.push({ kind: 'logic', text: ` ${node.combinator.toUpperCase()} ` });\n                }\n                tokens.push(...childTokens);\n            }\n        }\n        return tokens.length > 0 && !isRoot\n            ? [{ kind: 'group', text: '(' }, ...tokens, { kind: 'group', text: ')' }]\n            : tokens;\n    }\n\n    private formatValue(value: unknown, schema: unknown): string {\n        if (Array.isArray(value)) {\n            return value.map(item => this.formatValue(item, schema)).join(', ');\n        }\n\n        if (isRecord(schema) && Array.isArray(schema.oneOf)) {\n            for (const option of schema.oneOf) {\n                if (isRecord(option) && option.const === value && typeof option.title === 'string') {\n                    return option.title;\n                }\n            }\n        }\n\n        if (value !== null && typeof value === 'object') {\n            return JSON.stringify(value) ?? '';\n        }\n        if (typeof value === 'string') {\n            return value;\n        }\n        if (typeof value === 'number' || typeof value === 'boolean') {\n            return value.toString();\n        }\n        return 'null';\n    }\n}\n\nconst okFvFilterBar = FvFilterBar.compose({\n    baseName: 'fv-filter-bar',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvFilterBar());\nexport const fvFilterBarTag = 'ok-fv-filter-bar';\n"]}

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

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

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

@@ -0,0 +1,119 @@
+import { css } from '@ni/fast-element';
+import { bodyDisabledFontColor, bodyFont, bodyFontColor, borderHoverColor, borderWidth, controlHeight, fillHoverColor, iconColor, iconSize, linkProminentFontColor, sectionBackgroundColor, smallPadding, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../utilities/style/display';
+export const styles = css `
+    @layer base, hover, focusVisible, disabled, top;
+
+    @layer base {
+        ${display('flex')}
+
+        :host {
+            min-width: 0;
+            font: ${bodyFont};
+            color: ${bodyFontColor};
+        }
+
+        .filter-bar {
+            display: flex;
+            align-items: center;
+            min-width: 0;
+            max-width: 100%;
+            height: 30px;
+            padding: 0 ${standardPadding};
+        }
+
+        .filter-bar-edit,
+        .filter-bar-clear {
+            -webkit-appearance: none;
+            appearance: none;
+            display: inline-flex;
+            align-items: center;
+            min-width: 0;
+            padding: 0;
+            border: none;
+            border-radius: 2px;
+            background: transparent;
+            color: inherit;
+            font: inherit;
+            cursor: pointer;
+        }
+
+        .filter-bar-edit {
+            flex: 0 1 auto;
+            height: 30px;
+            gap: calc(2 * ${smallPadding});
+            text-align: start;
+        }
+
+        .filter-bar-content {
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .filter-bar-label {
+            margin-inline-end: 10px;
+        }
+
+        .query-expression {
+            padding: 0 ${smallPadding};
+            background-color: ${sectionBackgroundColor};
+            border-radius: 50px;
+        }
+
+        .logical-operator {
+            font-weight: 600;
+            color: ${linkProminentFontColor};
+        }
+
+        .compound-expression-container {
+            font-size: medium;
+        }
+
+        .filter-bar-icon {
+            flex: 0 0 auto;
+            width: ${iconSize};
+            height: ${iconSize};
+            ${iconColor.cssCustomProperty}: currentColor;
+        }
+
+        .filter-bar-clear {
+            ${controlHeight.cssCustomProperty}: 24px;
+            flex: 0 0 auto;
+            justify-content: center;
+            width: ${controlHeight};
+            height: ${controlHeight};
+            margin-inline-start: calc(2 * ${smallPadding});
+        }
+    }
+
+    @layer hover {
+        .filter-bar-clear:hover {
+            background: ${fillHoverColor};
+        }
+    }
+
+    @layer focusVisible {
+        .filter-bar-edit:focus-visible,
+        .filter-bar-clear:focus-visible {
+            outline: ${borderWidth} solid ${borderHoverColor};
+            outline-offset: -1px;
+        }
+    }
+
+    @layer disabled {
+        .filter-bar-edit:disabled,
+        .filter-bar-clear:disabled {
+            color: ${bodyDisabledFontColor};
+            cursor: not-allowed;
+        }
+
+        :host([disabled]) .logical-operator {
+            color: inherit;
+        }
+    }
+
+    @layer top {}
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/fv/filter-bar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/filter-bar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,cAAc,EACd,SAAS,EACT,QAAQ,EACR,sBAAsB,EACtB,sBAAsB,EACtB,YAAY,EACZ,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,MAAM,CAAC;;;;oBAIL,QAAQ;qBACP,aAAa;;;;;;;;;yBAST,eAAe;;;;;;;;;;;;;;;;;;;;;;4BAsBZ,YAAY;;;;;;;;;;;;;;;;yBAgBf,YAAY;gCACL,sBAAsB;;;;;;qBAMjC,sBAAsB;;;;;;;;;qBAStB,QAAQ;sBACP,QAAQ;cAChB,SAAS,CAAC,iBAAiB;;;;cAI3B,aAAa,CAAC,iBAAiB;;;qBAGxB,aAAa;sBACZ,aAAa;4CACS,YAAY;;;;;;0BAM9B,cAAc;;;;;;;uBAOjB,WAAW,UAAU,gBAAgB;;;;;;;;qBAQvC,qBAAqB;;;;;;;;;;CAUzC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    bodyDisabledFontColor,\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    fillHoverColor,\n    iconColor,\n    iconSize,\n    linkProminentFontColor,\n    sectionBackgroundColor,\n    smallPadding,\n    standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, disabled, top;\n\n    @layer base {\n        ${display('flex')}\n\n        :host {\n            min-width: 0;\n            font: ${bodyFont};\n            color: ${bodyFontColor};\n        }\n\n        .filter-bar {\n            display: flex;\n            align-items: center;\n            min-width: 0;\n            max-width: 100%;\n            height: 30px;\n            padding: 0 ${standardPadding};\n        }\n\n        .filter-bar-edit,\n        .filter-bar-clear {\n            -webkit-appearance: none;\n            appearance: none;\n            display: inline-flex;\n            align-items: center;\n            min-width: 0;\n            padding: 0;\n            border: none;\n            border-radius: 2px;\n            background: transparent;\n            color: inherit;\n            font: inherit;\n            cursor: pointer;\n        }\n\n        .filter-bar-edit {\n            flex: 0 1 auto;\n            height: 30px;\n            gap: calc(2 * ${smallPadding});\n            text-align: start;\n        }\n\n        .filter-bar-content {\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        .filter-bar-label {\n            margin-inline-end: 10px;\n        }\n\n        .query-expression {\n            padding: 0 ${smallPadding};\n            background-color: ${sectionBackgroundColor};\n            border-radius: 50px;\n        }\n\n        .logical-operator {\n            font-weight: 600;\n            color: ${linkProminentFontColor};\n        }\n\n        .compound-expression-container {\n            font-size: medium;\n        }\n\n        .filter-bar-icon {\n            flex: 0 0 auto;\n            width: ${iconSize};\n            height: ${iconSize};\n            ${iconColor.cssCustomProperty}: currentColor;\n        }\n\n        .filter-bar-clear {\n            ${controlHeight.cssCustomProperty}: 24px;\n            flex: 0 0 auto;\n            justify-content: center;\n            width: ${controlHeight};\n            height: ${controlHeight};\n            margin-inline-start: calc(2 * ${smallPadding});\n        }\n    }\n\n    @layer hover {\n        .filter-bar-clear:hover {\n            background: ${fillHoverColor};\n        }\n    }\n\n    @layer focusVisible {\n        .filter-bar-edit:focus-visible,\n        .filter-bar-clear:focus-visible {\n            outline: ${borderWidth} solid ${borderHoverColor};\n            outline-offset: -1px;\n        }\n    }\n\n    @layer disabled {\n        .filter-bar-edit:disabled,\n        .filter-bar-clear:disabled {\n            color: ${bodyDisabledFontColor};\n            cursor: not-allowed;\n        }\n\n        :host([disabled]) .logical-operator {\n            color: inherit;\n        }\n    }\n\n    @layer top {}\n`;\n"]}

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

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

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

@@ -0,0 +1,34 @@
+import { html, ref, repeat, when } from '@ni/fast-element';
+import { iconFilterTag } from '@ni/nimble-components/dist/esm/icons/filter';
+import { iconXmarkTag } from '@ni/nimble-components/dist/esm/icons/xmark';
+const queryTokenTemplate = html `${when(x => x.kind === 'predicate', html `<span class="query-expression"><b>${x => (x.kind === 'predicate' ? x.field : '')}</b> ${x => (x.kind === 'predicate' ? x.operator : '')}<b>${x => (x.kind === 'predicate' ? x.value : '')}</b></span>`)}${when(x => x.kind === 'logic', html `<span class="logical-operator">${x => (x.kind === 'logic' ? x.text : '')}</span>`)}${when(x => x.kind === 'group', html `<span class="compound-expression-container">${x => (x.kind === 'group' ? x.text : '')}</span>`)}`;
+export const template = html `
+    <div class="filter-bar" role="group" aria-label="${x => x.label}">
+        <button
+            ${ref('editButton')}
+            class="filter-bar-edit"
+            type="button"
+            aria-label="${x => `Edit filters: ${x.label}`}"
+            title="${x => x.expression}"
+            ?disabled="${x => x.disabled}"
+            @click="${x => x.handleEditClick()}"
+        >
+            <${iconFilterTag} class="filter-bar-icon" aria-hidden="true"></${iconFilterTag}>
+            <span class="filter-bar-content">
+                <span class="filter-bar-label">${x => x.label}</span>${when(x => x.expression.length > 0, html `<span class="filter-bar-expression">${repeat(x => x.queryTokens, queryTokenTemplate)}</span>`)}
+            </span>
+        </button>
+        ${when(x => x.showClearButton && x.expression.length > 0, html `
+                <button
+                    class="filter-bar-clear"
+                    type="button"
+                    aria-label="Clear filters"
+                    ?disabled="${x => x.disabled}"
+                    @click="${x => x.handleClearClick()}"
+                >
+                    <${iconXmarkTag} class="filter-bar-icon" aria-hidden="true"></${iconXmarkTag}>
+                </button>
+            `)}
+    </div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv/filter-bar/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/filter-bar/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAI1E,MAAM,kBAAkB,GAAG,IAAI,CAAkB,GAAG,IAAI,CAChD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,WAAW,EAC3B,IAAI,CAAkB,qCAAqC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,aAAa,CAChO,GAAG,IAAI,CACJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,EACvB,IAAI,CAAkB,kCAAkC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAC3G,GAAG,IAAI,CACJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,EACvB,IAAI,CAAkB,+CAA+C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CACxH,EAAE,CAAC;AAER,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAa;uDACc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;;cAErD,GAAG,CAAC,YAAY,CAAC;;;0BAGL,CAAC,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,KAAK,EAAE;qBACpC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;yBACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;sBAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;eAE/B,aAAa,iDAAiD,aAAa;;iDAEzC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,UAAU,IAAI,CACvD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAC5B,IAAI,CAAa,uCAAuC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,kBAAkB,CAAC,SAAS,CAClH;;;UAGP,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,IAAI,CAAC,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EACjD,IAAI,CAAa;;;;;iCAKI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;8BAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,EAAE;;uBAEhC,YAAY,iDAAiD,YAAY;;aAEnF,CACJ;;CAER,CAAC","sourcesContent":["import { html, ref, repeat, when } from '@ni/fast-element';\nimport { iconFilterTag } from '@ni/nimble-components/dist/esm/icons/filter';\nimport { iconXmarkTag } from '@ni/nimble-components/dist/esm/icons/xmark';\nimport type { FvFilterBar } from '.';\nimport type { FvFilterBarToken } from './types';\n\nconst queryTokenTemplate = html<FvFilterBarToken>`${when(\n        x => x.kind === 'predicate',\n        html<FvFilterBarToken>`<span class=\"query-expression\"><b>${x => (x.kind === 'predicate' ? x.field : '')}</b> ${x => (x.kind === 'predicate' ? x.operator : '')}<b>${x => (x.kind === 'predicate' ? x.value : '')}</b></span>`\n    )}${when(\n        x => x.kind === 'logic',\n        html<FvFilterBarToken>`<span class=\"logical-operator\">${x => (x.kind === 'logic' ? x.text : '')}</span>`\n    )}${when(\n        x => x.kind === 'group',\n        html<FvFilterBarToken>`<span class=\"compound-expression-container\">${x => (x.kind === 'group' ? x.text : '')}</span>`\n    )}`;\n\nexport const template = html<FvFilterBar>`\n    <div class=\"filter-bar\" role=\"group\" aria-label=\"${x => x.label}\">\n        <button\n            ${ref('editButton')}\n            class=\"filter-bar-edit\"\n            type=\"button\"\n            aria-label=\"${x => `Edit filters: ${x.label}`}\"\n            title=\"${x => x.expression}\"\n            ?disabled=\"${x => x.disabled}\"\n            @click=\"${x => x.handleEditClick()}\"\n        >\n            <${iconFilterTag} class=\"filter-bar-icon\" aria-hidden=\"true\"></${iconFilterTag}>\n            <span class=\"filter-bar-content\">\n                <span class=\"filter-bar-label\">${x => x.label}</span>${when(\n                    x => x.expression.length > 0,\n                    html<FvFilterBar>`<span class=\"filter-bar-expression\">${repeat(x => x.queryTokens, queryTokenTemplate)}</span>`\n                )}\n            </span>\n        </button>\n        ${when(\n            x => x.showClearButton && x.expression.length > 0,\n            html<FvFilterBar>`\n                <button\n                    class=\"filter-bar-clear\"\n                    type=\"button\"\n                    aria-label=\"Clear filters\"\n                    ?disabled=\"${x => x.disabled}\"\n                    @click=\"${x => x.handleClearClick()}\"\n                >\n                    <${iconXmarkTag} class=\"filter-bar-icon\" aria-hidden=\"true\"></${iconXmarkTag}>\n                </button>\n            `\n        )}\n    </div>\n`;\n"]}