@tylertech/forge 2.0.0

package/esm/theme/theme-utils.js

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COLOR_CONSTANTS } from './color-constants';
+export function getThemeColor(type) {
+    switch (type) {
+        case 'primary':
+            return COLOR_CONSTANTS.themeColors.primary;
+        case 'secondary':
+            return COLOR_CONSTANTS.themeColors.secondary;
+        case 'success':
+            return COLOR_CONSTANTS.themeColors.success;
+        case 'warning':
+            return COLOR_CONSTANTS.themeColors.warning;
+        case 'danger':
+            return COLOR_CONSTANTS.themeColors.danger;
+        case 'info':
+            return COLOR_CONSTANTS.themeColors.info;
+        default:
+            throw new Error(`Invalid theme type provided: ${type}`);
+    }
+}
+export function getColor(type, hue) {
+    hue = hue || '500';
+    switch (type) {
+        case 'red':
+            return COLOR_CONSTANTS.redPalette[hue];
+        case 'pink':
+            return COLOR_CONSTANTS.pinkPalette[hue];
+        case 'purple':
+            return COLOR_CONSTANTS.purplePalette[hue];
+        case 'deep-purple':
+            return COLOR_CONSTANTS.deepPurplePalette[hue];
+        case 'indigo':
+            return COLOR_CONSTANTS.indigoPalette[hue];
+        case 'blue':
+            return COLOR_CONSTANTS.bluePalette[hue];
+        case 'light-blue':
+            return COLOR_CONSTANTS.lightBluePalette[hue];
+        case 'cyan':
+            return COLOR_CONSTANTS.cyanPalette[hue];
+        case 'teal':
+            return COLOR_CONSTANTS.tealPalette[hue];
+        case 'green':
+            return COLOR_CONSTANTS.greenPalette[hue];
+        case 'light-green':
+            return COLOR_CONSTANTS.lightGreenPalette[hue];
+        case 'lime':
+            return COLOR_CONSTANTS.limePalette[hue];
+        case 'yellow':
+            return COLOR_CONSTANTS.limePalette[hue];
+        case 'amber':
+            return COLOR_CONSTANTS.amberPalette[hue];
+        case 'orange':
+            return COLOR_CONSTANTS.orangePalette[hue];
+        case 'deep-orange':
+            return COLOR_CONSTANTS.deepOrangePalette[hue];
+        case 'brown':
+            return COLOR_CONSTANTS.brownPalette[hue];
+        case 'grey':
+            return COLOR_CONSTANTS.greyPalette[hue];
+        case 'blue-grey':
+            return COLOR_CONSTANTS.blueGreyPalette[hue];
+    }
+    return '';
+}

package/esm/time-picker/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './time-picker-adapter';
+export * from './time-picker-component-delegate';
+export * from './time-picker-constants';
+export * from './time-picker-foundation';
+export * from './time-picker-utils';
+export * from './time-picker';
+export declare function defineTimePickerComponent(): void;

package/esm/time-picker/index.js

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { TimePickerComponent } from './time-picker';
+export * from './time-picker-adapter';
+export * from './time-picker-component-delegate';
+export * from './time-picker-constants';
+export * from './time-picker-foundation';
+export * from './time-picker-utils';
+export * from './time-picker';
+export function defineTimePickerComponent() {
+    defineCustomElement(TimePickerComponent);
+}

package/esm/time-picker/time-picker-adapter.d.ts

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ITimePickerComponent } from './time-picker';
+import { BaseAdapter } from '../core';
+import { ITimeInputMaskOptions } from '../core/mask/time-input-mask';
+import { IListDropdownConfig, IListDropdownOption } from '../list-dropdown/list-dropdown-constants';
+export interface ITimePickerAdapter extends BaseAdapter<ITimePickerComponent> {
+    initialize(): void;
+    initializeMask(options: ITimeInputMaskOptions): void;
+    destroy(): void;
+    destroyMask(): void;
+    initializeAccessibility(identifier: string): void;
+    addInputListener(type: string, listener: (event: Event) => void, capture?: boolean): void;
+    removeInputListener(type: string, listener: (event: Event) => void, capture?: boolean): void;
+    addToggleListener(type: string, listener: (event: Event) => void): void;
+    removeToggleListener(type: string, listener: (event: Event) => void): void;
+    hasInputElement(): boolean;
+    tryCreateToggle(): void;
+    tryFocusInput(): void;
+    tryBlurInput(): void;
+    selectInputText(): void;
+    getInputValue(): string;
+    setInputValue(value: string, emitEvents: boolean): void;
+    isInputDisabled(): boolean;
+    isInputFocused(): boolean;
+    setDisabled(isDisabled: boolean): void;
+    attachDropdown(config: IListDropdownConfig): void;
+    detachDropdown(): void;
+    setActiveDescendant(id: string): void;
+    propagateKey(key: string): void;
+    getTargetElementWidth(selector: string): number;
+    emitInputEvent(type: string, data?: any): void;
+    setInputReadonly(value: boolean): void;
+    setToggleDisabled(value: boolean): void;
+    activateFirstOption(): void;
+    getActiveOption(): IListDropdownOption | undefined;
+}
+export declare class TimePickerAdapter extends BaseAdapter<ITimePickerComponent> implements ITimePickerAdapter {
+    private _inputElement;
+    private _toggleElement?;
+    private _inputMask?;
+    private _listDropdown?;
+    private _targetElement?;
+    constructor(component: ITimePickerComponent);
+    initialize(): void;
+    initializeMask(options: ITimeInputMaskOptions): void;
+    destroy(): void;
+    destroyMask(): void;
+    initializeAccessibility(identifier: string): void;
+    addInputListener(type: string, listener: (event: Event) => void, capture?: boolean): void;
+    removeInputListener(type: string, listener: (event: Event) => void, capture?: boolean): void;
+    addToggleListener(type: string, listener: (event: Event) => void): void;
+    removeToggleListener(type: string, listener: (event: Event) => void): void;
+    hasInputElement(): boolean;
+    tryCreateToggle(): void;
+    tryFocusInput(): void;
+    tryBlurInput(): void;
+    selectInputText(): void;
+    isInputDisabled(): boolean;
+    isInputFocused(): boolean;
+    setInputValue(value: string, emitEvents: boolean): void;
+    getInputValue(): string;
+    setDisabled(isDisabled: boolean): void;
+    attachDropdown(config: IListDropdownConfig): void;
+    detachDropdown(): void;
+    propagateKey(key: string): void;
+    setActiveDescendant(id: string): void;
+    getTargetElementWidth(selector: string): number;
+    private _emitInputEvent;
+    emitInputEvent(type: string, data?: any): void;
+    setInputReadonly(value: boolean): void;
+    setToggleDisabled(value: boolean): void;
+    activateFirstOption(): void;
+    getActiveOption(): IListDropdownOption | undefined;
+    private _getTargetElement;
+    private _getDefaultTargetElement;
+}

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

@@ -0,0 +1,208 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement, emitEvent, getActiveElement, toggleAttribute } from '@tylertech/forge-core';
+import { BaseAdapter } from '../core';
+import { TIME_PICKER_CONSTANTS } from './time-picker-constants';
+import { TimeInputMask } from '../core/mask/time-input-mask';
+import { TEXT_FIELD_CONSTANTS } from '../text-field';
+import { ICON_BUTTON_CONSTANTS } from '../icon-button';
+import { ICON_CONSTANTS } from '../icon';
+import { ListDropdown } from '../list-dropdown';
+export class TimePickerAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+    }
+    initialize() {
+        this._inputElement = this._component.querySelector(TIME_PICKER_CONSTANTS.selectors.INPUT);
+    }
+    initializeMask(options) {
+        if (this._inputMask) {
+            this._inputMask.destroy();
+        }
+        this._inputMask = new TimeInputMask(this._inputElement, options);
+    }
+    destroy() {
+        this._targetElement = undefined;
+        this._toggleElement = undefined;
+        this._inputElement = undefined;
+    }
+    destroyMask() {
+        if (this._inputMask) {
+            this._inputMask.destroy();
+            this._inputMask = undefined;
+        }
+    }
+    initializeAccessibility(identifier) {
+        this._inputElement.setAttribute('autocomplete', 'off');
+        this._inputElement.setAttribute('autocorrect', 'off');
+        this._inputElement.setAttribute('autocapitalize', 'off');
+        this._inputElement.setAttribute('spellcheck', 'false');
+        this._inputElement.setAttribute('role', 'combobox');
+        this._inputElement.setAttribute('aria-live', 'assertive');
+        this._inputElement.setAttribute('aria-atomic', 'true');
+        this._inputElement.setAttribute('aria-haspopup', 'true');
+        this._inputElement.setAttribute('aria-expanded', 'false');
+    }
+    addInputListener(type, listener, capture) {
+        this._inputElement.addEventListener(type, listener, { capture });
+    }
+    removeInputListener(type, listener, capture) {
+        if (this._inputElement) {
+            this._inputElement.removeEventListener(type, listener, { capture });
+        }
+    }
+    addToggleListener(type, listener) {
+        if (this._toggleElement) {
+            this._toggleElement.addEventListener(type, listener);
+        }
+    }
+    removeToggleListener(type, listener) {
+        if (this._toggleElement) {
+            this._toggleElement.removeEventListener(type, listener);
+        }
+    }
+    hasInputElement() {
+        return !!this._inputElement;
+    }
+    tryCreateToggle() {
+        const textField = this._component.querySelector(TEXT_FIELD_CONSTANTS.elementName);
+        const toggleElement = this._component.querySelector(TIME_PICKER_CONSTANTS.selectors.TOGGLE);
+        if (textField) {
+            const existingIconButton = textField.querySelector(`${ICON_BUTTON_CONSTANTS.elementName}[slot=trailing]`);
+            if (existingIconButton || toggleElement) {
+                this._toggleElement = (existingIconButton || toggleElement);
+                return;
+            }
+            const iconButtonElement = document.createElement(ICON_BUTTON_CONSTANTS.elementName);
+            iconButtonElement.slot = 'trailing';
+            iconButtonElement.dense = true;
+            iconButtonElement.densityLevel = 3;
+            iconButtonElement.style.marginRight = '4px'; // Override default trailing slot margin in text-field
+            const buttonElement = document.createElement('button');
+            buttonElement.type = 'button';
+            buttonElement.tabIndex = -1;
+            buttonElement.setAttribute('aria-label', 'Toggle time dropdown');
+            const iconElement = document.createElement(ICON_CONSTANTS.elementName);
+            iconElement.name = 'clock_outline';
+            buttonElement.appendChild(iconElement);
+            iconButtonElement.appendChild(buttonElement);
+            textField.appendChild(iconButtonElement);
+            this._toggleElement = iconButtonElement;
+        }
+        else if (toggleElement) {
+            this._toggleElement = toggleElement;
+        }
+    }
+    tryFocusInput() {
+        this._inputElement.select();
+    }
+    tryBlurInput() {
+        this._inputElement.blur();
+    }
+    selectInputText() {
+        this._inputElement.select();
+    }
+    isInputDisabled() {
+        return this._inputElement.disabled;
+    }
+    isInputFocused() {
+        return getActiveElement() === this._inputElement;
+    }
+    setInputValue(value, emitEvents) {
+        if (this._inputElement.value === value) {
+            return;
+        }
+        this._inputElement.value = value;
+        if (this._inputMask) {
+            this._inputMask.update();
+        }
+        if (emitEvents) {
+            this._emitInputEvent('change');
+            this._emitInputEvent('input');
+        }
+    }
+    getInputValue() {
+        return this._inputMask ? this._inputMask.maskedValue : this._inputElement.value;
+    }
+    setDisabled(isDisabled) {
+        this._inputElement.disabled = isDisabled;
+        this._inputElement.setAttribute('aria-disabled', isDisabled.toString());
+        this.setToggleDisabled(isDisabled);
+    }
+    attachDropdown(config) {
+        this._listDropdown = new ListDropdown(this._inputElement, config);
+        this._listDropdown.open();
+        this._inputElement.setAttribute('aria-controls', `list-dropdown-popup-${config.id}`);
+    }
+    detachDropdown() {
+        if (this._listDropdown) {
+            this._listDropdown.close();
+            this._listDropdown.destroy();
+            this._listDropdown = undefined;
+        }
+        this._inputElement.removeAttribute('aria-controls');
+    }
+    propagateKey(key) {
+        var _a;
+        (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.handleKey(key);
+    }
+    setActiveDescendant(id) {
+        toggleAttribute(this._inputElement, !!id, 'aria-activedescendant', id);
+    }
+    getTargetElementWidth(selector) {
+        const targetElement = this._getTargetElement(selector);
+        return targetElement.getBoundingClientRect().width;
+    }
+    _emitInputEvent(type) {
+        this._inputElement.dispatchEvent(new Event(type));
+    }
+    emitInputEvent(type, data) {
+        emitEvent(this._inputElement, type, data);
+    }
+    setInputReadonly(value) {
+        this._inputElement.readOnly = value;
+    }
+    setToggleDisabled(value) {
+        if (this._toggleElement) {
+            this._toggleElement.setAttribute('aria-disabled', value.toString());
+            if ('disabled' in this._toggleElement) {
+                this._toggleElement.disabled = value;
+            }
+            else {
+                const button = this._toggleElement.querySelector('button');
+                if (button) {
+                    button.disabled = value;
+                }
+            }
+        }
+    }
+    activateFirstOption() {
+        var _a;
+        (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.activateFirstOption();
+    }
+    getActiveOption() {
+        var _a;
+        return (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.getActiveOption();
+    }
+    _getTargetElement(selector) {
+        if (this._targetElement) {
+            return this._targetElement;
+        }
+        this._targetElement = selector ? this._component.querySelector(selector) || this._getDefaultTargetElement() : this._getDefaultTargetElement();
+        return this._targetElement;
+    }
+    _getDefaultTargetElement() {
+        // This component is often used with the text-field, if so, let's target our popup around one if its internal elements for proper alignnment
+        const textField = this._component.querySelector(TEXT_FIELD_CONSTANTS.elementName);
+        if (textField && textField.shadowRoot) {
+            const textFieldRoot = getShadowElement(textField, TEXT_FIELD_CONSTANTS.selectors.ROOT);
+            if (textFieldRoot) {
+                return textFieldRoot;
+            }
+        }
+        return this._component; // Otherwise we just use the time-picker host as the target
+    }
+}

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

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IBaseComponentDelegateConfig } from '../core/delegates/base-component-delegate';
+import { FormFieldComponentDelegate, IFormFieldComponentDelegateOptions } from '../core/delegates/form-field-component-delegate';
+import { ITextFieldComponent, ITextFieldComponentDelegateConfig } from '../text-field';
+import { ITimePickerComponent } from './time-picker';
+export declare type TimePickerComponentDelegateProps = Partial<ITimePickerComponent>;
+export interface ITimePickerComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
+    textFieldDelegateConfig?: ITextFieldComponentDelegateConfig;
+}
+export interface ITimePickerComponentDelegateConfig extends IBaseComponentDelegateConfig<ITimePickerComponent, ITimePickerComponentDelegateOptions> {
+}
+export declare class TimePickerComponentDelegate extends FormFieldComponentDelegate<ITimePickerComponent, ITimePickerComponentDelegateOptions> {
+    private _textFieldDelegate;
+    constructor(config?: ITimePickerComponentDelegateConfig);
+    protected _build(): ITimePickerComponent;
+    get inputElement(): HTMLInputElement;
+    get textFieldElement(): ITextFieldComponent;
+    get value(): any;
+    set value(value: any);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get invalid(): boolean;
+    set invalid(value: boolean);
+    onChange(listener: (value: string) => void): void;
+    onInput(listener: (value: string) => void): void;
+    onFocus(listener: (evt: FocusEvent) => void): void;
+    onBlur(listener: (evt: FocusEvent) => void): void;
+    private _attachTextField;
+}

package/esm/time-picker/time-picker-component-delegate.js

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { FormFieldComponentDelegate } from '../core/delegates/form-field-component-delegate';
+import { TextFieldComponentDelegate } from '../text-field';
+import { TIME_PICKER_CONSTANTS } from './time-picker-constants';
+export class TimePickerComponentDelegate extends FormFieldComponentDelegate {
+    constructor(config) {
+        super(config);
+    }
+    _build() {
+        const timePicker = document.createElement(TIME_PICKER_CONSTANTS.elementName);
+        this._attachTextField(timePicker);
+        return timePicker;
+    }
+    get inputElement() {
+        return this._textFieldDelegate.inputElement;
+    }
+    get textFieldElement() {
+        return this._textFieldDelegate.element;
+    }
+    get value() {
+        return this._element.value;
+    }
+    set value(value) {
+        this._element.value = value;
+    }
+    get disabled() {
+        return this._element.disabled;
+    }
+    set disabled(value) {
+        this._element.disabled = value;
+    }
+    get invalid() {
+        return this._textFieldDelegate.invalid || false;
+    }
+    set invalid(value) {
+        this._textFieldDelegate.invalid = value;
+    }
+    onChange(listener) {
+        this._element.addEventListener(TIME_PICKER_CONSTANTS.events.CHANGE, (evt) => { var _a; return listener((_a = evt.detail) !== null && _a !== void 0 ? _a : ''); });
+    }
+    onInput(listener) {
+        if (this._element.masked) {
+            this._element.addEventListener(TIME_PICKER_CONSTANTS.events.INPUT, (evt) => { var _a; return listener((_a = evt.detail) !== null && _a !== void 0 ? _a : ''); });
+        }
+        else {
+            this._textFieldDelegate.inputElement.addEventListener('input', evt => listener(evt.target.value));
+        }
+    }
+    onFocus(listener) {
+        this._textFieldDelegate.inputElement.addEventListener('focus', (evt) => listener(evt));
+    }
+    onBlur(listener) {
+        this._textFieldDelegate.inputElement.addEventListener('blur', (evt) => listener(evt));
+    }
+    _attachTextField(component) {
+        var _a, _b, _c, _d;
+        const textFieldConfig = {
+            props: Object.assign({}, (_b = (_a = this._config.options) === null || _a === void 0 ? void 0 : _a.textFieldDelegateConfig) === null || _b === void 0 ? void 0 : _b.props),
+            options: Object.assign({}, (_d = (_c = this._config.options) === null || _c === void 0 ? void 0 : _c.textFieldDelegateConfig) === null || _d === void 0 ? void 0 : _d.options)
+        };
+        this._textFieldDelegate = new TextFieldComponentDelegate(textFieldConfig);
+        component.appendChild(this._textFieldDelegate.element);
+    }
+}

package/esm/time-picker/time-picker-constants.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IListDropdownOption } from '../list-dropdown/list-dropdown-constants';
+import IMask, { Masked, InputMask } from 'imask';
+export declare const TIME_PICKER_CONSTANTS: {
+    elementName: "forge-time-picker";
+    attributes: {
+        TOGGLE: string;
+        VALUE: string;
+        OPEN: string;
+        ALLOW_SECONDS: string;
+        MASKED: string;
+        SHOW_MASK_FORMAT: string;
+        USE_24_HOUR_TIME: string;
+        ALLOW_INVALID_TIME: string;
+        MIN: string;
+        MAX: string;
+        START_TIME: string;
+        STEP: string;
+        ALLOW_INPUT: string;
+        SHOW_NOW: string;
+        DISABLED: string;
+        POPUP_CLASSES: string;
+        ALLOW_DROPDOWN: string;
+    };
+    selectors: {
+        INPUT: string;
+        TOGGLE: string;
+    };
+    events: {
+        OPEN: string;
+        CLOSE: string;
+        INPUT: string;
+        CHANGE: string;
+    };
+    numbers: {
+        DEFAULT_MINUTE_STEP: number;
+        MAX_DAY_MILLIS: number;
+        MAX_DAY_MINUTES: number;
+    };
+};
+export declare type TimePickerValidationCallback = (time: string) => boolean;
+export declare type TimePickerParseCallback = (time: string) => number | null;
+export declare type TimePickerFormatCallback = (value: number | null) => string;
+export declare type TimePickerCustomOptionCallback<T> = (value: T, use24HourTime: boolean, allowSeconds: boolean) => number;
+export declare type TimePickerCoercionCallback = (rawValue: string, coercedValue: string, allowSeconds: boolean) => string;
+export declare type TimePickerPrepareMaskCallback = (value: string, masked: Masked<string>, flags: IMask.AppendFlags, maskInstance: InputMask<IMask.AnyMaskedOptions>) => string;
+export interface ITimePickerOption<T = any> extends IListDropdownOption<T> {
+    toMilliseconds: TimePickerCustomOptionCallback<T>;
+}
+export interface ITimePickerOptionValue {
+    time: number | null;
+    metadata?: any;
+    isCustom?: boolean;
+    customCallback?: TimePickerCustomOptionCallback<any>;
+}

package/esm/time-picker/time-picker-constants.js

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}time-picker`;
+const attributes = {
+    TOGGLE: 'forge-time-picker-toggle',
+    VALUE: 'value',
+    OPEN: 'open',
+    ALLOW_SECONDS: 'allow-seconds',
+    MASKED: 'masked',
+    SHOW_MASK_FORMAT: 'show-mask-format',
+    USE_24_HOUR_TIME: 'use-24-hour-time',
+    ALLOW_INVALID_TIME: 'allow-invalid-time',
+    MIN: 'min',
+    MAX: 'max',
+    START_TIME: 'start-time',
+    STEP: 'step',
+    ALLOW_INPUT: 'allow-input',
+    SHOW_NOW: 'show-now',
+    DISABLED: 'disabled',
+    POPUP_CLASSES: 'popup-classes',
+    ALLOW_DROPDOWN: 'allow-dropdown'
+};
+const selectors = {
+    INPUT: 'input, input[forge-time-picker-input]',
+    TOGGLE: `[${attributes.TOGGLE}]`
+};
+const events = {
+    OPEN: `${elementName}-open`,
+    CLOSE: `${elementName}-close`,
+    INPUT: `${elementName}-input`,
+    CHANGE: `${elementName}-change`
+};
+const numbers = {
+    DEFAULT_MINUTE_STEP: 60,
+    MAX_DAY_MILLIS: 86400000,
+    MAX_DAY_MINUTES: 1440
+};
+export const TIME_PICKER_CONSTANTS = {
+    elementName,
+    attributes,
+    selectors,
+    events,
+    numbers
+};