feat(module:slider): add nzReverse property (#4940)

close #4937

components/slider/demo/reverse.md

@@ -0,0 +1,15 @@
+---
+order: 8
+title:
+  zh-CN: 反向
+  en-US: Reverse
+---
+
+## zh-CN
+
+设置 `nzReverse` 可以将滑动条置反。
+
+## en-US
+
+Using `nzReverse` to render slider reversely.
+

components/slider/demo/reverse.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-slider-reverse',
+  template: `
+    <div>
+      <nz-slider [ngModel]="30" [nzReverse]="reverse"></nz-slider>
+      <nz-slider nzRange [ngModel]="[20, 50]" [nzReverse]="reverse"></nz-slider>
+      Reversed: <nz-switch nzSize="small" [(ngModel)]="reverse"></nz-switch>
+    </div>
+  `,
+  styles: [
+    `
+      h4 {
+        margin: 0 0 16px;
+      }
+
+      .ant-slider-with-marks {
+        margin-bottom: 44px;
+      }
+    `
+  ]
+})
+export class NzDemoSliderReverseComponent {
+  reverse = true;
+}

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

@@ -31,6 +31,7 @@ import { NzSliderModule } from 'ng-zorro-antd/slider';
 | `[nzTipFormatter]` | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | `(value: number) => string` | - |
 | `[ngModel]` | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | `number \| number[]` | - |
 | `[nzVertical]` | If true, the slider will be vertical. | `boolean` | `false` |
+| `[nzReverse]` | Reverse the component | `boolean` | `false` |
 | `[nzTooltipVisible]` | When set to `always` tooltips are always displayed. When set to `never` they are never displayed | `'default' \| 'always' \| 'never'` | `default` |
 | `[nzTooltipPlacement]` | Set the default placement of Tooltip | `string` | |
 | `(nzOnAfterChange)` | Fire when `onmouseup` is fired. | `EventEmitter<number[]  \|  number>` | - |

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

@@ -32,6 +32,7 @@ import { NzSliderModule } from 'ng-zorro-antd/slider';
 | `[nzTipFormatter]` | Slider 会把当前值传给 `nzTipFormatter`，并在 Tooltip 中显示 `nzTipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | `(value: number) => string` | - |
 | `[ngModel]` | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | `number \| number[]` | - |
 | `[nzVertical]` | 值为 `true` 时，Slider 为垂直方向 | `boolean` | `false` |
+| `[nzReverse]` | 反向坐标轴 | `boolean` | `false` |
 | `[nzTooltipVisible]` | 值为 `always` 时总是显示，值为 `never` 时在任何情况下都不显示 | `'default' \| 'always' \| 'never'` | `default` |
 | `[nzTooltipPlacement]` | 设置 Tooltip 的默认位置。 | `string` | |
 | `(nzOnAfterChange)` | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | `EventEmitter<number[]  \|  number>` | - |

components/slider/handle.component.ts

@@ -54,6 +54,7 @@ export class NzSliderHandleComponent implements OnChanges {
   @ViewChild(NzTooltipDirective, { static: false }) tooltip?: NzTooltipDirective;
 
   @Input() vertical?: boolean;
+  @Input() reverse?: boolean;
   @Input() offset?: number;
   @Input() value?: number;
   @Input() tooltipVisible: NzSliderShowTooltip = 'default';
@@ -67,9 +68,9 @@ export class NzSliderHandleComponent implements OnChanges {
   constructor(private sliderService: NzSliderService, private cdr: ChangeDetectorRef) {}
 
   ngOnChanges(changes: SimpleChanges): void {
-    const { offset, value, active, tooltipVisible } = changes;
+    const { offset, value, active, tooltipVisible, reverse } = changes;
 
-    if (offset) {
+    if (offset || reverse) {
       this.updateStyle();
     }
 
@@ -133,10 +134,23 @@ export class NzSliderHandleComponent implements OnChanges {
   }
 
   private updateStyle(): void {
-    this.style = {
-      [this.vertical ? 'bottom' : 'left']: `${this.offset}%`,
-      transform: this.vertical ? 'translateY(50%)' : 'translateX(-50%)'
-    };
+    const vertical = this.vertical;
+    const reverse = this.reverse;
+    const offset = this.offset;
+
+    const positionStyle = vertical
+      ? {
+          [reverse ? 'top' : 'bottom']: `${offset}%`,
+          [reverse ? 'bottom' : 'top']: 'auto',
+          transform: reverse ? null : `translateY(+50%)`
+        }
+      : {
+          [reverse ? 'right' : 'left']: `${offset}%`,
+          [reverse ? 'left' : 'right']: 'auto',
+          transform: `translateX(${reverse ? '+' : '-'}50%)`
+        };
+
+    this.style = positionStyle;
     this.cdr.markForCheck();
   }
 }

components/slider/slider.component.ts

@@ -73,7 +73,13 @@ import { NzExtendedMark, NzMarks, NzSliderHandler, NzSliderShowTooltip, NzSlider
       [class.ant-slider-with-marks]="marksArray"
     >
       <div class="ant-slider-rail"></div>
-      <nz-slider-track [vertical]="nzVertical" [included]="nzIncluded" [offset]="track.offset!" [length]="track.length!"></nz-slider-track>
+      <nz-slider-track
+        [vertical]="nzVertical"
+        [included]="nzIncluded"
+        [offset]="track.offset!"
+        [length]="track.length!"
+        [reverse]="nzReverse"
+      ></nz-slider-track>
       <nz-slider-step
         *ngIf="marksArray"
         [vertical]="nzVertical"
@@ -85,6 +91,7 @@ import { NzExtendedMark, NzMarks, NzSliderHandler, NzSliderShowTooltip, NzSlider
       <nz-slider-handle
         *ngFor="let handle of handles"
         [vertical]="nzVertical"
+        [reverse]="nzReverse"
         [offset]="handle.offset!"
         [value]="handle.value!"
         [active]="handle.active"
@@ -114,6 +121,7 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange
   static ngAcceptInputType_nzMax: NumberInput;
   static ngAcceptInputType_nzMin: NumberInput;
   static ngAcceptInputType_nzStep: NumberInput;
+  static ngAcceptInputType_nzReverse: BooleanInput;
 
   @ViewChild('slider', { static: true }) slider!: ElementRef<HTMLDivElement>;
   @ViewChildren(NzSliderHandleComponent) handlerComponents!: QueryList<NzSliderHandleComponent>;
@@ -123,6 +131,7 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange
   @Input() @InputBoolean() nzIncluded: boolean = true;
   @Input() @InputBoolean() nzRange: boolean = false;
   @Input() @InputBoolean() nzVertical: boolean = false;
+  @Input() @InputBoolean() nzReverse: boolean = false;
   @Input() nzDefaultValue?: NzSliderValue;
   @Input() nzMarks: NzMarks | null = null;
   @Input() @InputNumber() nzMax = 100;
@@ -214,7 +223,7 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange
 
     e.preventDefault();
 
-    const step = isDecrease ? -this.nzStep : this.nzStep;
+    const step = (isDecrease ? -this.nzStep : this.nzStep) * (this.nzReverse ? -1 : 1);
     const newVal = this.nzRange ? (this.value as number[])[this.activeValueIndex!] + step : (this.value as number) + step;
     this.setActiveValue(ensureNumberInRange(newVal, this.nzMin, this.nzMax));
   }
@@ -308,16 +317,20 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange
   private onDragStart(value: number): void {
     this.toggleDragMoving(true);
     this.cacheSliderProperty();
-    this.setActiveValueIndex(value);
-    this.setActiveValue(value);
+    this.setActiveValueIndex(this.getLogicalValue(value));
+    this.setActiveValue(this.getLogicalValue(value));
     this.showHandleTooltip(this.nzRange ? this.activeValueIndex : 0);
   }
 
   private onDragMove(value: number): void {
-    this.setActiveValue(value);
+    this.setActiveValue(this.getLogicalValue(value));
     this.cdr.markForCheck();
   }
 
+  private getLogicalValue(value: number): number {
+    return this.nzReverse ? this.nzMax - value : value;
+  }
+
   private onDragEnd(): void {
     this.nzOnAfterChange.emit(this.getValue(true));
     this.toggleDragMoving(false);

components/slider/slider.spec.ts

@@ -1,10 +1,11 @@
-import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
+import { DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, DebugElement, OnInit } from '@angular/core';
 import { ComponentFixture, fakeAsync, inject, tick } from '@angular/core/testing';
 import { AbstractControl, FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { NzSafeAny } from 'ng-zorro-antd';
 
 import { dispatchKeyboardEvent, dispatchMouseEvent } from 'ng-zorro-antd/core/testing';
 import { ComponentBed, createComponentBed } from 'ng-zorro-antd/core/testing/componet-bed';
@@ -19,8 +20,7 @@ describe('nz-slider', () => {
   let sliderInstance: NzSliderComponent;
   let overlayContainerElement: HTMLElement;
 
-  // tslint:disable-next-line:no-any
-  function getReferenceFromFixture(fixture: ComponentFixture<any>): void {
+  function getReferenceFromFixture(fixture: ComponentFixture<NzSafeAny>): void {
     sliderDebugElement = fixture.debugElement.query(By.directive(NzSliderComponent));
     sliderInstance = sliderDebugElement.componentInstance;
     sliderNativeElement = sliderInstance.slider.nativeElement;
@@ -491,6 +491,49 @@ describe('nz-slider', () => {
     });
   });
 
+  describe('reverse', () => {
+    let testBed: ComponentBed<ReverseSliderComponent>;
+    let fixture: ComponentFixture<ReverseSliderComponent>;
+    let sliderDebugElements: DebugElement[];
+
+    beforeEach(() => {
+      testBed = createComponentBed(ReverseSliderComponent, {
+        imports: [NzSliderModule, FormsModule, ReactiveFormsModule, NoopAnimationsModule]
+      });
+      fixture = testBed.fixture;
+      fixture.detectChanges();
+
+      sliderDebugElements = fixture.debugElement.queryAll(By.directive(NzSliderComponent));
+    });
+
+    it('should reverse work', () => {
+      const trackElement = (sliderDebugElements[0].nativeElement as HTMLElement).querySelector('.ant-slider-track') as HTMLElement;
+      expect(trackElement.style.right).toBe('0%');
+
+      const rangeTrackElement = (sliderDebugElements[1].nativeElement as HTMLElement).querySelector('.ant-slider-track') as HTMLElement;
+      expect(trackElement.style.right).toBe('0%');
+      expect(rangeTrackElement.style.width).toBe('100%');
+
+      const verticalTrackElement = (sliderDebugElements[2].nativeElement as HTMLElement).querySelector('.ant-slider-track') as HTMLElement;
+      expect(verticalTrackElement.style.top).toBe('0%');
+    });
+
+    it('should respond to keyboard event reversely', () => {
+      getReferenceFromFixture(fixture);
+
+      dispatchKeyboardEvent(sliderNativeElement, 'keydown', LEFT_ARROW);
+      dispatchKeyboardEvent(sliderNativeElement, 'keydown', RIGHT_ARROW);
+      dispatchKeyboardEvent(sliderNativeElement, 'keydown', DOWN_ARROW);
+      dispatchKeyboardEvent(sliderNativeElement, 'keydown', UP_ARROW);
+      dispatchKeyboardEvent(sliderNativeElement, 'keydown', LEFT_ARROW);
+
+      fixture.detectChanges();
+
+      const trackElement = (sliderDebugElements[0].nativeElement as HTMLElement).querySelector('.ant-slider-track') as HTMLElement;
+      expect(trackElement.style.width).toBe('1%');
+    });
+  });
+
   describe('mixed usage', () => {
     let testBed: ComponentBed<MixedSliderComponent>;
     let fixture: ComponentFixture<MixedSliderComponent>;
@@ -790,6 +833,15 @@ class SliderWithValueGreaterThanMaxComponent {}
 })
 class VerticalSliderComponent {}
 
+@Component({
+  template: `
+    <nz-slider nzReverse></nz-slider>
+    <nz-slider nzReverse nzRange></nz-slider>
+    <nz-slider nzVertical nzReverse></nz-slider>
+  `
+})
+class ReverseSliderComponent {}
+
 @Component({
   template: `
     <nz-slider

components/slider/track.component.ts

@@ -6,9 +6,8 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, ViewEncapsulation } from '@angular/core';
 import { BooleanInput, NumberInput } from 'ng-zorro-antd/core/types';
-
 import { InputBoolean, InputNumber } from 'ng-zorro-antd/core/util';
 
 export interface NzSliderTrackStyle {
@@ -32,30 +31,37 @@ export class NzSliderTrackComponent implements OnChanges {
   static ngAcceptInputType_length: NumberInput;
   static ngAcceptInputType_vertical: BooleanInput;
   static ngAcceptInputType_included: BooleanInput;
+  static ngAcceptInputType_reverse: BooleanInput;
 
   @Input() @InputNumber() offset: number = 0;
+  @Input() @InputBoolean() reverse: boolean = false;
   @Input() @InputNumber() length: number = 0;
   @Input() @InputBoolean() vertical = false;
   @Input() @InputBoolean() included = false;
 
   style: NzSliderTrackStyle = {};
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.included) {
-      this.style.visibility = this.included ? 'visible' : 'hidden';
-    }
-    if (changes.vertical || changes.offset || changes.length) {
-      if (this.vertical) {
-        this.style.bottom = `${this.offset}%`;
-        this.style.height = `${this.length}%`;
-        this.style.left = null;
-        this.style.width = null;
-      } else {
-        this.style.left = `${this.offset}%`;
-        this.style.width = `${this.length}%`;
-        this.style.bottom = null;
-        this.style.height = null;
-      }
-    }
+  ngOnChanges(): void {
+    const vertical = this.vertical;
+    const reverse = this.reverse;
+    const visibility = this.included ? 'visible' : 'hidden';
+    const offset = this.offset;
+    const length = this.length;
+
+    const positonStyle: NzSliderTrackStyle = vertical
+      ? {
+          [reverse ? 'top' : 'bottom']: `${offset}%`,
+          [reverse ? 'bottom' : 'top']: 'auto',
+          height: `${length}%`,
+          visibility
+        }
+      : {
+          [reverse ? 'right' : 'left']: `${offset}%`,
+          [reverse ? 'left' : 'right']: 'auto',
+          width: `${length}%`,
+          visibility
+        };
+
+    this.style = positonStyle;
   }
 }