fix: (Core) Overflowing, stacked and collapsible tabs

[salarenko]

Please provide a link to the associated issue.

Closes: #1410

Please provide a brief summary of this pull request.

This PR:

• Adds collapsible tabs functionality
• Adds collapsible tabs overflow functionality
• Adds maximum number of visible tabs functionality
• Adds adds stacked tabs content functionality
• Adds getElementCapacity and getElementWidth utils for counting elements capacity and width (with margins)
• Adds a [scrollSpyDisabled] attribute to disable ScrollSpy
• Abandons tab index based API

BREAKING CHANGES:

• selectedIndex input has been removed, use TabPanelComponent.open()
• selectedIndexChange output has been removed, use selectedTabChange
• TabListComponent.selectTab has been removed, use TabPanelComponent.open()
• TabPanelComponent.triggerExpandedPanel() has been removed, use TabPanelComponent.open()

Please check whether the PR fulfills the following requirements

• the commit message follows the guideline:
  https://github.com/SAP/fundamental-ngx/blob/master/CONTRIBUTING.md
• tests for the changes that have been done
• all items on the PR Review Checklist are addressed :
  https://github.com/SAP/fundamental-ngx/wiki/PR-Review-Checklist

Documentation checklist:

• update README.md
• Breaking Changes Wiki
• Documentation Examples
• Stackblitz works for all examples

[netlify]

✔️ Deploy preview for fundamental-ngx ready!

🔨 Explore the source changes: e0bbef3

🔍 Inspect the deploy logs: https://app.netlify.com/sites/fundamental-ngx/deploys/5fec5bd6f07418000781dff7

😎 Browse the preview: https://deploy-preview-4120--fundamental-ngx.netlify.app

[InnaAtanasova]

Why do you hide it? If it's hidden it should be prefixed with _

[salarenko]

Change reverted

[InnaAtanasova]

On resizing I noticed that the More button "jumps" and goes on the second line.

[InnaAtanasova]

I wrote in the previous PR that the Overflow button ("More") is not customizable. It could be anything or just an arrow and needs to handle the i18n.

[JKMarkowski]

Great Job! I left some comments regarding code / keyboard support,

[salarenko]

@InnaAtanasova Thanks for the review.

• "More v" tab not fitting into the tab panel has been fixed
• Expand tab text can be customized, but info in the docs was missing. I've improved the docs.
• Added required doc annotation changes

Except that I've also moved expand trigger to separate component.

[InnaAtanasova]

Looks good to me. Thanks for addressing the comments. Awesome job!

[InnaAtanasova]

P.S. I can still reproduce the issue with the More button going on second row when resizing the screen.

[salarenko]

@InnaAtanasova @JKMarkowski

This commit has introduced additional wrapper on tabs. Now when tabs cannot fit when resizing they will overflow without moving the "More v" tab to second row.

This diverge from Fundamental Styles structure.

[mikerodonnell89]

Nicely done! Couple very minor issues. I think enter key/space bar when "more" is focused should open the overflow popover. Also the icon/text needs some spacing on the more button in RTL mode

When first scrolling the stacked example, the selected tab does not update. But it does on subsequent scrolls. (wondering if this issue would also be present with stacking wizard if all steps are rendered stacked on first load)

[salarenko]

@mikerodonnell89 Thanks for the review.

• I've improved RTL
• Added keyboard support for expand trigger

[JKMarkowski]

LGTM

[stefanoScalzo]

Could u add to the programmatic selection example?

[mikerodonnell89]

Pushed a fix for the bug I previously mentioned with proper tab not being highlighted when first scrolling stacked content