@tylertech/forge 2.16.6 → 3.0.0-next.10

package/esm/expansion-panel/expansion-panel.js

@@ -17,11 +17,6 @@ const styles = '.forge-expansion-panel{display:block;display:var(--forge-expansi
  * @tag forge-expansion-panel
  */
 let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new ExpansionPanelFoundation(new ExpansionPanelAdapter(this));
-    }
     static get observedAttributes() {
         return [
             EXPANSION_PANEL_CONSTANTS.attributes.OPEN,
@@ -29,6 +24,11 @@ let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponen
             EXPANSION_PANEL_CONSTANTS.attributes.USE_ANIMATIONS
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ExpansionPanelFoundation(new ExpansionPanelAdapter(this));
+    }
     initializedCallback() {
         this._foundation.initialize();
     }

package/esm/field/field-adapter.js

@@ -105,7 +105,7 @@ export class FieldAdapter extends BaseAdapter {
         return this._inputElement.placeholder ? this._inputElement.placeholder.trim().length > 0 : false;
     }
     inputHasFocus(target) {
-        return this._inputElement === target || this._inputElement === getActiveElement(this._component.ownerDocument);
+        return this._inputElement === target || this._inputElement === getActiveElement();
     }
     setLabelClass(name) {
         if (this._labelElement) {

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

@@ -34,6 +34,6 @@ export declare const FIELD_CONSTANTS: {
         LABEL: string;
     };
 };
-export declare type FieldDensityType = 'roomy' | 'default' | 'dense';
-export declare type FieldFloatLabelType = 'always' | 'auto';
-export declare type FieldShapeType = 'default' | 'rounded';
+export type FieldDensityType = 'roomy' | 'default' | 'dense';
+export type FieldFloatLabelType = 'always' | 'auto';
+export type FieldShapeType = 'default' | 'rounded';

package/esm/field/field-foundation.js

@@ -66,8 +66,6 @@ export class FieldFoundation {
     disconnect() {
         this._isInitialized = false;
         this._adapter.destroy();
-        this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
-        this._adapter.removeRootClass(FIELD_CONSTANTS.classes.LABEL);
         if (this._floatingLabel) {
             this._floatingLabel.destroy();
             this._floatingLabel = undefined;
@@ -148,9 +146,6 @@ export class FieldFoundation {
     floatLabel(value) {
         var _a, _b;
         if (((_a = this._floatingLabel) === null || _a === void 0 ? void 0 : _a.isFloating) === value || this._adapter.isLabelFloating() === value) {
-            if (value) {
-                this._adapter.setHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING, '');
-            }
             return;
         }
         if (!value && this._floatLabelType === 'always') {

package/esm/field/field.js

@@ -8,9 +8,6 @@ import { FIELD_CONSTANTS } from './field-constants';
 import { BaseComponent } from '../core/base/base-component';
 import { coerceBoolean, ensureChild, FoundationProperty } from '@tylertech/forge-core';
 export class FieldComponent extends BaseComponent {
-    constructor() {
-        super();
-    }
     static get observedAttributes() {
         return [
             FIELD_CONSTANTS.attributes.DENSITY,
@@ -20,6 +17,9 @@ export class FieldComponent extends BaseComponent {
             FIELD_CONSTANTS.attributes.REQUIRED
         ];
     }
+    constructor() {
+        super();
+    }
     connectedCallback() {
         if (this.querySelector(FIELD_CONSTANTS.selectors.INPUT)) {
             this._initialize();

package/esm/file-picker/file-picker-component-delegate.d.ts

@@ -6,7 +6,7 @@
 import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
 import { IFilePickerComponent } from './file-picker';
 import { IFilePickerChangeEventData } from './file-picker-constants';
-export declare type FilePickerComponentDelegateProps = Partial<IFilePickerComponent>;
+export type FilePickerComponentDelegateProps = Partial<IFilePickerComponent>;
 export interface IFilePickerComponentDelegateOptions extends IBaseComponentDelegateOptions {
     primaryText?: string;
     secondaryText?: string;

package/esm/file-picker/file-picker.js

@@ -11,18 +11,13 @@ import { FilePickerAdapter } from './file-picker-adapter';
 import { FILE_PICKER_CONSTANTS } from './file-picker-constants';
 import { FilePickerFoundation } from './file-picker-foundation';
 const template = '<template><form class=\"forge-file-picker\" id=\"container\" part=\"form\"><div class=\"forge-file-picker__primary\" id=\"primary\" part=\"primary\"><slot name=\"primary\"></slot></div><slot id=\"button-slot\"></slot><div class=\"forge-file-picker__secondary\" id=\"secondary\" part=\"secondary\"><slot name=\"secondary\"></slot></div><input type=\"file\" class=\"forge-file-picker__input\" id=\"input\" part=\"input\"></form><div class=\"forge-file-picker__helper-text\" part=\"helper-text-container\"><slot name=\"helper-text\"></slot></div></template>';
-const styles = '.forge-file-picker{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;background-color:rgba(189,189,189,.12);border:1px dashed #e0e0e0;display:grid;-webkit-box-pack:center;justify-content:center;align-content:center;gap:16px;padding:16px;text-align:center;cursor:pointer}.forge-file-picker__primary{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size, 1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height, 1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, .009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));max-width:auto;max-width:var(--forge-file-picker-max-content-width,auto)}.forge-file-picker__secondary{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:.875rem;font-size:var(--forge-typography-subtitle2-secondary-font-size, .875rem);line-height:1.375rem;line-height:var(--forge-typography-subtitle2-secondary-line-height, 1.375rem);font-weight:400;font-weight:var(--forge-typography-subtitle2-secondary-font-weight,400);letter-spacing:.0087500001em;letter-spacing:var(--forge-typography-subtitle2-secondary-letter-spacing, .0087500001em);text-decoration:inherit;-webkit-text-decoration:var(--forge-typography-subtitle2-secondary-text-decoration,inherit);text-decoration:var(--forge-typography-subtitle2-secondary-text-decoration,inherit);text-transform:inherit;text-transform:var(--forge-typography-subtitle2-secondary-text-transform,inherit);color:var(--mdc-theme-text-secondary-on-background);color:var(--forge-typography-subtitle2-secondary-color,var(--mdc-theme-text-secondary-on-background));color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));max-width:auto;max-width:var(--forge-file-picker-max-content-width,auto)}.forge-file-picker__input{display:none}.forge-file-picker__helper-text ::slotted([slot=helper-text]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;min-height:1.5rem;line-height:normal;padding-top:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));margin-left:12px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);text-align:start}.forge-file-picker[disabled]{background-color:#fafafa;background-color:var(--mdc-theme-background,#fafafa);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);opacity:.38;cursor:unset}.forge-file-picker.compact{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background-color:transparent;border:none;padding:0}.forge-file-picker.compact .forge-file-picker__primary,.forge-file-picker.compact .forge-file-picker__secondary{display:none}.forge-file-picker.compact .forge-file-picker__button>button{width:auto;width:var(--forge-file-picker-width,auto);background-color:transparent}.forge-file-picker:not(.compact).highlight{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5);background-color:rgba(63,81,181,.12);border-width:1px;border-style:solid}.forge-file-picker.borderless{--forge-file-picker-width:100%;border:none}.forge-file-picker.borderless:not(.compact).highlight{border:none}.forge-file-picker.borderless+.forge-file-picker__helper-text{display:none}:host{width:auto;width:var(--forge-file-picker-width,auto);height:auto;height:var(--forge-file-picker-height,auto);display:inline-block}:host([hidden]){display:none}';
+const styles = '.forge-file-picker{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;background-color:rgba(189,189,189,.12);border:1px dashed #e0e0e0;display:grid;-webkit-box-pack:center;justify-content:center;align-content:center;gap:16px;padding:16px;text-align:center;cursor:pointer}.forge-file-picker__primary{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size, 1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height, 1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, .009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));max-width:auto;max-width:var(--forge-file-picker-max-content-width,auto)}.forge-file-picker__secondary{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:.875rem;font-size:var(--forge-typography-subtitle2-secondary-font-size, .875rem);line-height:1.375rem;line-height:var(--forge-typography-subtitle2-secondary-line-height, 1.375rem);font-weight:400;font-weight:var(--forge-typography-subtitle2-secondary-font-weight,400);letter-spacing:.0087500001em;letter-spacing:var(--forge-typography-subtitle2-secondary-letter-spacing, .0087500001em);text-decoration:inherit;-webkit-text-decoration:var(--forge-typography-subtitle2-secondary-text-decoration,inherit);text-decoration:var(--forge-typography-subtitle2-secondary-text-decoration,inherit);text-transform:inherit;text-transform:var(--forge-typography-subtitle2-secondary-text-transform,inherit);color:var(--mdc-theme-text-secondary-on-background);color:var(--forge-typography-subtitle2-secondary-color,var(--mdc-theme-text-secondary-on-background));color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));max-width:auto;max-width:var(--forge-file-picker-max-content-width,auto)}.forge-file-picker__input{display:none}.forge-file-picker__helper-text ::slotted([slot=helper-text]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;min-height:1.5rem;line-height:normal;padding-top:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));margin-left:12px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);text-align:start}.forge-file-picker[disabled]{background-color:#fff;background-color:var(--mdc-theme-background,#fff);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);opacity:.38;cursor:unset}.forge-file-picker.compact{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background-color:transparent;border:none;padding:0}.forge-file-picker.compact .forge-file-picker__primary,.forge-file-picker.compact .forge-file-picker__secondary{display:none}.forge-file-picker.compact .forge-file-picker__button>button{width:auto;width:var(--forge-file-picker-width,auto);background-color:transparent}.forge-file-picker:not(.compact).highlight{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee);background-color:rgba(98,0,238,.12);border-width:1px;border-style:solid}.forge-file-picker.borderless{--forge-file-picker-width:100%;border:none}.forge-file-picker.borderless:not(.compact).highlight{border:none}.forge-file-picker.borderless+.forge-file-picker__helper-text{display:none}:host{width:auto;width:var(--forge-file-picker-width,auto);height:auto;height:var(--forge-file-picker-height,auto);display:inline-block}:host([hidden]){display:none}';
 /**
  * The web component class behind the `<forge-file-picker>` custom element.
  *
  * @tag forge-file-picker
  */
 let FilePickerComponent = class FilePickerComponent extends BaseComponent {
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new FilePickerFoundation(new FilePickerAdapter(this));
-    }
     static get observedAttributes() {
         return [
             FILE_PICKER_CONSTANTS.attributes.ACCEPT,
@@ -34,6 +29,11 @@ let FilePickerComponent = class FilePickerComponent extends BaseComponent {
             FILE_PICKER_CONSTANTS.attributes.BORDERLESS
         ];
     }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new FilePickerFoundation(new FilePickerAdapter(this));
+    }
     connectedCallback() {
         this._foundation.initialize();
     }

package/esm/floating-action-button/floating-action-button-component-delegate.d.ts

@@ -5,7 +5,7 @@
  */
 import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';
 import { IFloatingActionButtonComponent } from './floating-action-button';
-export declare type FloatingActionButtonComponentDelegateProps = Partial<IFloatingActionButtonComponent>;
+export type FloatingActionButtonComponentDelegateProps = Partial<IFloatingActionButtonComponent>;
 export interface IFloatingActionButtonComponentDelegateOptions extends IBaseComponentDelegateOptions {
     text?: string;
 }

package/esm/floating-action-button/floating-action-button.js

@@ -14,12 +14,6 @@ import { FLOATING_ACTION_BUTTON_CONSTANTS } from './floating-action-button-const
  * @tag forge-fab
  */
 let FloatingActionButton = class FloatingActionButton extends BaseComponent {
-    constructor() {
-        super();
-        this._isExtended = false;
-        this._isMini = false;
-        this._isExited = false;
-    }
     static get observedAttributes() {
         return [
             FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXITED,
@@ -27,6 +21,12 @@ let FloatingActionButton = class FloatingActionButton extends BaseComponent {
             FLOATING_ACTION_BUTTON_CONSTANTS.attributes.EXTENDED
         ];
     }
+    constructor() {
+        super();
+        this._isExtended = false;
+        this._isMini = false;
+        this._isExited = false;
+    }
     connectedCallback() {
         if (this.children.length) {
             this._initialize();

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

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core';
+import { IFocusIndicatorComponent } from './focus-indicator';
+export interface IFocusIndicatorAdapter extends IBaseAdapter {
+    destroy(): void;
+    hasTargetElement(): boolean;
+    addTargetListener(type: string, listener: EventListener): void;
+    removeTargetListener(type: string, listener: EventListener): void;
+    getTargetElement(): HTMLElement | null;
+    setTargetElement(el: HTMLElement | null): void;
+    trySetTarget(value: string | null): void;
+    isActive(selector: string): boolean;
+}
+export declare class FocusIndicatorAdapter extends BaseAdapter<IFocusIndicatorComponent> implements IFocusIndicatorAdapter {
+    private _targetElement;
+    constructor(component: IFocusIndicatorComponent);
+    destroy(): void;
+    hasTargetElement(): boolean;
+    addTargetListener(type: string, listener: EventListener): void;
+    removeTargetListener(type: string, listener: EventListener): void;
+    getTargetElement(): HTMLElement | null;
+    setTargetElement(el: HTMLElement | null): void;
+    trySetTarget(value: string | null): void;
+    isActive(selector: string): boolean;
+}

package/esm/focus-indicator/focus-indicator-adapter.js

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, locateTargetHeuristic } from '../core';
+export class FocusIndicatorAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._targetElement = null;
+    }
+    destroy() {
+        this._targetElement = null;
+    }
+    hasTargetElement() {
+        return !!this._targetElement;
+    }
+    addTargetListener(type, listener) {
+        var _a;
+        (_a = this._targetElement) === null || _a === void 0 ? void 0 : _a.addEventListener(type, listener);
+    }
+    removeTargetListener(type, listener) {
+        var _a;
+        (_a = this._targetElement) === null || _a === void 0 ? void 0 : _a.removeEventListener(type, listener);
+    }
+    getTargetElement() {
+        return this._targetElement;
+    }
+    setTargetElement(el) {
+        this._targetElement = el;
+    }
+    trySetTarget(value) {
+        this._targetElement = locateTargetHeuristic(this._component, value);
+    }
+    isActive(selector) {
+        var _a;
+        return !!((_a = this._targetElement) === null || _a === void 0 ? void 0 : _a.matches(selector));
+    }
+}

package/esm/focus-indicator/focus-indicator-constants.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const FOCUS_INDICATOR_CONSTANTS: {
+    elementName: "forge-focus-indicator";
+    attributes: {
+        TARGET: string;
+        ACTIVE: string;
+        INWARD: string;
+        CIRCULAR: string;
+        ALLOW_FOCUS: string;
+    };
+};

package/esm/focus-indicator/focus-indicator-constants.js

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}focus-indicator`;
+const observedAttributes = {
+    TARGET: 'target',
+    ACTIVE: 'active',
+    INWARD: 'inward',
+    CIRCULAR: 'circular',
+    ALLOW_FOCUS: 'allow-focus'
+};
+const attributes = Object.assign({}, observedAttributes);
+export const FOCUS_INDICATOR_CONSTANTS = {
+    elementName,
+    attributes
+};

package/esm/focus-indicator/focus-indicator-foundation.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IFocusIndicatorAdapter } from './focus-indicator-adapter';
+export interface IFocusIndicatorFoundation {
+    targetElement: HTMLElement | null;
+    target: string | null;
+    active: boolean;
+    inward: boolean;
+    circular: boolean;
+    allowFocus: boolean;
+    initialize(): void;
+    destroy(): void;
+}
+export declare class FocusIndicatorFoundation implements IFocusIndicatorFoundation {
+    private _adapter;
+    private _target;
+    private _active;
+    private _inward;
+    private _circular;
+    private _allowFocus;
+    private _interactionListener;
+    constructor(_adapter: IFocusIndicatorAdapter);
+    initialize(): void;
+    destroy(): void;
+    private _addListeners;
+    private _removeListeners;
+    private _onInteraction;
+    get targetElement(): HTMLElement | null;
+    set targetElement(value: HTMLElement | null);
+    get target(): string | null;
+    set target(value: string | null);
+    get active(): boolean;
+    set active(value: boolean);
+    get inward(): boolean;
+    set inward(value: boolean);
+    get circular(): boolean;
+    set circular(value: boolean);
+    get allowFocus(): boolean;
+    set allowFocus(value: boolean);
+}

package/esm/focus-indicator/focus-indicator-foundation.js

@@ -0,0 +1,110 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { FOCUS_INDICATOR_CONSTANTS } from './focus-indicator-constants';
+export class FocusIndicatorFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._target = null;
+        this._active = false;
+        this._inward = false;
+        this._circular = false;
+        this._allowFocus = false;
+        this._interactionListener = evt => this._onInteraction(evt);
+    }
+    initialize() {
+        if (!this._adapter.hasTargetElement()) {
+            this._adapter.trySetTarget(this._target);
+        }
+        this._addListeners();
+    }
+    destroy() {
+        this._adapter.destroy();
+        this._removeListeners();
+    }
+    _addListeners() {
+        this._adapter.addTargetListener('focusin', this._interactionListener);
+        this._adapter.addTargetListener('focusout', this._interactionListener);
+        this._adapter.addTargetListener('pointerdown', this._interactionListener);
+    }
+    _removeListeners() {
+        this._adapter.removeTargetListener('focusin', this._interactionListener);
+        this._adapter.removeTargetListener('focusout', this._interactionListener);
+        this._adapter.removeTargetListener('pointerdown', this._interactionListener);
+    }
+    _onInteraction(evt) {
+        switch (evt.type) {
+            case 'focusin':
+                this.active = this._adapter.isActive(this._allowFocus ? ':focus' : ':focus-visible');
+                break;
+            case 'focusout':
+                this.active = false;
+                break;
+            case 'pointerdown':
+                this.active = this._allowFocus ? this._adapter.isActive(':focus') : this._adapter.isActive(':focus-visible');
+                break;
+        }
+    }
+    get targetElement() {
+        return this._adapter.getTargetElement();
+    }
+    set targetElement(value) {
+        this._removeListeners();
+        this._adapter.setTargetElement(value);
+        this._addListeners();
+    }
+    get target() {
+        return this._adapter.getHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.TARGET);
+    }
+    set target(value) {
+        if (this._target !== value) {
+            this._target = value;
+            if (this._adapter.isConnected) {
+                this._adapter.trySetTarget(value);
+            }
+            this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.TARGET, Boolean(this._target), this._target);
+        }
+    }
+    get active() {
+        return this._active;
+    }
+    set active(value) {
+        value = Boolean(value);
+        if (this._active !== value) {
+            this._active = value;
+            this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.ACTIVE, this._active);
+        }
+    }
+    get inward() {
+        return this._inward;
+    }
+    set inward(value) {
+        value = Boolean(value);
+        if (this._inward !== value) {
+            this._inward = value;
+            this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.INWARD, this._inward);
+        }
+    }
+    get circular() {
+        return this._circular;
+    }
+    set circular(value) {
+        value = Boolean(value);
+        if (this._circular !== value) {
+            this._circular = value;
+            this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.CIRCULAR, this._circular);
+        }
+    }
+    get allowFocus() {
+        return this._allowFocus;
+    }
+    set allowFocus(value) {
+        value = Boolean(value);
+        if (this._allowFocus !== value) {
+            this._allowFocus = value;
+            this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.ALLOW_FOCUS, this._allowFocus);
+        }
+    }
+}

package/esm/focus-indicator/focus-indicator.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+export interface IFocusIndicatorComponent extends IBaseComponent {
+    targetElement: HTMLElement;
+    target: string | null;
+    active: boolean;
+    inward: boolean;
+    circular: boolean;
+    allowFocus: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-focus-indicator': IFocusIndicatorComponent;
+    }
+}
+/**
+ * @tag forge-focus-indicator
+ *
+ * @summary Renders a focus indicator when an attached element matches `:focus-visible`.
+ *
+ * @property {HTMLElement} targetElement - The element to attach the focus indicator to.
+ * @property {string} target - The id of the element to attach the focus indicator to.
+ * @property {boolean} active - Controls whether the indicator is active.
+ * @property {boolean} inward - Controls whether the indicator renders inward.
+ * @property {boolean} circular - Controls whether the indicator renders circular.
+ * @property {boolean} allowFocus - Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
+ *
+ * @attribute {string} target - The id of the element to attach the focus indicator to.
+ * @attribute {boolean} active - Controls whether the indicator is active.
+ * @attribute {boolean} inward - Controls whether the indicator renders inward.
+ * @attribute {boolean} circular - Controls whether the indicator renders circular.
+ * @attribute {boolean} allow-focus - Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
+ *
+ * @cssproperty --forge-focus-indicator-active-width - The width of the focus indicator when active. When animating this is the max extent.
+ * @cssproperty --forge-focus-indicator-color - The color of the focus indicator.
+ * @cssproperty --forge-focus-indicator-duration - The animation duration.
+ * @cssproperty --forge-focus-indicator-outward-offset - The offset of the focus indicator when outward.
+ * @cssproperty --forge-focus-indicator-inward-offset - The offset of the focus indicator when inward.
+ * @cssproperty --forge-focus-indicator-shape - The shape of the focus indicator.
+ * @cssproperty --forge-focus-indicator-width - The width of the focus indicator when resting.
+ * @cssproperty --forge-focus-indicator-shape-start-start - The start start shape.
+ * @cssproperty --forge-focus-indicator-shape-start-end - The start end shape.
+ * @cssproperty --forge-focus-indicator-shape-end-start - The end start shape.
+ * @cssproperty --forge-focus-indicator-shape-end-end - The end end shape.
+ * @cssproperty --forge-focus-indicator-offset-block - The block offset.
+ * @cssproperty --forge-focus-indicator-offset-inline - The inline offset.
+ *
+ * @csspart indicator - The focus indicator element.
+ */
+export declare class FocusIndicatorComponent extends BaseComponent implements IFocusIndicatorComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    targetElement: HTMLElement;
+    target: string | null;
+    active: boolean;
+    inward: boolean;
+    circular: boolean;
+    allowFocus: boolean;
+}

package/esm/focus-indicator/focus-indicator.js

@@ -0,0 +1,112 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { BaseComponent } from '../core/base/base-component';
+import { FocusIndicatorAdapter } from './focus-indicator-adapter';
+import { FOCUS_INDICATOR_CONSTANTS } from './focus-indicator-constants';
+import { FocusIndicatorFoundation } from './focus-indicator-foundation';
+const template = '<template><div class=\"forge-focus-indicator\" part=\"indicator\"></div></template>';
+const styles = ':host{display:contents}:host([hidden]){display:none}:host([active]) .forge-focus-indicator{display:-webkit-box;display:flex}:host(:not([inward])) .forge-focus-indicator{-webkit-animation-name:outward-grow,outward-shrink;animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--_shape-end-end) + var(--_outward-offset));border-end-start-radius:calc(var(--_shape-end-start) + var(--_outward-offset));border-start-end-radius:calc(var(--_shape-start-end) + var(--_outward-offset));border-start-start-radius:calc(var(--_shape-start-start) + var(--_outward-offset));inset:calc(-1 * var(--_outward-offset));outline:var(--_width) solid currentColor}:host([inward]) .forge-focus-indicator{-webkit-animation-name:inward-grow,inward-shrink;animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--_shape-end-end) - var(--_inward-offset));border-end-start-radius:calc(var(--_shape-end-start) - var(--_inward-offset));border-start-end-radius:calc(var(--_shape-start-end) - var(--_inward-offset));border-start-start-radius:calc(var(--_shape-start-start) - var(--_inward-offset));border:var(--_width) solid currentColor;inset:var(--_inward-offset)}:host([circular]) .forge-focus-indicator{--_shape:50%}.forge-focus-indicator{--_active-width:var(--forge-focus-indicator-active-width, 6px);--_color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_duration:var(--forge-focus-indicator-duration, 600ms);--_outward-offset:var(--forge-focus-indicator-outward-offset, 4px);--_inward-offset:var(--forge-focus-indicator-inward-offset, 0px);--_shape:var(--forge-focus-indicator-shape, 1px);--_width:var(--forge-focus-indicator-width, 2px);--_easing:var(--forge-focus-indicator-easing, cubic-bezier(0.2, 0, 0, 1));--_shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_shape));--_shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_shape));--_shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_shape));--_shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_shape));--_margin-block:var(--forge-focus-indicator-offset-block, 0);--_margin-inline:var(--forge-focus-indicator-offset-inline, 0);-webkit-animation-delay:0s,calc(var(--_duration) * .25);animation-delay:0s,calc(var(--_duration) * .25);-webkit-animation-duration:calc(var(--_duration) * .25),calc(var(--_duration) * .75);animation-duration:calc(var(--_duration) * .25),calc(var(--_duration) * .75);-webkit-animation-timing-function:var(--_easing);animation-timing-function:var(--_easing);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--_color);display:none;pointer-events:none;position:absolute;margin-block:var(--_margin-block);margin-inline:var(--_margin-inline)}@-webkit-keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_active-width)}}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_active-width)}}@-webkit-keyframes outward-shrink{from{outline-width:var(--_active-width)}}@keyframes outward-shrink{from{outline-width:var(--_active-width)}}@-webkit-keyframes inward-grow{from{border-width:0}to{border-width:var(--_active-width)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--_active-width)}}@-webkit-keyframes inward-shrink{from{border-width:var(--_active-width)}}@keyframes inward-shrink{from{border-width:var(--_active-width)}}@media (prefers-reduced-motion){.forge-focus-indicator{-webkit-animation:none;animation:none}}';
+/**
+ * @tag forge-focus-indicator
+ *
+ * @summary Renders a focus indicator when an attached element matches `:focus-visible`.
+ *
+ * @property {HTMLElement} targetElement - The element to attach the focus indicator to.
+ * @property {string} target - The id of the element to attach the focus indicator to.
+ * @property {boolean} active - Controls whether the indicator is active.
+ * @property {boolean} inward - Controls whether the indicator renders inward.
+ * @property {boolean} circular - Controls whether the indicator renders circular.
+ * @property {boolean} allowFocus - Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
+ *
+ * @attribute {string} target - The id of the element to attach the focus indicator to.
+ * @attribute {boolean} active - Controls whether the indicator is active.
+ * @attribute {boolean} inward - Controls whether the indicator renders inward.
+ * @attribute {boolean} circular - Controls whether the indicator renders circular.
+ * @attribute {boolean} allow-focus - Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
+ *
+ * @cssproperty --forge-focus-indicator-active-width - The width of the focus indicator when active. When animating this is the max extent.
+ * @cssproperty --forge-focus-indicator-color - The color of the focus indicator.
+ * @cssproperty --forge-focus-indicator-duration - The animation duration.
+ * @cssproperty --forge-focus-indicator-outward-offset - The offset of the focus indicator when outward.
+ * @cssproperty --forge-focus-indicator-inward-offset - The offset of the focus indicator when inward.
+ * @cssproperty --forge-focus-indicator-shape - The shape of the focus indicator.
+ * @cssproperty --forge-focus-indicator-width - The width of the focus indicator when resting.
+ * @cssproperty --forge-focus-indicator-shape-start-start - The start start shape.
+ * @cssproperty --forge-focus-indicator-shape-start-end - The start end shape.
+ * @cssproperty --forge-focus-indicator-shape-end-start - The end start shape.
+ * @cssproperty --forge-focus-indicator-shape-end-end - The end end shape.
+ * @cssproperty --forge-focus-indicator-offset-block - The block offset.
+ * @cssproperty --forge-focus-indicator-offset-inline - The inline offset.
+ *
+ * @csspart indicator - The focus indicator element.
+ */
+let FocusIndicatorComponent = class FocusIndicatorComponent extends BaseComponent {
+    static get observedAttributes() {
+        return [
+            FOCUS_INDICATOR_CONSTANTS.attributes.TARGET,
+            FOCUS_INDICATOR_CONSTANTS.attributes.ACTIVE,
+            FOCUS_INDICATOR_CONSTANTS.attributes.INWARD,
+            FOCUS_INDICATOR_CONSTANTS.attributes.CIRCULAR,
+            FOCUS_INDICATOR_CONSTANTS.attributes.ALLOW_FOCUS
+        ];
+    }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new FocusIndicatorFoundation(new FocusIndicatorAdapter(this));
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.destroy();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case FOCUS_INDICATOR_CONSTANTS.attributes.TARGET:
+                this.target = newValue;
+                break;
+            case FOCUS_INDICATOR_CONSTANTS.attributes.ACTIVE:
+                this.active = coerceBoolean(newValue);
+                break;
+            case FOCUS_INDICATOR_CONSTANTS.attributes.INWARD:
+                this.inward = coerceBoolean(newValue);
+                break;
+            case FOCUS_INDICATOR_CONSTANTS.attributes.CIRCULAR:
+                this.circular = coerceBoolean(newValue);
+                break;
+            case FOCUS_INDICATOR_CONSTANTS.attributes.ALLOW_FOCUS:
+                this.allowFocus = coerceBoolean(newValue);
+                break;
+        }
+    }
+};
+__decorate([
+    FoundationProperty()
+], FocusIndicatorComponent.prototype, "targetElement", void 0);
+__decorate([
+    FoundationProperty()
+], FocusIndicatorComponent.prototype, "target", void 0);
+__decorate([
+    FoundationProperty()
+], FocusIndicatorComponent.prototype, "active", void 0);
+__decorate([
+    FoundationProperty()
+], FocusIndicatorComponent.prototype, "inward", void 0);
+__decorate([
+    FoundationProperty()
+], FocusIndicatorComponent.prototype, "circular", void 0);
+__decorate([
+    FoundationProperty()
+], FocusIndicatorComponent.prototype, "allowFocus", void 0);
+FocusIndicatorComponent = __decorate([
+    CustomElement({
+        name: FOCUS_INDICATOR_CONSTANTS.elementName
+    })
+], FocusIndicatorComponent);
+export { FocusIndicatorComponent };

package/esm/focus-indicator/index.d.ts

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

package/esm/focus-indicator/index.js

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