@ni/ok-components 1.10.2 → 1.11.0

package/dist/custom-elements.md

@@ -34,7 +34,7 @@
 
 <hr/>
 
-## class: `FvChipSelector`
+## class: `FvBulkEditField`
 
 ### Superclass
 
@@ -44,33 +44,50 @@
 
 ### Fields
 
-| Name                | Privacy | Type      | Default           | Description | Inherited From |
-| ------------------- | ------- | --------- | ----------------- | ----------- | -------------- |
-| `disabled`          | public  | `boolean` | `false`           |             |                |
-| `open`              | public  | `boolean` | `false`           |             |                |
-| `label`             | public  | `string`  | `''`              |             |                |
-| `selectedValues`    | public  | `string`  | `''`              |             |                |
-| `options`           | public  | `string`  | `''`              |             |                |
-| `placeholder`       | public  | `string`  | `'Select values'` |             |                |
-| `allowCustomValues` | public  | `boolean` | `false`           |             |                |
+| Name            | Privacy | Type                      | Default | Description                                                 | Inherited From |
+| --------------- | ------- | ------------------------- | ------- | ----------------------------------------------------------- | -------------- |
+| `label`         | public  | `string`                  | `''`    |                                                             |                |
+| `status`        | public  | `BulkEditFieldStatusType` |         |                                                             |                |
+| `resetDisabled` | public  | `boolean`                 | `false` |                                                             |                |
+| `clearDisabled` | public  | `boolean`                 | `false` |                                                             |                |
+| `controlLabel`  | public  | `string`                  |         | Accessible name applied to directly slotted field controls. |                |
 
-### Events
+### Attributes
 
-| Name     | Type          | Description | Inherited From |
-| -------- | ------------- | ----------- | -------------- |
-| `change` | `CustomEvent` |             |                |
+| Name             | Field         | Inherited From |
+| ---------------- | ------------- | -------------- |
+| `label`          | label         |                |
+| `status`         | status        |                |
+| `reset-disabled` | resetDisabled |                |
+| `clear-disabled` | clearDisabled |                |
 
-### Attributes
+<hr/>
 
-| Name                  | Field             | Inherited From |
-| --------------------- | ----------------- | -------------- |
-| `disabled`            | disabled          |                |
-| `open`                | open              |                |
-| `label`               | label             |                |
-| `selected-values`     | selectedValues    |                |
-| `options`             | options           |                |
-| `placeholder`         | placeholder       |                |
-| `allow-custom-values` | allowCustomValues |                |
+## class: `BulkEditState`
+
+### Fields
+
+| Name              | Privacy | Type                               | Default | Description | Inherited From |
+| ----------------- | ------- | ---------------------------------- | ------- | ----------- | -------------- |
+| `selectedIds`     | public  | `readonly RecordId[]`              |         |             |                |
+| `changes`         | public  | `Readonly<PendingChanges<TField>>` |         |             |                |
+| `selectedRecords` | public  | `readonly TRecord[]`               |         |             |                |
+
+### Methods
+
+| Name               | Privacy | Description | Parameters                                                                           | Return                            | Inherited From |
+| ------------------ | ------- | ----------- | ------------------------------------------------------------------------------------ | --------------------------------- | -------------- |
+| `field`            | public  |             | `field: TField`                                                                      | `BulkEditFieldValue`              |                |
+| `edit`             | public  |             | `field: TField, value: string`                                                       | `void`                            |                |
+| `clear`            | public  |             | `field: TField`                                                                      | `void`                            |                |
+| `resetField`       | public  |             | `field: TField`                                                                      | `void`                            |                |
+| `revert`           | public  |             |                                                                                      | `void`                            |                |
+| `isSelection`      | public  |             | `ids: readonly RecordId[]`                                                           | `boolean`                         |                |
+| `visibleSelection` | public  |             | `visibleIds: readonly RecordId[]`                                                    | `readonly RecordId[]`             |                |
+| `mergeVisible`     | public  |             | `visibleIds: readonly RecordId[], selectedVisibleIds: readonly RecordId[], additive` | `readonly RecordId[]`             |                |
+| `select`           | public  |             | `ids: readonly RecordId[]`                                                           | `void`                            |                |
+| `createCommit`     | public  |             |                                                                                      | `BulkEditCommit<TRecord, TField>` |                |
+| `commitSucceeded`  | public  |             | `updatedRecords: readonly TRecord[]`                                                 | `void`                            |                |
 
 <hr/>
 
@@ -108,6 +125,46 @@
 
 <hr/>
 
+## class: `FvChipSelector`
+
+### Superclass
+
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
+
+### Fields
+
+| Name                | Privacy | Type      | Default           | Description | Inherited From |
+| ------------------- | ------- | --------- | ----------------- | ----------- | -------------- |
+| `disabled`          | public  | `boolean` | `false`           |             |                |
+| `open`              | public  | `boolean` | `false`           |             |                |
+| `label`             | public  | `string`  | `''`              |             |                |
+| `selectedValues`    | public  | `string`  | `''`              |             |                |
+| `options`           | public  | `string`  | `''`              |             |                |
+| `placeholder`       | public  | `string`  | `'Select values'` |             |                |
+| `allowCustomValues` | public  | `boolean` | `false`           |             |                |
+
+### Events
+
+| Name     | Type          | Description | Inherited From |
+| -------- | ------------- | ----------- | -------------- |
+| `change` | `CustomEvent` |             |                |
+
+### Attributes
+
+| Name                  | Field             | Inherited From |
+| --------------------- | ----------------- | -------------- |
+| `disabled`            | disabled          |                |
+| `open`                | open              |                |
+| `label`               | label             |                |
+| `selected-values`     | selectedValues    |                |
+| `options`             | options           |                |
+| `placeholder`         | placeholder       |                |
+| `allow-custom-values` | allowCustomValues |                |
+
+<hr/>
+
 ## class: `FvContextHelp`
 
 ### Superclass
@@ -136,6 +193,43 @@
 
 <hr/>
 
+## class: `FvEditCommitBar`
+
+### Superclass
+
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
+
+### Fields
+
+| Name                     | Privacy | Type                         | Default | Description | Inherited From |
+| ------------------------ | ------- | ---------------------------- | ------- | ----------- | -------------- |
+| `heading`                | public  | `string`                     | `''`    |             |                |
+| `changeCount`            | public  | `number`                     | `0`     |             |                |
+| `affectedRowCount`       | public  | `number`                     | `0`     |             |                |
+| `hiddenAffectedRowCount` | public  | `number`                     | `0`     |             |                |
+| `saveDisabled`           | public  | `boolean`                    | `false` |             |                |
+| `revertDisabled`         | public  | `boolean`                    | `false` |             |                |
+| `actionsHidden`          | public  | `boolean`                    | `false` |             |                |
+| `hideEmptySummary`       | public  | `boolean`                    | `false` |             |                |
+| `message`                | public  | `CommitMessage \| undefined` |         |             |                |
+
+### Attributes
+
+| Name                        | Field                  | Inherited From |
+| --------------------------- | ---------------------- | -------------- |
+| `heading`                   | heading                |                |
+| `change-count`              | changeCount            |                |
+| `affected-row-count`        | affectedRowCount       |                |
+| `hidden-affected-row-count` | hiddenAffectedRowCount |                |
+| `save-disabled`             | saveDisabled           |                |
+| `revert-disabled`           | revertDisabled         |                |
+| `actions-hidden`            | actionsHidden          |                |
+| `hide-empty-summary`        | hideEmptySummary       |                |
+
+<hr/>
+
 ## class: `FvMasterDetailList`
 
 ### Superclass
@@ -308,6 +402,52 @@
 
 <hr/>
 
+## class: `FvSplitLayout`
+
+### Superclass
+
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
+
+### Fields
+
+| Name                 | Privacy | Type      | Default                                          | Description | Inherited From |
+| -------------------- | ------- | --------- | ------------------------------------------------ | ----------- | -------------- |
+| `position`           | public  | `number`  | `60`                                             |             |                |
+| `min`                | public  | `number`  | `35`                                             |             |                |
+| `max`                | public  | `number`  | `75`                                             |             |                |
+| `minSecondaryPixels` | public  | `number`  | `300`                                            |             |                |
+| `collapsed`          | public  | `boolean` | `false`                                          |             |                |
+| `step`               | public  | `number`  | `1`                                              |             |                |
+| `primaryPaneId`      | public  | `string`  | `` `ok-fv-split-layout-primary-${layoutId}` ``   |             |                |
+| `secondaryPaneId`    | public  | `string`  | `` `ok-fv-split-layout-secondary-${layoutId}` `` |             |                |
+
+### Methods
+
+| Name                        | Privacy | Description | Parameters | Return | Inherited From |
+| --------------------------- | ------- | ----------- | ---------- | ------ | -------------- |
+| `positionChanged`           | public  |             |            | `void` |                |
+| `minChanged`                | public  |             |            | `void` |                |
+| `maxChanged`                | public  |             |            | `void` |                |
+| `minSecondaryPixelsChanged` | public  |             |            | `void` |                |
+| `collapsedChanged`          | public  |             |            | `void` |                |
+
+### Attributes
+
+| Name                   | Field              | Inherited From |
+| ---------------------- | ------------------ | -------------- |
+| `position`             | position           |                |
+| `min`                  | min                |                |
+| `max`                  | max                |                |
+| `min-secondary-pixels` | minSecondaryPixels |                |
+| `collapsed`            | collapsed          |                |
+| `step`                 | step               |                |
+| `primary-pane-id`      | primaryPaneId      |                |
+| `secondary-pane-id`    | secondaryPaneId    |                |
+
+<hr/>
+
 ## class: `FvSplitter`
 
 ### Superclass

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

@@ -1,7 +1,9 @@
 import './accordion-item';
 import './card';
+import './bulk-edit-field';
 import './chip-selector';
 import './context-help';
+import './edit-commit-bar';
 import './master-detail-list-item';
 import './master-detail-list';
 import './split-button';
@@ -11,3 +13,4 @@ import './summary-panel';
 import './summary-panel-tile';
 import './search-input';
 import './splitter';
+import './split-layout';

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

@@ -1,7 +1,9 @@
 import './accordion-item';
 import './card';
+import './bulk-edit-field';
 import './chip-selector';
 import './context-help';
+import './edit-commit-bar';
 import './master-detail-list-item';
 import './master-detail-list';
 import './split-button';
@@ -11,4 +13,5 @@ import './summary-panel';
 import './summary-panel-tile';
 import './search-input';
 import './splitter';
+import './split-layout';
 //# 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,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;AACxB,OAAO,YAAY,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';\nimport './splitter';\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,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"]}

package/dist/esm/fv/bulk-edit-field/index.d.ts

@@ -0,0 +1,40 @@
+import { FoundationElement } from '@ni/fast-foundation';
+import { BulkEditFieldStatus, type BulkEditFieldStatus as BulkEditFieldStatusType } from './types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-bulk-edit-field': FvBulkEditField;
+    }
+}
+/**
+ * A labeled field shell for single- and multi-record editing.
+ */
+export declare class FvBulkEditField extends FoundationElement {
+    label: string;
+    status: BulkEditFieldStatusType;
+    resetDisabled: boolean;
+    clearDisabled: boolean;
+    /** @internal */
+    controls: HTMLElement[];
+    private readonly labelObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Accessible name applied to directly slotted field controls. */
+    get controlLabel(): string;
+    /** @internal */
+    controlsChanged(): void;
+    /** @internal */
+    labelChanged(): void;
+    /** @internal */
+    statusChanged(): void;
+    /** @internal */
+    get statusText(): string;
+    /** @internal */
+    reset(): boolean;
+    /** @internal */
+    clear(): boolean;
+    private updateControlLabels;
+    private observeControlLabels;
+}
+export declare const fvBulkEditFieldTag = "ok-fv-bulk-edit-field";
+export { BulkEditFieldStatus };
+export type { BulkEditFieldStatusType };

package/dist/esm/fv/bulk-edit-field/index.js

@@ -0,0 +1,120 @@
+import { __decorate } from "tslib";
+import { attr, DOM, observable } from '@ni/fast-element';
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+import { BulkEditFieldStatus } from './types';
+/**
+ * A labeled field shell for single- and multi-record editing.
+ */
+export class FvBulkEditField extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.status = BulkEditFieldStatus.unchanged;
+        this.resetDisabled = false;
+        this.clearDisabled = false;
+        /** @internal */
+        this.controls = [];
+        // Some controls reapply their own label bindings when reconnected.
+        this.labelObserver = new MutationObserver(() => this.updateControlLabels());
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.observeControlLabels();
+        this.updateControlLabels();
+    }
+    disconnectedCallback() {
+        this.labelObserver.disconnect();
+        super.disconnectedCallback();
+    }
+    /** Accessible name applied to directly slotted field controls. */
+    get controlLabel() {
+        const description = this.status === BulkEditFieldStatus.mixed
+            ? 'Mixed values. Enter a value to overwrite all selected rows.'
+            : this.statusText;
+        return description ? `${this.label}. ${description}` : this.label;
+    }
+    /** @internal */
+    controlsChanged() {
+        this.observeControlLabels();
+        this.updateControlLabels();
+    }
+    /** @internal */
+    labelChanged() {
+        this.updateControlLabels();
+    }
+    /** @internal */
+    statusChanged() {
+        this.updateControlLabels();
+    }
+    /** @internal */
+    get statusText() {
+        switch (this.status) {
+            case BulkEditFieldStatus.mixed:
+                return 'Mixed values';
+            case BulkEditFieldStatus.changed:
+                return 'Changed';
+            case BulkEditFieldStatus.willClear:
+                return 'Will clear';
+            default:
+                return '';
+        }
+    }
+    /** @internal */
+    reset() {
+        if (!this.resetDisabled) {
+            this.$emit('reset');
+        }
+        return true;
+    }
+    /** @internal */
+    clear() {
+        if (!this.clearDisabled) {
+            this.$emit('clear');
+        }
+        return true;
+    }
+    updateControlLabels() {
+        DOM.queueUpdate(() => {
+            this.controls?.forEach(control => {
+                if (control.getAttribute('aria-label') !== this.controlLabel) {
+                    control.setAttribute('aria-label', this.controlLabel);
+                }
+            });
+        });
+    }
+    observeControlLabels() {
+        this.labelObserver?.disconnect();
+        if (this.isConnected) {
+            this.controls?.forEach(control => this.labelObserver.observe(control, {
+                attributes: true,
+                attributeFilter: ['aria-label']
+            }));
+        }
+    }
+}
+__decorate([
+    attr
+], FvBulkEditField.prototype, "label", void 0);
+__decorate([
+    attr
+], FvBulkEditField.prototype, "status", void 0);
+__decorate([
+    attr({ attribute: 'reset-disabled', mode: 'boolean' })
+], FvBulkEditField.prototype, "resetDisabled", void 0);
+__decorate([
+    attr({ attribute: 'clear-disabled', mode: 'boolean' })
+], FvBulkEditField.prototype, "clearDisabled", void 0);
+__decorate([
+    observable
+], FvBulkEditField.prototype, "controls", void 0);
+const okFvBulkEditField = FvBulkEditField.compose({
+    baseName: 'fv-bulk-edit-field',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okFvBulkEditField());
+export const fvBulkEditFieldTag = 'ok-fv-bulk-edit-field';
+export { BulkEditFieldStatus };
+//# sourceMappingURL=index.js.map

package/dist/esm/fv/bulk-edit-field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/bulk-edit-field/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, DOM, observable } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport {\n    BulkEditFieldStatus,\n    type BulkEditFieldStatus as BulkEditFieldStatusType\n} from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-bulk-edit-field': FvBulkEditField;\n    }\n}\n\n/**\n * A labeled field shell for single- and multi-record editing.\n */\nexport class FvBulkEditField extends FoundationElement {\n    @attr\n    public label = '';\n\n    @attr\n    public status: BulkEditFieldStatusType = BulkEditFieldStatus.unchanged;\n\n    @attr({ attribute: 'reset-disabled', mode: 'boolean' })\n    public resetDisabled = false;\n\n    @attr({ attribute: 'clear-disabled', mode: 'boolean' })\n    public clearDisabled = false;\n\n    /** @internal */\n    @observable\n    public controls: HTMLElement[] = [];\n\n    // Some controls reapply their own label bindings when reconnected.\n    private readonly labelObserver = new MutationObserver(() => this.updateControlLabels());\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.observeControlLabels();\n        this.updateControlLabels();\n    }\n\n    public override disconnectedCallback(): void {\n        this.labelObserver.disconnect();\n        super.disconnectedCallback();\n    }\n\n    /** Accessible name applied to directly slotted field controls. */\n    public get controlLabel(): string {\n        const description = this.status === BulkEditFieldStatus.mixed\n            ? 'Mixed values. Enter a value to overwrite all selected rows.'\n            : this.statusText;\n        return description ? `${this.label}. ${description}` : this.label;\n    }\n\n    /** @internal */\n    public controlsChanged(): void {\n        this.observeControlLabels();\n        this.updateControlLabels();\n    }\n\n    /** @internal */\n    public labelChanged(): void {\n        this.updateControlLabels();\n    }\n\n    /** @internal */\n    public statusChanged(): void {\n        this.updateControlLabels();\n    }\n\n    /** @internal */\n    public get statusText(): string {\n        switch (this.status) {\n            case BulkEditFieldStatus.mixed:\n                return 'Mixed values';\n            case BulkEditFieldStatus.changed:\n                return 'Changed';\n            case BulkEditFieldStatus.willClear:\n                return 'Will clear';\n            default:\n                return '';\n        }\n    }\n\n    /** @internal */\n    public reset(): boolean {\n        if (!this.resetDisabled) {\n            this.$emit('reset');\n        }\n        return true;\n    }\n\n    /** @internal */\n    public clear(): boolean {\n        if (!this.clearDisabled) {\n            this.$emit('clear');\n        }\n        return true;\n    }\n\n    private updateControlLabels(): void {\n        DOM.queueUpdate(() => {\n            this.controls?.forEach(control => {\n                if (control.getAttribute('aria-label') !== this.controlLabel) {\n                    control.setAttribute('aria-label', this.controlLabel);\n                }\n            });\n        });\n    }\n\n    private observeControlLabels(): void {\n        this.labelObserver?.disconnect();\n        if (this.isConnected) {\n            this.controls?.forEach(control => this.labelObserver.observe(control, {\n                attributes: true,\n                attributeFilter: ['aria-label']\n            }));\n        }\n    }\n}\n\nconst okFvBulkEditField = FvBulkEditField.compose({\n    baseName: 'fv-bulk-edit-field',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvBulkEditField());\nexport const fvBulkEditFieldTag = 'ok-fv-bulk-edit-field';\nexport { BulkEditFieldStatus };\nexport type { BulkEditFieldStatusType };\n"]}

package/dist/esm/fv/bulk-edit-field/styles.d.ts

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

package/dist/esm/fv/bulk-edit-field/styles.js

@@ -0,0 +1,83 @@
+import { css } from '@ni/fast-element';
+import { controlLabelFont, controlLabelFontColor, bodyFont, bodyFontColor, informationColor, warningColor, warningFontColor, controlHeight, labelHeight, mediumPadding, smallPadding, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../utilities/style/display';
+export const styles = css `
+    ${display('block')}
+
+    :host {
+        color: ${bodyFontColor};
+        font: ${bodyFont};
+    }
+
+    .field {
+        display: grid;
+        grid-template-columns: 3px minmax(0, 1fr);
+        column-gap: ${standardPadding};
+    }
+
+    .marker {
+        width: 3px;
+        border-radius: 2px;
+    }
+
+    :host([status='changed']) .marker,
+    :host([status='will-clear']) .marker {
+        background: ${warningColor};
+    }
+
+    .content,
+    .control {
+        min-width: 0;
+    }
+
+    .header,
+    .actions {
+        display: flex;
+        align-items: center;
+        gap: ${smallPadding};
+    }
+
+    .header {
+        flex-wrap: wrap;
+        margin-block-end: 0;
+    }
+
+    .label {
+        font: ${controlLabelFont};
+        color: ${controlLabelFontColor};
+        margin-inline-end: auto;
+    }
+
+    .status {
+        font-size: 0.875em;
+        line-height: 1;
+        padding: 0 5px;
+        border: 1px solid ${informationColor};
+        border-radius: 4px;
+        color: ${informationColor};
+    }
+
+    :host([status='changed']) .status,
+    :host([status='will-clear']) .status {
+        border-color: ${warningColor};
+        color: ${warningFontColor};
+    }
+
+    .control {
+        display: block;
+    }
+
+    .actions {
+        justify-content: flex-end;
+        gap: 4px;
+        margin-inline-end: ${mediumPadding};
+        ${controlHeight.cssCustomProperty}: ${labelHeight};
+    }
+
+    ::slotted(:not([slot])) {
+        box-sizing: border-box;
+        width: 100%;
+        min-width: 0;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/fv/bulk-edit-field/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/bulk-edit-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;iBAGL,aAAa;gBACd,QAAQ;;;;;;sBAMF,eAAe;;;;;;;;;;sBAUf,YAAY;;;;;;;;;;;;eAYnB,YAAY;;;;;;;;;gBASX,gBAAgB;iBACf,qBAAqB;;;;;;;;4BAQV,gBAAgB;;iBAE3B,gBAAgB;;;;;wBAKT,YAAY;iBACnB,gBAAgB;;;;;;;;;;6BAUJ,aAAa;UAChC,aAAa,CAAC,iBAAiB,KAAK,WAAW;;;;;;;;CAQxD,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    controlLabelFont,\n    controlLabelFontColor,\n    bodyFont,\n    bodyFontColor,\n    informationColor,\n    warningColor,\n    warningFontColor,\n    controlHeight,\n    labelHeight,\n    mediumPadding,\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    ${display('block')}\n\n    :host {\n        color: ${bodyFontColor};\n        font: ${bodyFont};\n    }\n\n    .field {\n        display: grid;\n        grid-template-columns: 3px minmax(0, 1fr);\n        column-gap: ${standardPadding};\n    }\n\n    .marker {\n        width: 3px;\n        border-radius: 2px;\n    }\n\n    :host([status='changed']) .marker,\n    :host([status='will-clear']) .marker {\n        background: ${warningColor};\n    }\n\n    .content,\n    .control {\n        min-width: 0;\n    }\n\n    .header,\n    .actions {\n        display: flex;\n        align-items: center;\n        gap: ${smallPadding};\n    }\n\n    .header {\n        flex-wrap: wrap;\n        margin-block-end: 0;\n    }\n\n    .label {\n        font: ${controlLabelFont};\n        color: ${controlLabelFontColor};\n        margin-inline-end: auto;\n    }\n\n    .status {\n        font-size: 0.875em;\n        line-height: 1;\n        padding: 0 5px;\n        border: 1px solid ${informationColor};\n        border-radius: 4px;\n        color: ${informationColor};\n    }\n\n    :host([status='changed']) .status,\n    :host([status='will-clear']) .status {\n        border-color: ${warningColor};\n        color: ${warningFontColor};\n    }\n\n    .control {\n        display: block;\n    }\n\n    .actions {\n        justify-content: flex-end;\n        gap: 4px;\n        margin-inline-end: ${mediumPadding};\n        ${controlHeight.cssCustomProperty}: ${labelHeight};\n    }\n\n    ::slotted(:not([slot])) {\n        box-sizing: border-box;\n        width: 100%;\n        min-width: 0;\n    }\n`;\n"]}

package/dist/esm/fv/bulk-edit-field/template.d.ts

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

package/dist/esm/fv/bulk-edit-field/template.js

@@ -0,0 +1,36 @@
+import { html, slotted, elements, when } from '@ni/fast-element';
+import { buttonTag } from '@ni/nimble-components/dist/esm/button';
+import { iconArrowPartialRotateLeftTag } from '@ni/nimble-components/dist/esm/icons/arrow-partial-rotate-left';
+import { iconTimesTag } from '@ni/nimble-components/dist/esm/icons/times';
+export const template = html `
+    <div class="field">
+        <span class="marker" aria-hidden="true"></span>
+        <div class="content">
+            <div class="header">
+                <span class="label">${x => x.label}</span>
+                ${when(x => x.statusText.length > 0, html `<span class="status">${x => x.statusText}</span>`)}
+                <div class="actions">
+                <${buttonTag}
+                    appearance="ghost"
+                    content-hidden
+                    title="${x => `Reset ${x.label}`}"
+                    ?disabled="${x => x.resetDisabled}"
+                    @click="${x => x.reset()}"
+                ><${iconArrowPartialRotateLeftTag} slot="start"></${iconArrowPartialRotateLeftTag}>Reset ${x => x.label}</${buttonTag}>
+                <${buttonTag}
+                    appearance="ghost"
+                    content-hidden
+                    title="${x => `Clear ${x.label} for selected rows`}"
+                    ?disabled="${x => x.clearDisabled}"
+                    @click="${x => x.clear()}"
+                ><${iconTimesTag} slot="start"></${iconTimesTag}>Clear ${x => x.label}</${buttonTag}>
+                <slot name="actions"></slot>
+                </div>
+            </div>
+            <div class="control">
+                <slot ${slotted({ property: 'controls', filter: elements() })}></slot>
+            </div>
+        </div>
+    </div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv/bulk-edit-field/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/bulk-edit-field/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,6BAA6B,EAAE,MAAM,gEAAgE,CAAC;AAC/G,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAG1E,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAiB;;;;;sCAKP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;kBAChC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAC5B,IAAI,CAAiB,wBAAwB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,SAAS,CAC1E;;mBAEE,SAAS;;;6BAGC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE;iCACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;8BACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE;oBACxB,6BAA6B,mBAAmB,6BAA6B,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS;mBAClH,SAAS;;;6BAGC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,KAAK,oBAAoB;iCACrC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;8BACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE;oBACxB,YAAY,mBAAmB,YAAY,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS;;;;;wBAK3E,OAAO,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;;;;CAI5E,CAAC","sourcesContent":["import { html, slotted, elements, when } from '@ni/fast-element';\nimport { buttonTag } from '@ni/nimble-components/dist/esm/button';\nimport { iconArrowPartialRotateLeftTag } from '@ni/nimble-components/dist/esm/icons/arrow-partial-rotate-left';\nimport { iconTimesTag } from '@ni/nimble-components/dist/esm/icons/times';\nimport type { FvBulkEditField } from '.';\n\nexport const template = html<FvBulkEditField>`\n    <div class=\"field\">\n        <span class=\"marker\" aria-hidden=\"true\"></span>\n        <div class=\"content\">\n            <div class=\"header\">\n                <span class=\"label\">${x => x.label}</span>\n                ${when(\n                    x => x.statusText.length > 0,\n                    html<FvBulkEditField>`<span class=\"status\">${x => x.statusText}</span>`\n                )}\n                <div class=\"actions\">\n                <${buttonTag}\n                    appearance=\"ghost\"\n                    content-hidden\n                    title=\"${x => `Reset ${x.label}`}\"\n                    ?disabled=\"${x => x.resetDisabled}\"\n                    @click=\"${x => x.reset()}\"\n                ><${iconArrowPartialRotateLeftTag} slot=\"start\"></${iconArrowPartialRotateLeftTag}>Reset ${x => x.label}</${buttonTag}>\n                <${buttonTag}\n                    appearance=\"ghost\"\n                    content-hidden\n                    title=\"${x => `Clear ${x.label} for selected rows`}\"\n                    ?disabled=\"${x => x.clearDisabled}\"\n                    @click=\"${x => x.clear()}\"\n                ><${iconTimesTag} slot=\"start\"></${iconTimesTag}>Clear ${x => x.label}</${buttonTag}>\n                <slot name=\"actions\"></slot>\n                </div>\n            </div>\n            <div class=\"control\">\n                <slot ${slotted({ property: 'controls', filter: elements() })}></slot>\n            </div>\n        </div>\n    </div>\n`;\n"]}

package/dist/esm/fv/bulk-edit-field/types.d.ts

@@ -0,0 +1,7 @@
+export declare const BulkEditFieldStatus: {
+    readonly unchanged: "unchanged";
+    readonly mixed: "mixed";
+    readonly changed: "changed";
+    readonly willClear: "will-clear";
+};
+export type BulkEditFieldStatus = (typeof BulkEditFieldStatus)[keyof typeof BulkEditFieldStatus];

package/dist/esm/fv/bulk-edit-field/types.js

@@ -0,0 +1,7 @@
+export const BulkEditFieldStatus = {
+    unchanged: 'unchanged',
+    mixed: 'mixed',
+    changed: 'changed',
+    willClear: 'will-clear'
+};
+//# sourceMappingURL=types.js.map

package/dist/esm/fv/bulk-edit-field/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/fv/bulk-edit-field/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG;IAC/B,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,YAAY;CACjB,CAAC","sourcesContent":["export const BulkEditFieldStatus = {\n    unchanged: 'unchanged',\n    mixed: 'mixed',\n    changed: 'changed',\n    willClear: 'will-clear'\n} as const;\n\nexport type BulkEditFieldStatus = (typeof BulkEditFieldStatus)[keyof typeof BulkEditFieldStatus];\n"]}