import { ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { AbstractControl, ControlContainer, ControlValueAccessor } from '@angular/forms';
import { QdFocusable } from '../../core/focusable/focusable';
import { QdEventBrokerService } from '../../core/services/event-broker.service';
import { QdFormInputConfiguration, QdInputMode, QdInputType, QdInputValue, QdInputValueWithUnit } from '../model/forms.interface';
import { QdFormInputOption } from '../model/options.interface';
import { QdFormControl } from '../reactive-forms/controls/form-control';
import { QdFormsActionEmitterService } from '../shared/services/action-emitter.service';
import { QdFormOptionsResolverRegistry } from '../shared/services/options-resolver.registry';
import * as i0 from "@angular/core";
/**
 * The **QdInput** component provides a FormElement for entering text into a UI.<br />
 * It can be used with Quadrel Reactive Forms or with model binding.
 *
 * ### **Usage with Reactive Forms**
 *
 * ```ts
 * form = new QdFormGroup({
 *   input: new QdFormControl()
 * });
 * ```
 * ```html
 * <form [formGroup]="form">
 *   <qd-input [formControlName]="input" [config]="config"></qd-input>
 * </form>
 * ```
 *
 * ### **Usage with Model Binding**
 * ```ts
 * value;
 * ```
 * ```html
 * <qd-input [(value)]="value" [config]="config"></qd-input>
 * ```
 *
 * ## **Suggested Options**
 *
 * ### **Static options by config**
 *
 * Static options can be defined in the config `options` field:
 *
 * ```ts
 * config: QdFormInputConfiguration = {
 *   ...
 *   options: [
 *     { i18n: 'i18n.qd.exampleFormField.goodsDeclaration.import', value: 'import' },
 *     { i18n: 'i18n.qd.exampleFormField.goodsDeclaration.export', value: 'export' },
 *     { i18n: 'i18n.qd.exampleFormField.goodsDeclaration.transit', value: 'transit', disabled: true }
 *   ]
 * }
 * ```
 * ```html
 * <qd-input [config]="config"></qd-input>
 * ```
 *
 * <Story id="components-grid-system-container--columns-6" />
 *
 * ### **Dynamic options by resolver**
 *
 * If you want to define the options dynamically, you can inject a `QdFormOptionsResolver`
 * with the `QD_FORM_OPTIONS_RESOLVER` injection token. The resolver just has to implement the `resolver`
 * method.
 *
 * ```ts
 * @Injectable()
 * export class YourFormOptionsResolver implements QdFormOptionsResolver {
 *   constructor(private readonly httpClient: HttpClient) {}
 *
 *   resolve(value: string): Observable<QdFormInput[]> {
 *     return this.httpClient
 *       .get(yourBackendUrl)
 *       .pipe(
 *         catchError(error => {
 *           console.error('your error message');
 *
 *           return throwError(error);
 *         })
 *       );
 *   }
 * }
 * ```
 * The options resolver can be injected into a component that contains the `QdInput` or also into a parent
 * component. If you need dynamic options for the search in the section toolbar, you can inject
 * the resolver on a higher level, e.g. in the component that contains the section.
 *
 * ```ts
 * @Component({
 *   ...
 *   providers: [
 *     ...
 *     {
 *       provide: QD_FORM_OPTIONS_RESOLVER,
 *       useClass: YourFormOptionsResolver
 *     }
 *   ]
 * })
 * ```
 *
 * By default, the resolver is applied to every input that is inside the component that injects the resolver.
 * To disable the resolver for an input, you have to set the `optionsResolverName` property in the
 * input config to `null`. It's also possible to define a `name` for the resolver by setting the `name` property
 * in the resolver class. Thus, you can connect the input to a specific resolver. Below there is also a
 * description of how to use multiple inputs with different resolvers in one component.
 * <br><br>
 *
 * #### **Multiple inputs with suggested options**
 *
 * For multiple inputs with various resolvers in one component you can distinguish the resolvers by setting the
 * `name` as a property in the resolver class.
 *
 * ```ts
 * @Injectable()
 * export class FruitsFormOptionsResolver implements QdFormOptionsResolver {
 *   name = 'fruits';
 *   // ...
 * }
 * ```
 *
 * ```ts
 * @Injectable()
 * export class CountriesFormOptionsResolver implements QdFormOptionsResolver {
 *   name = 'countries';
 *   // ...
 * }
 * ```
 *
 * Then the input can be assigned to a resolver by setting the `optionsResolverName` property
 * in the input config.
 *
 * ```ts
 * config: QdFormInputConfiguration = {
 *   ...
 *   optionsResolverName: 'fruits'
 * }
 *
 * config2: QdFormInputConfiguration = {
 *   ...
 *   optionsResolverName: 'countries'
 * }
 * ```
 * ```html
 * <qd-input [config]="config"></qd-input>
 * <qd-input [config]="config2"></qd-input>
 * ```
 * To inject multiple resolvers in a component you can use the provider setting `multi: true`.
 *
 * ```ts
 * @Component({
 *   ...
 *   providers: [
 *     ...
 *     {
 *       provide: QD_FORM_OPTIONS_RESOLVER,
 *       useClass: FruitsFormOptionsResolver,
 *       multi: true
 *     },
 *     {
 *       provide: QD_FORM_OPTIONS_RESOLVER,
 *       useClass: CountriesFormOptionsResolver,
 *       multi: true
 *     }
 *   ]
 * })
 * ```
 *
 * #### **Custom loading and error hints**
 *
 * In the resolver you also can define custom loading and error hints with the properties `requestLoadingHint`
 * and `requestErrorHint`.
 *
 * ```ts
 * @Injectable()
 * export class YourFormOptionsResolver implements QdFormOptionsResolver {
 *   requestLoadingHint = { i18n: 'i18n.custom.options.loading' };
 *   requestErrorHint = { i18n: 'i18n.custom.options.error' };
 *
 *   // ...
 *
 *   resolve(value: string): Observable<QdFormInput[]> {
 *     // ...
 *   }
 * }
 * ```
 * You also can update the error hint directly in the resolve method to display a more specific error
 * message when an error occurs.
 *
 * ```ts
 * @Injectable()
 * export class YourFormOptionsResolver implements QdFormOptionsResolver {
 *   // ...
 *
 *   constructor(
 *     @Optional() @Inject(BACKEND_ERROR_CODES) private readonly backendErrorCodes
 *   ) {
 *     this.backendErrorCodes = this.backendErrorCodes || {};
 *   }
 *
 *   // ...
 *
 *   resolve(value: string): Observable<QdFormInput[]> {
 *     return this.httpClient
 *       .get(yourBackendUrl)
 *       .pipe(
 *         catchError((error: HttpErrorResponse) => {
 *           if (error.error?.errorCode && error.error.errorCode in this.backendErrorCodes)
 *             this.requestErrorHint = { i18n: 'ERROR.' + error.error.errorCode };
 *           return throwError(() => error);
 *         })
 *       );
 *   }
 * }
 * ```
 */
export declare class QdInputComponent implements OnInit, OnChanges, OnDestroy, ControlValueAccessor, QdFocusable {
    private readonly actionEmitterService;
    private readonly resolverRegistry;
    private readonly controlContainer;
    private readonly eventBrokerService;
    /**
     * The form control name can be assigned here if you want to use Reactive Forms.
     */
    formControlName: string;
    /**
     * The current form item value, if you are working with Model Binding.
     *
     * @example
     * <qd-input [(value)]="value" [config]="config"></qd-input>
     */
    value: any;
    /**
     * The configuration for this form item
     *
     * @example
     * {
     *   label: { i18n: 'label' },
     *   placeholder: { i18n: 'placeholder' },
     *   hint: { i18n: 'hint' }
     * };
     */
    config: QdFormInputConfiguration;
    /**
     * Set component to "error" externally. No reactive forms required. Used for components within the Quadrel UI framework. This is done by a CSS class.
     *
     * @default false
     */
    isError: boolean;
    /**
     * A static test ID for integration tests can be set. <br />
     * The value for the HTML attribute [data-test-id].
     */
    testId: string;
    /**
     * Emits event when the value has changed.
     * Optionally emits the current input value, including unit (if configured).
     */
    readonly valueChange: EventEmitter<QdInputValue | QdInputValueWithUnit>;
    /**
     * Emits event when the value has changed. Note: Emits on keyup (no longer on click, as before)!
     * Optionally emits the current input value, including unit (if configured).
     */
    readonly enterClick: EventEmitter<QdInputValue | QdInputValueWithUnit>;
    /**
     * Emits event when the input field was lapped on click/tap on the x icon. <br />
     * `QdFormInputConfiguration['clearable']` must be set to true for this.
     */
    readonly clickClear: EventEmitter<any>;
    /**
     * Emits event when the hint is clicked/tapped. `hintAction` must be set to `true` for this.
     */
    readonly clickHint: EventEmitter<any>;
    /**
     * Emits event when the readonly value is clicked/tapped. `clickReadonly ` must be set to `true` for this.
     */
    readonly clickReadonly: EventEmitter<any>;
    /**
     * Emits event when the viewonly value is clicked/tapped. `clickViewonly ` must be set to `true` for this.
     */
    readonly clickViewonly: EventEmitter<any>;
    readonly: boolean;
    readonlyAction: boolean;
    viewonly: boolean;
    viewonlyAction: boolean;
    hintAction: boolean;
    disabled: boolean;
    isInputFocused: boolean;
    areUnitsOpened: boolean;
    get hasError(): boolean;
    get isErrorFromOutside(): boolean;
    inputElement: ElementRef;
    inputType: QdInputType;
    inputMode: QdInputMode;
    placeholder: string;
    label: string;
    hint: string;
    clearable: boolean;
    hasAutofocus: boolean;
    hasOptions: boolean;
    _value: QdInputValueWithUnit;
    control: AbstractControl | QdFormControl<any>;
    private _optionsResolver;
    private _subs;
    private _onChange;
    private _onTouch;
    get hasOnlyUnitsError(): boolean;
    get hasUnits(): boolean;
    get numberOfCharacters(): number;
    get hasMaxLength(): boolean;
    get maxLength(): number;
    get valueAsList(): string[];
    constructor(actionEmitterService: QdFormsActionEmitterService, resolverRegistry: QdFormOptionsResolverRegistry, controlContainer: ControlContainer, eventBrokerService: QdEventBrokerService);
    ngOnInit(): void;
    ngOnChanges(changes: SimpleChanges): void;
    ngOnDestroy(): void;
    registerOnChange(fn: (_: any) => void): void;
    registerOnTouched(fn: any): void;
    writeValue(value: QdInputValueWithUnit | QdInputValue): void;
    setDisabledState(disabled: boolean): void;
    handleInput(event: any): void;
    handleOptionSelected(option: QdFormInputOption): void;
    handleUnitChange(unit: any): void;
    handleInputFocus(): void;
    handleInputBlur(): void;
    handleUnitsOpened(): void;
    handleUnitsClosed(): void;
    clearInput(): void;
    focus(): void;
    emitEnterClick(): void;
    private updateConfig;
    private initializeOptionsResolver;
    private emitValue;
    private initOpModeSubscription;
    private normalizeInitialControlValueIfNeeded;
    static ɵfac: i0.ɵɵFactoryDeclaration<QdInputComponent, [null, null, { optional: true; host: true; skipSelf: true; }, { optional: true; }]>;
    static ɵcmp: i0.ɵɵComponentDeclaration<QdInputComponent, "qd-input", never, { "formControlName": { "alias": "formControlName"; "required": false; }; "value": { "alias": "value"; "required": false; }; "config": { "alias": "config"; "required": false; }; "isError": { "alias": "isError"; "required": false; }; "testId": { "alias": "data-test-id"; "required": false; }; }, { "valueChange": "valueChange"; "enterClick": "enterClick"; "clickClear": "clickClear"; "clickHint": "clickHint"; "clickReadonly": "clickReadonly"; "clickViewonly": "clickViewonly"; }, never, ["[qdIconButton]"], false, never>;
}
//# sourceMappingURL=input.component.d.ts.map