IMask.js

https://imask.js.org/
Admin
IMask.js is a vanilla JavaScript input mask library that provides flexible and customizable input...
Tokens:86,932
Snippets:505
Trust Score:8.1
Update:4 months ago
Show doc for...
Tokens:
Raw
### Launch Example App

Source: https://imask.js.org/api/modules/angular_imask.html

Optionally, run the example application for angular-imask using the 'example' script.

```bash
npm run example
```

--------------------------------

### Install IMask.js with npm

Source: https://imask.js.org/api/index.html

Install the IMask.js library using npm for use in your project.

```bash
npm install imask
```

--------------------------------

### Mask Composable Example (Vue 3)

Source: https://imask.js.org/api/modules/vue_imask.html

Demonstrates the use of the useIMask composable in Vue 3 for setting up input masking within the setup function. It requires a ref to the input element.

```html
<template>
  <input ref="el">
</template>

<script>
  import { useIMask } from 'vue-imask';

  export default {
    setup (props) {
      const { el, masked } = useIMask({
        mask: Number,
        radix: '.',
      }, /* optional {
        emit,
        onAccept,
        onComplete,
        defaultValue,
        defaultUnmaskedValue,
        defaultTypedValue,
      } */);

      return { el };
    }
  }
</script>
```

--------------------------------

### Launch Development Server

Source: https://imask.js.org/api/modules/angular_imask.html

Start the development server for the angular-imask package using the 'dev' script.

```bash
npm run dev
```

--------------------------------

### Basic Mask Action Example

Source: https://imask.js.org/api/modules/_imask_svelte.html

Demonstrates how to use the `imask` directive in Svelte for input masking. It shows how to set mask options and handle accept/complete events.

```svelte
<input  
  {value}  
  use:imask={options}  
  on:accept={accept}  
  on:complete={complete}
>
  
<script>  
  import { imask } from '@imask/svelte';  
  
  const options = {  
    mask: '{8}000000',  
    lazy: false  
  };
  
  let value = '';  
  
  function accept({ detail: maskRef }) {  
    console.log('accept', maskRef.value);  
    value = maskRef.value;  
  }
  
  function complete({ detail: maskRef }) {  
    console.log('complete', maskRef.unmaskedValue);  
  }
</script>
```

--------------------------------

### Import IMask.js in JavaScript

Source: https://imask.js.org/api/index.html

Import the IMask library into your JavaScript project after installation.

```javascript
import IMask from 'imask';
```

--------------------------------

### Masked TextInput Example

Source: https://imask.js.org/api/modules/react_native_imask.html

Example of using IMaskTextInput for number masks. It demonstrates basic configuration like mask type, radix, initial value, unmasking behavior, and event handling. Ensure to manage the received value by updating your component's state.

```javascript
import {IMaskTextInput} from 'react-native-imask';  
  
<IMaskTextInput  
  mask={Number}  
  radix="."  
  value="123"  
  unmask={true} // true|false|'typed'  
  onAccept={  
    // depending on prop above first argument is  
    // `value` if `unmask=false`,  
    // `unmaskedValue` if `unmask=true`,  
    // `typedValue` if `unmask='typed'`  
    (value, mask) => console.log(value)  // probably should update state  
  }  
  // ...and more mask props in a guide  
  
  // other TextInput props  
  editable={true}  
  style={{  
    height: 40,  
    width: '100%',  
    borderColor: 'gray',  
    borderWidth: 1  
  }}  
/>
```

--------------------------------

### Basic RegExp Mask for Validation

Source: https://imask.js.org/guide.html

Illustrates a basic RegExp mask. It's noted that this specific example might not allow intermediate inputs.

```javascript
const masked = IMask.Masked({
  mask: /^123$/
});
```

--------------------------------

### Configure Number Mask

Source: https://imask.js.org/guide.html

Example of configuring a Number mask with various options including scale, separators, radix, min/max values, and autofix.

```javascript
IMask(element, {
  mask: Number,  // enable number mask

  // other options are optional with defaults below
  scale: 2,  // digits after point, 0 for integers
  thousandsSeparator: '',  // any single char
  padFractionalZeros: false,  // if true, then pads zeros at end to the length of scale
  normalizeZeros: true,  // appends or removes zeros at ends
  radix: ',',  // fractional delimiter
  mapToRadix: ['.'],  // symbols to process as radix

  // additional number interval options (e.g.)
  min: -10000,
  max: 10000,
  autofix: true,
})
```

--------------------------------

### Mask Input Example

Source: https://imask.js.org/api/modules/react_imask.html

Demonstrates how to use the IMaskInput component for creating masked input fields. It shows how to configure the mask, handle value changes using onAccept, and access the input element via refs. Note that onChange should not be used for handling changes.

```jsx
import { useRef } from 'react';
import { IMaskInput } from 'react-imask';

// use ref to get access to internal "masked = ref.current.maskRef"
const ref = useRef(null);
const inputRef = useRef(null);
<IMaskInput
  mask={Number}
  radix="."
  value="123"
  unmask={true} // true|false|'typed'
  ref={ref}
  inputRef={inputRef}  // access to nested input
  // DO NOT USE onChange TO HANDLE CHANGES!
  // USE onAccept INSTEAD
  onAccept={
    // depending on prop above first argument is
    // `value` if `unmask=false`,
    // `unmaskedValue` if `unmask=true`,
    // `typedValue` if `unmask='typed'`
    (value, mask) => console.log(value)
  }
  // ...and more mask props in a guide

  // input props also available
  placeholder='Enter number here'
/>
```

--------------------------------

### Angular IMaskModule Setup

Source: https://imask.js.org/api/modules/angular_imask.html

Import IMaskModule into your Angular application's NgModule to enable the IMask directive and pipe.

```typescript
import {
  IMaskModule
} from 'angular-imask';

@NgModule({
  imports: [
    IMaskModule,
    ...
  ],
  ...
}) {...}
```

--------------------------------

### Get and Set Mask Value

Source: https://imask.js.org/guide.html

Demonstrates how to get and set the masked value, as well as retrieve the unmasked or typed value.

```javascript
masked.value = 'hello world!';
console.log(masked.unmaskedValue);
// or typed value if it makes sense
console.log(masked.typedValue);
```

--------------------------------

### Mask Directive Example

Source: https://imask.js.org/api/modules/vue_imask.html

Shows how to use the v-imask directive for input masking, particularly when v-model bindings might not suffice. It demonstrates updating the value via @accept and @complete events.

```html
<template>
  <input
    :value="value"
    v-imask="mask"
    @accept="onAccept"
    @complete="onComplete">
</template>

<script>
  import { IMaskDirective } from 'vue-imask';

  export default {
    data () {
      return {
        value: '',
        mask: {
          mask: '{8}000000',
          lazy: false
        },
      },
    },
    methods: {
      onAccept (e) {
        const maskRef = e.detail;
        this.value = maskRef.value;
        console.log('accept', maskRef.value);
      },
      onComplete (e) {
        const maskRef = e.detail;
        console.log('complete', maskRef.unmaskedValue);
      },
    },
    directives: {
      imask: IMaskDirective
    }
  }
</script>
```

--------------------------------

### Function Mask for Growing Sequence

Source: https://imask.js.org/guide.html

An example of using a Function mask to accept any growing sequence of digits from 0 to 9.

```javascript
IMask(element, {
  mask: value => /^\d*$/.test(value) &&
    value.split('').every((ch, i) => {
      const prevCh = value[i-1];
      return !prevCh || prevCh < ch;
    })
})
```

--------------------------------

### Create and Use a Number Pipe

Source: https://imask.js.org/guide.html

Demonstrates how to create a reusable pipe for number formatting with specific options and how to use it. Also shows the inplace usage of `IMask.pipe`.

```javascript
const numberPipe = IMask.createPipe({
  mask: Number,
  scale: 2,
  thousandsSeparator: ' ',
  normalizeZeros: true,
  padFractionalZeros: true,
});
// `numberPipe` is just a function, call it to format values
numberPipe('1'); // "1,00"

// if `numberPipe` will not be reused, then just use `IMask.pipe` inplace:
IMask.pipe('1', {
  mask: Number,
  scale: 2,
  thousandsSeparator: ' ',
  normalizeZeros: true,
  padFractionalZeros: true,
}); // "1,00"
```

--------------------------------

### doPrepare

Source: https://imask.js.org/api/classes/imask.MaskedFunction.html

Prepares a string before it is processed by the mask.

```APIDOC
## doPrepare

### Description
Prepares a string before it is processed by the mask.

### Method
`doPrepare(str: string, flags?: AppendFlags<MaskedState>): [string, ChangeDetails]`

### Parameters
#### Path Parameters
- **str** (string) - Required - The string to prepare.
- **flags** (AppendFlags<MaskedState>) - Optional - Flags to modify preparation behavior.

### Returns
- **[string, ChangeDetails]**
```

--------------------------------

### Selection Type Alias

Source: https://imask.js.org/api/types/imask.Selection.html

The Selection type alias defines a structure with 'start' and 'end' properties, both of which are numbers. This is typically used to indicate the starting and ending positions of a text selection or cursor within an input field.

```APIDOC
## Type alias Selection

Selection: {
  end: number;
  start: number;
}

Selection range
### Type declaration
  * ##### end: number
  * ##### start: number
```

--------------------------------

### doPrepare

Source: https://imask.js.org/api/classes/imask.Masked.html

Prepares the input string before mask processing.

```APIDOC
## doPrepare

### Description
Prepares the input string before mask processing.

### Method
`doPrepare(str, flags?): [string, ChangeDetails]`

### Parameters
#### Parameters
- **str** (string) - The string to prepare.
- **flags** (AppendFlags<MaskedState>) - Optional flags to modify preparation.

### Returns
[string, ChangeDetails]
```

--------------------------------

### extract

Source: https://imask.js.org/api/classes/imask.MaskedDynamic.html

Extracts a portion of the masked value based on specified start and end positions.

```APIDOC
## extract

### Description
Extracts a portion of the masked value.

### Method
Not applicable (method call)

### Parameters
#### Path Parameters
- **fromPos** (number) - Optional - The starting position for extraction.
- **toPos** (number) - Optional - The ending position for extraction.
- **flags** (ExtractFlags) - Optional - Flags to control extraction behavior.

### Returns
string - The extracted portion of the masked value.
```

--------------------------------

### Build IMask.js

Source: https://imask.js.org/api/index.html

Build the IMask.js library using the provided npm script.

```bash
npm run make
```

--------------------------------

### value

Source: https://imask.js.org/api/classes/imask.Masked.html

Gets or sets the current value of the mask. The setter accepts a string and returns void.

```APIDOC
## value

### Description
Gets or sets the current value of the mask.

### Method
GETTER/SETTER

### Parameters (Setter)
#### Value
- **value** (string) - The new value to set for the mask.

### Returns (Getter)
string - The current value of the mask.

### Returns (Setter)
void
```

--------------------------------

### value

Source: https://imask.js.org/api/classes/imask.MaskedFunction.html

Gets or sets the current value of the masked input. The setter accepts a string and returns void.

```APIDOC
## value

### Description
Gets or sets the current value of the masked input.

### Getter
- **value**(): string
  * Returns the current string value.

### Setter
- **value**(value: string): void
  * Sets the masked input to the provided string value.
  * #### Parameters
    * value: string - The new string value to set.
  * #### Returns void
```

--------------------------------

### ChunksTailDetails Constructor

Source: https://imask.js.org/api/classes/imask.ChunksTailDetails.html

Initializes a new instance of ChunksTailDetails with optional chunks and from position.

```APIDOC
## constructor
  * new ChunksTailDetails(chunks?, from?): ChunksTailDetails
  * #### Parameters
    * chunks: TailDetails[] = []
    * from: number = 0
#### Returns ChunksTailDetails
```

--------------------------------

### IMaskDirective Accessors

Source: https://imask.js.org/api/classes/angular_imask.IMaskDirective.html

Provides accessors for retrieving the input element associated with the directive and for getting and setting the masked value.

```APIDOC
## Accessors
### element
  * get element(): InputMaskElement
  * #### Returns InputMaskElement
### maskValue
  * get maskValue(): V
  * #### Returns V
  * set maskValue(value): void
  * #### Parameters
    * value: V
#### Returns void
```

--------------------------------

### IMaskPipe Constructor

Source: https://imask.js.org/api/classes/angular_imask.IMaskPipe.html

Initializes a new instance of the IMaskPipe class.

```APIDOC
## Constructors

### constructor
  * new IMaskPipe(): IMaskPipe
  * #### Returns IMaskPipe
```

--------------------------------

### IMaskModule Constructor

Source: https://imask.js.org/api/classes/angular_imask.IMaskModule.html

Initializes a new instance of the IMaskModule class. This is the primary way to create an IMaskModule object.

```APIDOC
## new IMaskModule()

### Description
Initializes a new instance of the IMaskModule class.

### Returns
- **IMaskModule** - A new instance of the IMaskModule.
```

--------------------------------

### MaskedRegExp Constructor

Source: https://imask.js.org/api/classes/imask.MaskedRegExp.html

Initializes a new instance of the MaskedRegExp class with optional configuration settings.

```APIDOC
## constructor
  * new MaskedRegExp(opts): MaskedRegExp
  * #### Parameters
    * opts: Partial<Pick<Masked<any>, "eager" | "mask" | "parent" | "prepare" | "prepareChar" | "validate" | "commit" | "format" | "parse" | "overwrite" | "skipInvalid" | "autofix">>
#### Returns MaskedRegExp
```

--------------------------------

### Navigate to angular-imask Directory

Source: https://imask.js.org/api/modules/angular_imask.html

Change directory to the angular-imask package location after building IMask.

```bash
cd packages/angular-imask
```

--------------------------------

### Enable Treeshaking with Specific Module Imports

Source: https://imask.js.org/guide.html

Illustrates how to reduce bundle size by importing only the necessary IMask modules, such as the factory and the number mask, instead of the entire library.

```javascript
// was before
// import IMask from 'imask'; // imports all modules

// enable treeshaking
import IMask from 'imask/holder'; // imports only factory
// add needed features
import 'imask/masked/number';
// now factory can work with number masks, but not any other

// usage is same in both cases
IMask(element, { mask: Number });
```

--------------------------------

### Get and set mask values

Source: https://imask.js.org/guide.html

Access and modify the masked and unmasked values of the input mask. The 'typedValue' property is available for typed masks.

```javascript
mask.value = '+7(999)999-99-99';
console.log(mask.value);  // '+7(999)999-99-99'
console.log(mask.unmaskedValue);  // '79999999999'

mask.unmaskedValue = '70000000000';
console.log(mask.value);  // '+7(000)000-00-00'
console.log(mask.unmaskedValue);  // '70000000000'
```

--------------------------------

### DefaultImaskFactory Constructor

Source: https://imask.js.org/api/classes/angular_imask.DefaultImaskFactory.html

Initializes a new instance of the DefaultImaskFactory class.

```APIDOC
## Constructors

### constructor
  * new DefaultImaskFactory(): DefaultImaskFactory

#### Returns
* DefaultImaskFactory - A new instance of DefaultImaskFactory.
```

--------------------------------

### HTMLMaskElement Accessors

Source: https://imask.js.org/api/classes/imask.HTMLMaskElement.html

Provides accessors for checking the element's active state, retrieving the root element, and safely getting selection boundaries.

```APIDOC
## Accessors

### `isActive`
* **Description**: Checks if the element is currently in focus.
* **Returns**: (boolean) - True if the element is focused, false otherwise.

### `rootElement`
* **Description**: Retrieves the root document element associated with the mask.
* **Returns**: (HTMLDocument) - The root HTML document.

### `selectionEnd`
* **Description**: Safely gets the end position of the current text selection.
* **Returns**: (number) - The selection end index.

### `selectionStart`
* **Description**: Safely gets the start position of the current text selection.
* **Returns**: (number) - The selection start index.
```

--------------------------------

### Create 6-Digit Mask with Skip Invalid Option

Source: https://imask.js.org/guide.html

Shows how to configure a 6-digit mask with the `skipInvalid` option. The example placeholder `<CHECK>` indicates where this option would be set.

```javascript
IMask(
  document.getElementById('skipInvalid-mask'),
  {
    mask: '000000',
    skipInvalid: <CHECK>,
  }
)
```

--------------------------------

### doPrepareChar

Source: https://imask.js.org/api/classes/imask.MaskedFunction.html

Prepares each character of a string before mask processing.

```APIDOC
## doPrepareChar

### Description
Prepares each character of a string before mask processing.

### Method
`doPrepareChar(str: string, flags?: AppendFlags<MaskedState>): [string, ChangeDetails]`

### Parameters
#### Path Parameters
- **str** (string) - Required - The string containing characters to prepare.
- **flags** (AppendFlags<MaskedState>) - Optional - Flags to modify preparation behavior.

### Returns
- **[string, ChangeDetails]**
```

--------------------------------

### Initialize a basic input mask

Source: https://imask.js.org/guide.html

Create a new mask instance for an HTML element with specified options. Ensure the input element has type="text".

```javascript
const element = document.getElementById('selector');
const maskOptions = {
  mask: '+{7}(000)000-00-00'
};
const mask = IMask(element, maskOptions);
```

--------------------------------

### doPrepareChar

Source: https://imask.js.org/api/classes/imask.MaskedDate.html

Prepares each character before mask processing. It takes a string and optional flags, returning the processed string and change details.

```APIDOC
## doPrepareChar

### Description
Prepares each char before mask processing.

### Parameters
* **str** (string) - The string to prepare.
* **flags** (AppendFlags<MaskedState>) - Optional flags for appending.

### Returns
[string, ChangeDetails] - The processed string and change details.
```

--------------------------------

### splice

Source: https://imask.js.org/api/classes/imask.RepeatBlock.html

Modifies the masked input by removing a specified number of characters starting from a position and inserting a new string. It can also consider removal direction and apply flags. Returns change details.

```APIDOC
## splice

### Description
Modifies the masked input by removing and inserting characters.

### Method Signature
`splice(start: number, deleteCount: number, inserted?: string, removeDirection?: Direction, flags?: AppendFlags<MaskedState>): ChangeDetails`

### Parameters
* **start** (number) - The starting position for the operation.
* **deleteCount** (number) - The number of characters to delete.
* **inserted** (string, optional) - The string to insert at the specified position (defaults to '').
* **removeDirection** (Direction, optional) - The direction for removal (defaults to DIRECTION.NONE).
* **flags** (AppendFlags<MaskedState>, optional) - Flags to control the splice operation.

### Returns
* **ChangeDetails** - Details about the changes made.
```

--------------------------------

### Vue 3 Mask Component Example

Source: https://imask.js.org/api/modules/vue_imask.html

Illustrates using IMaskComponent in Vue 3 with v-model:typed for direct typed value binding. It shows how to handle separate events for masked and unmasked values.

```html
<template>
  <imask-input
    <!-- possible to use 'v-model' = 'v-model:value' = 'v-model:masked' and 'v-model:unmasked' -->
    v-model:typed="numberModel"
    :mask="Number"
    radix="."
    @accept:masked="onAccept" <!-- accept value (same as '@accept:value' or just '@accept') -->
    @accept:unmasked="onAcceptUnmasked"
    <!--
      @accept:typed="onAccepttyped"
      @complete:typed="onCompleteTyped"
    -->

    <!-- ...see more mask props in a guide -->

    <!-- other input props -->
    placeholder='Enter number here'
  />
</template>

<script>
  import { IMaskComponent } from 'vue-imask';

  export default {
    data () {
      return {
        numberModel: '',
        onAccept (value) {
          console.log({ value });
        },
        onAcceptUnmasked (unmaskedValue) {
          console.log({ unmaskedValue });
        }
      }
    },
    components: {
      'imask-input': IMaskComponent
    }
  }
</script>
```

--------------------------------

### IMaskFactory create Method Signature

Source: https://imask.js.org/api/interfaces/angular_imask.IMaskFactory.html

Shows the type signature for the create method of IMaskFactory, including type parameters, parameters, and return type.

```typescript
create<Opts>(el, opts): InputMask<Opts>
```

--------------------------------

### Vue 2 Mask Component Example

Source: https://imask.js.org/api/modules/vue_imask.html

Demonstrates how to use the IMaskComponent in Vue 2 for number masking with custom radix and unmasking options. The @accept event is used to log the masked or unmasked value.

```html
<template>
  <imask-input
    v-model="numberModel"
    :mask="Number"
    radix="."
    :unmask="true"
    <!-- depending on prop above first argument of 'accept' callback is
    `value` if `unmask=false`,
    `unmaskedValue` if `unmask=true`,
    `typedValue` if `unmask='typed'` -->
    @accept="onAccept"

    <!-- ...see more mask props in a guide -->

    <!-- other input props -->
    placeholder='Enter number here'
  />
</template>

<script>
  import { IMaskComponent } from 'vue-imask';

  export default {
    data () {
      return {
        numberModel: '',
        onAccept (value) {
          console.log(value);
        }
      }
    },
    components: {
      'imask-input': IMaskComponent
    }
  }
</script>
```

--------------------------------

### Create Masked Input Component

Source: https://imask.js.org/api/modules/solid_imask.html

Demonstrates how to create a reusable masked input component using `createMaskedInput`. Configure mask, placeholder visibility, and placeholder character.

```javascript
import { createMaskedInput } from "solid-imask";

const NumberInput = createMaskedInput({
  mask: "+{7}(000)000-00-00",
  lazy: false, // make placeholder always visible
  placeholderChar: "#", // defaults to "_"
});

const App = () => {
  return (
    <div>
      <NumberInput
        onAccept={({ value, unmaskedValue, typedValue }, maskRef, e) => {
          console.log({ value, unmaskedValue, typedValue });
          console.log(maskRef);
          console.log(e);
        }}
        onComplete={() => console.log("complete")}
      ></NumberInput>
    </div>
  );
};

```

--------------------------------

### masked<Opts, Value>(el, props)

Source: https://imask.js.org/api/functions/solid_imask.masked.html

Applies IMask to an HTML element with specified properties and event handlers. It configures the mask, and optionally handles accept and complete events, as well as providing ways to get the unmasked and current values.

```APIDOC
## Function masked<Opts, Value>(el, props)

### Description
Applies IMask to an HTML element with specified properties and event handlers. It configures the mask, and optionally handles accept and complete events, as well as providing ways to get the unmasked and current values.

### Parameters
* **el**: HTMLElement - The HTML element to apply the mask to.
* **props**: (() => {
    mask: Opts;
    onAccept?: ((value: Value, maskRef: InputMask<Opts>, e?: InputEvent) => void);
    onComplete?: ((value: Value, maskRef: InputMask<Opts>, e?: InputEvent) => void);
    unmaskedValue?: (() => string);
    value?: (() => string);
  }) - An object containing mask configuration and event handlers.
    * **mask**: Opts - The mask configuration.
    * **onAccept** (Optional): ((value: Value, maskRef: InputMask<Opts>, e?: InputEvent) => void) - Callback function executed when the mask value is accepted.
    * **onComplete** (Optional): ((value: Value, maskRef: InputMask<Opts>, e?: InputEvent) => void) - Callback function executed when the mask input is completed.
    * **unmaskedValue** (Optional): (() => string) - A function that returns the unmasked value.
    * **value** (Optional): (() => string) - A function that returns the current value.

### Returns
void
```

--------------------------------

### Create Pipe for Value Conversion

Source: https://imask.js.org/

Demonstrates how to create a pipe for converting values between unmasked and masked formats. This is useful for processing input values before submission or for display purposes.

```javascript
IMask.createPipe(
  phoneMask.masked,
  IMask.PIPE_TYPE.UNMASKED,
  IMask.PIPE_TYPE.MASKED
)
```

--------------------------------

### Include IMask.js via CDN

Source: https://imask.js.org/api/index.html

Include the IMask.js library in your HTML using a CDN link.

```html
<script src="https://unpkg.com/imask"></script>
```

--------------------------------

### imask Function

Source: https://imask.js.org/api/functions/_imask_svelte.imask-2.html

Initializes IMask on an HTML element with provided options and returns an object with methods to control the mask instance.

```APIDOC
## imask<Opts>(el, opts)

### Description
Initializes IMask on an HTML element with provided options. It returns an object containing methods to manage the mask instance, such as destroying it or updating its options.

### Parameters
* **el** (HTMLElement) - The HTML element to attach the mask to.
* **opts** (Opts) - The configuration options for the IMask instance. The type `Opts` is a generic type parameter that extends `FactoryArg`.

### Returns
An object with the following methods:
* **destroy**: (() => void) - A function that destroys the IMask instance, removing event listeners and cleaning up.
* **update**: ((opts) => void) - A function that updates the IMask instance with new options. It accepts either new options or an InputMask instance.

#### update Parameters
* **opts** (Opts | InputMask<Opts> | Partial<Opts extends Masked<any> ? UpdateInstanceOpts<Opts<Opts>> : Opts extends undefined | string | RegExp | DateConstructor | NumberConstructor | ((value, masked) => boolean) | DynamicMaskType ? UpdateStaticMaskOpts<Opts<Opts>> : Opts extends FactoryStaticOpts ? UpdateStaticOpts<Opts<Opts>> : Opts extends FactoryInstanceOpts ? UpdateInstanceOpts<Opts<(...)>["mask"]> : Opts extends FactoryConstructorOpts ? UpdateConstructorOpts<Opts<(...)>> : AnyOpts>) - The new options to apply to the mask, or an InputMask instance to update with.
```

--------------------------------

### Convert Formatted String to Number using Pipe

Source: https://imask.js.org/guide.html

Shows how to use `IMask.pipe` to convert a formatted string input into a typed number output, specifying source and destination types.

```javascript
// pipe(value, mask|masked, sourcetype, destinationtype);
// PIPE_TYPE = {TYPED, MASKED, UNMASKED}
// converts formated string to number
IMask.pipe(
  '1,01',
  {
    mask: Number,
    scale: 2,
    thousandsSeparator: ' ',
    normalizeZeros: true,
    padFractionalZeros: true,
  },
  IMask.PIPE_TYPE.MASKED,
  IMask.PIPE_TYPE.TYPED
); // 1.01 of number type
```

--------------------------------

### IMask Namespace Overview

Source: https://imask.js.org/api/modules/_imask_svelte.IMask.html

Provides an overview of the IMask namespace, including available variables and functions for creating and managing input masks within Svelte applications.

```APIDOC
## Namespace IMask

### Variables
ChangeDetails, HTMLContenteditableMaskElement, HTMLMaskElement, InputMask, MaskElement, Masked, MaskedDate, MaskedDynamic, MaskedEnum, MaskedFunction, MaskedNumber, MaskedPattern, MaskedRange, MaskedRegExp, PIPE_TYPE, RepeatBlock

### Functions
createMask, createPipe, pipe
```

--------------------------------

### doPrepareChar

Source: https://imask.js.org/api/classes/imask.Masked.html

Prepares each character before mask processing.

```APIDOC
## doPrepareChar

### Description
Prepares each character before mask processing.

### Method
`doPrepareChar(str, flags?): [string, ChangeDetails]`

### Parameters
#### Parameters
- **str** (string) - The string containing characters to prepare.
- **flags** (AppendFlags<MaskedState>) - Optional flags to modify preparation.

### Returns
[string, ChangeDetails]
```

--------------------------------

### default<Opts>(el, opts): InputMask<Opts>

Source: https://imask.js.org/api/functions/imask.default-1.html

Applies a mask to the specified input element with the given options. This is the main function for initializing IMask.

```APIDOC
## default<Opts>(el, opts): InputMask<Opts>

### Description
Applies a mask to the specified input element with the given options. This is the main function for initializing IMask.

### Parameters
#### Parameters
- **el** (InputMaskElement) - Description: The input element to apply the mask to.
- **opts** (Opts) - Description: Configuration options for the mask. Opts extends FactoryArg.

### Returns
InputMask<Opts>
```

--------------------------------

### Angular IMask Directive and Pipe Usage

Source: https://imask.js.org/api/modules/angular_imask.html

Demonstrates how to use the `imask` directive for input masking and the `imask` pipe for displaying masked values in Angular templates.

```APIDOC
## Directive Usage

### Description
Applies masking to input elements using the IMask library.

### Parameters
#### Input Properties
- **imask** (object) - Required - Configuration object for the mask. See IMask guide for more properties.
- **unmask** (boolean | 'typed') - Optional - If true, the directive will return the unmasked value. If 'typed', it returns the typed value.
- **imaskElement** (function) - Optional - A function to provide a custom element getter. Defaults to `elementRef.nativeElement`.

#### Event Outputs
- **(accept)** - Emits the masked or unmasked value upon acceptance, depending on the `unmask` property.
- **(complete)** - Emits when the mask is completed.

### Example
```html
<input
  [imask]="{mask: '+{7}(000)000-00-00'}"
  [unmask]="true"
  (accept)="onAccept($event)"
  (complete)="onComplete($event)"
/>
```

## Pipe Usage

### Description
Formats a value using a specified mask within Angular templates.

### Parameters
#### Pipe Arguments
- **imask** (any) - The value to be masked.
- **mask** (object) - The IMask configuration object.

### Example
```html
<p>{{ value | imask:mask }}</p>
```
```

--------------------------------

### Extend Existing Components with IMaskMixin

Source: https://imask.js.org/api/modules/react_imask.html

Shows how to extend existing components, such as styled-components, with masking capabilities using the IMaskMixin higher-order component. It demonstrates binding the internal input element using `innerRef` (or `ref` for styled-components V4).

```jsx
import { IMaskMixin } from 'react-imask';

// extend style component
const StyledInput = styled.input`
  color: green;
`;

const MaskedStyledInput = IMaskMixin(({inputRef, ...props}) => (
  <StyledInput
    {...props}
    innerRef={inputRef}  // bind internal input (if you use styled-components V4, use "ref" instead "innerRef")
  />
));

<MaskedStyledInput
  mask={Number}
  radix="."
  onAccept={(value, mask) => console.log(value)}
  // ...and more mask props in a guide

  // ...other styled props
/>
```

--------------------------------

### RepeatBlock Constructor

Source: https://imask.js.org/api/classes/imask.RepeatBlock.html

Initializes a new instance of the RepeatBlock class. It accepts options to configure the repeating pattern and its behavior.

```APIDOC
## new RepeatBlock<M>(opts: RepeatBlockOptions): RepeatBlock<M>

### Description
Initializes a new instance of the RepeatBlock class.

### Parameters
* **opts** (RepeatBlockOptions) - Options to configure the RepeatBlock.

### Returns
* RepeatBlock<M> - A new instance of RepeatBlock.
```

--------------------------------

### InputMask Constructor

Source: https://imask.js.org/api/classes/imask.InputMask.html

Initializes a new InputMask instance, binding it to an input element and applying specified options.

```APIDOC
## constructor
  * new InputMask<Opts>(el, opts): InputMask<Opts>
  * #### Type Parameters
    * Opts extends FactoryArg = Record<string, unknown>
#### Parameters
    * el: InputMaskElement
    * opts: Opts
#### Returns InputMask<Opts>
```

--------------------------------

### HTMLInputMaskElement Constructors

Source: https://imask.js.org/api/classes/imask.HTMLInputMaskElement.html

Details the constructor for creating an instance of HTMLInputMaskElement.

```APIDOC
## constructor

### new HTMLInputMaskElement(input: InputElement): HTMLInputMaskElement

#### Parameters
* **input** (InputElement) - The input element to apply the mask to.

#### Returns
HTMLInputMaskElement
```

--------------------------------

### IMaskFactory.create

Source: https://imask.js.org/api/interfaces/angular_imask.IMaskFactory.html

Creates a new InputMask instance for a given element and configuration options.

```APIDOC
## create<Opts>(el, opts)

### Description
Creates a new InputMask instance for a given element and configuration options.

### Method Signature
create<Opts>(el: InputMaskElement, opts: Opts): InputMask<Opts>

### Type Parameters
* Opts extends FactoryArg

### Parameters
* **el** (InputMaskElement) - The HTML element to attach the mask to.
* **opts** (Opts) - The configuration options for the InputMask.

### Returns
* InputMask<Opts> - An instance of InputMask configured with the provided options.
```

--------------------------------

### HTMLMaskElement Constructor

Source: https://imask.js.org/api/classes/imask.HTMLMaskElement.html

Initializes a new instance of the HTMLMaskElement class, associating it with an HTMLElement.

```APIDOC
## new HTMLMaskElement(input)

### Description
Initializes a new instance of the HTMLMaskElement class.

### Parameters
* **input** (HTMLElement) - The HTML element to apply the mask to.

### Returns
* **HTMLMaskElement** - A new instance of HTMLMaskElement.
```

--------------------------------

### doPrepareChar

Source: https://imask.js.org/api/classes/imask.MaskedNumber.html

Prepares each character before mask processing. It takes a character and optional flags, returning the processed character and change details.

```APIDOC
## doPrepareChar

### Description
Prepares each char before mask processing.

### Method Signature
doPrepareChar(ch: string, flags?: AppendFlags<MaskedState>): [string, ChangeDetails]

### Parameters
#### Parameters
- **ch** (string) - The character to prepare.
- **flags** (AppendFlags<MaskedState>) - Optional flags for appending.

### Returns
[string, ChangeDetails] - The processed character and change details.
```

--------------------------------

### pad

Source: https://imask.js.org/api/classes/imask.MaskedPattern.html

Pads the input value, optionally with flags.

```APIDOC
## pad

### Description
Pads the current value.

### Method
Not applicable (SDK method)

### Parameters
#### Path Parameters
- **flags** (Optional AppendFlags<MaskedState>) - Optional flags to control padding behavior.

### Returns
- **ChangeDetails** - Details about the changes made during padding.
```

--------------------------------

### Masked Constructor

Source: https://imask.js.org/api/classes/imask.Masked.html

Initializes a new instance of the Masked class with optional configuration options.

```APIDOC
## new Masked<Value>(opts: Partial<Pick<Masked<any>, "eager" | "mask" | "parent" | "prepare" | "prepareChar" | "validate" | "commit" | "format" | "parse" | "overwrite" | "skipInvalid" | "autofix">>): Masked<Value>

### Description
Initializes a new instance of the Masked class.

### Parameters
* **opts** (Partial<Pick<Masked<any>, "eager" | "mask" | "parent" | "prepare" | "prepareChar" | "validate" | "commit" | "format" | "parse" | "overwrite" | "skipInvalid" | "autofix">>) - Optional - Configuration options for the masked input.

### Returns
* Masked<Value> - A new instance of the Masked class.
```

--------------------------------

### IMask Namespace

Source: https://imask.js.org/api/modules/angular_imask.IMask.html

Provides core functionalities for creating and managing input masks.

```APIDOC
## Namespace IMask

### Variables

- **ChangeDetails** (type) - Details about changes made to the mask.
- **HTMLContenteditableMaskElement** (type) - Represents a mask element for contenteditable elements.
- **HTMLMaskElement** (type) - Represents a mask element for HTML elements.
- **InputMask** (type) - Interface for input mask functionality.
- **MaskElement** (type) - Base class for mask elements.
- **Masked** (type) - Base class for masked input types.
- **MaskedDate** (type) - Represents a masked date input.
- **MaskedDynamic** (type) - Represents a dynamically changing masked input.
- **MaskedEnum** (type) - Represents a masked input with a predefined set of values.
- **MaskedFunction** (type) - Represents a masked input controlled by a function.
- **MaskedNumber** (type) - Represents a masked number input.
- **MaskedPattern** (type) - Represents a masked input with a specific pattern.
- **MaskedRange** (type) - Represents a masked input within a specific range.
- **MaskedRegExp** (type) - Represents a masked input matching a regular expression.
- **PIPE_TYPE** (type) - Type constant for pipes.
- **RepeatBlock** (type) - Represents a repeating block within a mask.

### Functions

- **createMask**(options) - Creates a new mask instance with the given options.
- **createPipe**(type, options) - Creates a pipe for transforming values.
- **pipe**(value, mask, type) - Pipes a value through a mask.
```

--------------------------------

### Listen to mask events

Source: https://imask.js.org/guide.html

Subscribe to events like 'accept' (fired on input change) and 'complete' (fired when the value is fully filled for pattern-based masks).

```javascript
const log = () => console.log(mask.value);
// 'accept' event fired on input when mask value has changed
mask.on('accept', log);

// 'complete' event fired when the value is completely filled
// Note: this makes sense only for Pattern-based masks
mask.on('complete', () => console.log(mask.value));
```

--------------------------------

### pad

Source: https://imask.js.org/api/classes/imask.MaskedEnum.html

Pads the current value with optional flags.

```APIDOC
## pad

### Description
Pads the current value.

### Method
Not applicable (method of a class)

### Parameters
#### Path Parameters
- **flags** (Optional<AppendFlags<MaskedState>>) - Optional - Flags to control padding behavior.

### Returns
- **ChangeDetails** - Details about the changes made during padding.
```

--------------------------------

### normalizeOpts

Source: https://imask.js.org/api/functions/imask.normalizeOpts.html

Normalizes the options provided for IMask.

```APIDOC
## normalizeOpts

### Description
Normalizes the options provided for IMask.

### Method
Function

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
#### opts (Opts)
- opts: Opts - The options to normalize.

### Returns
NormalizedOpts<Opts> - The normalized options.

### Request Example
```json
{
  "example": "Not applicable for function"
}
```

### Response
#### Success Response (200)
- **field1** (type) - Description

#### Response Example
```json
{
  "example": "Not applicable for function"
}
```
```

--------------------------------

### HTMLInputMaskElement Methods

Source: https://imask.js.org/api/classes/imask.HTMLInputMaskElement.html

Provides a list of methods available on the HTMLInputMaskElement for managing mask behavior and events.

```APIDOC
## Methods

### _onBeforeinput
* **_onBeforeinput(e: InputEvent): void**
  * #### Parameters
    * **e** (InputEvent)
  * #### Returns void

### _onCompositionEnd
* **_onCompositionEnd(e: CompositionEvent): void**
  * #### Parameters
    * **e** (CompositionEvent)
  * #### Returns void

### _onInput
* **_onInput(e: InputEvent): void**
  * #### Parameters
    * **e** (InputEvent)
  * #### Returns void

### _onKeydown
* **_onKeydown(e: KeyboardEvent): void**
  * #### Parameters
    * **e** (KeyboardEvent)
  * #### Returns void

### _unsafeSelect
* **_unsafeSelect(start: number, end: number): void**
  * Sets InputElement selection.
  * #### Parameters
    * **start** (number)
    * **end** (number)
  * #### Returns void

### bindEvents
* **bindEvents(handlers: EventHandlers): void**
  * Binds HTMLElement events to mask internal events.
  * #### Parameters
    * **handlers** (EventHandlers)
  * #### Returns void

### select
* **select(start: number, end: number): void**
  * Safely sets element selection.
  * #### Parameters
    * **start** (number)
    * **end** (number)
  * #### Returns void

### unbindEvents
* **unbindEvents(): void**
  * Unbinds HTMLElement events to mask internal events.
  * #### Returns void
```

--------------------------------

### Prepare Character for Uppercase Input

Source: https://imask.js.org/guide.html

Uses `prepareChar` to convert input characters to uppercase. The `commit` option is shown for demonstration but should not be used to manually change the value.

```javascript
IMask(element, {
  mask: /^\w+$/,
  prepareChar: str => str.toUpperCase(),
  commit: (value, masked) => {
    // Don't change value manually! All changes should be done in mask!
    // This example helps to understand what is really changes, only for demo
    masked._value = value.toLowerCase();  // Don't do it
  }
})
```

--------------------------------

### IMask Variables

Source: https://imask.js.org/api/modules/imask.html

Global variables and constants available within the IMask library.

```APIDOC
### Variables

- **DIRECTION**: Constant for direction values.
- **PIPE_TYPE**: Constant for pipe types.

```

--------------------------------

### ChunksTailDetails Methods

Source: https://imask.js.org/api/classes/imask.ChunksTailDetails.html

Overview of the methods available in the ChunksTailDetails class for manipulating tail details.

```APIDOC
## Methods
### appendTo
  * appendTo(masked): ChangeDetails
  * #### Parameters
    * masked: AppendTail | MaskedPattern<string>
#### Returns ChangeDetails


### extend
  * extend(tailChunk): void
  * #### Parameters
    * tailChunk: string | String | TailDetails
#### Returns void


### shift
  * shift(): string
  * #### Returns string


### toString
  * toString(): string
  * #### Returns string


### unshift
  * unshift(beforePos?): string
  * #### Parameters
    * `Optional` beforePos: number
#### Returns string
```

--------------------------------

### InputMask Methods

Source: https://imask.js.org/api/classes/imask.InputMask.html

Contains methods for managing the input mask's lifecycle, event handling, history, and cursor manipulation.

```APIDOC
## Methods
### _abortUpdateCursor
  * _abortUpdateCursor(): void
  * Aborts delayed cursor update
#### Returns void
### _applyHistoryState
  * _applyHistoryState(state): void
  * #### Parameters
    * state: undefined | InputHistoryState
#### Returns void
### _bindEvents
  * _bindEvents(): void
  * Starts listening to element events
#### Returns void
### _delayUpdateCursor
  * _delayUpdateCursor(cursorPos): void
  * Delays cursor update to support mobile browsers
#### Parameters
    * cursorPos: number
#### Returns void
### _fireChangeEvents
  * _fireChangeEvents(): void
  * Fires custom events
#### Returns void
### _fireEvent
  * _fireEvent(ev, e?): void
  * Fires custom event
#### Parameters
    * ev: string
    * `Optional` e: InputEvent
#### Returns void
### _onChange
  * _onChange(): void
  * Handles view change event and commits model value
#### Returns void
### _onClick
  * _onClick(ev): void
  * Restore last selection on focus
#### Parameters
    * ev: Event
#### Returns void
### _onDrop
  * _onDrop(ev): void
  * Handles view drop event, prevents by default
#### Parameters
    * ev: Event
#### Returns void
### _onFocus
  * _onFocus(ev): void
  * Restore last selection on focus
#### Parameters
    * ev: Event
#### Returns void
### _onInput
  * _onInput(e): void
  * Handles view input event
#### Parameters
    * e: InputEvent
#### Returns void
### _onRedo
  * _onRedo(): void
  * #### Returns void
### _onUndo
  * _onUndo(): void
  * #### Returns void
### _saveSelection
  * _saveSelection(): void
  * Stores current selection
#### Returns void
### _unbindEvents
  * _unbindEvents(): void
  * Stops listening to element events
#### Returns void
### alignCursor
  * alignCursor(): void
  * Aligns cursor to nearest available position
#### Returns void
```

--------------------------------

### HTMLInputMaskElement Properties

Source: https://imask.js.org/api/classes/imask.HTMLInputMaskElement.html

Lists the properties available on the HTMLInputMaskElement instance.

```APIDOC
## Properties

### _handlers
`_handlers: EventHandlers`

### input
`input: InputElement`

InputElement to use mask on.
```

--------------------------------

### createMaskedInput

Source: https://imask.js.org/api/functions/solid_imask.createMaskedInput.html

Creates a Solid.js input component with IMask integration. It accepts a mask configuration and returns a component that handles input masking, value formatting, and event callbacks.

```APIDOC
## Function createMaskedInput

### Signature
createMaskedInput<Opts, Value>(mask: Opts): ((props) => Element)

### Type Parameters
* **Opts**: Extends `FactoryArg`.
* **Value**: An object containing `typedValue`, `unmaskedValue`, and `value`.

### Parameters
* **mask** (Opts): The mask configuration.

### Returns
A function that takes props and returns an Element.

#### Props for the returned Element
* **onAccept?** ((value, maskRef, e?) => void): Callback when the value is accepted.
* **onComplete?** ((value, maskRef, e?) => void): Callback when the mask is complete.
* **unmaskedValue?** (string): The unmasked value of the input.
* **value?** (string): The value of the input.
* Other `InputHTMLAttributes<HTMLInputElement>` properties (excluding `value`, `type`, `onChange`, `onchange`).
```
Tokens:
Raw