@tylertech/forge 3.12.0 → 3.13.0

package/esm/core/utils/key-action.js

@@ -0,0 +1,109 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * A Lit controller for attaching key down actions to a component host.
+ *
+ * @example
+ * class ExampleComponent extends LitElement {
+ *   private _keyActionController = new KeyActionController(this, {
+ *     actions: [
+ *       {
+ *         key: ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'],
+ *         handler: this._handleArrowKey.bind(this),
+ *         allowRepeat: true
+ *       },
+ *       { key: 'Enter', handler: this._handleEnterKey.bind(this) },
+ *       { key: { key: 'a', modifier: 'shift' }, handler: this._handleAKey.bind(this) }
+ *     ],
+ *     searchHandler: this.handleSearch.bind(this)
+ *   });
+ *
+ *   private _handleArrowKey(evt: KeyboardEvent): void {
+ *     console.log(evt.key);
+ *   }
+ *
+ *   private _handleEnterKey(evt: KeyboardEvent): void {
+ *     console.log(evt.key);
+ *   }
+ *
+ *   private _handleAKey(evt: KeyboardEvent): void {
+ *     console.log(evt.key);
+ *   }
+ *
+ *   private _handleSearch(searchString: string): void {
+ *     console.log(searchString);
+ *   }
+ */
+export class KeyActionController {
+    constructor(host, config) {
+        this._searchString = '';
+        this._keyDownListener = (event) => this._handleKeyDown(event);
+        this.host = host;
+        this.actions = config?.actions ?? [];
+        this.searchHandler = config?.searchHandler;
+        host.addController(this);
+    }
+    hostConnected() {
+        this.host.addEventListener('keydown', this._keyDownListener);
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('keydown', this._keyDownListener);
+    }
+    _handleKeyDown(evt) {
+        // Attempt to match the event to each action sequentially.
+        for (const action of this.actions) {
+            // Check if the event matches any of the action's keys. If not continue to the next action.
+            const keys = Array.isArray(action.key) ? action.key : [action.key];
+            if (!keys.some(key => this._eventMatchesKey(evt, key))) {
+                continue;
+            }
+            // Exit if the key is repeated and the action does not allow it.
+            if (!action.allowRepeat && evt.repeat) {
+                return;
+            }
+            // Prevent default behavior, call the handler function, and return if the handler does not allow fallthrough.
+            evt.preventDefault();
+            if (!action.handler(evt)) {
+                return;
+            }
+        }
+        // If no keys matched or fallthrough was allowed, attempt to handle the event as a search.
+        if (this.searchHandler) {
+            this._handleSearch(evt);
+        }
+    }
+    _handleSearch(evt) {
+        // Ignore the event if it includes a modifier key.
+        if (evt.altKey || evt.ctrlKey || evt.metaKey || evt.shiftKey) {
+            return;
+        }
+        // Only accept single character keys that are not whitespace.
+        if (evt.key.length !== 1 || !evt.key.match(/\S/)) {
+            return;
+        }
+        evt.preventDefault();
+        // Clear the previous timeout and start a new one that resets the search string after a delay.
+        clearTimeout(this._searchTimeout);
+        this._searchTimeout = window.setTimeout(() => (this._searchString = ''), KeyActionController._searchTimeout);
+        // Append the pressed key to the search string and run the handler.
+        this._searchString += evt.key;
+        this.searchHandler?.(this._searchString, evt);
+    }
+    _eventMatchesKey(evt, key) {
+        const keyName = typeof key === 'string' ? key : key.key;
+        if (evt.key !== keyName) {
+            return false;
+        }
+        // If the key is a string it already matches.
+        if (typeof key === 'string') {
+            return true;
+        }
+        // Return false if any required modifier keys are not pressed.
+        const modifiers = key.modifier ? (Array.isArray(key.modifier) ? key.modifier : [key.modifier]) : [];
+        return modifiers.every(modifier => evt[`${modifier}Key`]);
+    }
+}
+KeyActionController._searchTimeout = 500;

package/esm/expansion-panel/expansion-panel-adapter.d.ts

@@ -4,9 +4,11 @@
  * License: Apache-2.0
  */
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { IOpenIconComponent } from '../open-icon';
 import { IExpansionPanelComponent } from './expansion-panel';
 export interface IExpansionPanelAdapter extends IBaseAdapter {
     readonly triggerElement?: HTMLElement | null;
+    readonly openIcon?: IOpenIconComponent | null;
     setAnimationCompleteListener(listener: () => void): void;
     addContentSlotListener(listener: EventListener): void;
     addHeaderListener(type: keyof HTMLElementEventMap, listener: EventListener): void;
@@ -20,6 +22,8 @@ export interface IExpansionPanelAdapter extends IBaseAdapter {
     animationEnd(): void;
     setTriggerElementById(id: string): void;
     setTriggerElement(el?: HTMLElement | null): void;
+    setOpenIconById(id: string): void;
+    setOpenIcon(openIcon?: IOpenIconComponent | null): void;
     setContentId(): void;
     updateAriaControls(): void;
     updateAriaExpanded(open: boolean): void;
@@ -32,15 +36,18 @@ export declare class ExpansionPanelAdapter extends BaseAdapter<IExpansionPanelCo
     private _defaultSlotElement;
     private _triggerListenerController;
     private _triggerElement?;
+    private _openIcon?;
     private _transitionStartListener;
     private _transitionEndListener;
     private _transitionCompleteListener;
     constructor(component: IExpansionPanelComponent);
     get triggerElement(): HTMLElement | null | undefined;
+    get openIcon(): IOpenIconComponent | null | undefined;
     private get _slottedContentElement();
     private set _slottedContentId(value);
     private get _slottedContentId();
     setTriggerElementById(id: string): void;
+    setOpenIconById(id: string): void;
     setAnimationCompleteListener(listener: () => void): void;
     addContentSlotListener(listener: EventListener): void;
     addHeaderListener(type: keyof HTMLElementEventMap, listener: EventListener): void;
@@ -55,9 +62,11 @@ export declare class ExpansionPanelAdapter extends BaseAdapter<IExpansionPanelCo
     animationStart(): void;
     animationEnd(): void;
     setTriggerElement(el: HTMLElement | null): void;
+    setOpenIcon(openIcon: IOpenIconComponent | null): void;
     setContentId(): void;
     updateAriaControls(): void;
     updateAriaExpanded(open: boolean): void;
     detachTriggerAria(): void;
     private _getTriggerElementById;
+    private _getOpenIconElementById;
 }

package/esm/expansion-panel/expansion-panel-adapter.js

@@ -5,6 +5,7 @@
  */
 import { getShadowElement, randomChars, toggleAttribute } from '@tylertech/forge-core';
 import { BaseAdapter } from '../core/base/base-adapter';
+import { OPEN_ICON_CONSTANTS } from '../open-icon';
 import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
 export class ExpansionPanelAdapter extends BaseAdapter {
     constructor(component) {
@@ -19,6 +20,9 @@ export class ExpansionPanelAdapter extends BaseAdapter {
     get triggerElement() {
         return this._triggerElement;
     }
+    get openIcon() {
+        return this._openIcon;
+    }
     get _slottedContentElement() {
         return this._defaultSlotElement.assignedElements({ flatten: true })[0];
     }
@@ -31,6 +35,9 @@ export class ExpansionPanelAdapter extends BaseAdapter {
     setTriggerElementById(id) {
         this._triggerElement = this._getTriggerElementById(id);
     }
+    setOpenIconById(id) {
+        this._openIcon = this._getOpenIconElementById(id);
+    }
     setAnimationCompleteListener(listener) {
         this._transitionCompleteListener = listener;
         this._contentElement.addEventListener('transitionstart', this._transitionStartListener);
@@ -52,9 +59,14 @@ export class ExpansionPanelAdapter extends BaseAdapter {
         this._triggerElement?.addEventListener(type, listener, { signal: this._triggerListenerController.signal });
     }
     tryToggleOpenIcon(value) {
-        const openIconElement = this._component.querySelector(EXPANSION_PANEL_CONSTANTS.selectors.OPEN_ICON);
-        if (openIconElement) {
-            openIconElement.open = value;
+        const internalOpenIcon = this._component.querySelector(EXPANSION_PANEL_CONSTANTS.selectors.OPEN_ICON);
+        const triggerOpenIcon = this._triggerElement?.querySelector(OPEN_ICON_CONSTANTS.elementName);
+        const externalOpenIcon = this._openIcon;
+        const openIcons = [internalOpenIcon, triggerOpenIcon, externalOpenIcon];
+        for (const openIcon of openIcons) {
+            if (openIcon) {
+                openIcon.open = value;
+            }
         }
     }
     setContentVisibility(visible) {
@@ -80,6 +92,9 @@ export class ExpansionPanelAdapter extends BaseAdapter {
     setTriggerElement(el) {
         this._triggerElement = el;
     }
+    setOpenIcon(openIcon) {
+        this._openIcon = openIcon;
+    }
     setContentId() {
         if (!this._slottedContentId) {
             this._slottedContentId = `forge-expansion-panel-content-${randomChars()}`;
@@ -108,4 +123,17 @@ export class ExpansionPanelAdapter extends BaseAdapter {
             return null;
         }
     }
+    _getOpenIconElementById(id) {
+        if (id && this.isConnected) {
+            const rootNode = this._component.getRootNode();
+            const el = rootNode.getElementById(id);
+            if (el?.tagName.toLocaleLowerCase() === OPEN_ICON_CONSTANTS.elementName) {
+                return el;
+            }
+            return null;
+        }
+        else {
+            return null;
+        }
+    }
 }

package/esm/expansion-panel/expansion-panel-constants.d.ts

@@ -10,6 +10,7 @@ export declare const EXPANSION_PANEL_CONSTANTS: {
         ORIENTATION: string;
         ANIMATION_TYPE: string;
         TRIGGER: string;
+        OPEN_ICON: string;
     };
     attributes: {
         OPENING: string;
@@ -17,6 +18,7 @@ export declare const EXPANSION_PANEL_CONSTANTS: {
         ORIENTATION: string;
         ANIMATION_TYPE: string;
         TRIGGER: string;
+        OPEN_ICON: string;
     };
     classes: {
         HIDDEN: string;

package/esm/expansion-panel/expansion-panel-constants.js

@@ -10,7 +10,8 @@ const observedAttributes = {
     OPEN: 'open',
     ORIENTATION: 'orientation',
     ANIMATION_TYPE: 'animation-type',
-    TRIGGER: 'trigger'
+    TRIGGER: 'trigger',
+    OPEN_ICON: 'open-icon'
 };
 const attributes = {
     ...observedAttributes,

package/esm/expansion-panel/expansion-panel-core.d.ts

@@ -3,6 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { IOpenIconComponent } from '../open-icon';
 import { IExpansionPanelAdapter } from './expansion-panel-adapter';
 import { ExpansionPanelAnimationType, ExpansionPanelOrientation } from './expansion-panel-constants';
 export interface IExpansionPanelCore {
@@ -19,6 +20,7 @@ export declare class ExpansionPanelCore implements IExpansionPanelCore {
     private _orientation;
     private _animationType;
     private _trigger;
+    private _openIcon;
     private _clickListener;
     private _keydownListener;
     private _keyupListener;
@@ -30,6 +32,7 @@ export declare class ExpansionPanelCore implements IExpansionPanelCore {
     private _handleContentSlotChange;
     private _clearTrigger;
     private _syncTrigger;
+    private _syncOpenIcon;
     private _onClick;
     private _onKeydown;
     private _onKeyup;
@@ -49,4 +52,8 @@ export declare class ExpansionPanelCore implements IExpansionPanelCore {
     set trigger(value: string);
     get triggerElement(): HTMLElement | null | undefined;
     set triggerElement(el: HTMLElement | null | undefined);
+    get openIcon(): string;
+    set openIcon(value: string);
+    get openIconElement(): IOpenIconComponent | null | undefined;
+    set openIconElement(openIcon: IOpenIconComponent | null | undefined);
 }

package/esm/expansion-panel/expansion-panel-core.js

@@ -12,6 +12,7 @@ export class ExpansionPanelCore {
         this._orientation = 'vertical';
         this._animationType = 'default';
         this._trigger = '';
+        this._openIcon = '';
         this._clickListener = this._onClick.bind(this);
         this._keydownListener = this._onKeydown.bind(this);
         this._keyupListener = this._onKeyup.bind(this);
@@ -27,11 +28,13 @@ export class ExpansionPanelCore {
         this._adapter.setContentId();
         await frame();
         this._syncTrigger();
+        this._syncOpenIcon();
     }
     destroy() {
         this._adapter.detachTriggerAria();
         this._adapter.removeTriggerListeners();
         this._adapter.setTriggerElement(undefined);
+        this._adapter.setOpenIcon(undefined);
     }
     _handleContentSlotChange() {
         this._adapter.setContentId();
@@ -58,6 +61,16 @@ export class ExpansionPanelCore {
         this._adapter.addTriggerListener('keydown', this._keydownListener);
         this._adapter.addTriggerListener('keyup', this._keyupListener);
     }
+    _syncOpenIcon() {
+        if (!this._adapter.openIcon?.isConnected) {
+            if (this._openIcon) {
+                this._adapter.setOpenIconById(this._openIcon);
+            }
+            else {
+                this._adapter.setOpenIcon(undefined);
+            }
+        }
+    }
     _onClick(evt) {
         this._tryToggle(evt);
     }
@@ -162,4 +175,21 @@ export class ExpansionPanelCore {
             this._syncTrigger();
         }
     }
+    get openIcon() {
+        return this._openIcon;
+    }
+    set openIcon(value) {
+        if (this._openIcon !== value) {
+            this._openIcon = value;
+            this._syncOpenIcon();
+        }
+    }
+    get openIconElement() {
+        return this._adapter.openIcon;
+    }
+    set openIconElement(openIcon) {
+        if (this._adapter.openIcon !== openIcon) {
+            this._adapter.setOpenIcon(openIcon);
+        }
+    }
 }

package/esm/expansion-panel/expansion-panel.d.ts

@@ -5,12 +5,15 @@
  */
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
 import { ExpansionPanelAnimationType, ExpansionPanelOrientation, emulateUserToggle } from './expansion-panel-constants';
+import { IOpenIconComponent } from '../open-icon';
 export interface IExpansionPanelComponent extends IBaseComponent {
     open: boolean;
     orientation: ExpansionPanelOrientation;
     animationType: ExpansionPanelAnimationType;
     trigger: string;
     triggerElement: HTMLElement | null;
+    openIcon: string;
+    openIconElement: IOpenIconComponent | null;
     toggle(): void;
     [emulateUserToggle](open: boolean): void;
 }
@@ -31,13 +34,16 @@ declare global {
  * @property {boolean} [open=false] - Whether the panel is open or closed.
  * @property {ExpansionPanelOrientation} [orientation="vertical"] - The orientation of the panel.
  * @property {ExpansionPanelAnimationType} [animationType="default"] - The type of animation to use when opening/closing the panel.
- * @property {string} trigger - The id of the element that the expansion panel should be toggled by.
- * @property {HTMLElement | null} triggerElement - The element that the expansion panel should be toggled by.
+ * @property {string} trigger - The id of the button that the expansion panel should be toggled by.
+ * @property {HTMLElement | null} triggerElement - The button that the expansion panel should be toggled by.
+ * @property {string} openIcon - The id of the `<forge-open-icon>` that the expansion panel should toggle.
+ * @property {IOpenIconComponent | null} openIconElement - The `<forge-open-icon>` that the expansion panel should toggle.
  *
  * @attribute {boolean} [open=false] - Whether the panel is open or closed.
  * @attribute {ExpansionPanelOrientation} [orientation="vertical"] - The orientation of the panel.
  * @attribute {ExpansionPanelAnimationType} [animation-type="default"] - The type of animation to use when opening/closing the panel.
- * @attribute {string} [trigger] - The id of the button that the expansion panel is associated with.
+ * @attribute {string} [trigger] - The id of the button that the expansion panel should be toggled by.
+ * @attribute {string} [open-icon] - The id of the `<forge-open-icon>` that the expansion panel should toggle.
  *
  * @fires {CustomEvent<boolean>} forge-expansion-panel-toggle - Event fired when the panel is toggled open or closed.
  * @fires {CustomEvent<boolean>} forge-expansion-panel-animation-complete - Event fired when the panel has finished animating when toggling.
@@ -68,6 +74,8 @@ export declare class ExpansionPanelComponent extends BaseComponent implements IE
     animationType: ExpansionPanelAnimationType;
     trigger: string;
     triggerElement: HTMLElement | null;
+    openIcon: string;
+    openIconElement: IOpenIconComponent | null;
     /**
      * Toggles the open state of the panel.
      */

package/esm/expansion-panel/expansion-panel.js

@@ -19,13 +19,16 @@ const styles = ':host{display:block}:host([hidden]){display:none}.forge-expansio
  * @property {boolean} [open=false] - Whether the panel is open or closed.
  * @property {ExpansionPanelOrientation} [orientation="vertical"] - The orientation of the panel.
  * @property {ExpansionPanelAnimationType} [animationType="default"] - The type of animation to use when opening/closing the panel.
- * @property {string} trigger - The id of the element that the expansion panel should be toggled by.
- * @property {HTMLElement | null} triggerElement - The element that the expansion panel should be toggled by.
+ * @property {string} trigger - The id of the button that the expansion panel should be toggled by.
+ * @property {HTMLElement | null} triggerElement - The button that the expansion panel should be toggled by.
+ * @property {string} openIcon - The id of the `<forge-open-icon>` that the expansion panel should toggle.
+ * @property {IOpenIconComponent | null} openIconElement - The `<forge-open-icon>` that the expansion panel should toggle.
  *
  * @attribute {boolean} [open=false] - Whether the panel is open or closed.
  * @attribute {ExpansionPanelOrientation} [orientation="vertical"] - The orientation of the panel.
  * @attribute {ExpansionPanelAnimationType} [animation-type="default"] - The type of animation to use when opening/closing the panel.
- * @attribute {string} [trigger] - The id of the button that the expansion panel is associated with.
+ * @attribute {string} [trigger] - The id of the button that the expansion panel should be toggled by.
+ * @attribute {string} [open-icon] - The id of the `<forge-open-icon>` that the expansion panel should toggle.
  *
  * @fires {CustomEvent<boolean>} forge-expansion-panel-toggle - Event fired when the panel is toggled open or closed.
  * @fires {CustomEvent<boolean>} forge-expansion-panel-animation-complete - Event fired when the panel has finished animating when toggling.
@@ -72,6 +75,10 @@ let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponen
                 break;
             case EXPANSION_PANEL_CONSTANTS.observedAttributes.TRIGGER:
                 this.trigger = newValue;
+                break;
+            case EXPANSION_PANEL_CONSTANTS.observedAttributes.OPEN_ICON:
+                this.openIcon = newValue;
+                break;
         }
     }
     /**
@@ -108,6 +115,12 @@ __decorate([
 __decorate([
     coreProperty()
 ], ExpansionPanelComponent.prototype, "triggerElement", void 0);
+__decorate([
+    coreProperty()
+], ExpansionPanelComponent.prototype, "openIcon", void 0);
+__decorate([
+    coreProperty()
+], ExpansionPanelComponent.prototype, "openIconElement", void 0);
 ExpansionPanelComponent = __decorate([
     customElement({
         name: EXPANSION_PANEL_CONSTANTS.elementName

package/esm/list-dropdown/list-dropdown-core.js

@@ -135,7 +135,7 @@ export class ListDropdownCore {
     get dropdownElement() {
         return this._adapter.dropdownElement;
     }
-    scrollSelectedOptionIntoView(animate = true) {
+    scrollSelectedOptionIntoView(animate) {
         this._adapter.scrollSelectedOptionIntoView(animate);
     }
     setScrollBottomListener(listener, threshold) {

package/esm/list-dropdown/list-dropdown-utils.js

@@ -346,7 +346,7 @@ export function createListItemTooltip(tooltip, configId, optionIdIndex, listItem
 export async function asyncCreateListItemTooltipIfTextOverflows(tooltip, configId, optionIdIndex, listItemElement, buttonElement, secondaryLabelElement) {
     await frame();
     // Only append the tooltip if the button or secondary label overflow the width of the parent list item.
-    if (buttonElement.scrollWidth > listItemElement.clientWidth || secondaryLabelElement.scrollWidth > listItemElement.clientWidth) {
+    if (buttonElement.scrollWidth > buttonElement.clientWidth || secondaryLabelElement.scrollWidth > secondaryLabelElement.clientWidth) {
         const tooltipElement = createListItemTooltip(tooltip, configId, optionIdIndex, listItemElement, buttonElement);
         listItemElement.appendChild(tooltipElement);
     }

package/esm/list-dropdown/list-dropdown.js

@@ -69,7 +69,7 @@ export class ListDropdown {
         this._core.appendOptions(options);
     }
     scrollSelectedOptionIntoView(animate) {
-        this._core.scrollSelectedOptionIntoView();
+        this._core.scrollSelectedOptionIntoView(animate);
     }
     setScrollBottomListener(listener, threshold) {
         this._core.setScrollBottomListener(listener, threshold);

package/esm/paginator/paginator-adapter.d.ts

@@ -74,4 +74,5 @@ export declare class PaginatorAdapter extends BaseAdapter<IPaginatorComponent> i
     setFocus(options?: FocusOptions): void;
     tryDisableFields(fieldsToDisable: PaginatorFieldIdentifier[]): void;
     private _tryFocus;
+    private _setButtonEnabled;
 }

package/esm/paginator/paginator-adapter.js

@@ -73,16 +73,16 @@ export class PaginatorAdapter extends BaseAdapter {
         this._lastPageButton.addEventListener('click', listener);
     }
     setFirstPageButtonEnabled(enabled) {
-        this._firstPageButton.disabled = !enabled;
+        this._setButtonEnabled(this._firstPageButton, enabled);
     }
     setPreviousPageButtonEnabled(enabled) {
-        this._previousPageButton.disabled = !enabled;
+        this._setButtonEnabled(this._previousPageButton, enabled);
     }
     setNextPageButtonEnabled(enabled) {
-        this._nextPageButton.disabled = !enabled;
+        this._setButtonEnabled(this._nextPageButton, enabled);
     }
     setLastPageButtonEnabled(enabled) {
-        this._lastPageButton.disabled = !enabled;
+        this._setButtonEnabled(this._lastPageButton, enabled);
     }
     setPageSizeSelectEnabled(enabled) {
         this._pageSizeSelect.disabled = !enabled;
@@ -111,4 +111,15 @@ export class PaginatorAdapter extends BaseAdapter {
             }
         }
     }
+    _setButtonEnabled(btn, enabled) {
+        if (enabled) {
+            btn.removeAttribute('disabled');
+            btn.setAttribute('tabindex', '0');
+        }
+        else {
+            btn.setAttribute('disabled', 'true');
+            btn.setAttribute('tabindex', '-1');
+            btn.blur();
+        }
+    }
 }

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

@@ -14,7 +14,7 @@ import { IconComponent, IconRegistry } from '../../icon';
 import { StateLayerComponent } from '../../state-layer';
 import { FocusIndicatorComponent } from '../../focus-indicator';
 const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-state-layer target=\"handle\" id=\"state-layer\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator inward target=\"handle\" part=\"focus-indicator\"></forge-focus-indicator></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
-const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:u1p3dq5;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dq5{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:u1p3dr4;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dr4{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u1p3dra;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dra{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{animation-direction:reverse}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:u1p3dro;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dro{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{animation-direction:reverse}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:u1p3ds7;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3ds7{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u1p3dsd;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dsd{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u1p3dtb;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dtb{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{animation-direction:reverse}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u1p3dtn;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u1p3dtn{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{animation-direction:reverse}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
+const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:ub5nje0;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ub5nje0{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:ub5njf0;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ub5njf0{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:ub5njg0;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ub5njg0{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{animation-direction:reverse}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:ub5njgl;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ub5njgl{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{animation-direction:reverse}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:ub5njhb;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ub5njhb{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:ub5nji7;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ub5nji7{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:ub5njiw;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ub5njiw{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{animation-direction:reverse}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:ub5njjh;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ub5njjh{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{animation-direction:reverse}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
 /**
  * @tag forge-split-view-panel
  *

package/esm/tree/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './tree';
+export * from './tree-item';

package/esm/tree/index.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './tree';
+export * from './tree-item';

package/esm/tree/tree/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './tree';
+export declare function defineTreeComponent(): void;

package/esm/tree/tree/index.js

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { tryDefine } from '@tylertech/forge-core';
+import { TreeComponent } from './tree';
+export * from './tree';
+export function defineTreeComponent() {
+    tryDefine('forge-tree', TreeComponent);
+}