ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
258 lines (252 loc) • 13.7 kB
JavaScript
import * as i0 from '@angular/core';
import { TemplateRef, forwardRef, Component, ViewEncapsulation, Input, HostBinding, ContentChildren, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'ng-zorro-antd-mobile/icon';
import { IconModule } from 'ng-zorro-antd-mobile/icon';
class StepComponent {
get status() {
return this._status;
}
set status(value) {
if (value) {
this._status = value;
this.isCustomStatus = true;
this.setIcon();
this.setClass();
}
}
get icon() {
return this._icon;
}
set icon(value) {
if (value) {
this._icon = value;
this.isCustomIcon = true;
this.setClass();
}
}
set currentIndex(current) {
this._currentIndex = current;
if (!this.isCustomStatus) {
this._status = current > this.stepNumber ? StepStatusEnum.FINISH : current === this.stepNumber ?
this.outStatus || '' : StepStatusEnum.WAIT;
this.setIcon();
this.setClass();
}
}
constructor(_el) {
this._el = _el;
this.prefixCls = 'am-steps';
this.stepItemCls = {};
this.iconCls = {
[`${this.prefixCls}-icon`]: true
};
this.isIconString = true;
this.outStatus = 'process';
this.isCustomStatus = false;
this.isCustomIcon = false;
this.title = null;
this.description = null;
this._currentIndex = 0;
this.clsStepItem = true;
}
isTemplateRef(value) {
return value instanceof TemplateRef;
}
setClass() {
this.stepItemCls = {
[`${this.prefixCls}-item-${this.status}`]: true,
[`${this.prefixCls}-item-custom`]: this.isCustomIcon || (this.icon && this._currentIndex !== this.stepNumber)
};
}
setIcon() {
if (!this.isCustomIcon) {
switch (this._status) {
case StepStatusEnum.FINISH:
this._icon = 'check-circle-o';
break;
case StepStatusEnum.ERROR:
this._icon = 'cross-circle-o';
break;
case StepStatusEnum.WAIT:
this._icon = 'ellipsis';
break;
default:
break;
}
}
}
ngOnInit() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: StepComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: StepComponent, selector: "Step, nzm-step", inputs: { status: "status", title: "title", description: "description", icon: "icon" }, host: { properties: { "class.am-steps-item": "this.clsStepItem" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => StepComponent),
multi: true
}
], ngImport: i0, template: "<div [ngClass]=\"stepItemCls\">\n <div class=\"{{ prefixCls }}-item-tail\">\n {{ tailContent }}\n </div>\n <div class=\"{{ prefixCls }}-item-icon\">\n <span *ngIf=\"isTemplateRef(icon)\" [ngClass]=\"iconCls\">\n <ng-template [ngTemplateOutlet]=\"icon\"></ng-template>\n </span>\n <span *ngIf=\"!isTemplateRef(icon) && (status === 'error' || status === 'finish' || status === 'wait')\" [ngClass]=\"iconCls\">\n <Icon [type]=\"icon\" [size]=\"iconSize\"> </Icon>\n </span>\n <span *ngIf=\"!isTemplateRef(icon) && !(status === 'error' || status === 'finish' || status === 'wait')\" [ngClass]=\"iconCls\"\n >{{ stepNumber }}\n </span>\n </div>\n <div class=\"{{ prefixCls }}-item-content\">\n <div class=\"{{ prefixCls }}-item-title\">\n <ng-container *ngIf=\"!isTemplateRef(title); else titleTemplate\">{{ title }}</ng-container>\n </div>\n <div *ngIf=\"description\" class=\"{{ prefixCls }}-item-description\">\n <ng-container *ngIf=\"!isTemplateRef(description); else descriptionTemplate\">{{ description }}</ng-container>\n </div>\n </div>\n</div>\n<ng-template #titleTemplate>\n <ng-template [ngTemplateOutlet]=\"title\"></ng-template>\n</ng-template>\n<ng-template #descriptionTemplate>\n <ng-template [ngTemplateOutlet]=\"description\"></ng-template>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "Icon, nzm-icon", inputs: ["color", "type", "src", "size"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: StepComponent, decorators: [{
type: Component,
args: [{ selector: 'Step, nzm-step', encapsulation: ViewEncapsulation.None, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => StepComponent),
multi: true
}
], template: "<div [ngClass]=\"stepItemCls\">\n <div class=\"{{ prefixCls }}-item-tail\">\n {{ tailContent }}\n </div>\n <div class=\"{{ prefixCls }}-item-icon\">\n <span *ngIf=\"isTemplateRef(icon)\" [ngClass]=\"iconCls\">\n <ng-template [ngTemplateOutlet]=\"icon\"></ng-template>\n </span>\n <span *ngIf=\"!isTemplateRef(icon) && (status === 'error' || status === 'finish' || status === 'wait')\" [ngClass]=\"iconCls\">\n <Icon [type]=\"icon\" [size]=\"iconSize\"> </Icon>\n </span>\n <span *ngIf=\"!isTemplateRef(icon) && !(status === 'error' || status === 'finish' || status === 'wait')\" [ngClass]=\"iconCls\"\n >{{ stepNumber }}\n </span>\n </div>\n <div class=\"{{ prefixCls }}-item-content\">\n <div class=\"{{ prefixCls }}-item-title\">\n <ng-container *ngIf=\"!isTemplateRef(title); else titleTemplate\">{{ title }}</ng-container>\n </div>\n <div *ngIf=\"description\" class=\"{{ prefixCls }}-item-description\">\n <ng-container *ngIf=\"!isTemplateRef(description); else descriptionTemplate\">{{ description }}</ng-container>\n </div>\n </div>\n</div>\n<ng-template #titleTemplate>\n <ng-template [ngTemplateOutlet]=\"title\"></ng-template>\n</ng-template>\n<ng-template #descriptionTemplate>\n <ng-template [ngTemplateOutlet]=\"description\"></ng-template>\n</ng-template>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { status: [{
type: Input
}], title: [{
type: Input
}], description: [{
type: Input
}], icon: [{
type: Input
}], clsStepItem: [{
type: HostBinding,
args: ['class.am-steps-item']
}] } });
var StepStatusEnum;
(function (StepStatusEnum) {
StepStatusEnum["WAIT"] = "wait";
StepStatusEnum["PROCESS"] = "process";
StepStatusEnum["FINISH"] = "finish";
StepStatusEnum["ERROR"] = "error";
})(StepStatusEnum || (StepStatusEnum = {}));
var StepDirectionEnum;
(function (StepDirectionEnum) {
StepDirectionEnum["VERTICAL"] = "vertical";
StepDirectionEnum["HORIZONTAL"] = "horizontal";
})(StepDirectionEnum || (StepDirectionEnum = {}));
class StepsComponent {
set current(value) {
if (value >= 0) {
this._current = value;
if (this.stepItems) {
this.setStepStyle();
}
}
}
set size(value) {
this._size = value;
this.setCls();
}
set status(value) {
this._status = value;
if (this.stepItems) {
this.setStepStyle();
}
}
set direction(value) {
this._direction = value;
this.setCls();
}
constructor(_elf, _render) {
this._elf = _elf;
this._render = _render;
this.prefixCls = 'am-steps';
this._current = 0;
this._status = StepStatusEnum.PROCESS;
this._direction = StepDirectionEnum.VERTICAL;
this.clsSteps = true;
}
setStepStyle() {
const itemCount = this.stepItems.length;
const itemArr = this.stepItems['_results'];
for (let index = 0; index < itemCount; index++) {
const step = itemArr[index];
step.stepNumber = index + 1;
step.outStatus = this._status;
step.currentIndex = this._current + 1;
step.iconSize = this._size === 'small' ? (this._status === StepStatusEnum.WAIT ? 'xxs' : 'xs') : 'md';
if (index < itemCount - 1 && itemArr[index + 1].status === StepStatusEnum.ERROR) {
step.stepItemCls = step.stepItemCls
? Object.assign(step.stepItemCls, { 'error-tail': true })
: { 'error-tail': true };
}
}
}
setCls() {
if (this._direction === StepDirectionEnum.HORIZONTAL) {
this.clsStepsLabelVtl = true;
this.clsStepsHztl = true;
this.clsStepsVtl = false;
}
else if (this._direction === StepDirectionEnum.VERTICAL) {
this.clsStepsVtl = true;
this.clsStepsHztl = false;
}
if (this._size === 'small') {
this.clsStepsSmall = true;
}
else {
this.clsStepsSmall = false;
}
}
ngOnInit() {
this.setCls();
}
ngAfterContentInit() {
setTimeout(() => {
this.setStepStyle();
}, 0);
this.stepItems.changes.subscribe(change => {
setTimeout(() => {
this.setStepStyle();
}, 0);
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: StepsComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: StepsComponent, selector: "Steps,nzm-steps", inputs: { current: "current", size: "size", status: "status", direction: "direction" }, host: { properties: { "class.am-steps": "this.clsSteps", "class.am-steps-small": "this.clsStepsSmall", "class.am-steps-label-vertical": "this.clsStepsLabelVtl", "class.am-steps-vertical": "this.clsStepsVtl", "class.am-steps-horizontal": "this.clsStepsHztl" } }, queries: [{ propertyName: "stepItems", predicate: StepComponent }], ngImport: i0, template: "<ng-content></ng-content>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: StepsComponent, decorators: [{
type: Component,
args: [{ selector: 'Steps,nzm-steps', template: "<ng-content></ng-content>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { stepItems: [{
type: ContentChildren,
args: [StepComponent]
}], current: [{
type: Input
}], size: [{
type: Input
}], status: [{
type: Input
}], direction: [{
type: Input
}], clsSteps: [{
type: HostBinding,
args: ['class.am-steps']
}], clsStepsSmall: [{
type: HostBinding,
args: ['class.am-steps-small']
}], clsStepsLabelVtl: [{
type: HostBinding,
args: ['class.am-steps-label-vertical']
}], clsStepsVtl: [{
type: HostBinding,
args: ['class.am-steps-vertical']
}], clsStepsHztl: [{
type: HostBinding,
args: ['class.am-steps-horizontal']
}] } });
class StepsModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: StepsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: StepsModule, declarations: [StepsComponent, StepComponent], imports: [CommonModule, FormsModule, IconModule], exports: [StepsComponent, StepComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: StepsModule, imports: [CommonModule, FormsModule, IconModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: StepsModule, decorators: [{
type: NgModule,
args: [{
exports: [StepsComponent, StepComponent],
declarations: [StepsComponent, StepComponent],
imports: [CommonModule, FormsModule, IconModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { StepComponent, StepDirectionEnum, StepStatusEnum, StepsComponent, StepsModule };
//# sourceMappingURL=ng-zorro-antd-mobile-steps.mjs.map