Add valueAsX props for specialized, non-text, input types and rich-value components

[jcfranco]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

We have a few components that currently handle values as strings (e.g., calcite-color-picker, calcite-input-number, calcite-input-date-picker, calcite-time-picker). This approach often needs boilerplate conversions between the string value and the specific type (e.g., string to number or date) in various use cases (both internal and external to the component). To improve developer ergonomics and reduce redundant code, we should introduce a valueAsX property (similar to input's valueAsNumber and valueAsDate props).

Blocked issues: #8595

Acceptance Criteria

Adding valueAsX props across specialized, non-text, inputs and rich-value components.

Relevant Info

No response

Which Component

• color-picker (valueAsColor†)
• input-number (valueAsNumber)
• input-date-picker (valueAsDate)
• input-time-picker (valueAsDate)
• input-time-zone (valueAsTimeZone†)
• slider (valueAsNumber)
• time-picker (valueAsDate)

†suggested name; type should be discussed prior implementation

Example Use Case

No response

Priority impact

p4 - not time sensitive

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)

[marcysilverman]

Hi @jcfranco, the Developers Experience uses the inputs heavily on our Pricing page. We would like the value to be type as a number. Right now I am converting the value as number for our needs.

[geospatialem]

Spike to confirm components and upcoming timeframe for 2025 for execution.

[jcfranco]

PR title and description has been revisited to include other value-components outside of the input group.

[github-actions]

cc @geospatialem, @brittneytewks