// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to
//  deal in the Software without restriction, including without limitation the
//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
//  sell copies of the Software, and to permit persons to whom the Software is
//  furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
//  all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
//  THE SOFTWARE.
import { Component, ElementRef, EventEmitter, forwardRef, Input, Output, ViewChild, ViewEncapsulation, } from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
import { NuiFormFieldControl } from "../form-field/public-api";
import * as i0 from "@angular/core";
import * as i1 from "../spinner/spinner.component";
import * as i2 from "@angular/common";
// <example-url>./../examples/index.html#/textbox</example-url>
/**
 * __Name :__
 * NUI Textbox component.
 *
 */
export class TextboxComponent {
    constructor() {
        /**
         * Use to enable or disable input autocomplete from browser. Default value is "on".
         */
        this.autocomplete = "on";
        /**
         * Event fired when input text is changed.
         */
        this.textChange = new EventEmitter();
        /**
         * The option to disable the text box.
         */
        this.disabled = false;
        /**
         * Help content provided below the text box.
         */
        this.hint = "";
        /**
         * Value used as a placeholder for the text box.
         */
        this.placeholder = "";
        /**
         * The option to make the text box read only.
         */
        this.readonly = false;
        /**
         * Makes textbox multiline (textarea), specifies rows count
         */
        this.rows = 1;
        /**
         * Use to set type of input (number, password etc.).
         */
        this.type = "text";
        /**
         * Input to apply error state styles
         */
        this.isInErrorState = false;
        /**
         * Input to set aria label text
         */
        this.ariaLabel = "Textbox input";
        /**
         * Event fired when textbox is focused out.
         */
        this.blurred = new EventEmitter();
        // i18n nui_textbox_optional
        this.optionalText = "Optional";
    }
    focus() {
        this.textboxInput.nativeElement.focus();
    }
    onBlurEventEmit() {
        this._onTouched();
        this.blurred.emit(this.value);
    }
    onChangeEvent($event) {
        if ($event.target.value !== this.value) {
            this.changeValue($event);
            this.textChange.emit(this.value);
        }
    }
    onChange(value) { }
    _onTouched() { }
    writeValue(value) {
        this.value = value;
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this._onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    changeValue(event) {
        this.writeValue(event.target.value);
        this.onChange(this.value);
    }
}
TextboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
TextboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TextboxComponent, selector: "nui-textbox", inputs: { caption: "caption", autocomplete: "autocomplete", info: "info", customBoxWidth: "customBoxWidth", disabled: "disabled", hint: "hint", name: "name", placeholder: "placeholder", readonly: "readonly", rows: "rows", type: "type", value: "value", isInErrorState: "isInErrorState", ariaLabel: "ariaLabel", isBusy: "isBusy" }, outputs: { textChange: "textChange", blurred: "blurred" }, providers: [
        {
            provide: NuiFormFieldControl,
            useExisting: forwardRef(() => TextboxComponent),
            multi: true,
        },
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => TextboxComponent),
            multi: true,
        },
    ], viewQueries: [{ propertyName: "textboxInput", first: true, predicate: ["textboxInput"], descendants: true }], ngImport: i0, template: "<div\n    class=\"nui-textbox\"\n    [class.nui-textbox--disabled]=\"disabled\"\n    [class.has-error]=\"isInErrorState\"\n>\n    <div class=\"has-feedback\" [ngStyle]=\"{ width: customBoxWidth }\">\n        <input\n            *ngIf=\"!rows || rows <= 1\"\n            class=\"form-control input-control nui-textbox__input\"\n            value=\"{{ value }}\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"disabled\"\n            [attr.name]=\"name\"\n            [type]=\"type\"\n            (blur)=\"onBlurEventEmit()\"\n            (input)=\"onChangeEvent($event)\"\n            [placeholder]=\"placeholder\"\n            [readonly]=\"readonly\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.aria-invalid]=\"isInErrorState\"\n            #textboxInput\n        />\n\n        <textarea\n            *ngIf=\"rows > 1\"\n            class=\"form-control input-control nui-textbox__input\"\n            value=\"{{ value }}\"\n            [rows]=\"rows\"\n            [disabled]=\"disabled\"\n            [attr.name]=\"name\"\n            (blur)=\"onBlurEventEmit()\"\n            (input)=\"onChangeEvent($event)\"\n            [placeholder]=\"placeholder\"\n            [readonly]=\"readonly\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.aria-invalid]=\"isInErrorState\"\n            #textboxInput\n        ></textarea>\n\n        <div class=\"form-control-feedback nui-textbox__busy\">\n            <nui-spinner [show]=\"isBusy\"></nui-spinner>\n        </div>\n    </div>\n</div>\n", styles: [".nui .nui-textbox--disabled .has-feedback .input-control,.nui .nui-textbox--disabled .has-feedback .input-control:hover{color:var(--nui-color-text-disabled,rgba(17, 17, 17, .3))}.nui .nui-textbox--bold .nui-textbox__input{line-height:18px;font-size:13px;font-weight:600;color:#111;color:var(--nui-color-text-default,#111)}.nui .nui-textbox__input{min-height:30px}.nui .nui-textbox .has-feedback{position:relative}.nui .nui-textbox .has-feedback .input-control{padding:5px 10px;overflow-y:hidden}.nui .nui-textbox .has-feedback .input-control.nui-textbox__input--multiline{padding-top:5px}.nui .nui-textbox .has-feedback .input-control:focus{outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}.nui .nui .nui-textbox--centered .has-feedback .input-control{padding:0;text-align:center}.nui .nui-textbox .input-control{resize:vertical}.nui .nui-textbox .input-control[hidden]{display:none!important}.nui .nui-textbox.has-error .help-block,.nui .nui-textbox.has-error .control-label,.nui .nui-textbox.has-error .radio,.nui .nui-textbox.has-error .checkbox,.nui .nui-textbox.has-error .radio-inline,.nui .nui-textbox.has-error .checkbox-inline,.nui .nui-textbox.has-error.nui-radio label,.nui .nui-textbox.has-error.checkbox label,.nui .nui-textbox.has-error.radio-inline label,.nui .nui-textbox.has-error.checkbox-inline label{color:var(--nui-color-text-default,#111)}.nui .nui-textbox.has-error .nui-validation>div{padding:5px 0;color:var(--nui-color-text-default,#111)}.nui .nui-textbox.has-error .input-group-addon{color:var(--nui-color-text-default,#111);border-color:var(--nui-color-line-critical,#dd2c00);background-color:var(--nui-color-bg-content,#fff)}.nui .nui-textbox.has-error .form-control-feedback{color:var(--nui-color-text-default,#111)}.nui .nui-textbox .form-control-feedback{top:12px;margin:0 7px 0 0;position:absolute;right:0;z-index:2;display:block;width:30px;height:30px;line-height:30px;text-align:center;pointer-events:none}.nui .nui-textbox .form-control-feedback.nui-textbox__busy{top:0;margin:0 1px 0 0}.nui .nui-textbox .form-control-feedback svg{position:relative;bottom:3px}.nui .textarea-scrollable .has-feedback .input-control{overflow-y:auto}\n"], components: [{ type: i1.SpinnerComponent, selector: "nui-spinner", inputs: ["percent", "show", "delay", "allowCancel", "message", "helpText", "ariaLabel", "size"], outputs: ["cancel"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextboxComponent, decorators: [{
            type: Component,
            args: [{ selector: "nui-textbox", providers: [
                        {
                            provide: NuiFormFieldControl,
                            useExisting: forwardRef(() => TextboxComponent),
                            multi: true,
                        },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => TextboxComponent),
                            multi: true,
                        },
                    ], encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"nui-textbox\"\n    [class.nui-textbox--disabled]=\"disabled\"\n    [class.has-error]=\"isInErrorState\"\n>\n    <div class=\"has-feedback\" [ngStyle]=\"{ width: customBoxWidth }\">\n        <input\n            *ngIf=\"!rows || rows <= 1\"\n            class=\"form-control input-control nui-textbox__input\"\n            value=\"{{ value }}\"\n            [autocomplete]=\"autocomplete\"\n            [disabled]=\"disabled\"\n            [attr.name]=\"name\"\n            [type]=\"type\"\n            (blur)=\"onBlurEventEmit()\"\n            (input)=\"onChangeEvent($event)\"\n            [placeholder]=\"placeholder\"\n            [readonly]=\"readonly\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.aria-invalid]=\"isInErrorState\"\n            #textboxInput\n        />\n\n        <textarea\n            *ngIf=\"rows > 1\"\n            class=\"form-control input-control nui-textbox__input\"\n            value=\"{{ value }}\"\n            [rows]=\"rows\"\n            [disabled]=\"disabled\"\n            [attr.name]=\"name\"\n            (blur)=\"onBlurEventEmit()\"\n            (input)=\"onChangeEvent($event)\"\n            [placeholder]=\"placeholder\"\n            [readonly]=\"readonly\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.aria-invalid]=\"isInErrorState\"\n            #textboxInput\n        ></textarea>\n\n        <div class=\"form-control-feedback nui-textbox__busy\">\n            <nui-spinner [show]=\"isBusy\"></nui-spinner>\n        </div>\n    </div>\n</div>\n", styles: [".nui .nui-textbox--disabled .has-feedback .input-control,.nui .nui-textbox--disabled .has-feedback .input-control:hover{color:var(--nui-color-text-disabled,rgba(17, 17, 17, .3))}.nui .nui-textbox--bold .nui-textbox__input{line-height:18px;font-size:13px;font-weight:600;color:#111;color:var(--nui-color-text-default,#111)}.nui .nui-textbox__input{min-height:30px}.nui .nui-textbox .has-feedback{position:relative}.nui .nui-textbox .has-feedback .input-control{padding:5px 10px;overflow-y:hidden}.nui .nui-textbox .has-feedback .input-control.nui-textbox__input--multiline{padding-top:5px}.nui .nui-textbox .has-feedback .input-control:focus{outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}.nui .nui .nui-textbox--centered .has-feedback .input-control{padding:0;text-align:center}.nui .nui-textbox .input-control{resize:vertical}.nui .nui-textbox .input-control[hidden]{display:none!important}.nui .nui-textbox.has-error .help-block,.nui .nui-textbox.has-error .control-label,.nui .nui-textbox.has-error .radio,.nui .nui-textbox.has-error .checkbox,.nui .nui-textbox.has-error .radio-inline,.nui .nui-textbox.has-error .checkbox-inline,.nui .nui-textbox.has-error.nui-radio label,.nui .nui-textbox.has-error.checkbox label,.nui .nui-textbox.has-error.radio-inline label,.nui .nui-textbox.has-error.checkbox-inline label{color:var(--nui-color-text-default,#111)}.nui .nui-textbox.has-error .nui-validation>div{padding:5px 0;color:var(--nui-color-text-default,#111)}.nui .nui-textbox.has-error .input-group-addon{color:var(--nui-color-text-default,#111);border-color:var(--nui-color-line-critical,#dd2c00);background-color:var(--nui-color-bg-content,#fff)}.nui .nui-textbox.has-error .form-control-feedback{color:var(--nui-color-text-default,#111)}.nui .nui-textbox .form-control-feedback{top:12px;margin:0 7px 0 0;position:absolute;right:0;z-index:2;display:block;width:30px;height:30px;line-height:30px;text-align:center;pointer-events:none}.nui .nui-textbox .form-control-feedback.nui-textbox__busy{top:0;margin:0 1px 0 0}.nui .nui-textbox .form-control-feedback svg{position:relative;bottom:3px}.nui .textarea-scrollable .has-feedback .input-control{overflow-y:auto}\n"] }]
        }], propDecorators: { textboxInput: [{
                type: ViewChild,
                args: ["textboxInput"]
            }], caption: [{
                type: Input
            }], autocomplete: [{
                type: Input
            }], info: [{
                type: Input
            }], customBoxWidth: [{
                type: Input
            }], textChange: [{
                type: Output
            }], disabled: [{
                type: Input
            }], hint: [{
                type: Input
            }], name: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], readonly: [{
                type: Input
            }], rows: [{
                type: Input
            }], type: [{
                type: Input
            }], value: [{
                type: Input
            }], isInErrorState: [{
                type: Input
            }], ariaLabel: [{
                type: Input
            }], isBusy: [{
                type: Input
            }], blurred: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 