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