@ni/ok-components 1.8.3 → 1.9.1

package/dist/custom-elements.json

@@ -20,12 +20,6 @@
       "declarations": [],
       "exports": []
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/ts/all-ts.ts",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "src/ex/button/index.ts",
@@ -67,6 +61,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/ts/all-ts.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/fv/accordion-item/index.ts",
@@ -1723,6 +1723,371 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv/splitter/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A vertical separator that enables pointer and keyboard resizing between two panes.",
+          "name": "FvSplitter",
+          "members": [
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "'Resize panes'",
+              "description": "The accessible name for the separator."
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabelledby",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": "Identifies the element that labels the separator."
+            },
+            {
+              "kind": "field",
+              "name": "ariaControls",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": "Identifies the primary pane controlled by the separator."
+            },
+            {
+              "kind": "field",
+              "name": "position",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "public",
+              "default": "60",
+              "description": "The splitter position as a percentage of the containing layout's width."
+            },
+            {
+              "kind": "field",
+              "name": "min",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "public",
+              "default": "0",
+              "description": "The minimum allowed position."
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "public",
+              "default": "100",
+              "description": "The maximum allowed position."
+            },
+            {
+              "kind": "field",
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "public",
+              "default": "1",
+              "description": "The percentage-point increment used for keyboard resizing."
+            },
+            {
+              "kind": "field",
+              "name": "pointerId",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "pointerStartPosition",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "requestedPosition",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "applyingConstrainedPosition",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "requestedPositionResetScheduled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "positionChangeCallbackVersion",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "validMin",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validMax",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validStep",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "isRtl",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "keydownHandler",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "constrain",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "position",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "updatePosition",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "position",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "applyConstrainedPosition",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resetRequestedPositionAfterSynchronousUpdates",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "finishResize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "syncAriaValueAttributesIfConnected",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "syncAriaValueAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              }
+            },
+            {
+              "name": "input",
+              "type": {
+                "text": "Event"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Resize panes'",
+              "description": "The accessible name for the separator.",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "aria-labelledby",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Identifies the element that labels the separator.",
+              "fieldName": "ariaLabelledby"
+            },
+            {
+              "name": "aria-controls",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Identifies the primary pane controlled by the separator.",
+              "fieldName": "ariaControls"
+            },
+            {
+              "name": "position",
+              "type": {
+                "text": "number"
+              },
+              "default": "60",
+              "description": "The splitter position as a percentage of the containing layout's width.",
+              "fieldName": "position"
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The minimum allowed position.",
+              "fieldName": "min"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "The maximum allowed position.",
+              "fieldName": "max"
+            },
+            {
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "The percentage-point increment used for keyboard resizing.",
+              "fieldName": "step"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@ni/fast-foundation"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "fvSplitterTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'ok-fv-splitter'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FvSplitter",
+          "declaration": {
+            "name": "FvSplitter",
+            "module": "src/fv/splitter/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fvSplitterTag",
+          "declaration": {
+            "name": "fvSplitterTag",
+            "module": "src/fv/splitter/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/fv/sticky-header/index.ts",

package/dist/custom-elements.md

@@ -308,6 +308,47 @@
 
 <hr/>
 
+## class: `FvSplitter`
+
+### Superclass
+
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
+
+### Fields
+
+| Name             | Privacy | Type                  | Default          | Description                                                             | Inherited From |
+| ---------------- | ------- | --------------------- | ---------------- | ----------------------------------------------------------------------- | -------------- |
+| `ariaLabel`      | public  | `string`              | `'Resize panes'` | The accessible name for the separator.                                  |                |
+| `ariaLabelledby` | public  | `string \| undefined` |                  | Identifies the element that labels the separator.                       |                |
+| `ariaControls`   | public  | `string \| undefined` |                  | Identifies the primary pane controlled by the separator.                |                |
+| `position`       | public  | `number`              | `60`             | The splitter position as a percentage of the containing layout's width. |                |
+| `min`            | public  | `number`              | `0`              | The minimum allowed position.                                           |                |
+| `max`            | public  | `number`              | `100`            | The maximum allowed position.                                           |                |
+| `step`           | public  | `number`              | `1`              | The percentage-point increment used for keyboard resizing.              |                |
+
+### Events
+
+| Name     | Type    | Description | Inherited From |
+| -------- | ------- | ----------- | -------------- |
+| `change` | `Event` |             |                |
+| `input`  | `Event` |             |                |
+
+### Attributes
+
+| Name              | Field          | Inherited From |
+| ----------------- | -------------- | -------------- |
+| `aria-label`      | ariaLabel      |                |
+| `aria-labelledby` | ariaLabelledby |                |
+| `aria-controls`   | ariaControls   |                |
+| `position`        | position       |                |
+| `min`             | min            |                |
+| `max`             | max            |                |
+| `step`            | step           |                |
+
+<hr/>
+
 ## class: `FvStickyHeader`
 
 ### Superclass

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

@@ -10,3 +10,4 @@ import './sticky-header';
 import './summary-panel';
 import './summary-panel-tile';
 import './search-input';
+import './splitter';

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

@@ -10,4 +10,5 @@ import './sticky-header';
 import './summary-panel';
 import './summary-panel-tile';
 import './search-input';
+import './splitter';
 //# 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","sourcesContent":["import './accordion-item';\nimport './card';\nimport './chip-selector';\nimport './context-help';\nimport './master-detail-list-item';\nimport './master-detail-list';\nimport './split-button';\nimport './split-button-anchor';\nimport './sticky-header';\nimport './summary-panel';\nimport './summary-panel-tile';\nimport './search-input';\n"]}
+{"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"]}

package/dist/esm/fv/splitter/index.d.ts

@@ -0,0 +1,69 @@
+import { FoundationElement } from '@ni/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-splitter': FvSplitter;
+    }
+}
+/**
+ * A vertical separator that enables pointer and keyboard resizing between two panes.
+ */
+export declare class FvSplitter extends FoundationElement {
+    /** The accessible name for the separator. */
+    ariaLabel: string;
+    /** Identifies the element that labels the separator. */
+    ariaLabelledby: string | undefined;
+    /** Identifies the primary pane controlled by the separator. */
+    ariaControls: string | undefined;
+    /** The splitter position as a percentage of the containing layout's width. */
+    position: number;
+    /** The minimum allowed position. */
+    min: number;
+    /** The maximum allowed position. */
+    max: number;
+    /** The percentage-point increment used for keyboard resizing. */
+    step: number;
+    /** @internal */
+    resizing: boolean;
+    private pointerId;
+    private pointerStartPosition;
+    private requestedPosition;
+    private applyingConstrainedPosition;
+    private requestedPositionResetScheduled;
+    private positionChangeCallbackVersion;
+    constructor();
+    /** @internal */
+    connectedCallback(): void;
+    /** @internal */
+    disconnectedCallback(): void;
+    /** @internal */
+    positionChanged(): void;
+    /** @internal */
+    minChanged(): void;
+    /** @internal */
+    maxChanged(): void;
+    /** @internal */
+    resizingChanged(): void;
+    /** @internal */
+    handlePointerDown(event: PointerEvent): boolean;
+    /** @internal */
+    handlePointerMove(event: PointerEvent): boolean;
+    /** @internal */
+    handlePointerUp(event: PointerEvent): boolean;
+    /** @internal */
+    handlePointerCancel(event: PointerEvent): boolean;
+    /** @internal */
+    handleKeyDown(event: KeyboardEvent): boolean;
+    private get validMin();
+    private get validMax();
+    private get validStep();
+    private get isRtl();
+    private readonly keydownHandler;
+    private constrain;
+    private updatePosition;
+    private applyConstrainedPosition;
+    private resetRequestedPositionAfterSynchronousUpdates;
+    private finishResize;
+    private syncAriaValueAttributesIfConnected;
+    private syncAriaValueAttributes;
+}
+export declare const fvSplitterTag = "ok-fv-splitter";