@tylertech/forge 2.8.0 → 2.10.0

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

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

@@ -0,0 +1,295 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement, playKeyframeAnimation, toggleAttribute } from '@tylertech/forge-core';
+import { BaseAdapter } from '../../core/base/base-adapter';
+import { SPLIT_VIEW_PANEL_CONSTANTS } from './split-view-panel-constants';
+import { SPLIT_VIEW_CONSTANTS } from '../split-view/split-view-constants';
+import { getCursor, getHandleIcon, getSplitViewPanelSibling } from './split-view-panel-utils';
+export class SplitViewPanelAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._root = getShadowElement(component, SPLIT_VIEW_PANEL_CONSTANTS.selectors.ROOT);
+        this._handle = getShadowElement(component, SPLIT_VIEW_PANEL_CONSTANTS.selectors.HANDLE);
+        this._icon = getShadowElement(component, SPLIT_VIEW_PANEL_CONSTANTS.selectors.ICON);
+        this._ripple = getShadowElement(component, SPLIT_VIEW_PANEL_CONSTANTS.selectors.RIPPLE);
+        this._content = getShadowElement(component, SPLIT_VIEW_PANEL_CONSTANTS.selectors.CONTENT);
+    }
+    initialize() {
+        // Set the parent split view
+        const parent = this._component.parentElement;
+        if ((parent === null || parent === void 0 ? void 0 : parent.tagName.toLowerCase()) === SPLIT_VIEW_CONSTANTS.elementName) {
+            this._parent = parent;
+        }
+    }
+    setPointerdownListener(listener) {
+        this._handle.addEventListener('pointerdown', listener);
+    }
+    setPointerupListener(listener) {
+        document.addEventListener('pointerup', listener);
+    }
+    removePointerupListener(listener) {
+        document.removeEventListener('pointerup', listener);
+    }
+    setPointermoveListener(listener) {
+        document.addEventListener('pointermove', listener);
+    }
+    removePointermoveListener(listener) {
+        document.removeEventListener('pointermove', listener);
+    }
+    setKeydownListener(listener) {
+        this._handle.addEventListener('keydown', listener);
+    }
+    setKeyupListener(listener) {
+        this._handle.addEventListener('keyup', listener);
+    }
+    removeKeyupListener(listener) {
+        this._handle.removeEventListener('keyup', listener);
+    }
+    /**
+     * Gets the specified property value from the parent split view.
+     * @param name The property name.
+     * @returns The value of the property.
+     */
+    getParentProperty(name) {
+        var _a;
+        return (_a = this._parent) === null || _a === void 0 ? void 0 : _a[name];
+    }
+    /**
+     * Sets the accessible label of the resize handle.
+     * @param value The label text.
+     */
+    setAccessibleLabel(value) {
+        this._handle.setAttribute('aria-label', value);
+    }
+    /**
+     * Sets the disabled state of the component.
+     * @param value Whether the component is disabled.
+     */
+    setDisabled(value) {
+        this._root.classList.toggle(SPLIT_VIEW_PANEL_CONSTANTS.classes.DISABLED, value);
+        if (this._handle) {
+            this._handle.setAttribute('tabindex', value ? '-1' : '0');
+            toggleAttribute(this._handle, value, 'aria-disabled', 'true');
+        }
+    }
+    /**
+     * Sets the whether the component's handle is present and at its start or end.
+     * @param value The component's resizable value.
+     */
+    setResizable(value) {
+        this._root.setAttribute(SPLIT_VIEW_PANEL_CONSTANTS.attributes.RESIZABLE, value.toString());
+        toggleAttribute(this._handle, value !== 'off', 'aria-valuemin', '0');
+        toggleAttribute(this._handle, value !== 'off', 'aria-valuemax', '100');
+        if (value === 'off') {
+            return;
+        }
+        this._handle.remove();
+        if (value === 'end') {
+            // Place the handle after the content
+            this._root.append(this._handle);
+        }
+        else {
+            // Place the handle before the content
+            this._root.prepend(this._handle);
+        }
+    }
+    /**
+     * Sets the orientation of the component including ARIA attributes and the resize handle icon.
+     * @param value The component's orientation.
+     */
+    setOrientation(value) {
+        this._root.setAttribute(SPLIT_VIEW_PANEL_CONSTANTS.attributes.ORIENTATION, value);
+        // The divider's orientation is perpendicular to the layout of the component
+        this._handle.setAttribute('aria-orientation', value === 'horizontal' ? 'vertical' : 'horizontal');
+        this._icon.setAttribute('name', getHandleIcon(value));
+    }
+    /**
+     * Opens or closes the component.
+     * @param value Whether the component is open.
+     * @param withAnimation Whether to use the animation. Defaults to `true`.
+     */
+    setOpen(value, withAnimation = true, event) {
+        var _a, _b;
+        const finish = () => {
+            var _a, _b;
+            if (!value) {
+                this._root.classList.add(SPLIT_VIEW_PANEL_CONSTANTS.classes.CLOSED);
+            }
+            if (event) {
+                this.emitHostEvent(value ? SPLIT_VIEW_PANEL_CONSTANTS.events.DID_OPEN : SPLIT_VIEW_PANEL_CONSTANTS.events.DID_CLOSE, event);
+            }
+            (_a = this._parent) === null || _a === void 0 ? void 0 : _a.unlayerSlottedPanels();
+            (_b = this._parent) === null || _b === void 0 ? void 0 : _b.update({ accessibility: true, cursor: true });
+        };
+        if (value && this._root.classList.contains(SPLIT_VIEW_PANEL_CONSTANTS.classes.CLOSED)) {
+            this._root.classList.remove(SPLIT_VIEW_PANEL_CONSTANTS.classes.CLOSED);
+            if (!withAnimation) {
+                finish();
+                return;
+            }
+            (_a = this._parent) === null || _a === void 0 ? void 0 : _a.layerSlottedPanels(this._component);
+            playKeyframeAnimation(this._root, SPLIT_VIEW_PANEL_CONSTANTS.classes.OPENING, true).then(() => {
+                finish();
+            });
+        }
+        else if (!value && !this._root.classList.contains(SPLIT_VIEW_PANEL_CONSTANTS.classes.CLOSED)) {
+            if (!withAnimation) {
+                finish();
+                return;
+            }
+            (_b = this._parent) === null || _b === void 0 ? void 0 : _b.layerSlottedPanels(this._component);
+            playKeyframeAnimation(this._root, SPLIT_VIEW_PANEL_CONSTANTS.classes.CLOSING, true).then(() => {
+                finish();
+            });
+        }
+    }
+    /**
+     * 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) {
+        var _a;
+        this._root.classList.toggle(SPLIT_VIEW_PANEL_CONSTANTS.classes.GRABBED, value);
+        this._handle.setAttribute('aria-grabbed', value.toString());
+        (_a = this._parent) === null || _a === void 0 ? void 0 : _a.update({ clearCursor: true });
+        if (!value) {
+            document.body.style.removeProperty('cursor');
+        }
+    }
+    /**
+     * 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, config) {
+        if (orientation) {
+            this._root.style.setProperty(SPLIT_VIEW_PANEL_CONSTANTS.customCssProperties.CURSOR, getCursor(orientation, config));
+        }
+        else {
+            this._root.style.removeProperty(SPLIT_VIEW_PANEL_CONSTANTS.customCssProperties.CURSOR);
+        }
+    }
+    /**
+     * 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, config) {
+        document.body.style.setProperty('cursor', getCursor(orientation, config));
+    }
+    /**
+     * 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) {
+        return orientation === 'horizontal' ? this._content.clientWidth : this._content.clientHeight;
+    }
+    /**
+     * Sets the size of the content not including the resize handle.
+     * @param value The width or height of the content in pixels.
+     */
+    setContentSize(value) {
+        this._component.style.setProperty(SPLIT_VIEW_PANEL_CONSTANTS.customCssProperties.SIZE, `${value}px`);
+    }
+    /**
+     * 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) {
+        this._handle.setAttribute('aria-valuenow', value.toFixed(2));
+    }
+    /**
+     * Sets focus on the handle element.
+     */
+    focusHandle() {
+        this._handle.focus();
+    }
+    /**
+     * 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, resizable) {
+        if (resizable === 'off') {
+            // Return -1 if the panel is static (i.e. can't be user resized)
+            return -1;
+        }
+        const sibling = getSplitViewPanelSibling(this._component);
+        if (sibling) {
+            const siblingSize = sibling.getCollapsibleSize();
+            return siblingSize + this.getContentSize(orientation);
+        }
+        else {
+            return this.getParentSize(orientation);
+        }
+    }
+    /**
+     * 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() {
+        var _a;
+        const sibling = getSplitViewPanelSibling(this._component);
+        return (_a = sibling === null || sibling === void 0 ? void 0 : sibling.getContentSize()) !== null && _a !== void 0 ? _a : 0;
+    }
+    /**
+     * 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) {
+        const sibling = getSplitViewPanelSibling(this._component);
+        sibling === null || sibling === void 0 ? void 0 : sibling.setContentSize(value);
+    }
+    /**
+     * Runs the ripple animation.
+     * @param fromActivated Whether the ripple starts from and should end in an activated state.
+     */
+    activateRipple(fromActivated) {
+        if (fromActivated) {
+            this._ripple.deactivate();
+            // Wait a short amount of time so the animation is distinguishable
+            window.setTimeout(() => {
+                this._ripple.activate();
+            }, SPLIT_VIEW_PANEL_CONSTANTS.numbers.RIPPLE_ACTIVATION_WAIT);
+        }
+        else {
+            this._ripple.activate();
+            this._ripple.deactivate();
+        }
+    }
+    /**
+     * Deactivates the ripple.
+     */
+    deactivateRipple() {
+        this._ripple.deactivate();
+    }
+    /**
+     * 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) {
+        var _a, _b;
+        const parentSize = orientation === 'horizontal' ? (_a = this._parent) === null || _a === void 0 ? void 0 : _a.clientWidth : (_b = this._parent) === null || _b === void 0 ? void 0 : _b.clientHeight;
+        return parentSize !== null && parentSize !== void 0 ? parentSize : 0;
+    }
+    /**
+     * Updates the provided characteristics of all panels.
+     * @param config An update configuration.
+     */
+    updateParent(config) {
+        var _a;
+        (_a = this._parent) === null || _a === void 0 ? void 0 : _a.update(config);
+    }
+}

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

@@ -0,0 +1,97 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { SplitViewOrientation } from '../split-view/split-view-constants';
+export declare const SPLIT_VIEW_PANEL_CONSTANTS: {
+    elementName: "forge-split-view-panel";
+    attributes: {
+        RESIZABLE: string;
+        SIZE: string;
+        MIN: string;
+        MAX: string;
+        OPEN: string;
+        ACCESSIBLE_LABEL: string;
+        DISABLED: string;
+        ALLOW_CLOSE: string;
+        AUTO_CLOSE: string;
+        AUTO_CLOSE_THRESHOLD: string;
+        ORIENTATION: string;
+    };
+    classes: {
+        ROOT: string;
+        GRABBED: string;
+        HANDLE: string;
+        ICON: string;
+        CONTENT: string;
+        CLOSED: string;
+        CLOSING: string;
+        OPENING: string;
+        DISABLED: string;
+    };
+    ids: {
+        ROOT: string;
+        HANDLE: string;
+        ICON: string;
+        RIPPLE: string;
+        CONTENT: string;
+    };
+    selectors: {
+        ROOT: string;
+        HANDLE: string;
+        ICON: string;
+        RIPPLE: string;
+        CONTENT: string;
+    };
+    events: {
+        WILL_RESIZE: string;
+        RESIZE_START: string;
+        RESIZE_END: string;
+        RESIZE: string;
+        DID_OPEN: string;
+        DID_CLOSE: string;
+        WILL_OPEN: string;
+        WILL_CLOSE: string;
+    };
+    numbers: {
+        RIPPLE_ACTIVATION_WAIT: number;
+    };
+    customCssProperties: {
+        SIZE: string;
+        CURSOR: string;
+    };
+};
+export declare type SplitViewPanelResizable = 'start' | 'end' | 'off';
+export declare type SplitViewInputDeviceType = 'pointer' | 'keyboard';
+export declare enum SplitViewAnimatingLayer {
+    Under = 1,
+    Active = 2,
+    Above = 3
+}
+export interface ISplitViewPanelCursorConfig {
+    resizable: SplitViewPanelResizable;
+    boundary: 'min' | 'max' | 'none';
+}
+export interface ISplitViewPanelState {
+    orientation: SplitViewOrientation;
+    resizable: SplitViewPanelResizable;
+    arrowKeyHeld: boolean;
+    startPoint?: number;
+    startSize?: number;
+    currentSize?: number;
+    availableSpace?: number;
+    siblingSize?: number;
+    keyboardDelta: number;
+    isAtMin: boolean;
+    isAtMax: boolean;
+    min: number;
+    max?: number;
+}
+export interface ISplitViewPanelWillResizeEvent {
+    inputDeviceType: SplitViewInputDeviceType;
+}
+export interface ISplitViewPanelOpenEvent {
+    auto: boolean;
+    userInitiated: boolean;
+}

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

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}split-view-panel`;
+const attributes = {
+    RESIZABLE: 'resizable',
+    SIZE: 'size',
+    MIN: 'min',
+    MAX: 'max',
+    OPEN: 'open',
+    ACCESSIBLE_LABEL: 'accessible-label',
+    DISABLED: 'disabled',
+    ALLOW_CLOSE: 'allow-close',
+    AUTO_CLOSE: 'auto-close',
+    AUTO_CLOSE_THRESHOLD: 'auto-close-threshold',
+    ORIENTATION: 'orientation'
+};
+const classes = {
+    ROOT: 'forge-split-view-panel',
+    GRABBED: 'forge-split-view-panel--grabbed',
+    HANDLE: 'forge-split-view-panel__handle',
+    ICON: 'forge-split-view-panel__icon',
+    CONTENT: 'forge-split-view-panel__content',
+    CLOSED: 'forge-split-view-panel--closed',
+    CLOSING: 'forge-split-view-panel--closing',
+    OPENING: 'forge-split-view-panel--opening',
+    DISABLED: 'forge-split-view-panel--disabled'
+};
+const ids = {
+    ROOT: 'root',
+    HANDLE: 'handle',
+    ICON: 'icon',
+    RIPPLE: 'ripple',
+    CONTENT: 'content'
+};
+const selectors = {
+    ROOT: `#${ids.ROOT}`,
+    HANDLE: `#${ids.HANDLE}`,
+    ICON: `#${ids.ICON}`,
+    RIPPLE: `#${ids.RIPPLE}`,
+    CONTENT: `#${ids.CONTENT}`
+};
+const events = {
+    WILL_RESIZE: `${elementName}-will-resize`,
+    RESIZE_START: `${elementName}-resize-start`,
+    RESIZE_END: `${elementName}-resize-end`,
+    RESIZE: `${elementName}-resize`,
+    DID_OPEN: `${elementName}-did-open`,
+    DID_CLOSE: `${elementName}-did-close`,
+    WILL_OPEN: `${elementName}-will-open`,
+    WILL_CLOSE: `${elementName}-will-close`
+};
+const numbers = {
+    RIPPLE_ACTIVATION_WAIT: 200
+};
+const customCssProperties = {
+    SIZE: '--forge-split-view-panel-size',
+    CURSOR: '--forge-split-view-panel-cursor'
+};
+export const SPLIT_VIEW_PANEL_CONSTANTS = {
+    elementName,
+    attributes,
+    classes,
+    ids,
+    selectors,
+    events,
+    numbers,
+    customCssProperties
+};
+export var SplitViewAnimatingLayer;
+(function (SplitViewAnimatingLayer) {
+    SplitViewAnimatingLayer[SplitViewAnimatingLayer["Under"] = 1] = "Under";
+    SplitViewAnimatingLayer[SplitViewAnimatingLayer["Active"] = 2] = "Active";
+    SplitViewAnimatingLayer[SplitViewAnimatingLayer["Above"] = 3] = "Above";
+})(SplitViewAnimatingLayer || (SplitViewAnimatingLayer = {}));