Added mask with place holder functionality

[SalmanQureshi97]

I faced this issue with this plugin and needed to make the User Experience better. I wanted the input to be masked with the place holder and what Ive added is just that. resolvePlaceholder gets us the place holder, i made a simple algo to convert the phoneNumber to masked phone number and then update the propagated value. Kindly check and see if you can accept this pull request.

[SalmanQureshi97]

I am updating the functionality to have two new features: Mask AsYouType and Mask w/ Placeholder. The first one uses AsYouTypeFormatted provided within 'google-libphonenumber'. The second type uses the resolvePlaceholder function to get the placeholder and masks the input according to the placeholder.

Im adding these functions internally since any changes to the connected FormControl from inside the component trigger an infinite loop of emitted events when dynamically updated FormControl. We have tried avoiding an Emitted Event when updating the value however, since the ngx-int-tel-input component also modifies the ngModel value when it is updated dynamically. There is no way to mask the input without resulting in an infinite loop.

[SalmanQureshi97]

Kindly assign a reviewer so these changes can be merged. We are currently using this plugin in prod and need this functionality integrated.

[sanket-thotange]

@webcat12345 - I see a PR as a great addition to this amazing library. Can you please fast-track this?

[SalmanQureshi97]

Okay the last commit will be the last one for this PR. There are bunch of additions in this.

1. Mask with Placeholder: Works with default placeholder or custom placeholder, using some simple regex
2. Mask As You Type: using googlePhoneLib AsYouTypeFormatter

• Note: Both cannot be applied at the same time, if both are enabled, maskWithPlaceholder will be given preference over maskAsYouType.

3. NoDigitsPlaceholder: if Placeholder is enabled, the placeholder will be masked with 'X' e,g: Jamaica Placeholder "(876) 302 1292" will be converted to "XXX XXX XXXX", the symbol "X" can be changed using the following point
4. SymbolToMaskPlaceholderWith: In tandem with point # 3, this can be used to change the default masking character from "X" to any desired character
5. DynamicMaxLength: this limits the input length to match that of the placeholder, instead of allowing a single maxLength for all regions. This way the input looks much cleaner as the user cannot add more than the correct amount of digits

Since we needed this functionality in production, I have uploaded this package to npm : ngx-intl-tel-input-pr-464
the name references this PR.

@webcat12345, I know this is a pretty heavy PR but it would be great if you could review it and possibly merge it. If there are any questions regarding the reliability of the code, just comment here.

Hoping this gets merged soon.