@tylertech/forge 2.0.0

package/esm/popup/popup.js

@@ -0,0 +1,94 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty, isDefined } from '@tylertech/forge-core';
+import { BaseComponent } from '../core/base/base-component';
+import { PopupAdapter } from './popup-adapter';
+import { POPUP_CONSTANTS } from './popup-constants';
+import { PopupFoundation } from './popup-foundation';
+const template = '<template><div class=\"forge-popup\" part=\"root\"><slot></slot></div></template>';
+const styles = '.forge-popup{min-width:112px;min-width:var(--min-width,112px);background-color:#fff;background-color:var(--forge-theme-elevated-surface,#fff);-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);-webkit-box-shadow:var(--forge-theme-popup-elevation,0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12));box-shadow:var(--forge-theme-popup-elevation,0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12));color:#000;color:var(--mdc-theme-on-surface,#000);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);display:none;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:100%;margin:0;padding:0;-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 24px 0;transform-origin:50% 24px 0;opacity:0;will-change:transform,opacity;-webkit-transition:opacity 120ms linear,-webkit-transform 120ms cubic-bezier(0, 0, .2, 1);transition:opacity 120ms linear,-webkit-transform 120ms cubic-bezier(0, 0, .2, 1);transition:opacity 120ms linear,transform 120ms cubic-bezier(0, 0, .2, 1);transition:opacity 120ms linear,transform 120ms cubic-bezier(0, 0, .2, 1),-webkit-transform 120ms cubic-bezier(0, 0, .2, 1)}.forge-popup::-webkit-scrollbar{width:16px;width:var(--forge-scrollbar-width,16px);height:16px;height:var(--forge-scrollbar-height,16px)}.forge-popup::-webkit-scrollbar-corner{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-popup::-webkit-scrollbar-track{background-color:#f0f0f0;background-color:var(--forge-theme-scrollbar-track,#f0f0f0)}.forge-popup::-webkit-scrollbar-track:hover{background-color:#ececec;background-color:var(--forge-theme-scrollbar-track-hover,#ececec)}.forge-popup::-webkit-scrollbar-thumb{background-color:#bdbdbd;background-color:var(--forge-theme-scrollbar-thumb,#bdbdbd);height:32px;height:var(--forge-scrollbar-min-height,32px);width:32px;width:var(--forge-scrollbar-min-width,32px);border-radius:10px;border-radius:var(--forge-scrollbar-border-radius,10px);border-width:3px;border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-clip:content-box}.forge-popup::-webkit-scrollbar-thumb:hover{background-color:#9e9e9e;background-color:var(--forge-theme-scrollbar-thumb-hover,#9e9e9e)}.forge-popup--opening{display:block;-webkit-transform:scale(.8);transform:scale(.8);opacity:0}.forge-popup--closed{display:block;opacity:0;-webkit-transition:opacity 120ms linear;transition:opacity 120ms linear}.forge-popup--open{display:block;-webkit-transform:scale(1);transform:scale(1);opacity:1}.forge-popup--select{border-top-left-radius:0;border-top-right-radius:0;max-height:256px;overflow-y:auto}:host{z-index:10;z-index:var(--forge-z-index-popup,10);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;position:absolute;overflow:visible}:host([hidden]){display:none}';
+let PopupComponent = class PopupComponent extends BaseComponent {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new PopupFoundation(new PopupAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            POPUP_CONSTANTS.attributes.OPEN,
+            POPUP_CONSTANTS.attributes.PLACEMENT,
+            POPUP_CONSTANTS.attributes.MANAGE_FOCUS,
+            POPUP_CONSTANTS.attributes.ANIMATION_TYPE,
+            POPUP_CONSTANTS.attributes.STATIC,
+            POPUP_CONSTANTS.attributes.HIDE_WHEN_CLIPPED
+        ];
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case POPUP_CONSTANTS.attributes.OPEN:
+                this.open = isDefined(newValue);
+                break;
+            case POPUP_CONSTANTS.attributes.PLACEMENT:
+                this.placement = newValue;
+                break;
+            case POPUP_CONSTANTS.attributes.MANAGE_FOCUS:
+                this.manageFocus = coerceBoolean(newValue);
+                break;
+            case POPUP_CONSTANTS.attributes.ANIMATION_TYPE:
+                this.animationType = newValue;
+                break;
+            case POPUP_CONSTANTS.attributes.STATIC:
+                this.static = coerceBoolean(newValue);
+                break;
+            case POPUP_CONSTANTS.attributes.HIDE_WHEN_CLIPPED:
+                this.hideWhenClipped = coerceBoolean(newValue);
+                break;
+        }
+    }
+    position() {
+        this._foundation.position();
+    }
+};
+__decorate([
+    FoundationProperty()
+], PopupComponent.prototype, "targetElement", void 0);
+__decorate([
+    FoundationProperty()
+], PopupComponent.prototype, "placement", void 0);
+__decorate([
+    FoundationProperty()
+], PopupComponent.prototype, "open", void 0);
+__decorate([
+    FoundationProperty()
+], PopupComponent.prototype, "manageFocus", void 0);
+__decorate([
+    FoundationProperty()
+], PopupComponent.prototype, "animationType", void 0);
+__decorate([
+    FoundationProperty()
+], PopupComponent.prototype, "static", void 0);
+__decorate([
+    FoundationProperty()
+], PopupComponent.prototype, "hideWhenClipped", void 0);
+__decorate([
+    FoundationProperty()
+], PopupComponent.prototype, "openCallback", void 0);
+__decorate([
+    FoundationProperty()
+], PopupComponent.prototype, "closeCallback", void 0);
+__decorate([
+    FoundationProperty()
+], PopupComponent.prototype, "offset", void 0);
+PopupComponent = __decorate([
+    CustomElement({
+        name: POPUP_CONSTANTS.elementName
+    })
+], PopupComponent);
+export { PopupComponent };

package/esm/product-icon/index.d.ts

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

package/esm/product-icon/index.js

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

package/esm/product-icon/product-icon-adapter.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { IProductIconComponent } from './product-icon';
+export interface IProductIconAdapter extends IBaseAdapter {
+    setBackgroundColor(color: string): void;
+    setIconColor(color: string): void;
+    setElementSize(value: number): void;
+    setFontSize(value: number): void;
+    setTextShadow(hasShadow: boolean, iterations: number, shadowColor: string): void;
+    removeIconClass(classes: string | string[]): void;
+}
+export declare class ProductIconAdapter extends BaseAdapter<IProductIconComponent> implements IProductIconAdapter {
+    private _backgroundElement;
+    private _iconElement;
+    private _textElement;
+    constructor(component: IProductIconComponent);
+    setBackgroundColor(color: string): void;
+    setIconColor(color: string): void;
+    setElementSize(value: number): void;
+    setFontSize(value: number): void;
+    removeIconClass(classes: string | string[]): void;
+    setTextShadow(hasShadow: boolean, iterations: number, shadowColor: string): void;
+}

package/esm/product-icon/product-icon-adapter.js

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { generateTextShadow, getShadowElement, removeClass } from '@tylertech/forge-core';
+import { BaseAdapter } from '../core/base/base-adapter';
+import { PRODUCT_ICON_CONSTANTS } from './product-icon-constants';
+export class ProductIconAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._backgroundElement = getShadowElement(component, PRODUCT_ICON_CONSTANTS.selectors.PRODUCT_ICON_BACKGROUND);
+        this._iconElement = getShadowElement(component, PRODUCT_ICON_CONSTANTS.selectors.PRODUCT_ICON);
+        this._textElement = getShadowElement(component, PRODUCT_ICON_CONSTANTS.selectors.PRODUCT_TEXT);
+    }
+    setBackgroundColor(color) {
+        this._backgroundElement.style.backgroundColor = color;
+    }
+    setIconColor(color) {
+        this._iconElement.style.color = color;
+        this._textElement.style.color = color;
+    }
+    setElementSize(value) {
+        this._backgroundElement.style.height = `${value}px`;
+        this._backgroundElement.style.width = `${value}px`;
+    }
+    setFontSize(value) {
+        const textFontSize = value * PRODUCT_ICON_CONSTANTS.numbers.TEXT_FONT_SIZE_MODIFIER;
+        const iconFontSize = value * PRODUCT_ICON_CONSTANTS.numbers.ICON_FONT_SIZE_MODIFIER;
+        this._iconElement.style.setProperty('--forge-product-icon-font-size', `${iconFontSize}px`);
+        this._textElement.style.setProperty('--forge-product-icon-font-size', `${textFontSize}px`);
+        this._iconElement.style.fontSize = `var(--forge-product-icon-font-size, ${iconFontSize}px)`;
+        this._textElement.style.fontSize = `var(--forge-product-icon-font-size, ${textFontSize}px)`;
+    }
+    removeIconClass(classes) {
+        removeClass(classes, this._iconElement);
+        removeClass(classes, this._textElement);
+    }
+    setTextShadow(hasShadow, iterations, shadowColor) {
+        if (hasShadow) {
+            const shadow = generateTextShadow(iterations, shadowColor);
+            this._iconElement.style.textShadow = shadow;
+            this._textElement.style.textShadow = shadow;
+        }
+        else {
+            this._iconElement.style.removeProperty('text-shadow');
+            this._textElement.style.removeProperty('text-shadow');
+        }
+    }
+}

package/esm/product-icon/product-icon-constants.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const PRODUCT_ICON_CONSTANTS: {
+    elementName: "forge-product-icon";
+    attributes: {
+        COLOR: string;
+        SIZE: string;
+        SHADOW: string;
+        ITERATIONS: string;
+    };
+    classes: {
+        PRODUCT_ICON_BACKGROUND: string;
+        PRODUCT_ICON: string;
+        PRODUCT_TEXT: string;
+    };
+    selectors: {
+        PRODUCT_ICON_BACKGROUND: string;
+        PRODUCT_ICON: string;
+        PRODUCT_TEXT: string;
+        SLOT: string;
+    };
+    numbers: {
+        DEFAULT_SIZE: number;
+        DEFAULT_ITERATIONS: number;
+        ACCESSIBILITY_COLOR_THRESHOLD: number;
+        ICON_FONT_SIZE_MODIFIER: number;
+        TEXT_FONT_SIZE_MODIFIER: number;
+    };
+    strings: {
+        DEFAULT_COLOR_VALUE: string;
+        DEFAULT_COLOR_PALETTE: string;
+        DEFAULT_COLOR_SHADE: number;
+        DEFAULT_BACKGROUND_COLOR: string;
+    };
+};

package/esm/product-icon/product-icon-constants.js

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+import { COLOR_CONSTANTS } from '../theme/color-constants';
+const elementName = `${COMPONENT_NAME_PREFIX}product-icon`;
+const classes = {
+    PRODUCT_ICON_BACKGROUND: 'forge-product-icon__background',
+    PRODUCT_ICON: 'forge-product-icon__icon',
+    PRODUCT_TEXT: 'forge-product-icon__text'
+};
+const selectors = {
+    PRODUCT_ICON_BACKGROUND: `.${classes.PRODUCT_ICON_BACKGROUND}`,
+    PRODUCT_ICON: `.${classes.PRODUCT_ICON}`,
+    PRODUCT_TEXT: `.${classes.PRODUCT_TEXT}`,
+    SLOT: 'slot'
+};
+const attributes = {
+    COLOR: 'color',
+    SIZE: 'size',
+    SHADOW: 'shadow',
+    ITERATIONS: 'iterations'
+};
+const numbers = {
+    DEFAULT_SIZE: 64,
+    DEFAULT_ITERATIONS: 32,
+    ACCESSIBILITY_COLOR_THRESHOLD: 300,
+    ICON_FONT_SIZE_MODIFIER: 0.75,
+    TEXT_FONT_SIZE_MODIFIER: 0.5
+};
+const strings = {
+    DEFAULT_COLOR_VALUE: 'indigo-500',
+    DEFAULT_COLOR_PALETTE: 'indigo',
+    DEFAULT_COLOR_SHADE: 500,
+    DEFAULT_BACKGROUND_COLOR: COLOR_CONSTANTS.indigoPalette[500]
+};
+export const PRODUCT_ICON_CONSTANTS = {
+    elementName,
+    attributes,
+    classes,
+    selectors,
+    numbers,
+    strings
+};

package/esm/product-icon/product-icon-foundation.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IProductIconAdapter } from './product-icon-adapter';
+export interface IProductIconFoundation extends ICustomElementFoundation {
+    color: string;
+    size: number;
+    shadow: boolean;
+    iterations: number;
+}
+export declare class ProductIconFoundation implements IProductIconFoundation {
+    private _adapter;
+    private _colorValue;
+    private _colorPalette;
+    private _colorShade;
+    private _size;
+    private _shadow;
+    private _backgroundColor;
+    private _shadowColor;
+    private _iterations;
+    private _usingCustomIterations;
+    constructor(_adapter: IProductIconAdapter);
+    initialize(): void;
+    private _parseColor;
+    private _updateSize;
+    private _updateFontSize;
+    private _updateShadow;
+    private _render;
+    get color(): string;
+    set color(value: string);
+    get size(): number;
+    set size(value: number);
+    get shadow(): boolean;
+    set shadow(value: boolean);
+    get iterations(): number;
+    set iterations(value: number);
+}

package/esm/product-icon/product-icon-foundation.js

@@ -0,0 +1,116 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { coerceNumber } from '@tylertech/forge-core';
+import { COLOR_CONSTANTS } from '../theme';
+import { PRODUCT_ICON_CONSTANTS } from './product-icon-constants';
+export class ProductIconFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._colorValue = PRODUCT_ICON_CONSTANTS.strings.DEFAULT_COLOR_VALUE;
+        this._colorPalette = PRODUCT_ICON_CONSTANTS.strings.DEFAULT_COLOR_PALETTE;
+        this._colorShade = PRODUCT_ICON_CONSTANTS.strings.DEFAULT_COLOR_SHADE;
+        this._size = PRODUCT_ICON_CONSTANTS.numbers.DEFAULT_SIZE;
+        this._shadow = true;
+        this._backgroundColor = PRODUCT_ICON_CONSTANTS.strings.DEFAULT_BACKGROUND_COLOR;
+        this._iterations = PRODUCT_ICON_CONSTANTS.numbers.DEFAULT_ITERATIONS;
+        this._usingCustomIterations = false;
+    }
+    initialize() {
+        this._adapter.setElementSize(this._size);
+        this._updateFontSize();
+        this._parseColor();
+        this._render();
+    }
+    _parseColor() {
+        if (this._colorValue.includes('-')) {
+            this._colorPalette = this._colorValue.split('-')[0];
+            this._colorShade = coerceNumber(this._colorValue.split('-')[1]);
+        }
+        else {
+            this._colorPalette = this._colorValue;
+            this._colorShade = PRODUCT_ICON_CONSTANTS.strings.DEFAULT_COLOR_SHADE;
+        }
+    }
+    _updateSize() {
+        this._adapter.setElementSize(this._size);
+        // If not using a custom iteration value, then we need to adjust the shadow length
+        if (!this._usingCustomIterations) {
+            this._iterations = this._size / 2;
+            this._updateShadow();
+        }
+    }
+    _updateFontSize() {
+        this._adapter.setFontSize(this._size);
+    }
+    _updateShadow() {
+        if (this._shadow) {
+            this._adapter.setTextShadow(this._shadow, this._iterations, this._shadowColor);
+        }
+    }
+    _render() {
+        if (!this._colorValue) {
+            return;
+        }
+        const iconColor = this._colorShade <= PRODUCT_ICON_CONSTANTS.numbers.ACCESSIBILITY_COLOR_THRESHOLD ? '#000000' : '#ffffff';
+        const shadowIncrement = this._colorShade + 300;
+        if (!COLOR_CONSTANTS[`${this._colorPalette}Palette`]) {
+            this._colorPalette = PRODUCT_ICON_CONSTANTS.strings.DEFAULT_COLOR_PALETTE;
+        }
+        this._backgroundColor = COLOR_CONSTANTS[`${this._colorPalette}Palette`][this._colorShade];
+        this._shadowColor = COLOR_CONSTANTS[`${this._colorPalette}Palette`][shadowIncrement];
+        this._adapter.setBackgroundColor(this._backgroundColor);
+        this._adapter.setIconColor(iconColor);
+        this._updateShadow();
+    }
+    get color() {
+        return this._colorValue;
+    }
+    set color(value) {
+        if (this._colorValue !== value) {
+            this._colorValue = value;
+            this._parseColor();
+            this._render();
+            this._adapter.setHostAttribute(PRODUCT_ICON_CONSTANTS.attributes.COLOR, this._colorValue);
+        }
+    }
+    get size() {
+        return this._size;
+    }
+    set size(value) {
+        if (this._size !== value) {
+            this._size = value;
+            this._updateSize();
+            this._updateFontSize();
+            this._adapter.setHostAttribute(PRODUCT_ICON_CONSTANTS.attributes.SIZE, this._size.toString());
+        }
+    }
+    get shadow() {
+        return this._shadow;
+    }
+    set shadow(value) {
+        if (this._shadow !== value) {
+            this._shadow = value;
+            this._adapter.setTextShadow(this._shadow, this._iterations, this._shadowColor);
+            if (this._shadow) {
+                this._adapter.setHostAttribute(PRODUCT_ICON_CONSTANTS.attributes.SHADOW, '');
+            }
+            else {
+                this._adapter.removeIconClass(PRODUCT_ICON_CONSTANTS.attributes.SHADOW);
+            }
+        }
+    }
+    get iterations() {
+        return this._iterations;
+    }
+    set iterations(value) {
+        if (this._iterations !== value) {
+            this._usingCustomIterations = true;
+            this._iterations = value;
+            this._updateShadow();
+            this._adapter.setHostAttribute(PRODUCT_ICON_CONSTANTS.attributes.ITERATIONS, this._iterations.toString());
+        }
+    }
+}

package/esm/product-icon/product-icon.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+export interface IProductIconComponent extends IBaseComponent {
+    color: string;
+    size: number;
+    shadow: boolean;
+    iterations: number;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-product-icon': IProductIconComponent;
+    }
+}
+export declare class ProductIconComponent extends BaseComponent implements IProductIconComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** The color of the container element from the material color palette. */
+    color: string;
+    /** Controls the height and width of the container element. */
+    size: number;
+    /** Controls the visibility of the text shadow. */
+    shadow: boolean;
+    /** The number of iterations to apply the text shadow. */
+    iterations: number;
+}

package/esm/product-icon/product-icon.js

@@ -0,0 +1,65 @@
+/**
+ * @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 { ProductIconAdapter } from './product-icon-adapter';
+import { ProductIconFoundation } from './product-icon-foundation';
+import { PRODUCT_ICON_CONSTANTS } from './product-icon-constants';
+import { BaseComponent } from '../core/base/base-component';
+const template = '<template><div class=\"forge-product-icon__background\" part=\"root\"><div class=\"forge-product-icon__container\" part=\"container\"><span class=\"forge-product-icon__icon\" part=\"icon-container\"><slot></slot></span><span class=\"forge-product-icon__text\" part=\"text-container\"><slot name=\"text\"></slot></span></div></div></template>';
+const styles = '.forge-product-icon__background{border-radius:50%;border-radius:var(--forge-product-icon-border-radius,50%);height:64px;width:64px;overflow:hidden}.forge-product-icon__container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;height:100%;width:100%}.forge-product-icon__icon ::slotted(*),.forge-product-icon__text ::slotted(*){display:-webkit-box!important;display:flex!important;color:#fff!important;font-size:var(--forge-product-icon-font-size, 48px)!important}:host{display:inline-block}:host([hidden]){display:none}';
+let ProductIconComponent = class ProductIconComponent extends BaseComponent {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ProductIconFoundation(new ProductIconAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            PRODUCT_ICON_CONSTANTS.attributes.COLOR,
+            PRODUCT_ICON_CONSTANTS.attributes.SIZE,
+            PRODUCT_ICON_CONSTANTS.attributes.SHADOW,
+            PRODUCT_ICON_CONSTANTS.attributes.ITERATIONS
+        ];
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case PRODUCT_ICON_CONSTANTS.attributes.COLOR:
+                this.color = newValue;
+                break;
+            case PRODUCT_ICON_CONSTANTS.attributes.SIZE:
+                this.size = coerceNumber(newValue);
+                break;
+            case PRODUCT_ICON_CONSTANTS.attributes.SHADOW:
+                this.shadow = coerceBoolean(newValue);
+                break;
+            case PRODUCT_ICON_CONSTANTS.attributes.ITERATIONS:
+                this.iterations = coerceNumber(newValue);
+                break;
+        }
+    }
+};
+__decorate([
+    FoundationProperty()
+], ProductIconComponent.prototype, "color", void 0);
+__decorate([
+    FoundationProperty()
+], ProductIconComponent.prototype, "size", void 0);
+__decorate([
+    FoundationProperty()
+], ProductIconComponent.prototype, "shadow", void 0);
+__decorate([
+    FoundationProperty()
+], ProductIconComponent.prototype, "iterations", void 0);
+ProductIconComponent = __decorate([
+    CustomElement({
+        name: PRODUCT_ICON_CONSTANTS.elementName
+    })
+], ProductIconComponent);
+export { ProductIconComponent };

package/esm/profile-card/index.d.ts

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

package/esm/profile-card/index.js

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

package/esm/profile-card/profile-card-adapter.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { IProfileCardComponent } from './profile-card';
+export interface IProfileCardAdapter extends IBaseAdapter {
+    setFullName(value: string): void;
+    setEmail(value: string): void;
+    setAvatarText(value: string): void;
+    setAvatarImageUrl(value: string): void;
+    setAvatarLetterCount(count: number): void;
+    setActionToolbarVisibility(isVisible: boolean): void;
+    setProfileButtonVisibility(isVisible: boolean): void;
+    setSignOutButtonVisibility(isVisible: boolean): void;
+    setProfileButtonListener(listener: (evt: Event) => void): void;
+    setSignOutButtonListener(listener: (evt: Event) => void): void;
+    removeProfileButtonListener(listener: (evt: Event) => void): void;
+    removeSignOutButtonListener(listener: (evt: Event) => void): void;
+    requestProfileButtonFocus(): void;
+    requestSignOutButtonFocus(): void;
+}
+export declare class ProfileCardAdapter extends BaseAdapter<IProfileCardComponent> implements IProfileCardAdapter {
+    private _fullNameElement;
+    private _emailElement;
+    private _avatarElement;
+    private _actionToolbar;
+    private _profileButton;
+    private _signOutButton;
+    constructor(component: IProfileCardComponent);
+    setFullName(value: string): void;
+    setEmail(value: string): void;
+    setAvatarText(value: string): void;
+    setAvatarImageUrl(value: string): void;
+    setAvatarLetterCount(count: number): void;
+    setActionToolbarVisibility(isVisible: boolean): void;
+    setProfileButtonVisibility(isVisible: boolean): void;
+    setSignOutButtonVisibility(isVisible: boolean): void;
+    setProfileButtonListener(listener: (evt: Event) => void): void;
+    setSignOutButtonListener(listener: (evt: Event) => void): void;
+    removeProfileButtonListener(listener: (evt: Event) => void): void;
+    removeSignOutButtonListener(listener: (evt: Event) => void): void;
+    requestProfileButtonFocus(): void;
+    requestSignOutButtonFocus(): void;
+}