ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
288 lines (281 loc) • 10.6 kB
JavaScript
import { Component, ChangeDetectionStrategy, ViewEncapsulation, Renderer2, ChangeDetectorRef, ViewChild, Input, ContentChildren, ContentChild, NgModule } from '@angular/core';
import { Platform, PlatformModule } from '@angular/cdk/platform';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { reverseChildNodes, NzAddOnModule } from 'ng-zorro-antd/core';
import { CommonModule } from '@angular/common';
import { NzIconModule } from 'ng-zorro-antd/icon';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzTimelineItemComponent {
/**
* @param {?} renderer
* @param {?} cdr
*/
constructor(renderer, cdr) {
this.renderer = renderer;
this.cdr = cdr;
this.nzColor = 'blue';
this.isLast = false;
}
/**
* @return {?}
*/
ngOnInit() {
this.tryUpdateCustomColor();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.nzColor) {
this.tryUpdateCustomColor();
}
}
/**
* @return {?}
*/
detectChanges() {
this.cdr.detectChanges();
}
/**
* @private
* @return {?}
*/
tryUpdateCustomColor() {
/** @type {?} */
const defaultColors = ['blue', 'red', 'green', 'gray'];
/** @type {?} */
const circle = this.liTemplate.nativeElement.querySelector('.ant-timeline-item-head');
if (defaultColors.indexOf(this.nzColor) === -1) {
this.renderer.setStyle(circle, 'border-color', this.nzColor);
}
else {
this.renderer.removeStyle(circle, 'border-color');
}
}
}
NzTimelineItemComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
selector: 'nz-timeline-item, [nz-timeline-item]',
exportAs: 'nzTimelineItem',
template: "<li\n class=\"ant-timeline-item\"\n [class.ant-timeline-item-right]=\"position === 'right'\"\n [class.ant-timeline-item-left]=\"position === 'left'\"\n [class.ant-timeline-item-last]=\"isLast\"\n #liTemplate>\n <div class=\"ant-timeline-item-tail\"></div>\n <div\n class=\"ant-timeline-item-head\"\n [class.ant-timeline-item-head-red]=\"nzColor === 'red'\"\n [class.ant-timeline-item-head-blue]=\"nzColor === 'blue'\"\n [class.ant-timeline-item-head-green]=\"nzColor === 'green'\"\n [class.ant-timeline-item-head-gray]=\"nzColor === 'gray'\"\n [class.ant-timeline-item-head-custom]=\"!!nzDot\">\n <ng-container *nzStringTemplateOutlet=\"nzDot\">{{ nzDot }}</ng-container>\n </div>\n <div class=\"ant-timeline-item-content\">\n <ng-content></ng-content>\n </div>\n</li>\n"
}] }
];
/** @nocollapse */
NzTimelineItemComponent.ctorParameters = () => [
{ type: Renderer2 },
{ type: ChangeDetectorRef }
];
NzTimelineItemComponent.propDecorators = {
liTemplate: [{ type: ViewChild, args: ['liTemplate', { static: true },] }],
nzColor: [{ type: Input }],
nzDot: [{ type: Input }]
};
if (false) {
/** @type {?} */
NzTimelineItemComponent.prototype.liTemplate;
/** @type {?} */
NzTimelineItemComponent.prototype.nzColor;
/** @type {?} */
NzTimelineItemComponent.prototype.nzDot;
/** @type {?} */
NzTimelineItemComponent.prototype.isLast;
/** @type {?} */
NzTimelineItemComponent.prototype.position;
/**
* @type {?}
* @private
*/
NzTimelineItemComponent.prototype.renderer;
/**
* @type {?}
* @private
*/
NzTimelineItemComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzTimelineComponent {
/**
* @param {?} cdr
* @param {?} platform
*/
constructor(cdr, platform) {
this.cdr = cdr;
this.platform = platform;
this.nzReverse = false;
this.isPendingBoolean = false;
this.destroy$ = new Subject();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
/** @type {?} */
const modeChanges = changes.nzMode;
/** @type {?} */
const reverseChanges = changes.nzReverse;
/** @type {?} */
const pendingChanges = changes.nzPending;
if (modeChanges && (modeChanges.previousValue !== modeChanges.currentValue || modeChanges.isFirstChange())) {
this.updateChildren();
}
if (reverseChanges &&
reverseChanges.previousValue !== reverseChanges.currentValue &&
!reverseChanges.isFirstChange()) {
this.reverseChildTimelineDots();
}
if (pendingChanges) {
this.isPendingBoolean = pendingChanges.currentValue === true;
}
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.updateChildren();
if (this.listOfTimeLine) {
this.listOfTimeLine.changes.pipe(takeUntil(this.destroy$)).subscribe((/**
* @return {?}
*/
() => {
this.updateChildren();
}));
}
}
/**
* @return {?}
*/
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
/**
* @private
* @return {?}
*/
updateChildren() {
if (this.listOfTimeLine && this.listOfTimeLine.length) {
/** @type {?} */
const length = this.listOfTimeLine.length;
this.listOfTimeLine.toArray().forEach((/**
* @param {?} item
* @param {?} index
* @return {?}
*/
(item, index) => {
item.isLast = !this.nzReverse ? index === length - 1 : index === 0;
item.position =
this.nzMode === 'left' || !this.nzMode
? undefined
: this.nzMode === 'right'
? 'right'
: this.nzMode === 'alternate' && index % 2 === 0
? 'left'
: 'right';
item.detectChanges();
}));
this.cdr.markForCheck();
}
}
/**
* @private
* @return {?}
*/
reverseChildTimelineDots() {
if (this.platform.isBrowser) {
reverseChildNodes((/** @type {?} */ (this.timeline.nativeElement)));
this.updateChildren();
}
}
}
NzTimelineComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
selector: 'nz-timeline',
exportAs: 'nzTimeline',
template: "<ul\n class=\"ant-timeline\"\n [class.ant-timeline-right]=\"nzMode === 'right'\"\n [class.ant-timeline-alternate]=\"nzMode === 'alternate'\"\n [class.ant-timeline-pending]=\"!!nzPending\"\n [class.ant-timeline-reverse]=\"nzReverse\"\n #timeline>\n <!-- User inserted timeline dots. -->\n <ng-content></ng-content>\n <!-- Pending dot. -->\n <li *ngIf=\"nzPending\" class=\"ant-timeline-item ant-timeline-item-pending\">\n <div class=\"ant-timeline-item-tail\"></div>\n <div class=\"ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue\">\n <ng-container *nzStringTemplateOutlet=\"nzPendingDot\">\n {{ nzPendingDot }}<i *ngIf=\"!nzPendingDot\" nz-icon nzType=\"loading\"></i>\n </ng-container>\n </div>\n <div class=\"ant-timeline-item-content\">\n <ng-container *nzStringTemplateOutlet=\"nzPending\">\n {{ isPendingBoolean ? '' : nzPending }}\n </ng-container>\n </div>\n </li>\n</ul>\n"
}] }
];
/** @nocollapse */
NzTimelineComponent.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: Platform }
];
NzTimelineComponent.propDecorators = {
timeline: [{ type: ViewChild, args: ['timeline', { static: false },] }],
listOfTimeLine: [{ type: ContentChildren, args: [NzTimelineItemComponent,] }],
_pendingContent: [{ type: ContentChild, args: ['pending', { static: false },] }],
nzMode: [{ type: Input }],
nzPending: [{ type: Input }],
nzPendingDot: [{ type: Input }],
nzReverse: [{ type: Input }]
};
if (false) {
/** @type {?} */
NzTimelineComponent.prototype.timeline;
/** @type {?} */
NzTimelineComponent.prototype.listOfTimeLine;
/** @type {?} */
NzTimelineComponent.prototype._pendingContent;
/** @type {?} */
NzTimelineComponent.prototype.nzMode;
/** @type {?} */
NzTimelineComponent.prototype.nzPending;
/** @type {?} */
NzTimelineComponent.prototype.nzPendingDot;
/** @type {?} */
NzTimelineComponent.prototype.nzReverse;
/** @type {?} */
NzTimelineComponent.prototype.isPendingBoolean;
/**
* @type {?}
* @private
*/
NzTimelineComponent.prototype.destroy$;
/**
* @type {?}
* @private
*/
NzTimelineComponent.prototype.cdr;
/**
* @type {?}
* @private
*/
NzTimelineComponent.prototype.platform;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzTimelineModule {
}
NzTimelineModule.decorators = [
{ type: NgModule, args: [{
declarations: [NzTimelineItemComponent, NzTimelineComponent],
exports: [NzTimelineItemComponent, NzTimelineComponent],
imports: [CommonModule, PlatformModule, NzIconModule, NzAddOnModule]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NzTimelineComponent, NzTimelineItemComponent, NzTimelineModule };
//# sourceMappingURL=ng-zorro-antd-timeline.js.map