@tylertech/forge 2.0.0

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

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IFloatingLabel } from '../floating-label/floating-label';
+import { IFieldAdapter } from './field-adapter';
+import { FieldFloatLabelType, FieldShapeType, FieldDensityType } from './field-constants';
+export interface IFieldFoundation extends ICustomElementFoundation {
+    density: FieldDensityType;
+    floatLabelType: FieldFloatLabelType;
+    shape: FieldShapeType;
+    invalid: boolean;
+    required: boolean;
+    floatLabel(value: boolean, alwaysFloat?: boolean): void;
+}
+export declare class FieldFoundation {
+    protected _adapter: IFieldAdapter;
+    protected _density: FieldDensityType;
+    protected _floatingLabel: IFloatingLabel | undefined;
+    protected _shape: FieldShapeType;
+    protected _invalid: boolean;
+    protected _required: boolean;
+    protected _floatLabelType: FieldFloatLabelType;
+    protected _isInitialized: boolean;
+    protected _labelSlotListener: (evt: Event) => void;
+    protected _leadingSlotListener: (evt: Event) => void;
+    protected _trailingSlotListener: (evt: Event) => void;
+    protected _addonEndSlotListener: (evt: Event) => void;
+    protected _focusListener: (evt: Event) => void;
+    protected _blurListener: (evt: Event) => void;
+    protected _valueChangedListener: (value: any) => void;
+    protected _inputAttributeChangedListener: (name: string, value: string) => void;
+    constructor(_adapter: IFieldAdapter);
+    initialize(): void;
+    disconnect(): void;
+    get density(): FieldDensityType;
+    set density(value: FieldDensityType);
+    get floatLabelType(): FieldFloatLabelType;
+    set floatLabelType(value: FieldFloatLabelType);
+    get shape(): FieldShapeType;
+    set shape(value: FieldShapeType);
+    get invalid(): boolean;
+    set invalid(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    floatLabel(value: boolean): void;
+    protected _onLabelSlotChanged(evt: Event): void;
+    protected _onLeadingSlotChanged(evt: Event): void;
+    protected _onTrailingSlotChanged(evt: Event): void;
+    protected _onAddonEndSlotChanged(evt: Event): void;
+    protected _initializeLabel(): void;
+    protected _detectLeadingContent(): void;
+    protected _detectTrailingContent(): void;
+    protected _detectAddonEndContent(): void;
+    protected _detectSlottedContent(): void;
+    protected _onFocus(event: Event): void;
+    protected _onBlur(event: Event): void;
+    protected _onValueChanged(value: any): void;
+    protected _onInputAttributeChanged(name: string, value: string | null): void;
+    protected _setShapeType(): void;
+    protected _setValidity(): void;
+    protected _applyDensity(): void;
+}

package/esm/field/field-foundation.js

@@ -0,0 +1,328 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { FIELD_CONSTANTS } from './field-constants';
+export class FieldFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._density = 'default';
+        this._shape = 'default';
+        this._invalid = false;
+        this._required = false;
+        this._floatLabelType = 'auto';
+        this._isInitialized = false;
+        this._labelSlotListener = evt => this._onLabelSlotChanged(evt);
+        this._leadingSlotListener = evt => this._onLeadingSlotChanged(evt);
+        this._trailingSlotListener = evt => this._onTrailingSlotChanged(evt);
+        this._addonEndSlotListener = evt => this._onAddonEndSlotChanged(evt);
+        this._focusListener = (evt) => this._onFocus(evt);
+        this._blurListener = (evt) => this._onBlur(evt);
+        this._valueChangedListener = (value) => this._onValueChanged(value);
+        this._inputAttributeChangedListener = (name, value) => this._onInputAttributeChanged(name, value);
+    }
+    //
+    // Public
+    //
+    initialize() {
+        this._adapter.initialize(this._required, '');
+        if (this._adapter.hasLabel()) {
+            this._adapter.ensureSlottedLabel();
+        }
+        this._initializeLabel();
+        if (this._adapter.hasPlaceholder()) {
+            this._floatLabelType = 'always';
+        }
+        this._detectSlottedContent();
+        this._adapter.addLabelSlotListener(this._labelSlotListener);
+        this._adapter.addLeadingSlotListener(this._leadingSlotListener);
+        this._adapter.addTrailingSlotListener(this._trailingSlotListener);
+        this._adapter.addAddonEndSlotListener(this._addonEndSlotListener);
+        this._adapter.setValueChangedListener(this, this._valueChangedListener);
+        this._adapter.addInputListener('focus', this._focusListener);
+        this._adapter.addInputListener('blur', this._blurListener);
+        this._adapter.setInputAttributeObserver(this._inputAttributeChangedListener);
+        this._applyDensity();
+        this._setShapeType();
+        this._setValidity();
+        if (this._adapter.isDisabled()) {
+            this._adapter.setRootClass(FIELD_CONSTANTS.classes.DISABLED);
+        }
+        else {
+            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.DISABLED);
+        }
+        if (this._adapter.isReadonly()) {
+            this._adapter.setRootClass(FIELD_CONSTANTS.classes.READONLY);
+        }
+        else {
+            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.READONLY);
+        }
+        if (this._floatLabelType === 'always') {
+            this.floatLabel(true);
+        }
+        this._isInitialized = true;
+    }
+    disconnect() {
+        this._isInitialized = false;
+        this._adapter.destroy();
+        if (this._floatingLabel) {
+            this._floatingLabel.destroy();
+            this._floatingLabel = undefined;
+        }
+        this._adapter.removeLabelSlotListener(this._labelSlotListener);
+        this._adapter.removeLeadingSlotListener(this._leadingSlotListener);
+        this._adapter.removeTrailingSlotListener(this._trailingSlotListener);
+        this._adapter.removeAddonEndSlotListener(this._addonEndSlotListener);
+        this._adapter.removeInputListener('focus', this._focusListener);
+        this._adapter.removeInputListener('blur', this._blurListener);
+        this._adapter.destroyValueChangeListener();
+    }
+    get density() {
+        return this._density;
+    }
+    set density(value) {
+        if (this._density !== value) {
+            this._density = value;
+            if (this._isInitialized) {
+                this._applyDensity();
+                this._initializeLabel();
+            }
+            this._adapter.setHostAttribute(FIELD_CONSTANTS.attributes.DENSITY, this._density.toString());
+        }
+    }
+    get floatLabelType() {
+        return this._floatLabelType;
+    }
+    set floatLabelType(value) {
+        if (this._floatLabelType !== value) {
+            this._floatLabelType = value;
+            if (this._isInitialized) {
+                this.floatLabel(this._floatLabelType === 'always');
+            }
+            this._adapter.setHostAttribute(FIELD_CONSTANTS.attributes.FLOAT_LABEL_TYPE, this._floatLabelType);
+        }
+    }
+    get shape() {
+        return this._shape;
+    }
+    set shape(value) {
+        if (this._shape !== value) {
+            this._shape = value;
+            if (this._isInitialized) {
+                this._setShapeType();
+            }
+            this._adapter.setHostAttribute(FIELD_CONSTANTS.attributes.SHAPE, this._shape);
+        }
+    }
+    get invalid() {
+        return this._invalid;
+    }
+    set invalid(value) {
+        if (this._invalid !== value) {
+            this._invalid = value;
+            if (this._isInitialized) {
+                this._setValidity();
+            }
+        }
+    }
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        if (this._required !== value) {
+            this._required = value;
+            if (this._isInitialized) {
+                this._setValidity();
+            }
+            if (this._required) {
+                this._adapter.setHostAttribute(FIELD_CONSTANTS.attributes.REQUIRED);
+            }
+            else {
+                this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.REQUIRED);
+            }
+        }
+    }
+    floatLabel(value) {
+        var _a;
+        if (((_a = this._floatingLabel) === null || _a === void 0 ? void 0 : _a.isFloating) === value) {
+            return;
+        }
+        if (!value && this._floatLabelType === 'always') {
+            if (this._floatingLabel) {
+                this._floatingLabel.float(true, true);
+            }
+            this._adapter.setHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING, '');
+            return;
+        }
+        if (this._floatingLabel) {
+            this._floatingLabel.float(value, this._floatLabelType === 'always');
+            if (value) {
+                this._adapter.setInputClass(FIELD_CONSTANTS.classes.INPUT_FOCUSED);
+                this._adapter.setHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING, '');
+            }
+            else {
+                this._adapter.removeInputClass(FIELD_CONSTANTS.classes.INPUT_FOCUSED);
+                this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
+            }
+        }
+    }
+    //
+    // Protected
+    //
+    _onLabelSlotChanged(evt) {
+        this._initializeLabel();
+    }
+    _onLeadingSlotChanged(evt) {
+        this._detectLeadingContent();
+    }
+    _onTrailingSlotChanged(evt) {
+        this._detectTrailingContent();
+    }
+    _onAddonEndSlotChanged(evt) {
+        this._detectAddonEndContent();
+    }
+    _initializeLabel() {
+        if (this._floatingLabel) {
+            this._floatingLabel.destroy();
+        }
+        this._adapter.detectLabel(this._required);
+        if (this._adapter.hasLabel() && this._density !== 'dense') {
+            this._floatingLabel = this._adapter.initializeFloatingLabel();
+            this._adapter.ensureLabelOrder();
+            this.floatLabel(this._floatLabelType === 'always' || this._adapter.fieldHasValue() || this._adapter.hasPlaceholder());
+            this._adapter.setRootClass(FIELD_CONSTANTS.classes.LABEL);
+        }
+        else {
+            this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
+            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.LABEL);
+            this._floatingLabel = undefined;
+        }
+    }
+    _detectLeadingContent() {
+        if (this._adapter.hasLeadingNodes()) {
+            this._adapter.setRootClass(FIELD_CONSTANTS.classes.LEADING);
+        }
+        else {
+            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.LEADING);
+        }
+    }
+    _detectTrailingContent() {
+        if (this._adapter.hasTrailingNodes()) {
+            this._adapter.setRootClass(FIELD_CONSTANTS.classes.TRAILING);
+        }
+        else {
+            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.TRAILING);
+        }
+    }
+    _detectAddonEndContent() {
+        if (this._adapter.hasAddonEndNodes()) {
+            this._adapter.setRootClass(FIELD_CONSTANTS.classes.ADDON_END);
+        }
+        else {
+            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.ADDON_END);
+        }
+    }
+    _detectSlottedContent() {
+        this._detectLeadingContent();
+        this._detectTrailingContent();
+        this._detectAddonEndContent();
+    }
+    _onFocus(event) {
+        this._adapter.setRootClass(FIELD_CONSTANTS.classes.FOCUSED);
+        this._adapter.setLabelClass(FIELD_CONSTANTS.classes.LABEL_FOCUSED);
+        this.floatLabel(true);
+    }
+    _onBlur(event) {
+        if (this._adapter.inputHasFocus()) {
+            return;
+        }
+        this._adapter.removeRootClass(FIELD_CONSTANTS.classes.FOCUSED);
+        this._adapter.removeLabelClass(FIELD_CONSTANTS.classes.LABEL_FOCUSED);
+        if (!this._adapter.fieldHasValue() && !this._adapter.hasPlaceholder()) {
+            this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
+            this.floatLabel(false);
+        }
+    }
+    _onValueChanged(value) {
+        if (this._adapter.fieldHasValue()) {
+            this.floatLabel(true);
+        }
+        else if (!this._adapter.inputHasFocus() && !this._adapter.hasPlaceholder()) {
+            this.floatLabel(false);
+        }
+    }
+    _onInputAttributeChanged(name, value) {
+        if (this._adapter.isDisabled()) {
+            this._adapter.setRootClass(FIELD_CONSTANTS.classes.DISABLED);
+            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.FOCUSED);
+            this._adapter.removeInputClass(FIELD_CONSTANTS.classes.INPUT_FOCUSED);
+            this._adapter.removeLabelClass(FIELD_CONSTANTS.classes.LABEL_FOCUSED);
+            if (!this._adapter.fieldHasValue() && !this._adapter.hasPlaceholder() && this._floatingLabel) {
+                this.floatLabel(false);
+            }
+        }
+        else {
+            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.DISABLED);
+        }
+        if (this._adapter.isReadonly()) {
+            this._adapter.setRootClass(FIELD_CONSTANTS.classes.READONLY);
+        }
+        else {
+            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.READONLY);
+            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.FOCUSED);
+            this._adapter.removeInputClass(FIELD_CONSTANTS.classes.INPUT_FOCUSED);
+        }
+        switch (name) {
+            case 'readonly':
+            case 'disabled':
+                // If we are changing the readonly or disabled attribute, we want to make sure that we apply
+                // the focus state properly if the input element also now has focus
+                if (this._adapter.inputHasFocus()) {
+                    this._adapter.setRootClass(FIELD_CONSTANTS.classes.FOCUSED);
+                    this._adapter.setInputClass(FIELD_CONSTANTS.classes.INPUT_FOCUSED);
+                    this._adapter.setLabelClass(FIELD_CONSTANTS.classes.LABEL_FOCUSED);
+                }
+                break;
+            case 'value':
+                if (this._floatingLabel) {
+                    this.floatLabel(this._adapter.fieldHasValue());
+                }
+                break;
+            case 'placeholder':
+                if (this._floatingLabel) {
+                    const float = (!!value && !!value.trim()) || this._adapter.fieldHasValue();
+                    if (float !== this._floatingLabel.isFloating) {
+                        this.floatLabel(float);
+                    }
+                }
+                break;
+        }
+    }
+    _setShapeType() {
+        if (this._shape === 'rounded') {
+            this._adapter.setRootClass(FIELD_CONSTANTS.classes.SHAPE_ROUNDED);
+        }
+        else {
+            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.SHAPE_ROUNDED);
+        }
+    }
+    _setValidity() {
+        if (this._invalid) {
+            this._adapter.setRootClass(FIELD_CONSTANTS.classes.INVALID);
+        }
+        else {
+            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.INVALID);
+        }
+        if (this._required) {
+            this._adapter.setRootClass(FIELD_CONSTANTS.classes.REQUIRED);
+        }
+        else {
+            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.REQUIRED);
+        }
+    }
+    _applyDensity() {
+        this._adapter.setRoomy(this._density === 'roomy');
+        this._adapter.setDense(this._density === 'dense');
+    }
+}

package/esm/field/field.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { FieldDensityType, FieldFloatLabelType, FieldShapeType } from './field-constants';
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { FieldFoundation } from './field-foundation';
+export interface IFieldComponent extends IBaseComponent {
+    density: FieldDensityType;
+    floatLabelType: FieldFloatLabelType;
+    shape: FieldShapeType;
+    invalid: boolean;
+    required: boolean;
+    floatLabel(value: boolean): void;
+}
+export declare abstract class FieldComponent<T extends FieldFoundation> extends BaseComponent implements IFieldComponent {
+    static get observedAttributes(): string[];
+    protected _foundation: T;
+    constructor();
+    connectedCallback(): void;
+    private _initialize;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** Controls the density type. */
+    density: FieldDensityType;
+    /** Whether the label should always float, never float or float as the user types. */
+    floatLabelType: FieldFloatLabelType;
+    /** The shape type to use. */
+    shape: FieldShapeType;
+    /** Gets/sets the invalid state. */
+    invalid: boolean;
+    /** Gets/sets the required state which controls the visibility of the asterisk in the label. */
+    required: boolean;
+    /**
+     * Controls whether the label should be floating or not.
+     * @param {boolean} value
+     */
+    floatLabel(value: boolean): void;
+}

package/esm/field/field.js

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { FIELD_CONSTANTS } from './field-constants';
+import { BaseComponent } from '../core/base/base-component';
+import { coerceBoolean, ensureChildren, FoundationProperty } from '@tylertech/forge-core';
+export class FieldComponent extends BaseComponent {
+    constructor() {
+        super();
+    }
+    static get observedAttributes() {
+        return [
+            FIELD_CONSTANTS.attributes.DENSITY,
+            FIELD_CONSTANTS.attributes.FLOAT_LABEL_TYPE,
+            FIELD_CONSTANTS.attributes.SHAPE,
+            FIELD_CONSTANTS.attributes.INVALID,
+            FIELD_CONSTANTS.attributes.REQUIRED
+        ];
+    }
+    connectedCallback() {
+        if (this.children.length) {
+            this._initialize();
+        }
+        else {
+            ensureChildren(this).then(() => this._initialize());
+        }
+    }
+    _initialize() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case FIELD_CONSTANTS.attributes.DENSITY:
+                this.density = newValue;
+                break;
+            case FIELD_CONSTANTS.attributes.FLOAT_LABEL_TYPE:
+                this.floatLabelType = newValue;
+                break;
+            case FIELD_CONSTANTS.attributes.SHAPE:
+                this.shape = newValue;
+                break;
+            case FIELD_CONSTANTS.attributes.INVALID:
+                this.invalid = coerceBoolean(newValue);
+                break;
+            case FIELD_CONSTANTS.attributes.REQUIRED:
+                this.required = coerceBoolean(newValue);
+                break;
+        }
+    }
+    /**
+     * Controls whether the label should be floating or not.
+     * @param {boolean} value
+     */
+    floatLabel(value) {
+        this._foundation.floatLabel(value);
+    }
+}
+__decorate([
+    FoundationProperty()
+], FieldComponent.prototype, "density", void 0);
+__decorate([
+    FoundationProperty()
+], FieldComponent.prototype, "floatLabelType", void 0);
+__decorate([
+    FoundationProperty()
+], FieldComponent.prototype, "shape", void 0);
+__decorate([
+    FoundationProperty()
+], FieldComponent.prototype, "invalid", void 0);
+__decorate([
+    FoundationProperty()
+], FieldComponent.prototype, "required", void 0);

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

@@ -0,0 +1,81 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IFilePickerComponent } from './file-picker';
+import { BaseAdapter, IBaseAdapter } from '../core';
+export interface IFilePickerAdapter extends IBaseAdapter {
+    registerButtonSlotListener(listener: (evt: Event) => void): void;
+    registerInputChangeListener(listener: (evt: Event) => void): void;
+    registerDragEnterListener(listener: (evt: DragEvent) => void): void;
+    registerDragLeaveListener(listener: (evt: DragEvent) => void): void;
+    registerDragOverListener(listener: (evt: DragEvent) => void): void;
+    registerDropListener(listener: (evt: DragEvent) => void): void;
+    removeDragEnterListener(listener: (evt: DragEvent) => void): void;
+    removeDragLeaveListener(listener: (evt: DragEvent) => void): void;
+    removeDragOverListener(listener: (evt: DragEvent) => void): void;
+    removeDropListener(listener: (evt: DragEvent) => void): void;
+    initializeButton(): void;
+    setHighlightState(value: boolean): void;
+    setAccept(value: string | null): void;
+    setCapture(value: string | null): void;
+    setMultiple(value: boolean): void;
+    setDisabled(value: boolean): void;
+    setCompact(value: boolean): void;
+    setBorderless(value: boolean): void;
+}
+export declare class FilePickerAdapter extends BaseAdapter<IFilePickerComponent> implements IFilePickerAdapter {
+    private _container;
+    private _buttonSlot;
+    private _button;
+    private _input;
+    private _inputEventListener;
+    constructor(component: IFilePickerComponent);
+    registerButtonSlotListener(listener: (evt: Event) => void): void;
+    registerInputChangeListener(listener: (evt: Event) => void): void;
+    registerDragEnterListener(listener: (evt: DragEvent) => void): void;
+    registerDragLeaveListener(listener: (evt: DragEvent) => void): void;
+    registerDragOverListener(listener: (evt: DragEvent) => void): void;
+    registerDropListener(listener: (evt: DragEvent) => void): void;
+    removeDragEnterListener(listener: (evt: DragEvent) => void): void;
+    removeDragLeaveListener(listener: (evt: DragEvent) => void): void;
+    removeDragOverListener(listener: (evt: DragEvent) => void): void;
+    removeDropListener(listener: (evt: DragEvent) => void): void;
+    initializeButton(): void;
+    /**
+     * Sets the highlight state of the file picker.
+     * @param value True if the highlight should be applied and false if not.
+     */
+    setHighlightState(value: boolean): void;
+    /**
+     * Sets the accept attribute of the input.
+     * @param value The accept string.
+     */
+    setAccept(value: string | null): void;
+    /**
+     * Sets the capture attribute of the input.
+     * @param value The capture string.
+     */
+    setCapture(value: string | null): void;
+    /**
+     * Sets the multiple attribute of the input.
+     * @param value The multiple state.
+     */
+    setMultiple(value: boolean): void;
+    /**
+     * Sets the disabled state of the file picker.
+     * @param value The disabled state.
+     */
+    setDisabled(value: boolean): void;
+    /**
+     * Sets the compact state of the file picker.
+     * @param value The compact state.
+     */
+    setCompact(value: boolean): void;
+    /**
+     * Sets the borderless state of the file picker.
+     * @param value The borderless state.
+     */
+    setBorderless(value: boolean): void;
+}