@gerandon/ngx-widgets
Version:
Angular widget (components) collection using CVA (ControlValueAccessor)
225 lines (214 loc) • 15 kB
TypeScript
import * as _angular_core from '@angular/core';
import { AfterViewInit, OnDestroy, ElementRef, ChangeDetectorRef, InjectionToken, OnInit, OnChanges, WritableSignal, SimpleChanges, QueryList } from '@angular/core';
import { ControlValueAccessor, Validator, ValidationErrors, NgControl, FormControl, ValidatorFn, AbstractControl } from '@angular/forms';
import { Observable, Subject } from 'rxjs';
import { MatFormFieldAppearance, FloatLabelType, SubscriptSizing } from '@angular/material/form-field';
import { ThemePalette } from '@angular/material/core';
import { MatInput } from '@angular/material/input';
import { NgxMaskDirective } from 'ngx-mask';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { MatChipInputEvent } from '@angular/material/chips';
declare class BaseValueAccessor<T> implements ControlValueAccessor, AfterViewInit, Validator, OnDestroy {
readonly validator: _angular_core.InputSignal<Observable<ValidationErrors>>;
inputElement: ElementRef;
input: NgControl;
control: FormControl;
private onChange;
private onTouched;
private readonly injector;
protected controlDir: NgControl;
protected readonly cdr: ChangeDetectorRef;
protected _validate: ValidatorFn;
protected readonly _defaultValidate: ValidatorFn;
protected readonly destroy$: Subject<void>;
constructor();
validate(control: AbstractControl): Observable<ValidationErrors>;
ngAfterViewInit(): void;
writeValue(obj: T): void;
registerOnChange(fn: (value: T) => unknown): void;
registerOnTouched(fn: () => unknown): void;
protected get valueAccessor(): ControlValueAccessor | null;
ngOnDestroy(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseValueAccessor<any>, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseValueAccessor<any>, never, never, { "validator": { "alias": "validator"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}
interface NgxWidgetsValidationErrorTypes {
required?: string;
selectGlobalPlaceholder?: string;
}
declare const NGX_WIDGETS_VALIDATION_TRANSLATIONS: InjectionToken<NgxWidgetsValidationErrorTypes>;
/**
* @deprecated
* This token is deprecated and will be removed in Angular v21. Use MAT_FORM_FIELD_DEFAULT_OPTIONS instead.
*/
declare const NGX_WIDGETS_FORM_FIELD_APPEARANCE: InjectionToken<MatFormFieldAppearance>;
declare class BaseInput<T, ANNOUNCER_TYPE = object> extends BaseValueAccessor<T> implements OnInit, AfterViewInit, OnChanges {
protected readonly validationTranslations: NgxWidgetsValidationErrorTypes | any;
readonly appearance: _angular_core.InputSignal<MatFormFieldAppearance | undefined>;
protected readonly _appearance: WritableSignal<MatFormFieldAppearance>;
readonly color: _angular_core.InputSignal<ThemePalette>;
protected readonly _color: WritableSignal<ThemePalette>;
id: string;
name: string;
label: string;
readonly translateParams: _angular_core.InputSignal<unknown>;
placeholder: string;
readonly isDisabled: _angular_core.InputSignal<boolean | undefined>;
readonly floatLabel: _angular_core.InputSignal<FloatLabelType>;
prefixIcon?: string;
suffixIcon?: string;
suffix?: string;
readonly formControlName: _angular_core.InputSignal<string | undefined>;
readonly validatorMessages: _angular_core.InputSignal<{
[key: string]: string;
} | undefined>;
readonly subscriptSizing: _angular_core.InputSignal<SubscriptSizing>;
readonly hintLabel: _angular_core.InputSignal<string>;
readonly ariaLabel: _angular_core.InputSignal<string>;
readonly ariaPlaceholder: _angular_core.InputSignal<string>;
readonly ariaDescribedBy: _angular_core.InputSignal<string>;
readonly ariaDescription: _angular_core.InputSignal<string>;
readonly focusOnInit: _angular_core.InputSignal<boolean>;
protected readonly matInput: _angular_core.Signal<MatInput | undefined>;
protected controlErrorKeys: string[];
private readonly liveAnnouncer;
private readonly matFormFieldConfig;
readonly announcerTranslations: _angular_core.InputSignal<ANNOUNCER_TYPE | undefined>;
validatorMessagesArray: {
key: string;
value: unknown;
}[];
protected _defaultAnnouncerTranslations?: {
[P in keyof ANNOUNCER_TYPE]-?: ANNOUNCER_TYPE[P];
};
constructor(validationTranslations?: NgxWidgetsValidationErrorTypes | any);
ngOnInit(): void;
ngOnChanges(changes: SimpleChanges): void;
ngAfterViewInit(): void;
protected announce(key: keyof ANNOUNCER_TYPE | string): Promise<void>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseInput<any, any>, [{ optional: true; }]>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseInput<any, any>, never, never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "translateParams": { "alias": "translateParams"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; }; "suffix": { "alias": "suffix"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; "isSignal": true; }; "validatorMessages": { "alias": "validatorMessages"; "required": false; "isSignal": true; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; "isSignal": true; }; "hintLabel": { "alias": "hintLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaPlaceholder": { "alias": "aria-placeholder"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaDescription": { "alias": "aria-description"; "required": false; "isSignal": true; }; "focusOnInit": { "alias": "focusOnInit"; "required": false; "isSignal": true; }; "announcerTranslations": { "alias": "announcerTranslations"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}
declare class BaseTextInput<T, ANNOUNCER_TYPE = object> extends BaseInput<T, ANNOUNCER_TYPE> {
readonly type: _angular_core.InputSignal<"number" | "text" | "password" | "email" | "tel">;
readonly maxLength: _angular_core.InputSignal<number | undefined>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseTextInput<any, any>, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseTextInput<any, any>, never, never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}
declare class BaseMaskInput extends BaseTextInput<string> implements AfterViewInit {
readonly mask: _angular_core.InputSignal<string | undefined>;
readonly showMaskTyped: _angular_core.InputSignal<boolean>;
readonly dropSpecialCharacters: _angular_core.InputSignal<boolean | string[] | readonly string[] | null | undefined>;
readonly specialCharacters: _angular_core.InputSignal<string[] | undefined>;
readonly placeHolderCharacter: _angular_core.InputSignal<string>;
readonly maskPrefix: _angular_core.InputSignal<string>;
readonly maskSuffix: _angular_core.InputSignal<string>;
maskInput: NgxMaskDirective;
ngAfterViewInit(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseMaskInput, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseMaskInput, never, never, { "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "showMaskTyped": { "alias": "showMaskTyped"; "required": false; "isSignal": true; }; "dropSpecialCharacters": { "alias": "dropSpecialCharacters"; "required": false; "isSignal": true; }; "specialCharacters": { "alias": "specialCharacters"; "required": false; "isSignal": true; }; "placeHolderCharacter": { "alias": "placeHolderCharacter"; "required": false; "isSignal": true; }; "maskPrefix": { "alias": "maskPrefix"; "required": false; "isSignal": true; }; "maskSuffix": { "alias": "maskSuffix"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}
/**
* Automatically unsubscribe from an Observable when the view is destroyed
* Tested with checking the "complete" event of a subscribe method
* @description
* An Annotation that should be used with an Observable typed variable to handle its subscriptions
* @author gergo.asztalos
*/
declare function UnsubscribeOnDestroy<ObservableType>(): PropertyDecorator;
declare class BasicInputComponent extends BaseMaskInput implements OnInit {
readonly iconClick: _angular_core.OutputEmitterRef<void>;
ngOnInit(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BasicInputComponent, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BasicInputComponent, "gerandon-basic-input", never, {}, { "iconClick": "iconClick"; }, never, never, true, never>;
}
interface SelectOptionType {
label: string;
value: string | number | null | unknown;
}
interface SelectAnnouncerTranslations {
inputReset?: string;
asyncLoading?: string;
}
declare class SelectComponent extends BaseInput<unknown, SelectAnnouncerTranslations> implements OnInit {
/**
* In this case, an empty option appears that resets the control, to an empty value state
*/
emptyOptionLabel?: string;
emptyOptionAriaLabel?: string;
readonly multiple: _angular_core.InputSignal<boolean | undefined>;
readonly options: _angular_core.InputSignal<SelectOptionType[]>;
readonly initialOptionGetFn: _angular_core.InputSignal<((controlValue: any) => Observable<SelectOptionType>) | undefined>;
readonly asyncOptions: _angular_core.InputSignal<Observable<SelectOptionType[]> | undefined>;
readonly lazy: _angular_core.InputSignal<boolean>;
readonly optionsLoading: _angular_core.WritableSignal<boolean>;
optionElements: QueryList<ElementRef>;
protected _defaultAnnouncerTranslations: {
[P in keyof SelectAnnouncerTranslations]-?: SelectAnnouncerTranslations[P];
};
private lastOptions;
private __options;
get _options(): SelectOptionType[];
set _options(value: SelectOptionType[]);
/**
* Angular Material - Select component comparsion is only '===', does not work with Array values
* https://github.com/angular/components/blob/a07c0758a5ec2eb4de1bb822354be08178c66aa4/src/lib/select/select.ts#L242C48-L242C58
*/
readonly _isEqual: (value: any, other: any) => boolean;
private optionSubscription?;
ngOnInit(): void;
ngAfterViewInit(): void;
opened(opened: boolean): void;
reset(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent, "gerandon-select", never, { "emptyOptionLabel": { "alias": "emptyOptionLabel"; "required": false; }; "emptyOptionAriaLabel": { "alias": "emptyOptionAriaLabel"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "initialOptionGetFn": { "alias": "initialOptionGetFn"; "required": false; "isSignal": true; }; "asyncOptions": { "alias": "asyncOptions"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}
interface TextareaAnnouncerTranslations {
maxLengthReached?: string;
}
declare class TextareaInputComponent extends BaseTextInput<string> implements AfterViewInit {
readonly rows: _angular_core.InputSignal<number>;
protected _defaultAnnouncerTranslations: {
[P in keyof TextareaAnnouncerTranslations]-?: TextareaAnnouncerTranslations[P];
};
ngAfterViewInit(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextareaInputComponent, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextareaInputComponent, "gerandon-textarea-input", never, { "rows": { "alias": "rows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}
interface ChipsAnnouncerTranslations {
asyncFilterStart?: string;
asyncFilterEnd?: string;
itemRemoved?: string;
itemAdded?: string;
selectableItems?: string;
}
declare class BasicChipsComponent<T> extends BaseInput<T[], ChipsAnnouncerTranslations> implements OnInit {
readonly tsFilterInput: _angular_core.Signal<ElementRef<any> | undefined>;
readonly asyncFilterFn: _angular_core.InputSignal<((value: string) => Observable<T[]>) | undefined>;
readonly asyncOptions: _angular_core.InputSignal<Observable<T[]> | undefined>;
readonly startTypingLabel: _angular_core.InputSignal<string>;
readonly emptyListLabel: _angular_core.InputSignal<string>;
/**
* How much character you need to type before triggering search
*/
readonly startAsyncFnAt: _angular_core.InputSignal<number>;
labelProperty?: keyof T;
readonly separatorKeysCodes: readonly [13, 188];
filterOptions$?: Observable<T[]>;
protected _hintLabel: string;
private readonly inputChange;
protected _defaultAnnouncerTranslations: {
[P in keyof ChipsAnnouncerTranslations]-?: ChipsAnnouncerTranslations[P];
};
ngOnInit(): void;
filter(): void;
remove(item: T): void;
add(event: MatChipInputEvent): void;
selected(event: MatAutocompleteSelectedEvent): void;
private updateValue;
private mark;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BasicChipsComponent<any>, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BasicChipsComponent<any>, "gerandon-basic-chips", never, { "asyncFilterFn": { "alias": "asyncFilterFn"; "required": false; "isSignal": true; }; "asyncOptions": { "alias": "asyncOptions"; "required": false; "isSignal": true; }; "startTypingLabel": { "alias": "startTypingLabel"; "required": false; "isSignal": true; }; "emptyListLabel": { "alias": "emptyListLabel"; "required": false; "isSignal": true; }; "startAsyncFnAt": { "alias": "startAsyncFnAt"; "required": false; "isSignal": true; }; "labelProperty": { "alias": "labelProperty"; "required": false; }; }, {}, never, never, true, never>;
}
export { BaseInput, BaseMaskInput, BaseTextInput, BaseValueAccessor, BasicChipsComponent, BasicInputComponent, NGX_WIDGETS_FORM_FIELD_APPEARANCE, NGX_WIDGETS_VALIDATION_TRANSLATIONS, SelectComponent, TextareaInputComponent, UnsubscribeOnDestroy };
export type { NgxWidgetsValidationErrorTypes, SelectOptionType };