feat(tegel-angular): reactive forms integration

[adarean5]

Describe pull-request
Adds native integration with the angular reactive forms for the Tegel input components.

Solving issue
Fixes: #546

How to test
This one is a bit tricky to test locally since it requires packages to be packed locally first.

1. Navigate to packages/core
2. Create a packages directory in your home folder
3. Run npm run build
4. Run npm pack --pack-destination ~/packages - This should create $homeFolder/packages/scania-tegel-1.8.0.tgz
5. Update the @scania/tegel package in packages/angular/package.json to "@scania/tegel": "file:~/packages/scania-tegel-1.8.0.tgz",
6. run npm run build inside packages/angular
7. Run npm pack --pack-destination ~/packages inside packages/angular
8. Open your angular project (I used the Tegel demo app) and update the @scania/tegel-angular package to "@scania/tegel-angular": "file:~/packages/scania-tegel-angular-1.8.0.tgz"
9. Remove all ngDefaultControl directives from your inputs.
10. Run the dev server
11. Test out the forms.

Checklist before submission

• I have added unit tests for my changes (if applicable)
• All existing tests pass
• I have updated the documentation (if applicable)

Suggested test steps

• Browser testing (Chrome, Safari, Firefox)
• Keyboard operability
• Interactive elements have labels.
• Storybook controls
• Design/controls/props is aligned with other components
• Dark/light mode and variants
• Input fields – values should be displayed properly
• Events

Screenshots

Additional context
The existing angularValueAccessorBindings configuration inside stencil.config.ts was mostly correct, but it was not applied, since the generated value accessors weren't exported from the TegelModule. The value accessors are now exported. tds-dropdown did not work with the auto-generated value accessors out of the box, so I needed to implement an "adapter" value accessor (packages/angular/projects/components/src/lib/directives/tds-dropdown-value-accessor.ts)

The handleInput event in tds-text-field and tds-textarea was emitting the event before updating its value. This caused issues when binding to tdsInput, since event.target.value was the previous value and not the current value. I fixed this by changing the order inside the method from:

handleInput(event): void {
    this.tdsInput.emit(event);
    this.value = event.target.value;
  }

To:

handleInput(event): void {
    this.value = event.target.value;
    this.tdsInput.emit(event);
  }

Forms integration has been implemented for the following components:

• tds-checkbox
• tds-chip[type="checkbox"]
• tds-chip[type="radio"]
• tds-radio-button
• tds-dropdown
• tds-text-field
• tds-textarea
• tds-datetime
• tds-slider
• tds-toggle

[adarean5]

@theJohnnyMe @timrombergjakobsson Would it be possible to publish beta testing packages of this change so it would be easier to test locally? At the moment both packages need to be generated locally, which is a bit of a hassle.

[aws-amplify-eu-north-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-598.d3fazya28914g3.amplifyapp.com

[theJohnnyMe]

@theJohnnyMe @timrombergjakobsson Would it be possible to publish beta testing packages of this change so it would be easier to test locally? At the moment both packages need to be generated locally, which is a bit of a hassle.

For sure, that would not be a problem, I will ping you once we do so. Thanks a lot for your contribution @adarean5 ! 🚀

[adarean5]

Amazing, thank you!

I have tested the changes in the tegel-angular-demo project, but I cannot push my branch, since I'm not a contributor on that project. Would it be possible to make me a contributor there as well? I could update the demo app myself once these changes are a part of the official Tegel package.

[theJohnnyMe]

@adarean5 here we go: https://www.npmjs.com/package/@scania/tegel-angular/v/1.8.0-ng-form-beta.0

[theJohnnyMe]

Amazing, thank you!

I have tested the changes in the tegel-angular-demo project, but I cannot push my branch, since I'm not a contributor on that project. Would it be possible to make me a contributor there as well? I could update the demo app myself once these changes are a part of the official Tegel package.

Invite sent ;)

[timrombergjakobsson]

Wow! Thanks for your contribution @adarean5!

[adarean5]

Looks like there are some issues with checkboxes integration at the moment. I will need to look into it.

[adarean5]

I added support for checkboxes and chips. I also added a chip example to the angular demo project.

I'm not sure what's the proper way to set up chips in the radio mode and if that's something we can support at all. I think it would be better to separate the chips into three different components (chip-button, chip-checkbox, chip-radio).

I was also unable to get the radio buttons to work natively. The issue is that the radio buttons are not really a single control, but multiple controls. Perhaps at some point the radio buttons can be reworked to offer a single parent control, to which you can bind values. I think that would be more practical. For now angular forms integration won't be implemented for the radio buttons.

[adarean5]

This is the branch for the angular demo app: /~https://github.com/scania-digital-design-system/tegel-angular-demo/tree/feat/angular-forms-updates

I was able to simplify the forms implementation quite a bit due to these changes!

[theJohnnyMe]

@adarean5 - both @scania/tegel and @scania/tegel-angular are now having new beta release with 1.8.0-ng-form-beta.1 as version.

• https://www.npmjs.com/package/@scania/tegel/v/1.8.0-ng-form-beta.1
• https://www.npmjs.com/package/@scania/tegel-angular/v/1.8.0-ng-form-beta.1

[adarean5]

I tested the new package with my project and also the Tegel angular demo project.
It seems to work as expected and it's also backwards compatible to an extent.
Projects that are already using tegel-angular are going to get errors if they already implemented their own value accessors for the tegel inputs (for example src/app/directives/dropdown.directive.ts in the tegel-angular-demo project). The solution is to simply remove their custom value accessors since they are no longer needed.

[timrombergjakobsson]

I tested the new package with my project and also the Tegel angular demo project. It seems to work as expected and it's also backwards compatible to an extent. Projects that are already using tegel-angular are going to get errors if they already implemented their own value accessors for the tegel inputs (for example src/app/directives/dropdown.directive.ts in the tegel-angular-demo project). The solution is to simply remove their custom value accessors since they are no longer needed.

Hi @adarean5! Great stuff! For projects that have implemented their own value accessors ,the migration path involves removing these custom value accessors. I guess this should be a straightforward process but requires testing to ensure that removing these does not introduce new issues. Since this change might affect several projects, probably would be advisable to engage with the community of developers using tegel-angular to gather feedback, provide support, and address any concerns they might have?

[adarean5]

It should be straightforward to migrate, but it's nearly impossible to predict what solutions various projects came up with for handling the integration. I've tested the changes on my project and the Tegel demo project and haven't experienced any difficulties. I'm still waiting for a few teams from other projects to test the demo package, but it seems like the testing of this change hasn't been prioritized by those teams. Not sure how much longer we should wait, since many projects would benefit from this change.

[adarean5]

I did some more investigation into the way the Stencil angular plugin handles radio buttons. There might be a bug in their value accessor. I reported it to Stencil, but they don't seem to prioritize issues regarding the angular integration.

In the mean time, I will try to create a custom value accessor that extends the base ValueAccessor in a way that is more similar to the way angular handles native radio inputs.

[adarean5]

I managed to add support for the two remaining inputs:

• tds-radio-button
• tds-chip in radio mode

when in radio mode, tds-chip uses the same value accessor as tds-radio-button, since they behave identically.

@theJohnnyMe @timrombergjakobsson @nathalielindqvist would it be possible to update the beta package with these changes?

[theJohnnyMe]

@adarean5 - I will do another beta release today and I will ping you once it is out ;)

[theJohnnyMe]

@adarean5 - 1.8.0-ng-form-beta.2 is out! ;)

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[adarean5]

@theJohnnyMe I think that the changes you made look good. The build output seems correct and is copied to the angular and angular-17 projects. The best way to test this would be to create a fresh angular 18 project (esbuld by default now), create a component with FormGroup and bind form controls to the tegel inputs without using ngDefaultControl.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[github-actions]

Playwright test results

 361 passed

Details

 361 tests across 111 suites
 46 seconds
 50007c5

[theJohnnyMe]

I have opened PR to test code on Angular Demo page here: scania-digital-design-system/tegel-angular-demo#99

It is Jernej's branch, but updated with latest package.
Code looks good to me, but would like at least one more person to test it.

[theJohnnyMe]

Amazing work Jernej, truly!

[timrombergjakobsson]

Awesome stuff!

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud