feat(module:avatar): add nzSrcSet & nzAlt properites (#3583)

* feat(module:avatar): add nzSrcSet & nzAlt properites
- support custom unit in image avatar, close #3543

* chore: add docs

components/avatar/avatar.spec.ts

@@ -55,6 +55,18 @@ describe('avatar', () => {
       expect(getType(dl)).toBe('image');
       tick();
     }));
+    it('#nzSrcSet', () => {
+      context.nzSrcSet = '1.png';
+      fixture.detectChanges();
+      const el = dl.query(By.css(`img`)).nativeElement as HTMLImageElement;
+      expect(el.srcset).toBe(context.nzSrcSet);
+    });
+    it('#nzAlt', () => {
+      context.nzAlt = 'alt';
+      fixture.detectChanges();
+      const el = dl.query(By.css(`img`)).nativeElement as HTMLImageElement;
+      expect(el.alt).toBe(context.nzAlt);
+    });
   });
 
   it('#nzIcon', () => {
@@ -126,7 +138,24 @@ describe('avatar', () => {
 
       context.nzIcon = 'user';
       fixture.detectChanges();
-      expect(hostStyle.fontSize === `${context.nzSize / 2}px`).toBe(true);
+      expect(hostStyle.fontSize === `calc(${context.nzSize / 2}px)`).toBe(true);
+    });
+
+    it('should be custom unit size', () => {
+      const size = `8vw`;
+      context.nzSize = size;
+      context.nzIcon = null;
+      context.nzSrc = null;
+      fixture.detectChanges();
+      const hostStyle = dl.nativeElement.querySelector('nz-avatar').style;
+      expect(hostStyle.height === size).toBe(true);
+      expect(hostStyle.width === size).toBe(true);
+      expect(hostStyle.lineHeight === size).toBe(true);
+      expect(hostStyle.fontSize === ``).toBe(true);
+
+      context.nzIcon = 'user';
+      fixture.detectChanges();
+      expect(hostStyle.fontSize === `calc(4vw)`).toBe(true);
     });
   });
 
@@ -172,6 +201,8 @@ describe('avatar', () => {
       [nzIcon]="nzIcon"
       [nzText]="nzText"
       [nzSrc]="nzSrc"
+      [nzSrcSet]="nzSrcSet"
+      [nzAlt]="nzAlt"
     ></nz-avatar>
   `,
   styleUrls: ['./style/index.less']
@@ -185,4 +216,6 @@ class TestAvatarComponent {
   nzSrc:
     | string
     | null = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==`;
+  nzSrcSet: string;
+  nzAlt: string;
 }

components/avatar/doc/index.en-US.md

@@ -24,4 +24,6 @@ import { NzAvatarModule } from 'ng-zorro-antd';
 | `[nzShape]` | the shape of avatar | `'circle'｜'square'` | `'circle'` |
 | `[nzSize]` | the size of the avatar | `'large'｜'small'｜'default'｜number` | `'default'` |
 | `[nzSrc]` | the address of the image for an image avatar | `string` | - |
+| `[nzSrcSet]` | a list of sources to use for different screen resolutions | string | - |
+| `[nzAlt]` | This attribute defines the alternative text describing the image | string | - |
 | `[nzText]` | letter type avatar | `string` | - |

components/avatar/doc/index.zh-CN.md

@@ -25,4 +25,6 @@ import { NzAvatarModule } from 'ng-zorro-antd';
 | `[nzShape]` | 指定头像的形状 | `'circle'｜'square'` | `'circle'` |
 | `[nzSize]` | 设置头像的大小 | `'large'｜'small'｜'default'｜number` | `'default'` |
 | `[nzSrc]` | 图片类头像的资源地址 | `string` | - |
+| `[nzSrcSet]` | 设置图片类头像响应式资源地址 | string | - |
+| `[nzAlt]` | 图像无法显示时的替代文本 | string | - |
 | `[nzText]` | 文本类头像 | `string` | - |

components/avatar/nz-avatar.component.html

@@ -1,3 +1,3 @@
 <i nz-icon *ngIf="nzIcon && hasIcon" [type]="!oldAPIIcon && nzIcon" [ngClass]="oldAPIIcon && nzIcon"></i>
-<img [src]="nzSrc" *ngIf="nzSrc && hasSrc" (error)="imgError()"/>
+<img *ngIf="nzSrc && hasSrc" [src]="nzSrc" [attr.srcset]="nzSrcSet" [attr.alt]="nzAlt" (error)="imgError()"/>
 <span class="ant-avatar-string" #textEl [ngStyle]="textStyles" *ngIf="nzText && hasText">{{ nzText }}</span>

components/avatar/nz-avatar.component.ts

@@ -43,6 +43,8 @@ export class NzAvatarComponent implements OnChanges {
   @Input() nzSize: NzAvatarSize = 'default';
   @Input() nzText: string;
   @Input() nzSrc: string;
+  @Input() nzSrcSet: string;
+  @Input() nzAlt: string;
   @Input() nzIcon: string;
 
   oldAPIIcon = true; // Make the user defined icon compatible to old API. Should be removed in 2.0.
@@ -133,14 +135,12 @@ export class NzAvatarComponent implements OnChanges {
   }
 
   private setSizeStyle(): void {
-    if (typeof this.nzSize === 'string') {
-      return;
-    }
-    this.renderer.setStyle(this.el, 'width', `${this.nzSize}px`);
-    this.renderer.setStyle(this.el, 'height', `${this.nzSize}px`);
-    this.renderer.setStyle(this.el, 'line-height', `${this.nzSize}px`);
+    const size = typeof this.nzSize === 'string' ? this.nzSize : `${this.nzSize}px`;
+    this.renderer.setStyle(this.el, 'width', size);
+    this.renderer.setStyle(this.el, 'height', size);
+    this.renderer.setStyle(this.el, 'line-height', size);
     if (this.hasIcon) {
-      this.renderer.setStyle(this.el, 'font-size', `${this.nzSize / 2}px`);
+      this.renderer.setStyle(this.el, 'font-size', `calc(${size} / 2)`);
     }
   }
 }