Table: Error message styling for all Inputs

[prashanthr6383]

Description

Added new styles to the table inputs error message

1. Text Input
2. Number Input
3. Autocomplete
4. Select

note: for autocomplete duplicate error message is shown which is part of another issue #2720.

References

Fixes #2711, Fixes #2712, Fixes #2722, Fixes #2725, Fixes #2727

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

How Has This Been Tested?

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

[netlify]

✅ Deploy Preview for moduswebcomponents ready!

Name	Link
🔨 Latest commit	41cbe99
🔍 Latest deploy log	https://app.netlify.com/sites/moduswebcomponents/deploys/66cedbe1cafa480008ec0b30
😎 Deploy Preview	https://deploy-preview-2721--moduswebcomponents.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 25 (🟢 up 1 from production) Accessibility: 98 (no change from production) Best Practices: 92 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[prashanth-offcl]

@prashanthr6383 There are two scenarios with respect to validation.

1. Inbuilt constraint validation - The validations will be handled inside the component and upon receiving invalid user input, the component notifies the consumer with the details
2. Consumer side validation - The consumer will validate the input by listening to the change event emitted from the component and tells us what error message to display when required.

Our form components already have the required support for consumer side validation so we will first focus on extending the same for the table component as a first step. This PR is related to the inbuild constraint validation that is not implemented in our form components yet, the proposed changes rely on the errorText that is passed by the consumer to emit the error event back to the consumer. With that said I'll move the PR to draft state for now until we decide on the desired behavior and what we are going to support.

[vetrivel1]

AI generated

[vetrivel1]

File: stencil-workspace/src/components/modus-number-input/modus-number-input.tsx (line 70-78)
The valueError.emit(null) call in the else branch might not be necessary if the purpose is just to signal an error. Consider only emitting when there is an actual error rather than emitting null values.

File: stencil-workspace/src/components/modus-text-input/modus-text-input.tsx (line 137-145)
Similar to the number input, the valueError.emit(null) call in the else branch creates unnecessary event traffic. Consider only emitting when there is an actual error to report.

File: stencil-workspace/src/components/modus-select/modus-select.tsx (line 80-84)
The errorText check and error emission in connectedCallback could lead to unwanted error events during initial component setup. Consider if this is necessary at this lifecycle stage.

File: stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx (line 111-116)
The valueError emission is present in multiple handler methods but does not follow the pattern of emitting null when there is no error. Consider standardizing the error handling approach across components.

File: stencil-workspace/src/components/modus-number-input/modus-number-input.spec.tsx (line 14)
There is an unexpected space in the part attribute (input-container vs input-container ). This change appears in multiple component tests and may cause styling issues.

Diff reference