feat(experimental): add padding when use nested colored icons inTuiAvatar ng-content

[mdlufy]

Closes #

[lumberjack-bot]

Pull request was closed ✔️

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

[github-actions]

Visit the preview URL for this PR (updated for commit 47be95d):

https://taiga-ui--pr7534-mdlufy-avatar-ueu49f55.web.app

_{(expires Sat, 25 May 2024 15:31:26 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 4b5ece1e114386f6a105425ef799091475b249eb}

[bundlemon]

BundleMon

Files added (5)

Status	Path	Size	Limits
✅	demo/browser/main.(hash).js	+391.89KB	+10%
✅	demo/browser/vendor.(hash).js	+214.57KB	+10%
✅	demo/browser/runtime.(hash).js	+41.31KB	+10%
✅	demo/browser/polyfills.(hash).js	+11.25KB	+10%
✅	demo/browser/styles.(hash).css	+1.39KB	+10%

Total files change +660.42KB

Groups added (1)

Status	Path	Size	Limits
✅	demo/browser/*..js	+2.4MB	-

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history

[sweep-ai]

Sweep: PR Review

Authors of pull request: @mdlufy

projects/experimental/components/avatar/avatar.component.ts

Added AfterViewInit lifecycle hook to TuiAvatarComponent to manipulate DOM elements and styles post-view initialization.

Sweep Found These Issues

• The ngAfterViewInit method assumes that the first child element is always present, which could lead to a null reference error if the element is not found.

taiga-ui/projects/experimental/components/avatar/avatar.component.ts

Lines 51 to 61 in 9397bdc

	ngAfterViewInit(): void {
	const firstChild = (this.elementRef.nativeElement as HTMLElement)
	.firstElementChild;
	if (
	firstChild?.tagName === 'IMG' &&
	this.tuiIconPipeUsed((firstChild as HTMLImageElement).src)
	) {
	this.renderer.setStyle(firstChild, 'padding', '20%');
	}
	}


View Diff
• Sweep has identified a redundant function: The new function's functionality can be integrated into the existing ngAfterViewInit method of TuiAvatarComponent, making the new function redundant.

taiga-ui/projects/experimental/components/avatar/avatar.component.ts

Lines 51 to 60 in 9397bdc

	ngAfterViewInit(): void {
	const firstChild = (this.elementRef.nativeElement as HTMLElement)
	.firstElementChild;
	if (
	firstChild?.tagName === 'IMG' &&
	this.tuiIconPipeUsed((firstChild as HTMLImageElement).src)
	) {
	this.renderer.setStyle(firstChild, 'padding', '20%');
	}


View Diff

---

projects/experimental/components/avatar/avatar.style.less

Added box-sizing: border-box; to ::ng-deep img, ::ng-deep picture, and ::ng-deep video selectors to ensure consistent element sizing.

---

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Please upload report for BASE (v3.x@0646624). Learn more about missing BASE report.

❗ Current head 9397bdc differs from pull request most recent head 47be95d

Please upload reports for the commit 47be95d to get more accurate results.

Additional details and impacted files

@@           Coverage Diff           @@
##             v3.x    #7534   +/-   ##
=======================================
  Coverage        ?   71.56%           
=======================================
  Files           ?     1465           
  Lines           ?    16202           
  Branches        ?     2335           
=======================================
  Hits            ?    11595           
  Misses          ?     4226           
  Partials        ?      381           

Flag	Coverage Δ
addon-charts	71.35% <ø> (?)
addon-doc	60.58% <ø> (?)
addon-mobile	56.97% <ø> (?)
addon-table	60.33% <ø> (?)
addon-tablebars	96.15% <ø> (?)
cdk	78.47% <ø> (?)
core	77.62% <ø> (?)
kit	70.28% <ø> (?)
summary	71.56% <ø> (?)

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

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.