Add Space Between Numbers

[danielehrhardt]

This is a Feature Request.
It would be nice for better UX to add space between some numbers.

[class.mr-4]="i == 2 "

[AlexMiniApps]

Hi, thanks for the advice. I will think about, because the library can have arbitrary amount of numbers

[danielehrhardt]

Hi, thanks for the advice. I will think about, because the library can have arbitrary amount of numbers

Maybe a every option would be good.

Every 3. Every 2.
[][][]__[][][]__[][][]

[rozpuszczalny]

Hi, first of all, thanks Alex for the library, it helps a lot!

For anyone who might be interested in the spacings between inputs, you can do it via SCSS, like so:

code-input {

 // Change nth-child(2n) to whatever you want. 2n is every two inputs.
 // You could also do only one gap, by specifying after which field a gap should appear, e.g. 4
 &::ng-deep > span::nth-child(2n):not(:last-child) {
 --item-spacing: 24px; // Or whatever gap value you want
 }
}

You can extend it to e.g. include dash separators with some more SCSS magic:

code-input {
 &::ng-deep > span::nth-child(3n):not(:last-child) {
 --item-spacing: 20px;
 position: relative;

 &::after {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 5px;
 width: 10px;
 content: "-";
 }
 }
}

Note about dash separators: If someone pastes a code e.g. "0000-abcd" into the 8 characters long input, the code will be "0000-abc", as "-" will not be considered as a separator, but a part of code. Worth remembering 😉

[AlexMiniApps]

@rozpuszczalny Thank you for the workaround!

[rbalet]

@AlexMiniApps What about adding a css variable to each span ?

The would let anybody change the spacing as they wish, without having to use ng-deep or anything else.

Let me know and I'll do a pull-request

[AlexMiniApps]

@rbalet thanks for the suggestion, I will think about