UNPKG

@gerandon/ngx-widgets

Version:

Angular widget (components) collection using CVA (ControlValueAccessor)

225 lines (214 loc) 15 kB
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 };