Enable Shadow DOM for tds-header Component to Improve Slot Behavior and Encapsulation

[ckrook]

Describe pull-request

Enabled Shadow DOM for tds-header component to improve slot functionality and ensure encapsulation of styles and layout.

Issue Linking:

Choose one of the following options

• Jira: CDEP-3191

How to test

I have created a beta release for this fix for core and all wrappers. Core: https://www.npmjs.com/package/@scania/tegel/v/1.18.0-tdsheaderitembeta.5.2 Angular-17: https://www.npmjs.com/package/@scania/tegel-angular-17/v/1.18.0-tdsheaderitembeta.5.2 Angular: https://www.npmjs.com/package/@scania/tegel-angular/v/1.18.0-tdsheaderitembeta.5.2 React: https://www.npmjs.com/package/@scania/tegel-react/v/1.18.0-tdsheaderitembeta.5.2

This can be tested by download the release to a demopage locally and add this item inside the header:

      <tds-header-item *ngIf="showOrders" slot="end" title="Orders">
        <a routerLink="/orders">Orders</a>
      </tds-header-item>

Also, have a button which makes it possible to toggle the 'showOrders'

<button (click)="toggleOrdersVisibility()">Toggle Orders Visibility</button>

Lastly, add the function which toggles the 'showOrders'

toggleOrdersVisibility() { this.showOrders = !this.showOrders; }

The above code is how I test it for Angular-17. It may look different for other wrappers.

Checklist before submission

• [ ] I have added unit tests for my changes (if applicable)
• [x] All existing tests pass
• [ ] I have updated the documentation (if applicable)
• [ ] Not breaking production behavior
• [ ] Behavior available in storybook with documented descriptions (if applicable)
• [x] npm run build-all without errors

Suggested test steps

• [x] 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

Include before/after screenshots for UI changes.

Additional context

Add any other context or feedback requests about the pull-request here.

[sonarcloud[bot]]

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[bot]]

Playwright test results

 1 failed
 389 passed
 1 skipped

Details

 391 tests across 132 suites
 52.9 seconds
 46d7153

Failed tests

src/components/header/test/default/header.e2e.ts › tds-header-default › launcher should open on click

Skipped tests

src/components/table/table/test/expandable-row-autocollapse/expandable-row-autocollapse.e2e.ts › tds-table-expandable-row-autoCollapse › NEEDS FIXING: expanding one row collapses the others when autoCollapse is true

[aws-amplify-eu-north-1[bot]]

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

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