ngx-i18n-input
Version:
Angular library for internationalized input fields
119 lines (118 loc) • 5.53 kB
TypeScript
import { EventEmitter, OnChanges, OnInit, QueryList, SimpleChanges, TemplateRef, Type } from '@angular/core';
import { AbstractControl, ControlValueAccessor, FormGroup, ValidatorFn } from '@angular/forms';
import { Lang, NgxI18nInputConfig, NgxI18nInputLayout } from './types';
import { BehaviorSubject, Observable } from 'rxjs';
import { NgxI18nInputSingleLangInputComponent } from './ngx-i18n-input-single-lang-input/ngx-i18n-input-single-lang-input.component';
import * as i0 from "@angular/core";
export declare class NgxI18nInputComponent<T> implements OnInit, OnChanges, ControlValueAccessor {
/*************************************** Dependencies ***************************************/
private readonly cd;
/*************************************** Instance variables ***************************************/
activeLang: Lang | null;
inputs?: QueryList<NgxI18nInputSingleLangInputComponent<T>>;
readonly forms: FormGroup;
/*************************************** Inputs and Configs ***************************************/
uid: string;
readonly configs: NgxI18nInputConfig;
/**
* Customize input template. Suggested but not required.
* Usage:
* ```html
* <ng-template #titleTemplate let-all>
* <input [formControl]="all.control">
* </ng-template>
*
* <ngx-i18n-input [inputTemplate]="titleTemplate" formControlName="title">
* ```
*/
set inputTemplate(template: TemplateRef<unknown> | null | undefined);
get inputTemplate(): TemplateRef<unknown> | null | undefined;
/**
* Customize language name template.
* Usage:
* ```html
* <ng-template #labelTemplate let-context>
* <span>{{ context.configs.formatLabel(context.lang, context.configs.label) }}</span>
* </ng-template>
*
* <ngx-i18n-input [labelTemplate]="labelTemplate"></ngx-i18n-input>
* ```
*/
set labelTemplate(template: TemplateRef<unknown> | null | undefined);
get labelTemplate(): TemplateRef<unknown> | null | undefined;
/**
* Customize label of the component.
* When provided, will be used as string inside the template.
*/
set label(label: string | Record<Lang, string> | null | undefined);
get label(): string | Record<Lang, string> | null | undefined;
/**
* Customize layout of the component.
* Available layouts:
* - tabs
* - vertical
* Default: vertical
*/
set layout(layout: NgxI18nInputLayout | null | undefined);
get layout(): NgxI18nInputLayout | null | undefined;
/**
* Autofocus input.
* When boolean, will autofocus the first input.
* When string, will autofocus the input with the given lang.
*/
set autofocus(autofocus: boolean | string | null | undefined);
get autofocus(): boolean | string | null | undefined;
/**
* When true, labels won't be displayed.
*/
set hideLabels(hideLabels: boolean | null | undefined);
get hideLabels(): boolean;
get availableLangs(): Lang[];
set languages(langs: Lang[] | null | undefined);
get languages(): Lang[];
/**
* When true, all inputs will be required.
*/
set required(required: boolean | null | undefined);
get required(): boolean;
/**
* Adding validators to the input.
*/
set validators(validators: ValidatorFn[] | null | undefined);
get validators(): ValidatorFn[];
set defaultInputComponent(v: Type<any> | null | undefined);
get defaultInputComponent(): Type<any> | null | undefined;
/*************************************** Outputs ***************************************/
readonly valueChanges: Observable<Record<Lang, T | null>>;
readonly activeLangChange: BehaviorSubject<Lang | null>;
readonly onCustomEvent: EventEmitter<{
lang: Lang;
name: string;
value: any;
}>;
/*************************************** ANGULAR LIFECYCLE HOOKS ***************************************/
ngOnInit(): void;
ngOnChanges(changes: SimpleChanges): void;
writeValue(value: unknown): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
setDisabledState(isDisabled: boolean): void;
/*************************************** PUBLIC METHODS ***************************************/
validateFn(control: AbstractControl): {
[key: string]: any;
} | null;
getStrLabelFor(lang: Lang): string;
getId(lang: Lang): string;
inputId(lang: Lang): string;
containerId(lang: Lang): string;
isActiveLang(lang: Lang): boolean;
focusInput(lang: string): void;
detectChanges(): void;
/*************************************** PRIVATE METHODS ***************************************/
/**
* This method will try to locate the input with the given lang and focus it.
*/
private tryLocateAndFocusInput;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxI18nInputComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgxI18nInputComponent<any>, "ngx-i18n-input", never, { "uid": "uid"; "inputTemplate": "inputTemplate"; "labelTemplate": "labelTemplate"; "label": "label"; "layout": "layout"; "autofocus": "autofocus"; "hideLabels": "hideLabels"; "languages": "languages"; "required": "required"; "validators": "validators"; "defaultInputComponent": "defaultInputComponent"; }, { "valueChanges": "valueChanges"; "activeLangChange": "activeLangChange"; "onCustomEvent": "onCustomEvent"; }, never, never, false, never>;
}