🛠 - Investigate other mask options

[SergiusSidorov]

🚀 Feature request

Is your feature request related to a problem?

Last release of angular2-text-mask was about 3 years ago. Currently this project is not maintained. Using this library results in a build-time warning:
Warning: /node_modules/@taiga-ui/kit/ivy_ngcc/fesm2015/taiga-ui-kit-components-input-range.js depends on 'angular2-text-mask'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

There is a possibility to switch off this warning. But I'm always frustrated when something can cause optimization bailouts. =)

Describe the solution you'd like

Maybe it would be better to migrate to ngx-mask (https://github.com/JsDaddy/ngx-mask). This project looks alive.

Describe alternatives you've considered

Additional context

[ramax495]

ngx-mask doesn't work on Ionic.
Just for info)

[waterplea]

Thank you for raising this issue. Yes, we would like to migrate to another mask solution at some point.

I have refactored work with mask in input a little. Now if you were to use angular2-text-mask — you could set it directly on tui-input. This way Taiga UI supports angular2-text-mask but doesn't enforce it on you, as end user. It is still required by our internal implementation for various masked inputs, such as InputDate, InputNumber etc. But that could be refactored without breaking changes in future when we will have resources and a good candidate library (or have written our own).

[0xphilipp]

I can highly recommend angular-imask which uses imask.js under the hood. Which would be a bit bigger in comparison

[Fafnur]

Don't use ngx-mask.

[zy2ba]

Don't use ngx-mask.

Support this opinion. We take it for our project and have some pain moments.

Primarily, ngx-mask works normally only with type=text. Mobile users be frustrated by strange keyboard type selection with it

[Yohandah]

Also, this is blocking because we are unable to run Unit Tests because of this lib text-mask/text-mask#1019

Error: TextMaskModule does not have a module def (ɵmod property)

[waterplea]

I believe that's unrelated. It is something with Jest and ngcc not working properly with Ivy.

[hakimio]

Maybe @ngneat/input-mask could be a good alternative?

[waterplea]

I believe we looked into it and decided not to go with it. Writing our own mask solution seems to be the way to go, especially since it would be in demand at our company outside Angular scope as well. So this is one of the supertasks for 3.0 we plan to get to in a couple of weeks.

[hakimio]

Worth noting that angular2-text-mask is not only causing problems with Stackblitz but also prevents usage of yarn v2+ and pnpm because of ngcc requirement. Would be awesome if getting rid of this dependency could be prioritized.

[waterplea]

I believe we dropped angular2-text-mask and copy-pasted it for now in newer versions. But text-mask remains a dependency. We will prioritize new mask from November 1st, but it's a huge task so there's no forecast how long it's going to take us.

[hakimio]

The copy-pasted version is marked as internal and deprecated, but, yeah, it could be a valid work-around until you develop your own solution.

[hakimio]

Angular v16 was just released where they dropped ngcc.
@nsbarsukov how is maskito coming along? Do you plan to start using it in taiga-ui soon?

[nsbarsukov]

Angular v16 was just released where they dropped ngcc. @nsbarsukov how is maskito coming along? Do you plan to start using it in taiga-ui soon?

Maskito is ready to use it inside Taiga UI, yep.
I am going to start in next week. And I will do 1-2 components per week (not all masked inputs at once.).

[hakimio]

Awesome 🙂

[nsbarsukov]

Full list with masked Taiga’s inputs:

• InputCard (Released in v3.27.0)
• InputCardGrouped (Released in v3.27.0)
• InputYear (Released in v3.27.0)

---

• InputDate (Released in v3.28.0)
• InputDateRange (Released in v3.28.0)
• InputTime (Released in v3.28.0)

---

• InputDateTime (Released in v3.29.0)

---

• InputPhone (Released in v3.30.0)
• InputPhoneInternational (Released in v3.30.0)

---

• ColorPicker (Released in v3.34.0)

---

• InputNumber (Released in v3.35.0)
• InputCount (Released in v3.35.0)