@tylertech/forge 2.8.0 → 2.9.0

package/esm/split-view/split-view/split-view-foundation.d.ts

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { ISplitViewBase } from '../core/split-view-base';
+import { ISplitViewPanelComponent } from '../split-view-panel';
+import { ISplitViewAdapter } from './split-view-adapter';
+import { ISplitViewUpdateConfig, SplitViewOrientation } from './split-view-constants';
+export interface ISplitViewFoundation extends ISplitViewBase, ICustomElementFoundation {
+    orientation: SplitViewOrientation;
+    layerSlottedPanels(target: ISplitViewPanelComponent): void;
+    unlayerSlottedPanels(): void;
+    update(config: ISplitViewUpdateConfig): void;
+    refitSlottedPanels(): void;
+}
+export declare class SplitViewFoundation implements ISplitViewFoundation {
+    private _adapter;
+    private _orientation;
+    private _disabled;
+    private _allowClose;
+    private _autoClose;
+    private _autoCloseThreshold;
+    private _slotListener;
+    private _resizeObserverCallback;
+    private _isInitialized;
+    constructor(_adapter: ISplitViewAdapter);
+    initialize(): void;
+    disconnect(): void;
+    private _onSlotChange;
+    private _onResize;
+    /**
+     * Sets the resizable value of slotted panels with no resizable value set.
+     */
+    private _layoutSlottedPanels;
+    /**
+     * Get/set whether panels are arranged horizontally or vertically.
+     */
+    get orientation(): SplitViewOrientation;
+    set orientation(value: SplitViewOrientation);
+    private _applyOrientation;
+    /**
+     * Get/set whether interactions are disabled.
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _applyDisabled;
+    /**
+     * Get/set whether closing the panel is disabled.
+     */
+    get allowClose(): boolean;
+    set allowClose(value: boolean);
+    private _applyAllowClose;
+    /**
+     * Get/set whether the panel closes when a threshold size is reached.
+     */
+    get autoClose(): boolean;
+    set autoClose(value: boolean);
+    private _applyAutoClose;
+    /**
+     * Get/set the size at which panels auto close.
+     */
+    get autoCloseThreshold(): number;
+    set autoCloseThreshold(value: number);
+    private _applyAutoCloseThreshold;
+    /**
+     * Layers panels in a set order during an animation. Panels that the target is animating toward
+     * stack above it and other layers stack under it.
+     * @param target The animating panel.
+     */
+    layerSlottedPanels(target: ISplitViewPanelComponent): void;
+    /**
+     * Removes layering after an animation.
+     */
+    unlayerSlottedPanels(): void;
+    /**
+     * Updates the provided characteristics of each panel.
+     * @param config An update configuration.
+     */
+    update(config: ISplitViewUpdateConfig): void;
+    /**
+     * Resizes panels within the split view to avoid overflow.
+     */
+    refitSlottedPanels(): void;
+}

package/esm/split-view/split-view/split-view-foundation.js

@@ -0,0 +1,179 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { throttle } from '@tylertech/forge-core';
+import { SplitViewAnimatingLayer } from '../split-view-panel';
+import { SPLIT_VIEW_CONSTANTS } from './split-view-constants';
+export class SplitViewFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._orientation = 'horizontal';
+        this._disabled = false;
+        this._allowClose = false;
+        this._autoClose = false;
+        this._autoCloseThreshold = 0;
+        this._isInitialized = false;
+        this._slotListener = evt => this._onSlotChange(evt);
+        this._resizeObserverCallback = throttle((entry) => this._onResize(entry), SPLIT_VIEW_CONSTANTS.numbers.RESIZE_THROTTLE_THRESHOLD);
+    }
+    initialize() {
+        this._adapter.registerSlotListener(this._slotListener);
+        this._adapter.observeResize(this._resizeObserverCallback);
+        this._applyOrientation();
+        this._isInitialized = true;
+    }
+    disconnect() {
+        this._adapter.unobserveResize();
+    }
+    _onSlotChange(evt) {
+        this._layoutSlottedPanels();
+        this.update({ accessibility: true, cursor: true, orientation: this._orientation });
+    }
+    _onResize(entry) {
+        this.update({ accessibility: true, cursor: true, size: true });
+    }
+    /**
+     * Sets the resizable value of slotted panels with no resizable value set.
+     */
+    _layoutSlottedPanels() {
+        const panels = this._adapter.getSlottedPanels();
+        // A single panel should have resizable set to off. Just leave it alone.
+        if (panels.length < 2) {
+            return;
+        }
+        // Don't change any panels if resizable is already set.
+        if (panels.some(panel => panel.resizable !== 'off')) {
+            return;
+        }
+        // All panels after the first have resizable set to start.
+        panels.slice(1).forEach(panel => panel.resizable = 'start');
+    }
+    /**
+     * Get/set whether panels are arranged horizontally or vertically.
+     */
+    get orientation() {
+        return this._orientation;
+    }
+    set orientation(value) {
+        if (this._orientation !== value) {
+            this._orientation = value;
+            this._applyOrientation();
+        }
+    }
+    _applyOrientation() {
+        this._adapter.setHostAttribute(SPLIT_VIEW_CONSTANTS.attributes.ORIENTATION, this._orientation);
+        this.update({ orientation: this._orientation });
+        if (this._isInitialized) {
+            this._adapter.refitSlottedPanels(this._orientation);
+        }
+        this.update({ accessibility: true, cursor: true });
+    }
+    /**
+     * Get/set whether interactions are disabled.
+     */
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        if (this._disabled !== value) {
+            this._disabled = value;
+            this._applyDisabled();
+        }
+    }
+    _applyDisabled() {
+        this._adapter.toggleHostAttribute(SPLIT_VIEW_CONSTANTS.attributes.DISABLED, this._disabled);
+        this.update({ properties: { disabled: this._disabled } });
+    }
+    /**
+     * Get/set whether closing the panel is disabled.
+     */
+    get allowClose() {
+        return this._allowClose;
+    }
+    set allowClose(value) {
+        if (this._allowClose !== value) {
+            this._allowClose = value;
+            this._applyAllowClose();
+        }
+    }
+    _applyAllowClose() {
+        this._adapter.toggleHostAttribute(SPLIT_VIEW_CONSTANTS.attributes.ALLOW_CLOSE, this._allowClose);
+        this.update({ properties: { allowClose: this._allowClose } });
+    }
+    /**
+     * Get/set whether the panel closes when a threshold size is reached.
+     */
+    get autoClose() {
+        return this._autoClose;
+    }
+    set autoClose(value) {
+        if (this._autoClose !== value) {
+            this._autoClose = value;
+            this._applyAutoClose();
+        }
+    }
+    _applyAutoClose() {
+        this._adapter.toggleHostAttribute(SPLIT_VIEW_CONSTANTS.attributes.AUTO_CLOSE, this._autoClose);
+        this.update({ properties: { autoClose: this._autoClose } });
+    }
+    /**
+     * Get/set the size at which panels auto close.
+     */
+    get autoCloseThreshold() {
+        return this._autoCloseThreshold;
+    }
+    set autoCloseThreshold(value) {
+        if (this._autoCloseThreshold !== value) {
+            this._autoCloseThreshold = value;
+            this._applyAutoCloseThreshold();
+        }
+    }
+    _applyAutoCloseThreshold() {
+        this._adapter.setHostAttribute(SPLIT_VIEW_CONSTANTS.attributes.AUTO_CLOSE_THRESHOLD, this._autoCloseThreshold.toString());
+        this.update({ properties: { autoCloseThreshold: this._autoCloseThreshold } });
+    }
+    /**
+     * Layers panels in a set order during an animation. Panels that the target is animating toward
+     * stack above it and other layers stack under it.
+     * @param target The animating panel.
+     */
+    layerSlottedPanels(target) {
+        const panels = this._adapter.getSlottedPanels();
+        const increment = target.resizable === 'start' ? 1 : -1;
+        let layer = target.resizable === 'start' ? SplitViewAnimatingLayer.Under : SplitViewAnimatingLayer.Above;
+        panels.forEach(panel => {
+            // Increment the layer if moving into or out of the target panel
+            if (panel === target || layer === SplitViewAnimatingLayer.Active) {
+                layer += increment;
+            }
+            panel.style.setProperty(SPLIT_VIEW_CONSTANTS.customCssProperties.ANIMATING_LAYER, layer.toString());
+        });
+    }
+    /**
+     * Removes layering after an animation.
+     */
+    unlayerSlottedPanels() {
+        const panels = this._adapter.getSlottedPanels();
+        panels.forEach(panel => {
+            panel.style.removeProperty(SPLIT_VIEW_CONSTANTS.customCssProperties.ANIMATING_LAYER);
+        });
+    }
+    /**
+     * Updates the provided characteristics of each panel.
+     * @param config An update configuration.
+     */
+    update(config) {
+        const panels = this._adapter.getSlottedPanels();
+        panels.forEach(panel => {
+            panel.update(config);
+        });
+    }
+    /**
+     * Resizes panels within the split view to avoid overflow.
+     */
+    refitSlottedPanels() {
+        this._adapter.refitSlottedPanels(this._orientation);
+    }
+}

package/esm/split-view/split-view/split-view.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
+import { ISplitViewUpdateConfig, SplitViewOrientation } from './split-view-constants';
+import { ISplitViewPanelComponent } from '../split-view-panel';
+import { ISplitViewBase } from '../core/split-view-base';
+export interface ISplitViewComponent extends ISplitViewBase, IBaseComponent {
+    orientation: SplitViewOrientation;
+    layerSlottedPanels(target: ISplitViewPanelComponent): void;
+    unlayerSlottedPanels(): void;
+    update(config: ISplitViewUpdateConfig): void;
+    refit(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-split-view': ISplitViewComponent;
+    }
+}
+export declare class SplitViewComponent extends BaseComponent implements ISplitViewComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /**
+     * Whether child split view panels are laid out and resize horizontally or vertically.
+     */
+    orientation: SplitViewOrientation;
+    /**
+     * Whether child split view panels have resize interactions disabled or enabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether child split view panels can be closed via keyboard interaction.
+     */
+    allowClose: boolean;
+    /**
+     * Whether child split view panels automatically close when they reach a size of 0.
+     */
+    autoClose: boolean;
+    /**
+     * The size at which panels auto close.
+     */
+    autoCloseThreshold: number;
+    /**
+     * Arranges split view panels to avoid overlapping during animations.
+     * @param target The originating split view panel component.
+     */
+    layerSlottedPanels(target: ISplitViewPanelComponent): void;
+    /**
+     * Removes presentation data set during an animation.
+     */
+    unlayerSlottedPanels(): void;
+    /**
+     * Updates the provided characteristics of each slotted panel.
+     * @param config An update configuration.
+     */
+    update(config: ISplitViewUpdateConfig): void;
+    /**
+     * Resizes panels within the split view to avoid overflow.
+     */
+    refit(): void;
+}

package/esm/split-view/split-view/split-view.js

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, attachShadowTemplate, FoundationProperty, coerceBoolean, coerceNumber } from '@tylertech/forge-core';
+import { BaseComponent } from '../../core/base/base-component';
+import { SplitViewAdapter } from './split-view-adapter';
+import { SplitViewFoundation } from './split-view-foundation';
+import { SPLIT_VIEW_CONSTANTS } from './split-view-constants';
+import { SplitViewPanelComponent } from '../split-view-panel';
+const template = '<template><div class=\"forge-split-view\" id=\"root\" part=\"root\"><slot></slot></div></template>';
+const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-split-view{display:-webkit-box;display:flex;width:100%;height:100%}:host{--forge-split-view-handle-width:8px;display:block;height:100%;width:100%;overflow:hidden;contain:paint size}:host([hidden]){display:none}:host([orientation=horizontal]) .forge-split-view{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}:host([orientation=vertical]) .forge-split-view{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}';
+let SplitViewComponent = class SplitViewComponent extends BaseComponent {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new SplitViewFoundation(new SplitViewAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            SPLIT_VIEW_CONSTANTS.attributes.ORIENTATION,
+            SPLIT_VIEW_CONSTANTS.attributes.DISABLED,
+            SPLIT_VIEW_CONSTANTS.attributes.ALLOW_CLOSE,
+            SPLIT_VIEW_CONSTANTS.attributes.AUTO_CLOSE,
+            SPLIT_VIEW_CONSTANTS.attributes.AUTO_CLOSE_THRESHOLD
+        ];
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case SPLIT_VIEW_CONSTANTS.attributes.ORIENTATION:
+                this.orientation = newValue;
+                break;
+            case SPLIT_VIEW_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+            case SPLIT_VIEW_CONSTANTS.attributes.ALLOW_CLOSE:
+                this.allowClose = coerceBoolean(newValue);
+                break;
+            case SPLIT_VIEW_CONSTANTS.attributes.AUTO_CLOSE:
+                this.autoClose = coerceBoolean(newValue);
+                break;
+            case SPLIT_VIEW_CONSTANTS.attributes.AUTO_CLOSE_THRESHOLD:
+                this.autoCloseThreshold = coerceNumber(newValue);
+                break;
+        }
+    }
+    /**
+     * Arranges split view panels to avoid overlapping during animations.
+     * @param target The originating split view panel component.
+     */
+    layerSlottedPanels(target) {
+        this._foundation.layerSlottedPanels(target);
+    }
+    /**
+     * Removes presentation data set during an animation.
+     */
+    unlayerSlottedPanels() {
+        this._foundation.unlayerSlottedPanels();
+    }
+    /**
+     * Updates the provided characteristics of each slotted panel.
+     * @param config An update configuration.
+     */
+    update(config) {
+        this._foundation.update(config);
+    }
+    /**
+     * Resizes panels within the split view to avoid overflow.
+     */
+    refit() {
+        this._foundation.refitSlottedPanels();
+    }
+};
+__decorate([
+    FoundationProperty()
+], SplitViewComponent.prototype, "orientation", void 0);
+__decorate([
+    FoundationProperty()
+], SplitViewComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], SplitViewComponent.prototype, "allowClose", void 0);
+__decorate([
+    FoundationProperty()
+], SplitViewComponent.prototype, "autoClose", void 0);
+__decorate([
+    FoundationProperty()
+], SplitViewComponent.prototype, "autoCloseThreshold", void 0);
+SplitViewComponent = __decorate([
+    CustomElement({
+        name: SPLIT_VIEW_CONSTANTS.elementName,
+        dependencies: [SplitViewPanelComponent]
+    })
+], SplitViewComponent);
+export { SplitViewComponent };

package/esm/split-view/split-view-panel/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './split-view-panel-adapter';
+export * from './split-view-panel-constants';
+export * from './split-view-panel-foundation';
+export * from './split-view-panel';
+export * from './split-view-panel-utils';
+export declare function defineSplitViewPanelComponent(): void;

package/esm/split-view/split-view-panel/index.js

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { SplitViewPanelComponent } from './split-view-panel';
+export * from './split-view-panel-adapter';
+export * from './split-view-panel-constants';
+export * from './split-view-panel-foundation';
+export * from './split-view-panel';
+export * from './split-view-panel-utils';
+export function defineSplitViewPanelComponent() {
+    defineCustomElement(SplitViewPanelComponent);
+}

package/esm/split-view/split-view-panel/split-view-panel-adapter.d.ts

@@ -0,0 +1,171 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
+import { ISplitViewPanelComponent } from './split-view-panel';
+import { ISplitViewPanelCursorConfig, ISplitViewPanelOpenEvent, SplitViewPanelResizable } from './split-view-panel-constants';
+import { ISplitViewUpdateConfig, SplitViewOrientation } from '../split-view/split-view-constants';
+import { ISplitViewComponent } from '../split-view/split-view';
+export interface ISplitViewPanelAdapter extends IBaseAdapter {
+    initialize(): void;
+    setPointerdownListener(listener: (evt: PointerEvent) => void): void;
+    setPointerupListener(listener: (evt: PointerEvent) => void): void;
+    removePointerupListener(listener: (evt: PointerEvent) => void): void;
+    setPointermoveListener(listener: (evt: PointerEvent) => void): void;
+    removePointermoveListener(listener: (evt: PointerEvent) => void): void;
+    setKeydownListener(listener: (evt: KeyboardEvent) => void): void;
+    setKeyupListener(listener: (evt: KeyboardEvent) => void): void;
+    removeKeyupListener(listener: (evt: KeyboardEvent) => void): void;
+    getParentProperty(name: keyof ISplitViewComponent): unknown;
+    setAccessibleLabel(value: string): void;
+    setDisabled(value: boolean): void;
+    setResizable(value: SplitViewPanelResizable): void;
+    setOrientation(value: SplitViewOrientation): void;
+    setOpen(value: boolean, withAnimation?: boolean, event?: ISplitViewPanelOpenEvent): void;
+    setGrabbed(value: boolean): void;
+    setHandleCursor(orientation?: SplitViewOrientation, config?: ISplitViewPanelCursorConfig): void;
+    setBodyCursor(orientation: SplitViewOrientation, config?: ISplitViewPanelCursorConfig): void;
+    getContentSize(orientation: SplitViewOrientation): number;
+    setContentSize(value: number): void;
+    setValuenow(value: number): void;
+    focusHandle(): void;
+    getAvailableSpace(orientation: SplitViewOrientation, resizable: SplitViewPanelResizable): number;
+    getSiblingContentSize(): number;
+    setSiblingContentSize(value: number): void;
+    activateRipple(defaultActivated: boolean): void;
+    deactivateRipple(): void;
+    getParentSize(orientation: SplitViewOrientation): number;
+    updateParent(config: ISplitViewUpdateConfig): void;
+}
+export declare class SplitViewPanelAdapter extends BaseAdapter<ISplitViewPanelComponent> implements ISplitViewPanelAdapter {
+    private _root;
+    private _handle;
+    private _icon;
+    private _ripple;
+    private _content;
+    private _parent?;
+    constructor(component: ISplitViewPanelComponent);
+    initialize(): void;
+    setPointerdownListener(listener: (evt: PointerEvent) => void): void;
+    setPointerupListener(listener: (evt: PointerEvent) => void): void;
+    removePointerupListener(listener: (evt: PointerEvent) => void): void;
+    setPointermoveListener(listener: (evt: PointerEvent) => void): void;
+    removePointermoveListener(listener: (evt: PointerEvent) => void): void;
+    setKeydownListener(listener: (evt: KeyboardEvent) => void): void;
+    setKeyupListener(listener: (evt: KeyboardEvent) => void): void;
+    removeKeyupListener(listener: (evt: KeyboardEvent) => void): void;
+    /**
+     * Gets the specified property value from the parent split view.
+     * @param name The property name.
+     * @returns The value of the property.
+     */
+    getParentProperty(name: keyof ISplitViewComponent): unknown;
+    /**
+     * Sets the accessible label of the resize handle.
+     * @param value The label text.
+     */
+    setAccessibleLabel(value: string): void;
+    /**
+     * Sets the disabled state of the component.
+     * @param value Whether the component is disabled.
+     */
+    setDisabled(value: boolean): void;
+    /**
+     * Sets the whether the component's handle is present and at its start or end.
+     * @param value The component's resizable value.
+     */
+    setResizable(value: SplitViewPanelResizable): void;
+    /**
+     * Sets the orientation of the component including ARIA attributes and the resize handle icon.
+     * @param value The component's orientation.
+     */
+    setOrientation(value: SplitViewOrientation): void;
+    /**
+     * Opens or closes the component.
+     * @param value Whether the component is open.
+     * @param withAnimation Whether to use the animation. Defaults to `true`.
+     */
+    setOpen(value: boolean, withAnimation?: boolean, event?: ISplitViewPanelOpenEvent): void;
+    /**
+     * Sets the components appearance and accessibility to indicated whether it is currently grabbed
+     * by the user. Applies a cursor style to the document body.
+     * @param value Whether the component is currently being resized via pointer interaction.
+     */
+    setGrabbed(value: boolean): void;
+    /**
+     * Applies a cursor style to the resize handle.
+     * @param orientation The component's orientation. If absent the cursor will be removed.
+     * @param config The component's resizable value and whether it's at the min or max value.
+     */
+    setHandleCursor(orientation?: SplitViewOrientation, config?: ISplitViewPanelCursorConfig): void;
+    /**
+     * Applies a cursor style to the document body.
+     * @param orientation The component's orientation.
+     * @param config The component's resizable value and whether it's at the min or max value.
+     */
+    setBodyCursor(orientation: SplitViewOrientation, config?: ISplitViewPanelCursorConfig): void;
+    /**
+     * Gets the size of the content along the orientation axis. Does not include the resize handle.
+     * @param orientation The component's orientation.
+     * @returns The width or height of the content in pixels.
+     */
+    getContentSize(orientation: SplitViewOrientation): number;
+    /**
+     * Sets the size of the content not including the resize handle.
+     * @param value The width or height of the content in pixels.
+     */
+    setContentSize(value: number): void;
+    /**
+     * Sets the ARIA attribute representing the size of the content compared to its min and max.
+     * @param value The content size scaled from 0 to 100.
+     */
+    setValuenow(value: number): void;
+    /**
+     * Sets focus on the handle element.
+     */
+    focusHandle(): void;
+    /**
+     * Gets the amount of space that the component is allowed to take. This includes the current
+     * size of the component and the size of the sibling it resizes into along the axis of
+     * orientation. The sibling's min and max values are taken into account but the component's are
+     * not.
+     * @param orientation The component's orientation.
+     * @param resizable The component's resizable value.
+     * @returns The amount of space available for the component to resize into in pixels.
+     */
+    getAvailableSpace(orientation: SplitViewOrientation, resizable: SplitViewPanelResizable): number;
+    /**
+     * Gets the content size of the sibling panel the component resizes into along its axis of
+     * orientation.
+     * @returns The sibling's content size in pixels or 0 if the sibling does not exist.
+     */
+    getSiblingContentSize(): number;
+    /**
+     * Sets the content size of the sibling panel the component resizes into along its axis of
+     * orientation.
+     * @returns The sibling's content size in pixels.
+     */
+    setSiblingContentSize(value: number): void;
+    /**
+     * Runs the ripple animation.
+     * @param fromActivated Whether the ripple starts from and should end in an activated state.
+     */
+    activateRipple(fromActivated: boolean): void;
+    /**
+     * Deactivates the ripple.
+     */
+    deactivateRipple(): void;
+    /**
+     * Gets the size of the parent split view along the axis of orientation.
+     * @param orientation The component's orientation.
+     * @returns The parent's size in pixels.
+     */
+    getParentSize(orientation: SplitViewOrientation): number;
+    /**
+     * Updates the provided characteristics of all panels.
+     * @param config An update configuration.
+     */
+    updateParent(config: ISplitViewUpdateConfig): void;
+}