feat(cdk): introduce breakpoint service

[zarghamkhandev]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows Conventional Commits
• 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
• Feature
• Refactoring
• Code style update
• Build or CI related changes
• Documentation content changes

What is the current behavior?

Closes #3336

What is the new behavior?

New service has been introduces which emits corresponding TUI_MEIDA key on media query change.

Does this PR introduce a breaking change?

• Yes
• No

[lumberjack-bot]

Pull request was closed ✔️

All saved screenshots (for current PR) were deleted 🗑️

[bundlemon]

BundleMon

Files updated (3)

Status	Path	Size	Limits
✅	demo/browser/main.(hash).js	339.21KB (+305B +0.09%)	+10%
✅	demo/browser/runtime.(hash).js	36.57KB (+70B +0.19%)	+10%
✅	demo/browser/vendor.(hash).js	204.13KB (+24B +0.01%)	+10%

Unchanged files (2)

Status	Path	Size	Limits
✅	demo/browser/polyfills.(hash).js	19.92KB	+10%
✅	demo/browser/scripts.(hash).js	18.08KB	+10%

Total files change +399B +0.06%

Groups updated (1)

Status	Path	Size	Limits
✅	demo/browser/*..js	2.2MB (+3.46KB +0.15%)	-

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[codecov]

Codecov Report

Patch coverage: 95.65% and project coverage change: +0.03 🎉

Comparison is base (0c55df3) 61.23% compared to head (a315764) 61.27%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3806      +/-   ##
==========================================
+ Coverage   61.23%   61.27%   +0.03%     
==========================================
  Files        1592     1593       +1     
  Lines       18818    18836      +18     
  Branches     2590     2593       +3     
==========================================
+ Hits        11523    11541      +18     
- Misses       6815     6816       +1     
+ Partials      480      479       -1     

Flag	Coverage Δ
addon-charts	72.01% <ø> (ø)
addon-doc	49.65% <ø> (ø)
addon-editor	49.43% <ø> (ø)
addon-mobile	61.73% <ø> (ø)
addon-table	60.21% <ø> (ø)
addon-tablebars	98.11% <ø> (ø)
cdk	40.56% <100.00%> (+0.04%)	⬆️
core	76.87% <93.75%> (+0.08%)	⬆️
kit	72.72% <ø> (ø)
summary	61.27% <95.65%> (+0.03%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
projects/core/tokens/is-mobile-resolution.ts	100.00% <ø> (ø)
projects/core/services/breakpoint.service.ts	93.33% <93.33%> (ø)
...cts/cdk/utils/svg/svg-linear-gradient-processor.ts	85.71% <100.00%> (+10.71%)	⬆️
projects/core/services/index.ts	100.00% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[waterplea]

@zarghamkhandev just a ping to see if you want this to make Monday's release :) All is missing is the demo page.

[zarghamkhandev]

@waterplea I am on it. What I am not able to figure out is, whether I need to create a viewport like UI within the example or ask user to change the actual viewport and just display the current breakpoint. WDYT.

[waterplea]

@waterplea I am on it. What I am not able to figure out is, whether I need to create a viewport like UI within the example or ask user to change the actual viewport and just display the current breakpoint. WDYT.

Just ask to change the actual window size. And place a few DOM elements visible only for particular media configurations through CSS side by side with the same kind of elements hidden with *ngIf and this new service.

[zarghamkhandev]

@waterplea its ready for review

[well-done-bot]