@tylertech/forge 3.0.0-next.10 → 3.0.0-next.12

package/esm/circular-progress/circular-progress.js

@@ -10,7 +10,7 @@ import { CircularProgressFoundation } from './circular-progress-foundation';
 import { CIRCULAR_PROGRESS_CONSTANTS } from './circular-progress-constants';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"forge-circular-progress\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"1\" part=\"progressbar\"><slot class=\"center-content\"></slot></div></template>';
-const styles = ':host{display:-webkit-inline-box;display:inline-flex;vertical-align:middle;min-block-size:var(--forge-circular-progress-size,48px);min-inline-size:var(--forge-circular-progress-size,48px);position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;contain:strict;content-visibility:auto}:host([hidden]){display:none}.forge-circular-progress{--_size:var(--forge-circular-progress-size, 48px);--_spacing:var(--forge-circular-progress-padding, 0);--_track-width:var(--forge-circular-progress-track-width, 12);--_track-color:var(--forge-circular-progress-track-color, var(--forge-theme-tertiary, #3d5afe));--_track-background:var(--forge-circular-progress-track-background, var(--forge-theme-track-color, rgba(0, 0, 0, 0.12)));--_arc-duration:var(--forge-circular-progress-arc-duration, 1333ms);--_cycle-duration:calc(4 * var(--_arc-duration));--_linear-duration:calc(var(--_arc-duration) * 360 / 306);-webkit-box-flex:1;flex:1;align-self:stretch;margin:var(--_spacing)}.forge-circular-progress--indeterminate{will-change:transform;-webkit-animation:linear infinite linear-rotate;animation:linear infinite linear-rotate;-webkit-animation-duration:var(--_linear-duration);animation-duration:var(--_linear-duration)}.circle,.forge-circular-progress,.left,.right,.spinner,svg{position:absolute;inset:0}.center-content{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:100%;height:100%}.left{overflow:hidden;inset:0 50% 0 0}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.right .circle{rotate:100deg;inset:0 0 0 -100%;-webkit-animation-delay:calc(-.5 * var(--_arc-duration)),0s;animation-delay:calc(-.5 * var(--_arc-duration)),0s}.circle{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:50%;border:solid calc(var(--_size) * var(--_track-width)/ 100);border-color:var(--_track-color) var(--_track-color) transparent transparent;will-change:transform;-webkit-animation:expand-arc;animation:expand-arc;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--_arc-duration),var(--_cycle-duration);animation-duration:var(--_arc-duration),var(--_cycle-duration);-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}svg circle{cx:50%;cy:50%;r:calc(50% * (1 - var(--_track-width)/ 100));stroke-width:calc(var(--_track-width) * 1%);stroke-dasharray:100;fill:transparent}.progress{-webkit-transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1);transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1);stroke:var(--_track-color)}.track{stroke:transparent}.track-background{stroke:var(--_track-background)}.spinner{will-change:transform;-webkit-animation:infinite both rotate-arc;animation:infinite both rotate-arc;-webkit-animation-duration:var(--_cycle-duration);animation-duration:var(--_cycle-duration);-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@media screen and (forced-colors:active){.progress{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@-webkit-keyframes expand-arc{0%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}100%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@keyframes expand-arc{0%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}100%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@-webkit-keyframes rotate-arc{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@keyframes rotate-arc{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@-webkit-keyframes linear-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes linear-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}';
+const styles = ':host{display:-webkit-inline-box;display:inline-flex;vertical-align:middle;min-block-size:var(--forge-circular-progress-size,48px);min-inline-size:var(--forge-circular-progress-size,48px);position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;contain:strict;content-visibility:auto}:host([hidden]){display:none}.forge-circular-progress{--_size:var(--forge-circular-progress-size, 48px);--_spacing:var(--forge-circular-progress-padding, 0);--_track-width:var(--forge-circular-progress-track-width, 12);--_track-color:var(--forge-circular-progress-track-color, var(--forge-theme-tertiary, #3d5afe));--_track-background:var(--forge-circular-progress-track-background, var(--forge-theme-surface-container, #e0e0e0));--_arc-duration:var(--forge-circular-progress-arc-duration, 1333ms);--_cycle-duration:calc(4 * var(--_arc-duration));--_linear-duration:calc(var(--_arc-duration) * 360 / 306);-webkit-box-flex:1;flex:1;align-self:stretch;margin:var(--_spacing)}.forge-circular-progress--indeterminate{will-change:transform;-webkit-animation:linear infinite linear-rotate;animation:linear infinite linear-rotate;-webkit-animation-duration:var(--_linear-duration);animation-duration:var(--_linear-duration)}.circle,.forge-circular-progress,.left,.right,.spinner,svg{position:absolute;inset:0}.center-content{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:100%;height:100%}.left{overflow:hidden;inset:0 50% 0 0}.left .circle{rotate:135deg;inset:0 -100% 0 0}.right{overflow:hidden;inset:0 0 0 50%}.right .circle{rotate:100deg;inset:0 0 0 -100%;-webkit-animation-delay:calc(-.5 * var(--_arc-duration)),0s;animation-delay:calc(-.5 * var(--_arc-duration)),0s}.circle{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:50%;border:solid calc(var(--_size) * var(--_track-width)/ 100);border-color:var(--_track-color) var(--_track-color) transparent transparent;will-change:transform;-webkit-animation:expand-arc;animation:expand-arc;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--_arc-duration),var(--_cycle-duration);animation-duration:var(--_arc-duration),var(--_cycle-duration);-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}svg circle{cx:50%;cy:50%;r:calc(50% * (1 - var(--_track-width)/ 100));stroke-width:calc(var(--_track-width) * 1%);stroke-dasharray:100;fill:transparent}.progress{-webkit-transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1);transition:stroke-dashoffset .5s cubic-bezier(0, 0, .2, 1);stroke:var(--_track-color)}.track{stroke:transparent}.track-background{stroke:var(--_track-background)}.spinner{will-change:transform;-webkit-animation:infinite both rotate-arc;animation:infinite both rotate-arc;-webkit-animation-duration:var(--_cycle-duration);animation-duration:var(--_cycle-duration);-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1)}@media screen and (forced-colors:active){.progress{stroke:CanvasText}.circle{border-color:CanvasText CanvasText Canvas Canvas}}@-webkit-keyframes expand-arc{0%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}100%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@keyframes expand-arc{0%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}50%{-webkit-transform:rotate(130deg);transform:rotate(130deg)}100%{-webkit-transform:rotate(265deg);transform:rotate(265deg)}}@-webkit-keyframes rotate-arc{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@keyframes rotate-arc{12.5%{-webkit-transform:rotate(135deg);transform:rotate(135deg)}25%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}37.5%{-webkit-transform:rotate(405deg);transform:rotate(405deg)}50%{-webkit-transform:rotate(540deg);transform:rotate(540deg)}62.5%{-webkit-transform:rotate(675deg);transform:rotate(675deg)}75%{-webkit-transform:rotate(810deg);transform:rotate(810deg)}87.5%{-webkit-transform:rotate(945deg);transform:rotate(945deg)}100%{-webkit-transform:rotate(1080deg);transform:rotate(1080deg)}}@-webkit-keyframes linear-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes linear-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}';
 /**
  * @tag forge-circular-progress
  *

package/esm/color-picker/color-picker-foundation.d.ts

@@ -51,7 +51,6 @@ export declare class ColorPickerFoundation implements IColorPickerFoundation {
     private _setGradientColor;
     private _syncColors;
     private _render;
-    private _getFormattedHex;
     private _emitChangeEvent;
     get value(): string | null | undefined;
     set value(value: string | null | undefined);

package/esm/color-picker/color-picker-foundation.js

@@ -142,14 +142,11 @@ export class ColorPickerFoundation {
     _render() {
         this._setGradientColor();
         this._adapter.setPreviewColor(formatRgba(this._rgba));
-        this._adapter.setHexInputValue(this._getFormattedHex());
+        this._adapter.setHexInputValue(`#${this._hex}`);
         this._adapter.setRgbaInputValue(this._rgba);
         this._adapter.setHsvaInputValue(this._hsva);
         this._adapter.updateA11y(this._hsva.h, Math.round(this._hsva.a * 100));
     }
-    _getFormattedHex() {
-        return formatHex(this._hex, false);
-    }
     _emitChangeEvent(type, source) {
         const data = {
             type,
@@ -164,7 +161,7 @@ export class ColorPickerFoundation {
         this._adapter.emitHostEvent(COLOR_PICKER_CONSTANTS.events.CHANGE, data);
     }
     get value() {
-        return this._getFormattedHex();
+        return formatHex(this._hex, false);
     }
     set value(value) {
         if (this._value !== value) {

package/esm/core/base/base-adapter.d.ts

@@ -4,7 +4,8 @@
  * License: Apache-2.0
  */
 import { IBaseComponent } from './base-component';
-export interface IBaseAdapter {
+export interface IBaseAdapter<T extends HTMLElement = HTMLElement> {
+    readonly hostElement: T;
     readonly isConnected: boolean;
     removeHostAttribute(name: string): void;
     getHostAttribute(name: string): string | null;
@@ -24,13 +25,15 @@ export interface IBaseAdapter {
 export declare class BaseAdapter<T extends IBaseComponent> implements IBaseAdapter {
     protected _component: T;
     constructor(_component: T);
+    get hostElement(): T;
     getHostAttribute(name: string): string | null;
     setHostAttribute(name: string, value?: string): void;
     removeHostAttribute(name: string): void;
     toggleHostAttribute(name: string, hasAttribute: boolean, value?: string): void;
     emitHostEvent(type: string, data?: any, bubble?: boolean, cancelable?: boolean): boolean;
+    toggleHostListener(event: string, listener: EventListener, value: boolean, options?: boolean | AddEventListenerOptions): void;
     addHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
-    removeHostListener(event: string, callback: (event: Event) => void): void;
+    removeHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
     addWindowListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
     removeWindowListener(event: string, callback: (event: Event) => void, options?: boolean | EventListenerOptions): void;
     addDocumentListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;

package/esm/core/base/base-adapter.js

@@ -8,6 +8,9 @@ export class BaseAdapter {
     constructor(_component) {
         this._component = _component;
     }
+    get hostElement() {
+        return this._component;
+    }
     getHostAttribute(name) {
         return this._component.getAttribute(name);
     }
@@ -23,11 +26,19 @@ export class BaseAdapter {
     emitHostEvent(type, data = null, bubble = true, cancelable) {
         return emitEvent(this._component, type, data, bubble, cancelable);
     }
+    toggleHostListener(event, listener, value, options) {
+        if (value) {
+            this.addHostListener(event, listener, options);
+        }
+        else {
+            this.removeHostListener(event, listener, options);
+        }
+    }
     addHostListener(event, callback, options) {
         this._component.addEventListener(event, callback, options);
     }
-    removeHostListener(event, callback) {
-        this._component.removeEventListener(event, callback);
+    removeHostListener(event, callback, options) {
+        this._component.removeEventListener(event, callback, options);
     }
     addWindowListener(event, callback, options) {
         window.addEventListener(event, callback, options);

package/esm/core/base/base-component.d.ts

@@ -8,3 +8,40 @@ export interface IBaseComponent extends HTMLElement {
 /** Any Custom HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it. */
 export declare abstract class BaseComponent extends HTMLElement implements IBaseComponent {
 }
+export interface IBaseFormComponent<T = string> extends IBaseComponent {
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    readonly form: HTMLFormElement | null;
+    readonly labels: NodeList;
+    readonly validity: ValidityState;
+    readonly validationMessage: string;
+    readonly willValidate: boolean;
+    readonly internals: ElementInternals;
+    setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(error: string): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: T, reason: 'restore' | 'autocomplete'): void;
+    formDisabledCallback(isDisabled: boolean): void;
+}
+/** Any form associated Custom HTML element. */
+export declare abstract class BaseFormComponent<T = string> extends BaseComponent implements IBaseFormComponent<T> {
+    abstract disabled: boolean;
+    abstract required: boolean;
+    abstract name: string;
+    abstract get form(): HTMLFormElement | null;
+    abstract get labels(): NodeList;
+    abstract get validity(): ValidityState;
+    abstract get validationMessage(): string;
+    abstract get willValidate(): boolean;
+    abstract get internals(): ElementInternals;
+    abstract setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
+    abstract checkValidity(): boolean;
+    abstract reportValidity(): boolean;
+    abstract setCustomValidity(error: string): void;
+    abstract formResetCallback(): void;
+    abstract formStateRestoreCallback(state: T, reason: 'restore' | 'autocomplete'): void;
+    abstract formDisabledCallback(isDisabled: boolean): void;
+}

package/esm/core/base/base-component.js

@@ -6,3 +6,6 @@
 /** Any Custom HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it. */
 export class BaseComponent extends HTMLElement {
 }
+/** Any form associated Custom HTML element. */
+export class BaseFormComponent extends BaseComponent {
+}

package/esm/core/keyboard/key-manager.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export type CanNavigateCallback = (index: number) => boolean;
+export interface IKeyManagerConfig {
+    canNavigateCallback?: CanNavigateCallback;
+}
+export declare const NAVIGATION_KEYS: string[];
+export declare class KeyManager {
+    private _config?;
+    constructor(_config?: IKeyManagerConfig | undefined);
+    isNavigationKey({ key, ctrlKey, altKey, shiftKey, metaKey }: KeyboardEvent): boolean;
+    navigate(key: string, currentIndex: number, total: number): number;
+    calculateNextIndex(key: string, total: number): number;
+    canNavigateAtIndex(index: number): boolean;
+}

package/esm/core/keyboard/key-manager.js

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export const NAVIGATION_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'End', 'Home'];
+export class KeyManager {
+    constructor(_config) {
+        this._config = _config;
+    }
+    isNavigationKey({ key, ctrlKey, altKey, shiftKey, metaKey }) {
+        if (ctrlKey || altKey || shiftKey || metaKey) {
+            return false;
+        }
+        return NAVIGATION_KEYS.includes(key);
+    }
+    navigate(key, currentIndex, total) {
+        const nextIndex = currentIndex + this.calculateNextIndex(key, total);
+        if (!this.canNavigateAtIndex(nextIndex)) {
+            return this.navigate(key, nextIndex, total);
+        }
+        return nextIndex;
+    }
+    calculateNextIndex(key, total) {
+        switch (key) {
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                return -1;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                return 1;
+            case 'Home':
+                return 0;
+            case 'End':
+                return total - 1;
+            default:
+                return 0;
+        }
+    }
+    canNavigateAtIndex(index) {
+        var _a;
+        if (typeof ((_a = this._config) === null || _a === void 0 ? void 0 : _a.canNavigateCallback) === 'function') {
+            return this._config.canNavigateCallback.call(null, index);
+        }
+        return true;
+    }
+}

package/esm/core/utils/a11y-utils.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const forwardingAriaAttributes: string[];
+/**
+ * Gets an array of ARIA attribute names to be observed by a component.
+ * @param config An object indicating the part prefixes to append to the ARIA attribute names and
+ * whether to include unprefied names.
+ * @returns An array of observed ARIA attribute names.
+ */
+export declare function getObservedAriaAttributes(config: {
+    unprefixed?: boolean;
+    parts?: string[];
+}): string[];
+/**
+ * Sets ARIA attributes on one or more target elements to match those set on a source element. The
+ * source element is hidden from assistive technology to avoid duplicate semantics. ID dependent
+ * attributes are ignored.
+ * @param config A configuration object setting the observed attributes, the element to forward
+ * attributes from, an optional element to forward unprefixed attributes to and an optional object
+ * containing elements to forward prefixed attributes to. Attributes may target an element by
+ * following the naming pattern `"part:aria-*"`.
+ * @returns A `MutationObserver`.
+ */
+export declare function forwardAriaAttributes(config: {
+    observedAttributes: string[];
+    sourceEl: HTMLElement;
+    targetEl?: HTMLElement;
+    parts?: Record<string, HTMLElement>;
+}): MutationObserver;

package/esm/core/utils/a11y-utils.js

@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { toggleAttribute } from '@tylertech/forge-core';
+// Attributes referencing element IDs can't be forwarded across shadow boundaries
+export const forwardingAriaAttributes = [
+    'aria-atomic',
+    'aria-autocomplete',
+    'aria-busy',
+    'aria-checked',
+    'aria-colcount',
+    'aria-colindex',
+    'aria-colspan',
+    'aria-current',
+    'aria-description',
+    'aria-description',
+    'aria-disabled',
+    'aria-expanded',
+    'aria-haspopup',
+    'aria-hidden',
+    'aria-invalid',
+    'aria-keyshortcuts',
+    'aria-label',
+    'aria-level',
+    'aria-live',
+    'aria-modal',
+    'aria-multiline',
+    'aria-multiselectable',
+    'aria-orientation',
+    'aria-placeholder',
+    'aria-posinset',
+    'aria-pressed',
+    'aria-readonly',
+    'aria-relevant',
+    'aria-required',
+    'aria-roledescription',
+    'aria-rowcount',
+    'aria-rowindex',
+    'aria-rowspan',
+    'aria-selected',
+    'aria-setsize',
+    'aria-sort',
+    'aria-valuemax',
+    'aria-valuemin',
+    'aria-valuenow',
+    'aria-valuetext'
+];
+/**
+ * Gets an array of ARIA attribute names to be observed by a component.
+ * @param config An object indicating the part prefixes to append to the ARIA attribute names and
+ * whether to include unprefied names.
+ * @returns An array of observed ARIA attribute names.
+ */
+export function getObservedAriaAttributes(config) {
+    const observedAttributes = [];
+    if (config.unprefixed) {
+        observedAttributes.push(...forwardingAriaAttributes);
+    }
+    if (config.parts) {
+        config.parts.forEach(part => {
+            const partAttributes = forwardingAriaAttributes.map(attribute => `${part}:${attribute}`);
+            observedAttributes.push(...partAttributes);
+        });
+    }
+    return observedAttributes;
+}
+/**
+ * Sets ARIA attributes on one or more target elements to match those set on a source element. The
+ * source element is hidden from assistive technology to avoid duplicate semantics. ID dependent
+ * attributes are ignored.
+ * @param config A configuration object setting the observed attributes, the element to forward
+ * attributes from, an optional element to forward unprefixed attributes to and an optional object
+ * containing elements to forward prefixed attributes to. Attributes may target an element by
+ * following the naming pattern `"part:aria-*"`.
+ * @returns A `MutationObserver`.
+ */
+export function forwardAriaAttributes(config) {
+    // Set the source element's role to presentation to prevent duplicated ARIA attributes being
+    // seen by assistive technology
+    config.sourceEl.setAttribute('role', 'presentation');
+    // Sets an attribute on the targeted element
+    const forwardAttribute = (name) => {
+        var _a, _b;
+        const nameParts = name.split(':');
+        const partName = nameParts.length === 2 ? nameParts[0] : undefined;
+        const ariaName = nameParts.length === 2 ? nameParts[1] : nameParts[0];
+        const target = partName ? (_a = config.parts) === null || _a === void 0 ? void 0 : _a[partName] : config.targetEl;
+        if (!target) {
+            return;
+        }
+        const hasAttribute = config.sourceEl.hasAttribute(name);
+        const value = (_b = config.sourceEl.getAttribute(name)) !== null && _b !== void 0 ? _b : undefined;
+        toggleAttribute(target, hasAttribute, ariaName, value);
+    };
+    // First, forward any attributes already set on the source element
+    config.observedAttributes.forEach(attribute => {
+        forwardAttribute(attribute);
+    });
+    // Forward new and changed attributes as needed
+    const observerConfig = { attributeFilter: config.observedAttributes };
+    const callback = mutationList => {
+        mutationList.forEach(mutation => {
+            forwardAttribute(mutation.attributeName);
+        });
+    };
+    const observer = new MutationObserver(callback);
+    observer.observe(config.sourceEl, observerConfig);
+    return observer;
+}

package/esm/core/utils/index.d.ts

@@ -3,6 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+export * from './a11y-utils';
 export * from './date-utils';
 export * from './event-utils';
 export * from './svg-utils';

package/esm/core/utils/index.js

@@ -3,6 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+export * from './a11y-utils';
 export * from './date-utils';
 export * from './event-utils';
 export * from './svg-utils';

package/esm/core/utils/utils.d.ts

@@ -90,3 +90,11 @@ export declare function isPointerOverElement({ x, y }: {
  * @param value {string | null} - A selector string to query the DOM for the target element
  */
 export declare function locateTargetHeuristic(element: HTMLElement, id?: string | null): HTMLElement | null;
+/**
+ * Replaces an existing element with a new element, while optionally moving the children of the old element into the new element.
+ * @param oldElement The element to replace.
+ * @param newElement The element to replace with.
+ * @param preserveChildren Whether or not to preserve the children of the old element in the new element.
+ * @returns The new element.
+ */
+export declare function replaceElement(oldElement: HTMLElement, newElement: HTMLElement, preserveChildren?: boolean): HTMLElement;

package/esm/core/utils/utils.js

@@ -181,3 +181,18 @@ export function locateTargetHeuristic(element, id) {
     }
     return targetEl;
 }
+/**
+ * Replaces an existing element with a new element, while optionally moving the children of the old element into the new element.
+ * @param oldElement The element to replace.
+ * @param newElement The element to replace with.
+ * @param preserveChildren Whether or not to preserve the children of the old element in the new element.
+ * @returns The new element.
+ */
+export function replaceElement(oldElement, newElement, preserveChildren = true) {
+    if (preserveChildren) {
+        newElement.append(...oldElement.childNodes);
+    }
+    oldElement.insertAdjacentElement('beforebegin', newElement);
+    oldElement.remove();
+    return newElement;
+}

package/esm/date-picker/base/base-date-picker-adapter.d.ts

@@ -44,6 +44,7 @@ export interface IBaseDatePickerAdapter extends IBaseAdapter {
     setCalendarActiveDate(date: Date): void;
     getCalendarActiveDate(): Date | undefined;
     setCalendarYearRange(value: string): void;
+    setCalendarLocale(locale: string | undefined): void;
     propagateCalendarKey(evt: KeyboardEvent): void;
 }
 export declare abstract class BaseDatePickerAdapter<T extends BaseComponent> extends BaseAdapter<T> implements IBaseDatePickerAdapter {
@@ -91,6 +92,7 @@ export declare abstract class BaseDatePickerAdapter<T extends BaseComponent> ext
     setCalendarActiveDate(date: Date): void;
     getCalendarActiveDate(): Date | undefined;
     setCalendarYearRange(value: string): void;
+    setCalendarLocale(locale: string | undefined): void;
     propagateCalendarKey(evt: KeyboardEvent): void;
     tryCreateToggle(): void;
     protected _createToggleElement(): HTMLElement;

package/esm/date-picker/base/base-date-picker-adapter.js

@@ -118,6 +118,12 @@ export class BaseDatePickerAdapter extends BaseAdapter {
             this._calendarDropdown.calendar.yearRange = value;
         }
     }
+    setCalendarLocale(locale) {
+        var _a;
+        if ((_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.calendar) {
+            this._calendarDropdown.locale = locale;
+        }
+    }
     propagateCalendarKey(evt) {
         var _a, _b;
         (_b = (_a = this._calendarDropdown) === null || _a === void 0 ? void 0 : _a.calendar) === null || _b === void 0 ? void 0 : _b.handleKey(evt);

package/esm/date-picker/base/base-date-picker-constants.d.ts

@@ -41,6 +41,7 @@ export declare const BASE_DATE_PICKER_CONSTANTS: {
         SHOW_CLEAR: string;
         DISABLED_DAYS_OF_WEEK: string;
         YEAR_RANGE: string;
+        LOCALE: string;
     };
     attributes: {
         TOGGLE: string;

package/esm/date-picker/base/base-date-picker-constants.js

@@ -17,7 +17,8 @@ const observedAttributes = {
     SHOW_TODAY: 'show-today',
     SHOW_CLEAR: 'show-clear',
     DISABLED_DAYS_OF_WEEK: 'disabled-days-of-week',
-    YEAR_RANGE: 'year-range'
+    YEAR_RANGE: 'year-range',
+    LOCALE: 'locale'
 };
 const attributes = {
     TOGGLE: 'forge-date-picker-toggle'

package/esm/date-picker/base/base-date-picker-foundation.d.ts

@@ -27,6 +27,7 @@ export interface IBaseDatePickerFoundation<TValue> extends ICustomElementFoundat
     showToday: boolean;
     showClear: boolean;
     yearRange: string;
+    locale: string | undefined;
 }
 export declare abstract class BaseDatePickerFoundation<TAdapter extends IBaseDatePickerAdapter, TPublicValue, TPrivateValue = TPublicValue> implements IBaseDatePickerFoundation<TPublicValue> {
     protected _adapter: TAdapter;
@@ -52,6 +53,7 @@ export declare abstract class BaseDatePickerFoundation<TAdapter extends IBaseDat
     protected _showClear: boolean;
     protected _disabledDaysOfWeek: DayOfWeek[];
     protected _yearRange: string;
+    protected _locale: string | undefined;
     protected _isInitialized: boolean;
     private _inputListener;
     private _inputKeydownListener;
@@ -149,4 +151,6 @@ export declare abstract class BaseDatePickerFoundation<TAdapter extends IBaseDat
     set showClear(value: boolean);
     get yearRange(): string;
     set yearRange(value: string);
+    get locale(): string | undefined;
+    set locale(value: string | undefined);
 }

package/esm/date-picker/base/base-date-picker-foundation.js

@@ -92,10 +92,10 @@ export class BaseDatePickerFoundation {
         this._handleInput(this._adapter.getInputValue());
     }
     _onInputFocus(evt) {
-        this._adapter.selectInputText();
         if (this.masked && this.showMaskFormat) {
             this._applyMask();
         }
+        this._adapter.selectInputText();
     }
     _onInputBlur(evt) {
         if (this.masked && this.showMaskFormat) {
@@ -124,7 +124,8 @@ export class BaseDatePickerFoundation {
             preventFocus: true,
             menuAnimation: 'fade',
             fixedHeight: true,
-            selectionFollowsMonth: true
+            selectionFollowsMonth: true,
+            locale: this._locale
         };
         const dropdownConfig = {
             popupClasses: this._popupClasses,
@@ -609,4 +610,15 @@ export class BaseDatePickerFoundation {
             }
         }
     }
+    get locale() {
+        return this._locale;
+    }
+    set locale(value) {
+        if (this._locale !== value) {
+            this._locale = value;
+            if (this._isInitialized && this._open) {
+                this._adapter.setCalendarLocale(this._locale);
+            }
+        }
+    }
 }

package/esm/date-picker/base/base-date-picker.d.ts

@@ -30,6 +30,7 @@ export interface IBaseDatePickerComponent<TValue> extends IBaseComponent {
     showClear: boolean;
     disabledDaysOfWeek: DayOfWeek[];
     yearRange: string;
+    locale: string | undefined;
 }
 export declare abstract class BaseDatePickerComponent<TPublicValue, TPrivateValue, TFoundation extends BaseDatePickerFoundation<IBaseDatePickerAdapter, TPublicValue, TPrivateValue>> extends BaseComponent implements IBaseDatePickerComponent<TPublicValue> {
     protected _foundation: TFoundation;
@@ -79,4 +80,6 @@ export declare abstract class BaseDatePickerComponent<TPublicValue, TPrivateValu
     disableDayCallback: (date: Date) => boolean;
     /** Sets the year range. */
     yearRange: string;
+    /** Sets the locale to use. */
+    locale: string | undefined;
 }

package/esm/date-picker/base/base-date-picker.js

@@ -67,6 +67,9 @@ export class BaseDatePickerComponent extends BaseComponent {
             case BASE_DATE_PICKER_CONSTANTS.observedAttributes.YEAR_RANGE:
                 this.yearRange = newValue;
                 break;
+            case BASE_DATE_PICKER_CONSTANTS.observedAttributes.LOCALE:
+                this.locale = newValue;
+                break;
         }
     }
 }
@@ -133,3 +136,6 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], BaseDatePickerComponent.prototype, "yearRange", void 0);
+__decorate([
+    FoundationProperty()
+], BaseDatePickerComponent.prototype, "locale", void 0);

package/esm/date-picker/date-picker-adapter.js

@@ -89,7 +89,7 @@ export class DatePickerAdapter extends BaseDatePickerAdapter {
         return this._inputElement.disabled;
     }
     isInputFocused() {
-        return getActiveElement() === this._inputElement;
+        return getActiveElement(this._component.ownerDocument) === this._inputElement;
     }
     getInputValue() {
         return this._inputMask ? this._inputMask.maskedValue : this._inputElement.value;

package/esm/date-range-picker/date-range-picker-adapter.js

@@ -144,7 +144,7 @@ export class DateRangePickerAdapter extends BaseDatePickerAdapter {
         if (target && this._toInputElement === target || this._fromInputElement === target) {
             return true;
         }
-        const activeEl = getActiveElement();
+        const activeEl = getActiveElement(this._component.ownerDocument);
         return this._toInputElement === activeEl || this._fromInputElement === activeEl;
     }
     getInputValue() {

package/esm/date-range-picker/date-range-picker-foundation.js

@@ -271,11 +271,11 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
         }
     }
     _onToInputFocus() {
-        this._adapter.selectToInputText();
         if (this.masked && this._showMaskFormat) {
             this._initializeMask();
             this._initializeToMask();
         }
+        this._adapter.selectToInputText();
     }
     _onToInputBlur(evt) {
         if (this._masked && !this._adapter.isInputFocused(evt.relatedTarget)) {
@@ -288,11 +288,11 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation {
         }
     }
     _onInputFocus(evt) {
-        this._adapter.selectInputText();
         if (this.masked && this._showMaskFormat) {
             this._initializeMask();
             this._initializeToMask();
         }
+        this._adapter.selectInputText();
     }
     _onInputBlur(evt) {
         if (this.masked && !this._adapter.isInputFocused(evt.relatedTarget)) {

package/esm/dialog/dialog-adapter.js

@@ -140,7 +140,7 @@ export class DialogAdapter extends BaseAdapter {
     }
     captureActiveElement() {
         var _a;
-        this._activeElement = getActiveElement();
+        this._activeElement = getActiveElement(this._component.ownerDocument);
         (_a = this._activeElement) === null || _a === void 0 ? void 0 : _a.blur();
     }
     tryRestoreActiveElement() {