@tylertech/forge 3.0.0-next.21 → 3.0.0-next.23

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

@@ -5,54 +5,33 @@
  */
 import { IBaseSelectFoundation, ISelectOption, BaseSelectFoundation } from '../core';
 import { ISelectAdapter } from './select-adapter';
-import { FieldDensityType, FieldFloatLabelType, FieldShapeType } from '../../field/field-constants';
 export interface ISelectFoundation extends IBaseSelectFoundation {
     label: string;
-    disabled: boolean;
-    density: FieldDensityType;
-    invalid: boolean;
-    required: boolean;
-    floatLabelType: FieldFloatLabelType;
     placeholder: string;
+    syncFloatingLabelState(opts: {
+        force?: boolean;
+    }): void;
+    setDisabled(value: boolean): void;
 }
-/**
- * The foundation class behind the `<forge-select>` component.
- */
 export declare class SelectFoundation extends BaseSelectFoundation<ISelectAdapter> implements ISelectFoundation {
-    private _floatingLabelInstance;
-    private _shape;
     private _label;
-    private _disabled;
-    private _invalid;
-    private _required;
-    private _floatLabelType;
     private _placeholder;
-    private _density;
-    private _isInitialized;
-    private _leadingChangeListener;
-    private _addonEndChangeListener;
+    private _permanentlyFloatLabel;
     private _mousedownListener;
     constructor(adapter: ISelectAdapter);
     initialize(): void;
     disconnect(): void;
+    syncFloatingLabelState({ force }?: {
+        force?: boolean;
+    }): void;
+    setDisabled(value: boolean): void;
     private _initializeLabel;
-    private _destroyLabel;
     protected _initializeValue(): void;
     private _initializeAccessibility;
     private _onMouseDown;
-    /** Called when the `slotchange` event fires on the "leading" slot element. */
-    private _onLeadingSlotChanged;
-    /** Called when the `slotchange` event fires on the "addon-end" slot element. */
-    private _onAddonEndSlotChanged;
-    /** Updates the component state based on the existance of elements within the "leading" slot. */
-    private _detectLeadingElement;
-    private _detectAddonEndContent;
     protected _onClick(evt: MouseEvent): void;
-    /** Handles receiving focus on the selected text element. */
-    protected _onFocus(evt: Event): void;
-    protected _floatLabel(value: boolean): void;
-    /** Handles losing focus on the selected text element. */
-    protected _onBlur(evt: FocusEvent): void;
+    protected _openDropdown(): void;
+    protected _closeDropdown(): void;
     protected _onDismiss(): void;
     protected _onDropdownScrollEnd(): void;
     /**
@@ -61,38 +40,13 @@ export declare class SelectFoundation extends BaseSelectFoundation<ISelectAdapte
      * @param {number} optionIndex The index of the selected option.
      */
     protected _onSelect(option: ISelectOption, optionIndex: number, closeDropdown?: boolean): Promise<boolean>;
-    /** Updates the state of the component to contain focus. */
-    private _setFocused;
-    /** Updates the state of the component to not contain focus. */
-    private _setBlurred;
-    /** Resets the state of the component to original values. */
     protected _reset(): void;
+    private _tryFloatLabel;
     private _updateLabel;
     protected _applyValue(value: string | string[]): void;
-    private _applyDensity;
-    protected _setShapeType(): void;
-    setFocus(): void;
     /** Gets/sets the label text. */
     get label(): string;
     set label(value: string);
-    get shape(): FieldShapeType;
-    set shape(value: FieldShapeType);
-    /** Gets/sets the disabled state. */
-    get disabled(): boolean;
-    set disabled(value: boolean);
-    /** Gets/sets the invalid state. */
-    get invalid(): boolean;
-    set invalid(value: boolean);
-    /** Gets/sets the required state which controls the visibility of the asterisk in the label. */
-    get required(): boolean;
-    set required(value: boolean);
-    /** Gets/sets the dense state. */
-    get density(): FieldDensityType;
-    set density(value: FieldDensityType);
-    /** Gets/sets the floating label type. */
-    get floatLabelType(): FieldFloatLabelType;
-    set floatLabelType(value: FieldFloatLabelType);
-    /** Gets/sets the placeholder text. */
     get placeholder(): string;
     set placeholder(value: string);
 }

package/esm/select/select/select-foundation.js

@@ -3,171 +3,77 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { isDefined, getEventPath } from '@tylertech/forge-core';
 import { BaseSelectFoundation } from '../core';
 import { SELECT_CONSTANTS } from './select-constants';
-import { FIELD_CONSTANTS } from '../../field/field-constants';
-/**
- * The foundation class behind the `<forge-select>` component.
- */
 export class SelectFoundation extends BaseSelectFoundation {
     constructor(adapter) {
         super(adapter);
-        this._shape = 'default';
         this._label = '';
-        this._disabled = false;
-        this._invalid = false;
-        this._required = false;
-        this._floatLabelType = 'auto';
-        this._density = 'default';
-        this._isInitialized = false;
-        this._leadingChangeListener = evt => this._onLeadingSlotChanged(evt);
-        this._addonEndChangeListener = evt => this._onAddonEndSlotChanged(evt);
-        this._targetWidthCallback = () => this._adapter.getTargetWidth();
-        this._mousedownListener = evt => this._onMouseDown(evt);
+        this._permanentlyFloatLabel = false;
+        this._mousedownListener = this._onMouseDown.bind(this);
     }
     initialize() {
         super.initialize();
         super.initializeTarget();
         this._initializeLabel();
         this._initializeAccessibility();
-        this._adapter.setPlaceholderText(this._placeholder);
-        this._applyDensity();
-        this._setShapeType();
-        this._detectLeadingElement();
-        this._detectAddonEndContent();
-        this._adapter.addMouseDownListener(this._mousedownListener);
-        this._adapter.setLeadingListener(this._leadingChangeListener);
-        this._adapter.setAddonEndListener(this._addonEndChangeListener);
-        if (this._disabled) {
-            this._adapter.setDisabled(true);
-        }
-        if (this._invalid) {
-            this._adapter.setInvalid(true);
-        }
-        this._isInitialized = true;
+        this._adapter.addTargetListener('mousedown', this._mousedownListener);
     }
     disconnect() {
         super.disconnect();
-        this._adapter.removeMouseDownListener(this._mousedownListener);
-        this._adapter.removeLeadingListener(this._leadingChangeListener);
-        this._adapter.removeAddonEndListener(this._leadingChangeListener);
-        if (this._floatingLabelInstance) {
-            this._floatingLabelInstance.destroy();
-            this._floatingLabelInstance = undefined;
+        this._adapter.removeTargetListener('mousedown', this._mousedownListener);
+    }
+    syncFloatingLabelState({ force } = {}) {
+        if (force !== undefined) {
+            this._permanentlyFloatLabel = force;
         }
+        this._updateLabel();
+        this._tryFloatLabel();
+    }
+    setDisabled(value) {
+        this._adapter.setDisabled(value);
     }
     _initializeLabel() {
-        this._adapter.initializeLabel();
         this._updateLabel();
-        this._floatingLabelInstance = this._adapter.initializeFloatingLabel();
-        if (this._floatLabelType === 'always') {
-            this._floatLabel(true);
-        }
-        else {
-            const hasText = !!this._getSelectedText();
-            const hasPlaceholder = !!this._placeholder;
-            this._floatLabel(hasText || hasPlaceholder);
-        }
-    }
-    _destroyLabel() {
-        if (this._floatingLabelInstance) {
-            this._floatingLabelInstance.destroy();
-            this._floatingLabelInstance = undefined;
-        }
+        this._tryFloatLabel();
     }
     _initializeValue() {
         super._initializeValue();
-        if (this._selectedValues.length) {
-            this._floatLabel(true);
-        }
+        this._tryFloatLabel();
     }
     _initializeAccessibility() {
         this._adapter.setMultiple(this._multiple);
-        if (this._required) {
-            this._adapter.setHostAttribute('aria-required', 'true');
-        }
-        if (this._disabled) {
-            this._adapter.setHostAttribute('aria-disabled', 'true');
-        }
-        if (this._invalid) {
-            this._adapter.setHostAttribute('aria-invalid', 'true');
-        }
+        this._adapter.initializeAccessibility();
     }
     _onMouseDown(evt) {
-        const isElementWithinSelf = this._adapter.isWithinSelf(evt.target);
-        if (isElementWithinSelf) {
-            evt.preventDefault();
-        }
-    }
-    /** Called when the `slotchange` event fires on the "leading" slot element. */
-    _onLeadingSlotChanged(evt) {
-        this._detectLeadingElement();
-    }
-    /** Called when the `slotchange` event fires on the "addon-end" slot element. */
-    _onAddonEndSlotChanged(evt) {
-        this._detectAddonEndContent();
-    }
-    /** Updates the component state based on the existance of elements within the "leading" slot. */
-    _detectLeadingElement() {
-        if (this._adapter.hasLeadingElement()) {
-            this._adapter.addRootClass(FIELD_CONSTANTS.classes.LEADING);
-        }
-        else {
-            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.LEADING);
-        }
-    }
-    _detectAddonEndContent() {
-        if (this._adapter.hasAddonEndNodes()) {
-            this._adapter.addRootClass(FIELD_CONSTANTS.classes.ADDON_END);
-        }
-        else {
-            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.ADDON_END);
-        }
+        evt.preventDefault();
     }
     _onClick(evt) {
-        if (this._disabled) {
+        if (this._adapter.fieldElement.disabled) {
             return;
         }
-        // We ignore clicks events that originate from without our addon-end container
-        const composedPath = getEventPath(evt);
-        if (composedPath.find(el => el.classList && el.classList.contains(FIELD_CONSTANTS.classes.ADDON_END_CONTAINER))) {
+        // We ignore clicks events that originate from within the field accessory slot
+        const composedPath = evt.composedPath();
+        if (composedPath.find(el => { var _a; return (_a = el.matches) === null || _a === void 0 ? void 0 : _a.call(el, 'slot[name=accessory]'); })) {
             return;
         }
-        this.setFocus();
+        this._adapter.focusHost();
         super._onClick(evt);
     }
-    /** Handles receiving focus on the selected text element. */
-    _onFocus(evt) {
-        if (this._disabled) {
-            return;
+    _openDropdown() {
+        super._openDropdown();
+        if (this._open) {
+            this._adapter.toggleHostAttribute(SELECT_CONSTANTS.attributes.OPEN, true);
         }
-        this._setFocused();
-        super._onFocus(evt);
     }
-    _floatLabel(value) {
-        if (!this._floatingLabelInstance) {
-            return;
-        }
-        if (value) {
-            this._adapter.addRootClass(SELECT_CONSTANTS.classes.LABEL_FLOAT);
-        }
-        else {
-            this._adapter.removeRootClass(SELECT_CONSTANTS.classes.LABEL_FLOAT);
-        }
-        if (this._floatLabelType === 'always') {
-            value = true;
+    _closeDropdown() {
+        super._closeDropdown();
+        if (!this._open) {
+            this._adapter.toggleHostAttribute(SELECT_CONSTANTS.attributes.OPEN, false);
         }
-        this._floatingLabelInstance.float(value, this._floatLabelType === 'always');
-    }
-    /** Handles losing focus on the selected text element. */
-    _onBlur(evt) {
-        super._onBlur(evt);
-        this._setBlurred();
     }
     _onDismiss() {
         super._onDismiss();
-        this._setBlurred();
     }
     _onDropdownScrollEnd() {
         this._adapter.emitHostEvent(SELECT_CONSTANTS.events.SCROLLED_BOTTOM);
@@ -182,41 +88,28 @@ export class SelectFoundation extends BaseSelectFoundation {
         if (result) {
             this._adapter.setSelectedText(this._getSelectedText());
             if (closeDropdown && !this._multiple) {
-                this._adapter.setFocus();
+                this._adapter.focusHost();
             }
         }
+        this._tryFloatLabel();
         return result;
     }
-    /** Updates the state of the component to contain focus. */
-    _setFocused() {
-        this._adapter.addRootClass(FIELD_CONSTANTS.classes.FOCUSED);
-        this._floatLabel(true);
-    }
-    /** Updates the state of the component to not contain focus. */
-    _setBlurred() {
-        var _a;
-        this._adapter.removeRootClass(FIELD_CONSTANTS.classes.FOCUSED);
-        if (!this._selectedValues.length && !((_a = this._placeholder) === null || _a === void 0 ? void 0 : _a.length)) {
-            this._floatLabel(false);
-        }
-    }
-    /** Resets the state of the component to original values. */
     _reset() {
-        var _a;
         super._reset();
         this._adapter.setSelectedText('');
-        this._floatLabel(!((_a = this._placeholder) === null || _a === void 0 ? void 0 : _a.length));
+        this._tryFloatLabel();
     }
-    _updateLabel() {
-        if (this._adapter.hasLabel()) {
-            this._adapter.setLabel(this._label);
-        }
-        if (this._label && this._density !== 'dense') {
-            this._adapter.addRootClass(FIELD_CONSTANTS.classes.LABEL);
-        }
-        else {
-            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.LABEL);
+    _tryFloatLabel() {
+        if (this._permanentlyFloatLabel) {
+            this._adapter.floatLabel(true);
+            return;
         }
+        const hasValue = !!this._getSelectedText() || !!this._selectedValues.length;
+        const hasPlaceholder = !!this._placeholder;
+        this._adapter.floatLabel(hasValue || hasPlaceholder);
+    }
+    _updateLabel() {
+        this._adapter.setLabel(this._label);
     }
     _applyValue(value) {
         super._applyValue(value);
@@ -224,24 +117,9 @@ export class SelectFoundation extends BaseSelectFoundation {
         const text = this._getSelectedText();
         this._adapter.setSelectedText(text);
         if (!this._open) {
-            this._floatLabel(!!text || !!this._placeholder);
+            this._tryFloatLabel();
         }
     }
-    _applyDensity() {
-        this._adapter.setRoomy(this._density === 'roomy');
-        this._adapter.setDense(this._density === 'dense');
-    }
-    _setShapeType() {
-        if (this._shape === 'rounded') {
-            this._adapter.addRootClass(FIELD_CONSTANTS.classes.SHAPE_ROUNDED);
-        }
-        else {
-            this._adapter.removeRootClass(FIELD_CONSTANTS.classes.SHAPE_ROUNDED);
-        }
-    }
-    setFocus() {
-        this._adapter.setFocus();
-    }
     /** Gets/sets the label text. */
     get label() {
         return this._label;
@@ -252,83 +130,10 @@ export class SelectFoundation extends BaseSelectFoundation {
             this._updateLabel();
             if (this._label) {
                 this._initializeLabel();
-                this._adapter.setHostAttribute(SELECT_CONSTANTS.attributes.LABEL, this._label);
-            }
-            else {
-                this._destroyLabel();
-                this.required = false;
-                this._adapter.removeHostAttribute(SELECT_CONSTANTS.attributes.LABEL);
-            }
-        }
-    }
-    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);
-        }
-    }
-    /** Gets/sets the disabled state. */
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        if (this._disabled !== value) {
-            this._disabled = value;
-            this._adapter.setDisabled(this._disabled);
-            this._initializeLabel();
-        }
-    }
-    /** Gets/sets the invalid state. */
-    get invalid() {
-        return this._invalid;
-    }
-    set invalid(value) {
-        if (this._invalid !== value) {
-            this._invalid = value;
-            this._adapter.setInvalid(this._invalid);
-        }
-    }
-    /** Gets/sets the required state which controls the visibility of the asterisk in the label. */
-    get required() {
-        return this._required;
-    }
-    set required(value) {
-        if (this._required !== value) {
-            this._required = value;
-            this._adapter.setRequired(this._required);
-            this._adapter.toggleHostAttribute(FIELD_CONSTANTS.attributes.REQUIRED, this._required);
-        }
-    }
-    /** Gets/sets the dense state. */
-    get density() {
-        return this._density;
-    }
-    set density(value) {
-        if (this._density !== value) {
-            this._density = value;
-            this._applyDensity();
-            this._adapter.setHostAttribute(FIELD_CONSTANTS.attributes.DENSITY, this._density.toString());
-            this._initializeLabel(); // This ensures label is removed while dense
-        }
-    }
-    /** Gets/sets the floating label type. */
-    get floatLabelType() {
-        return this._floatLabelType;
-    }
-    set floatLabelType(value) {
-        if (this._floatLabelType !== value) {
-            this._floatLabelType = value;
-            this._floatLabel(this._floatLabelType === 'always' || !!this._placeholder);
-            this._adapter.setHostAttribute(FIELD_CONSTANTS.attributes.FLOAT_LABEL_TYPE, isDefined(this._floatLabelType) ? this._floatLabelType.toString() : '');
+            this._adapter.toggleHostAttribute(SELECT_CONSTANTS.attributes.LABEL, !!this._label, this._label);
         }
     }
-    /** Gets/sets the placeholder text. */
     get placeholder() {
         return this._placeholder;
     }

package/esm/select/select/select.d.ts

@@ -4,17 +4,11 @@
  * License: Apache-2.0
  */
 import { SelectFoundation } from './select-foundation';
-import { BaseSelectComponent } from '../core';
-import { FieldDensityType, FieldFloatLabelType, FieldShapeType } from '../../field/field-constants';
-import { IBaseSelectComponent } from '../core/base-select';
-export interface ISelectComponent extends IBaseSelectComponent {
-    density: FieldDensityType;
-    floatLabelType: FieldFloatLabelType;
-    shape: FieldShapeType;
-    invalid: boolean;
-    required: boolean;
+import { BaseSelectComponent, IBaseSelectComponent } from '../core';
+import { FieldDensity, FieldLabelPosition } from '../../field';
+import { IWithBaseField } from '../../field/base/with-base-field';
+export interface ISelectComponent extends IWithBaseField, IBaseSelectComponent {
     label: string;
-    disabled: boolean;
     placeholder: string;
 }
 declare global {
@@ -26,29 +20,25 @@ declare global {
         'change': CustomEvent<any>;
     }
 }
+declare const BaseClass: import("../..").AbstractConstructor<import("../../field/base/with-base-field").WithBaseFieldContract> & (abstract new () => BaseSelectComponent<SelectFoundation>);
 /**
- * The custom element class behind the `<forge-select>` component.
- *
  * @tag forge-select
  */
-export declare class SelectComponent extends BaseSelectComponent<SelectFoundation> implements ISelectComponent {
+export declare class SelectComponent extends BaseClass implements ISelectComponent {
     static get observedAttributes(): string[];
     constructor();
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** Gets/sets the label text. */
     label: string;
-    /** Gets/sets the disabled state. */
-    disabled: boolean;
-    /** 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 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 placeholder text. */
     placeholder: string;
+    get floatLabel(): boolean;
+    set floatLabel(value: boolean);
+    get density(): FieldDensity;
+    set density(value: FieldDensity);
+    get dense(): boolean;
+    set dense(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get labelPosition(): FieldLabelPosition;
+    set labelPosition(value: FieldLabelPosition);
 }
+export {};