fix(module:input, input-number, steps): fix styles in components (#7522)

components/input-number/input-number-group-slot.component.ts

@@ -13,6 +13,7 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulati
   template: `
     <i nz-icon [nzType]="icon" *ngIf="icon"></i>
     <ng-container *nzStringTemplateOutlet="template">{{ template }}</ng-container>
+    <ng-content></ng-content>
   `,
   host: {
     '[class.ant-input-number-group-addon]': `type === 'addon'`,

components/input-number/input-number-group.component.ts

@@ -90,12 +90,13 @@ export class NzInputNumberGroupWhitSuffixOrPrefixDirective {
       ></span>
       <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
       <span
-        *ngIf="nzSuffix || nzSuffixIcon"
+        *ngIf="nzSuffix || nzSuffixIcon || isFeedback"
         nz-input-number-group-slot
         type="suffix"
         [icon]="nzSuffixIcon"
         [template]="nzSuffix"
       >
+        <nz-form-item-feedback-icon *ngIf="isFeedback" [status]="status"></nz-form-item-feedback-icon>
       </span>
     </ng-template>
     <ng-template #contentTemplate>
@@ -146,7 +147,7 @@ export class NzInputNumberGroupComponent implements AfterContentInit, OnChanges,
   affixStatusCls: NgClassInterface = {};
   groupStatusCls: NgClassInterface = {};
   affixInGroupStatusCls: NgClassInterface = {};
-
+  status: NzValidateStatus = '';
   hasFeedback: boolean = false;
   private destroy$ = new Subject<void>();
 
@@ -247,6 +248,8 @@ export class NzInputNumberGroupComponent implements AfterContentInit, OnChanges,
   }
 
   private setStatusStyles(status: NzValidateStatus, hasFeedback: boolean): void {
+    // set inner status
+    this.status = status;
     this.hasFeedback = hasFeedback;
     this.isFeedback = !!status && hasFeedback;
     const baseAffix = !!(this.nzSuffix || this.nzPrefix || this.nzPrefixIcon || this.nzSuffixIcon);

components/input-number/input-number.component.ts

@@ -14,6 +14,7 @@ import {
   ElementRef,
   EventEmitter,
   forwardRef,
+  Host,
   Input,
   NgZone,
   OnChanges,
@@ -43,6 +44,8 @@ import {
 } from 'ng-zorro-antd/core/types';
 import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/util';
 
+import { NzInputNumberGroupComponent } from './input-number-group.component';
+
 @Component({
   selector: 'nz-input-number',
   exportAs: 'nzInputNumber',
@@ -87,7 +90,7 @@ import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/
     </div>
     <nz-form-item-feedback-icon
       class="ant-input-number-suffix"
-      *ngIf="hasFeedback && !!status"
+      *ngIf="hasFeedback && !!status && !nzInputNumberGroupComponent?.isFeedback"
       [status]="status"
     ></nz-form-item-feedback-icon>
   `,
@@ -403,6 +406,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
     private renderer: Renderer2,
     @Optional() private directionality: Directionality,
     private destroy$: NzDestroyService,
+    @Host() @Optional() public nzInputNumberGroupComponent?: NzInputNumberGroupComponent,
     @Optional() public nzFormStatusService?: NzFormStatusService
   ) {}
 

components/input/input-group-slot.component.ts

@@ -13,6 +13,7 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulati
   template: `
     <i nz-icon [nzType]="icon" *ngIf="icon"></i>
     <ng-container *nzStringTemplateOutlet="template">{{ template }}</ng-container>
+    <ng-content></ng-content>
   `,
   host: {
     '[class.ant-input-group-addon]': `type === 'addon'`,

components/input/input-group.component.ts

@@ -90,12 +90,13 @@ export class NzInputGroupWhitSuffixOrPrefixDirective {
       ></span>
       <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
       <span
-        *ngIf="nzSuffix || nzSuffixIcon"
+        *ngIf="nzSuffix || nzSuffixIcon || isFeedback"
         nz-input-group-slot
         type="suffix"
         [icon]="nzSuffixIcon"
         [template]="nzSuffix"
       >
+        <nz-form-item-feedback-icon *ngIf="isFeedback" [status]="status"></nz-form-item-feedback-icon>
       </span>
     </ng-template>
     <ng-template #contentTemplate>
@@ -155,6 +156,7 @@ export class NzInputGroupComponent implements AfterContentInit, OnChanges, OnIni
   affixStatusCls: NgClassInterface = {};
   groupStatusCls: NgClassInterface = {};
   affixInGroupStatusCls: NgClassInterface = {};
+  status: NzValidateStatus = '';
   hasFeedback: boolean = false;
   private destroy$ = new Subject<void>();
 
@@ -251,6 +253,8 @@ export class NzInputGroupComponent implements AfterContentInit, OnChanges, OnIni
   }
 
   private setStatusStyles(status: NzValidateStatus, hasFeedback: boolean): void {
+    // set inner status
+    this.status = status;
     this.hasFeedback = hasFeedback;
     this.isFeedback = !!status && hasFeedback;
     const baseAffix = !!(this.nzSuffix || this.nzPrefix || this.nzPrefixIcon || this.nzSuffixIcon);

components/input/input.directive.ts

@@ -8,6 +8,7 @@ import {
   ComponentRef,
   Directive,
   ElementRef,
+  Host,
   Input,
   OnChanges,
   OnDestroy,
@@ -26,6 +27,8 @@ import { NzFormItemFeedbackIconComponent, NzFormStatusService } from 'ng-zorro-a
 import { BooleanInput, NgClassInterface, NzSizeLDSType, NzStatus, NzValidateStatus } from 'ng-zorro-antd/core/types';
 import { getStatusClassNames, InputBoolean } from 'ng-zorro-antd/core/util';
 
+import { NzInputGroupComponent } from './input-group.component';
+
 @Directive({
   selector: 'input[nz-input],textarea[nz-input]',
   exportAs: 'nzInput',
@@ -72,6 +75,7 @@ export class NzInputDirective implements OnChanges, OnInit, OnDestroy {
     private elementRef: ElementRef,
     protected hostView: ViewContainerRef,
     @Optional() private directionality: Directionality,
+    @Host() @Optional() private nzInputGroupComponent?: NzInputGroupComponent,
     @Optional() private nzFormStatusService?: NzFormStatusService
   ) {
     renderer.addClass(elementRef.nativeElement, 'ant-input');
@@ -138,7 +142,7 @@ export class NzInputDirective implements OnChanges, OnInit, OnDestroy {
   }
 
   private renderFeedbackIcon(): void {
-    if (!this.status || !this.hasFeedback) {
+    if (!this.status || !this.hasFeedback || this.nzInputGroupComponent?.isFeedback) {
       // remove feedback
       this.hostView.clear();
       this.feedbackRef = null;

components/input/style/patch.less

@@ -26,7 +26,11 @@ textarea.nz-textarea-autosize-measuring {
   }
 }
 
-.@{ant-prefix}-input {
+.ant-input-affix-wrapper-textarea-with-clear-btn .ant-input-suffix {
+  margin-left: 0;
+}
+
+nz-form-item-feedback-icon.@{ant-prefix}-input {
   &-suffix {
     display: flex;
     flex: none;
@@ -40,11 +44,16 @@ textarea.nz-textarea-autosize-measuring {
     right: 0;
     z-index: 1;
     height: 100%;
-    margin-right: @input-padding-horizontal-base;
+    margin-right: @padding-sm;
     margin-left: @input-affix-margin;
   }
+}
 
-  &&-has-feedback {
-    padding-right: @padding-lg;
+.@{ant-prefix}-input {
+  &-status-error, &-status-warning, &-status-validating, &-status-success {
+    &.@{ant-prefix}-input-has-feedback {
+      padding-right: @padding-lg + @padding-xss;
+    }
   }
-}
+}
+

components/progress/progress.component.ts

@@ -75,6 +75,7 @@ const defaultFormatter: NzProgressFormatter = (p: number): string => `${p}%`;
       [ngClass]="'ant-progress ant-progress-status-' + status"
       [class.ant-progress-line]="nzType === 'line'"
       [class.ant-progress-small]="nzSize === 'small'"
+      [class.ant-progress-default]="nzSize === 'default'"
       [class.ant-progress-show-info]="nzShowInfo"
       [class.ant-progress-circle]="isCircleStyle"
       [class.ant-progress-steps]="isSteps"

components/steps/step.component.ts

@@ -19,7 +19,7 @@ import { fromEvent, Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
 import { NzDestroyService } from 'ng-zorro-antd/core/services';
-import { BooleanInput, NgClassType } from 'ng-zorro-antd/core/types';
+import { BooleanInput, NgClassType, NzSizeDSType } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 import { NzProgressFormatter } from 'ng-zorro-antd/progress';
 
@@ -43,7 +43,7 @@ import { NzProgressFormatter } from 'ng-zorro-antd/progress';
             <nz-progress
               [nzPercent]="nzPercentage"
               nzType="circle"
-              [nzWidth]="40"
+              [nzWidth]="nzSize === 'small' ? 32 : 40"
               [nzFormat]="nullProcessFormat"
               [nzStrokeWidth]="4"
             ></nz-progress>
@@ -112,6 +112,7 @@ export class NzStepComponent implements OnInit {
   @Input() nzDescription?: string | TemplateRef<void>;
   @Input() @InputBoolean() nzDisabled = false;
   @Input() nzPercentage: number | null = null;
+  @Input() nzSize: NzSizeDSType = 'default';
 
   @Input()
   get nzStatus(): string {

components/steps/steps.component.ts

@@ -10,7 +10,6 @@ import {
   ChangeDetectorRef,
   Component,
   ContentChildren,
-  ElementRef,
   EventEmitter,
   Input,
   NgZone,
@@ -19,7 +18,6 @@ import {
   Optional,
   Output,
   QueryList,
-  Renderer2,
   SimpleChanges,
   TemplateRef,
   ViewEncapsulation
@@ -79,14 +77,13 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit {
   private indexChangeSubscription = Subscription.EMPTY;
 
   showProcessDot = false;
+  showProgress = false;
   customProcessDotTemplate?: TemplateRef<{ $implicit: TemplateRef<void>; status: string; index: number }>;
   classMap: NgClassType = {};
   dir: Direction = 'ltr';
 
   constructor(
     private ngZone: NgZone,
-    private elementRef: ElementRef,
-    private renderer: Renderer2,
     private cdr: ChangeDetectorRef,
     @Optional() private directionality: Directionality,
     private destroy$: NzDestroyService
@@ -95,7 +92,7 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.nzStartIndex || changes.nzDirection || changes.nzStatus || changes.nzCurrent) {
+    if (changes.nzStartIndex || changes.nzDirection || changes.nzStatus || changes.nzCurrent || changes.nzSize) {
       this.updateChildrenSteps();
     }
     if (changes.nzDirection || changes.nzProgressDot || changes.nzLabelPlacement || changes.nzSize) {
@@ -126,14 +123,8 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit {
 
   private updateHostProgressClass(): void {
     if (this.steps && !this.showProcessDot) {
-      const hasPercent = !!this.steps.toArray().find(step => step.nzPercentage !== null);
-      const className = 'ant-steps-with-progress';
-      const hasClass = this.elementRef.nativeElement.classList.contains(className);
-      if (hasPercent && !hasClass) {
-        this.renderer.addClass(this.elementRef.nativeElement, className);
-      } else if (!hasPercent && hasClass) {
-        this.renderer.removeClass(this.elementRef.nativeElement, className);
-      }
+      this.showProgress = !!this.steps.toArray().find(step => step.nzPercentage !== null);
+      this.setClassMap();
     }
   }
 
@@ -142,6 +133,7 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit {
       const length = this.steps.length;
       this.steps.toArray().forEach((step, index) => {
         Promise.resolve().then(() => {
+          step.nzSize = this.nzSize;
           step.outStatus = this.nzStatus;
           step.showProcessDot = this.showProcessDot;
           if (this.customProcessDotTemplate) {
@@ -175,7 +167,8 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit {
       [`ant-steps-dot`]: this.showProcessDot,
       ['ant-steps-small']: this.nzSize === 'small',
       ['ant-steps-navigation']: this.nzType === 'navigation',
-      ['ant-steps-rtl']: this.dir === 'rtl'
+      ['ant-steps-rtl']: this.dir === 'rtl',
+      ['ant-steps-with-progress']: this.showProgress
     };
   }
 }