Add Number component

[IamPete1]

This adds a number component with optional min/max/step and units.

<sdpi-item label="Number">
    <sdpi-number setting="numberSetting" min="1" max="5" step="1" default="3" units="Px"></sdpi-number>
</sdpi-item>

closes #18

[GeekyEggo]

💡 Suggestion (blocking): With other components not requiring the value to be valid before persisting, we should consider removing these checks. In their current form, the checks also don't truly reflect the valid state, as per HTML input element, as the max (to be valid) can also be dependent on min and step when they're present, for example:

Min	Max	Step	Valid Max
undefined	undefined	10	10
0	3	10	9

[IamPete1]

I have re-ordered so the step is applied first, this means the value will always be within the valid min/max range.

On the whole I don't think we need to stress too much about people setting incompatible min/max/step values.

This is already a bit stricter than the standard number input. It allows you to enter what ever you like and only applies the min/max/step if you use the arrows. Here the limits are always applied.

[GeekyEggo]

Based on the current algorithm, there are a couple of potential issues:

• The step calculation currently indexes from 0, but would need to index from min if defined.
• The rounding within the step calculation would not reliably work in the case where step is a fraction.

With this in mind, I would propose the following change:

• The introduction of a new clamp attribute of type boolean with a default of false.
• When true, the value is clamped between the min and max prior to saving.
• When false, the value is unchanged.

[IamPete1]

• The step calculation currently indexes from 0, but would need to index from min if defined.

I have reworked to index from min if provided, else 0. This is inline with what input type number does.

• The rounding within the step calculation would not reliably work in the case where step is a fraction.

There are some cases where you see a floating point issue and get something like 0.001000000000001, I guess that is what you mean? Certainty not ideal, but tricky to fix.

With this in mind, I would propose the following change:

clamp attribute added works as you suggested. Note that the step is always applied if provided and not affected by the new attribute.

[GeekyEggo]

💡 Suggestion: To improve scalability, I would recommend we remove width here.

[IamPete1]

I understand where your point, but I think it looks better. Admittedly 6ch is a bit arbitrary. For example we currently get this:

With no width we get this:

I guess if we cannot agree we could add it as another attribute.

[GeekyEggo]

Maybe a named slot (e.g. suffix) would be better here to provide more flexibility? This would then allow the Maker to specify the width should they have differing content next to their number elements.

[IamPete1]

That works, I have done that, usage example:

    <sdpi-item label="Number">
        <sdpi-number setting="numberSetting" min="1" max="5" step="2" default="3" clamp>
            <span slot="suffix" class="number-units"> Px</span>
        </sdpi-number>
    </sdpi-item>

With:

<style>
    .number-units {
        width: 6ch;
        padding-left: var(--spacer);
        display: flex;
        align-items: center;
	}
</style>

Results in:

[IamPete1]

@GeekyEggo Bump on this, can you take another look Please.

[IamPete1]

@GeekyEggo Bump on this again, I have fixed your review issues.