@3mo/field/dist/InputFieldComponent.js

A set of field web components.

import { __decorate } from "tslib";
import { property, query, state } from '@a11d/lit';
import { FieldComponent } from './FieldComponent.js';
/**
 * @attr selectOnFocus - Selects the input text when the field receives focus.
 * @attr dense - Whether the field is dense
 *
 * @csspart input - The input element.
 */
export class InputFieldComponent extends FieldComponent {
    constructor() {
        super(...arguments);
        this.selectOnFocus = false;
        this.dense = false;
    }
    get isPopulated() {
        return !!this.inputStringValue;
    }
    get isDense() {
        return this.dense;
    }
    valueUpdated() {
        this.inputStringValue = this.valueToInputValue(this.value);
        super.valueUpdated();
    }
    handleInput(value, e) {
        this.inputStringValue = this.inputElement.value;
        super.handleInput(value, e);
    }
    handleChange(value, event) {
        super.handleChange(value, event);
        this.inputStringValue = this.valueToInputValue(value);
    }
    handleFocus(bubbled, method) {
        super.handleFocus(bubbled, method);
        if (this.selectOnFocus) {
            this.select();
        }
    }
    async focus() {
        await this.updateComplete;
        this.inputElement.focus();
    }
    async blur() {
        await this.updateComplete;
        this.inputElement.blur();
    }
    async select() {
        await this.updateComplete;
        this.inputElement.select();
    }
    setSelectionRange(...args) {
        this.inputElement.setSelectionRange(...args);
    }
    setRangeText(...args) {
        this.inputElement.setRangeText(...args);
    }
    setCustomValidity(error) {
        this.inputElement.setCustomValidity(error);
    }
    async checkValidity() {
        await this.updateComplete;
        return this.inputElement.checkValidity();
    }
    reportValidity() {
        this.inputElement.reportValidity();
    }
}
__decorate([
    property({ type: Boolean, reflect: true })
], InputFieldComponent.prototype, "selectOnFocus", void 0);
__decorate([
    property({ type: Boolean })
], InputFieldComponent.prototype, "dense", void 0);
__decorate([
    state()
], InputFieldComponent.prototype, "inputStringValue", void 0);
__decorate([
    query('[part=input]')
], InputFieldComponent.prototype, "inputElement", void 0);