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

package/esm/index.d.ts

@@ -13,6 +13,7 @@ export * from './banner';
 export * from './bottom-sheet';
 export * from './busy-indicator';
 export * from './button';
+export * from './button-area';
 export * from './button-toggle';
 export * from './calendar';
 export * from './card';
@@ -36,6 +37,7 @@ export * from './focus-indicator';
 export * from './icon-button';
 export * from './inline-message';
 export * from './keyboard-shortcut';
+export * from './label';
 export * from './label-value';
 export * from './linear-progress';
 export * from './list';
@@ -52,6 +54,7 @@ export * from './scaffold';
 export * from './select';
 export * from './skeleton';
 export * from './slider';
+export * from './split-button';
 export * from './split-view';
 export * from './state-layer';
 export * from './stepper';

package/esm/index.js

@@ -6,7 +6,7 @@
 /// <reference types="./typings" />
 /**
  * @license
- * Copyright (c) 2022 Tyler Technologies, Inc.
+ * Copyright (c) 2024 Tyler Technologies, Inc.
  * License: Apache-2.0
  */
 import { defineCustomElements } from '@tylertech/forge-core';
@@ -39,6 +39,7 @@ import { FocusIndicatorComponent } from './focus-indicator';
 import { IconButtonComponent } from './icon-button';
 import { InlineMessageComponent } from './inline-message';
 import { KeyboardShortcutComponent } from './keyboard-shortcut';
+import { LabelComponent } from './label';
 import { LabelValueComponent } from './label-value';
 import { LinearProgressComponent } from './linear-progress';
 import { ListComponent } from './list';
@@ -72,6 +73,7 @@ import { ViewComponent, ViewSwitcherComponent } from './view-switcher';
 import { IconComponent } from './icon';
 import { SelectDropdownComponent } from './select/select-dropdown';
 import { StackComponent } from './stack';
+import { ButtonAreaComponent } from './button-area';
 export * from './accordion';
 export * from './app-bar';
 export * from './autocomplete';
@@ -82,6 +84,7 @@ export * from './banner';
 export * from './bottom-sheet';
 export * from './busy-indicator';
 export * from './button';
+export * from './button-area';
 export * from './button-toggle';
 export * from './calendar';
 export * from './card';
@@ -105,6 +108,7 @@ export * from './focus-indicator';
 export * from './icon-button';
 export * from './inline-message';
 export * from './keyboard-shortcut';
+export * from './label';
 export * from './label-value';
 export * from './linear-progress';
 export * from './list';
@@ -121,6 +125,7 @@ export * from './scaffold';
 export * from './select';
 export * from './skeleton';
 export * from './slider';
+export * from './split-button';
 export * from './split-view';
 export * from './state-layer';
 export * from './stepper';
@@ -146,6 +151,7 @@ const CUSTOM_ELEMENTS = [
     BottomSheetComponent,
     BusyIndicatorComponent,
     ButtonComponent,
+    ButtonAreaComponent,
     ButtonToggleComponent,
     ButtonToggleGroupComponent,
     CalendarComponent,
@@ -172,6 +178,7 @@ const CUSTOM_ELEMENTS = [
     IconButtonComponent,
     InlineMessageComponent,
     KeyboardShortcutComponent,
+    LabelComponent,
     LabelValueComponent,
     LinearProgressComponent,
     ListComponent,

package/esm/keyboard-shortcut/keyboard-shortcut-constants.d.ts

@@ -23,6 +23,7 @@ export declare const KEYBOARD_SHORTCUT_CONSTANTS: {
     };
 };
 export declare const textInputTypes: string[];
+export type KeyboardShortcutActivateCallback = (event: KeyboardEvent) => void;
 export interface IKeyCombination {
     key: string;
     modifier?: string;

package/esm/keyboard-shortcut/keyboard-shortcut-foundation.d.ts

@@ -5,6 +5,7 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IKeyboardShortcutAdapter } from './keyboard-shortcut-adapter';
+import { KeyboardShortcutActivateCallback } from './keyboard-shortcut-constants';
 export interface IKeyboardShortcutFoundation extends ICustomElementFoundation {
     key: string | null | undefined;
     target: string;
@@ -14,6 +15,7 @@ export interface IKeyboardShortcutFoundation extends ICustomElementFoundation {
     capture: boolean;
     useCode: boolean;
     disabled: boolean;
+    activateCallback: KeyboardShortcutActivateCallback | null | undefined;
 }
 export declare class KeyboardShortcutFoundation implements IKeyboardShortcutFoundation {
     private _adapter;
@@ -25,6 +27,7 @@ export declare class KeyboardShortcutFoundation implements IKeyboardShortcutFoun
     private _capture;
     private _useCode;
     private _disabled;
+    private _activateCallback;
     private _keyCombinations;
     private _keyDownListener;
     constructor(_adapter: IKeyboardShortcutAdapter);
@@ -60,4 +63,7 @@ export declare class KeyboardShortcutFoundation implements IKeyboardShortcutFoun
     /** Gets/sets whether the event will be emitted. */
     get disabled(): boolean;
     set disabled(value: boolean);
+    /** Gets/sets the activation callback. */
+    get activateCallback(): KeyboardShortcutActivateCallback | null | undefined;
+    set activateCallback(value: KeyboardShortcutActivateCallback | null | undefined);
 }

package/esm/keyboard-shortcut/keyboard-shortcut-foundation.js

@@ -48,6 +48,7 @@ export class KeyboardShortcutFoundation {
     }
     _onKeyDown(evt) {
         // Here we may check if the target element is disabled, but disabled elements typically can't receive focus anyway
+        var _a;
         // Ignore the event if it originates from a text field
         // TODO: bypass this and allow it if a modifier key is used?
         if (!this._allowWhileTyping && elementAcceptsTextInput(evt.target)) {
@@ -58,6 +59,7 @@ export class KeyboardShortcutFoundation {
                 evt.preventDefault();
             }
             this._adapter.emitHostEvent(KEYBOARD_SHORTCUT_CONSTANTS.events.ACTIVATE, evt);
+            (_a = this._activateCallback) === null || _a === void 0 ? void 0 : _a.call(null, evt);
         }
     }
     /** Sets the key combinations. */
@@ -161,4 +163,11 @@ export class KeyboardShortcutFoundation {
             }
         }
     }
+    /** Gets/sets the activation callback. */
+    get activateCallback() {
+        return this._activateCallback;
+    }
+    set activateCallback(value) {
+        this._activateCallback = value;
+    }
 }

package/esm/keyboard-shortcut/keyboard-shortcut.d.ts

@@ -3,6 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { KeyboardShortcutActivateCallback } from './keyboard-shortcut-constants';
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
 export interface IKeyboardShortcutComponent extends IBaseComponent {
     key: string | null | undefined;
@@ -14,6 +15,7 @@ export interface IKeyboardShortcutComponent extends IBaseComponent {
     capture: boolean;
     useCode: boolean;
     disabled: boolean;
+    activateCallback: KeyboardShortcutActivateCallback | null | undefined;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -54,4 +56,6 @@ export declare class KeyboardShortcutComponent extends BaseComponent implements
     useCode: boolean;
     /** Gets/sets whether the callback will be called. */
     disabled: boolean;
+    /** Gets/sets whether the activation callback. */
+    activateCallback: KeyboardShortcutActivateCallback | null | undefined;
 }

package/esm/keyboard-shortcut/keyboard-shortcut.js

@@ -97,6 +97,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], KeyboardShortcutComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], KeyboardShortcutComponent.prototype, "activateCallback", void 0);
 KeyboardShortcutComponent = __decorate([
     CustomElement({
         name: KEYBOARD_SHORTCUT_CONSTANTS.elementName

package/esm/label/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './label-adapter';
+export * from './label-constants';
+export * from './label-foundation';
+export * from './label';
+export * from './label-aware';
+export declare function defineLabelComponent(): void;

package/esm/label/index.js

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { LabelComponent } from './label';
+export * from './label-adapter';
+export * from './label-constants';
+export * from './label-foundation';
+export * from './label';
+export * from './label-aware';
+export function defineLabelComponent() {
+    defineCustomElement(LabelComponent);
+}

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

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core';
+import { ILabelComponent } from './label';
+export interface ILabelAdapter extends IBaseAdapter {
+    destroy(): void;
+    hasTargetElement(): boolean;
+    getTargetElement(): HTMLElement | null;
+    setTargetElement(el: HTMLElement | null): void;
+    trySetTarget(value: string | null): void;
+    clickTarget(): void;
+    updateTargetLabel(): void;
+    addSlotChangeListener(callback: EventListener): void;
+    addMutationObserver(callback: MutationCallback): void;
+    removeMutationObserver(): void;
+}
+export declare class LabelAdapter extends BaseAdapter<ILabelComponent> implements ILabelAdapter {
+    private _slotElement;
+    private _targetElement;
+    private _mutationObserver?;
+    constructor(component: ILabelComponent);
+    destroy(): void;
+    hasTargetElement(): boolean;
+    getTargetElement(): HTMLElement | null;
+    setTargetElement(el: HTMLElement | null): void;
+    trySetTarget(value: string | null): void;
+    /**
+     * Calls the target's `labelClickedCallback`.
+     */
+    clickTarget(): void;
+    /**
+     * Computes the text content of the label then passes it to the target's `labelChangedCallback`.
+     */
+    updateTargetLabel(): void;
+    addSlotChangeListener(callback: EventListener): void;
+    addMutationObserver(callback: MutationCallback): void;
+    removeMutationObserver(): void;
+    /**
+     * Returns `true` if the provided element is label aware, `false` otherwise. If `false` a warning
+     * is logged to the console.
+     */
+    private _checkLabelAwareness;
+    /**
+     * Returns a label aware element queried from the provided id or a child element of the
+     * component or `null` if none exists.
+     */
+    private _locateTargetElement;
+}

package/esm/label/label-adapter.js

@@ -0,0 +1,102 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement } from '@tylertech/forge-core';
+import { BaseAdapter } from '../core';
+import { isLabelAware } from './label-aware';
+import { LABEL_CONSTANTS } from './label-constants';
+export class LabelAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._targetElement = null;
+        this._slotElement = getShadowElement(component, LABEL_CONSTANTS.selectors.SLOT);
+    }
+    destroy() {
+        var _a;
+        (_a = this._targetElement) === null || _a === void 0 ? void 0 : _a.labelChangedCallback(null);
+        this._targetElement = null;
+    }
+    hasTargetElement() {
+        return !!this._targetElement;
+    }
+    getTargetElement() {
+        return this._targetElement;
+    }
+    setTargetElement(el) {
+        if (el && this._checkLabelAwareness(el)) {
+            this._targetElement = el;
+            return;
+        }
+        this._targetElement = null;
+    }
+    trySetTarget(value) {
+        this._targetElement = this._locateTargetElement(value);
+    }
+    /**
+     * Calls the target's `labelClickedCallback`.
+     */
+    clickTarget() {
+        var _a;
+        (_a = this._targetElement) === null || _a === void 0 ? void 0 : _a.labelClickedCallback();
+    }
+    /**
+     * Computes the text content of the label then passes it to the target's `labelChangedCallback`.
+     */
+    updateTargetLabel() {
+        var _a;
+        const value = this._component.innerText.trim();
+        (_a = this._targetElement) === null || _a === void 0 ? void 0 : _a.labelChangedCallback(value);
+    }
+    addSlotChangeListener(callback) {
+        this._slotElement.addEventListener('slotchange', callback);
+    }
+    addMutationObserver(callback) {
+        this._mutationObserver = new MutationObserver(callback);
+        this._mutationObserver.observe(this._component, {
+            subtree: true,
+            characterData: true,
+            childList: true
+        });
+        // Run the callback once to capture the current state of the label
+        callback([], this._mutationObserver);
+    }
+    ;
+    removeMutationObserver() {
+        var _a;
+        (_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._mutationObserver = undefined;
+    }
+    /**
+     * Returns `true` if the provided element is label aware, `false` otherwise. If `false` a warning
+     * is logged to the console.
+     */
+    _checkLabelAwareness(el) {
+        if (!isLabelAware(el)) {
+            console.warn('Label target element is not label aware.', el);
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Returns a label aware element queried from the provided id or a child element of the
+     * component or `null` if none exists.
+     */
+    _locateTargetElement(id) {
+        let targetEl;
+        if (id) {
+            const rootNode = this._component.getRootNode();
+            targetEl = rootNode.querySelector(`#${id}`);
+        }
+        else {
+            // Used for nested elements within the label component
+            const selector = LABEL_CONSTANTS.labelableChildSelectors.join(',');
+            targetEl = this._component.querySelector(selector);
+        }
+        if (targetEl && !this._checkLabelAwareness(targetEl)) {
+            return null;
+        }
+        return targetEl;
+    }
+}

package/esm/label/label-aware.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export interface ILabelAware {
+    labelClickedCallback(): void;
+    labelChangedCallback(value: string | null): void;
+}
+/**
+ * Determines if an object is label aware.
+ * @param obj - The object to check.
+ * @returns True if the object is label aware, false otherwise.
+ */
+export declare const isLabelAware: (obj: any) => obj is ILabelAware;

package/esm/label/label-aware.js

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Determines if an object is label aware.
+ * @param obj - The object to check.
+ * @returns True if the object is label aware, false otherwise.
+ */
+export const isLabelAware = (obj) => {
+    return typeof obj.labelClickedCallback === 'function' && typeof obj.labelChangedCallback === 'function';
+};

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

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const LABEL_CONSTANTS: {
+    elementName: "forge-label";
+    selectors: {
+        ROOT: string;
+        SLOT: string;
+    };
+    attributes: {
+        FOR: string;
+        DYNAMIC: string;
+    };
+    labelableChildSelectors: ("forge-switch" | "forge-icon-button" | "forge-checkbox" | "forge-button")[];
+};

package/esm/label/label-constants.js

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BUTTON_CONSTANTS } from '../button';
+import { CHECKBOX_CONSTANTS } from '../checkbox';
+import { COMPONENT_NAME_PREFIX } from '../constants';
+import { ICON_BUTTON_CONSTANTS } from '../icon-button';
+import { SWITCH_CONSTANTS } from '../switch';
+const elementName = `${COMPONENT_NAME_PREFIX}label`;
+const attributes = {
+    FOR: 'for',
+    DYNAMIC: 'dynamic'
+};
+const selectors = {
+    ROOT: '.forge-label',
+    SLOT: 'slot'
+};
+const labelableChildSelectors = [
+    CHECKBOX_CONSTANTS.elementName,
+    SWITCH_CONSTANTS.elementName,
+    BUTTON_CONSTANTS.elementName,
+    ICON_BUTTON_CONSTANTS.elementName
+];
+export const LABEL_CONSTANTS = {
+    elementName,
+    selectors,
+    attributes,
+    labelableChildSelectors
+};

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

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { ILabelAdapter } from './label-adapter';
+export interface ILabelFoundation extends ICustomElementFoundation {
+    for: string | null | undefined;
+    forElement: HTMLElement | null | undefined;
+    dynamic: boolean;
+    disconnect(): void;
+    update(): void;
+}
+export declare class LabelFoundation implements ILabelFoundation {
+    private _adapter;
+    private _for;
+    private _forElement;
+    private _dynamic;
+    private _isConnected;
+    private readonly _clickListener;
+    private readonly _slotChangeListener;
+    private readonly _mutationCallback;
+    constructor(_adapter: ILabelAdapter);
+    initialize(): void;
+    disconnect(): void;
+    update(): void;
+    private _handleClick;
+    private _handleSlotChange;
+    private _handleMutation;
+    private _connect;
+    private _disconnect;
+    private _tryConnect;
+    get for(): string | null | undefined;
+    set for(value: string | null | undefined);
+    get forElement(): HTMLElement | null | undefined;
+    set forElement(value: HTMLElement | null | undefined);
+    get dynamic(): boolean;
+    set dynamic(value: boolean);
+}

package/esm/label/label-foundation.js

@@ -0,0 +1,106 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { LABEL_CONSTANTS } from './label-constants';
+export class LabelFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._dynamic = false;
+        this._isConnected = false;
+        this._clickListener = (evt) => this._handleClick(evt);
+        this._slotChangeListener = () => this._handleSlotChange();
+        this._mutationCallback = () => this._handleMutation();
+    }
+    initialize() {
+        var _a;
+        this._adapter.addSlotChangeListener(this._slotChangeListener);
+        this._adapter.trySetTarget((_a = this._for) !== null && _a !== void 0 ? _a : null);
+        if (this._adapter.hasTargetElement()) {
+            this._connect();
+        }
+    }
+    disconnect() {
+        this._disconnect();
+        this._adapter.destroy();
+    }
+    update() {
+        this._adapter.updateTargetLabel();
+    }
+    _handleClick(evt) {
+        // Prevent duplicate clicks from a nested target element
+        if (evt.target === this._adapter.getTargetElement()) {
+            return;
+        }
+        this._adapter.clickTarget();
+    }
+    _handleSlotChange() {
+        if (!this._for && !this._forElement) {
+            this._adapter.trySetTarget(null);
+            this._tryConnect();
+        }
+    }
+    _handleMutation() {
+        this._adapter.updateTargetLabel();
+    }
+    _connect() {
+        this._adapter.addHostListener('click', this._clickListener);
+        this._adapter.updateTargetLabel();
+        if (this._dynamic) {
+            this._adapter.addMutationObserver(this._mutationCallback);
+        }
+        this._isConnected = true;
+    }
+    _disconnect() {
+        this._adapter.removeHostListener('click', this._clickListener);
+        this._adapter.removeMutationObserver();
+        this._isConnected = false;
+    }
+    _tryConnect() {
+        if (!this._adapter.hasTargetElement()) {
+            this._disconnect();
+        }
+        else if (!this._isConnected) {
+            this._connect();
+        }
+    }
+    get for() {
+        return this._for;
+    }
+    set for(value) {
+        var _a, _b;
+        if (this._for !== value) {
+            this._for = value;
+            this._adapter.toggleHostAttribute(LABEL_CONSTANTS.attributes.FOR, !!this.for, (_a = this.for) !== null && _a !== void 0 ? _a : undefined);
+            this._adapter.trySetTarget((_b = this._for) !== null && _b !== void 0 ? _b : null);
+            this._tryConnect();
+        }
+    }
+    get forElement() {
+        return this._forElement;
+    }
+    set forElement(value) {
+        var _a;
+        if (this._forElement !== value) {
+            this._forElement = value;
+            this._adapter.setTargetElement((_a = this._forElement) !== null && _a !== void 0 ? _a : null);
+            this._tryConnect();
+        }
+    }
+    get dynamic() {
+        return this._dynamic;
+    }
+    set dynamic(value) {
+        if (this._dynamic !== value) {
+            this._dynamic = value;
+            this._adapter.toggleHostAttribute(LABEL_CONSTANTS.attributes.DYNAMIC, this._dynamic);
+            if (!this._dynamic) {
+                this._adapter.removeMutationObserver();
+            }
+            else if (this._adapter.hasTargetElement()) {
+                this._adapter.addMutationObserver(this._mutationCallback);
+            }
+        }
+    }
+}

package/esm/label/label.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../core';
+export interface ILabelComponent extends IBaseComponent {
+    for: string | null | undefined;
+    forElement: HTMLElement | null | undefined;
+    dynamic: boolean;
+    update(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-label': ILabelComponent;
+    }
+}
+/**
+ * @tag forge-label
+ *
+ * @summary The Forge Label component is used to associate a text label with a compatible Forge
+ * component.
+ *
+ * @property {string | null | undefined} for - The id of the associated element.
+ * @property {HTMLElement | null | undefined} forElement - The associated element.
+ * @property {boolean} dynamic - Propagates changes in the label's text content to the associated element.
+ *
+ * @attribute {string} for - The id of the associated form component.
+ * @attribute {boolean} dynamic - Propagates changes in the label's text content to the associated element.
+ *
+ * @method update - Updates the targetted element with the label's current text content.
+ *
+ * @csspart label - Styles the label's root element.
+ */
+export declare class LabelComponent extends BaseComponent implements ILabelComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    for: string | null | undefined;
+    forElement: HTMLElement | null | undefined;
+    dynamic: boolean;
+    /**
+     * Updates the targetted element with the label's current text content.
+     */
+    update(): void;
+}