@xmagic/nz-formly
Version:
基于ng-zorro-antd UI 扩展的ngx-formly组件库
75 lines (71 loc) • 10.5 kB
JavaScript
import { ChangeDetectionStrategy, Component, Optional } from '@angular/core';
import { FieldArrayType } from '@ngx-formly/core';
import { resolveTplName } from '@xmagic/nz-formly/common';
import * as i0 from "@angular/core";
import * as i1 from "@xmagic/nz-formly/common";
import * as i2 from "@angular/common";
import * as i3 from "ng-zorro-antd/button";
import * as i4 from "ng-zorro-antd/core/transition-patch";
import * as i5 from "ng-zorro-antd/core/wave";
import * as i6 from "@ngx-formly/core";
import * as i7 from "ng-zorro-antd/icon";
import * as i8 from "ng-zorro-antd/core/outlet";
export class FormlyFieldRepeatComponent extends FieldArrayType {
fieldTemplates;
defaultOptions = {
props: { showAdd: true, addButton: '添加', maxHeight: '300px' }
};
constructor(fieldTemplates) {
super();
this.fieldTemplates = fieldTemplates;
}
get addButton() {
return resolveTplName(this.props, this.fieldTemplates, 'addButton');
}
get removeButton() {
return resolveTplName(this.props, this.fieldTemplates, 'removeButton');
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormlyFieldRepeatComponent, deps: [{ token: i1.FormlyBoxTemplates, optional: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormlyFieldRepeatComponent, selector: "nz-formly-repeat", usesInheritance: true, ngImport: i0, template: `
<div class="repeat-view" [formlyAttributes]="field" [style.max-height]="props.maxHeight">
<div *ngFor="let f of field.fieldGroup; let i = index" class="repeat-row">
<formly-field class="repeat-col" [field]="f"></formly-field>
<ng-container *nzStringTemplateOutlet="removeButton; context: { $implicit: this, field: f }">
<button class="repeat-close" type="button" (click)="remove(i)">×</button>
</ng-container>
</div>
</div>
<div *ngIf="props.showAdd">
<ng-container *nzStringTemplateOutlet="addButton; context: { $implicit: this, field: field }">
<button nz-button nzType="primary" type="button" (click)="add()">
<i nz-icon nzType="plus"></i>
{{ props.addButton }}
</button>
</ng-container>
</div>
`, isInline: true, styles: [".repeat-view{overflow:auto}.repeat-row{display:flex;align-items:baseline}.repeat-col{flex:1 0 0}.repeat-close{background-color:transparent;font-size:24px;border:0;opacity:.2;line-height:1;padding:0;color:#000;text-shadow:0 1px 0 #fff;cursor:pointer;margin-left:10px;position:relative;top:2px}.repeat-close:hover{opacity:1;color:#ff4d4f}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i4.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i5.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "component", type: i6.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "directive", type: i6.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: i7.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "directive", type: i8.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormlyFieldRepeatComponent, decorators: [{
type: Component,
args: [{ selector: 'nz-formly-repeat', template: `
<div class="repeat-view" [formlyAttributes]="field" [style.max-height]="props.maxHeight">
<div *ngFor="let f of field.fieldGroup; let i = index" class="repeat-row">
<formly-field class="repeat-col" [field]="f"></formly-field>
<ng-container *nzStringTemplateOutlet="removeButton; context: { $implicit: this, field: f }">
<button class="repeat-close" type="button" (click)="remove(i)">×</button>
</ng-container>
</div>
</div>
<div *ngIf="props.showAdd">
<ng-container *nzStringTemplateOutlet="addButton; context: { $implicit: this, field: field }">
<button nz-button nzType="primary" type="button" (click)="add()">
<i nz-icon nzType="plus"></i>
{{ props.addButton }}
</button>
</ng-container>
</div>
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".repeat-view{overflow:auto}.repeat-row{display:flex;align-items:baseline}.repeat-col{flex:1 0 0}.repeat-close{background-color:transparent;font-size:24px;border:0;opacity:.2;line-height:1;padding:0;color:#000;text-shadow:0 1px 0 #fff;cursor:pointer;margin-left:10px;position:relative;top:2px}.repeat-close:hover{opacity:1;color:#ff4d4f}\n"] }]
}], ctorParameters: () => [{ type: i1.FormlyBoxTemplates, decorators: [{
type: Optional
}] }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVwZWF0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2xpYi9yZXBlYXQvcmVwZWF0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3RSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDbEQsT0FBTyxFQUFzQixjQUFjLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQzs7Ozs7Ozs7OztBQTZEOUUsTUFBTSxPQUFPLDBCQUEyQixTQUFRLGNBQWM7SUFLN0I7SUFKdEIsY0FBYyxHQUFHO1FBQ3hCLEtBQUssRUFBRSxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsT0FBTyxFQUFFO0tBQzlELENBQUM7SUFFRixZQUErQixjQUFrQztRQUMvRCxLQUFLLEVBQUUsQ0FBQztRQURxQixtQkFBYyxHQUFkLGNBQWMsQ0FBb0I7SUFFakUsQ0FBQztJQUVELElBQUksU0FBUztRQUNYLE9BQU8sY0FBYyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLGNBQWMsRUFBRSxXQUFXLENBQUMsQ0FBQztJQUN0RSxDQUFDO0lBRUQsSUFBSSxZQUFZO1FBQ2QsT0FBTyxjQUFjLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsY0FBYyxFQUFFLGNBQWMsQ0FBQyxDQUFDO0lBQ3pFLENBQUM7d0dBZlUsMEJBQTBCOzRGQUExQiwwQkFBMEIsK0VBekQzQjs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW1CVDs7NEZBc0NVLDBCQUEwQjtrQkEzRHRDLFNBQVM7K0JBQ0Usa0JBQWtCLFlBQ2xCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBbUJULG1CQW9DZ0IsdUJBQXVCLENBQUMsTUFBTTs7MEJBT2xDLFFBQVEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBPcHRpb25hbCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBGaWVsZEFycmF5VHlwZSB9IGZyb20gJ0BuZ3gtZm9ybWx5L2NvcmUnO1xyXG5pbXBvcnQgeyBGb3JtbHlCb3hUZW1wbGF0ZXMsIHJlc29sdmVUcGxOYW1lIH0gZnJvbSAnQHhtYWdpYy9uei1mb3JtbHkvY29tbW9uJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbnotZm9ybWx5LXJlcGVhdCcsXHJcbiAgdGVtcGxhdGU6IGBcclxuICAgIDxkaXYgY2xhc3M9XCJyZXBlYXQtdmlld1wiIFtmb3JtbHlBdHRyaWJ1dGVzXT1cImZpZWxkXCIgW3N0eWxlLm1heC1oZWlnaHRdPVwicHJvcHMubWF4SGVpZ2h0XCI+XHJcbiAgICAgIDxkaXYgKm5nRm9yPVwibGV0IGYgb2YgZmllbGQuZmllbGRHcm91cDsgbGV0IGkgPSBpbmRleFwiIGNsYXNzPVwicmVwZWF0LXJvd1wiPlxyXG4gICAgICAgIDxmb3JtbHktZmllbGQgY2xhc3M9XCJyZXBlYXQtY29sXCIgW2ZpZWxkXT1cImZcIj48L2Zvcm1seS1maWVsZD5cclxuXHJcbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbnpTdHJpbmdUZW1wbGF0ZU91dGxldD1cInJlbW92ZUJ1dHRvbjsgY29udGV4dDogeyAkaW1wbGljaXQ6IHRoaXMsIGZpZWxkOiBmIH1cIj5cclxuICAgICAgICAgIDxidXR0b24gY2xhc3M9XCJyZXBlYXQtY2xvc2VcIiB0eXBlPVwiYnV0dG9uXCIgKGNsaWNrKT1cInJlbW92ZShpKVwiPsOXPC9idXR0b24+XHJcbiAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcblxyXG4gICAgPGRpdiAqbmdJZj1cInByb3BzLnNob3dBZGRcIj5cclxuICAgICAgPG5nLWNvbnRhaW5lciAqbnpTdHJpbmdUZW1wbGF0ZU91dGxldD1cImFkZEJ1dHRvbjsgY29udGV4dDogeyAkaW1wbGljaXQ6IHRoaXMsIGZpZWxkOiBmaWVsZCB9XCI+XHJcbiAgICAgICAgPGJ1dHRvbiBuei1idXR0b24gbnpUeXBlPVwicHJpbWFyeVwiIHR5cGU9XCJidXR0b25cIiAoY2xpY2spPVwiYWRkKClcIj5cclxuICAgICAgICAgIDxpIG56LWljb24gbnpUeXBlPVwicGx1c1wiPjwvaT5cclxuICAgICAgICAgIHt7IHByb3BzLmFkZEJ1dHRvbiB9fVxyXG4gICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgIDwvZGl2PlxyXG4gIGAsXHJcbiAgc3R5bGVzOiBbXHJcbiAgICBgXHJcbiAgICAgIC5yZXBlYXQtdmlldyB7XHJcbiAgICAgICAgb3ZlcmZsb3c6IGF1dG87XHJcbiAgICAgIH1cclxuICAgICAgLnJlcGVhdC1yb3cge1xyXG4gICAgICAgIGRpc3BsYXk6IGZsZXg7XHJcbiAgICAgICAgYWxpZ24taXRlbXM6IGJhc2VsaW5lO1xyXG4gICAgICB9XHJcblxyXG4gICAgICAucmVwZWF0LWNvbCB7XHJcbiAgICAgICAgZmxleDogMSAwIDA7XHJcbiAgICAgIH1cclxuXHJcbiAgICAgIC5yZXBlYXQtY2xvc2Uge1xyXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xyXG4gICAgICAgIGZvbnQtc2l6ZTogMjRweDtcclxuICAgICAgICBib3JkZXI6IDA7XHJcbiAgICAgICAgb3BhY2l0eTogMC4yO1xyXG4gICAgICAgIGxpbmUtaGVpZ2h0OiAxO1xyXG4gICAgICAgIHBhZGRpbmc6IDA7XHJcbiAgICAgICAgY29sb3I6ICMwMDA7XHJcbiAgICAgICAgdGV4dC1zaGFkb3c6IDAgMXB4IDAgI2ZmZjtcclxuICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XHJcbiAgICAgICAgbWFyZ2luLWxlZnQ6IDEwcHg7XHJcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xyXG4gICAgICAgIHRvcDogMnB4O1xyXG4gICAgICB9XHJcblxyXG4gICAgICAucmVwZWF0LWNsb3NlOmhvdmVyIHtcclxuICAgICAgICBvcGFjaXR5OiAxO1xyXG4gICAgICAgIGNvbG9yOiAjZmY0ZDRmO1xyXG4gICAgICB9XHJcbiAgICBgXHJcbiAgXSxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxyXG59KVxyXG5leHBvcnQgY2xhc3MgRm9ybWx5RmllbGRSZXBlYXRDb21wb25lbnQgZXh0ZW5kcyBGaWVsZEFycmF5VHlwZSB7XHJcbiAgb3ZlcnJpZGUgZGVmYXVsdE9wdGlvbnMgPSB7XHJcbiAgICBwcm9wczogeyBzaG93QWRkOiB0cnVlLCBhZGRCdXR0b246ICfmt7vliqAnLCBtYXhIZWlnaHQ6ICczMDBweCcgfVxyXG4gIH07XHJcblxyXG4gIGNvbnN0cnVjdG9yKEBPcHRpb25hbCgpIHB1YmxpYyBmaWVsZFRlbXBsYXRlczogRm9ybWx5Qm94VGVtcGxhdGVzKSB7XHJcbiAgICBzdXBlcigpO1xyXG4gIH1cclxuXHJcbiAgZ2V0IGFkZEJ1dHRvbigpIHtcclxuICAgIHJldHVybiByZXNvbHZlVHBsTmFtZSh0aGlzLnByb3BzLCB0aGlzLmZpZWxkVGVtcGxhdGVzLCAnYWRkQnV0dG9uJyk7XHJcbiAgfVxyXG5cclxuICBnZXQgcmVtb3ZlQnV0dG9uKCkge1xyXG4gICAgcmV0dXJuIHJlc29sdmVUcGxOYW1lKHRoaXMucHJvcHMsIHRoaXMuZmllbGRUZW1wbGF0ZXMsICdyZW1vdmVCdXR0b24nKTtcclxuICB9XHJcbn1cclxuIl19