fix(module:timeline): fix reverse bug (#4690)

* fix(module:timeline): fix reverse bug

* fix: fix test

* chore: cleanup code

* fix: some consts

* test: refactor test

close #4509

components/core/util/dom.ts

@@ -34,18 +34,6 @@ export function getElementOffset(elem: HTMLElement): { top: number; left: number
   };
 }
 
-export function reverseChildNodes(parent: HTMLElement): void {
-  const children = parent.childNodes;
-  let length = children.length;
-  if (length) {
-    const nodes: Node[] = [];
-    children.forEach((node, i) => (nodes[i] = node));
-    while (length--) {
-      parent.appendChild(nodes[length]);
-    }
-  }
-}
-
 /**
  * Investigate if an event is a `TouchEvent`.
  */

components/timeline/public-api.ts

@@ -6,6 +6,6 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-export * from './nz-timeline-item.component';
-export * from './nz-timeline.component';
-export * from './nz-timeline.module';
+export * from './timeline-item.component';
+export * from './timeline.component';
+export * from './timeline.module';

components/timeline/timeline-item.component.ts

@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  TemplateRef,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
+
+import { NzTimelineMode } from './timeline.component';
+
+const TimelineTimeDefaultColors = ['red', 'blue', 'green', 'grey', 'gray'] as const;
+export type NzTimelineItemColor = typeof TimelineTimeDefaultColors[number];
+
+function isDefaultColor(color?: string): boolean {
+  return TimelineTimeDefaultColors.findIndex(i => i === color) !== -1;
+}
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  preserveWhitespaces: false,
+  selector: 'nz-timeline-item, [nz-timeline-item]',
+  exportAs: 'nzTimelineItem',
+  template: `
+    <ng-template #template>
+      <li
+        class="ant-timeline-item"
+        [class.ant-timeline-item-right]="position === 'right'"
+        [class.ant-timeline-item-left]="position === 'left'"
+        [class.ant-timeline-item-last]="isLast"
+      >
+        <div class="ant-timeline-item-tail"></div>
+        <div
+          class="ant-timeline-item-head"
+          [class.ant-timeline-item-head-red]="nzColor === 'red'"
+          [class.ant-timeline-item-head-blue]="nzColor === 'blue'"
+          [class.ant-timeline-item-head-green]="nzColor === 'green'"
+          [class.ant-timeline-item-head-gray]="nzColor === 'gray'"
+          [class.ant-timeline-item-head-custom]="!!nzDot"
+          [style.border-color]="borderColor"
+        >
+          <ng-container *nzStringTemplateOutlet="nzDot">{{ nzDot }}</ng-container>
+        </div>
+        <div class="ant-timeline-item-content">
+          <ng-content></ng-content>
+        </div>
+      </li>
+    </ng-template>
+  `
+})
+export class NzTimelineItemComponent implements OnChanges {
+  @ViewChild('template', { static: false }) template: TemplateRef<void>;
+
+  @Input() nzColor: NzTimelineItemColor = 'blue';
+  @Input() nzDot: string | TemplateRef<void>;
+
+  isLast = false;
+  borderColor: string | null = null;
+  position: NzTimelineMode | undefined;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.nzColor) {
+      this.updateCustomColor();
+    }
+  }
+
+  detectChanges(): void {
+    this.cdr.detectChanges();
+  }
+
+  private updateCustomColor(): void {
+    this.borderColor = isDefaultColor(this.nzColor) ? null : this.nzColor;
+  }
+}