import { __decorate } from "tslib";
import { attr, html } from '@ni/fast-element';
import { DesignSystem, TextField as FoundationTextField } from '@ni/fast-foundation';
import { styles } from './styles';
import { TextFieldAppearance } from './types';
import { errorTextTemplate } from '../patterns/error/template';
import { mixinErrorPattern } from '../patterns/error/types';
import { iconExclamationMarkTag } from '../icons/exclamation-mark';
import { template } from './template';
import { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';
/**
 * A nimble-styed HTML text input
 */
export class TextField extends mixinErrorPattern(mixinRequiredVisiblePattern(FoundationTextField)) {
    constructor() {
        super(...arguments);
        /**
         * The appearance the text field should have.
         *
         * @public
         * @remarks
         * HTML Attribute: appearance
         */
        this.appearance = TextFieldAppearance.underline;
        this.fullBleed = false;
        this.appearanceReadOnly = false;
    }
}
__decorate([
    attr
], TextField.prototype, "appearance", void 0);
__decorate([
    attr({ attribute: 'full-bleed', mode: 'boolean' })
], TextField.prototype, "fullBleed", void 0);
__decorate([
    attr({ attribute: 'appearance-readonly', mode: 'boolean' })
], TextField.prototype, "appearanceReadOnly", void 0);
const nimbleTextField = TextField.compose({
    baseName: 'text-field',
    baseClass: FoundationTextField,
    template,
    styles,
    shadowOptions: {
        delegatesFocus: true
    },
    end: html `
        <${iconExclamationMarkTag}
            severity="error"
            class="error-icon"
        ></${iconExclamationMarkTag}>
        <span part="actions">
            <slot name="actions"></slot>
        </span>
        ${errorTextTemplate}
    `
});
DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
export const textFieldTag = 'nimble-text-field';
//# sourceMappingURL=index.js.map