feat(carousel): add floating buttons and bounded navigation #528

[intermetric]

Summary by CodeRabbit

• New Features

  • Carousels can now use bounded navigation instead of looping, with slide positions and indicators reflecting reachable stops.
  • Added an option to display navigation buttons over the carousel.

• Improvements

  • Previous and next buttons are disabled when navigation in that direction is unavailable.
  • Navigation, dragging, and scrolling stay within the carousel’s reachable bounds when looping is off.
  • Added a story demonstrating floating navigation buttons.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Repository: TEDI-Design-System/angular/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: e6e299f6-001f-45cd-a53f-682249bb9e0c

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: TEDI-Design-System/angular/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 97989c3b-3c9d-484e-9c4a-0d10d839414b

📥 Commits

Reviewing files that changed from the base of the PR and between 598b1ff and ab47b4d.

📒 Files selected for processing (10)

• src/tedi/components/content/carousel/carousel-content/carousel-content.component.ts
• src/tedi/components/content/carousel/carousel-indicators/carousel-indicators.component.html
• src/tedi/components/content/carousel/carousel-indicators/carousel-indicators.component.ts
• src/tedi/components/content/carousel/carousel-navigation/carousel-navigation.component.html
• src/tedi/components/content/carousel/carousel-navigation/carousel-navigation.component.scss
• src/tedi/components/content/carousel/carousel-navigation/carousel-navigation.component.ts
• src/tedi/components/content/carousel/carousel.component.html
• src/tedi/components/content/carousel/carousel.component.scss
• src/tedi/components/content/carousel/carousel.component.spec.ts
• src/tedi/components/content/carousel/carousel.stories.ts

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The carousel now supports looping and bounded navigation. Position indicators and arrow availability reflect reachable stops. Navigation can render as floating overlay buttons inside the carousel body.

Changes

Carousel behavior and controls

Layer / File(s)	Summary
Loop modes and position model src/tedi/components/content/carousel/carousel-content/carousel-content.component.ts	Adds the loop input, which defaults to true. Computes mode-specific bounds, rendered slide indices, active positions, and navigation availability.
Bounded navigation and movement src/tedi/components/content/carousel/carousel-content/carousel-content.component.ts, src/tedi/components/content/carousel/carousel.component.spec.ts	Bounds navigation, wheel movement, and pointer dragging when looping is disabled. Supports fractional final stops and re-clamps the track when bounds change. Tests cover bounded movement, fractional stops, resizing, and slide changes.
Indicators and navigation presentation src/tedi/components/content/carousel/carousel-indicators/*, src/tedi/components/content/carousel/carousel-navigation/*, src/tedi/components/content/carousel/carousel.component.html, src/tedi/components/content/carousel/carousel.component.scss, src/tedi/components/content/carousel/carousel.stories.ts, src/tedi/components/content/carousel/carousel.component.spec.ts	Indicators use reachable positions, and arrow buttons disable when movement is unavailable. Adds overlay floating buttons inside the carousel body, with a Storybook example and related tests.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  actor User
  participant CarouselNavigationComponent
  participant CarouselContentComponent
  User->>CarouselNavigationComponent: Activate previous or next button
  CarouselNavigationComponent->>CarouselContentComponent: Read canPrev() or canNext()
  CarouselNavigationComponent->>CarouselContentComponent: Invoke prev() or next()

Loading

Merge Risk: ⚪ Minimal · up to ab47b

The carousel changes appear ready to merge after normal checks.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the two primary changes: floating carousel buttons and bounded navigation.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 5…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

♿ Accessibility — ✅ no blocking violations

No accessibility violations in the components changed by this PR.

🔕 Known issues — 19 stories marked todo (warn only)

Stories

• TEDI-Ready/Components/Form/DateField — Open For Visual Test
• TEDI-Ready/Content/Calendar — Availability, Day Statuses, Header Variants, Multiple Selected Dates, No Controls, Range, With Footer, With Weeks Count
• TEDI-Ready/Content/TextGroup — Types
• TEDI-Ready/Layout/Header — Logged In With Sidenav
• TEDI-Ready/Layout/SideNav — Collapsible Toggle, Default, Medium Sidenav Items, Second Level Menu Items, Second Level Menu Items Parents Are Links, Small Sidenav Items, Third Level Menu Items, Third Level Menu Items Parents Are Links

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[github-actions]

🎨 Chromatic

1 visual change(s) to review before merging.

Built from 919b915. Commits pushed after this are not covered; approve again to rebuild.

View the build

[github-actions]

🎨 Chromatic

1 visual change(s) were detected on rc after this pull request merged.

Review and accept them