@tylertech/forge 2.7.0 → 2.9.0

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

@@ -0,0 +1,29 @@
+/**
+ * @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 { ISplitViewComponent } from './split-view';
+import { SplitViewOrientation } from './split-view-constants';
+export interface ISplitViewAdapter extends IBaseAdapter {
+    registerSlotListener(listener: (evt: Event) => void): void;
+    observeResize(callback: (entry: ResizeObserverEntry) => void): void;
+    unobserveResize(): void;
+    getSlottedPanels(): ISplitViewPanelComponent[];
+    refitSlottedPanels(orientation: SplitViewOrientation): void;
+}
+export declare class SplitViewAdapter extends BaseAdapter<ISplitViewComponent> implements ISplitViewAdapter {
+    private _root;
+    constructor(component: ISplitViewComponent);
+    registerSlotListener(listener: (evt: Event) => void): void;
+    observeResize(callback: (entry: ResizeObserverEntry) => void): void;
+    unobserveResize(): void;
+    /**
+     * Gets all child panels.
+     * @returns All child panels.
+     */
+    getSlottedPanels(): ISplitViewPanelComponent[];
+    refitSlottedPanels(orientation: SplitViewOrientation): void;
+}

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

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ForgeResizeObserver, getShadowElement } from '@tylertech/forge-core';
+import { BaseAdapter } from '../../core/base/base-adapter';
+import { SPLIT_VIEW_PANEL_CONSTANTS } from '../split-view-panel';
+import { SPLIT_VIEW_CONSTANTS } from './split-view-constants';
+export class SplitViewAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._root = getShadowElement(component, SPLIT_VIEW_CONSTANTS.selectors.ROOT);
+    }
+    registerSlotListener(listener) {
+        this._root.addEventListener('slotchange', listener);
+    }
+    observeResize(callback) {
+        ForgeResizeObserver.observe(this._root, callback);
+    }
+    unobserveResize() {
+        ForgeResizeObserver.unobserve(this._root);
+    }
+    /**
+     * Gets all child panels.
+     * @returns All child panels.
+     */
+    getSlottedPanels() {
+        const nodeList = this._component.querySelectorAll(SPLIT_VIEW_CONSTANTS.selectors.PANEL);
+        return Array.from(nodeList);
+    }
+    refitSlottedPanels(orientation) {
+        // Check if the combined panel size is greater than the split view size along the relevant axis
+        const size = orientation === 'horizontal' ? this._root.clientWidth : this._root.clientHeight;
+        const panels = this.getSlottedPanels();
+        const combinedPanelSize = panels.map(panel => {
+            var _a;
+            const panelRoot = (_a = panel.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(SPLIT_VIEW_PANEL_CONSTANTS.selectors.ROOT);
+            const panelSize = orientation === 'horizontal' ? panelRoot === null || panelRoot === void 0 ? void 0 : panelRoot.clientWidth : panelRoot === null || panelRoot === void 0 ? void 0 : panelRoot.clientHeight;
+            return panelSize !== null && panelSize !== void 0 ? panelSize : 0;
+        }).reduce((cur, acc) => cur + acc, 0);
+        // Do nothing if all the panels fit
+        if (combinedPanelSize <= size) {
+            return;
+        }
+        // Get the size adjustment needed to fit
+        let diff = combinedPanelSize - size;
+        // Size down the panels as needed in reverse order, adjusting diff accordingly
+        panels.reverse().forEach(panel => {
+            if (diff <= 0) {
+                return;
+            }
+            const panelSize = panel.getContentSize();
+            const collapsibleSize = panel.getCollapsibleSize();
+            const reduceBy = Math.min(diff, collapsibleSize);
+            const newSize = panelSize - reduceBy;
+            panel.setContentSize(newSize);
+            diff -= reduceBy;
+        });
+        // If there's still overflow nothing else can be done
+    }
+}

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

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ISplitViewBase } from '../core';
+export declare const SPLIT_VIEW_CONSTANTS: {
+    elementName: "forge-split-view";
+    attributes: {
+        ORIENTATION: string;
+        DISABLED: string;
+        ALLOW_CLOSE: string;
+        AUTO_CLOSE: string;
+        AUTO_CLOSE_THRESHOLD: string;
+    };
+    classes: {
+        ROOT: string;
+    };
+    ids: {
+        ROOT: string;
+    };
+    selectors: {
+        ROOT: string;
+        PANEL: "forge-split-view-panel";
+    };
+    numbers: {
+        RESIZE_THROTTLE_THRESHOLD: number;
+    };
+    customCssProperties: {
+        ANIMATING_LAYER: string;
+    };
+};
+export declare type SplitViewOrientation = 'horizontal' | 'vertical';
+export interface ISplitViewUpdateConfig {
+    accessibility?: boolean;
+    clearCursor?: boolean;
+    cursor?: boolean;
+    orientation?: SplitViewOrientation;
+    properties?: Partial<ISplitViewBase>;
+    size?: boolean;
+}

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

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+import { SPLIT_VIEW_PANEL_CONSTANTS } from '../split-view-panel/split-view-panel-constants';
+const elementName = `${COMPONENT_NAME_PREFIX}split-view`;
+const attributes = {
+    ORIENTATION: 'orientation',
+    DISABLED: 'disabled',
+    ALLOW_CLOSE: 'allow-close',
+    AUTO_CLOSE: 'auto-close',
+    AUTO_CLOSE_THRESHOLD: 'auto-close-threshold'
+};
+const classes = {
+    ROOT: 'forge-split-view'
+};
+const ids = {
+    ROOT: 'root'
+};
+const selectors = {
+    ROOT: `#${ids.ROOT}`,
+    PANEL: SPLIT_VIEW_PANEL_CONSTANTS.elementName
+};
+const numbers = {
+    RESIZE_THROTTLE_THRESHOLD: 200
+};
+const customCssProperties = {
+    ANIMATING_LAYER: '--forge-split-view-animating-layer'
+};
+export const SPLIT_VIEW_CONSTANTS = {
+    elementName,
+    attributes,
+    classes,
+    ids,
+    selectors,
+    numbers,
+    customCssProperties
+};

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);
+}