@tylertech/forge 2.0.0

package/esm/banner/banner.js

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { tylIconCancel } from '@tylertech/tyler-icons/standard';
+import { BaseComponent } from '../core/base/base-component';
+import { IconComponent, IconRegistry } from '../icon';
+import { IconButtonComponent } from '../icon-button';
+import { TooltipComponent } from '../tooltip';
+import { BannerAdapter } from './banner-adapter';
+import { BANNER_CONSTANTS } from './banner-constants';
+import { BannerFoundation } from './banner-foundation';
+const template = '<template><div class=\"forge-banner\" part=\"root\"><div class=\"forge-banner__container\" part=\"container\"><div class=\"forge-banner__container-wrapper\" part=\"wrapper\"><div class=\"forge-banner__container-wrapper-icon\" part=\"icon-container\"><slot name=\"icon\"></slot></div><div class=\"forge-banner__container-wrapper-subsection\" part=\"subsection-wrapper\"><div class=\"forge-banner__container-wrapper-subsection-text forge-typography--body1\" part=\"subsection-text\"><slot></slot></div><div class=\"forge-banner__container-wrapper-subsection-action\" part=\"action-subsection\"><slot name=\"button\"></slot></div></div></div><forge-icon-button class=\"forge-banner__container-dismiss\" part=\"dismiss-icon-button\"><button type=\"button\" aria-label=\"Dismiss this banner\" part=\"dismiss-button\"><forge-icon name=\"cancel\" part=\"dismiss-button-icon\"></forge-icon></button><forge-tooltip>Dismiss</forge-tooltip></forge-icon-button></div></div></template>';
+const styles = '.forge-icon-button{display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px;height:48px;padding:12px}.forge-icon-button forge-icon,.forge-icon-button img,.forge-icon-button svg{width:24px;height:24px}.forge-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-icon-button:disabled{cursor:default;pointer-events:none}.forge-icon-button__icon{display:inline-block}.forge-icon-button__icon.forge-icon-button__icon--on{display:none}.forge-icon-button--on .forge-icon-button__icon{display:none}.forge-icon-button--on .forge-icon-button__icon.forge-icon-button__icon--on{display:inline-block}@-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}}.forge-icon-button{--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}.forge-icon-button::after,.forge-icon-button::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-icon-button::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)}.forge-icon-button::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-icon-button.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-icon-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-icon-button.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}.forge-icon-button.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))}.forge-icon-button::after,.forge-icon-button::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.forge-icon-button.mdc-ripple-upgraded::after,.forge-icon-button.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%)}.forge-icon-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button::after,.forge-icon-button::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.forge-icon-button.mdc-ripple-surface--hover::before,.forge-icon-button:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button.mdc-ripple-upgraded--background-focused::before,.forge-icon-button:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}forge-icon-button{position:relative;display:inline-block;overflow:visible}.forge-icon-button--on{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-icon-button--on::after,.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.forge-icon-button--on.mdc-ripple-surface--hover::before,.forge-icon-button--on:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button--on.mdc-ripple-upgraded--background-focused::before,.forge-icon-button--on:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button--on:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button--on:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button--on.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);opacity:.08}.forge-icon-button--dense{width:28px;height:28px;padding:2px;padding:0}.forge-icon-button--dense-1{width:44px;height:44px;padding:10px}.forge-icon-button--dense-2{width:40px;height:40px;padding:8px}.forge-icon-button--dense-3{width:36px;height:36px;padding:6px}.forge-icon-button--dense-4{width:32px;height:32px;padding:4px}.forge-icon-button--dense-5{width:28px;height:28px;padding:2px}.forge-icon-button--dense-6{width:24px;height:24px;padding:0}.forge-icon-button--with-badge forge-badge{z-index:1;z-index:var(--forge-z-index-surface,1);pointer-events:none;--forge-badge-max-width:32px;--forge-badge-border:1px solid transparent}.forge-icon-button--with-badge forge-badge[app-bar-context]{--forge-badge-border:2px solid var(--forge-app-bar-theme-background)}@media (min-width:600px){.forge-banner{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:600px;max-height:600px}.forge-banner.forge-banner--dismissed{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:0}.forge-banner__container{border-bottom-color:#e0e0e0;border-bottom-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;border-bottom-width:1px;border-bottom-style:solid;min-height:48px;-webkit-box-align:center;align-items:center;padding:0 24px 0 24px}.forge-banner__container-wrapper{-webkit-box-flex:1;flex:1 1 auto;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}.forge-banner__container-wrapper-icon{margin-right:16px}.forge-banner__container-wrapper-subsection{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center}.forge-banner__container-wrapper-subsection-text{padding:14px 0 14px 0;margin-right:24px}.forge-banner__container-wrapper-subsection-action ::slotted(forge-button){margin-right:16px}.forge-banner__container-dismiss[hidden]{display:none}}@media (max-width:599px){.forge-banner{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:600px;max-height:600px}.forge-banner.forge-banner--dismissed{-webkit-transition:max-height .3s ease-in-out;transition:max-height .3s ease-in-out;overflow:hidden;max-height:0}.forge-banner__container{border-bottom-color:#e0e0e0;border-bottom-color:var(--forge-theme-border-color,#e0e0e0);display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;border-bottom-width:1px;border-bottom-style:solid;min-height:48px;padding:16px 12px 16px 12px}.forge-banner__container-wrapper{-webkit-box-flex:1;flex:1 1 auto;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.forge-banner__container-wrapper-icon{margin-right:16px}.forge-banner__container-wrapper-subsection{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-banner__container-wrapper-subsection-action ::slotted(forge-button){margin-top:12px}.forge-banner__container-dismiss{margin-top:-12px;margin-right:-12px}.forge-banner__container-dismiss[hidden]{display:none}}:host{display:block}:host([hidden]){display:none}:host(:not([theme])) .forge-banner,:host([theme=\"\"]) .forge-banner,:host([theme=default]) .forge-banner{background:#e8eaf6;background:var(--forge-banner-theme-background,var(--forge-banner-theme-default-background,#e8eaf6));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-default-font-color,rgba(0,0,0,.87)))}:host(:not([theme])) .forge-banner .forge-banner__container-wrapper-icon,:host([theme=\"\"]) .forge-banner .forge-banner__container-wrapper-icon,:host([theme=default]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-default-icon-color,rgba(0,0,0,.54)))}:host(:not([theme])) .forge-banner .forge-banner__container-dismiss,:host([theme=\"\"]) .forge-banner .forge-banner__container-dismiss,:host([theme=default]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-default-icon-color,rgba(0,0,0,.54)))}:host([theme=danger]) .forge-banner{background:#ffcdd2;background:var(--forge-banner-theme-background,var(--forge-banner-theme-danger-background,#ffcdd2));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-danger-font-color,rgba(0,0,0,.87)))}:host([theme=danger]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-danger-icon-color,rgba(0,0,0,.54)))}:host([theme=danger]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-danger-icon-color,rgba(0,0,0,.54)))}:host([theme=warning]) .forge-banner{background:#ffdba6;background:var(--forge-banner-theme-background,var(--forge-banner-theme-warning-background,#ffdba6));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-warning-font-color,rgba(0,0,0,.87)))}:host([theme=warning]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-warning-icon-color,rgba(0,0,0,.54)))}:host([theme=warning]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-warning-icon-color,rgba(0,0,0,.54)))}:host([theme=success]) .forge-banner{background:#a5d6a7;background:var(--forge-banner-theme-background,var(--forge-banner-theme-success-background,#a5d6a7));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-success-font-color,rgba(0,0,0,.87)))}:host([theme=success]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-success-icon-color,rgba(0,0,0,.54)))}:host([theme=success]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-success-icon-color,rgba(0,0,0,.54)))}:host([theme=info-primary]) .forge-banner{background:#bbdefb;background:var(--forge-banner-theme-background,var(--forge-banner-theme-info-primary-background,#bbdefb));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-info-primary-font-color,rgba(0,0,0,.87)))}:host([theme=info-primary]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-primary-icon-color,rgba(0,0,0,.54)))}:host([theme=info-primary]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-primary-icon-color,rgba(0,0,0,.54)))}:host([theme=info-secondary]) .forge-banner{background:#e0e0e0;background:var(--forge-banner-theme-background,var(--forge-banner-theme-info-secondary-background,#e0e0e0));color:rgba(0,0,0,.87);color:var(--forge-banner-theme-on-background,var(--forge-banner-theme-info-secondary-font-color,rgba(0,0,0,.87)))}:host([theme=info-secondary]) .forge-banner .forge-banner__container-wrapper-icon{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-secondary-icon-color,rgba(0,0,0,.54)))}:host([theme=info-secondary]) .forge-banner .forge-banner__container-dismiss{color:rgba(0,0,0,.54);color:var(--forge-banner-theme-icon,var(--forge-banner-theme-info-secondary-icon-color,rgba(0,0,0,.54)))}';
+/**
+ * The custom element class behind the `<forge-banner>` element.
+ */
+let BannerComponent = class BannerComponent extends BaseComponent {
+    constructor() {
+        super();
+        IconRegistry.define(tylIconCancel);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new BannerFoundation(new BannerAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            BANNER_CONSTANTS.attributes.DISMISSED,
+            BANNER_CONSTANTS.attributes.CAN_DISMISS
+        ];
+    }
+    connectedCallback() {
+        this._foundation.connect();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case BANNER_CONSTANTS.attributes.DISMISSED:
+                this.dismissed = coerceBoolean(newValue);
+                break;
+            case BANNER_CONSTANTS.attributes.CAN_DISMISS:
+                this.canDismiss = coerceBoolean(newValue);
+                break;
+        }
+    }
+};
+__decorate([
+    FoundationProperty()
+], BannerComponent.prototype, "dismissed", void 0);
+__decorate([
+    FoundationProperty()
+], BannerComponent.prototype, "canDismiss", void 0);
+BannerComponent = __decorate([
+    CustomElement({
+        name: BANNER_CONSTANTS.elementName,
+        dependencies: [
+            IconButtonComponent,
+            IconComponent,
+            TooltipComponent
+        ]
+    })
+], BannerComponent);
+export { BannerComponent };

package/esm/banner/index.d.ts

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

package/esm/banner/index.js

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

package/esm/bottom-sheet/bottom-sheet-adapter.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { IBottomSheetComponent } from './bottom-sheet';
+export interface IBottomSheetAdapter extends IBaseAdapter {
+    initializeAccessibility(): void;
+    setVisibility(visible: boolean): void;
+    attach(): void;
+    detach(): void;
+    registerTransitionEndHandler: (handler: (evt: TransitionEvent) => void) => void;
+    deregisterTransitionEndHandler: (handler: (evt: TransitionEvent) => void) => void;
+    setBodyListener(type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions): void;
+    removeBodyListener(type: string, listener: (evt: Event) => void): void;
+    setDocumentListener(type: string, listener: (evt: Event) => void): void;
+    removeDocumentListener(type: string, listener: (evt: Event) => void): void;
+    registerBackdropClickHandler: (handler: (evt: CustomEvent) => void) => void;
+    deregisterBackdropClickHandler: (handler: (evt: CustomEvent) => void) => void;
+    getOpenBottomSheets: (selector: string) => NodeListOf<HTMLElement>;
+    trySetInitialFocus: () => void;
+    isScrollable(): boolean;
+    isContentChild(el: HTMLElement): boolean;
+    initScrollable(): void;
+    setDragging(isDragging: boolean): void;
+    setBackdropVisiblity(value: boolean): void;
+    setFullscreen(value: boolean): void;
+    tryLayoutChildren(): void;
+    setContainerHeight(height: number | null): void;
+    getContainerBounds(): DOMRect;
+    setDragTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
+    removeDragTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
+    setBodyScrollHandler(listener: (evt: Event) => void): void;
+}
+/**
+ * Provides facilities for interacting with the internal DOM of `BottomSheetComponent`.
+ */
+export declare class BottomSheetAdapter extends BaseAdapter<IBottomSheetComponent> implements IBottomSheetAdapter {
+    private _backdropElement;
+    private _containerElement;
+    constructor(component: IBottomSheetComponent);
+    initializeAccessibility(): void;
+    setVisibility(visible: boolean): void;
+    attach(): void;
+    detach(): void;
+    registerTransitionEndHandler(handler: (evt: TransitionEvent) => void): void;
+    deregisterTransitionEndHandler(handler: (evt: TransitionEvent) => void): void;
+    setBodyListener(type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions): void;
+    removeBodyListener(type: string, listener: (evt: Event) => void): void;
+    setDocumentListener(type: string, listener: (evt: Event) => void): void;
+    removeDocumentListener(type: string, listener: (evt: Event) => void): void;
+    registerBackdropClickHandler(handler: (evt: CustomEvent) => void): void;
+    deregisterBackdropClickHandler(handler: (evt: CustomEvent) => void): void;
+    getOpenBottomSheets(selector: string): NodeListOf<HTMLElement>;
+    trySetInitialFocus(): void;
+    isScrollable(): boolean;
+    isContentChild(el: HTMLElement): boolean;
+    initScrollable(): void;
+    setDragging(isDragging: boolean): void;
+    setBackdropVisiblity(value: boolean): void;
+    setFullscreen(value: boolean): void;
+    tryLayoutChildren(): void;
+    setContainerHeight(height: number | null): void;
+    getContainerBounds(): DOMRect;
+    setDragTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
+    removeDragTargetHandler(type: string, listener: (evt: MouseEvent) => void): void;
+    setBodyScrollHandler(listener: (evt: MouseEvent) => void): void;
+    private _getContentElement;
+}

package/esm/bottom-sheet/bottom-sheet-adapter.js

@@ -0,0 +1,129 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement, removeElement, deepQuerySelectorAll, toggleClass } from '@tylertech/forge-core';
+import { BACKDROP_CONSTANTS } from '../backdrop';
+import { CHECKBOX_CONSTANTS } from '../checkbox';
+import { BaseAdapter } from '../core/base/base-adapter';
+import { ICON_BUTTON_CONSTANTS } from '../icon-button';
+import { RADIO_CONSTANTS } from '../radio';
+import { SWITCH_CONSTANTS } from '../switch';
+import { BOTTOM_SHEET_CONSTANTS } from './bottom-sheet-constants';
+/**
+ * Provides facilities for interacting with the internal DOM of `BottomSheetComponent`.
+ */
+export class BottomSheetAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._backdropElement = getShadowElement(component, BOTTOM_SHEET_CONSTANTS.selectors.BACKDROP);
+        this._containerElement = getShadowElement(component, BOTTOM_SHEET_CONSTANTS.selectors.CONTAINER);
+    }
+    initializeAccessibility() {
+        if (!this._component.hasAttribute('role')) {
+            this._component.setAttribute('role', 'dialog');
+            this._component.setAttribute('aria-modal', 'true');
+        }
+    }
+    setVisibility(visible) {
+        toggleClass(this._containerElement, visible, BOTTOM_SHEET_CONSTANTS.classes.OPEN);
+    }
+    attach() {
+        const hostElement = document.querySelector(BOTTOM_SHEET_CONSTANTS.selectors.HOST) || document.body;
+        hostElement.appendChild(this._component);
+    }
+    detach() {
+        removeElement(this._component);
+    }
+    registerTransitionEndHandler(handler) {
+        this._containerElement.addEventListener('transitionend', handler);
+    }
+    deregisterTransitionEndHandler(handler) {
+        this._containerElement.removeEventListener('transitionend', handler);
+    }
+    setBodyListener(type, listener, options) {
+        document.body.addEventListener(type, listener, options);
+    }
+    removeBodyListener(type, listener) {
+        document.body.removeEventListener(type, listener);
+    }
+    setDocumentListener(type, listener) {
+        document.addEventListener(type, listener);
+    }
+    removeDocumentListener(type, listener) {
+        document.removeEventListener(type, listener);
+    }
+    registerBackdropClickHandler(handler) {
+        this._backdropElement.addEventListener(BACKDROP_CONSTANTS.events.BACKDROP_CLICK, handler);
+    }
+    deregisterBackdropClickHandler(handler) {
+        this._backdropElement.removeEventListener(BACKDROP_CONSTANTS.events.BACKDROP_CLICK, handler);
+    }
+    getOpenBottomSheets(selector) {
+        return document.querySelectorAll(selector);
+    }
+    trySetInitialFocus() {
+        const elements = deepQuerySelectorAll(this._component, BOTTOM_SHEET_CONSTANTS.selectors.INITIAL_FOCUS);
+        if (elements && elements.length) {
+            const initialElement = elements[elements.length - 1];
+            initialElement.focus();
+        }
+    }
+    isScrollable() {
+        const contentElement = this._getContentElement();
+        return contentElement ? contentElement.scrollHeight > contentElement.offsetHeight : false;
+    }
+    isContentChild(el) {
+        const contentElement = this._getContentElement();
+        return contentElement ? contentElement.contains(el) : false;
+    }
+    initScrollable() {
+        const isScrollable = this.isScrollable();
+        toggleClass(this._component, isScrollable, BOTTOM_SHEET_CONSTANTS.classes.SCROLLABLE);
+        toggleClass(this._containerElement, isScrollable, BOTTOM_SHEET_CONSTANTS.classes.SCROLLABLE);
+    }
+    setDragging(isDragging) {
+        toggleClass(this._containerElement, isDragging, BOTTOM_SHEET_CONSTANTS.classes.DRAGGING);
+        toggleClass(this._component, isDragging, BOTTOM_SHEET_CONSTANTS.classes.DRAGGING);
+    }
+    setBackdropVisiblity(value) {
+        this._backdropElement.hidden = !value;
+    }
+    setFullscreen(value) {
+        toggleClass(this._containerElement, value, BOTTOM_SHEET_CONSTANTS.classes.FULLSCREEN);
+    }
+    tryLayoutChildren() {
+        const layoutChildren = [ICON_BUTTON_CONSTANTS.elementName, SWITCH_CONSTANTS.elementName, CHECKBOX_CONSTANTS.elementName, RADIO_CONSTANTS.elementName];
+        const commonLayoutElements = Array.from(this._component.querySelectorAll(layoutChildren.join(',')));
+        commonLayoutElements.filter(el => typeof el.layout === 'function').forEach(el => el.layout());
+    }
+    setContainerHeight(height) {
+        if (height !== null) {
+            const percent = Math.min(100, 100 * height / window.innerHeight);
+            this._containerElement.style.maxHeight = `${percent}%`;
+        }
+        else {
+            this._containerElement.style.removeProperty('max-height');
+        }
+    }
+    getContainerBounds() {
+        return this._containerElement.getBoundingClientRect();
+    }
+    setDragTargetHandler(type, listener) {
+        this._containerElement.addEventListener(type, listener);
+    }
+    removeDragTargetHandler(type, listener) {
+        this._containerElement.removeEventListener(type, listener);
+    }
+    setBodyScrollHandler(listener) {
+        const contentElement = this._getContentElement();
+        if (contentElement) {
+            contentElement.addEventListener('scroll', listener);
+        }
+    }
+    _getContentElement() {
+        const contentElements = Array.from(deepQuerySelectorAll(this._component, BOTTOM_SHEET_CONSTANTS.selectors.CONTENT_BODY, false));
+        return contentElements.length ? contentElements[0] : null;
+    }
+}

package/esm/bottom-sheet/bottom-sheet-constants.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const BOTTOM_SHEET_CONSTANTS: {
+    elementName: "forge-bottom-sheet";
+    classes: {
+        DRAGGING: string;
+        FULLSCREEN: string;
+        OPEN: string;
+        SCROLLABLE: string;
+    };
+    selectors: {
+        BACKDROP: "forge-backdrop";
+        CONTAINER: string;
+        CONTENT_BODY: string;
+        INITIAL_FOCUS: string;
+        HOST: string;
+    };
+    attributes: {
+        BACKDROP_CLOSE: string;
+        ESCAPE_CLOSE: string;
+        FULLSCREEN: string;
+        INITIAL_FOCUS: string;
+        OPEN: string;
+        SHOW_BACKDROP: string;
+    };
+    events: {
+        BEFORE_CLOSE: string;
+        CLOSE: string;
+        OPEN: string;
+        READY: string;
+        DRAG_START: string;
+        DRAGGED: string;
+        DRAG_END: string;
+        DRAG_CANCEL: string;
+        FULLSCREEN: string;
+    };
+};
+export interface IBottomSheetDragEventData {
+    y: number;
+}
+export interface IBottomSheetDragStartEventData extends IBottomSheetDragEventData {
+}
+export interface IBottomSheetDragContext {
+    top: number;
+    height: number;
+}

package/esm/bottom-sheet/bottom-sheet-constants.js

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BACKDROP_CONSTANTS } from '../backdrop';
+import { COMPONENT_NAME_PREFIX } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}bottom-sheet`;
+const classes = {
+    DRAGGING: 'forge-bottom-sheet--dragging',
+    FULLSCREEN: 'forge-bottom-sheet--fullscreen',
+    OPEN: 'forge-bottom-sheet--open',
+    SCROLLABLE: 'forge-bottom-sheet--scrollable'
+};
+const attributes = {
+    BACKDROP_CLOSE: 'backdrop-close',
+    ESCAPE_CLOSE: 'escape-close',
+    FULLSCREEN: 'fullscreen',
+    INITIAL_FOCUS: `${elementName}-focus`,
+    OPEN: `${elementName}-open`,
+    SHOW_BACKDROP: 'show-backdrop'
+};
+const selectors = {
+    BACKDROP: BACKDROP_CONSTANTS.elementName,
+    CONTAINER: '.forge-bottom-sheet',
+    CONTENT_BODY: '[forge-bottom-sheet-body]',
+    INITIAL_FOCUS: `[${attributes.INITIAL_FOCUS}]`,
+    HOST: `[${elementName}-host]`
+};
+const events = {
+    BEFORE_CLOSE: `forge-bottom-sheet-before-close`,
+    CLOSE: `forge-bottom-sheet-close`,
+    OPEN: `forge-bottom-sheet-open`,
+    READY: `forge-bottom-sheet-ready`,
+    DRAG_START: `forge-bottom-sheet-drag-start`,
+    DRAGGED: `forge-bottom-sheet-dragged`,
+    DRAG_END: `forge-bottom-sheet-drag-end`,
+    DRAG_CANCEL: `forge-bottom-sheet-drag-cancel`,
+    FULLSCREEN: `forge-bottom-sheet-fullscreen`
+};
+export const BOTTOM_SHEET_CONSTANTS = {
+    elementName,
+    classes,
+    selectors,
+    attributes,
+    events
+};

package/esm/bottom-sheet/bottom-sheet-foundation.d.ts

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IBottomSheetAdapter } from './bottom-sheet-adapter';
+export interface IBottomSheetFoundation extends ICustomElementFoundation {
+    backdropClose: boolean;
+    escapeClose: boolean;
+    open: boolean;
+    fullscreen: boolean;
+    showBackdrop: boolean;
+    openCallback: () => void | Promise<void>;
+    closeCallback: () => void | Promise<void>;
+    beforeCloseCallback: () => boolean | Promise<boolean>;
+}
+export declare class BottomSheetFoundation implements IBottomSheetFoundation {
+    _adapter: IBottomSheetAdapter;
+    private _open;
+    private _backdropClose;
+    private _escapeClose;
+    private _fullscreen;
+    private _showBackdrop;
+    private _openCallback;
+    private _closeCallback;
+    private _beforeCloseCallback;
+    private _openTransitionEndHandler;
+    private _closeTransitionEndHandler;
+    private _documentKeydownHandler;
+    private _backdropClickHandler;
+    private _isDragging;
+    private _dragContext;
+    private _lastPosition;
+    private _bodyScrollHandler;
+    private _dragStartHandler;
+    private _dragMoveHandler;
+    private _dragEndHandler;
+    private _dragCancelHandler;
+    constructor(_adapter: IBottomSheetAdapter);
+    initialize(): void;
+    destroy(): void;
+    private _setOpen;
+    private _openBottomSheet;
+    private _closeBottomSheet;
+    private _onCloseTransitionEnd;
+    private _onOpenTransitionEnd;
+    private _onDocumentKeydown;
+    private _onBackdropClick;
+    private _tryClose;
+    private _setBackdropClickListener;
+    private _setDocumentKeydownListener;
+    /** Controls whether clicking the backdrop closes the bottom sheet or not. */
+    set backdropClose(value: boolean);
+    get backdropClose(): boolean;
+    /** Controls whether pressing the escape key closes the sheet or not. */
+    set escapeClose(value: boolean);
+    get escapeClose(): boolean;
+    get open(): boolean;
+    set open(value: boolean);
+    get fullscreen(): boolean;
+    set fullscreen(value: boolean);
+    get showBackdrop(): boolean;
+    set showBackdrop(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 beforeCloseCallback(): () => boolean | Promise<boolean>;
+    set beforeCloseCallback(callback: () => boolean | Promise<boolean>);
+    /** If scrollable, allow drag to/from fullscreen, and make fullscreen on scroll. */
+    private _initScrollableHandlers;
+    private _onBodyScroll;
+    private _onDragStart;
+    private _onDragMove;
+    private _onDragEnd;
+    private _onDragCancel;
+    private _dragComplete;
+}