@ni/ok-components 1.10.3 → 1.11.1

package/dist/esm/fv/split-layout/index.js

@@ -0,0 +1,195 @@
+import { __decorate } from "tslib";
+import { attr, nullableNumberConverter, observable, volatile } from '@ni/fast-element';
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+let nextLayoutId = 0;
+function takeLayoutId() {
+    const id = nextLayoutId;
+    nextLayoutId += 1;
+    return id;
+}
+/**
+ * A full-height, resizable two-pane layout.
+ */
+export class FvSplitLayout extends FoundationElement {
+    constructor() {
+        super();
+        this.position = 60;
+        this.min = 35;
+        this.max = 75;
+        this.minSecondaryPixels = 300;
+        this.collapsed = false;
+        this.step = 1;
+        this.primaryPaneId = '';
+        this.secondaryPaneId = '';
+        /** @internal */
+        this.availableWidth = 0;
+        this.resizeObserver = new ResizeObserver(entries => {
+            this.availableWidth = entries[0]?.contentRect.width ?? 0;
+            this.constrainPosition();
+        });
+        this.requestedPosition = this.position;
+        this.applyingConstrainedPosition = false;
+        this.requestedPositionResetScheduled = false;
+        this.positionChangeCallbackVersion = 0;
+        const layoutId = takeLayoutId();
+        this.primaryPaneId = `ok-fv-split-layout-primary-${layoutId}`;
+        this.secondaryPaneId = `ok-fv-split-layout-secondary-${layoutId}`;
+        const positionDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(this), 'position');
+        if (!positionDescriptor?.get || !positionDescriptor.set) {
+            return;
+        }
+        const getPosition = positionDescriptor.get.bind(this);
+        const setPosition = positionDescriptor.set.bind(this);
+        Object.defineProperty(this, 'position', {
+            configurable: true,
+            enumerable: positionDescriptor.enumerable,
+            get: getPosition,
+            set: (value) => {
+                const previousPosition = getPosition();
+                const callbackVersion = this.positionChangeCallbackVersion;
+                setPosition(value);
+                if (!this.applyingConstrainedPosition
+                    && callbackVersion === this.positionChangeCallbackVersion
+                    && previousPosition === getPosition()) {
+                    this.requestedPosition = getPosition();
+                }
+            }
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resizeObserver.observe(this);
+    }
+    disconnectedCallback() {
+        this.resizeObserver.disconnect();
+        super.disconnectedCallback();
+    }
+    positionChanged() {
+        this.positionChangeCallbackVersion += 1;
+        if (!this.applyingConstrainedPosition) {
+            this.requestedPosition = this.position;
+            this.resetRequestedPositionAfterSynchronousUpdates();
+        }
+        this.constrainPosition();
+    }
+    minChanged() {
+        this.constrainPosition();
+    }
+    maxChanged() {
+        this.constrainPosition();
+    }
+    minSecondaryPixelsChanged() {
+        this.constrainPosition();
+    }
+    collapsedChanged() {
+        this.constrainPosition();
+    }
+    /** @internal */
+    get effectiveMin() {
+        const configured = Number.isFinite(this.min) ? Math.min(100, Math.max(0, this.min)) : 35;
+        return Math.min(configured, this.effectiveMax);
+    }
+    /** @internal */
+    get effectiveMax() {
+        const minimum = Number.isFinite(this.min) ? Math.min(100, Math.max(0, this.min)) : 35;
+        const configured = Number.isFinite(this.max)
+            ? Math.min(100, Math.max(minimum, this.max))
+            : Math.max(minimum, 75);
+        const secondaryMinimum = this.effectiveMinSecondaryPixels;
+        if (this.availableWidth <= 2 || secondaryMinimum <= 0) {
+            return configured;
+        }
+        const pixelMaximum = 100 * (1 - secondaryMinimum / (this.availableWidth - 2));
+        return Math.max(0, Math.min(configured, pixelMaximum));
+    }
+    /** @internal */
+    get gridTemplateColumns() {
+        const secondaryMinimum = this.effectiveMinSecondaryPixels;
+        return this.collapsed
+            ? 'minmax(0, 1fr)'
+            : `minmax(0, ${this.position}fr) 2px minmax(${secondaryMinimum}px, ${100 - this.position}fr)`;
+    }
+    /** @internal */
+    handleSplitterInput(event) {
+        event.stopPropagation();
+        this.position = event.currentTarget.position;
+        this.$emit('input');
+        return true;
+    }
+    /** @internal */
+    handleSplitterChange(event) {
+        event.stopPropagation();
+        this.$emit('change');
+        return true;
+    }
+    constrainPosition() {
+        if (this.collapsed) {
+            return;
+        }
+        const finitePosition = Number.isFinite(this.requestedPosition) ? this.requestedPosition : 60;
+        const constrained = Math.min(this.effectiveMax, Math.max(this.effectiveMin, finitePosition));
+        if (constrained !== this.position) {
+            this.applyingConstrainedPosition = true;
+            this.position = constrained;
+            this.applyingConstrainedPosition = false;
+        }
+    }
+    resetRequestedPositionAfterSynchronousUpdates() {
+        if (this.requestedPositionResetScheduled) {
+            return;
+        }
+        this.requestedPositionResetScheduled = true;
+        queueMicrotask(() => {
+            this.requestedPositionResetScheduled = false;
+            this.requestedPosition = this.position;
+        });
+    }
+    get effectiveMinSecondaryPixels() {
+        return Number.isFinite(this.minSecondaryPixels)
+            ? Math.max(0, this.minSecondaryPixels)
+            : 300;
+    }
+}
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], FvSplitLayout.prototype, "position", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], FvSplitLayout.prototype, "min", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], FvSplitLayout.prototype, "max", void 0);
+__decorate([
+    attr({ attribute: 'min-secondary-pixels', converter: nullableNumberConverter })
+], FvSplitLayout.prototype, "minSecondaryPixels", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], FvSplitLayout.prototype, "collapsed", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], FvSplitLayout.prototype, "step", void 0);
+__decorate([
+    attr({ attribute: 'primary-pane-id' })
+], FvSplitLayout.prototype, "primaryPaneId", void 0);
+__decorate([
+    attr({ attribute: 'secondary-pane-id' })
+], FvSplitLayout.prototype, "secondaryPaneId", void 0);
+__decorate([
+    observable
+], FvSplitLayout.prototype, "availableWidth", void 0);
+__decorate([
+    volatile
+], FvSplitLayout.prototype, "effectiveMax", null);
+__decorate([
+    volatile
+], FvSplitLayout.prototype, "gridTemplateColumns", null);
+const okFvSplitLayout = FvSplitLayout.compose({
+    baseName: 'fv-split-layout',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitLayout());
+export const fvSplitLayoutTag = 'ok-fv-split-layout';
+//# sourceMappingURL=index.js.map

package/dist/esm/fv/split-layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/split-layout/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, nullableNumberConverter, observable, volatile } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-split-layout': FvSplitLayout;\n    }\n}\n\nlet nextLayoutId = 0;\n\nfunction takeLayoutId(): number {\n    const id = nextLayoutId;\n    nextLayoutId += 1;\n    return id;\n}\n\n/**\n * A full-height, resizable two-pane layout.\n */\nexport class FvSplitLayout extends FoundationElement {\n    @attr({ converter: nullableNumberConverter })\n    public position = 60;\n\n    @attr({ converter: nullableNumberConverter })\n    public min = 35;\n\n    @attr({ converter: nullableNumberConverter })\n    public max = 75;\n\n    @attr({ attribute: 'min-secondary-pixels', converter: nullableNumberConverter })\n    public minSecondaryPixels = 300;\n\n    @attr({ mode: 'boolean' })\n    public collapsed = false;\n\n    @attr({ converter: nullableNumberConverter })\n    public step = 1;\n\n    @attr({ attribute: 'primary-pane-id' })\n    public primaryPaneId = '';\n\n    @attr({ attribute: 'secondary-pane-id' })\n    public secondaryPaneId = '';\n\n    /** @internal */\n    @observable\n    public availableWidth = 0;\n\n    private readonly resizeObserver = new ResizeObserver(entries => {\n        this.availableWidth = entries[0]?.contentRect.width ?? 0;\n        this.constrainPosition();\n    });\n\n    private requestedPosition = this.position;\n    private applyingConstrainedPosition = false;\n    private requestedPositionResetScheduled = false;\n    private positionChangeCallbackVersion = 0;\n\n    public constructor() {\n        super();\n        const layoutId = takeLayoutId();\n        this.primaryPaneId = `ok-fv-split-layout-primary-${layoutId}`;\n        this.secondaryPaneId = `ok-fv-split-layout-secondary-${layoutId}`;\n\n        const positionDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(this), 'position');\n        if (!positionDescriptor?.get || !positionDescriptor.set) {\n            return;\n        }\n\n        const getPosition = positionDescriptor.get.bind(this) as () => number;\n        const setPosition = positionDescriptor.set.bind(this) as (value: number) => void;\n        Object.defineProperty(this, 'position', {\n            configurable: true,\n            enumerable: positionDescriptor.enumerable,\n            get: getPosition,\n            set: (value: number) => {\n                const previousPosition = getPosition();\n                const callbackVersion = this.positionChangeCallbackVersion;\n                setPosition(value);\n                if (!this.applyingConstrainedPosition\n                    && callbackVersion === this.positionChangeCallbackVersion\n                    && previousPosition === getPosition()) {\n                    this.requestedPosition = getPosition();\n                }\n            }\n        });\n    }\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.resizeObserver.observe(this);\n    }\n\n    public override disconnectedCallback(): void {\n        this.resizeObserver.disconnect();\n        super.disconnectedCallback();\n    }\n\n    public positionChanged(): void {\n        this.positionChangeCallbackVersion += 1;\n        if (!this.applyingConstrainedPosition) {\n            this.requestedPosition = this.position;\n            this.resetRequestedPositionAfterSynchronousUpdates();\n        }\n        this.constrainPosition();\n    }\n\n    public minChanged(): void {\n        this.constrainPosition();\n    }\n\n    public maxChanged(): void {\n        this.constrainPosition();\n    }\n\n    public minSecondaryPixelsChanged(): void {\n        this.constrainPosition();\n    }\n\n    public collapsedChanged(): void {\n        this.constrainPosition();\n    }\n\n    /** @internal */\n    public get effectiveMin(): number {\n        const configured = Number.isFinite(this.min) ? Math.min(100, Math.max(0, this.min)) : 35;\n        return Math.min(configured, this.effectiveMax);\n    }\n\n    /** @internal */\n    @volatile\n    public get effectiveMax(): number {\n        const minimum = Number.isFinite(this.min) ? Math.min(100, Math.max(0, this.min)) : 35;\n        const configured = Number.isFinite(this.max)\n            ? Math.min(100, Math.max(minimum, this.max))\n            : Math.max(minimum, 75);\n        const secondaryMinimum = this.effectiveMinSecondaryPixels;\n        if (this.availableWidth <= 2 || secondaryMinimum <= 0) {\n            return configured;\n        }\n        const pixelMaximum = 100 * (1 - secondaryMinimum / (this.availableWidth - 2));\n        return Math.max(0, Math.min(configured, pixelMaximum));\n    }\n\n    /** @internal */\n    @volatile\n    public get gridTemplateColumns(): string {\n        const secondaryMinimum = this.effectiveMinSecondaryPixels;\n        return this.collapsed\n            ? 'minmax(0, 1fr)'\n            : `minmax(0, ${this.position}fr) 2px minmax(${secondaryMinimum}px, ${100 - this.position}fr)`;\n    }\n\n    /** @internal */\n    public handleSplitterInput(event: Event): boolean {\n        event.stopPropagation();\n        this.position = (event.currentTarget as HTMLElementTagNameMap['ok-fv-splitter']).position;\n        this.$emit('input');\n        return true;\n    }\n\n    /** @internal */\n    public handleSplitterChange(event: Event): boolean {\n        event.stopPropagation();\n        this.$emit('change');\n        return true;\n    }\n\n    private constrainPosition(): void {\n        if (this.collapsed) {\n            return;\n        }\n        const finitePosition = Number.isFinite(this.requestedPosition) ? this.requestedPosition : 60;\n        const constrained = Math.min(this.effectiveMax, Math.max(this.effectiveMin, finitePosition));\n        if (constrained !== this.position) {\n            this.applyingConstrainedPosition = true;\n            this.position = constrained;\n            this.applyingConstrainedPosition = false;\n        }\n    }\n\n    private resetRequestedPositionAfterSynchronousUpdates(): void {\n        if (this.requestedPositionResetScheduled) {\n            return;\n        }\n        this.requestedPositionResetScheduled = true;\n        queueMicrotask(() => {\n            this.requestedPositionResetScheduled = false;\n            this.requestedPosition = this.position;\n        });\n    }\n\n    private get effectiveMinSecondaryPixels(): number {\n        return Number.isFinite(this.minSecondaryPixels)\n            ? Math.max(0, this.minSecondaryPixels)\n            : 300;\n    }\n}\n\nconst okFvSplitLayout = FvSplitLayout.compose({\n    baseName: 'fv-split-layout',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitLayout());\nexport const fvSplitLayoutTag = 'ok-fv-split-layout';\n"]}

package/dist/esm/fv/split-layout/styles.d.ts

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

package/dist/esm/fv/split-layout/styles.js

@@ -0,0 +1,42 @@
+import { css } from '@ni/fast-element';
+import { display } from '../../utilities/style/display';
+export const styles = css `
+    ${display('block')}
+
+    :host {
+        min-width: 0;
+        min-height: 0;
+        height: 100%;
+    }
+
+    .layout {
+        display: grid;
+        width: 100%;
+        height: 100%;
+        min-width: 0;
+        min-height: 0;
+        overflow: auto;
+    }
+
+    .pane {
+        min-width: 0;
+        min-height: 0;
+        height: 100%;
+        overflow: auto;
+    }
+
+    slot {
+        display: block;
+        min-width: 0;
+        min-height: 0;
+        height: 100%;
+    }
+
+    ::slotted([slot]) {
+        box-sizing: border-box;
+        min-width: 0;
+        min-height: 0;
+        height: 100%;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/fv/split-layout/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/split-layout/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCrB,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    ${display('block')}\n\n    :host {\n        min-width: 0;\n        min-height: 0;\n        height: 100%;\n    }\n\n    .layout {\n        display: grid;\n        width: 100%;\n        height: 100%;\n        min-width: 0;\n        min-height: 0;\n        overflow: auto;\n    }\n\n    .pane {\n        min-width: 0;\n        min-height: 0;\n        height: 100%;\n        overflow: auto;\n    }\n\n    slot {\n        display: block;\n        min-width: 0;\n        min-height: 0;\n        height: 100%;\n    }\n\n    ::slotted([slot]) {\n        box-sizing: border-box;\n        min-width: 0;\n        min-height: 0;\n        height: 100%;\n    }\n`;\n"]}

package/dist/esm/fv/split-layout/template.d.ts

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

package/dist/esm/fv/split-layout/template.js

@@ -0,0 +1,24 @@
+import { html, when } from '@ni/fast-element';
+import { fvSplitterTag } from '../splitter';
+export const template = html `
+    <div class="layout" style="grid-template-columns: ${x => x.gridTemplateColumns}">
+        <div class="pane primary" id="${x => x.primaryPaneId}">
+            <slot name="primary"></slot>
+        </div>
+        ${when(x => !x.collapsed, html `
+                <${fvSplitterTag}
+                    position="${x => x.position}"
+                    min="${x => x.effectiveMin}"
+                    max="${x => x.effectiveMax}"
+                    step="${x => x.step}"
+                    aria-controls="${x => `${x.primaryPaneId} ${x.secondaryPaneId}`}"
+                    @input="${(x, c) => x.handleSplitterInput(c.event)}"
+                    @change="${(x, c) => x.handleSplitterChange(c.event)}"
+                ></${fvSplitterTag}>
+                <div class="pane secondary" id="${x => x.secondaryPaneId}">
+                    <slot name="secondary"></slot>
+                </div>
+            `)}
+    </div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv/split-layout/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/split-layout/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAe;wDACa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;wCAC1C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;;;UAGlD,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,EACjB,IAAI,CAAe;mBACZ,aAAa;gCACA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;2BACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;2BACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;4BAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;qCACF,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,aAAa,IAAI,CAAC,CAAC,eAAe,EAAE;8BACrD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAK,CAAC;+BACvC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC;qBACnD,aAAa;kDACgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;;;aAG3D,CACJ;;CAER,CAAC","sourcesContent":["import { html, when } from '@ni/fast-element';\nimport { fvSplitterTag } from '../splitter';\nimport type { FvSplitLayout } from '.';\n\nexport const template = html<FvSplitLayout>`\n    <div class=\"layout\" style=\"grid-template-columns: ${x => x.gridTemplateColumns}\">\n        <div class=\"pane primary\" id=\"${x => x.primaryPaneId}\">\n            <slot name=\"primary\"></slot>\n        </div>\n        ${when(\n            x => !x.collapsed,\n            html<FvSplitLayout>`\n                <${fvSplitterTag}\n                    position=\"${x => x.position}\"\n                    min=\"${x => x.effectiveMin}\"\n                    max=\"${x => x.effectiveMax}\"\n                    step=\"${x => x.step}\"\n                    aria-controls=\"${x => `${x.primaryPaneId} ${x.secondaryPaneId}`}\"\n                    @input=\"${(x, c) => x.handleSplitterInput(c.event)}\"\n                    @change=\"${(x, c) => x.handleSplitterChange(c.event)}\"\n                ></${fvSplitterTag}>\n                <div class=\"pane secondary\" id=\"${x => x.secondaryPaneId}\">\n                    <slot name=\"secondary\"></slot>\n                </div>\n            `\n        )}\n    </div>\n`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/ok-components",
-  "version": "1.10.3",
+  "version": "1.11.1",
   "description": "NI Ok Components",
   "scripts": {
     "build": "npm run build:components && npm run build:cem",