From 9397bdc3f0f9fa0d901fd0a6e98ad5e1e12a1f98 Mon Sep 17 00:00:00 2001
From: mdlufy <german.panov.2018@mail.ru>
Date: Thu, 23 May 2024 16:35:28 +0300
Subject: [PATCH] feat(experimental): add padding when use img inside
 `tui-avatar`

---
 .../components/avatar/avatar.component.ts     | 31 +++++++++++++++++--
 .../components/avatar/avatar.style.less       |  1 +
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/projects/experimental/components/avatar/avatar.component.ts b/projects/experimental/components/avatar/avatar.component.ts
index baf37e6fedabb..dbec4b77846f1 100644
--- a/projects/experimental/components/avatar/avatar.component.ts
+++ b/projects/experimental/components/avatar/avatar.component.ts
@@ -1,4 +1,12 @@
-import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    Inject,
+    Input,
+    Renderer2,
+} from '@angular/core';
 import {SafeResourceUrl} from '@angular/platform-browser';
 import {tuiIsString, TuiStringHandler} from '@taiga-ui/cdk';
 import {TUI_ICON_RESOLVER} from '@taiga-ui/experimental/tokens';
@@ -19,7 +27,7 @@ import {TUI_AVATAR_OPTIONS, TuiAvatarOptions} from './avatar.options';
         '[class._round]': 'round',
     },
 })
-export class TuiAvatarComponent {
+export class TuiAvatarComponent implements AfterViewInit {
     @Input()
     size = this.options.size;
 
@@ -35,8 +43,23 @@ export class TuiAvatarComponent {
     constructor(
         @Inject(TUI_AVATAR_OPTIONS) private readonly options: TuiAvatarOptions,
         @Inject(TUI_ICON_RESOLVER) readonly resolver: TuiStringHandler<string>,
+        @Inject(ElementRef)
+        private readonly elementRef: ElementRef,
+        @Inject(Renderer2) private readonly renderer: Renderer2,
     ) {}
 
+    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%');
+        }
+    }
+
     get safeSrc(): string {
         return this.src?.toString() ?? '';
     }
@@ -60,4 +83,8 @@ export class TuiAvatarComponent {
 
         return this.value.length ? 'img' : 'content';
     }
+
+    tuiIconPipeUsed(src: string): boolean {
+        return src.includes('/assets/taiga-ui/icons');
+    }
 }
diff --git a/projects/experimental/components/avatar/avatar.style.less b/projects/experimental/components/avatar/avatar.style.less
index c696bcd780e8f..5f3a0eb1f41b2 100644
--- a/projects/experimental/components/avatar/avatar.style.less
+++ b/projects/experimental/components/avatar/avatar.style.less
@@ -120,5 +120,6 @@
     ::ng-deep video {
         .fullsize();
         object-fit: cover;
+        box-sizing: border-box;
     }
 }