@tylertech/forge 3.0.0-next.13 → 3.0.0-next.15

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

@@ -5,7 +5,7 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IPaginatorAdapter } from './paginator-adapter';
-import { PaginatorAlternativeAlignment } from './paginator-constants';
+import { PaginatorAlternativeAlignment, PaginatorRangeLabelBuilder } from './paginator-constants';
 export interface IPaginatorFoundation extends ICustomElementFoundation {
     pageIndex: number;
     pageSize: number;
@@ -13,6 +13,7 @@ export interface IPaginatorFoundation extends ICustomElementFoundation {
     total: number;
     pageSizeOptions: number[] | boolean;
     pageSizeLabel: string;
+    rangeLabelCallback: PaginatorRangeLabelBuilder;
     focus(options?: FocusOptions): void;
 }
 export declare class PaginatorFoundation {
@@ -28,7 +29,7 @@ export declare class PaginatorFoundation {
     private _disabled;
     private _alternative;
     private _alignment;
-    private _rangeLabel;
+    private _rangeLabelCallback;
     private _firstPageListener;
     private _previousPageListener;
     private _nextPageListener;
@@ -84,4 +85,6 @@ export declare class PaginatorFoundation {
     set alternative(value: boolean);
     get alignment(): PaginatorAlternativeAlignment;
     set alignment(value: PaginatorAlternativeAlignment);
+    get rangeLabelCallback(): PaginatorRangeLabelBuilder;
+    set rangeLabelCallback(value: PaginatorRangeLabelBuilder);
 }

package/esm/paginator/paginator-foundation.js

@@ -118,17 +118,31 @@ export class PaginatorFoundation {
         return Math.ceil(this._total / this._pageSize) - 1;
     }
     _updateRangeLabel() {
-        if (this.pageSize > 1) {
-            const startIndex = this._pageIndex * this._pageSize;
-            const indexStart = Math.floor(startIndex / this._pageSize) || 0;
-            const pageStart = (indexStart * this._pageSize) + 1;
-            const pageEnd = startIndex < this._total ? Math.min(startIndex + this._pageSize, this._total) : startIndex + this._pageSize;
-            this._rangeLabel = `${pageStart}-${pageEnd} ${PAGINATOR_CONSTANTS.strings.RANGE_SEPARATOR_LABEL} ${this._total}`;
+        let rangeLabel;
+        if (typeof this._rangeLabelCallback === 'function') {
+            const state = {
+                pageSize: this._pageSize,
+                pageIndex: this._pageIndex,
+                offset: this._offset,
+                pageStart: (this._pageIndex * this._pageSize) + 1,
+                pageEnd: Math.min((this._pageIndex + 1) * this._pageSize, this._total),
+                total: this._total
+            };
+            rangeLabel = this._rangeLabelCallback.call(null, state);
         }
         else {
-            this._rangeLabel = `${this._pageIndex + 1} ${PAGINATOR_CONSTANTS.strings.RANGE_SEPARATOR_LABEL} ${this._total}`;
+            if (this.pageSize > 1) {
+                const startIndex = this._pageIndex * this._pageSize;
+                const indexStart = Math.floor(startIndex / this._pageSize) || 0;
+                const pageStart = (indexStart * this._pageSize) + 1;
+                const pageEnd = startIndex < this._total ? Math.min(startIndex + this._pageSize, this._total) : startIndex + this._pageSize;
+                rangeLabel = `${pageStart}-${pageEnd} ${PAGINATOR_CONSTANTS.strings.RANGE_SEPARATOR_LABEL} ${this._total}`;
+            }
+            else {
+                rangeLabel = `${this._pageIndex + 1} ${PAGINATOR_CONSTANTS.strings.RANGE_SEPARATOR_LABEL} ${this._total}`;
+            }
         }
-        this._adapter.setRangeLabel(this._rangeLabel);
+        this._adapter.setRangeLabel(rangeLabel);
     }
     _syncInteractionState() {
         this._adapter.enableFirstPageButton();
@@ -379,4 +393,11 @@ export class PaginatorFoundation {
             this._applyAlternativeAlignment();
         }
     }
+    get rangeLabelCallback() {
+        return this._rangeLabelCallback;
+    }
+    set rangeLabelCallback(value) {
+        this._rangeLabelCallback = value;
+        this._updateRangeLabel();
+    }
 }

package/esm/paginator/paginator.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { PaginatorAlternativeAlignment, IPaginatorChangeEvent } from './paginator-constants';
+import { PaginatorAlternativeAlignment, IPaginatorChangeEvent, PaginatorRangeLabelBuilder } from './paginator-constants';
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
 export interface IPaginatorComponent extends IBaseComponent {
     pageIndex: number;
@@ -17,6 +17,7 @@ export interface IPaginatorComponent extends IBaseComponent {
     disabled: boolean;
     alternative: boolean;
     alignment: PaginatorAlternativeAlignment;
+    rangeLabelCallback: PaginatorRangeLabelBuilder;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -56,5 +57,6 @@ export declare class PaginatorComponent extends BaseComponent implements IPagina
     disabled: boolean;
     alternative: boolean;
     alignment: PaginatorAlternativeAlignment;
+    rangeLabelCallback: PaginatorRangeLabelBuilder;
     focus(options?: FocusOptions): void;
 }

package/esm/paginator/paginator.js

@@ -126,6 +126,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], PaginatorComponent.prototype, "alignment", void 0);
+__decorate([
+    FoundationProperty()
+], PaginatorComponent.prototype, "rangeLabelCallback", void 0);
 PaginatorComponent = __decorate([
     CustomElement({
         name: PAGINATOR_CONSTANTS.elementName,

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

@@ -3,6 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { ExperimentalFocusOptions } from '../constants';
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
 import { IProfileCardComponent } from './profile-card';
 export interface IProfileCardAdapter extends IBaseAdapter {
@@ -19,10 +20,8 @@ export interface IProfileCardAdapter extends IBaseAdapter {
     setProfileButtonText(value: string): 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;
+    requestProfileButtonFocus(options?: ExperimentalFocusOptions): void;
+    requestSignOutButtonFocus(options?: ExperimentalFocusOptions): void;
 }
 export declare class ProfileCardAdapter extends BaseAdapter<IProfileCardComponent> implements IProfileCardAdapter {
     private _fullNameElement;
@@ -45,8 +44,6 @@ export declare class ProfileCardAdapter extends BaseAdapter<IProfileCardComponen
     setProfileButtonText(value: string): 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;
+    requestProfileButtonFocus(options?: ExperimentalFocusOptions): void;
+    requestSignOutButtonFocus(options?: ExperimentalFocusOptions): void;
 }

package/esm/profile-card/profile-card-adapter.js

@@ -18,17 +18,14 @@ export class ProfileCardAdapter extends BaseAdapter {
         this._signOutButton = getShadowElement(component, PROFILE_CARD_CONSTANTS.selectors.SIGN_OUT_BUTTON);
     }
     setFullName(value) {
-        this._component.setAttribute(PROFILE_CARD_CONSTANTS.attributes.FULL_NAME, value);
         this._fullNameElement.textContent = value;
     }
     setEmail(value) {
-        this._component.setAttribute(PROFILE_CARD_CONSTANTS.attributes.EMAIL, value);
         this._emailElement.textContent = value;
     }
     setAvatarText(value) {
-        this._component.setAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_TEXT, value);
-        this._avatarElement.text = value;
         removeAllChildren(this._avatarElement);
+        this._avatarElement.text = value;
     }
     setAvatarIcon(value) {
         if (value) {
@@ -40,11 +37,9 @@ export class ProfileCardAdapter extends BaseAdapter {
         }
     }
     setAvatarImageUrl(value) {
-        this._component.setAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_IMAGE_URL, value);
         this._avatarElement.imageUrl = value;
     }
     setAvatarLetterCount(count) {
-        this._component.setAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_LETTER_COUNT, String(count));
         this._avatarElement.letterCount = count;
     }
     setActionToolbarVisibility(isVisible) {
@@ -83,16 +78,10 @@ export class ProfileCardAdapter extends BaseAdapter {
     setSignOutButtonListener(listener) {
         this._signOutButton.addEventListener('click', listener);
     }
-    removeProfileButtonListener(listener) {
-        this._profileButton.removeEventListener('click', listener);
-    }
-    removeSignOutButtonListener(listener) {
-        this._signOutButton.removeEventListener('click', listener);
-    }
-    requestProfileButtonFocus() {
-        window.requestAnimationFrame(() => this._profileButton.focus());
+    requestProfileButtonFocus(options) {
+        window.requestAnimationFrame(() => this._profileButton.focus(options));
     }
-    requestSignOutButtonFocus() {
-        window.requestAnimationFrame(() => this._signOutButton.focus());
+    requestSignOutButtonFocus(options) {
+        window.requestAnimationFrame(() => this._signOutButton.focus(options));
     }
 }

package/esm/profile-card/profile-card-constants.js

@@ -18,9 +18,9 @@ const attributes = {
     AVATAR_LETTER_COUNT: 'avatar-letter-count'
 };
 const selectors = {
-    FULL_NAME: '.forge-profile-card__full-name',
-    EMAIL: '.forge-profile-card__email',
-    AVATAR: '.forge-profile-card__info-avatar > forge-avatar',
+    FULL_NAME: '.full-name',
+    EMAIL: '.email',
+    AVATAR: '.avatar > forge-avatar',
     ACTION_TOOLBAR: '#action-toolbar',
     PROFILE_BUTTON: '#profile-button',
     SIGN_OUT_BUTTON: '#sign-out-button'

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

@@ -10,10 +10,13 @@ export interface IProfileCardFoundation extends ICustomElementFoundation {
     email: string;
     signOut: boolean;
     profile: boolean;
+    signOutText: string;
+    profileText: string;
     avatarText: string;
     avatarIcon: string;
     avatarImageUrl: string;
     avatarLetterCount: number;
+    focus(options?: FocusOptions): void;
 }
 export declare class ProfileCardFoundation implements IProfileCardFoundation {
     private _adapter;
@@ -31,7 +34,7 @@ export declare class ProfileCardFoundation implements IProfileCardFoundation {
     private _signOutListener;
     constructor(_adapter: IProfileCardAdapter);
     initialize(): void;
-    private _requestInitialFocus;
+    focus(options?: FocusOptions): void;
     private _setActionVisibility;
     private _onProfileButtonClick;
     private _onSignOutButtonClick;

package/esm/profile-card/profile-card-foundation.js

@@ -17,19 +17,13 @@ export class ProfileCardFoundation {
     initialize() {
         this._adapter.setProfileButtonListener(this._profileListener);
         this._adapter.setSignOutButtonListener(this._signOutListener);
-        if (this._showSignOutButton || this._showProfileButton) {
-            this._requestInitialFocus();
-        }
-        this._setActionVisibility();
-        this._adapter.setSignOutButtonText(this._signOutButtonText);
-        this._adapter.setProfileButtonText(this._profileButtonText);
     }
-    _requestInitialFocus() {
+    focus(options) {
         if (this._showSignOutButton) {
-            this._adapter.requestSignOutButtonFocus();
+            this._adapter.requestSignOutButtonFocus(Object.assign(Object.assign({}, options), { focusVisible: true }));
         }
         else if (this._showProfileButton) {
-            this._adapter.requestProfileButtonFocus();
+            this._adapter.requestProfileButtonFocus(Object.assign(Object.assign({}, options), { focusVisible: true }));
         }
     }
     _setActionVisibility() {
@@ -51,8 +45,12 @@ export class ProfileCardFoundation {
     }
     set fullName(value) {
         if (this._fullName !== value) {
-            this._fullName = value;
+            this._fullName = value !== null && value !== void 0 ? value : '';
             this._adapter.setFullName(this._fullName);
+            if (!this._avatarText) {
+                this._adapter.setAvatarText(this._fullName);
+            }
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.FULL_NAME, !!this._fullName, this._fullName);
         }
     }
     get email() {
@@ -60,8 +58,9 @@ export class ProfileCardFoundation {
     }
     set email(value) {
         if (this._email !== value) {
-            this._email = value;
+            this._email = value !== null && value !== void 0 ? value : '';
             this._adapter.setEmail(this._email);
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.EMAIL, !!this._email, this._email);
         }
     }
     get avatarText() {
@@ -69,8 +68,9 @@ export class ProfileCardFoundation {
     }
     set avatarText(value) {
         if (this._avatarText !== value) {
-            this._avatarText = value;
+            this._avatarText = value !== null && value !== void 0 ? value : '';
             this._adapter.setAvatarText(this._avatarText);
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_TEXT, !!this._avatarText, this._avatarText);
         }
     }
     get avatarIcon() {
@@ -78,8 +78,9 @@ export class ProfileCardFoundation {
     }
     set avatarIcon(value) {
         if (this._avatarIcon !== value) {
-            this._avatarIcon = value;
+            this._avatarIcon = value !== null && value !== void 0 ? value : '';
             this._adapter.setAvatarIcon(this._avatarIcon);
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_ICON, !!this._avatarIcon, this._avatarIcon);
         }
     }
     get avatarImageUrl() {
@@ -89,6 +90,7 @@ export class ProfileCardFoundation {
         if (this._avatarImageUrl !== value) {
             this._avatarImageUrl = value;
             this._adapter.setAvatarImageUrl(this._avatarImageUrl);
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_IMAGE_URL, !!this._avatarImageUrl, this._avatarImageUrl);
         }
     }
     get avatarLetterCount() {
@@ -98,24 +100,29 @@ export class ProfileCardFoundation {
         if (this._avatarLetterCount !== value) {
             this._avatarLetterCount = value;
             this._adapter.setAvatarLetterCount(this._avatarLetterCount);
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.AVATAR_LETTER_COUNT, !!this._avatarLetterCount, `${this._avatarLetterCount}`);
         }
     }
     get signOut() {
         return this._showSignOutButton;
     }
     set signOut(value) {
+        value = Boolean(value);
         if (this._showSignOutButton !== value) {
             this._showSignOutButton = value;
             this._setActionVisibility();
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.SIGN_OUT, this._showSignOutButton);
         }
     }
     get profile() {
         return this._showProfileButton;
     }
     set profile(value) {
+        value = Boolean(value);
         if (this._showProfileButton !== value) {
             this._showProfileButton = value;
             this._setActionVisibility();
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.PROFILE, this._showProfileButton);
         }
     }
     get signOutText() {
@@ -125,6 +132,8 @@ export class ProfileCardFoundation {
         if (this._signOutButtonText !== value) {
             this._signOutButtonText = value || PROFILE_CARD_CONSTANTS.defaults.SIGN_OUT_BUTTON_TEXT;
             this._adapter.setSignOutButtonText(this._signOutButtonText);
+            const hasSignOutTextAttr = this._signOutButtonText !== PROFILE_CARD_CONSTANTS.defaults.SIGN_OUT_BUTTON_TEXT;
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.SIGN_OUT_TEXT, hasSignOutTextAttr, this._signOutButtonText);
         }
     }
     get profileText() {
@@ -134,6 +143,8 @@ export class ProfileCardFoundation {
         if (this._profileButtonText !== value) {
             this._profileButtonText = value || PROFILE_CARD_CONSTANTS.defaults.PROFILE_BUTTON_TEXT;
             this._adapter.setProfileButtonText(this._profileButtonText);
+            const hasProfileAttr = value !== PROFILE_CARD_CONSTANTS.defaults.PROFILE_BUTTON_TEXT;
+            this._adapter.toggleHostAttribute(PROFILE_CARD_CONSTANTS.attributes.PROFILE_TEXT, hasProfileAttr, this._profileButtonText);
         }
     }
 }

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

@@ -26,8 +26,6 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-profile-card>` custom element.
- *
  * @tag forge-profile-card
  */
 export declare class ProfileCardComponent extends BaseComponent implements IProfileCardComponent {
@@ -46,4 +44,5 @@ export declare class ProfileCardComponent extends BaseComponent implements IProf
     avatarIcon: string;
     avatarImageUrl: string;
     avatarLetterCount: number;
+    focus(options?: FocusOptions): void;
 }

package/esm/profile-card/profile-card.js

@@ -10,13 +10,12 @@ import { ProfileCardFoundation } from './profile-card-foundation';
 import { PROFILE_CARD_CONSTANTS } from './profile-card-constants';
 import { ButtonComponent } from '../button';
 import { AvatarComponent } from '../avatar';
+import { IconComponent } from '../icon/icon';
 import { ToolbarComponent } from '../toolbar';
 import { BaseComponent } from '../core/base/base-component';
-const template = '<template><div class=\"forge-profile-card\" part=\"root\"><div class=\"forge-profile-card__info\" part=\"info-container\"><div class=\"forge-profile-card__info-avatar\" part=\"avatar-container\"><forge-avatar part=\"avatar\"></forge-avatar></div><div class=\"forge-profile-card__info-text\" part=\"info-text\"><div class=\"forge-profile-card__full-name\" part=\"name\"></div><div class=\"forge-profile-card__email\" part=\"email\"></div></div></div><slot></slot><forge-toolbar inverted id=\"action-toolbar\" part=\"footer\"><forge-button variant=\"outlined\" slot=\"end\" style=\"margin-right: 8px;\" part=\"profile-button\" aria-label=\"View profile\" id=\"profile-button\">Profile</forge-button><forge-button slot=\"end\" part=\"sign-out-button\" id=\"sign-out-button\" aria-label=\"Sign out\">Sign out</forge-button></forge-toolbar></div></template>';
-const styles = '@-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}}.mdc-ripple-surface{--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;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::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)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.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}.mdc-ripple-surface.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))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.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%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-profile-card{min-width:360px;border-radius:4px}@media (max-width:399px){.forge-profile-card{width:100vw;min-width:unset;overflow:auto}}.forge-profile-card__info{padding:8px 16px;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.forge-profile-card__info-avatar{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding:8px;margin-right:16px;--forge-avatar-size:56px}.forge-profile-card__info-text{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:start;align-items:flex-start}.forge-profile-card__full-name{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:1rem;font-size:var(--forge-typography-subtitle1-secondary-font-size, 1rem);line-height:1.75rem;line-height:var(--forge-typography-subtitle1-secondary-line-height, 1.75rem);font-weight:500;font-weight:var(--forge-typography-subtitle1-secondary-font-weight,500);letter-spacing:.01em;letter-spacing:var(--forge-typography-subtitle1-secondary-letter-spacing, .01em);text-decoration:inherit;-webkit-text-decoration:var(--forge-typography-subtitle1-secondary-text-decoration,inherit);text-decoration:var(--forge-typography-subtitle1-secondary-text-decoration,inherit);text-transform:inherit;text-transform:var(--forge-typography-subtitle1-secondary-text-transform,inherit);line-height:1.25rem}.forge-profile-card__email{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size, .875rem);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height, 1.375rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing, .0071428571em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}forge-toolbar#action-toolbar::part(root){border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host{display:inline}:host([hidden]){display:none}forge-toolbar{--mdc-theme-surface:var(--forge-theme-elevated-surface)}';
+const template = '<template><div class=\"forge-profile-card\" part=\"root\"><div class=\"info-container\"><div class=\"avatar\"><forge-avatar part=\"avatar\"></forge-avatar></div><div class=\"info-text\"><div class=\"full-name\" part=\"name\"></div><div class=\"email\" part=\"email\"></div></div></div><slot></slot><forge-toolbar inverted id=\"action-toolbar\"><forge-button variant=\"outlined\" slot=\"end\" style=\"display: none;\" part=\"profile-button\" id=\"profile-button\">Profile</forge-button><forge-button slot=\"end\" part=\"sign-out-button\" id=\"sign-out-button\">Sign out</forge-button></forge-toolbar></div></template>';
+const styles = ':host{display:block}:host([hidden]){display:none}.forge-profile-card{--_profile-card-min-width:var(--forge-profile-card-min-width, 360px);--_profile-card-shape:var(--forge-profile-card-border-radius, var(--forge-shape-medium, 4px));--_profile-card-avatar-size:var(--forge-profile-card-avatar-size, 56px)}.forge-profile-card{min-width:var(--_profile-card-min-width);border-radius:var(--_profile-card-shape)}@media (max-width:399px){.forge-profile-card{width:100vw;min-width:unset;overflow:auto}}.forge-profile-card .info-container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding-block:var(--forge-spacing-xsmall,8px);padding-inline:var(--forge-spacing-medium,16px)}.forge-profile-card .avatar{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding:var(--forge-spacing-xsmall,8px);-webkit-margin-end:var(--forge-spacing-medium,16px);margin-inline-end:var(--forge-spacing-medium,16px);--forge-avatar-size:var(--_profile-card-avatar-size)}.forge-profile-card .text{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.forge-profile-card .full-name{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-heading2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-heading2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading2-font-size-scale, 1)));font-weight:var(--forge-typography-heading2-font-weight,500);line-height:var(--forge-typography-heading2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading2-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-heading2-letter-spacing, .0125em);text-transform:var(--forge-typography-heading2-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-heading2-text-decoration,inherit);text-decoration:var(--forge-typography-heading2-text-decoration,inherit)}.forge-profile-card .email{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-subheading1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-subheading1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading1-font-size-scale, .875)));font-weight:var(--forge-typography-subheading1-font-weight,400);line-height:var(--forge-typography-subheading1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading1-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-subheading1-letter-spacing, normal);text-transform:var(--forge-typography-subheading1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-subheading1-text-decoration,inherit);text-decoration:var(--forge-typography-subheading1-text-decoration,inherit);color:var(--forge-theme-text-medium,rgba(0,0,0,.54))}#action-toolbar{--forge-toolbar-padding:8px}#action-toolbar forge-button:not(:last-of-type){-webkit-margin-end:8px;margin-inline-end:8px}';
 /**
- * The web component class behind the `<forge-profile-card>` custom element.
- *
  * @tag forge-profile-card
  */
 let ProfileCardComponent = class ProfileCardComponent extends BaseComponent {
@@ -51,16 +50,16 @@ let ProfileCardComponent = class ProfileCardComponent extends BaseComponent {
                 this.email = newValue;
                 break;
             case PROFILE_CARD_CONSTANTS.attributes.SIGN_OUT:
-                this.signOut = coerceBoolean(PROFILE_CARD_CONSTANTS.attributes.SIGN_OUT);
+                this.signOut = coerceBoolean(newValue);
                 break;
             case PROFILE_CARD_CONSTANTS.attributes.PROFILE:
-                this.profile = coerceBoolean(PROFILE_CARD_CONSTANTS.attributes.PROFILE);
+                this.profile = coerceBoolean(newValue);
                 break;
             case PROFILE_CARD_CONSTANTS.attributes.SIGN_OUT_TEXT:
-                this.signOutText = PROFILE_CARD_CONSTANTS.attributes.SIGN_OUT_TEXT;
+                this.signOutText = newValue;
                 break;
             case PROFILE_CARD_CONSTANTS.attributes.PROFILE_TEXT:
-                this.profileText = PROFILE_CARD_CONSTANTS.attributes.PROFILE_TEXT;
+                this.profileText = newValue;
                 break;
             case PROFILE_CARD_CONSTANTS.attributes.AVATAR_TEXT:
                 this.avatarText = newValue;
@@ -76,6 +75,9 @@ let ProfileCardComponent = class ProfileCardComponent extends BaseComponent {
                 break;
         }
     }
+    focus(options) {
+        this._foundation.focus(options);
+    }
 };
 __decorate([
     FoundationProperty()
@@ -113,6 +115,7 @@ ProfileCardComponent = __decorate([
         dependencies: [
             ToolbarComponent,
             ButtonComponent,
+            IconComponent,
             AvatarComponent
         ]
     })

package/esm/radio/core/radio-group-manager.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IRadioComponent } from '../radio';
+/**
+ * A class for coordinating the states of radio components within a radio group.
+ */
+export declare class RadioGroupManager {
+    private static _radiosRequestingReset;
+    /**
+     * Returns an array of IRadioComponents that belong to the same radio group as the given
+     * IRadioComponent.
+     * If the given IRadioComponent does not have an associated form element, it searches the root
+     * node for all IRadioComponents with the same name.
+     * If the given IRadioComponent has an associated form element, it gets all RadioComponents with
+     * the same name from the form element.
+     *
+     * @param el - The IRadioComponent to get the radio group for.
+     * @returns An array of IRadioComponents that belong to the same radio group as the given
+     * IRadioComponent.
+     */
+    static getRadioGroup(el: IRadioComponent): IRadioComponent[];
+    /**
+     * Sets the validity of a radio group.
+     * If no radio is selected in the group and selection is required, it sets the validity to
+     * `valueMissing`.
+     *
+     * @param el A radio component within the group to set the validity for.
+     */
+    static setRadioGroupValidity(el: IRadioComponent): void;
+    /**
+     * Sets the selected radio in a radio group.
+     *
+     * @param el - The radio component to set as selected.
+     */
+    static setSelectedRadioInGroup(el: IRadioComponent): void;
+    /**
+     * Focuses the next radio in the radio group.
+     *
+     * @param el - The currently focused radio component.
+     */
+    static focusNextRadioInGroup(el: IRadioComponent): void;
+    /**
+     * Focuses the previous radio in the radio group.
+     *
+     * @param el - The currently focused radio component.
+     */
+    static focusPreviousRadioInGroup(el: IRadioComponent): void;
+    /**
+     * Adds or removes each radio in a radio group from the tab order. When no radio is selected and
+     * focus is not in the group, all radios are added to the tab order. Otherwise only the selected
+     * radio is added to the tab order.
+     *
+     * @param el - The focused or blurred radio component.
+     * @param event - The event type (`'focus'` or `'blur'`).
+     */
+    static setUncheckedRadioGroupFocus(el: IRadioComponent, event: 'focus' | 'blur'): void;
+    /**
+     * Resets a radio group to . This will run once each radio has a chance to
+     * update.
+     *
+     * @param el - The radio component requesting the reset.
+     * @returns A promise that resolves when the reset logic is complete.
+     */
+    static requestRadioGroupReset(el: IRadioComponent): Promise<void>;
+    /**
+     * Updates the focus and selection of a radio group based on the currently focused radio and the
+     * direction of the focus change.
+     *
+     * @param el - The currently focused radio element.
+     * @param increment - The direction of the focus change. 1 for forward, -1 for backward.
+     */
+    private static _updateRadioGroupFocus;
+    /**
+     * Determines if a radio selection is required within a group.
+     *
+     * @param group - The radio components within a group.
+     * @returns True if the radio selection is required, false otherwise.
+     */
+    private static _selectionIsRequired;
+}