@tylertech/forge 2.0.0

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

@@ -0,0 +1,338 @@
+/**
+ * @license
+ * Copyright 2022 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);
+    }
+    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;
+    }
+    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;
+        }
+    }
+    _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;
+        }
+    }
+    _initializeValue() {
+        super._initializeValue();
+        if (this._selectedValues.length) {
+            this._floatLabel(true);
+        }
+    }
+    _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');
+        }
+    }
+    _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);
+        }
+    }
+    _onClick(evt) {
+        if (this._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))) {
+            return;
+        }
+        this.setFocus();
+        super._onClick(evt);
+    }
+    /** Handles receiving focus on the selected text element. */
+    _onFocus(evt) {
+        if (this._disabled) {
+            return;
+        }
+        this._adapter.addRootClass(FIELD_CONSTANTS.classes.FOCUSED);
+        this._floatLabel(true);
+        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;
+        }
+        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);
+    }
+    /**
+     * Handles selecting an item in the dropdown.
+     * @param {ISelectOption} option The selected option.
+     * @param {number} optionIndex The index of the selected option.
+     */
+    async _onSelect(option, optionIndex, closeDropdown = true) {
+        const result = await super._onSelect(option, optionIndex, closeDropdown);
+        if (result) {
+            this._adapter.setSelectedText(this._getSelectedText());
+            if (closeDropdown && !this._multiple) {
+                this._adapter.setFocus();
+            }
+        }
+        return result;
+    }
+    /** 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));
+    }
+    _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);
+        }
+    }
+    _applyValue(value) {
+        super._applyValue(value);
+        // Update the state of the component based on the existence of a selected value
+        const text = this._getSelectedText();
+        this._adapter.setSelectedText(text);
+        if (!this._open) {
+            this._floatLabel(!!text || !!this._placeholder);
+        }
+    }
+    _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;
+    }
+    set label(value) {
+        if (this._label !== value) {
+            this._label = value;
+            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() : '');
+        }
+    }
+    /** Gets/sets the placeholder text. */
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        if (this._placeholder !== value) {
+            this._placeholder = value;
+            this._adapter.setPlaceholderText(this._placeholder);
+            this._initializeLabel();
+        }
+    }
+}

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

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * 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;
+    label: string;
+    disabled: boolean;
+    placeholder: string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-select': ISelectComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-select-scrolled-bottom': CustomEvent<void>;
+        'change': CustomEvent<any>;
+    }
+}
+/**
+ * The custom element class behind the `<forge-select>` component.
+ */
+export declare class SelectComponent extends BaseSelectComponent<SelectFoundation> 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;
+    /** Sets focus to the internal button element. */
+    focus(): void;
+}

package/esm/select/select/select.js

@@ -0,0 +1,129 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, attachShadowTemplate, FoundationProperty, coerceBoolean } from '@tylertech/forge-core';
+import { tylIconArrowDropDown, tylIconCheckBoxOutlineBlank, tylIconCheckBox } from '@tylertech/tyler-icons/standard';
+import { SelectAdapter } from './select-adapter';
+import { SelectFoundation } from './select-foundation';
+import { SELECT_CONSTANTS } from './select-constants';
+import { OptionComponent } from '../option';
+import { PopupComponent } from '../../popup';
+import { ListComponent, ListItemComponent } from '../../list';
+import { OptionGroupComponent } from '../option-group';
+import { IconComponent, IconRegistry } from '../../icon';
+import { BaseSelectComponent, BASE_SELECT_CONSTANTS } from '../core';
+import { CircularProgressComponent } from '../../circular-progress';
+import { ScaffoldComponent } from '../../scaffold';
+import { ToolbarComponent } from '../../toolbar';
+import { IconButtonComponent } from '../../icon-button';
+import { FIELD_CONSTANTS } from '../../field/field-constants';
+const template = '<template><div class=\"forge-select__wrapper\" part=\"root\"><div class=\"forge-select forge-field\" part=\"container\"><div class=\"forge-select__leading-container\" part=\"leading-container\"><slot name=\"leading\"></slot></div><div class=\"forge-field__label-input-container\" part=\"label-input-container\"><div id=\"selected-text\" class=\"forge-select__selected-text\" tabindex=\"0\" part=\"text\"></div><label id=\"select-label\" part=\"label\"></label></div><forge-icon class=\"forge-select__dropdown-icon\" name=\"arrow_drop_down\" part=\"icon\"></forge-icon><div class=\"forge-field__addon-end-container\" part=\"addon-end-container\"><slot name=\"addon-end\"></slot></div></div><slot name=\"helper-text\"></slot></div></template>';
+const styles = '.forge-select{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:relative;z-index:1;z-index:var(--forge-z-index-surface,1);margin-top:0;margin-top:var(--forge-select-margin-top,0)}.forge-select.forge-field--disabled{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5);cursor:not-allowed}.forge-select:not(.forge-field--dense):not(.forge-field--roomy){height:3rem;height:var(--forge-select-height,3rem)}.forge-select.forge-field--roomy:not(.forge-field--dense){height:3.5rem;height:var(--forge-select-height,3.5rem)}.forge-select.forge-field--dense:not(.forge-field--roomy){height:1.5rem;height:var(--forge-select-height,1.5rem)}.forge-field::before{content:\"\";display:-webkit-box;display:flex;position:absolute;top:0;right:0;left:0;z-index:-1;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:100%;height:100%;pointer-events:none;border-style:solid;border-width:1px;-webkit-transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1);background-color:transparent;background-color:var(--forge-select-theme-background,transparent);text-align:left}.forge-field[dir=rtl]::before,[dir=rtl] .forge-field::before{text-align:right}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused)::before{border-color:rgba(0,0,0,.38);border-color:var(--mdc-theme-text-icon-on-background,rgba(0,0,0,.38))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid):not(.forge-field--focused):hover::before{border-color:rgba(0,0,0,.87);border-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled)::before{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5)}.forge-field--invalid:not(.forge-field--disabled)::before{border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.forge-field--invalid:not(.forge-field--disabled):not(.forge-field--focused):hover::before{border-color:#db8a98;border-color:var(--forge-theme-error-hover,#db8a98)}.forge-field--disabled::before{border-color:rgba(0,0,0,.12);border-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12))}.forge-field:not(.forge-field--shape-rounded){border-radius:4px}.forge-field:not(.forge-field--shape-rounded)::before{border-radius:4px}.forge-field--shape-rounded{border-radius:28px}.forge-field--shape-rounded::before{border-radius:28px}.forge-field--disabled::before{background-color:#f5f5f5;background-color:var(--forge-theme-form-field-disabled-on-background,#f5f5f5)}.forge-field--focused::before{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5);border-width:2px}.forge-field__label-input-container{position:relative;-webkit-box-flex:1;flex:1 1 0.0001px;height:100%;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;min-width:0}.forge-field~::slotted([slot=helper-text]){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;height:auto}.forge-field~::slotted([slot=helper-text])::before{display:inline-block;width:0;height:16px;content:\"\";vertical-align:0}.forge-field:not(.forge-field--dense):not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field--roomy:not(.forge-field--dense)~::slotted([slot=helper-text]){font-size:.875rem}.forge-field--dense:not(.forge-field--roomy)~::slotted([slot=helper-text]){font-size:.75rem}.forge-field~::slotted([slot=helper-text]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled)~::slotted([slot=helper-text]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field:not(.forge-field--shape-rounded)~::slotted([slot=helper-text]){margin-left:12px}.forge-field--shape-rounded~::slotted([slot=helper-text]){margin-left:32px}.forge-field ::slotted([slot=leading]){display:-webkit-box;display:flex;align-self:center}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=leading]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=leading]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=leading]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field ::slotted([slot=leading]){margin:0 4px}.forge-field ::slotted([slot=leading]:not(forge-icon-button)){padding:6px}.forge-field__addon-end-container{display:none}.forge-field--addon-end .forge-field__addon-end-container{height:100%;width:auto;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;padding:0 4px;border-left-width:1px;border-left-style:solid;-webkit-transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-left-color .2s 0s cubic-bezier(0, 0, .2, 1)}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.54);border-left-color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field:not(.forge-field--disabled):not(.forge-field--focused):not(.forge-field--invalid) .forge-field__addon-end-container:hover{border-left-color:rgba(0,0,0,.87);border-left-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#3f51b5;border-left-color:var(--mdc-theme-primary,#3f51b5)}.forge-field.forge-field--invalid:not(.forge-field--disabled) .forge-field__addon-end-container{border-left-color:#b00020;border-left-color:var(--mdc-theme-error,#b00020)}.forge-field.forge-field--invalid:not(.forge-field--focused):not(.forge-field--disabled) .forge-field__addon-end-container:hover{border-left-color:#db8a98;border-left-color:var(--forge-theme-error-hover,#db8a98)}.forge-field.forge-field--disabled .forge-field__addon-end-container{border-left-color:rgba(0,0,0,.12);border-left-color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.12))}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) ::slotted([slot=addon-end]){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) ::slotted([slot=addon-end]){color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled ::slotted([slot=addon-end]){color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-select__leading-container{display:-webkit-box;display:flex;align-self:center}.forge-field label{color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65));pointer-events:none;right:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, .009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);font-size:var(--mdc-typography-subtitle1-font-size, 1rem);position:absolute;left:0;-webkit-transform-origin:left top;transform-origin:left top;line-height:1.1rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform;-webkit-transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),color 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1)}.forge-field label[dir=rtl],[dir=rtl] .forge-field label{right:0;left:auto;-webkit-transform-origin:right top;transform-origin:right top;text-align:right}.forge-field--dense:not(.forge-field--roomy) label{display:none}.forge-field--required label::after{content:none}.forge-field--required label::before{color:#b00020;color:var(--mdc-theme-error,#b00020);content:\"*\";margin-right:4px}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) label{font-size:1rem}.forge-field--roomy:not(.forge-field--dense) label{font-size:1rem}.forge-field--disabled label{color:rgba(0,0,0,.38);color:var(--forge-theme-label-disabled-on-background,rgba(0,0,0,.38))}.forge-field--invalid:not(.forge-field--disabled) label{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) label{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) label{top:1rem}.forge-field--roomy:not(.forge-field--dense) label{top:1.285rem}.forge-field:not(.forge-field--shape-rounded):not(.forge-field--leading) label{left:12px!important}.forge-field--shape-rounded:not(.forge-field--leading) label{left:32px!important}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end):not(.forge-field--shape-rounded) label{padding-right:12px}.forge-field:not(.forge-field--trailing):not(.forge-field--addon-end).forge-field--shape-rounded label{padding-right:32px}.forge-field label.forge-floating-label--float-above{color:rgba(0,0,0,.65);color:var(--forge-theme-form-field-label-on-background,rgba(0,0,0,.65))}.forge-field--disabled label.forge-floating-label--float-above{color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6))}.forge-field--invalid:not(.forge-field--disabled) label.forge-floating-label--float-above{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--focused:not(.forge-field--invalid):not(.forge-field--disabled) label.forge-floating-label--float-above{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) label.forge-floating-label--float-above{-webkit-transform:translateY(-.54rem) scale(.8125);transform:translateY(-.54rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) label.forge-floating-label--float-above{-webkit-transform:translateY(-.72rem) scale(.8125);transform:translateY(-.72rem) scale(.8125);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe{-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.62rem) scale(1);transform:translateY(-.62rem) scale(1);cursor:auto}.forge-field--roomy:not(.forge-field--dense) label.forge-floating-label--float-above.forge-floating-label--float-above-end-keyframe{-webkit-transition:none;transition:none;font-size:.8125rem;-webkit-transform:translateY(-.8rem) scale(1);transform:translateY(-.8rem) scale(1);cursor:auto}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) label.forge-floating-label--unfloat-above-start-keyframe{-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.62rem) scale(.8125);transform:translateY(-.62rem) scale(.8125);cursor:auto}.forge-field--roomy:not(.forge-field--dense) label.forge-floating-label--unfloat-above-start-keyframe{-webkit-transition:none;transition:none;font-size:1rem;-webkit-transform:translateY(-.8rem) scale(.8125);transform:translateY(-.8rem) scale(.8125);cursor:auto}.forge-field .forge-select__selected-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, .03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));display:block;overflow:hidden;text-overflow:ellipsis;align-self:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;-webkit-transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);transition:opacity 150ms 0s cubic-bezier(.4, 0, .2, 1);border:none;background:0 0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;line-height:normal;min-width:0;font-size:var(--forge-select-font-size, 1rem);padding:0 12px;padding-right:0}.forge-field:not(.forge-field--disabled) .forge-select__selected-text{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-field--disabled .forge-select__selected-text{color:rgba(0,0,0,.6);color:var(--forge-theme-form-field-text-disabled-on-background,rgba(0,0,0,.6));cursor:not-allowed}.forge-field:not(.forge-field--dense):not(.forge-field--roomy) .forge-select__selected-text{font-size:1rem}.forge-field--roomy:not(.forge-field--dense) .forge-select__selected-text{font-size:1rem}.forge-field--dense:not(.forge-field--roomy) .forge-select__selected-text{font-size:.875rem}.forge-field .forge-select__selected-text{padding:0 12px}.forge-field--label .forge-select__selected-text{padding-top:24px}.forge-field--roomy.forge-field--label .forge-select__selected-text{padding-top:29px}.forge-field--shape-rounded:not(.forge-field--leading) .forge-select__selected-text{padding-left:32px}.forge-field--leading .forge-select__selected-text{padding-left:0}.forge-field--label .forge-select__selected-text{padding-bottom:3px}.forge-field--roomy.forge-field--label .forge-select__selected-text{padding-bottom:8px}.forge-field:not(.forge-field--label):not(.forge-field--dense):not(.forge-field--roomy) .forge-select__selected-text{line-height:var(--forge-select-height, 3rem)}.forge-field:not(.forge-field--label).forge-field--roomy:not(.forge-field--dense) .forge-select__selected-text{line-height:var(--forge-select-height-roomy, 3.5rem)}.forge-field:not(.forge-field--label).forge-field--dense:not(.forge-field--roomy) .forge-select__selected-text{line-height:var(--forge-select-height-dense, 1.5rem)}.forge-field.forge-field--dense:not(.forge-field--roomy) .forge-select__selected-text{padding:0 8px}.forge-field .forge-select__selected-text:empty::before{content:attr(placeholder);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54));font-size:.875rem}.forge-field .forge-select__selected-text{padding-top:25px}.forge-field .forge-select__dropdown-icon{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:24px;height:100%;-webkit-box-flex:0;flex:none;-webkit-transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);pointer-events:none;margin-right:8px}.forge-select--opened .forge-field .forge-select__dropdown-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1)}.forge-select--opened .forge-field .forge-select__dropdown-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1);transition:transform 150ms cubic-bezier(.4, 0, .2, 1),-webkit-transform 150ms cubic-bezier(.4, 0, .2, 1)}.forge-field:not(.forge-field--disabled):not(.forge-field--invalid) .forge-select__dropdown-icon{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-field--invalid:not(.forge-field--disabled) .forge-select__dropdown-icon{color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-field--disabled .forge-select__dropdown-icon{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:not-allowed;pointer-events:none}.forge-field.forge-field--dense:not(.forge-field--roomy) .forge-select__dropdown-icon{margin-right:4px}:host{display:block;contain:layout}:host([hidden]){display:none}';
+/**
+ * The custom element class behind the `<forge-select>` component.
+ */
+let SelectComponent = class SelectComponent extends BaseSelectComponent {
+    constructor() {
+        super();
+        IconRegistry.define([tylIconArrowDropDown, tylIconCheckBox, tylIconCheckBoxOutlineBlank]);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new SelectFoundation(new SelectAdapter(this));
+    }
+    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,
+            SELECT_CONSTANTS.attributes.LABEL,
+            SELECT_CONSTANTS.attributes.MULTIPLE,
+            SELECT_CONSTANTS.attributes.VALUE,
+            SELECT_CONSTANTS.attributes.DISABLED,
+            SELECT_CONSTANTS.attributes.PLACEHOLDER,
+            SELECT_CONSTANTS.attributes.OBSERVE_SCROLL,
+            SELECT_CONSTANTS.attributes.OBSERVE_SCROLL_THRESHOLD,
+            BASE_SELECT_CONSTANTS.attributes.POPUP_CLASSES,
+            BASE_SELECT_CONSTANTS.attributes.OPTION_LIMIT,
+            BASE_SELECT_CONSTANTS.attributes.SYNC_POPUP_WIDTH
+        ];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case FIELD_CONSTANTS.attributes.DENSITY:
+                this.density = newValue;
+                return;
+            case FIELD_CONSTANTS.attributes.FLOAT_LABEL_TYPE:
+                this.floatLabelType = newValue;
+                return;
+            case FIELD_CONSTANTS.attributes.SHAPE:
+                this.shape = newValue;
+                break;
+            case FIELD_CONSTANTS.attributes.INVALID:
+                this.invalid = coerceBoolean(newValue);
+                return;
+            case FIELD_CONSTANTS.attributes.REQUIRED:
+                this.required = coerceBoolean(newValue);
+                return;
+            case SELECT_CONSTANTS.attributes.LABEL:
+                this.label = newValue;
+                return;
+            case SELECT_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                return;
+            case SELECT_CONSTANTS.attributes.PLACEHOLDER:
+                this.placeholder = newValue;
+                return;
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    /** Sets focus to the internal button element. */
+    focus() {
+        this._foundation.setFocus();
+    }
+};
+__decorate([
+    FoundationProperty()
+], SelectComponent.prototype, "label", void 0);
+__decorate([
+    FoundationProperty()
+], SelectComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], SelectComponent.prototype, "invalid", void 0);
+__decorate([
+    FoundationProperty()
+], SelectComponent.prototype, "required", void 0);
+__decorate([
+    FoundationProperty()
+], SelectComponent.prototype, "density", void 0);
+__decorate([
+    FoundationProperty()
+], SelectComponent.prototype, "floatLabelType", void 0);
+__decorate([
+    FoundationProperty()
+], SelectComponent.prototype, "shape", void 0);
+__decorate([
+    FoundationProperty()
+], SelectComponent.prototype, "placeholder", void 0);
+SelectComponent = __decorate([
+    CustomElement({
+        name: SELECT_CONSTANTS.elementName,
+        dependencies: [
+            OptionComponent,
+            OptionGroupComponent,
+            PopupComponent,
+            ListComponent,
+            ListItemComponent,
+            CircularProgressComponent,
+            IconComponent,
+            ScaffoldComponent,
+            ToolbarComponent,
+            IconButtonComponent
+        ]
+    })
+], SelectComponent);
+export { SelectComponent };

package/esm/select/select-component-delegate.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @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 { ISelectComponent } from './select/select';
+export declare type SelectComponentDelegateProps = Partial<ISelectComponent>;
+export interface ISelectComponentDelegateOptions extends IFormFieldComponentDelegateOptions {
+    helperText?: string;
+}
+export interface ISelectComponentDelegateConfig extends IBaseComponentDelegateConfig<ISelectComponent, ISelectComponentDelegateOptions> {
+}
+export declare class SelectComponentDelegate extends FormFieldComponentDelegate<ISelectComponent, ISelectComponentDelegateOptions> {
+    private _helperTextElement;
+    constructor(config?: ISelectComponentDelegateConfig);
+    protected _build(): ISelectComponent;
+    protected _configure(): void;
+    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;
+    onFocus(listener: (evt: Event) => void): void;
+    onBlur(listener: (evt: Event) => void): void;
+    setHelperText(text: string | null): void;
+}

package/esm/select/select-component-delegate.js

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { FormFieldComponentDelegate } from '../core/delegates/form-field-component-delegate';
+import { SELECT_CONSTANTS } from './select/select-constants';
+export class SelectComponentDelegate extends FormFieldComponentDelegate {
+    constructor(config) {
+        super(config);
+    }
+    _build() {
+        return document.createElement(SELECT_CONSTANTS.elementName);
+    }
+    _configure() {
+        var _a;
+        if (typeof ((_a = this._config.options) === null || _a === void 0 ? void 0 : _a.helperText) === 'string') {
+            this.setHelperText(this._config.options.helperText);
+        }
+    }
+    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._element.invalid || false;
+    }
+    set invalid(value) {
+        this._element.invalid = value;
+    }
+    onChange(listener) {
+        this._element.addEventListener('change', (evt) => listener(evt.detail));
+    }
+    onFocus(listener) {
+        this._element.addEventListener('focus', evt => listener(evt));
+    }
+    onBlur(listener) {
+        this._element.addEventListener('blur', evt => listener(evt));
+    }
+    setHelperText(text) {
+        if (text) {
+            if (!this._helperTextElement) {
+                this._helperTextElement = document.createElement('span');
+                this._helperTextElement.slot = 'helper-text';
+                this._element.appendChild(this._helperTextElement);
+            }
+            this._helperTextElement.textContent = text;
+        }
+        else if (this._helperTextElement && this._helperTextElement.isConnected) {
+            this._element.removeChild(this._helperTextElement);
+            this._helperTextElement = undefined;
+        }
+    }
+}

package/esm/select/select-dropdown/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './select-dropdown-adapter';
+export * from './select-dropdown-constants';
+export * from './select-dropdown-foundation';
+export * from './select-dropdown';
+export declare function defineSelectDropdownComponent(): void;

package/esm/select/select-dropdown/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { SelectDropdownComponent } from './select-dropdown';
+export * from './select-dropdown-adapter';
+export * from './select-dropdown-constants';
+export * from './select-dropdown-foundation';
+export * from './select-dropdown';
+export function defineSelectDropdownComponent() {
+    defineCustomElement(SelectDropdownComponent);
+}