@tylertech/forge 2.0.0

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

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { removeAllChildren, removeElement } from '@tylertech/forge-core';
+export class BaseComponentDelegate {
+    constructor(_config = {}) {
+        this._config = _config;
+        this._initialize();
+    }
+    get element() {
+        return this._element;
+    }
+    destroy() {
+        this.disconnect();
+    }
+    disconnect() {
+        if (!this._element.isConnected) {
+            return;
+        }
+        removeElement(this._element);
+    }
+    _initialize() {
+        var _a, _b, _c, _d;
+        this._element = this._build();
+        if (!this._element) {
+            throw new Error(`Invalid component instance: ${this._element}`);
+        }
+        this._applyProps();
+        this._applyStyle();
+        this._applyAttrs();
+        (_b = (_a = this._config.options) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.append(this._element);
+        if ((_c = this._config.options) === null || _c === void 0 ? void 0 : _c.children) {
+            this._applyChildren();
+        }
+        (_d = this._configure) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
+    _applyProps() {
+        if (this._config.props) {
+            Object.assign(this._element, this._config.props);
+        }
+    }
+    _applyStyle() {
+        var _a, _b;
+        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.style) {
+            const keys = Object.keys(this._config.options.style);
+            for (const key of keys) {
+                (_b = this._element) === null || _b === void 0 ? void 0 : _b.style.setProperty(key, this._config.options.style[key]);
+            }
+        }
+    }
+    _applyAttrs() {
+        var _a, _b;
+        if ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.attributes) {
+            if (this._config.options.attributes instanceof Map) {
+                for (const [key, value] of Array.from(this._config.options.attributes)) {
+                    this._element.setAttribute(key, value);
+                }
+            }
+            else {
+                const keys = Object.keys(this._config.options.attributes);
+                for (const key of keys) {
+                    (_b = this._element) === null || _b === void 0 ? void 0 : _b.setAttribute(key, this._config.options.attributes[key]);
+                }
+            }
+        }
+    }
+    _applyChildren() {
+        var _a;
+        if (this._element.hasChildNodes()) {
+            removeAllChildren(this._element);
+        }
+        if (!((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.children)) {
+            return;
+        }
+        if (typeof this._config.options.children === 'string') {
+            this._element.innerHTML = this._config.options.children;
+        }
+        else {
+            this._element.appendChild(this._config.options.children);
+        }
+    }
+}

package/esm/core/delegates/form-field-component-delegate.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponentDelegate, IBaseComponentDelegate, IBaseComponentDelegateOptions, IBaseComponentDelegateConfig } from './base-component-delegate';
+export declare type FormFieldComponentDelegateProps<T> = Partial<T>;
+export interface IFormFieldComponentDelegateOptions extends IBaseComponentDelegateOptions {
+}
+export interface IFormFieldComponentDelegate<T extends HTMLElement> extends IBaseComponentDelegate<T> {
+    value: unknown;
+    disabled: boolean;
+    onChange(cb: (value: unknown) => void): void;
+    onFocus(cb: (evt: Event) => void): void;
+    onBlur(cb: (evt: Event) => void): void;
+}
+export declare abstract class FormFieldComponentDelegate<T extends HTMLElement, K extends IFormFieldComponentDelegateOptions> extends BaseComponentDelegate<T, K> implements IFormFieldComponentDelegate<T> {
+    abstract value: unknown;
+    abstract disabled: boolean;
+    constructor(config?: IBaseComponentDelegateConfig<T, K>);
+    abstract onChange(listener: (value: unknown) => void): void;
+    abstract onFocus(cb: (evt: Event) => void): void;
+    abstract onBlur(cb: (evt: Event) => void): void;
+}

package/esm/core/delegates/form-field-component-delegate.js

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponentDelegate } from './base-component-delegate';
+export class FormFieldComponentDelegate extends BaseComponentDelegate {
+    constructor(config) {
+        super(config);
+    }
+}

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

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './base-component-delegate';
+export * from './form-field-component-delegate';

package/esm/core/delegates/index.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './base-component-delegate';
+export * from './form-field-component-delegate';

package/esm/core/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './base';
+export * from './delegates';
+export * from './utils';
+export * from './mask';

package/esm/core/index.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './base';
+export * from './delegates';
+export * from './utils';
+export * from './mask';

package/esm/core/mask/date-input-mask.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import IMask, { InputMask, Masked } from 'imask';
+export interface IDateInputMaskOptions {
+    showMaskFormat?: boolean;
+    pattern?: string;
+    useBlockCharPlaceholder?: boolean;
+    prepareCallback?: (value: string, masked: Masked<string>, flags: IMask.AppendFlags, maskInstance: InputMask<IMask.MaskedPatternOptions>) => string;
+    onChange?: (value: string) => void;
+}
+export declare const DEFAULT_DATE_MASK = "0`0{/}`0`0{/}`0`0`0`0";
+export declare class DateInputMask {
+    private _element;
+    private _options;
+    private _mask;
+    private _maskOptions;
+    private _acceptListener;
+    constructor(_element: HTMLInputElement, _options?: IDateInputMaskOptions);
+    destroy(): void;
+    resolve(value: string): string;
+    private _onAccept;
+    private get _isDefaultMask();
+    private _createOptions;
+    private _prepare;
+    private _prepareDefault;
+    private _setMaskedValueAdjusted;
+    updateMask(): void;
+    get maskedValue(): string;
+    set maskedValue(value: string);
+    get unmaskedValue(): string;
+    set unmaskedValue(value: string);
+}

package/esm/core/mask/date-input-mask.js

@@ -0,0 +1,155 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { InputMask, createMask, MaskedRange } from 'imask';
+import { isNumeric } from '@tylertech/forge-core';
+export const DEFAULT_DATE_MASK = '0`0{/}`0`0{/}`0`0`0`0';
+export class DateInputMask {
+    constructor(_element, _options = {}) {
+        this._element = _element;
+        this._options = _options;
+        this._maskOptions = this._createOptions();
+        this._mask = new InputMask(this._element, this._maskOptions);
+        if (this._options.onChange) {
+            this._acceptListener = () => this._onAccept();
+            this._mask.on('accept', this._acceptListener);
+        }
+    }
+    destroy() {
+        if (this._acceptListener) {
+            this._mask.off('accept', this._acceptListener);
+        }
+        this._mask.destroy();
+    }
+    resolve(value) {
+        const masked = createMask(this._maskOptions);
+        return masked.resolve(value);
+    }
+    _onAccept() {
+        if (typeof this._options.onChange === 'function') {
+            this._options.onChange(this._mask.value);
+        }
+    }
+    get _isDefaultMask() {
+        return this._options.pattern === DEFAULT_DATE_MASK;
+    }
+    _createOptions() {
+        const options = {
+            mask: this._options.pattern || DEFAULT_DATE_MASK,
+            lazy: this._options.showMaskFormat === undefined ? false : !this._options.showMaskFormat,
+            overwrite: true,
+            prepare: (value, masked, flags) => this._prepare(value, masked, flags, this._mask),
+            blocks: {
+                MM: {
+                    mask: MaskedRange,
+                    autofix: true,
+                    from: 1,
+                    to: 12,
+                    maxLength: 2
+                },
+                DD: {
+                    mask: MaskedRange,
+                    autofix: true,
+                    from: 1,
+                    to: 31,
+                    maxLength: 2
+                },
+                YYYY: {
+                    mask: MaskedRange,
+                    autofix: true,
+                    from: 0,
+                    to: 9999,
+                    maxLength: 4
+                }
+            }
+        };
+        return options;
+    }
+    _prepare(value, masked, flags, maskInstance) {
+        if (typeof this._options.prepareCallback === 'function') {
+            return this._options.prepareCallback.call(null, value, masked, flags, this._mask);
+        }
+        return this._isDefaultMask ? this._prepareDefault(value, masked, flags, maskInstance) : value;
+    }
+    _prepareDefault(value, masked, flags, maskInstance) {
+        if (!flags.input || !value.length || !maskInstance) {
+            return value;
+        }
+        // eslint-disable-next-line @typescript-eslint/dot-notation
+        const isAllSelected = maskInstance['_selection'] && maskInstance['_selection'].end === 10;
+        const currentValue = isAllSelected ? '' : maskInstance.value;
+        if (!isNumeric(value)) {
+            // Before we ignore this character let's do some checks for common scenarios where the user enters a slash to help with coercion
+            if (value === '/') {
+                const isFinalMonthChar = maskInstance.cursorPos === 2 && currentValue.length === 1;
+                if (isFinalMonthChar) {
+                    // The user attempted to press the slash key after entering a single month character so let's pad the value
+                    this._setMaskedValueAdjusted(currentValue.padStart(2, '0'), 3);
+                    return '/';
+                }
+                const isFinalDayChar = maskInstance.cursorPos === 5 && currentValue.length === 4;
+                if (isFinalDayChar) {
+                    // The user attempted to press the slash key after entering a single day character so let's pad the value
+                    const newValue = `${currentValue.substring(0, 3)}${currentValue[3].padStart(2, '0').padStart(2, '0')}`;
+                    this._setMaskedValueAdjusted(newValue, 3);
+                    return '/';
+                }
+            }
+            return value;
+        }
+        // We know that the value is numeric so let's coerce it to a number type for comparison below
+        const numValue = +value;
+        // Attempt to pad a leading zero to the month segment
+        const isFirstMonthChar = maskInstance.cursorPos === 1 && numValue > 1;
+        if (isFirstMonthChar) {
+            // Replace just the month segment with the padded value and update cursor position
+            const newValue = `${String(numValue).padStart(2, '0')}${currentValue.slice(2)}`;
+            this._setMaskedValueAdjusted(newValue, 3);
+            return '/';
+        }
+        // Attempt to pad a leading zero to the day segment
+        const isFirstDayChar = (maskInstance.cursorPos === 3 || maskInstance.cursorPos === 4) && numValue > 3;
+        if (isFirstDayChar) {
+            // Replace just the day segment with the padded value and update cursor position
+            const newValue = `${currentValue.substring(0, 3)}${String(numValue).padStart(2, '0')}${currentValue.slice(5)}`;
+            this._setMaskedValueAdjusted(newValue, 3);
+            return '/';
+        }
+        // Attempt to automatically add a slash after the month or day segment is complete and/or move cursor to after slash
+        if (!this._options.showMaskFormat) {
+            if (maskInstance.cursorPos === 2 || maskInstance.cursorPos === 5) {
+                let newValue;
+                if (maskInstance.cursorPos === 2) {
+                    newValue = `${currentValue.substring(0, 1)}${numValue}/${currentValue.slice(3)}`;
+                }
+                else {
+                    newValue = `${currentValue.substring(0, 4)}${numValue}/${currentValue.slice(6)}`;
+                }
+                this._setMaskedValueAdjusted(newValue, 2);
+                return '';
+            }
+        }
+        return value;
+    }
+    _setMaskedValueAdjusted(value, position) {
+        this._mask.unmaskedValue = value;
+        window.requestAnimationFrame(() => this._mask.updateCursor(this._mask.cursorPos + position));
+    }
+    updateMask() {
+        this._mask.updateValue();
+    }
+    get maskedValue() {
+        return this._mask.value;
+    }
+    set maskedValue(value) {
+        this._mask.value = value;
+    }
+    get unmaskedValue() {
+        return this._mask.unmaskedValue;
+    }
+    set unmaskedValue(value) {
+        this._mask.unmaskedValue = value;
+    }
+}

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

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './date-input-mask';
+export * from './time-input-mask';

package/esm/core/mask/index.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './date-input-mask';
+export * from './time-input-mask';

package/esm/core/mask/time-input-mask.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import IMask, { InputMask, Masked } from 'imask';
+export interface ITimeInputMaskOptions {
+    showMaskFormat?: boolean;
+    use24HourTime?: boolean;
+    showSeconds?: boolean;
+    onChange?: (value: string) => void;
+    prepareCallback?: (value: string, masked: Masked<string>, flags: IMask.AppendFlags, maskInstance: InputMask<IMask.AnyMaskedOptions>) => string;
+}
+export declare const TWELVE_HOUR_TIME_MASK = "0`0{:}`0`0 `AM";
+export declare const TWELVE_HOUR_TIME_MASK_WITH_SECONDS = "0`0{:}`0`0{:}`0`0 `AM";
+export declare const TWENTY_FOUR_HOUR_TIME_MASK = "0`0{:}`0`0";
+export declare const TWENTY_FOUR_HOUR_TIME_MASK_WITH_SECONDS = "0`0{:}`0`0{:}`0`0";
+export declare class TimeInputMask {
+    private _element;
+    private _options;
+    private _mask;
+    private _maskOptions;
+    private _acceptListener;
+    constructor(_element: HTMLInputElement, _options?: ITimeInputMaskOptions);
+    destroy(): void;
+    resolve(value: string): string;
+    update(): void;
+    private _onAccept;
+    private _createOptions;
+    private _prepare;
+    private _prepareDefault;
+    private _setMaskedValueAdjusted;
+    private _getMaskFormat;
+    get maskedValue(): string;
+    set maskedValue(value: string);
+    get unmaskedValue(): string;
+    set unmaskedValue(value: string);
+}

package/esm/core/mask/time-input-mask.js

@@ -0,0 +1,163 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { InputMask, createMask, MaskedEnum } from 'imask';
+import { isNumeric } from '@tylertech/forge-core';
+export const TWELVE_HOUR_TIME_MASK = '0`0{:}`0`0 `AM';
+export const TWELVE_HOUR_TIME_MASK_WITH_SECONDS = '0`0{:}`0`0{:}`0`0 `AM';
+export const TWENTY_FOUR_HOUR_TIME_MASK = '0`0{:}`0`0';
+export const TWENTY_FOUR_HOUR_TIME_MASK_WITH_SECONDS = '0`0{:}`0`0{:}`0`0';
+export class TimeInputMask {
+    constructor(_element, _options = {}) {
+        this._element = _element;
+        this._options = _options;
+        this._maskOptions = this._createOptions();
+        this._mask = new InputMask(this._element, this._maskOptions);
+        if (this._options.onChange) {
+            this._acceptListener = () => this._onAccept();
+            this._mask.on('accept', this._acceptListener);
+        }
+    }
+    destroy() {
+        if (this._acceptListener) {
+            this._mask.off('accept', this._acceptListener);
+        }
+        this._mask.destroy();
+    }
+    resolve(value) {
+        const masked = createMask(this._maskOptions);
+        return masked.resolve(value);
+    }
+    update() {
+        this._mask.updateValue();
+    }
+    _onAccept() {
+        if (typeof this._options.onChange === 'function') {
+            this._options.onChange(this._mask.value);
+        }
+    }
+    _createOptions() {
+        return {
+            mask: this._getMaskFormat(),
+            overwrite: true,
+            lazy: !this._options.showMaskFormat,
+            prepare: (value, masked, flags) => this._prepare(value, masked, flags, this._mask),
+            blocks: {
+                A: {
+                    mask: MaskedEnum,
+                    enum: ['a', 'A', 'p', 'P']
+                },
+                M: {
+                    mask: MaskedEnum,
+                    enum: ['m', 'M']
+                }
+            }
+        };
+    }
+    _prepare(value, masked, flags, maskInstance) {
+        if (typeof this._options.prepareCallback === 'function') {
+            return this._options.prepareCallback.call(null, value, masked, flags, this._mask);
+        }
+        return this._prepareDefault(value, masked, flags, maskInstance).toUpperCase();
+    }
+    _prepareDefault(value, masked, flags, maskInstance) {
+        if (!flags.input || !value.length || !maskInstance) {
+            return value;
+        }
+        // eslint-disable-next-line @typescript-eslint/dot-notation
+        const isAllSelected = maskInstance['_selection'] && maskInstance['_selection'].end === 8;
+        const currentValue = isAllSelected ? '' : maskInstance.value;
+        if (!isNumeric(value)) {
+            // Before we ignore this character let's do some checks for common scenarios where the user enters a colon to help with coercion
+            if (value === ':') {
+                const isFinalHoursChar = maskInstance.cursorPos === 2 && currentValue.length === 1;
+                if (isFinalHoursChar) {
+                    // The user attempted to press the colon key after entering a single hour character so let's pad the value
+                    this._setMaskedValueAdjusted(currentValue.padStart(2, '0'), 3);
+                    return ':';
+                }
+                const isFinalMinutesChar = maskInstance.cursorPos === 5 && currentValue.length === 4;
+                if (isFinalMinutesChar) {
+                    // The user attempted to press the colon key after entering a single minute character so let's pad the value
+                    const newValue = `${currentValue.substring(0, 3)}${currentValue[3].padStart(2, '0').padStart(2, '0')}`;
+                    this._setMaskedValueAdjusted(newValue, 3);
+                    return ':';
+                }
+                if (this._options.showSeconds) {
+                    const isFinalSecondsChar = maskInstance.cursorPos === 8 && currentValue.length === 6;
+                    if (isFinalSecondsChar) {
+                        // The user attempted to press the colon key after entering a single second character so let's pad the value
+                        const newValue = `${currentValue.substring(0, 6)}${currentValue[5].padStart(2, '0')}${currentValue.slice(8)}`;
+                        this._setMaskedValueAdjusted(newValue, 3);
+                        return ':';
+                    }
+                }
+            }
+            return value;
+        }
+        const numValue = +value;
+        // Attempt to pad a leading zero to the hours segment
+        const isFirstHourChar = maskInstance.cursorPos === 1 && numValue > 2;
+        if (isFirstHourChar) {
+            // Replace just the hours segment with the padded value and update cursor position
+            const newValue = `${String(numValue).padStart(2, '0')}${currentValue.slice(2)}`;
+            this._setMaskedValueAdjusted(newValue, 3);
+            return ':';
+        }
+        // Attempt to pad a leading zero to the minutes segment
+        const isFirstMinuteChar = (maskInstance.cursorPos === 3 || maskInstance.cursorPos === 4) && numValue > 5;
+        if (isFirstMinuteChar) {
+            // Replace just the minute segment with the padded value and update cursor position
+            const newValue = `${currentValue.substring(0, 3)}${String(numValue).padStart(2, '0')}${currentValue.slice(5)}`;
+            this._setMaskedValueAdjusted(newValue, 3);
+            return ':';
+        }
+        // Attempt to pad a leading zero to the seconds segment
+        if (this._options.showSeconds) {
+            const isFirstSecondChar = (maskInstance.cursorPos === 6 || maskInstance.cursorPos === 7) && numValue > 5;
+            if (isFirstSecondChar) {
+                // Replace just the second segment with the padded value and update cursor position
+                const newValue = `${currentValue.substring(0, 6)}${String(numValue).padStart(2, '0')}${currentValue.slice(8)}`;
+                this._setMaskedValueAdjusted(newValue, 3);
+                return ':';
+            }
+        }
+        // Attempt to automatically add a colon after the hours or minutes segment is complete and/or move cursor to after colon
+        if (!this._options.showMaskFormat && (maskInstance.cursorPos === 2 || (this._options.showSeconds && maskInstance.cursorPos === 5))) {
+            let newValue;
+            if (maskInstance.cursorPos === 2) {
+                newValue = `${currentValue.substring(0, 1)}${numValue}:${currentValue.slice(3)}`;
+            }
+            else {
+                newValue = `${currentValue.substring(0, 4)}${numValue}:${currentValue.slice(6)}`;
+            }
+            this._setMaskedValueAdjusted(newValue, 2);
+            return '';
+        }
+        return value;
+    }
+    _setMaskedValueAdjusted(value, position) {
+        this._mask.unmaskedValue = value;
+        window.requestAnimationFrame(() => this._mask.updateCursor(this._mask.cursorPos + position));
+    }
+    _getMaskFormat() {
+        if (this._options.use24HourTime) {
+            return this._options.showSeconds ? TWENTY_FOUR_HOUR_TIME_MASK_WITH_SECONDS : TWENTY_FOUR_HOUR_TIME_MASK;
+        }
+        return this._options.showSeconds ? TWELVE_HOUR_TIME_MASK_WITH_SECONDS : TWELVE_HOUR_TIME_MASK;
+    }
+    get maskedValue() {
+        return this._mask.value;
+    }
+    set maskedValue(value) {
+        this._mask.value = value;
+    }
+    get unmaskedValue() {
+        return this._mask.unmaskedValue;
+    }
+    set unmaskedValue(value) {
+        this._mask.unmaskedValue = value;
+    }
+}

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

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const ISO_8601_REGEX: RegExp;
+export declare const ISO_TIMEZONE_REGEX: RegExp;
+/**
+ * Parses a date string value to a `Date` object in local time.
+ * @param str The date string value.
+ */
+export declare function parseDateString(value: string): Date | null;
+/**
+ * Formats a `Date` to a specified format.
+ * @param str The date string value.
+ */
+export declare function formatDate(date: Date): string;
+/**
+ * Determines if two date objects are equal.
+ *
+ * Note: Time values are ignored.
+ * @param first The date to compare.
+ * @param second The date to compare the first date to.
+ * @returns A boolean whether the two dates are equivalent.
+ */
+export declare function isSameDate(first: Date | null, second: Date | null): boolean;
+/**
+ * Returns the last date on a month.
+ *
+ * @param month The month.
+ * @param year The year of the month, needed for February otherwise optional.
+ * @returns The last date of the given month.
+ */
+export declare function getLastDateOfMonth(month: number, year?: number): Date;
+/**
+ * Returns the number of days in a month.
+ *
+ * @param month The month to find the length of.
+ * @param year The year to check within, needed for February otherwise optional.
+ * @returns The number of days in the month.
+ */
+export declare function getMonthLength(month: number, year?: number): number;