@tylertech/forge 2.0.0

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

@@ -0,0 +1,327 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getEventPath } from '@tylertech/forge-core';
+import { BOTTOM_SHEET_CONSTANTS } from './bottom-sheet-constants';
+export class BottomSheetFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._open = false;
+        this._backdropClose = true;
+        this._escapeClose = true;
+        this._fullscreen = false;
+        this._showBackdrop = false;
+        this._isDragging = false;
+        this._bodyScrollHandler = () => this._onBodyScroll();
+        this._dragStartHandler = ($event) => this._onDragStart($event);
+        this._dragMoveHandler = ($event) => this._onDragMove($event);
+        this._dragEndHandler = () => this._onDragEnd();
+        this._dragCancelHandler = () => this._onDragCancel();
+        this._openTransitionEndHandler = (_evt) => this._onOpenTransitionEnd();
+        this._closeTransitionEndHandler = (_evt) => this._onCloseTransitionEnd();
+        this._documentKeydownHandler = (evt) => this._onDocumentKeydown(evt);
+        this._backdropClickHandler = (evt) => this._onBackdropClick(evt);
+    }
+    initialize() {
+        this._adapter.initializeAccessibility();
+    }
+    destroy() {
+        if (this._open) {
+            this._adapter.deregisterTransitionEndHandler(this._openTransitionEndHandler);
+            this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
+            this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
+        }
+    }
+    _setOpen(open) {
+        this._open = open;
+        if (this._open) {
+            this._openBottomSheet();
+        }
+        else {
+            this._closeBottomSheet();
+        }
+        this._adapter.toggleHostAttribute(BOTTOM_SHEET_CONSTANTS.attributes.OPEN, this._open);
+    }
+    _openBottomSheet() {
+        this._adapter.attach();
+        this._adapter.setBodyAttribute(BOTTOM_SHEET_CONSTANTS.attributes.OPEN, 'true');
+        this._adapter.registerTransitionEndHandler(this._openTransitionEndHandler);
+        this._setDocumentKeydownListener(this._escapeClose);
+        this._setBackdropClickListener(this._backdropClose);
+        // Ensure transitions are triggered properly
+        window.requestAnimationFrame(() => {
+            window.requestAnimationFrame(() => {
+                this._adapter.setVisibility(true);
+                this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.OPEN);
+                this._adapter.trySetInitialFocus();
+                this._adapter.initScrollable();
+            });
+        });
+    }
+    _closeBottomSheet() {
+        this._adapter.deregisterTransitionEndHandler(this._openTransitionEndHandler);
+        this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
+        this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
+        this._adapter.registerTransitionEndHandler(this._closeTransitionEndHandler);
+        this._adapter.setVisibility(false);
+    }
+    _onCloseTransitionEnd() {
+        this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.CLOSE);
+        this._adapter.detach();
+        const openBottomSheets = this._adapter.getOpenBottomSheets(BOTTOM_SHEET_CONSTANTS.elementName);
+        if (!openBottomSheets.length) {
+            this._adapter.removeBodyAttribute(BOTTOM_SHEET_CONSTANTS.attributes.OPEN);
+        }
+    }
+    _onOpenTransitionEnd() {
+        if (!this._open) {
+            return;
+        }
+        this._adapter.deregisterTransitionEndHandler(this._openTransitionEndHandler);
+        this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.READY);
+        this._adapter.tryLayoutChildren();
+        if (this._adapter.isScrollable()) {
+            this._initScrollableHandlers();
+        }
+    }
+    _onDocumentKeydown(evt) {
+        evt.stopPropagation();
+        if (evt.key && (evt.key === 'Escape' || evt.key === 'Esc')) {
+            this._tryClose();
+        }
+    }
+    _onBackdropClick(evt) {
+        evt.stopPropagation();
+        this._tryClose();
+    }
+    async _tryClose() {
+        const isCancelled = !this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.BEFORE_CLOSE, undefined, undefined, true);
+        if (isCancelled) {
+            return;
+        }
+        if (!this._beforeCloseCallback) {
+            this.open = false;
+            return;
+        }
+        try {
+            const shouldClose = await Promise.resolve(this._beforeCloseCallback());
+            if (shouldClose) {
+                this.open = false;
+                return;
+            }
+        }
+        catch (err) {
+            return;
+        }
+    }
+    _setBackdropClickListener(attach) {
+        if (!this._open) {
+            return;
+        }
+        if (attach) {
+            this._adapter.registerBackdropClickHandler(this._backdropClickHandler);
+        }
+        else {
+            this._adapter.deregisterBackdropClickHandler(this._backdropClickHandler);
+        }
+    }
+    _setDocumentKeydownListener(attach) {
+        if (!this._open) {
+            return;
+        }
+        if (attach) {
+            this._adapter.addDocumentListener('keydown', this._documentKeydownHandler);
+        }
+        else {
+            this._adapter.removeDocumentListener('keydown', this._documentKeydownHandler);
+        }
+    }
+    /** Controls whether clicking the backdrop closes the bottom sheet or not. */
+    set backdropClose(value) {
+        value = Boolean(value);
+        if (this._backdropClose !== value) {
+            this._backdropClose = value;
+            this._setBackdropClickListener(this._backdropClose);
+            this._adapter.toggleHostAttribute(BOTTOM_SHEET_CONSTANTS.attributes.BACKDROP_CLOSE, this._backdropClose);
+        }
+    }
+    get backdropClose() {
+        return this._backdropClose;
+    }
+    /** Controls whether pressing the escape key closes the sheet or not. */
+    set escapeClose(value) {
+        value = Boolean(value);
+        if (this._escapeClose !== value) {
+            this._escapeClose = value;
+            this._setDocumentKeydownListener(this._escapeClose);
+            this._adapter.toggleHostAttribute(BOTTOM_SHEET_CONSTANTS.attributes.ESCAPE_CLOSE, this._escapeClose);
+        }
+    }
+    get escapeClose() {
+        return this._escapeClose;
+    }
+    get open() {
+        return this._open;
+    }
+    set open(value) {
+        if (this._open !== value) {
+            value = Boolean(value);
+            if (value !== this._open) {
+                const callback = value ? this._openCallback : this._closeCallback;
+                if (callback) {
+                    Promise.resolve(callback())
+                        .then(() => {
+                        this._setOpen(value);
+                    })
+                        .catch(() => { });
+                }
+                else {
+                    this._setOpen(value);
+                }
+            }
+        }
+    }
+    get fullscreen() {
+        return this._fullscreen;
+    }
+    set fullscreen(value) {
+        if (this._fullscreen !== value) {
+            this._fullscreen = value;
+            this._adapter.setFullscreen(this._fullscreen);
+            this._adapter.toggleHostAttribute(BOTTOM_SHEET_CONSTANTS.attributes.FULLSCREEN, this._fullscreen);
+        }
+    }
+    get showBackdrop() {
+        return this._showBackdrop;
+    }
+    set showBackdrop(value) {
+        if (this._showBackdrop !== value) {
+            this._showBackdrop = value;
+            this._adapter.setBackdropVisiblity(value);
+            this._adapter.toggleHostAttribute(BOTTOM_SHEET_CONSTANTS.attributes.SHOW_BACKDROP, this._showBackdrop);
+        }
+    }
+    get openCallback() {
+        return this._openCallback;
+    }
+    set openCallback(callback) {
+        this._openCallback = callback;
+    }
+    get closeCallback() {
+        return this._closeCallback;
+    }
+    set closeCallback(callback) {
+        this._closeCallback = callback;
+    }
+    get beforeCloseCallback() {
+        return this._beforeCloseCallback;
+    }
+    set beforeCloseCallback(callback) {
+        this._beforeCloseCallback = callback;
+    }
+    /** If scrollable, allow drag to/from fullscreen, and make fullscreen on scroll. */
+    _initScrollableHandlers() {
+        if (!this._fullscreen && this._adapter.isScrollable()) {
+            this._adapter.setDragTargetHandler('mousedown', this._dragStartHandler);
+            this._adapter.setDragTargetHandler('touchstart', this._dragStartHandler);
+            this._adapter.setBodyScrollHandler(this._bodyScrollHandler);
+        }
+    }
+    _onBodyScroll() {
+        if (!this._fullscreen && !this._isDragging) {
+            this.fullscreen = true;
+            this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.FULLSCREEN, this._fullscreen);
+        }
+    }
+    _onDragStart(evt) {
+        if (this._fullscreen) {
+            const eventPath = getEventPath(evt);
+            const isWithinScrollContainer = this._adapter.isScrollable() && this._adapter.isContentChild(eventPath[0]);
+            if (isWithinScrollContainer) {
+                // We ignore drag events that originate from within the scrollable content when in full screen mode (to allow for scroll interactions)
+                return;
+            }
+        }
+        evt.stopPropagation();
+        const bounds = this._adapter.getContainerBounds();
+        const clientY = evt instanceof MouseEvent ? evt.clientY : evt.touches[0].clientY;
+        this._dragContext = {
+            top: clientY - bounds.top,
+            height: bounds.height
+        };
+        this._adapter.setBodyListener('mousemove', this._dragMoveHandler, { passive: false });
+        this._adapter.setBodyListener('touchmove', this._dragMoveHandler, { passive: false });
+        this._adapter.setBodyListener('mouseup', this._dragEndHandler);
+        this._adapter.setBodyListener('touchend', this._dragEndHandler);
+        this._adapter.setBodyListener('touchcancel', this._dragCancelHandler);
+    }
+    _onDragMove(evt) {
+        evt.stopPropagation();
+        evt.preventDefault();
+        if (!this._dragContext) {
+            return;
+        }
+        const clientY = evt instanceof MouseEvent ? evt.clientY : evt.touches[0].clientY;
+        const height = { y: window.innerHeight - clientY + this._dragContext.top };
+        // If this is the beginning of the move sequence, we emit the start event (to allow for preventing default) and
+        // then update the surface position if not prevented
+        if (!this._isDragging) {
+            this._isDragging = true;
+            const canDrag = this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.DRAG_START, height, true, true);
+            if (!canDrag) {
+                return;
+            }
+            this._adapter.setDragging(true);
+        }
+        // If not fullscreen, clamp to minimum of original height.
+        const newPosition = this._fullscreen ? height : { y: Math.max(height.y, this._dragContext.height) };
+        // Only update the position if it actually changed
+        if (!this._lastPosition || newPosition.y !== this._lastPosition.y) {
+            const canMove = this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.DRAGGED, newPosition, true, true);
+            if (canMove) {
+                this._lastPosition = Object.assign(Object.assign({}, newPosition), { clientY });
+                this._adapter.setContainerHeight(newPosition.y);
+            }
+        }
+    }
+    _onDragEnd() {
+        if (this._lastPosition) {
+            const clientY = this._lastPosition.clientY;
+            const dragContext = this._dragContext;
+            if (dragContext) {
+                if (this._fullscreen && clientY > 0) {
+                    this.fullscreen = false;
+                    this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.FULLSCREEN, this._fullscreen);
+                }
+                else if (!this._fullscreen && clientY < dragContext.height + dragContext.top) {
+                    this.fullscreen = true;
+                    this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.FULLSCREEN, this._fullscreen);
+                }
+            }
+        }
+        if (this._isDragging) {
+            this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.DRAG_END);
+        }
+        this._dragComplete();
+    }
+    _onDragCancel() {
+        if (this._isDragging) {
+            this._adapter.emitHostEvent(BOTTOM_SHEET_CONSTANTS.events.DRAG_CANCEL);
+        }
+        this._dragComplete();
+    }
+    _dragComplete() {
+        this._adapter.setDragging(false);
+        this._adapter.removeBodyListener('mousemove', this._dragMoveHandler);
+        this._adapter.removeBodyListener('touchmove', this._dragMoveHandler);
+        this._adapter.removeBodyListener('mouseup', this._dragEndHandler);
+        this._adapter.removeBodyListener('touchend', this._dragEndHandler);
+        this._adapter.removeBodyListener('touchcancel', this._dragCancelHandler);
+        this._adapter.setContainerHeight(null);
+        this._lastPosition = undefined;
+        this._dragContext = undefined;
+        this._isDragging = false;
+    }
+}

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

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElement } from '@tylertech/forge-core';
+import { IBottomSheetDragEventData, IBottomSheetDragStartEventData } from './bottom-sheet-constants';
+export interface IBottomSheetComponent extends ICustomElement {
+    showBackdrop: boolean;
+    backdropClose: boolean;
+    escapeClose: boolean;
+    open: boolean;
+    fullscreen: boolean;
+    openCallback: () => void | Promise<void>;
+    closeCallback: () => void | Promise<void>;
+    beforeCloseCallback: () => boolean | Promise<boolean>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-bottom-sheet': IBottomSheetComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-bottom-sheet-open': CustomEvent<void>;
+        'forge-bottom-sheet-close': CustomEvent<void>;
+        'forge-bottom-sheet-before-close': CustomEvent<void>;
+        'forge-bottom-sheet-before-open': CustomEvent<void>;
+        'forge-bottom-sheet-ready': CustomEvent<void>;
+        'forge-bottom-sheet-drag-start': CustomEvent<IBottomSheetDragStartEventData>;
+        'forge-bottom-sheet-dragged': CustomEvent<IBottomSheetDragEventData>;
+        'forge-bottom-sheet-drag-end': CustomEvent<void>;
+        'forge-bottom-sheet-drag-cancel': CustomEvent<void>;
+        'forge-bottom-sheet-fullscreen': CustomEvent<boolean>;
+    }
+}
+export declare class BottomSheetComponent extends HTMLElement implements IBottomSheetComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    /** Controls whether clicking the backdrop closes the bottom-sheet or not. Default is true. */
+    backdropClose: boolean;
+    /** Controls whether pressing the escape key closes the bottom-sheet or not. Default is true. */
+    escapeClose: boolean;
+    /** Controls whether the bottom-sheet is open or not. Default is false. */
+    open: boolean;
+    /** Controls whether the bottom-sheet is full screen or not. Default is false. */
+    fullscreen: boolean;
+    /** Shows a backdrop to prevent interacting with other content until the bottom sheet is dismissed.  Default is false. */
+    showBackdrop: boolean;
+    /** The function to call when the bottom-sheet wants to open. */
+    openCallback: () => void | Promise<void>;
+    /** the function to call when the bottom-sheet wants to close. */
+    closeCallback: () => void | Promise<void>;
+    /** the function to call when the bottom-sheet wants to close. */
+    beforeCloseCallback: () => boolean | Promise<boolean>;
+}

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

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, CustomElement, FoundationProperty, coerceBoolean } from '@tylertech/forge-core';
+import { BackdropComponent } from '../backdrop';
+import { BottomSheetAdapter } from './bottom-sheet-adapter';
+import { BOTTOM_SHEET_CONSTANTS } from './bottom-sheet-constants';
+import { BottomSheetFoundation } from './bottom-sheet-foundation';
+const template = '<template><forge-backdrop hidden part=\"backdrop\"></forge-backdrop><div class=\"forge-bottom-sheet\" part=\"root\"><slot></slot></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)}.forge-bottom-sheet{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);-webkit-box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);border-radius:4px 4px 0 0;border-radius:var(--forge-bottom-sheet-border-radius,4px 4px 0 0);max-width:50%;max-width:var(--forge-bottom-sheet-desktop-max-width,50%);-webkit-box-sizing:border-box;box-sizing:border-box;position:fixed;bottom:0;right:0;left:0;max-height:50%;margin:0 auto;display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-transform:translateY(100%);transform:translateY(100%);-webkit-transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in,-webkit-transform var(--forge-bottom-sheet-transition-duration-close, 200ms) cubic-bezier(.4, 0, .2, 1);transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in,-webkit-transform var(--forge-bottom-sheet-transition-duration-close, 200ms) cubic-bezier(.4, 0, .2, 1);transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in,transform var(--forge-bottom-sheet-transition-duration-close, 200ms) cubic-bezier(.4, 0, .2, 1);transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in,transform var(--forge-bottom-sheet-transition-duration-close, 200ms) cubic-bezier(.4, 0, .2, 1),-webkit-transform var(--forge-bottom-sheet-transition-duration-close, 200ms) cubic-bezier(.4, 0, .2, 1)}@media (max-width:600px){.forge-bottom-sheet{max-width:100%;width:100%;margin:0;border-radius:0}}.forge-bottom-sheet--open{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition-duration:var(--forge-bottom-sheet-transition-duration, 250ms);transition-duration:var(--forge-bottom-sheet-transition-duration, 250ms)}.forge-bottom-sheet--fullscreen.forge-bottom-sheet--open{height:100%;max-height:100%;-webkit-transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in;transition:max-height var(--forge-bottom-sheet-transition-duration, 250ms) ease-in}.forge-bottom-sheet--dragging{-webkit-transition:none!important;transition:none!important}.forge-bottom-sheet--scrollable{height:100%}:host{z-index:8;z-index:var(--forge-z-index-dialog,8);position:fixed}:host forge-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;position:fixed}:host([hidden]){display:none}';
+let BottomSheetComponent = class BottomSheetComponent extends HTMLElement {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new BottomSheetFoundation(new BottomSheetAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            BOTTOM_SHEET_CONSTANTS.attributes.BACKDROP_CLOSE,
+            BOTTOM_SHEET_CONSTANTS.attributes.ESCAPE_CLOSE,
+            BOTTOM_SHEET_CONSTANTS.attributes.OPEN,
+            BOTTOM_SHEET_CONSTANTS.attributes.FULLSCREEN,
+            BOTTOM_SHEET_CONSTANTS.attributes.SHOW_BACKDROP
+        ];
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.destroy();
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        switch (name) {
+            case BOTTOM_SHEET_CONSTANTS.attributes.BACKDROP_CLOSE:
+                this.backdropClose = coerceBoolean(newValue);
+                break;
+            case BOTTOM_SHEET_CONSTANTS.attributes.ESCAPE_CLOSE:
+                this.escapeClose = coerceBoolean(newValue);
+                break;
+            case BOTTOM_SHEET_CONSTANTS.attributes.OPEN:
+                this.open = coerceBoolean(newValue);
+                break;
+            case BOTTOM_SHEET_CONSTANTS.attributes.FULLSCREEN:
+                this.fullscreen = coerceBoolean(newValue);
+                break;
+            case BOTTOM_SHEET_CONSTANTS.attributes.SHOW_BACKDROP:
+                this.showBackdrop = coerceBoolean(newValue);
+                break;
+        }
+    }
+};
+__decorate([
+    FoundationProperty()
+], BottomSheetComponent.prototype, "backdropClose", void 0);
+__decorate([
+    FoundationProperty()
+], BottomSheetComponent.prototype, "escapeClose", void 0);
+__decorate([
+    FoundationProperty()
+], BottomSheetComponent.prototype, "open", void 0);
+__decorate([
+    FoundationProperty()
+], BottomSheetComponent.prototype, "fullscreen", void 0);
+__decorate([
+    FoundationProperty()
+], BottomSheetComponent.prototype, "showBackdrop", void 0);
+__decorate([
+    FoundationProperty()
+], BottomSheetComponent.prototype, "openCallback", void 0);
+__decorate([
+    FoundationProperty()
+], BottomSheetComponent.prototype, "closeCallback", void 0);
+__decorate([
+    FoundationProperty()
+], BottomSheetComponent.prototype, "beforeCloseCallback", void 0);
+BottomSheetComponent = __decorate([
+    CustomElement({
+        name: BOTTOM_SHEET_CONSTANTS.elementName,
+        dependencies: [BackdropComponent]
+    })
+], BottomSheetComponent);
+export { BottomSheetComponent };

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

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

package/esm/bottom-sheet/index.js

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

package/esm/busy-indicator/busy-indicator-adapter.d.ts

@@ -0,0 +1,159 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BackdropAppearance } from '../backdrop';
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { IBusyIndicatorComponent } from './busy-indicator';
+export interface IBusyIndicatorAdapter extends IBaseAdapter {
+    setContainerInvisible(): void;
+    setSurfaceOpacity: (opacity: number) => void;
+    setFixed(value: boolean): void;
+    setTitle: (title: string) => void;
+    setMessage: (message: string) => void;
+    setTitleVisibility: (visible: boolean) => void;
+    setMessageVisibility: (visible: boolean) => void;
+    setCancelButtonVisibility: (visible: boolean) => void;
+    setSpinnerVisibility: (visible: boolean) => void;
+    setProgressBarVisibility: (visible: boolean) => void;
+    setProgressBarDeterminate: (determinate: boolean) => void;
+    setProgressBarProgress: (value: number) => void;
+    setProgressBarBuffer: (value: number) => void;
+    addCancelButtonEventListener: (type: string, listener: () => void) => void;
+    removeCancelButtonEventListener: (type: string, listener: () => void) => void;
+    setCancelButtonAttribute: (name: string, value: string) => void;
+    setCancelButtonText: (text: string) => void;
+    setSurfaceWidth: (value: string) => void;
+    captureFocus: () => void;
+    remove: () => void;
+    hideBackdrop: () => void;
+    setBackdropAppearance(appearance: BackdropAppearance): void;
+    setParentAttribute(name: string, value: string): void;
+    removeParentAttribute(name: string): void;
+    getFocusedElement(): HTMLElement;
+    hasFocus(): boolean;
+}
+/**
+ * Provides facilities for interacting with the internal DOM of `BusyIndicatorComponent`.
+ */
+export declare class BusyIndicatorAdapter extends BaseAdapter<IBusyIndicatorComponent> implements IBusyIndicatorAdapter {
+    private _surfaceElement;
+    private _titleElement;
+    private _titlePlaceholderElement;
+    private _messageElement;
+    private _messagePlaceholderElement;
+    private _cancelButtonElement;
+    private _cancelButtonPlaceholderElement;
+    private _spinnerElement;
+    private _spinnerPlaceholderElement;
+    private _progressBarContainerElement;
+    private _progressBarContainerPlaceholderElement;
+    private _progressBarElement;
+    private _backdropElement;
+    private _parentElement;
+    constructor(component: IBusyIndicatorComponent);
+    /**
+     * Sets the opacity of the content element.
+     * @param opacity The opacity value.
+     */
+    setSurfaceOpacity(opacity: number): void;
+    setFixed(value: boolean): void;
+    /**
+     * Sets the content of the title element.
+     * @param title The title text.
+     */
+    setTitle(title: string): void;
+    /**
+     * Sets the content of the message element.
+     * @param message The message text.
+     */
+    setMessage(message: string): void;
+    /**
+     * Sets the visibility of the title element by adding or removing it from the DOM.
+     * @param visible Whether the title is visible or not.
+     */
+    setTitleVisibility(visible: boolean): void;
+    /**
+     * Adds or removes the cancel button from the DOM.
+     * @param visible The visibility value.
+     */
+    setCancelButtonVisibility(visible: boolean): void;
+    /**
+     * Adds or removes the message element from the DOM.
+     * @param visible The visibility value.
+     */
+    setMessageVisibility(visible: boolean): void;
+    /**
+     * Adds or removes the spinner element from the DOM.
+     * @param visible The visibility value.
+     */
+    setSpinnerVisibility(visible: boolean): void;
+    /**
+     * Adds or removes the progress bar element from the DOM.
+     * @param visible The visibility value.
+     */
+    setProgressBarVisibility(visible: boolean): void;
+    /**
+     * Sets the determinate state of the progress bar component.
+     * @param {boolean} determinate The determinate value.
+     */
+    setProgressBarDeterminate(determinate: boolean): void;
+    /**
+     * Sets the progress percent for the progress bar component.
+     * @param value The progress percent.
+     */
+    setProgressBarProgress(value: number): void;
+    /**
+     * Sets the progress bar component buffer percent.
+     * @param value The buffer percent.
+     */
+    setProgressBarBuffer(value: number): void;
+    /**
+     * Adds an event listener to the cancel button.
+     * @param type The event type.
+     * @param listener The event listener.
+     */
+    addCancelButtonEventListener(type: string, listener: () => void): void;
+    /**
+     * Removes an event listener from the cancel button.
+     * @param type The event type.
+     * @param listener The event listener.
+     */
+    removeCancelButtonEventListener(type: string, listener: () => void): void;
+    /**
+     * Sets an attribute on the cancel button.
+     * @param name The attribute name.
+     * @param value The attribute value.
+     */
+    setCancelButtonAttribute(name: string, value: string): void;
+    /**
+     * Sets the text displayed in the cancel button element.
+     * @param text The text value.
+     */
+    setCancelButtonText(text: string): void;
+    /**
+     * Sets the width of the surface element.
+     * @param value The CSS width.
+     */
+    setSurfaceWidth(value: string): void;
+    /**
+     * Sets focus to the busy indicator component element.
+     */
+    captureFocus(): void;
+    /**
+     * Removes the busy indicator component from its parent.
+     */
+    remove(): void;
+    /**
+     * Hides the backdrop by fading it out.
+     */
+    hideBackdrop(): void;
+    private _toggleElement;
+    setContainerInvisible(): void;
+    setBackdropAppearance(appearance: BackdropAppearance): void;
+    setParentAttribute(name: string, value: string): void;
+    removeParentAttribute(name: string): void;
+    getFocusedElement(): HTMLElement;
+    hasFocus(): boolean;
+}