# MaskedPhoneInput

## Installation

```
npm install @apimediaru/masked-phone-input
```

## Basic usage

Create `input` element.

```html
<input id="phone" type="tel" name="phone" data-masked-phone-input>
```

Import library and create new `MaskedPhoneInput` instances.

```js
import { createMaskedInput, validate } from '@apimediaru/masked-phone-input';

// Bind MaskedPhoneInput instances
createMaskedInput('[data-masked-phone-input]');

const formEl = document.querySelector('form');
formEl.addEventListener('submit', (event) => {
  event.preventDefault();
  
  const phoneInputEl = form.querySelector('[name="phone"]');
  
  if (phoneInputEl && !validate(phoneInputEl)) {
    alert('Bad phone number!');
    return;
  }
  
  // Further submit logic
});
```

## API

### constructor arguments

`new MaskedInput(el: HTMLInputElement, formatter: MaskedFormatter, validator: MaskedValidator): MaskedInput`

Library core class, you can import it from the package, but do not use it directly with `new` operator, use factory instead.

```javascript
import { MaskedInput } from '@apimediaru/masked-phone-input';
```

### factory

`createMaskedInput(el: HTMLInputElement | string, options?: string | MaskedLocalization): MaskedInput | MaskedInput[]`

Used to create a new `MaskedInput` instance.

You can directly pass the `HTMLInputElement` and create a new instance for target input.

```javascript
import { createMaskedInput } from '@apimediaru/masked-phone-input';

const instance = createMaskedInput(document.querySelector('[name="phone"]'));
```

Other usage is passing the `CSS` selector as first argument to get an array of `MaskedInput` instances which met the condition (elements which are not instances of `HTMLInputElement` are ignored).

```javascript
import { createMaskedInput } from '@apimediaru/masked-phone-input';

const instances = createMaskedInput('[name="phone"]');
```

### validate

`validate(el: HTMLElement | string, locale?: string): boolean`

Most of the time you want to validate `HTMLInputElement`, so just pass it as first argument:

```javascript
import { validate } from '@apimediaru/masked-phone-input';

const element = document.querySelector('#phone');
console.log(validate(element)); // true / false
```

Validating elements which are not instance of `HTMLInputElement` will always return `true`.

Other case is validating directly value as a string, you can pass such value as first argument and if needed you may also specify locale (default one is used if omitted):

```javascript
import { validate } from '@apimediaru/masked-phone-input';

console.log(validate('+78001234567')); // true / false
```

### extractInstance

`extractInstance(el: HTMLInputElement): IMaskedInput | null`

Extract instance attached to provided `HTMLInputElement`.

```javascript
import { extractInstance } from '@apimediaru/masked-phone-input';

const element = document.querySelector('#phone');
const instance = extractInstance(element);
```

### extendDefaults

`extendsDefaults(obj: GlobalOptions): void`

Extend default options.

```javascript
import { extendDefaults, Locales } from '@apimediaru/masked-phone-input';

extendDefaults({
  locale: Locales.LOCALE_GE,
});
```

### Locales

Locales map.

```javascript
import { Locales } from '@apimediaru/masked-phone-input';

console.log(Locales);
```

## Instance methods and properties

### destroy()

`instance.destroy()`

Destroy instance.

### isValid

`instance.isValid` 

`true` if value meets validator.

### isInvalid

`instance.isInvalid`

`false` if value do not meets validator.

## Default options

### locale

Fallback locale which is used by default. Default: `ru`