ngx-antd-form-builder
Version:
Simple Drag&Drop form builder using ng-zorro-antd
590 lines (579 loc) • 215 kB
JavaScript
import { HttpClientModule } from '@angular/common/http';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Directive, Input, Output, NgModule, Component, forwardRef, Pipe, Inject, ViewChild } from '@angular/core';
import * as i1$1 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
import * as i2 from 'ng-zorro-antd/collapse';
import { NzCollapseModule } from 'ng-zorro-antd/collapse';
import * as i2$1 from 'ng-zorro-antd/tabs';
import { NzTabsModule } from 'ng-zorro-antd/tabs';
import * as i3$1 from 'ng-zorro-antd/tooltip';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import * as i1$3 from '@angular/cdk/dialog';
import { DIALOG_DATA, DialogModule } from '@angular/cdk/dialog';
import Sortable from 'sortablejs';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i5$1 from 'ng-zorro-antd/button';
import { NzButtonModule } from 'ng-zorro-antd/button';
import * as i6$1 from 'ng-zorro-antd/grid';
import { NzGridModule } from 'ng-zorro-antd/grid';
import * as i5 from 'ng-zorro-antd/icon';
import { NzIconModule } from 'ng-zorro-antd/icon';
import * as i3 from 'ng-zorro-antd/input';
import { NzInputModule } from 'ng-zorro-antd/input';
import * as i4 from 'ng-zorro-antd/input-number';
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
import * as i6 from 'ng-zorro-antd/core/transition-patch';
import * as i7 from 'ng-zorro-antd/core/wave';
import * as i6$2 from 'ng-zorro-antd/form';
import { NzFormModule } from 'ng-zorro-antd/form';
import * as i7$1 from 'ng-zorro-antd/divider';
import { NzDividerModule } from 'ng-zorro-antd/divider';
import * as i8 from 'ng-zorro-antd/rate';
import { NzRateModule } from 'ng-zorro-antd/rate';
import * as i9 from 'ng-zorro-antd/select';
import { NzSelectModule } from 'ng-zorro-antd/select';
import * as i1$2 from 'ng-zorro-antd/checkbox';
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
import * as i4$1 from 'ng-zorro-antd/radio';
import { NzRadioModule } from 'ng-zorro-antd/radio';
import * as i11 from 'ng-zorro-antd/slider';
import { NzSliderModule } from 'ng-zorro-antd/slider';
import * as i12 from 'ng-zorro-antd/switch';
import { NzSwitchModule } from 'ng-zorro-antd/switch';
import * as i13 from 'ng-zorro-antd/alert';
import { NzAlertModule } from 'ng-zorro-antd/alert';
import * as i14 from 'ng-zorro-antd/date-picker';
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
import * as i3$2 from 'ng-zorro-antd/card';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzLayoutModule } from 'ng-zorro-antd/layout';
import 'codemirror/mode/javascript/javascript';
import * as i4$2 from '@ctrl/ngx-codemirror';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';
import * as i2$2 from '@angular/cdk/clipboard';
import * as i5$2 from 'ng-zorro-antd/empty';
import { NzEmptyModule } from 'ng-zorro-antd/empty';
class SortablejsBinding {
constructor(target) {
this.target = target;
}
insert(index, item) {
if (this.isFormArray) {
this.target.insert(index, item);
}
else {
this.target.splice(index, 0, item);
}
}
get(index) {
return this.isFormArray ? this.target.at(index) : this.target[index];
}
remove(index) {
let item;
if (this.isFormArray) {
item = this.target.at(index);
this.target.removeAt(index);
}
else {
item = this.target.splice(index, 1)[0];
}
return item;
}
// we need this to identify that the target is a FormArray
// we don't want to have a dependency on @angular/forms just for that
get isFormArray() {
// just checking for random FormArray methods not available on a standard array
return !!this.target.at && !!this.target.insert && !!this.target.reset;
}
}
class SortablejsBindings {
constructor(bindingTargets) {
this.bindings = bindingTargets.map(target => new SortablejsBinding(target));
}
injectIntoEvery(index, items) {
this.bindings.forEach((b, i) => b.insert(index, items[i]));
}
getFromEvery(index) {
return this.bindings.map(b => b.get(index));
}
extractFromEvery(index) {
return this.bindings.map(b => b.remove(index));
}
get provided() {
return !!this.bindings.length;
}
}
class SortablejsService {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: SortablejsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: SortablejsService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: SortablejsService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
const getIndexesFromEvent = (event) => {
if (event.hasOwnProperty('newDraggableIndex') && event.hasOwnProperty('oldDraggableIndex')) {
return {
new: event.newDraggableIndex,
old: event.oldDraggableIndex,
};
}
else {
return {
new: event.newIndex,
old: event.oldIndex,
};
}
};
function removeNode(node) {
if (node.parentElement !== null) {
node.parentElement.removeChild(node);
}
}
function insertNodeAt(fatherNode, node, position) {
const refNode = position === 0
? fatherNode.children[0]
: fatherNode.children[position - 1].nextSibling;
fatherNode.insertBefore(node, refNode);
}
class SortablejsDirective {
constructor(service, element, zone, renderer) {
this.service = service;
this.element = element;
this.zone = zone;
this.renderer = renderer;
this.sortablejsInit = new EventEmitter();
}
ngOnInit() {
//zone pollution
this.zone.runOutsideAngular(() => {
if (Sortable) { // Sortable does not exist in angular universal (SSR)
this.create();
}
});
}
ngOnChanges(changes) {
const optionsChange = changes.sortablejsOptions;
if (optionsChange && !optionsChange.isFirstChange()) {
const previousOptions = optionsChange.previousValue;
const currentOptions = optionsChange.currentValue;
Object.keys(currentOptions).forEach(optionName => {
if (currentOptions[optionName] !== previousOptions[optionName]) {
// use low-level option setter
this.sortableInstance.option(optionName, this.options[optionName]);
}
});
}
}
ngOnDestroy() {
if (this.sortableInstance) {
this.sortableInstance.destroy();
}
}
create() {
const container = this.sortablejsContainer ? this.element.nativeElement.querySelector(this.sortablejsContainer) : this.element.nativeElement;
setTimeout(() => {
this.sortableInstance = Sortable.create(container, this.options);
this.sortablejsInit.emit(this.sortableInstance);
}, 0);
}
getBindings() {
if (!this.sortablejs) {
return new SortablejsBindings([]);
}
else if (this.sortablejs instanceof SortablejsBindings) {
return this.sortablejs;
}
else {
return new SortablejsBindings([this.sortablejs]);
}
}
get options() {
return { ...this.optionsWithoutEvents, ...this.overridenOptions };
}
get optionsWithoutEvents() {
return { ...(this.sortablejsOptions || {}) };
}
proxyEvent(eventName, ...params) {
this.zone.run(() => {
if (this.optionsWithoutEvents && this.optionsWithoutEvents[eventName]) {
this.optionsWithoutEvents[eventName](...params);
}
});
}
get isCloning() {
return this.sortableInstance.options.group.checkPull(this.sortableInstance, this.sortableInstance) === 'clone';
}
clone(item) {
// by default pass the item through, no cloning performed
return (this.sortablejsCloneFunction || (subitem => subitem))(item);
}
get overridenOptions() {
// always intercept standard events but act only in case items are set (bindingEnabled)
// allows to forget about tracking this.items changes
return {
onAdd: (event) => {
this.service.transfer = (items) => {
this.getBindings().injectIntoEvery(event.newIndex, items);
this.proxyEvent('onAdd', event);
};
removeNode(event.item);
this.proxyEvent('onAddOriginal', event);
},
onRemove: (event) => {
const bindings = this.getBindings();
if (bindings.provided) {
if (this.isCloning && this.service.transfer) {
this.service.transfer(bindings.getFromEvery(event.oldIndex).map(item => this.clone(item)));
// great thanks to https://github.com/tauu
// event.item is the original item from the source list which is moved to the target list
// event.clone is a clone of the original item and will be added to source list
// If bindings are provided, adding the item dom element to the target list causes artifacts
// as it interferes with the rendering performed by the angular template.
// Therefore we remove it immediately and also move the original item back to the source list.
// (event handler may be attached to the original item and not its clone, therefore keeping
// the original dom node, circumvents side effects )
this.renderer.removeChild(event.item.parentNode, event.item);
this.renderer.insertBefore(event.clone.parentNode, event.item, event.clone);
this.renderer.removeChild(event.clone.parentNode, event.clone);
}
else {
this.service.transfer && this.service.transfer(bindings.extractFromEvery(event.oldIndex));
}
this.service.transfer = undefined;
}
this.proxyEvent('onRemove', event);
},
onUpdate: (event) => {
removeNode(event.item);
insertNodeAt(event['from'], event.item, event.oldIndex);
const bindings = this.getBindings();
const indexes = getIndexesFromEvent(event);
bindings.injectIntoEvery(indexes.new, bindings.extractFromEvery(indexes.old));
this.proxyEvent('onUpdate', event);
},
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: SortablejsDirective, deps: [{ token: SortablejsService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: SortablejsDirective, selector: "[sortablejs]", inputs: { sortablejs: "sortablejs", sortablejsContainer: "sortablejsContainer", sortablejsOptions: "sortablejsOptions", sortablejsCloneFunction: "sortablejsCloneFunction" }, outputs: { sortablejsInit: "sortablejsInit" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: SortablejsDirective, decorators: [{
type: Directive,
args: [{
selector: '[sortablejs]',
}]
}], ctorParameters: () => [{ type: SortablejsService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { sortablejs: [{
type: Input
}], sortablejsContainer: [{
type: Input
}], sortablejsOptions: [{
type: Input
}], sortablejsCloneFunction: [{
type: Input
}], sortablejsInit: [{
type: Output
}] } });
class SortablejsModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: SortablejsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: SortablejsModule, declarations: [SortablejsDirective], exports: [SortablejsDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: SortablejsModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: SortablejsModule, decorators: [{
type: NgModule,
args: [{
declarations: [SortablejsDirective],
exports: [SortablejsDirective],
}]
}] });
class CollapseItemListComponent {
constructor() {
this.fields = [];
this.handleStart = new EventEmitter();
this.generateKey = new EventEmitter();
this._fields = [];
this.options = {
group: {
name: 'draggable-box',
pull: 'clone', put: false,
},
sort: false,
onStart: (event) => {
this.handleStart.emit(this._fields[event.oldIndex].type);
this.generateKey.emit({
list: this._fields,
index: event.oldIndex
});
}
};
}
ngOnChanges(changes) {
if (changes['fields']) {
this._fields = changes['fields'].currentValue;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CollapseItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: CollapseItemListComponent, isStandalone: true, selector: "app-collapse-item-list", inputs: { fields: "fields" }, outputs: { handleStart: "handleStart", generateKey: "generateKey" }, usesOnChanges: true, ngImport: i0, template: "<ul\r\n [sortablejs]=\"_fields\" [sortablejsOptions]=\"options\"\r\n>\r\n <li class=\"draggable-item\" *ngFor=\"let val of _fields; index as i\"\r\n >\r\n {{ val.label }}\r\n </li>\r\n</ul>\r\n", styles: ["ul{padding:5px;list-style:none;display:flex;margin-bottom:0;flex-wrap:wrap}ul li{border:0;box-shadow:1px 0 #ccc,0 1px #ccc,1px 1px #ccc,1px 0 #ccc inset,0 1px #ccc inset;padding:8px 12px;width:calc(50% - 6px);margin:2.7px;height:36px;line-height:20px;cursor:move;border:1px solid transparent;border-radius:3px;transition:all .3s}\n"], dependencies: [{ kind: "ngmodule", type: SortablejsModule }, { kind: "directive", type: SortablejsDirective, selector: "[sortablejs]", inputs: ["sortablejs", "sortablejsContainer", "sortablejsOptions", "sortablejsCloneFunction"], outputs: ["sortablejsInit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CollapseItemListComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'app-collapse-item-list', imports: [SortablejsModule, CommonModule], template: "<ul\r\n [sortablejs]=\"_fields\" [sortablejsOptions]=\"options\"\r\n>\r\n <li class=\"draggable-item\" *ngFor=\"let val of _fields; index as i\"\r\n >\r\n {{ val.label }}\r\n </li>\r\n</ul>\r\n", styles: ["ul{padding:5px;list-style:none;display:flex;margin-bottom:0;flex-wrap:wrap}ul li{border:0;box-shadow:1px 0 #ccc,0 1px #ccc,1px 1px #ccc,1px 0 #ccc inset,0 1px #ccc inset;padding:8px 12px;width:calc(50% - 6px);margin:2.7px;height:36px;line-height:20px;cursor:move;border:1px solid transparent;border-radius:3px;transition:all .3s}\n"] }]
}], ctorParameters: () => [], propDecorators: { fields: [{
type: Input
}], handleStart: [{
type: Output
}], generateKey: [{
type: Output
}] } });
class DesignFormChangeOptionComponent {
constructor() {
this.onChange = (_) => { };
this.onTouched = () => { };
//@Input() value: Array<any>;
this.type = 'option';
}
writeValue(obj) {
this._value = obj;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
//throw new Error("Method not implemented.");
}
//@Output() readonly changeValue = new EventEmitter();
handleAdd() {
// 添加
const addData = [
...this._value,
{
value: `${this._value.length + 1}`,
label: (this.type == 'collapse' ? "Panel " : "Option ") + (this._value.length + 1),
list: this.type === "tab" || this.type == 'collapse' ? [] : undefined
}
];
this._value = addData;
this.onChange(addData);
//this.$emit("input", addData);
}
handleAddCol() {
// 添加栅格Col
const addData = [
...this._value,
{
span: 12,
list: []
}
];
this._value = addData;
this.onChange(addData);
//this.$emit("input", addData);
}
handleAddRules() {
const addData = [
...this._value,
{
pattern: "",
message: ""
}
];
this._value = addData;
this.onChange(addData);
//this.$emit("input", addData);
}
handleDelete(deleteIndex) {
// 删除
this._value = this._value.filter((val, index) => index !== deleteIndex);
this.onChange(this._value);
// this.$emit(
// "input",
// this.value.filter((val, index) => index !== deleteIndex)
// );
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DesignFormChangeOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: DesignFormChangeOptionComponent, isStandalone: true, selector: "app-design-form-change-option", inputs: { type: "type" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DesignFormChangeOptionComponent),
multi: true
}
], ngImport: i0, template: "<div class=\"option-change-container\">\r\n <div *ngIf=\"type === 'option' || type === 'tab'\">\r\n <div nz-row [nzGutter]=\"6\" class=\"option-change-box\" *ngFor=\"let val of _value; let index = index\">\r\n <div nz-col nzSpan=\"12\">\r\n <input type=\"text\" [(ngModel)]=\"val.label\" nz-input placeholder=\"Label\">\r\n </div>\r\n <div nz-col nzSpan=\"6\">\r\n <input type=\"text\" [(ngModel)]=\"val.value\" nz-input placeholder=\"Value\">\r\n </div>\r\n <!-- <div nz-col nzSpan=\"6\">\r\n <input type=\"text\" [(ngModel)]=\"val.tooltip\" nz-input placeholder=\"tooltip\">\r\n </div> -->\r\n <div nz-col nzSpan=\"6\">\r\n <div class=\"option-delete-box\" (click)=\"handleDelete(index)\">\r\n <button nz-button nzDanger ><i nz-icon nzType=\"delete\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <button nz-button nzType=\"primary\" (click)=\"handleAdd()\">Add</button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"type === 'rules'\">\r\n <div nz-row class=\"option-change-box\" *ngFor=\"let val of _value; let index = index\">\r\n <ng-container *ngIf=\"index !== 0\">\r\n <div nz-col nzSpan=\"24\">\r\n <input type=\"text\" [(ngModel)]=\"val.message\" nz-input placeholder=\"Validation Tooltip\">\r\n </div>\r\n <div nz-col nzSpan=\"20\">\r\n <input type=\"text\" [(ngModel)]=\"val.pattern\" nz-input placeholder=\"Regex pattern\">\r\n </div>\r\n <div nz-col nzSpan=\"4\">\r\n <div class=\"option-delete-box\" (click)=\"handleDelete(index)\">\r\n <button nz-button nzType=\"primary\" nzDanger><i nz-icon nzType=\"delete\"></i></button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <button nz-button nzType=\"primary\" (click)=\"handleAddRules()\">Add</button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"type === 'colspan'\">\r\n <div nz-row class=\"option-change-box\" *ngFor=\"let val of _value; let index = index\">\r\n <div nz-col nzSpan=\"18\">\r\n <nz-input-number [(ngModel)]=\"val.span\" style=\"width: 100%;\" [nzMax]=\"24\" [nzPlaceHolder]=\"'\u540D\u79F0'\"></nz-input-number>\r\n </div>\r\n <div nz-col nzSpan=\"6\">\r\n <div class=\"option-delete-box\" (click)=\"handleDelete(index)\">\r\n <button nz-button nzDanger><i nz-icon nzType=\"delete\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n <div nz-row>\r\n <div nz-col nzSpan=\"24\">\r\n <button nz-button (click)=\"handleAddCol()\">Add</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"type === 'collapse'\">\r\n <div nz-row class=\"option-change-box\" *ngFor=\"let val of _value; let index = index\">\r\n <div nz-col nzSpan=\"18\">\r\n <input type=\"text\" [(ngModel)]=\"val.label\" nz-input placeholder=\"Name\">\r\n </div>\r\n <div nz-col nzSpan=\"6\">\r\n <div class=\"option-delete-box\" (click)=\"handleDelete(index)\">\r\n <button nz-button nzDanger><i nz-icon nzType=\"delete\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <button nz-button (click)=\"handleAdd()\">Add</button>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{display:block;width:100%}:host .option-change-container>div>div>div{max-width:100%!important}:host .option-change-container>div>div>div input{width:100%;margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: NzInputNumberModule }, { kind: "component", type: i4.NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzSize", "nzMin", "nzMax", "nzParser", "nzPrecision", "nzPrecisionMode", "nzPlaceHolder", "nzStatus", "nzStep", "nzInputMode", "nzId", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBorderless", "nzFormatter"], outputs: ["nzBlur", "nzFocus"], exportAs: ["nzInputNumber"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i3.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i5.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i5$1.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i6.ɵ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: i7.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzGridModule }, { kind: "directive", type: i6$1.NzColDirective, selector: "[nz-col],nz-col,nz-form-control,nz-form-label", inputs: ["nzFlex", "nzSpan", "nzOrder", "nzOffset", "nzPush", "nzPull", "nzXs", "nzSm", "nzMd", "nzLg", "nzXl", "nzXXl"], exportAs: ["nzCol"] }, { kind: "directive", type: i6$1.NzRowDirective, selector: "[nz-row],nz-row,nz-form-item", inputs: ["nzAlign", "nzJustify", "nzGutter"], exportAs: ["nzRow"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DesignFormChangeOptionComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'app-design-form-change-option', imports: [
NzInputNumberModule, NzInputModule, FormsModule, CommonModule, NzIconModule, NzButtonModule, NzGridModule,
], providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DesignFormChangeOptionComponent),
multi: true
}
], template: "<div class=\"option-change-container\">\r\n <div *ngIf=\"type === 'option' || type === 'tab'\">\r\n <div nz-row [nzGutter]=\"6\" class=\"option-change-box\" *ngFor=\"let val of _value; let index = index\">\r\n <div nz-col nzSpan=\"12\">\r\n <input type=\"text\" [(ngModel)]=\"val.label\" nz-input placeholder=\"Label\">\r\n </div>\r\n <div nz-col nzSpan=\"6\">\r\n <input type=\"text\" [(ngModel)]=\"val.value\" nz-input placeholder=\"Value\">\r\n </div>\r\n <!-- <div nz-col nzSpan=\"6\">\r\n <input type=\"text\" [(ngModel)]=\"val.tooltip\" nz-input placeholder=\"tooltip\">\r\n </div> -->\r\n <div nz-col nzSpan=\"6\">\r\n <div class=\"option-delete-box\" (click)=\"handleDelete(index)\">\r\n <button nz-button nzDanger ><i nz-icon nzType=\"delete\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <button nz-button nzType=\"primary\" (click)=\"handleAdd()\">Add</button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"type === 'rules'\">\r\n <div nz-row class=\"option-change-box\" *ngFor=\"let val of _value; let index = index\">\r\n <ng-container *ngIf=\"index !== 0\">\r\n <div nz-col nzSpan=\"24\">\r\n <input type=\"text\" [(ngModel)]=\"val.message\" nz-input placeholder=\"Validation Tooltip\">\r\n </div>\r\n <div nz-col nzSpan=\"20\">\r\n <input type=\"text\" [(ngModel)]=\"val.pattern\" nz-input placeholder=\"Regex pattern\">\r\n </div>\r\n <div nz-col nzSpan=\"4\">\r\n <div class=\"option-delete-box\" (click)=\"handleDelete(index)\">\r\n <button nz-button nzType=\"primary\" nzDanger><i nz-icon nzType=\"delete\"></i></button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <button nz-button nzType=\"primary\" (click)=\"handleAddRules()\">Add</button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"type === 'colspan'\">\r\n <div nz-row class=\"option-change-box\" *ngFor=\"let val of _value; let index = index\">\r\n <div nz-col nzSpan=\"18\">\r\n <nz-input-number [(ngModel)]=\"val.span\" style=\"width: 100%;\" [nzMax]=\"24\" [nzPlaceHolder]=\"'\u540D\u79F0'\"></nz-input-number>\r\n </div>\r\n <div nz-col nzSpan=\"6\">\r\n <div class=\"option-delete-box\" (click)=\"handleDelete(index)\">\r\n <button nz-button nzDanger><i nz-icon nzType=\"delete\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n <div nz-row>\r\n <div nz-col nzSpan=\"24\">\r\n <button nz-button (click)=\"handleAddCol()\">Add</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"type === 'collapse'\">\r\n <div nz-row class=\"option-change-box\" *ngFor=\"let val of _value; let index = index\">\r\n <div nz-col nzSpan=\"18\">\r\n <input type=\"text\" [(ngModel)]=\"val.label\" nz-input placeholder=\"Name\">\r\n </div>\r\n <div nz-col nzSpan=\"6\">\r\n <div class=\"option-delete-box\" (click)=\"handleDelete(index)\">\r\n <button nz-button nzDanger><i nz-icon nzType=\"delete\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n <div nz-col nzSpan=\"24\">\r\n <button nz-button (click)=\"handleAdd()\">Add</button>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{display:block;width:100%}:host .option-change-container>div>div>div{max-width:100%!important}:host .option-change-container>div>div>div input{width:100%;margin-bottom:10px}\n"] }]
}], ctorParameters: () => [], propDecorators: { type: [{
type: Input
}] } });
class DesignFormItemCheckboxComponent {
constructor() {
//defaultValue使用NgForm实现
//@Input() defaultValue: string[] = []
this._first = [];
/**
* Invoked when the model has been changed
*/
this.onChange = (_) => { };
this.onTouched = () => { };
}
writeValue(obj) {
if (obj && Array.isArray(obj)) {
this._first = obj;
}
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
}
ngOnChanges(changes) {
// if (changes.defaultValue.currentValue.length > 0) {
// this.writeValue(changes.defaultValue.currentValue)
// }
}
log(e) {
this.onTouched();
this.onChange(e);
//console.log(e)
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DesignFormItemCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: DesignFormItemCheckboxComponent, isStandalone: true, selector: "app-design-form-item-checkbox", inputs: { options: "options" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DesignFormItemCheckboxComponent),
multi: true
}
], usesOnChanges: true, ngImport: i0, template: "<!-- <nz-checkbox-group [ngModel]=\"options\" (ngModelChange)=\"log($event)\"></nz-checkbox-group> -->\r\n<nz-checkbox-wrapper style=\"width: 100%;\" (nzOnChange)=\"log($event)\">\r\n <label nz-checkbox \r\n *ngFor=\"let option of options; let index = index\" \r\n [nzValue]=\"option.value\" [ngModel]=\"_first.includes(option.value)\"\r\n >\r\n {{option.label}}\r\n </label>\r\n</nz-checkbox-wrapper>", styles: [""], dependencies: [{ kind: "ngmodule", type: NzCheckboxModule }, { kind: "component", type: i1$2.NzCheckboxComponent, selector: "[nz-checkbox]", inputs: ["nzValue", "nzAutoFocus", "nzDisabled", "nzIndeterminate", "nzChecked", "nzId"], outputs: ["nzCheckedChange"], exportAs: ["nzCheckbox"] }, { kind: "component", type: i1$2.NzCheckboxWrapperComponent, selector: "nz-checkbox-wrapper", outputs: ["nzOnChange"], exportAs: ["nzCheckboxWrapper"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DesignFormItemCheckboxComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'app-design-form-item-checkbox', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DesignFormItemCheckboxComponent),
multi: true
}
], imports: [NzCheckboxModule, FormsModule, CommonModule, ReactiveFormsModule], template: "<!-- <nz-checkbox-group [ngModel]=\"options\" (ngModelChange)=\"log($event)\"></nz-checkbox-group> -->\r\n<nz-checkbox-wrapper style=\"width: 100%;\" (nzOnChange)=\"log($event)\">\r\n <label nz-checkbox \r\n *ngFor=\"let option of options; let index = index\" \r\n [nzValue]=\"option.value\" [ngModel]=\"_first.includes(option.value)\"\r\n >\r\n {{option.label}}\r\n </label>\r\n</nz-checkbox-wrapper>" }]
}], propDecorators: { options: [{
type: Input
}] } });
class DesignFormItemRadioComponent {
constructor() {
this.onChange = (_) => { };
this.onTouched = () => { };
this.isDisabled = false;
}
writeValue(value) {
this.value = value;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.isDisabled = isDisabled;
}
ngOnChanges(changes) {
}
onModelChange(e) {
this.value = e;
this.onTouched();
this.onChange(e);
//console.log(e)
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DesignFormItemRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: DesignFormItemRadioComponent, isStandalone: true, selector: "app-design-form-item-radio", inputs: { record: "record" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DesignFormItemRadioComponent),
multi: true
}
], usesOnChanges: true, ngImport: i0, template: "<nz-radio-group [ngModel]=\"value\" [nzDisabled]=\"isDisabled\"\r\n (ngModelChange)=\"onModelChange($event)\" [ngStyle]=\"{'width': record.options.width}\">\r\n <label *ngFor=\"let lbl of record.options.options\" nz-radio [nzValue]=\"lbl.value\">\r\n <ng-container *ngIf=\"!lbl.tooltip\">{{lbl.label}}</ng-container>\r\n <span style=\"display: inline-flex; align-items: center;\" *ngIf=\"lbl.tooltip\">{{lbl.label}}\r\n <i style=\"margin-left: 2px;\" nz-icon nzType=\"question-circle\" nzTheme=\"outline\" \r\n nz-tooltip [nzTooltipTitle]=\"lbl.tooltip\"></i>\r\n </span>\r\n </label>\r\n</nz-radio-group>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i3$1.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { kind: "ngmodule", type: NzRadioModule }, { kind: "component", type: i4$1.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus", "nz-radio-button"], exportAs: ["nzRadio"] }, { kind: "component", type: i4$1.NzRadioGroupComponent, selector: "nz-radio-group", inputs: ["nzDisabled", "nzButtonStyle", "nzSize", "nzName"], exportAs: ["nzRadioGroup"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i5.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DesignFormItemRadioComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'app-design-form-item-radio', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DesignFormItemRadioComponent),
multi: true
}
], imports: [
CommonModule, FormsModule,
NzToolTipModule, NzRadioModule, NzIconModule,
], template: "<nz-radio-group [ngModel]=\"value\" [nzDisabled]=\"isDisabled\"\r\n (ngModelChange)=\"onModelChange($event)\" [ngStyle]=\"{'width': record.options.width}\">\r\n <label *ngFor=\"let lbl of record.options.options\" nz-radio [nzValue]=\"lbl.value\">\r\n <ng-container *ngIf=\"!lbl.tooltip\">{{lbl.label}}</ng-container>\r\n <span style=\"display: inline-flex; align-items: center;\" *ngIf=\"lbl.tooltip\">{{lbl.label}}\r\n <i style=\"margin-left: 2px;\" nz-icon nzType=\"question-circle\" nzTheme=\"outline\" \r\n nz-tooltip [nzTooltipTitle]=\"lbl.tooltip\"></i>\r\n </span>\r\n </label>\r\n</nz-radio-group>" }]
}], propDecorators: { record //: AmberdataFormDesign.RadioType;
: [{
type: Input
}] } });
class HasRulePipe {
transform(rules) {
return rules.filter(rule => rule.pattern || rule.required).length > 0;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HasRulePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: HasRulePipe, isStandalone: true, name: "hasRule" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HasRulePipe, decorators: [{
type: Pipe,
args: [{ standalone: true, name: 'hasRule' }]
}] });
class DesignFormItemComponent {
get layoutConfig() {
return this.record.options?.overrideLayout ? this.record.options : this.formConfig;
}
constructor() {
this.infinity = Infinity;
this.captchaTooltipIcon = {
type: 'info-circle',
theme: 'twotone'
};
}
get isCol() {
return this.formConfig.layout === 'horizontal' && this.formConfig.labelLayout === 'flex';
}
get isFlex() {
return this.formConfig.layout === 'horizontal' && this.formConfig.labelLayout !== 'flex';
}
get required() {
return this.record['rules'] && this.record['rules'][0] && this.record['rules'][0]['required'] === true;
}
ngOnInit() {
}
ngOnChanges(changes) {
if (!this.form && this.record && this.record.key) {
this.form = new UntypedFormGroup({
[this.record.key]: new UntypedFormControl()
});
}
}
clearValue() {
this.form.get(this.record.key).setValue('');
}
getValue() {
return this.form.get(this.record.key).value;
}
valueLengthGtZero() {
const value = this.getValue();
return value && value.length;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DesignFormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: DesignFormItemComponent, isStandalone: true, selector: "app-design-form-item", inputs: { record: "record", formConfig: "formConfig", form: "form" }, usesOnChanges: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\r\n <nz-form-item *ngIf=\"\r\n record.type === 'input' ||\r\n record.type === 'textarea' ||\r\n record.type === 'number' ||\r\n record.type === 'radio' ||\r\n record.type === 'checkbox' ||\r\n record.type === 'select' ||\r\n record.type === 'rate' ||\r\n record.type === 'switch' ||\r\n record.type === 'date' ||\r\n record.type === 'slider'\"\r\n [ngStyle]=\"isFlex ? { display: 'flex' }:{}\">\r\n <nz-form-label\r\n *ngIf=\"isFlex && !record.help\"\r\n [ngStyle]=\"{ width: layoutConfig.labelWidth + 'px'}\"\r\n [nzRequired]=\"required\"\r\n >{{record.label}}</nz-form-label>\r\n <nz-form-label\r\n *ngIf=\"isFlex && record.help\"\r\n [ngStyle]=\"{ width: layoutConfig.labelWidth + 'px'}\"\r\n [nzTooltipTitle]=\"record.help\"\r\n [nzRequired]=\"required\"\r\n >{{record.label}}</nz-form-label>\r\n <nz-form-label [title]=\"record.label\"\r\n *ngIf=\"!isFlex && !record.help\"\r\n [nzXs]=\"isCol && layoutConfig.labelCol.xs\"\r\n [nzSm]=\"isCol && layoutConfig.labelCol.sm\"\r\n [nzMd]=\"isCol && layoutConfig.labelCol.md\"\r\n [nzLg]=\"isCol && layoutConfig.labelCol.lg\"\r\n [nzXl]=\"isCol && layoutConfig.labelCol.xl\"\r\n [nzXXl]=\"isCol && layoutConfig.labelCol.xxl\"\r\n [nzRequired]=\"required\"\r\n >{{record.label}}</nz-form-label>\r\n <nz-form-label [title]=\"record.label\"\r\n *ngIf=\"!isFlex && record.help\"\r\n [nzXs]=\"isCol && layoutConfig.labelCol.xs\"\r\n [nzSm]=\"isCol && layoutConfig.labelCol.sm\"\r\n [nzMd]=\"isCol && layoutConfig.labelCol.md\"\r\n [nzLg]=\"isCol && layoutConfig.labelCol.lg\"\r\n [nzXl]=\"isCol && layoutConfig.labelCol.xl\"\r\n [nzXXl]=\"isCol && layoutConfig.labelCol.xxl\"\r\n nz-tooltip\r\n [nzTooltipTitle]=\"record.help\"\r\n [nzTooltipIcon]=\"captchaTooltipIcon\"\r\n [nzRequired]=\"required\"\r\n >{{record.label}}</nz-form-label>\r\n <nz-form-control\r\n [ngStyle]=\"isFlex ? { 'flex-grow': '1', width: 'auto' } : {}\"\r\n [nzXs]=\"isCol && layoutConfig.wrapperCol.xs\"\r\n [nzSm]=\"isCol && layoutConfig.wrapperCol.sm\"\r\n [nzMd]=\"isCol && layoutConfig.wrapperCol.md\"\r\n [nzLg]=\"isCol && layoutConfig.wrapperCol.lg\"\r\n [nzXl]=\"isCol && layoutConfig.wrapperCol.xl\"\r\n [nzXXl]=\"isCol && layoutConfig.wrapperCol.xxl\"\r\n [nzHasFeedback]=\"record.rules | hasRule\"\r\n [nzErrorTip]=\"userErrorTpl\">\r\n <ng-template #userErrorTpl let-control>\r\n <ng-container>\r\n {{control.errors?.message}}\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"control.hasError('duplicated')\">\r\n The username is redundant!\r\n </ng-container> -->\r\n </ng-template>\r\n <ng-container *ngIf=\"record.type == 'input'\">\r\n <nz-input-group [nzSuffix]=\"suffixTemplateInfo\" [ngStyle]=\"{'width': record.options.width}\">\r\n <input *ngIf=\"record.options.maxLength\" nz-input [formControlName]=\"record.key\"\r\n [placeholder]=\"record.options.placeholder || ''\"\r\n [maxLength]=\"record.options.maxLength\" />\r\n <input *ngIf=\"!record.options.maxLength\" nz-input [formControlName]=\"record.key\" \r\n [placeholder]=\"record.options.placeholder || ''\" />\r\n </nz-input-group>\r\n </ng-container>\r\n <ng-container *ngIf=\"record.type == 'textarea'\">\r\n <nz-input-group [nzSuffix]=\"suffixTemplateInfo\" class=\"ant-input-affix-wrapper-textarea-with-clear-btn\" [ngStyle]=\"{'width': record.options.width}\">\r\n <textarea nz-input *ngIf=\"record.options.maxLength\" [formControlName]=\"record.key\"\r\n [placeholder]=\"record.options.placeholder || ''\" [maxLength]=\"record.options.maxLength\"\r\n [nzAutosize]=\"{ minRows: record.options.minRows, maxRows: record.options.maxRows }\"></textarea>\r\n <textarea nz-input *ngIf=\"!record.options.maxLength\" [formControlName]=\"record.key\" \r\n [placeholder]=\"record.options.placeholder || ''\" [nzAutosize]=\"{ minRows: record.options.minRows, maxRows: record.options.maxRows }\"\r\n ></textarea>\r\n </nz-input-group>\r\n </ng-container>\r\n <ng-template #suffixTemplateInfo>\r\n <i nz-icon\r\n class=\"ant-input-textarea-clear-icon\"\r\n style=\"margin-right: 4px;\"\r\n nzType=\"close-circle\"\r\n *ngIf=\"(record.type == 'textarea' || record.type == 'input') && record.options.clearable && valueLengthGtZero()\"\r\n (click)=\"clearValue()\"\r\n ></i>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"record.type == 'number'\">\r\n <nz-input-number [formControlName]=\"record.key\" [ngStyle]=\"{'width': record.options.width}\"\r\n [nzPlaceHolder]=\"record.options.placeholder\" \r\n [nzPrecision]=\"record.options.precision\" [nzStep]=\"record.options.step\"\r\n ></nz-input-number>\r\n </ng-container>\r\n <ng-container *ngIf=\"record.type == 'radio'\">\r\n <app-design-form-item-radio [formControlName]=\"record.key\" [record]=\"record\"></app-design-form-item-radio>\r\n </ng-container>\r\n <ng-container *ngIf=\"record.type == 'checkbox'\">\r\n <!-- <nz-checkbox-group [ngModel]=\"record.options.options\" (ngModelChange)=\"log($event)\"></nz-checkbox-group> -->\r\n <app-design-form-item-checkbox \r\n [formControlName]=\"record.key\" [options]=\"record.options.options\"></app-design-form-item-checkbox>\r\n </ng-container>\r\n <ng-container *ngIf=\"record.type == 'select'\">\r\n <nz-select [formControlName]=\"record.key\">\r\n <nz-option *ngFor=\"let lbl of record.options.options\" \r\n [nzValue]=\"lbl.value\" [nzLabel]=\"lbl.label\"></nz-option>\r\n </nz-select>\r\n </ng-container>\r\n <ng-container *ngIf=\"record.type == 'rate'\">\r\n <nz-rate [formControlName]=\"record.key\" [nzAllowHalf]=\"record.options.allowHalf\"></nz-rate>\r\n </ng-container>\r\n <ng-container *ngIf=\"record.type == 'slider'\">\r\n <nz-slider\r\n [formControlName]=\"record.key\"></nz-slider>\r\n </ng-container>\r\n <ng-container *ngIf=\"record.type == 'switch'\">\r\n <nz-switch\r\n [formControlName]=\"record.key\"></nz-switch>\r\n </ng-container>\r\n <ng-container *ngIf=\"record.type == 'date'\">\r\n <nz-date-picker\r\n [ngStyle]=\"{'width': record.options.width}\"\r\n [formControlName]=\"record.key\"\r\n [nzMode]=\"record.options.mode\"\r\n [nzPlaceHolder]=\"record.options.placeholder\"\r\n ></nz-date-picker>\r\n </ng-container>\r\n </nz-form-control>\r\n </nz-form-item>\r\n\r\n <ng-container *ngIf=\"record.type === 'divider'\">\r\n <nz-divider [nzText]=\"record.label\" [nzOrientation]=\"record.options.orientation || 'center'\"></nz-divider>\r\n </ng-container>\r\n <ng-container *ngIf=\"record.type === 'alert'\">\r\n <nz-form-item>\r\n <nz-form-control>\r\n <nz-alert [nzMessage]=\"record.label\"\r\n [nzDescription]=\"record.options.description\"\r\n [nzType]=\"record.options.type\"\r\n [nzShowIcon]=\"record.options.showIcon\"\r\n [nzCloseable]=\"record.options.closable\"\r\n [nzBanner]=\"record.options.banner\">\r\n </nz-alert>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </ng-container>\r\n <ng-container *ngIf=\"record.type === 'text'\">\r\n <nz-form-item>\r\n <nz-form-control>\r\n <div [ngStyle]=\"{ textAlign: record.options.textAlign }\">\r\n <label\r\