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

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,108 @@
+/**
+ * @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 or if the event originates
+        // from within the target element
+        const targetEl = this._adapter.getTargetElement();
+        if (evt.target === targetEl || (targetEl === null || targetEl === void 0 ? void 0 : targetEl.contains(evt.target))) {
+            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;
+}

package/esm/label/label.js

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, FoundationProperty, attachShadowTemplate, coerceBoolean } from '@tylertech/forge-core';
+import { BaseComponent } from '../core';
+import { LabelAdapter } from './label-adapter';
+import { LABEL_CONSTANTS } from './label-constants';
+import { LabelFoundation } from './label-foundation';
+const template = '<template><span class=\"forge-label\" part=\"label\"><slot></slot></span></template>';
+const style = ':host{display:inline-block}:host([hidden]){display:none}.forge-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label-font-weight,400);line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-text-decoration,inherit);display:contents;cursor:default}';
+/**
+ * @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.
+ */
+let LabelComponent = class LabelComponent extends BaseComponent {
+    static get observedAttributes() {
+        return [
+            LABEL_CONSTANTS.attributes.FOR,
+            LABEL_CONSTANTS.attributes.DYNAMIC
+        ];
+    }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, style);
+        this._foundation = new LabelFoundation(new LabelAdapter(this));
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case LABEL_CONSTANTS.attributes.FOR:
+                this.for = newValue;
+                break;
+            case LABEL_CONSTANTS.attributes.DYNAMIC:
+                this.dynamic = coerceBoolean(newValue);
+                break;
+        }
+    }
+    /**
+     * Updates the targetted element with the label's current text content.
+     */
+    update() {
+        this._foundation.update();
+    }
+};
+__decorate([
+    FoundationProperty()
+], LabelComponent.prototype, "for", void 0);
+__decorate([
+    FoundationProperty()
+], LabelComponent.prototype, "forElement", void 0);
+__decorate([
+    FoundationProperty()
+], LabelComponent.prototype, "dynamic", void 0);
+LabelComponent = __decorate([
+    CustomElement({
+        name: LABEL_CONSTANTS.elementName
+    })
+], LabelComponent);
+export { LabelComponent };

package/esm/linear-progress/linear-progress-adapter.d.ts

@@ -6,18 +6,18 @@
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
 import { ILinearProgressComponent } from './linear-progress';
 export interface ILinearProgressAdapter extends IBaseAdapter {
+    initialize(): void;
     setDeterminate(value: boolean): void;
     setProgress(value: number): void;
     setBuffer(value: number): void;
-    setAriaLabel(value: string): void;
 }
 export declare class LinearProgressAdapter extends BaseAdapter<ILinearProgressComponent> implements ILinearProgressAdapter {
     private readonly _rootElement;
     private readonly _progressElement;
     private readonly _bufferElement;
     constructor(component: ILinearProgressComponent);
+    initialize(): void;
     setDeterminate(value: boolean): void;
     setProgress(value: number): void;
     setBuffer(value: number): void;
-    setAriaLabel(value: string): void;
 }

package/esm/linear-progress/linear-progress-adapter.js

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getShadowElement, toggleAttribute } from '@tylertech/forge-core';
+import { getShadowElement } from '@tylertech/forge-core';
 import { BaseAdapter } from '../core/base/base-adapter';
 import { LINEAR_PROGRESS_CONSTANTS } from './linear-progress-constants';
 export class LinearProgressAdapter extends BaseAdapter {
@@ -13,22 +13,30 @@ export class LinearProgressAdapter extends BaseAdapter {
         this._progressElement = getShadowElement(component, LINEAR_PROGRESS_CONSTANTS.selectors.PROGRESS);
         this._bufferElement = getShadowElement(component, LINEAR_PROGRESS_CONSTANTS.selectors.BUFFER);
     }
+    initialize() {
+        if (!this._component.hasAttribute('role')) {
+            this._component.setAttribute('role', 'progressbar');
+        }
+        if (!this._component.hasAttribute('aria-valuemin')) {
+            this._component.setAttribute('aria-valuemin', '0');
+        }
+        if (!this._component.hasAttribute('aria-valuemax')) {
+            this._component.setAttribute('aria-valuemax', '1');
+        }
+    }
     setDeterminate(value) {
         if (!value) {
-            this._rootElement.removeAttribute('aria-valuenow');
+            this._component.removeAttribute('aria-valuenow');
             this._progressElement.style.transform = '';
             this._bufferElement.style.transform = '';
         }
         this._rootElement.classList.toggle(LINEAR_PROGRESS_CONSTANTS.classes.INDETERMINATE, !value);
     }
     setProgress(value) {
-        this._rootElement.setAttribute('aria-valuenow', `${value}`);
+        this._component.setAttribute('aria-valuenow', `${value}`);
         this._progressElement.style.transform = `scaleX(${value * 100}%)`;
     }
     setBuffer(value) {
         this._bufferElement.style.transform = `scaleX(${value * 100}%)`;
     }
-    setAriaLabel(value) {
-        toggleAttribute(this._rootElement, !!value, 'aria-label', value);
-    }
 }

package/esm/linear-progress/linear-progress-constants.d.ts

@@ -3,6 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Theme } from '../constants';
 export declare const LINEAR_PROGRESS_CONSTANTS: {
     elementName: "forge-linear-progress";
     classes: {
@@ -17,6 +18,7 @@ export declare const LINEAR_PROGRESS_CONSTANTS: {
         DETERMINATE: string;
         PROGRESS: string;
         BUFFER: string;
-        ARIA_LABEL: string;
+        THEME: string;
     };
 };
+export type LinearProgressTheme = Theme;

package/esm/linear-progress/linear-progress-constants.js

@@ -17,7 +17,7 @@ const attributes = {
     DETERMINATE: 'determinate',
     PROGRESS: 'progress',
     BUFFER: 'buffer',
-    ARIA_LABEL: 'data-aria-label'
+    THEME: 'theme'
 };
 export const LINEAR_PROGRESS_CONSTANTS = {
     elementName,

package/esm/linear-progress/linear-progress-foundation.d.ts

@@ -5,22 +5,27 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { ILinearProgressAdapter } from './linear-progress-adapter';
+import { LinearProgressTheme } from './linear-progress-constants';
 export interface ICircularProgressFoundation extends ICustomElementFoundation {
     determinate: boolean;
     progress: number;
     buffer: number;
+    theme: LinearProgressTheme;
 }
 export declare class LinearProgressFoundation {
     private _adapter;
     private _determinate;
     private _progress;
     private _buffer;
+    private _theme;
     constructor(_adapter: ILinearProgressAdapter);
-    set ariaLabel(value: string);
+    initialize(): void;
     get determinate(): boolean;
     set determinate(value: boolean);
     get progress(): number;
     set progress(value: number);
     get buffer(): number;
     set buffer(value: number);
+    get theme(): LinearProgressTheme;
+    set theme(value: LinearProgressTheme);
 }

package/esm/linear-progress/linear-progress-foundation.js

@@ -10,9 +10,10 @@ export class LinearProgressFoundation {
         this._determinate = false;
         this._progress = 0;
         this._buffer = 1;
+        this._theme = 'primary';
     }
-    set ariaLabel(value) {
-        this._adapter.setAriaLabel(value);
+    initialize() {
+        this._adapter.initialize();
     }
     get determinate() {
         return this._determinate;
@@ -23,7 +24,7 @@ export class LinearProgressFoundation {
             this._adapter.setBuffer(this._determinate ? this._buffer : 1);
             this._adapter.setProgress(this._determinate ? this._progress : 0);
             this._adapter.setDeterminate(this._determinate);
-            this._adapter.toggleHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.DETERMINATE, value);
+            this._adapter.toggleHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.DETERMINATE, this._determinate);
         }
     }
     get progress() {
@@ -35,7 +36,7 @@ export class LinearProgressFoundation {
             if (this._determinate) {
                 this._adapter.setProgress(this._progress);
             }
-            this._adapter.setHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.PROGRESS, value.toString());
+            this._adapter.setHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.PROGRESS, this._progress.toString());
         }
     }
     get buffer() {
@@ -47,7 +48,16 @@ export class LinearProgressFoundation {
             if (this._determinate) {
                 this._adapter.setBuffer(this._buffer);
             }
-            this._adapter.setHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.BUFFER, value.toString());
+            this._adapter.setHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.BUFFER, this._buffer.toString());
+        }
+    }
+    get theme() {
+        return this._theme;
+    }
+    set theme(value) {
+        if (this._theme !== value) {
+            this._theme = value;
+            this._adapter.toggleHostAttribute(LINEAR_PROGRESS_CONSTANTS.attributes.THEME, !!this._theme, this._theme);
         }
     }
 }