Taiga UI 5

[nsbarsukov]

• Update Angular to 18.x.x
• Switch all dynamic things like formatting, i18n etc from Observables to signals
• Enable built-in support for dark mode in Root with a new WritableSignal<boolean> token
• Normalize TuiPoint as [x: number, y: number] across the app and use it everywhere
• Rename left/right to start/end everywhere for better RTL semantics
• Review animations, some need more params, some are no longer used
• Review portals, maybe we can just show them all in one stack for simplicity in order of their creation
• Toss around utils SEP to move all DI related ones into DI SEP inside CDK
• Fix closeable typo to closable
• 🐞 - Axes labels and their risks do not correlate with vertical lines and chart point #8343 consider this breaking change
• Refactor Stepper to use Cell ?
• Move Surface to layout?
• Refactor Carousel
• Refactor Accordion
• Refactor Pagination.
  We need to break it down to 2 components, dots and number buttons.
• Refactor dialogs
  We need easier way to reuse built-in logic like closeable/dismissible for custom dialogs
• Rename @taiga-ui/icons to @taiga-ui/icons-lucide
  So that in future we can add icons-material, icons-awesome etc.
  What to do with flag icons? What to do with payment system icons?
• Update breakpoints to 0 < mobile < 768 < desktopSmall < 1280 < desktopLarge < ∞
• Use tokens for animations (duration + timing-function) from @taiga-ui/design-tokens/palette/animation.css
• Make Drawer in overlay with top: 0 by default
• Remove usage of "experimentalDecorators": true and rewrite all existing decorators using only modern syntax
• Refactor string | TuiStringHandler<T> for icons to always use functions, consider changing icon dictionaries to functions too
• Remove @angular/animations from peer deps
• Add appearance as host directive to cards
• tuiIsNativeFocused => tuiIsFocused & tuiIsNativeFocusedIn => tuiIsFocusedIn

[KhaledGabr]

Speaking of Carousel, Maybe you could consider integrating with embla-carousel .. I ended up going with it instead of using Taiga's one for my project.

https://www.embla-carousel.com/get-started/

[SkyZeroZx]

I've been reviewing the library lately and it seems great with all the addons and functionalities like aesthetics.
I'm still looking at the code but I still have a doubt if TaigaUI is completely friendly with Angular's SSR, it could be considered as an improvement since several components are going to be refactored which would make it an even better library than it already is.

[waterplea]

In v4 our entire demo portal is prerendered with all the routes — this is how we test that all our components work with SSR, this is done as a pipeline on each PR. If you see a particular issue with SSR — please report it, SSR support is important to us.

[vytautas-pranskunas-]

May I ask why Angular 17? if there is already 19 and by the time of V5 release there will be 20 for sure :)

[waterplea]

https://stackblitz.com/edit/taiga-ui-zoneless

[hakimio]

The last issue was with dialogs. Can the normal dialog created with TuiDialogService from @taiga-ui/core now adapt to mobile screen when running in zoneless mode (it definitely works in zoneful mode)? I really don't want to migrate to another dialog service everywhere just to solve this issue.
Also, the last time I tried, some of the dialog e2e/playwright tests where failing when running in zoneless mode or with zone event coalescing enabled. Do the tests pass now in zoneless mode? Specifically the routed dialog tests.

[waterplea]

I've added the fullscreen normal dialog to the starter and I think it works as expected. We do not yet run tests in zoneless since we're still on Angular 16 but this summer we should upgrade and switching to zoneless for tests sounds like a good idea.

[hakimio]

Can't reproduce the dialog issue in the demo app anymore. The old issue was that the dialog would not change to mobile mode when window is resized or mobile device emulation is enabled.
Will test this out again in my application when migrating to Angular 20.
Thanks for looking into the issues 🙂

[hakimio]

Everything seems to be working correctly in zoneless mode with Angular 20 in my application now too.