@tylertech/forge 2.0.0

package/esm/avatar/avatar-foundation.js

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { isDefined, isString } from '@tylertech/forge-core';
+import { getTextColor } from '../utils/color-utils';
+import { AVATAR_CONSTANTS } from './avatar-constants';
+/**
+ * The custom element class behind the `<forge-avatar>` class.
+ */
+export class AvatarFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._text = '';
+        this._letterCount = AVATAR_CONSTANTS.numbers.DEFAULT_LETTER_COUNT;
+        this._autoColor = false;
+        this._initialized = false;
+    }
+    initialize() {
+        this._render();
+        this._initialized = true;
+    }
+    disconnect() {
+        this._initialized = false;
+    }
+    _render() {
+        this._setText();
+        this._setBackgroundImageUrl();
+    }
+    async _setBackgroundImageUrl() {
+        if (this._imageUrl) {
+            if (await this._adapter.setBackgroundImageUrl(this._imageUrl)) {
+                this._adapter.clearText();
+            }
+        }
+        else {
+            this._adapter.removeBackgroundImage();
+        }
+    }
+    _setText() {
+        const data = this._getTextContent(this._text, this._letterCount);
+        if (data) {
+            this._adapter.setText(data);
+        }
+        else {
+            this._adapter.clearText();
+        }
+        const color = this._autoColor ? getTextColor(data) : AVATAR_CONSTANTS.strings.DEFAULT_COLOR;
+        this._adapter.setBackgroundColor(color);
+    }
+    /**
+     * Gets the text content to display in the avatar.
+     * @param {string} value The text to parse.
+     */
+    _getTextContent(value, count) {
+        if (!value || !isString(value) || count <= 0) {
+            return '';
+        }
+        let text;
+        if (count === 1) {
+            text = value[0].toUpperCase();
+        }
+        else {
+            const words = value.match(/\S+/g) || [];
+            text = words.slice(0, count).reduce((prev, curr) => prev += curr[0].toUpperCase(), '');
+        }
+        return text;
+    }
+    /** Gets/sets the text to display. */
+    get text() {
+        return this._text;
+    }
+    set text(value) {
+        if (this._text !== value) {
+            this._text = value || '';
+            this._adapter.setHostAttribute(AVATAR_CONSTANTS.attributes.TEXT, this._text);
+            if (this._initialized) {
+                this._render();
+            }
+        }
+    }
+    /** Controls the number of letters to display from the text. By default the text is split on spaces and the first character of each word is used. */
+    get letterCount() {
+        return this._letterCount;
+    }
+    set letterCount(value) {
+        if (this._letterCount !== value) {
+            this._letterCount = value;
+            this._adapter.setHostAttribute(AVATAR_CONSTANTS.attributes.LETTER_COUNT, isDefined(this._letterCount) ? this._letterCount.toString() : '');
+            if (this._initialized) {
+                this._render();
+            }
+        }
+    }
+    /** Sets the background image URL to use. */
+    get imageUrl() {
+        return this._imageUrl;
+    }
+    set imageUrl(value) {
+        if (this._imageUrl !== value) {
+            this._imageUrl = value;
+            if (this._initialized) {
+                this._render();
+            }
+        }
+    }
+    /** Controls whether the background color set automatically based on the text value. Does not have any effect when an image URL is specified. */
+    get autoColor() {
+        return this._autoColor;
+    }
+    set autoColor(value) {
+        if (this._autoColor !== value) {
+            this._autoColor = value;
+            this._setText();
+            this._adapter.setHostAttribute(AVATAR_CONSTANTS.attributes.AUTO_COLOR, isDefined(this._autoColor) ? this._autoColor.toString() : '');
+        }
+    }
+}

package/esm/avatar/avatar.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+export interface IAvatarComponent extends IBaseComponent {
+    imageUrl: string;
+    text: string;
+    letterCount: number;
+    autoColor: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-avatar': IAvatarComponent;
+    }
+}
+/**
+ * The custom element class behind the `<forge-avatar>` element.
+ */
+export declare class AvatarComponent extends BaseComponent implements IAvatarComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** Gets/sets the text to display. */
+    text: string;
+    /** Controls the number of letters to display from the text. By default the text is split on spaces and the first character of each word is used. */
+    letterCount: number;
+    /** Sets the background image URL to use. */
+    imageUrl: string;
+    /** Controls whether the background color is set automatically based on the text value. Does not have any effect when an image URL is specified. */
+    autoColor: boolean;
+}

package/esm/avatar/avatar.js

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, attachShadowTemplate, coerceNumber, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
+import { AvatarAdapter } from './avatar-adapter';
+import { AvatarFoundation } from './avatar-foundation';
+import { AVATAR_CONSTANTS } from './avatar-constants';
+import { BaseComponent } from '../core/base/base-component';
+const template = '<template><div class=\"forge-avatar\" aria-hidden=\"true\" part=\"root\"><slot></slot></div></template>';
+const styles = ':host{display:inline-block;contain:content}:host([hidden]){display:none}.forge-avatar{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:1.25rem;font-size:var(--forge-typography-title-font-size, 1.25rem);line-height:2rem;line-height:var(--forge-typography-title-line-height, 2rem);font-weight:400;font-weight:var(--forge-typography-title-font-weight,400);letter-spacing:.0125em;letter-spacing:var(--forge-typography-title-letter-spacing, .0125em);text-decoration:inherit;-webkit-text-decoration:var(--forge-typography-title-text-decoration,inherit);text-decoration:var(--forge-typography-title-text-decoration,inherit);text-transform:inherit;text-transform:var(--forge-typography-title-text-transform,inherit);font-size:1rem;font-size:var(--forge-avatar-font-size, 1rem);font-weight:400;font-weight:var(--forge-avatar-font-weight,400);background-color:none;background-color:var(--forge-avatar-theme-background,none);height:40px;height:var(--forge-avatar-size,40px);width:40px;width:var(--forge-avatar-size,40px);color:#fff;color:var(--forge-avatar-theme-on-background,#fff);border-radius:50%;border-radius:var(--forge-avatar-radius,50%);display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;background-position:center;background-repeat:no-repeat;background-size:cover;overflow:hidden;-webkit-transition:height .2s cubic-bezier(.4, 0, .2, 1),width .2s cubic-bezier(.4, 0, .2, 1);transition:height .2s cubic-bezier(.4, 0, .2, 1),width .2s cubic-bezier(.4, 0, .2, 1)}';
+/**
+ * The custom element class behind the `<forge-avatar>` element.
+ */
+let AvatarComponent = class AvatarComponent extends BaseComponent {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new AvatarFoundation(new AvatarAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            AVATAR_CONSTANTS.attributes.TEXT,
+            AVATAR_CONSTANTS.attributes.LETTER_COUNT,
+            AVATAR_CONSTANTS.attributes.IMAGE_URL,
+            AVATAR_CONSTANTS.attributes.AUTO_COLOR
+        ];
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case AVATAR_CONSTANTS.attributes.TEXT:
+                this.text = newValue;
+                break;
+            case AVATAR_CONSTANTS.attributes.LETTER_COUNT:
+                this.letterCount = coerceNumber(newValue);
+                break;
+            case AVATAR_CONSTANTS.attributes.IMAGE_URL:
+                this.imageUrl = newValue;
+                break;
+            case AVATAR_CONSTANTS.attributes.AUTO_COLOR:
+                this.autoColor = coerceBoolean(newValue);
+                break;
+        }
+    }
+};
+__decorate([
+    FoundationProperty()
+], AvatarComponent.prototype, "text", void 0);
+__decorate([
+    FoundationProperty()
+], AvatarComponent.prototype, "letterCount", void 0);
+__decorate([
+    FoundationProperty()
+], AvatarComponent.prototype, "imageUrl", void 0);
+__decorate([
+    FoundationProperty()
+], AvatarComponent.prototype, "autoColor", void 0);
+AvatarComponent = __decorate([
+    CustomElement({
+        name: AVATAR_CONSTANTS.elementName
+    })
+], AvatarComponent);
+export { AvatarComponent };

package/esm/avatar/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './avatar-adapter';
+export * from './avatar-constants';
+export * from './avatar-foundation';
+export * from './avatar';
+export * from './avatar-component-delegate';
+export declare function defineAvatarComponent(): void;

package/esm/avatar/index.js

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { AvatarComponent } from './avatar';
+export * from './avatar-adapter';
+export * from './avatar-constants';
+export * from './avatar-foundation';
+export * from './avatar';
+export * from './avatar-component-delegate';
+export function defineAvatarComponent() {
+    defineCustomElement(AvatarComponent);
+}

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

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { IBackdropComponent } from './backdrop';
+export interface IBackdropAdapter extends IBaseAdapter {
+    setBackdropOpacity: (opacity: number) => void;
+    addBackdropEventListener: (type: string, listener: (evt: Event) => void) => void;
+    removeBackdropEventListener: (type: string, listener: (evt: Event) => void) => void;
+}
+/**
+ * Provides facilities for interacting with the internal DOM of `BackdropComponent`.
+ */
+export declare class BackdropAdapter extends BaseAdapter<IBackdropComponent> implements IBackdropAdapter {
+    private _backdropElement;
+    constructor(component: IBackdropComponent);
+    /**
+     * Sets the backdrop element opacity.
+     * @param opacity The opacity amount.
+     */
+    setBackdropOpacity(opacity: number): void;
+    /**
+     * Adds a click event to the backdrop container element.
+     * @param type The event type.
+     * @param listener The event listener.
+     */
+    addBackdropEventListener(type: string, listener: (evt: Event) => void): void;
+    /**
+     * Removes a click event from the backdrop container element.
+     * @param type The event type.
+     * @param listener The event listener.
+     */
+    removeBackdropEventListener(type: string, listener: (evt: Event) => void): void;
+}

package/esm/backdrop/backdrop-adapter.js

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement } from '@tylertech/forge-core';
+import { BaseAdapter } from '../core/base/base-adapter';
+import { BACKDROP_CONSTANTS } from './backdrop-constants';
+/**
+ * Provides facilities for interacting with the internal DOM of `BackdropComponent`.
+ */
+export class BackdropAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._backdropElement = getShadowElement(component, BACKDROP_CONSTANTS.selectors.CONTAINER);
+    }
+    /**
+     * Sets the backdrop element opacity.
+     * @param opacity The opacity amount.
+     */
+    setBackdropOpacity(opacity) {
+        this._backdropElement.style.opacity = opacity.toString();
+    }
+    /**
+     * Adds a click event to the backdrop container element.
+     * @param type The event type.
+     * @param listener The event listener.
+     */
+    addBackdropEventListener(type, listener) {
+        this._backdropElement.addEventListener('click', listener);
+    }
+    /**
+     * Removes a click event from the backdrop container element.
+     * @param type The event type.
+     * @param listener The event listener.
+     */
+    removeBackdropEventListener(type, listener) {
+        this._backdropElement.removeEventListener('click', listener);
+    }
+}

package/esm/backdrop/backdrop-constants.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const BACKDROP_CONSTANTS: {
+    elementName: "forge-backdrop";
+    selectors: {
+        CONTAINER: string;
+    };
+    numbers: {
+        OPACITY: number;
+        DELAY: number;
+        TRANSITION_DURATION: number;
+    };
+    attributes: {
+        DELAY: string;
+        MAX_OPACITY: string;
+        APPEARANCE: string;
+        FIXED: string;
+    };
+    events: {
+        BACKDROP_CLICK: string;
+    };
+};
+export declare type BackdropAppearance = 'light' | 'dark' | undefined;

package/esm/backdrop/backdrop-constants.js

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}backdrop`;
+const selectors = {
+    CONTAINER: '.forge-backdrop'
+};
+const numbers = {
+    OPACITY: 0.54,
+    DELAY: 0,
+    TRANSITION_DURATION: 150
+};
+const attributes = {
+    DELAY: 'delay',
+    MAX_OPACITY: 'max-opacity',
+    APPEARANCE: 'appearance',
+    FIXED: 'fixed'
+};
+const events = {
+    BACKDROP_CLICK: `${elementName}-click`
+};
+export const BACKDROP_CONSTANTS = {
+    elementName,
+    selectors,
+    numbers,
+    attributes,
+    events
+};

package/esm/backdrop/backdrop-foundation.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IBackdropAdapter } from './backdrop-adapter';
+import { BackdropAppearance } from './backdrop-constants';
+export interface IBackdropFoundation extends ICustomElementFoundation {
+    fadeOut(): Promise<void>;
+    fadeIn(): Promise<void>;
+    appearance: BackdropAppearance;
+}
+export declare class BackdropFoundation implements IBackdropFoundation {
+    private _adapter;
+    private _delay;
+    private _maxOpacity;
+    private _appearance;
+    constructor(_adapter: IBackdropAdapter);
+    initialize(): void;
+    /**
+     * Starts the fade-out animation to animate the backdrop to 0% opacity.
+     */
+    fadeOut(): Promise<void>;
+    /**
+     * Starts the fade-in animation to animate the backdrop to max opacity.
+     */
+    fadeIn(): Promise<void>;
+    private _onClick;
+    disconnect(): void;
+    private _applyAppearance;
+    set delay(value: number);
+    get delay(): number;
+    set maxOpacity(value: number);
+    get maxOpacity(): number;
+    get appearance(): BackdropAppearance;
+    set appearance(value: BackdropAppearance);
+}

package/esm/backdrop/backdrop-foundation.js

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BACKDROP_CONSTANTS } from './backdrop-constants';
+export class BackdropFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._delay = BACKDROP_CONSTANTS.numbers.DELAY;
+        this._maxOpacity = BACKDROP_CONSTANTS.numbers.OPACITY;
+        this._adapter.addBackdropEventListener('click', this._onClick.bind(this));
+    }
+    initialize() {
+        this._adapter.setBackdropOpacity(0);
+        this._applyAppearance();
+        this._adapter.setHostAttribute(BACKDROP_CONSTANTS.attributes.DELAY, this._delay.toString());
+        this.fadeIn();
+    }
+    /**
+     * Starts the fade-out animation to animate the backdrop to 0% opacity.
+     */
+    fadeOut() {
+        return new Promise(resolve => {
+            this._adapter.setBackdropOpacity(0);
+            setTimeout(() => resolve(), BACKDROP_CONSTANTS.numbers.TRANSITION_DURATION);
+        });
+    }
+    /**
+     * Starts the fade-in animation to animate the backdrop to max opacity.
+     */
+    fadeIn() {
+        return new Promise(resolve => {
+            setTimeout(() => {
+                this._adapter.setBackdropOpacity(this._maxOpacity);
+                setTimeout(() => resolve(), BACKDROP_CONSTANTS.numbers.TRANSITION_DURATION);
+            }, this.delay);
+        });
+    }
+    _onClick(evt) {
+        evt.stopPropagation();
+        this._adapter.emitHostEvent(BACKDROP_CONSTANTS.events.BACKDROP_CLICK, undefined, true, true);
+    }
+    disconnect() {
+        this._adapter.removeBackdropEventListener('click', this._onClick);
+    }
+    _applyAppearance() {
+        if (this._appearance) {
+            this._adapter.setHostAttribute(BACKDROP_CONSTANTS.attributes.APPEARANCE, String(this._appearance));
+        }
+        else {
+            this._adapter.removeHostAttribute(BACKDROP_CONSTANTS.attributes.APPEARANCE);
+        }
+    }
+    set delay(value) {
+        if (this._delay !== value) {
+            this._delay = value;
+            this._adapter.setHostAttribute(BACKDROP_CONSTANTS.attributes.DELAY, this._delay.toString());
+        }
+    }
+    get delay() {
+        return this._delay;
+    }
+    set maxOpacity(value) {
+        if (this._maxOpacity !== value) {
+            this._maxOpacity = value;
+            this._adapter.setHostAttribute(BACKDROP_CONSTANTS.attributes.MAX_OPACITY, this._maxOpacity.toString());
+        }
+    }
+    get maxOpacity() {
+        return this._maxOpacity;
+    }
+    get appearance() {
+        return this._appearance;
+    }
+    set appearance(value) {
+        if (this._appearance !== value) {
+            this._appearance = value;
+            this._applyAppearance();
+        }
+    }
+}

package/esm/backdrop/backdrop.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { BackdropAppearance } from './backdrop-constants';
+import { BackdropFoundation } from './backdrop-foundation';
+export interface IBackdropComponent extends IBaseComponent {
+    delay: number;
+    maxOpacity: number;
+    appearance: BackdropAppearance;
+    fadeOut(): Promise<void>;
+    fadeIn(): Promise<void>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-backdrop': IBackdropComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-backdrop-click': CustomEvent<void>;
+    }
+}
+/**
+ * A web component that renders a backdrop covering its parent container with a semi-opaque element.
+ */
+export declare class BackdropComponent extends BaseComponent {
+    static get observedAttributes(): string[];
+    protected _foundation: BackdropFoundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /**
+     * The time in milliseconds to delay the fade in animation of the opacity.
+     * Note: The element will start with 0% opacity when the component is rendered.
+     */
+    delay: number;
+    /** Controls whether the theme defaults to light vs dark compatibility. */
+    appearance: BackdropAppearance;
+    /** The max opacity to fade the element to. This defines how opaque the backdrop is when visible. */
+    maxOpacity: number;
+    /**
+     * Starts the fade-out animation to animate the backdrop to 0% opacity.
+     */
+    fadeOut(): Promise<void>;
+    /**
+     * Starts the fade-in animation to animate the backdrop to max opacity.
+     */
+    fadeIn(): Promise<void>;
+}

package/esm/backdrop/backdrop.js

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { BaseComponent } from '../core/base/base-component';
+import { BackdropAdapter } from './backdrop-adapter';
+import { BACKDROP_CONSTANTS } from './backdrop-constants';
+import { BackdropFoundation } from './backdrop-foundation';
+const template = '<template><div class=\"forge-backdrop\" part=\"root\"></div></template>';
+const styles = '.forge-backdrop{z-index:7;z-index:var(--forge-z-index-backdrop,7);background-color:rgba(0,0,0,.54);background-color:var(--forge-backdrop-theme-background,rgba(0,0,0,.54));position:absolute;top:0;bottom:0;left:0;right:0;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-transition:opacity 150ms 0s cubic-bezier(0, 0, .2, 1);transition:opacity 150ms 0s cubic-bezier(0, 0, .2, 1);opacity:0}:host{display:block}:host([hidden]){display:none}:host([fixed]) .forge-backdrop{position:fixed}:host([appearance=light]){--forge-backdrop-theme-background:rgba(255, 255, 255, 0.54)}:host([appearance=dark]){--forge-backdrop-theme-background:rgba(0, 0, 0, 0.54)}';
+/**
+ * A web component that renders a backdrop covering its parent container with a semi-opaque element.
+ */
+let BackdropComponent = class BackdropComponent extends BaseComponent {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new BackdropFoundation(new BackdropAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            BACKDROP_CONSTANTS.attributes.DELAY,
+            BACKDROP_CONSTANTS.attributes.MAX_OPACITY
+        ];
+    }
+    connectedCallback() {
+        if (this.hasAttribute(BACKDROP_CONSTANTS.attributes.DELAY) && this.getAttribute(BACKDROP_CONSTANTS.attributes.DELAY)) {
+            const inDelay = Number(this.getAttribute(BACKDROP_CONSTANTS.attributes.DELAY));
+            this.delay = inDelay >= 0 ? inDelay : BACKDROP_CONSTANTS.numbers.DELAY;
+        }
+        if (this.hasAttribute(BACKDROP_CONSTANTS.attributes.MAX_OPACITY)) {
+            const inMaxOpacity = Number(this.getAttribute(BACKDROP_CONSTANTS.attributes.MAX_OPACITY));
+            this.maxOpacity = inMaxOpacity >= 0 && inMaxOpacity <= 1 ? inMaxOpacity : BACKDROP_CONSTANTS.numbers.OPACITY;
+        }
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case BACKDROP_CONSTANTS.attributes.DELAY:
+                const delayValue = Number(newValue);
+                this.delay = delayValue >= 0 ? delayValue : BACKDROP_CONSTANTS.numbers.DELAY;
+                break;
+            case BACKDROP_CONSTANTS.attributes.MAX_OPACITY:
+                const opacityValue = Number(newValue);
+                this.maxOpacity = opacityValue >= 0 && opacityValue <= 1 ? opacityValue : BACKDROP_CONSTANTS.numbers.OPACITY;
+                break;
+            case BACKDROP_CONSTANTS.attributes.APPEARANCE:
+                this.appearance = newValue;
+                break;
+        }
+    }
+    /**
+     * Starts the fade-out animation to animate the backdrop to 0% opacity.
+     */
+    fadeOut() {
+        return this._foundation.fadeOut();
+    }
+    /**
+     * Starts the fade-in animation to animate the backdrop to max opacity.
+     */
+    fadeIn() {
+        return this._foundation.fadeIn();
+    }
+};
+__decorate([
+    FoundationProperty()
+], BackdropComponent.prototype, "delay", void 0);
+__decorate([
+    FoundationProperty()
+], BackdropComponent.prototype, "appearance", void 0);
+__decorate([
+    FoundationProperty()
+], BackdropComponent.prototype, "maxOpacity", void 0);
+BackdropComponent = __decorate([
+    CustomElement({
+        name: BACKDROP_CONSTANTS.elementName
+    })
+], BackdropComponent);
+export { BackdropComponent };

package/esm/backdrop/index.d.ts

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

package/esm/backdrop/index.js

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