primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
386 lines (382 loc) • 16 kB
TypeScript
import { InputMaskPassThrough, Caret } from 'primeng/types/inputmask';
export * from 'primeng/types/inputmask';
import * as _angular_core from '@angular/core';
import { Provider, TemplateRef, ElementRef } from '@angular/core';
import { BaseComponent } from 'primeng/basecomponent';
import { BaseInput } from 'primeng/baseinput';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { Nullable } from 'primeng/ts-helpers';
import { CSSProperties } from 'primeng/types/shared';
import { BaseStyle } from 'primeng/base';
import * as i2 from 'primeng/api';
/**
*
* InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.
*
* [Live Demo](https://www.primeng.org/inputmask/)
*
* @module inputmaskstyle
*
*/
declare enum InputMaskClasses {
/**
* Class name of the root element
*/
root = "p-inputmask",
/**
* Class name of the clear icon element
*/
clearIcon = "p-inputmask-clear-icon"
}
declare class InputMaskStyle extends BaseStyle {
name: string;
style: string;
classes: {
root: ({ instance }: {
instance: any;
}) => (string | {
'p-variant-filled': boolean;
})[];
clearIcon: string;
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputMaskStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<InputMaskStyle>;
}
interface InputMaskStyle extends BaseStyle {
}
/**
* InputMask directive is applied directly to input elements to enable masked input.
* @group Components
*/
declare class InputMaskDirective extends BaseComponent<InputMaskPassThrough> {
$pcInputMaskDirective: InputMaskDirective | undefined;
_componentStyle: InputMaskStyle;
/**
* Used to pass attributes to DOM elements inside the InputMask directive.
* @defaultValue undefined
* @group Props
*/
pInputMaskPT: _angular_core.InputSignal<any>;
/**
* Indicates whether the component should be rendered without styles.
* @defaultValue undefined
* @group Props
*/
pInputMaskUnstyled: _angular_core.InputSignal<boolean | undefined>;
/**
* Mask pattern.
* @group Props
*/
pInputMask: _angular_core.InputSignal<string | undefined>;
/**
* Placeholder character in mask, default is underscore.
* @group Props
*/
slotChar: _angular_core.InputSignal<string>;
/**
* Clears the incomplete value on blur.
* @group Props
*/
autoClear: _angular_core.InputSignalWithTransform<boolean, boolean>;
/**
* Regex pattern for alpha characters.
* @group Props
*/
characterPattern: _angular_core.InputSignal<string>;
/**
* When present, it specifies that whether to clean buffer value from model.
* @group Props
*/
keepBuffer: _angular_core.InputSignalWithTransform<boolean, boolean>;
/**
* When enabled, deleting a character does not shift the following characters across literal
* separators (e.g. the "." in 99.99.9999), keeping each mask section independent.
* @group Props
*/
keepCharPositions: _angular_core.InputSignalWithTransform<boolean, boolean>;
/**
* Callback to invoke when the mask is completed.
* @group Emits
*/
onCompleteEvent: _angular_core.OutputEmitterRef<void>;
/**
* Callback to invoke when value changes, emits unmasked value.
* @group Emits
*/
onUnmaskedChange: _angular_core.OutputEmitterRef<string>;
defs: Nullable<{
[key: string]: string;
}>;
tests: (RegExp | null)[];
partialPosition: Nullable<number>;
firstNonMaskPos: Nullable<number>;
lastRequiredNonMaskPos: Nullable<number>;
len: Nullable<number>;
oldVal: Nullable<string>;
buffer: string[];
defaultBuffer: Nullable<string>;
focusText: Nullable<string>;
caretTimeoutId: ReturnType<typeof setTimeout> | undefined;
androidChrome: boolean;
focused: Nullable<boolean>;
private _inputElement;
private _listeners;
private isInputVisible;
private get inputElement();
constructor();
onAfterViewInit(): void;
onDestroy(): void;
initMask(): void;
onInputFocus(event: Event): void;
onInputBlur(e: Event): void;
onInputKeydown(e: KeyboardEvent): void;
onKeyPress(e: KeyboardEvent): void;
onInputChange(event: Event): void;
onPaste(event: Event): void;
caret(first?: number, last?: number): Caret | undefined;
isCompleted(): boolean;
getPlaceholder(i: number): string;
seekNext(pos: number): number;
seekPrev(pos: number): number;
shiftL(begin: number, end: number): void;
crossesLiteralBoundary(i: number, j: number): boolean;
shiftR(pos: number): void;
handleAndroidInput(e: Event): void;
handleInputChange(event: Event): void;
clearBuffer(start: number, end: number): void;
writeBuffer(): void;
/**
* Dispatches an input event on the host element.
* This is needed to notify parent components of value changes
* since programmatic value changes don't trigger native input events.
*/
dispatchInputEvent(): void;
checkVal(allow?: boolean): number;
getUnmaskedValue(): string;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputMaskDirective, never>;
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<InputMaskDirective, "[pInputMask]", never, { "pInputMaskPT": { "alias": "pInputMaskPT"; "required": false; "isSignal": true; }; "pInputMaskUnstyled": { "alias": "pInputMaskUnstyled"; "required": false; "isSignal": true; }; "pInputMask": { "alias": "pInputMask"; "required": false; "isSignal": true; }; "slotChar": { "alias": "slotChar"; "required": false; "isSignal": true; }; "autoClear": { "alias": "autoClear"; "required": false; "isSignal": true; }; "characterPattern": { "alias": "characterPattern"; "required": false; "isSignal": true; }; "keepBuffer": { "alias": "keepBuffer"; "required": false; "isSignal": true; }; "keepCharPositions": { "alias": "keepCharPositions"; "required": false; "isSignal": true; }; }, { "onCompleteEvent": "onComplete"; "onUnmaskedChange": "onUnmaskedChange"; }, never, never, true, never>;
}
declare const INPUTMASK_VALUE_ACCESSOR: Provider;
/**
* InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.
* @group Components
*/
declare class InputMask extends BaseInput<InputMaskPassThrough> {
componentName: string;
_componentStyle: InputMaskStyle;
$pcInputMask: InputMask | undefined;
bindDirectiveInstance: Bind;
onAfterViewChecked(): void;
ptmParams: _angular_core.Signal<{
context: {
filled: boolean;
};
}>;
requiredAttr: _angular_core.Signal<"" | undefined>;
readonlyAttr: _angular_core.Signal<"" | undefined>;
disabledAttr: _angular_core.Signal<"" | undefined>;
showClearIcon: _angular_core.Signal<boolean>;
/**
* HTML5 input type.
* @group Props
*/
type: _angular_core.InputSignal<string>;
/**
* Placeholder character in mask, default is underscore.
* @group Props
*/
slotChar: _angular_core.InputSignal<string>;
/**
* Clears the incomplete value on blur.
* @group Props
*/
autoClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* When enabled, a clear icon is displayed to clear the value.
* @group Props
*/
showClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Inline style of the input field.
* @group Props
*/
style: _angular_core.InputSignal<CSSProperties>;
/**
* Identifier of the focus input to match a label defined for the component.
* @group Props
*/
inputId: _angular_core.InputSignal<string | undefined>;
/**
* Style class of the input field.
* @group Props
*/
styleClass: _angular_core.InputSignal<string | undefined>;
/**
* Advisory information to display on input.
* @group Props
*/
placeholder: _angular_core.InputSignal<string | undefined>;
/**
* Specifies tab order of the element.
* @group Props
*/
tabindex: _angular_core.InputSignal<string | undefined>;
/**
* Title text of the input text.
* @group Props
*/
title: _angular_core.InputSignal<string | undefined>;
/**
* Used to define a string that labels the input element.
* @group Props
*/
ariaLabel: _angular_core.InputSignal<string | undefined>;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
* @group Props
*/
ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
/**
* Used to indicate that user input is required on an element before a form can be submitted.
* @group Props
*/
ariaRequired: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* When present, it specifies that an input field is read-only.
* @group Props
*/
readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Defines if ngModel sets the raw unmasked value to bound value or the formatted mask value.
* @group Props
*/
unmask: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Regex pattern for alpha characters
* @group Props
*/
characterPattern: _angular_core.InputSignal<string>;
/**
* When present, the input gets a focus automatically on load.
* @group Props
*/
autofocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Used to define a string that autocomplete attribute the current element.
* @group Props
*/
autocomplete: _angular_core.InputSignal<string | undefined>;
/**
* When present, it specifies that whether to clean buffer value from model.
* @group Props
*/
keepBuffer: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* When enabled, deleting a character does not shift the following characters across literal
* separators (e.g. the "." in 99.99.9999), keeping each mask section independent.
* @group Props
*/
keepCharPositions: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Mask pattern.
* @group Props
*/
mask: _angular_core.InputSignal<string | null | undefined>;
/**
* Callback to invoke when the mask is completed.
* @group Emits
*/
onComplete: _angular_core.OutputEmitterRef<void>;
/**
* Callback to invoke when the component receives focus.
* @param {Event} event - Browser event.
* @group Emits
*/
onFocus: _angular_core.OutputEmitterRef<Event>;
/**
* Callback to invoke when the component loses focus.
* @param {Event} event - Browser event.
* @group Emits
*/
onBlur: _angular_core.OutputEmitterRef<Event>;
/**
* Callback to invoke on input.
* @param {Event} event - Browser event.
* @group Emits
*/
onInput: _angular_core.OutputEmitterRef<Event>;
/**
* Callback to invoke on input key press.
* @param {Event} event - Browser event.
* @group Emits
*/
onKeydown: _angular_core.OutputEmitterRef<Event>;
/**
* Callback to invoke when input field is cleared.
* @group Emits
*/
onClear: _angular_core.OutputEmitterRef<void>;
/**
* Custom clear icon template.
* @group Templates
*/
clearIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
inputViewChild: _angular_core.Signal<ElementRef<any>>;
value: _angular_core.WritableSignal<Nullable<string>>;
defs: Nullable<{
[key: string]: string;
}>;
tests: (RegExp | null)[];
partialPosition: Nullable<number>;
firstNonMaskPos: Nullable<number>;
lastRequiredNonMaskPos: Nullable<number>;
len: Nullable<number>;
oldVal: Nullable<string>;
buffer: string[];
defaultBuffer: Nullable<string>;
focusText: Nullable<string>;
caretTimeoutId: ReturnType<typeof setTimeout> | undefined;
androidChrome: boolean;
focused: Nullable<boolean>;
constructor();
onInit(): void;
initMask(): void;
caret(first?: number, last?: number): Caret | undefined;
isCompleted(): boolean;
getPlaceholder(i: number): string;
seekNext(pos: number): number;
seekPrev(pos: number): number;
shiftL(begin: number, end: number): void;
crossesLiteralBoundary(i: number, j: number): boolean;
shiftR(pos: number): void;
handleAndroidInput(e: Event): void;
onInputBlur(e: Event): void;
onInputKeydown(e: KeyboardEvent): void;
onKeyPress(e: KeyboardEvent): void;
clearBuffer(start: number, end: number): void;
writeBuffer(): void;
checkVal(allow?: boolean): number;
onInputFocus(event: Event): void;
onInputChange(event: Event): void;
handleInputChange(event: Event): void;
getUnmaskedValue(): string;
updateModel(e: Event): void;
focus(): void;
clear(): void;
/**
* @override
*
* @see {@link BaseEditableHolder.writeControlValue}
* Writes the value to the control.
*/
writeControlValue(val: any, setModelValue: (value: any) => void): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputMask, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputMask, "p-inputmask, p-input-mask", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "slotChar": { "alias": "slotChar"; "required": false; "isSignal": true; }; "autoClear": { "alias": "autoClear"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "unmask": { "alias": "unmask"; "required": false; "isSignal": true; }; "characterPattern": { "alias": "characterPattern"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "keepBuffer": { "alias": "keepBuffer"; "required": false; "isSignal": true; }; "keepCharPositions": { "alias": "keepCharPositions"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; }, { "onComplete": "onComplete"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onInput": "onInput"; "onKeydown": "onKeydown"; "onClear": "onClear"; }, ["clearIconTemplate"], never, true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare class InputMaskModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputMaskModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<InputMaskModule, never, [typeof InputMask, typeof InputMaskDirective, typeof i2.SharedModule], [typeof InputMask, typeof InputMaskDirective, typeof i2.SharedModule]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<InputMaskModule>;
}
export { INPUTMASK_VALUE_ACCESSOR, InputMask, InputMaskClasses, InputMaskDirective, InputMaskModule, InputMaskStyle };