@tylertech/forge 3.0.0-next.19 → 3.0.0-next.20

package/esm/field-next/base/base-field.js

@@ -0,0 +1,116 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
+import { BaseComponent } from '../../core/base/base-component';
+import { WithLabelAwareness } from '../../core/mixins/label/with-label-aware';
+import { BASE_FIELD_CONSTANTS } from './base-field-constants';
+const BaseFieldClass = WithLabelAwareness(BaseComponent);
+export class BaseField extends BaseFieldClass {
+    static get observedAttributes() {
+        return Object.values(BASE_FIELD_CONSTANTS.observedAttributes);
+    }
+    constructor() {
+        super();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case BASE_FIELD_CONSTANTS.observedAttributes.LABEL_POSITION:
+                this.labelPosition = newValue;
+                return;
+            case BASE_FIELD_CONSTANTS.observedAttributes.LABEL_ALIGNMENT:
+                this.labelAlignment = newValue;
+                return;
+            case BASE_FIELD_CONSTANTS.observedAttributes.INVALID:
+                this.invalid = coerceBoolean(newValue);
+                return;
+            case BASE_FIELD_CONSTANTS.observedAttributes.REQUIRED:
+                this.required = coerceBoolean(newValue);
+                return;
+            case BASE_FIELD_CONSTANTS.observedAttributes.OPTIONAL:
+                this.optional = coerceBoolean(newValue);
+                return;
+            case BASE_FIELD_CONSTANTS.observedAttributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                return;
+            case BASE_FIELD_CONSTANTS.observedAttributes.FLOAT_LABEL:
+                this.floatLabel = coerceBoolean(newValue);
+                return;
+            case BASE_FIELD_CONSTANTS.observedAttributes.VARIANT:
+                this.variant = newValue;
+                return;
+            case BASE_FIELD_CONSTANTS.observedAttributes.THEME:
+                this.theme = newValue;
+                return;
+            case BASE_FIELD_CONSTANTS.observedAttributes.SHAPE:
+                this.shape = newValue;
+                return;
+            case BASE_FIELD_CONSTANTS.observedAttributes.DENSITY:
+                this.density = newValue;
+                return;
+            case BASE_FIELD_CONSTANTS.observedAttributes.DENSE:
+                this.dense = coerceBoolean(newValue);
+                return;
+            case BASE_FIELD_CONSTANTS.observedAttributes.POPOVER_ICON:
+                this.popoverIcon = coerceBoolean(newValue);
+                return;
+            case BASE_FIELD_CONSTANTS.observedAttributes.SUPPORT_TEXT_INSET:
+                this.supportTextInset = newValue;
+                return;
+        }
+    }
+    labelClickedCallback() {
+        this._foundation.click();
+    }
+    labelChangedCallback(value) {
+        this._foundation.applyLabel(value);
+    }
+    floatLabelWithoutAnimation(value) {
+        this._foundation.floatLabelWithoutAnimation(value);
+    }
+}
+__decorate([
+    FoundationProperty()
+], BaseField.prototype, "labelPosition", void 0);
+__decorate([
+    FoundationProperty()
+], BaseField.prototype, "labelAlignment", void 0);
+__decorate([
+    FoundationProperty()
+], BaseField.prototype, "invalid", void 0);
+__decorate([
+    FoundationProperty()
+], BaseField.prototype, "required", void 0);
+__decorate([
+    FoundationProperty()
+], BaseField.prototype, "optional", void 0);
+__decorate([
+    FoundationProperty()
+], BaseField.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty({ name: 'permanentlyFloatLabel' })
+], BaseField.prototype, "floatLabel", void 0);
+__decorate([
+    FoundationProperty()
+], BaseField.prototype, "variant", void 0);
+__decorate([
+    FoundationProperty()
+], BaseField.prototype, "theme", void 0);
+__decorate([
+    FoundationProperty()
+], BaseField.prototype, "shape", void 0);
+__decorate([
+    FoundationProperty()
+], BaseField.prototype, "density", void 0);
+__decorate([
+    FoundationProperty()
+], BaseField.prototype, "dense", void 0);
+__decorate([
+    FoundationProperty()
+], BaseField.prototype, "popoverIcon", void 0);
+__decorate([
+    FoundationProperty()
+], BaseField.prototype, "supportTextInset", void 0);

package/esm/field-next/base/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './base-field';
+export * from './base-field-adapter';
+export * from './base-field-foundation';
+export * from './base-field-constants';

package/esm/field-next/base/index.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './base-field';
+export * from './base-field-adapter';
+export * from './base-field-foundation';
+export * from './base-field-constants';

package/esm/field-next/field-adapter.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core/base';
+import { FieldLabelPosition } from './base/base-field-constants';
+import { IFieldComponent } from './field';
+export interface IFieldAdapter extends IBaseAdapter {
+    addRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
+    addPopoverIconClickListener(listener: EventListener): void;
+    removePopoverIconClickListener(listener: EventListener): void;
+    attachResizeContainer(): void;
+    removeResizeContainer(): void;
+    setLabelPosition(value: FieldLabelPosition): void;
+    setFloatingLabel(value: boolean, skipAnimation?: boolean): void;
+    handleSlotChange(slot: HTMLSlotElement): void;
+}
+export declare class FieldAdapter extends BaseAdapter<IFieldComponent> implements IFieldAdapter {
+    private readonly _rootElement;
+    private readonly _containerElement;
+    private readonly _labelElement;
+    private readonly _popoverIconElement;
+    private get _resizeContainerElement();
+    constructor(component: IFieldComponent);
+    addRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
+    addPopoverIconClickListener(listener: EventListener): void;
+    removePopoverIconClickListener(listener: EventListener): void;
+    /**
+     * Wraps the container's children in a resizable div.
+     */
+    attachResizeContainer(): void;
+    /**
+     * Removes the resize container while retaining its children as direct children of the container.
+     */
+    removeResizeContainer(): void;
+    /**
+     * Moves the label to the start or end of the root element, ensuring that the DOM order matches
+     * the visual order.
+     */
+    setLabelPosition(value: FieldLabelPosition): void;
+    /**
+     * Adds or removes animation classes on the root element.
+     */
+    setFloatingLabel(value: boolean, skipAnimation?: boolean): void;
+    /**
+     * Adds or removes a class from the root element indicating whether the slot has any assigned
+     * nodes.
+     */
+    handleSlotChange(slot: HTMLSlotElement): void;
+    /**
+     * Gets `<label>` and `<forge-label>` elements from the default slot and assigns them to the
+     * 'label' slot.
+     */
+    private _trySlotLabel;
+}

package/esm/field-next/field-adapter.js

@@ -0,0 +1,132 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { addClass, getShadowElement, removeClass, toggleClass } from '@tylertech/forge-core';
+import { unwrapElements, wrapElements } from '../core';
+import { BaseAdapter } from '../core/base';
+import { FOCUS_INDICATOR_CONSTANTS } from '../focus-indicator';
+import { FIELD_CONSTANTS } from './field-constants';
+export class FieldAdapter extends BaseAdapter {
+    get _resizeContainerElement() {
+        return this._containerElement.querySelector(FIELD_CONSTANTS.selectors.RESIZE_CONTAINER);
+    }
+    constructor(component) {
+        super(component);
+        this._rootElement = getShadowElement(component, FIELD_CONSTANTS.selectors.ROOT);
+        this._containerElement = getShadowElement(component, FIELD_CONSTANTS.selectors.CONTAINER);
+        this._labelElement = getShadowElement(component, FIELD_CONSTANTS.selectors.LABEL);
+        this._popoverIconElement = getShadowElement(component, FIELD_CONSTANTS.selectors.POPOVER_ICON);
+    }
+    addRootListener(name, listener) {
+        this._rootElement.addEventListener(name, listener);
+    }
+    addPopoverIconClickListener(listener) {
+        this._popoverIconElement.addEventListener('click', listener);
+    }
+    removePopoverIconClickListener(listener) {
+        this._popoverIconElement.removeEventListener('click', listener);
+    }
+    /**
+     * Wraps the container's children in a resizable div.
+     */
+    attachResizeContainer() {
+        // Return if a resize container is already attached
+        if (this._resizeContainerElement) {
+            return;
+        }
+        const resizeContainer = document.createElement('div');
+        resizeContainer.classList.add(FIELD_CONSTANTS.classes.RESIZE_CONTAINER);
+        const childElements = Array.from(this._containerElement.children);
+        wrapElements(childElements, resizeContainer, [FOCUS_INDICATOR_CONSTANTS.elementName]);
+    }
+    /**
+     * Removes the resize container while retaining its children as direct children of the container.
+     */
+    removeResizeContainer() {
+        const resizeContainerElement = this._resizeContainerElement;
+        if (resizeContainerElement) {
+            unwrapElements(resizeContainerElement);
+        }
+    }
+    /**
+     * Moves the label to the start or end of the root element, ensuring that the DOM order matches
+     * the visual order.
+     */
+    setLabelPosition(value) {
+        this._labelElement.remove();
+        if (value === 'inline-end') {
+            this._rootElement.append(this._labelElement);
+        }
+        else if (value === 'inset') {
+            const resizeContainerElement = this._resizeContainerElement;
+            if (resizeContainerElement) {
+                resizeContainerElement.prepend(this._labelElement);
+                return;
+            }
+            this._containerElement.prepend(this._labelElement);
+        }
+        else {
+            this._rootElement.prepend(this._labelElement);
+        }
+    }
+    /**
+     * Adds or removes animation classes on the root element.
+     */
+    setFloatingLabel(value, skipAnimation = false) {
+        if (skipAnimation) {
+            return;
+        }
+        const className = value ? FIELD_CONSTANTS.classes.FLOATING_IN : FIELD_CONSTANTS.classes.FLOATING_OUT;
+        const animationName = value ? FIELD_CONSTANTS.animations.FLOAT_IN_LABEL : FIELD_CONSTANTS.animations.FLOAT_OUT_LABEL;
+        const animationEndListener = (evt) => {
+            if (evt.animationName === animationName) {
+                removeClass(className, this._rootElement);
+                this._rootElement.removeEventListener('animationend', animationEndListener);
+            }
+        };
+        addClass(className, this._rootElement);
+        this._rootElement.addEventListener('animationend', animationEndListener);
+    }
+    /**
+     * Adds or removes a class from the root element indicating whether the slot has any assigned
+     * nodes.
+     */
+    handleSlotChange(slot) {
+        if (slot.name === '') {
+            this._trySlotLabel(slot);
+            return;
+        }
+        // Ensure that the slot belongs to the field
+        const slotElement = getShadowElement(this._component, `slot[name=${slot.name}]`);
+        if (!slotElement) {
+            return;
+        }
+        const classMap = {
+            label: FIELD_CONSTANTS.classes.HAS_LABEL,
+            start: FIELD_CONSTANTS.classes.HAS_START,
+            end: FIELD_CONSTANTS.classes.HAS_END,
+            accessory: FIELD_CONSTANTS.classes.HAS_ACCESSORY,
+            'support-text-start': FIELD_CONSTANTS.classes.HAS_SUPPORT_START,
+            'support-text-end': FIELD_CONSTANTS.classes.HAS_SUPPORT_END
+        };
+        if (slot.name in classMap) {
+            toggleClass(this._rootElement, !!slotElement.assignedNodes({ flatten: true }).length, classMap[slot.name]);
+        }
+    }
+    /**
+     * Gets `<label>` and `<forge-label>` elements from the default slot and assigns them to the
+     * 'label' slot.
+     */
+    _trySlotLabel(slot) {
+        const elements = slot.assignedElements({ flatten: true });
+        const labels = elements.filter(el => el.matches(FIELD_CONSTANTS.selectors.LABEL_ELEMENTS));
+        labels.forEach(label => {
+            if (label.slot) {
+                return;
+            }
+            label.slot = 'label';
+        });
+    }
+}

package/esm/field-next/field-constants.d.ts

@@ -0,0 +1,95 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const FIELD_CONSTANTS: {
+    elementName: "forge-field";
+    observedAttributes: {
+        POPOVER_EXPANDED: string;
+        MULTILINE: string;
+        LABEL_POSITION: string;
+        LABEL_ALIGNMENT: string;
+        INVALID: string;
+        REQUIRED: string;
+        OPTIONAL: string;
+        DISABLED: string;
+        FLOAT_LABEL: string;
+        VARIANT: string;
+        THEME: string;
+        SHAPE: string;
+        DENSITY: string;
+        DENSE: string;
+        POPOVER_ICON: string;
+        SUPPORT_TEXT_INSET: string;
+    };
+    attributes: {
+        MULTI_INPUT_SEPARATOR: string;
+        POPOVER_EXPANDED: string;
+        MULTILINE: string;
+        LABEL_POSITION: string;
+        LABEL_ALIGNMENT: string;
+        INVALID: string;
+        REQUIRED: string;
+        OPTIONAL: string;
+        DISABLED: string;
+        FLOAT_LABEL: string;
+        VARIANT: string;
+        THEME: string;
+        SHAPE: string;
+        DENSITY: string;
+        DENSE: string;
+        POPOVER_ICON: string;
+        SUPPORT_TEXT_INSET: string;
+    };
+    classes: {
+        FLOATING_IN: string;
+        FLOATING_OUT: string;
+        HAS_LABEL: string;
+        HAS_START: string;
+        HAS_END: string;
+        HAS_ACCESSORY: string;
+        HAS_SUPPORT_START: string;
+        HAS_SUPPORT_END: string;
+        RESIZE_CONTAINER: string;
+    };
+    selectors: {
+        ROOT: string;
+        CONTAINER: string;
+        LABEL: string;
+        POPOVER_ICON: string;
+        RESIZE_CONTAINER: string;
+        LABEL_ELEMENTS: string;
+        POPOVER_TARGET: string;
+    };
+    parts: {
+        ROOT: string;
+        LABEL: string;
+        CONTAINER: string;
+        START: string;
+        INPUT: string;
+        POPOVER_ICON: string;
+        END: string;
+        ACCESSORY: string;
+        SUPPORT_TEXT: string;
+        SUPPORT_TEXT_START: string;
+        SUPPORT_TEXT_END: string;
+        FOCUS_INDICATOR: string;
+    };
+    events: {
+        POPOVER_ICON_CLICK: string;
+    };
+    defaults: {
+        DEFAULT_VARIANT: import("./base/base-field-constants").FieldVariant;
+        DEFAULT_THEME: import("./base/base-field-constants").FieldTheme;
+        DEFAULT_SHAPE: import("./base/base-field-constants").FieldShape;
+        DEFAULT_DENSITY: import("./base/base-field-constants").FieldDensity;
+        DEFAULT_LABEL_POSITION: import("./base/base-field-constants").FieldLabelPosition;
+        DEFAULT_LABEL_ALIGNMENT: import("./base/base-field-constants").FieldLabelAlignment;
+        DEFAULT_SUPPORT_TEXT_INSET: import("./base/base-field-constants").FieldSupportTextInset;
+    };
+    animations: {
+        FLOAT_IN_LABEL: string;
+        FLOAT_OUT_LABEL: string;
+    };
+};

package/esm/field-next/field-constants.js

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+import { LABEL_CONSTANTS } from '../label';
+import { BASE_FIELD_CONSTANTS } from './base/base-field-constants';
+const elementName = `${COMPONENT_NAME_PREFIX}field`;
+const observedAttributes = Object.assign(Object.assign({}, BASE_FIELD_CONSTANTS.observedAttributes), { POPOVER_EXPANDED: 'popover-expanded', MULTILINE: 'multiline' });
+const attributes = Object.assign(Object.assign({}, observedAttributes), { MULTI_INPUT_SEPARATOR: 'data-forge-multi-input-separator' });
+const classes = {
+    FLOATING_IN: 'forge-field--floating-in',
+    FLOATING_OUT: 'forge-field--floating-out',
+    HAS_LABEL: 'forge-field--has-label',
+    HAS_START: 'forge-field--has-start',
+    HAS_END: 'forge-field--has-end',
+    HAS_ACCESSORY: 'forge-field--has-accessory',
+    HAS_SUPPORT_START: 'forge-field--has-support-text-start',
+    HAS_SUPPORT_END: 'forge-field--has-support-text-end',
+    RESIZE_CONTAINER: 'resize-container'
+};
+const selectors = {
+    ROOT: '#root',
+    CONTAINER: '#container',
+    LABEL: '#label',
+    POPOVER_ICON: '#popover-icon',
+    RESIZE_CONTAINER: `.${classes.RESIZE_CONTAINER}`,
+    LABEL_ELEMENTS: `:where(label, ${LABEL_CONSTANTS.elementName})`,
+    POPOVER_TARGET: '.popover-target'
+};
+const parts = {
+    ROOT: 'root',
+    LABEL: 'label',
+    CONTAINER: 'container',
+    START: 'start',
+    INPUT: 'input',
+    POPOVER_ICON: 'popover-icon',
+    END: 'end',
+    ACCESSORY: 'accessory',
+    SUPPORT_TEXT: 'support-text',
+    SUPPORT_TEXT_START: 'support-text-start',
+    SUPPORT_TEXT_END: 'support-text-end',
+    FOCUS_INDICATOR: 'focus-indicator'
+};
+const events = {
+    POPOVER_ICON_CLICK: `${elementName}-popover-icon-click`
+};
+const defaults = Object.assign({}, BASE_FIELD_CONSTANTS.defaults);
+const animations = {
+    FLOAT_IN_LABEL: 'float-in-label-animation',
+    FLOAT_OUT_LABEL: 'float-out-label-animation'
+};
+export const FIELD_CONSTANTS = {
+    elementName,
+    observedAttributes,
+    attributes,
+    classes,
+    selectors,
+    parts,
+    events,
+    defaults,
+    animations
+};

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

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { FieldDensity, FieldLabelAlignment, FieldLabelPosition, FieldShape, FieldSupportTextInset, FieldTheme, FieldVariant } from './base/base-field-constants';
+import { IFieldAdapter } from './field-adapter';
+export interface IFieldFoundation extends ICustomElementFoundation {
+    labelPosition: FieldLabelPosition;
+    labelAlignment: FieldLabelAlignment;
+    floatLabel: boolean;
+    invalid: boolean;
+    required: boolean;
+    optional: boolean;
+    disabled: boolean;
+    variant: FieldVariant;
+    theme: FieldTheme;
+    shape: FieldShape;
+    density: FieldDensity;
+    dense: boolean;
+    popoverIcon: boolean;
+    popoverExpanded: boolean;
+    multiline: boolean;
+    supportTextInset: FieldSupportTextInset;
+    initialize(): void;
+    floatLabelWithoutAnimation(value: boolean): void;
+}
+export declare class FieldFoundation implements IFieldFoundation {
+    private _adapter;
+    private _labelPosition;
+    private _labelAlignment;
+    private _floatLabel;
+    private _invalid;
+    private _required;
+    private _optional;
+    private _disabled;
+    private _variant;
+    private _theme;
+    private _shape;
+    private _density;
+    private _dense;
+    private _popoverIcon;
+    private _popoverExpanded;
+    private _multiline;
+    private _supportTextInset;
+    private _slotChangeListener;
+    private _popoverIconClickListener;
+    constructor(_adapter: IFieldAdapter);
+    initialize(): void;
+    private _onSlotChange;
+    private _onPopoverIconClick;
+    floatLabelWithoutAnimation(value: boolean): void;
+    get labelPosition(): FieldLabelPosition;
+    set labelPosition(value: FieldLabelPosition);
+    get labelAlignment(): FieldLabelAlignment;
+    set labelAlignment(value: FieldLabelAlignment);
+    get floatLabel(): boolean;
+    set floatLabel(value: boolean);
+    get invalid(): boolean;
+    set invalid(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    get optional(): boolean;
+    set optional(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get variant(): FieldVariant;
+    set variant(value: FieldVariant);
+    get theme(): FieldTheme;
+    set theme(value: FieldTheme);
+    get shape(): FieldShape;
+    set shape(value: FieldShape);
+    get density(): FieldDensity;
+    set density(value: FieldDensity);
+    get dense(): boolean;
+    set dense(value: boolean);
+    get popoverIcon(): boolean;
+    set popoverIcon(value: boolean);
+    get popoverExpanded(): boolean;
+    set popoverExpanded(value: boolean);
+    get multiline(): boolean;
+    set multiline(value: boolean);
+    get supportTextInset(): FieldSupportTextInset;
+    set supportTextInset(value: FieldSupportTextInset);
+}