feat(tabs): paginated tab list

[marcjulian]

PR Checklist

Please check if your PR fulfills the following requirements:

• [ ] The commit message follows our guidelines: https://github.com/goetzrobin/spartan/blob/main/CONTRIBUTING.md#-commit-message-guidelines
• [ ] Tests for the changes have been added (for bug fixes / features)
• [ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• [ ] Bugfix
• [x] Feature
• [ ] Code style update (formatting, local variables)
• [ ] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [ ] CI related changes
• [ ] Documentation content changes
• [ ] Other... Please describe:

Which package are you modifying?

• [ ] accordion
• [ ] alert
• [ ] alert-dialog
• [ ] aspect-ratio
• [ ] avatar
• [ ] badge
• [ ] button
• [ ] calendar
• [ ] card
• [ ] checkbox
• [ ] collapsible
• [ ] combobox
• [ ] command
• [ ] context-menu
• [ ] data-table
• [ ] date-picker
• [ ] dialog
• [ ] dropdown-menu
• [ ] hover-card
• [ ] input
• [ ] label
• [ ] menubar
• [ ] navigation-menu
• [ ] pagination
• [ ] popover
• [ ] progress
• [ ] radio-group
• [ ] scroll-area
• [ ] select
• [ ] separator
• [ ] sheet
• [ ] skeleton
• [ ] slider
• [ ] spinner
• [ ] switch
• [ ] table
• [x] tabs
• [ ] textarea
• [ ] toast
• [ ] toggle
• [ ] tooltip
• [ ] typography

What is the current behavior?

Closes #203

What is the new behavior?

Add hlm-paginated-tab-list component which handles pagination built on top of MatPaginatedTabHeader

Current issues I am facing:

1. Doesn't scroll on initial load to another tab Should find the position of the "Tab 20" and scroll it into view.

2. Scroll position is calculated from tabs trigger, but the extra padding (p-1) on the list interferes with the correct scroll position When scrolling left with the keyboard it scrolls to "Tab 29" but does not consider the extra padding. The next paginator button is also still enabled, but should be disabled when it is at the end. This is when it is scrolled all the way to the end. The next paginator is disabled and the padding around the tab is visible.

Does this PR introduce a breaking change?

• [ ] Yes
• [x] No

Other information

[marcjulian]

@goetzrobin do you have an idea how to handle the extra padding around the tabs? I noticed when I add padding to the material tabs it behaves the same as with the current solution.

Not sure if we need to specify the padding amount to consider while scrolling.

[goetzrobin]

@goetzrobin do you have an idea how to handle the extra padding around the tabs? I noticed when I add padding to the material tabs it behaves the same as with the current solution.

Not sure if we need to specify the padding amount to consider while scrolling.

I think this is a tough one to figure out. I'd say as good as Angular Material is good enough for me. What do you think?

[marcjulian]

Yes think so too, will be tough to figure out the value. I am fine with the current limitation. I can add a note about it to the docs. I will add paginated tabs as a section to the tabs page.

[marcjulian]

@goetzrobin I polished the component styles and update the docs.

[goetzrobin]

Cool that's awesome! Maybe we can make the docs more fun at a later date, but definitely not a blocker! This is great!

[marcjulian]

Good idea to improve the docs. Adding all inputs/outputs of a component could also be helpful.

[goetzrobin]

@marcjulian is this ready to go?

[marcjulian]

@goetzrobin yes is ready to go. I will solve the merge conflicts.