p-inputNumber uses wrong border radius in p-inputGroup

[ghunteranderson]

I'm submitting a ...

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)

https://stackblitz.com/edit/github-7kzp4u?file=src/app/app.component.html

Current behavior

When a p-inputNumber component is used inside an input group (like demoed here), then the p-inputNumber will use a non-zero border radius on all corners. If the p-inputNumber is adjacent to another input, it feels disconnected. This is inconsistent with the behavior of input text elements.

Expected behavior
When using a p-inputNumber is inside of an inputGroup, it should use the same rules for rounded and square corners as text inputs. If there is an input adjacent to the p-inputNumber, then then adjacent edges should use square corners making the elements feel connected.

Minimal reproduction of the problem with instructions

I've provided a small example here where a p-inputNumber is placed in an inputGroup with two buttons.

https://stackblitz.com/edit/github-7kzp4u?file=src/app/app.component.html

What is the motivation / use case for changing the behavior?
To create a more consistent experience for the user across all input types.

Please tell us about your environment:

• Angular version: 11.1.2
• PrimeNG version: 11.2.0
• Browser: Chrome 88.0.4324.190
• Language: TypeScript

Initial Investigation
It seems like this is caused by the difference in html structure between p-inputNumber and input text. The native input element backing p-inputNumber misses out on the selector that sets both corners to square and matches both selectors that round the left and right side. These three seem to handle the border radius for inputs but don't quite work for p-inputNumber.

/* Applied to p-inputNumber */
.p-inputgroup-addon:last-child, .p-inputgroup button:last-child, .p-inputgroup input:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
/* Applied to p-inputNumber */
.p-inputgroup-addon:first-child, .p-inputgroup button:first-child, .p-inputgroup input:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
/* Not applied to p-inputNumber */
.p-inputgroup > .p-component, .p-inputgroup > .p-float-label > .p-component {
    border-radius: 0;
    margin: 0;
}

[ghunteranderson]

As a temporary workaround, I've added these styles to my styles.css file.

.p-inputgroup > p-inputnumber input.p-inputnumber-input {
  border-radius: 0;
  margin: 0;
}

.p-inputgroup p-inputnumber:last-child input.p-inputnumber-input {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.p-inputgroup p-inputnumber:first-child input.p-inputnumber-input {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

[ghunteranderson]

Thank you @mertsincan!