@tylertech/forge 2.0.0

package/esm/drawer/modal-drawer/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './modal-drawer-adapter';
+export * from './modal-drawer-constants';
+export * from './modal-drawer-foundation';
+export * from './modal-drawer';
+export declare function defineModalDrawerComponent(): void;

package/esm/drawer/modal-drawer/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { ModalDrawerComponent } from './modal-drawer';
+export * from './modal-drawer-adapter';
+export * from './modal-drawer-constants';
+export * from './modal-drawer-foundation';
+export * from './modal-drawer';
+export function defineModalDrawerComponent() {
+    defineCustomElement(ModalDrawerComponent);
+}

package/esm/drawer/modal-drawer/modal-drawer-adapter.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseDrawerAdapter, IBaseDrawerAdapter } from '../base';
+import { IModalDrawerComponent } from './modal-drawer';
+export interface IModalDrawerAdapter extends IBaseDrawerAdapter {
+    setBackdropCloseListener(listener: (evt: Event) => void): void;
+    setBackdropVisibility(visible: boolean): Promise<void>;
+    toggleBackdropClass(hasClass: boolean, className: string): void;
+}
+export declare class ModalDrawerAdapter extends BaseDrawerAdapter implements IModalDrawerAdapter {
+    protected _component: IModalDrawerComponent;
+    private _backdropElement;
+    constructor(_component: IModalDrawerComponent);
+    setBackdropCloseListener(listener: (evt: Event) => void): void;
+    setBackdropVisibility(visible: boolean): Promise<void>;
+    toggleBackdropClass(hasClass: boolean, className: string): void;
+}

package/esm/drawer/modal-drawer/modal-drawer-adapter.js

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement, toggleClass } from '@tylertech/forge-core';
+import { BACKDROP_CONSTANTS } from '../../backdrop';
+import { BaseDrawerAdapter } from '../base';
+export class ModalDrawerAdapter extends BaseDrawerAdapter {
+    constructor(_component) {
+        super(_component);
+        this._component = _component;
+        this._backdropElement = getShadowElement(this._component, BACKDROP_CONSTANTS.elementName);
+    }
+    setBackdropCloseListener(listener) {
+        this._backdropElement.addEventListener(BACKDROP_CONSTANTS.events.BACKDROP_CLICK, listener);
+    }
+    setBackdropVisibility(visible) {
+        if (this._backdropElement.hasAttribute('hidden')) {
+            this._backdropElement.removeAttribute('hidden');
+        }
+        if (!this._backdropElement.fadeIn || !this._backdropElement.fadeOut) {
+            return Promise.resolve();
+        }
+        return visible ? this._backdropElement.fadeIn() : this._backdropElement.fadeOut();
+    }
+    toggleBackdropClass(hasClass, className) {
+        toggleClass(this._backdropElement, hasClass, className);
+    }
+}

package/esm/drawer/modal-drawer/modal-drawer-constants.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const MODAL_DRAWER_CONSTANTS: {
+    elementName: "forge-modal-drawer";
+    classes: {
+        DISPLAY_NONE: string;
+        SCRIM_CLOSED: string;
+    };
+    events: {
+        CLOSE: string;
+    };
+};

package/esm/drawer/modal-drawer/modal-drawer-constants.js

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}modal-drawer`;
+const classes = {
+    DISPLAY_NONE: 'forge-drawer--display-none',
+    SCRIM_CLOSED: 'forge-drawer__scrim--closed'
+};
+const events = {
+    CLOSE: `${elementName}-close`
+};
+export const MODAL_DRAWER_CONSTANTS = {
+    elementName,
+    classes,
+    events
+};

package/esm/drawer/modal-drawer/modal-drawer-foundation.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseDrawerFoundation, IBaseDrawerFoundation } from '../base';
+import { IModalDrawerAdapter } from './modal-drawer-adapter';
+export interface IModalDrawerFoundation extends IBaseDrawerFoundation {
+}
+export declare class ModalDrawerFoundation extends BaseDrawerFoundation implements IModalDrawerFoundation {
+    protected _adapter: IModalDrawerAdapter;
+    protected _open: boolean;
+    private _backdropClickListener;
+    private _isInitialized;
+    constructor(_adapter: IModalDrawerAdapter);
+    connect(): void;
+    disconnect(): void;
+    protected _setDrawerOpenState(): void;
+    protected _setDrawerClosedState(): void;
+    private _onBackdropClick;
+    private _setBackdrop;
+}

package/esm/drawer/modal-drawer/modal-drawer-foundation.js

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseDrawerFoundation } from '../base';
+import { MODAL_DRAWER_CONSTANTS } from './modal-drawer-constants';
+export class ModalDrawerFoundation extends BaseDrawerFoundation {
+    constructor(_adapter) {
+        super(_adapter);
+        this._adapter = _adapter;
+        this._open = false;
+        this._isInitialized = false;
+        this._backdropClickListener = evt => this._onBackdropClick(evt);
+    }
+    connect() {
+        super.connect();
+        this._adapter.setBackdropCloseListener(this._backdropClickListener);
+        this._setBackdrop(this._open);
+        this._isInitialized = true;
+    }
+    disconnect() {
+        this._isInitialized = false;
+    }
+    _setDrawerOpenState() {
+        super._setDrawerOpenState();
+        this._setBackdrop(true);
+    }
+    _setDrawerClosedState() {
+        super._setDrawerClosedState();
+        this._setBackdrop(false);
+    }
+    _onBackdropClick(evt) {
+        const canClose = this._adapter.emitHostEvent(MODAL_DRAWER_CONSTANTS.events.CLOSE, undefined, true, true);
+        if (canClose) {
+            this.open = false;
+        }
+    }
+    _setBackdrop(open) {
+        if (open) {
+            this._adapter.toggleBackdropClass(false, MODAL_DRAWER_CONSTANTS.classes.SCRIM_CLOSED);
+            this._adapter.setBackdropVisibility(true);
+        }
+        else if (this._isInitialized) {
+            this._adapter.setBackdropVisibility(false).then(() => {
+                if (!this._open) {
+                    this._adapter.toggleBackdropClass(true, MODAL_DRAWER_CONSTANTS.classes.SCRIM_CLOSED);
+                }
+            });
+        }
+    }
+}

package/esm/drawer/modal-drawer/modal-drawer.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseDrawerComponent, IBaseDrawerComponent } from '../base';
+import { ModalDrawerFoundation } from './modal-drawer-foundation';
+export interface IModalDrawerComponent extends IBaseDrawerComponent {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-modal-drawer': IModalDrawerComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-modal-drawer-close': CustomEvent<void>;
+    }
+}
+export declare class ModalDrawerComponent extends BaseDrawerComponent<ModalDrawerFoundation> implements IModalDrawerComponent {
+    protected _foundation: ModalDrawerFoundation;
+    constructor();
+}

package/esm/drawer/modal-drawer/modal-drawer.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, CustomElement } from '@tylertech/forge-core';
+import { BackdropComponent } from '../../backdrop';
+import { BaseDrawerComponent } from '../base';
+import { ModalDrawerAdapter } from './modal-drawer-adapter';
+import { MODAL_DRAWER_CONSTANTS } from './modal-drawer-constants';
+import { ModalDrawerFoundation } from './modal-drawer-foundation';
+const template = '<template><forge-backdrop class=\"forge-drawer__scrim\" hidden part=\"scrim\"></forge-backdrop><div class=\"forge-drawer forge-drawer--modal\" part=\"root\"><slot name=\"header\"></slot><div class=\"forge-drawer__content\" part=\"content\"><slot></slot></div><slot name=\"footer\"></slot></div></template>';
+const styles = '.forge-drawer{width:256px;width:var(--forge-drawer-width,256px);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);background-color:#fff;background-color:var(--mdc-theme-surface,#fff);height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;overflow:hidden;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:250ms;transition-duration:250ms;-webkit-transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-timing-function:cubic-bezier(0.4,0,0.2,1)}.forge-drawer ::slotted([slot=header]){grid-row:1}.forge-drawer ::slotted([slot=footer]){grid-row:3}.forge-drawer__content{overflow-x:auto;-webkit-overflow-scrolling:\"touch\";display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;grid-row:2}.forge-drawer__content::-webkit-scrollbar{width:16px;width:var(--forge-scrollbar-width,16px);height:16px;height:var(--forge-scrollbar-height,16px)}.forge-drawer__content::-webkit-scrollbar-corner{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-drawer__content::-webkit-scrollbar-track{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-drawer__content::-webkit-scrollbar-track:hover{background-color:#ececec;background-color:var(--forge-theme-scrollbar-track-hover,#ececec)}.forge-drawer__content::-webkit-scrollbar-thumb{background-color:#bdbdbd;background-color:var(--forge-theme-scrollbar-thumb,#bdbdbd);height:32px;height:var(--forge-scrollbar-min-height,32px);width:32px;width:var(--forge-scrollbar-min-width,32px);border-radius:10px;border-radius:var(--forge-scrollbar-border-radius,10px);border-width:3px;border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-clip:content-box}.forge-drawer__content::-webkit-scrollbar-thumb:hover{background-color:#9e9e9e;background-color:var(--forge-theme-scrollbar-thumb-hover,#9e9e9e)}.forge-drawer--left{border-right-width:1px;border-right-style:solid}.forge-drawer--right{border-left-width:1px;border-left-style:solid}.forge-drawer--right.forge-drawer--closing{-webkit-transform:translateX(100%);transform:translateX(100%);right:0;left:auto;z-index:1;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;-webkit-transition-duration:.2s;transition-duration:.2s}.forge-drawer--right.forge-drawer--closed{-webkit-transform:translateX(100%);transform:translateX(100%);right:0;left:auto;width:0;border:none}.forge-drawer--closing{-webkit-transform:translateX(-100%);transform:translateX(-100%);left:0;z-index:1;z-index:var(--forge-z-index-surface,1);position:absolute;top:0;right:0;-webkit-transition-duration:.2s;transition-duration:.2s}.forge-drawer--closed{-webkit-transform:translateX(-100%);transform:translateX(-100%);left:0;width:0;border:none}.forge-drawer--no-transition{-webkit-transition:none!important;transition:none!important}.forge-drawer--modal{box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);z-index:8;z-index:var(--forge-z-index-dialog,8);position:absolute;top:0;max-width:80%}.forge-drawer--modal+.mdc-drawer-scrim{background-color:rgba(0,0,0,.32)}.forge-drawer--modal.forge-drawer--closed,.forge-drawer--modal.forge-drawer--closing{-webkit-box-shadow:none;box-shadow:none}.forge-drawer--modal.forge-drawer--closing.forge-drawer--right{-webkit-transform:translateX(100%);transform:translateX(100%)}.forge-drawer__scrim{z-index:8;z-index:var(--forge-z-index-dialog,8)}.forge-drawer__scrim--closed{display:none}.forge-drawer.forge-drawer--right{right:0}.forge-drawer--display-none{display:none!important}';
+let ModalDrawerComponent = class ModalDrawerComponent extends BaseDrawerComponent {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ModalDrawerFoundation(new ModalDrawerAdapter(this));
+    }
+};
+ModalDrawerComponent = __decorate([
+    CustomElement({
+        name: MODAL_DRAWER_CONSTANTS.elementName,
+        dependencies: [BackdropComponent]
+    })
+], ModalDrawerComponent);
+export { ModalDrawerComponent };

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

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { IExpansionPanelComponent } from './expansion-panel';
+export interface IExpansionPanelAdapter extends IBaseAdapter {
+    initialize: (open: boolean, orientation: string) => void;
+    setHeaderVisibility: (visible: boolean) => void;
+    setOpenState: (open: boolean, orientation: string, animate: boolean) => void;
+    registerClickListener: (listener: (evt: MouseEvent) => void) => void;
+    deregisterClickListener: (listener: (evt: MouseEvent) => void) => void;
+    registerKeydownListener: (listener: (evt: KeyboardEvent) => void) => void;
+    deregisterKeydownListener: (listener: (evt: KeyboardEvent) => void) => void;
+    registerHeaderSlotListener: (listener: (evt: Event) => void) => void;
+    deregisterHeaderSlotListener: (listener: (evt: Event) => void) => void;
+}
+export declare class ExpansionPanelAdapter extends BaseAdapter<IExpansionPanelComponent> implements IExpansionPanelAdapter {
+    private _headerElement;
+    private _contentElement;
+    private _headerSlotElement;
+    constructor(component: IExpansionPanelComponent);
+    initialize(open: boolean, orientation?: string): void;
+    setHeaderVisibility(visible: boolean): void;
+    setOpenState(opening: boolean, orientation?: string, animate?: boolean): void;
+    registerClickListener(listener: (evt: MouseEvent) => void): void;
+    deregisterClickListener(listener: (evt: MouseEvent) => void): void;
+    registerKeydownListener(listener: (evt: KeyboardEvent) => void): void;
+    deregisterKeydownListener(listener: (evt: KeyboardEvent) => void): void;
+    registerHeaderSlotListener(listener: (evt: Event) => void): void;
+    deregisterHeaderSlotListener(listener: (evt: Event) => void): void;
+}

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

@@ -0,0 +1,182 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement } from '@tylertech/forge-core';
+import { BaseAdapter } from '../core/base/base-adapter';
+import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
+export class ExpansionPanelAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._headerElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.HEADER);
+        this._contentElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.CONTENT);
+        this._headerSlotElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.HEADER_SLOT);
+    }
+    initialize(open, orientation = 'vertical') {
+        const assignedNodes = this._headerElement.children[0].assignedNodes();
+        this.setHeaderVisibility(!!assignedNodes.length);
+        if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
+            this._contentElement.style.height = '';
+            this._contentElement.style.width = '0px';
+        }
+        if (open) {
+            if (orientation === 'vertical') {
+                this._contentElement.style.height = '';
+            }
+            else {
+                this._contentElement.style.width = '';
+            }
+            this._contentElement.style.removeProperty('opacity');
+            this._contentElement.style.removeProperty('visibility');
+            const openIconElement = this._component.querySelector(EXPANSION_PANEL_CONSTANTS.selectors.OPEN_ICON);
+            if (openIconElement) {
+                openIconElement.open = true;
+            }
+        }
+        this._headerElement.setAttribute('aria-expanded', open ? 'true' : 'false');
+    }
+    setHeaderVisibility(visible) {
+        if (visible) {
+            this._headerElement.style.display = '';
+        }
+        else {
+            this._headerElement.style.display = 'none';
+        }
+    }
+    setOpenState(opening, orientation = EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_VERTICAL, animate = true) {
+        const assignedNodes = this._contentElement.children[0].assignedNodes();
+        const openIconElement = this._component.querySelector(EXPANSION_PANEL_CONSTANTS.selectors.OPEN_ICON);
+        if (animate && assignedNodes && assignedNodes.length && assignedNodes[0]) {
+            const transitionEndListener = ({ propertyName }) => {
+                // If the state has changed since it started, then ignore the transition
+                if (this._component.open !== opening) {
+                    this._contentElement.removeEventListener('transitionend', transitionEndListener);
+                    return;
+                }
+                if (propertyName === 'height' || propertyName === 'width') {
+                    this._contentElement.removeEventListener('transitionend', transitionEndListener);
+                    this._contentElement.style.removeProperty('transition');
+                    if (opening) {
+                        if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
+                            this._contentElement.style.width = '';
+                        }
+                        else {
+                            this._contentElement.style.height = '';
+                        }
+                        this._contentElement.style.removeProperty('opacity');
+                    }
+                    else {
+                        // We set to hidden to ensure that collapsed elements are non-interactive
+                        this._contentElement.style.visibility = 'hidden';
+                    }
+                }
+            };
+            this._contentElement.addEventListener('transitionend', transitionEndListener);
+            if (opening) {
+                if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
+                    this._contentElement.style.width = '0px';
+                }
+                else {
+                    this._contentElement.style.height = '0px';
+                }
+                this._contentElement.style.opacity = '0';
+                this._contentElement.style.removeProperty('visibility');
+            }
+            else {
+                if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
+                    this._contentElement.style.width = `${this._contentElement.scrollWidth}px`;
+                }
+                else {
+                    this._contentElement.style.height = `${this._contentElement.scrollHeight}px`;
+                }
+                this._contentElement.style.opacity = '1';
+            }
+            if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
+                this._contentElement.style.transition = EXPANSION_PANEL_CONSTANTS.strings.EXPANSION_HORIZONTAL_TRANSITION;
+            }
+            else {
+                this._contentElement.style.transition = EXPANSION_PANEL_CONSTANTS.strings.EXPANSION_VERTICAL_TRANSITION;
+            }
+            window.requestAnimationFrame(() => {
+                window.requestAnimationFrame(() => {
+                    if (opening) {
+                        if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
+                            this._contentElement.style.width = `${this._contentElement.scrollWidth}px`;
+                        }
+                        else {
+                            this._contentElement.style.height = `${this._contentElement.scrollHeight}px`;
+                        }
+                        this._contentElement.style.opacity = '1';
+                        this._headerElement.setAttribute('aria-expanded', 'true');
+                        if (openIconElement) {
+                            openIconElement.open = true;
+                        }
+                    }
+                    else {
+                        if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
+                            this._contentElement.style.width = '0px';
+                        }
+                        else {
+                            this._contentElement.style.height = '0px';
+                        }
+                        this._contentElement.style.opacity = '0';
+                        this._headerElement.setAttribute('aria-expanded', 'false');
+                        if (openIconElement) {
+                            openIconElement.open = false;
+                        }
+                    }
+                });
+            });
+        }
+        else {
+            this._contentElement.style.removeProperty('transition');
+            if (opening) {
+                if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
+                    this._contentElement.style.width = '';
+                }
+                else {
+                    this._contentElement.style.height = '';
+                }
+                this._contentElement.style.removeProperty('visibility');
+                this._contentElement.style.removeProperty('opacity');
+                this._headerElement.setAttribute('aria-expanded', 'true');
+                if (openIconElement) {
+                    openIconElement.open = true;
+                }
+            }
+            else {
+                if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
+                    this._contentElement.style.width = '0px';
+                }
+                else {
+                    this._contentElement.style.height = '0px';
+                }
+                this._contentElement.style.opacity = '0';
+                this._contentElement.style.visibility = 'hidden';
+                this._headerElement.setAttribute('aria-expanded', 'false');
+                if (openIconElement) {
+                    openIconElement.open = false;
+                }
+            }
+        }
+    }
+    registerClickListener(listener) {
+        this._headerElement.addEventListener('click', listener);
+    }
+    deregisterClickListener(listener) {
+        this._headerElement.removeEventListener('click', listener);
+    }
+    registerKeydownListener(listener) {
+        this._headerElement.addEventListener('keydown', listener);
+    }
+    deregisterKeydownListener(listener) {
+        this._headerElement.removeEventListener('keydown', listener);
+    }
+    registerHeaderSlotListener(listener) {
+        this._headerSlotElement.addEventListener('slotchange', listener);
+    }
+    deregisterHeaderSlotListener(listener) {
+        this._headerSlotElement.removeEventListener('slotchange', listener);
+    }
+}

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

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const EXPANSION_PANEL_CONSTANTS: {
+    elementName: "forge-expansion-panel";
+    classes: {
+        CONTAINER: string;
+        HEADER: string;
+        CONTENT: string;
+    };
+    selectors: {
+        CONTAINER: string;
+        HEADER: string;
+        CONTENT: string;
+        HEADER_SLOT: string;
+        OPEN_ICON: string;
+    };
+    events: {
+        TOGGLE: string;
+    };
+    attributes: {
+        OPEN: string;
+        ORIENTATION: string;
+        USE_ANIMATIONS: string;
+    };
+    numbers: {
+        COLLAPSE_ANIMATION_DURATION: number;
+        CLICK_DEBOUNCE_THRESHOLD: number;
+    };
+    strings: {
+        ORIENTATION_VERTICAL: string;
+        ORIENTATION_HORIZONTAL: string;
+        EXPANSION_VERTICAL_TRANSITION: string;
+        EXPANSION_HORIZONTAL_TRANSITION: string;
+    };
+};

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

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+import { OPEN_ICON_CONSTANTS } from '../open-icon';
+const elementName = `${COMPONENT_NAME_PREFIX}expansion-panel`;
+const classes = {
+    CONTAINER: 'forge-expansion-panel',
+    HEADER: 'forge-expansion-panel__header',
+    CONTENT: 'forge-expansion-panel__content'
+};
+const selectors = {
+    CONTAINER: `.${classes.CONTAINER}`,
+    HEADER: `.${classes.HEADER}`,
+    CONTENT: `.${classes.CONTENT}`,
+    HEADER_SLOT: `.${classes.HEADER} > slot[name=header]`,
+    OPEN_ICON: `[slot=header] ${OPEN_ICON_CONSTANTS.elementName}`
+};
+const events = {
+    TOGGLE: `${elementName}-toggle`
+};
+const attributes = {
+    OPEN: 'open',
+    ORIENTATION: 'orientation',
+    USE_ANIMATIONS: 'use-animations'
+};
+const numbers = {
+    COLLAPSE_ANIMATION_DURATION: 400,
+    CLICK_DEBOUNCE_THRESHOLD: 200
+};
+const strings = {
+    ORIENTATION_VERTICAL: 'vertical',
+    ORIENTATION_HORIZONTAL: 'horizontal',
+    EXPANSION_VERTICAL_TRANSITION: `height ${numbers.COLLAPSE_ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${numbers.COLLAPSE_ANIMATION_DURATION}ms ease-in-out`,
+    EXPANSION_HORIZONTAL_TRANSITION: `width ${numbers.COLLAPSE_ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${numbers.COLLAPSE_ANIMATION_DURATION}ms ease-in-out`
+};
+export const EXPANSION_PANEL_CONSTANTS = {
+    elementName,
+    classes,
+    selectors,
+    events,
+    attributes,
+    numbers,
+    strings
+};

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

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IExpansionPanelAdapter } from './expansion-panel-adapter';
+export interface IExpansionPanelFoundation extends ICustomElementFoundation {
+    open: boolean;
+    orientation: string;
+    useAnimations: boolean;
+    openCallback: () => void | Promise<void>;
+    closeCallback: () => void | Promise<void>;
+    setOpenImmediate(open: boolean): void;
+}
+export declare class ExpansionPanelFoundation implements IExpansionPanelFoundation {
+    private _adapter;
+    private _open;
+    private _useAnimations;
+    private _openCallback;
+    private _closeCallback;
+    private _orientation;
+    private _clickListener;
+    private _keydownListener;
+    private _headerSlotChangeListener;
+    private _isInitialized;
+    constructor(_adapter: IExpansionPanelAdapter);
+    initialize(): void;
+    connect(): void;
+    disconnect(): void;
+    setOpenImmediate(open: boolean): void;
+    private _applyOpen;
+    /** Controls the open state of the panel. */
+    get open(): boolean;
+    set open(value: boolean);
+    get openCallback(): () => void | Promise<void>;
+    set openCallback(callback: () => void | Promise<void>);
+    get closeCallback(): () => void | Promise<void>;
+    set closeCallback(callback: () => void | Promise<void>);
+    get orientation(): string;
+    set orientation(value: string);
+    get useAnimations(): boolean;
+    set useAnimations(value: boolean);
+    /**
+     * Handles click events on the header element.
+     * @param {MouseEvent} evt The click event.
+     */
+    private _onClick;
+    /**
+     * Handles keydown events on the header.
+     * @param {KeyboardEvent} evt The keydown event
+     */
+    private _onKeydown;
+    private _emitEvent;
+    private _toggle;
+    private _openPanel;
+    private _closePanel;
+    private _onHeaderSlotChanged;
+}