@xmagic/nz-formly
Version:
基于ng-zorro-antd UI 扩展的ngx-formly组件库
139 lines (135 loc) • 12.9 kB
JavaScript
import { ChangeDetectionStrategy, Component, Optional } from '@angular/core';
import { FieldType } 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 "@angular/forms";
import * as i4 from "ng-zorro-antd/radio";
import * as i5 from "ng-zorro-antd/icon";
import * as i6 from "ng-zorro-antd/core/transition-patch";
import * as i7 from "@ngx-formly/core";
import * as i8 from "ng-zorro-antd/core/outlet";
import * as i9 from "@xmagic/nzx-antd/pipe";
export class FormlyFieldRadioComponent extends FieldType {
fieldTemplates;
defaultOptions = {
props: { nzSize: 'default', options: [] }
};
constructor(fieldTemplates) {
super();
this.fieldTemplates = fieldTemplates;
}
get labelTemplate() {
return resolveTplName(this.props, this.fieldTemplates, 'labelTemplate');
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormlyFieldRadioComponent, deps: [{ token: i1.FormlyBoxTemplates, optional: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormlyFieldRadioComponent, selector: "nz-formly-radio-component", usesInheritance: true, ngImport: i0, template: `
<nz-radio-group
[formControl]="$any(formControl)"
[formlyAttributes]="field"
[nzName]="props.nzName"
[nzDisabled]="props.nzDisabled || props.disabled || formControl?.disabled"
[nzSize]="props.nzSize"
[nzButtonStyle]="props.nzButtonStyle"
ngDefaultControl
>
<ng-container *ngIf="props.type !== 'button'; else buttonTemplate">
<ng-container *ngFor="let item of props.options | toAsync: $any(props) | async">
<label
*ngIf="item.hide !== false"
nz-radio
[formlyAttributes]="{ props: item }"
[nzDisabled]="item.disabled"
[nzValue]="item.value"
>
<i *ngIf="item.beforeIcon" nz-icon [nzType]="item.beforeIcon"></i>
{{ item.label }}
<i *ngIf="item.afterIcon" nz-icon [nzType]="item.afterIcon"></i>
</label>
</ng-container>
</ng-container>
<ng-template #buttonTemplate>
<ng-container *ngFor="let item of props.options | toAsync: $any(props) | async | defaultify: []">
<label
*ngIf="item.hide !== false"
nz-radio-button
[formlyAttributes]="{ props: item }"
[nzDisabled]="item.disabled"
[nzValue]="item.value"
>
<i *ngIf="item.beforeIcon" nz-icon [nzType]="item.beforeIcon"></i>
<ng-container *ngIf="labelTemplate; else strLabelTpl">
<ng-container *nzStringTemplateOutlet="labelTemplate; context: { $implicit: item, field: field }">
<span>{{ labelTemplate }}</span>
</ng-container>
</ng-container>
<ng-template #strLabelTpl>
<span>{{ item.label }}</span>
</ng-template>
<i *ngIf="item.afterIcon" nz-icon [nzType]="item.afterIcon"></i>
</label>
</ng-container>
</ng-template>
</nz-radio-group>
`, isInline: true, 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: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus", "nz-radio-button"], exportAs: ["nzRadio"] }, { kind: "component", type: i4.NzRadioGroupComponent, selector: "nz-radio-group", inputs: ["nzDisabled", "nzButtonStyle", "nzSize", "nzName"], exportAs: ["nzRadioGroup"] }, { kind: "directive", type: i5.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { 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.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: i8.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.DefaultifyPipe, name: "defaultify" }, { kind: "pipe", type: i9.ToAsyncPipe, name: "toAsync" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormlyFieldRadioComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-formly-radio-component',
template: `
<nz-radio-group
[formControl]="$any(formControl)"
[formlyAttributes]="field"
[nzName]="props.nzName"
[nzDisabled]="props.nzDisabled || props.disabled || formControl?.disabled"
[nzSize]="props.nzSize"
[nzButtonStyle]="props.nzButtonStyle"
ngDefaultControl
>
<ng-container *ngIf="props.type !== 'button'; else buttonTemplate">
<ng-container *ngFor="let item of props.options | toAsync: $any(props) | async">
<label
*ngIf="item.hide !== false"
nz-radio
[formlyAttributes]="{ props: item }"
[nzDisabled]="item.disabled"
[nzValue]="item.value"
>
<i *ngIf="item.beforeIcon" nz-icon [nzType]="item.beforeIcon"></i>
{{ item.label }}
<i *ngIf="item.afterIcon" nz-icon [nzType]="item.afterIcon"></i>
</label>
</ng-container>
</ng-container>
<ng-template #buttonTemplate>
<ng-container *ngFor="let item of props.options | toAsync: $any(props) | async | defaultify: []">
<label
*ngIf="item.hide !== false"
nz-radio-button
[formlyAttributes]="{ props: item }"
[nzDisabled]="item.disabled"
[nzValue]="item.value"
>
<i *ngIf="item.beforeIcon" nz-icon [nzType]="item.beforeIcon"></i>
<ng-container *ngIf="labelTemplate; else strLabelTpl">
<ng-container *nzStringTemplateOutlet="labelTemplate; context: { $implicit: item, field: field }">
<span>{{ labelTemplate }}</span>
</ng-container>
</ng-container>
<ng-template #strLabelTpl>
<span>{{ item.label }}</span>
</ng-template>
<i *ngIf="item.afterIcon" nz-icon [nzType]="item.afterIcon"></i>
</label>
</ng-container>
</ng-template>
</nz-radio-group>
`,
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: () => [{ type: i1.FormlyBoxTemplates, decorators: [{
type: Optional
}] }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vbGliL3JhZGlvL3JhZGlvLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3RSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDN0MsT0FBTyxFQUFzQixjQUFjLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQzs7Ozs7Ozs7Ozs7QUF5RDlFLE1BQU0sT0FBTyx5QkFBMEIsU0FBUSxTQUFTO0lBS3ZCO0lBSnRCLGNBQWMsR0FBRztRQUN4QixLQUFLLEVBQUUsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE9BQU8sRUFBRSxFQUFFLEVBQUU7S0FDMUMsQ0FBQztJQUVGLFlBQStCLGNBQWtDO1FBQy9ELEtBQUssRUFBRSxDQUFDO1FBRHFCLG1CQUFjLEdBQWQsY0FBYyxDQUFvQjtJQUVqRSxDQUFDO0lBRUQsSUFBSSxhQUFhO1FBQ2YsT0FBTyxjQUFjLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsY0FBYyxFQUFFLGVBQWUsQ0FBQyxDQUFDO0lBQzFFLENBQUM7d0dBWFUseUJBQXlCOzRGQUF6Qix5QkFBeUIsd0ZBckQxQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FrRFQ7OzRGQUdVLHlCQUF5QjtrQkF2RHJDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLDJCQUEyQjtvQkFDckMsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWtEVDtvQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtpQkFDaEQ7OzBCQU1jLFFBQVEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBPcHRpb25hbCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRmllbGRUeXBlIH0gZnJvbSAnQG5neC1mb3JtbHkvY29yZSc7XG5pbXBvcnQgeyBGb3JtbHlCb3hUZW1wbGF0ZXMsIHJlc29sdmVUcGxOYW1lIH0gZnJvbSAnQHhtYWdpYy9uei1mb3JtbHkvY29tbW9uJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbnotZm9ybWx5LXJhZGlvLWNvbXBvbmVudCcsXG4gIHRlbXBsYXRlOiBgXG4gICAgPG56LXJhZGlvLWdyb3VwXG4gICAgICBbZm9ybUNvbnRyb2xdPVwiJGFueShmb3JtQ29udHJvbClcIlxuICAgICAgW2Zvcm1seUF0dHJpYnV0ZXNdPVwiZmllbGRcIlxuICAgICAgW256TmFtZV09XCJwcm9wcy5uek5hbWVcIlxuICAgICAgW256RGlzYWJsZWRdPVwicHJvcHMubnpEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZCB8fCBmb3JtQ29udHJvbD8uZGlzYWJsZWRcIlxuICAgICAgW256U2l6ZV09XCJwcm9wcy5uelNpemVcIlxuICAgICAgW256QnV0dG9uU3R5bGVdPVwicHJvcHMubnpCdXR0b25TdHlsZVwiXG4gICAgICBuZ0RlZmF1bHRDb250cm9sXG4gICAgPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInByb3BzLnR5cGUgIT09ICdidXR0b24nOyBlbHNlIGJ1dHRvblRlbXBsYXRlXCI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGl0ZW0gb2YgcHJvcHMub3B0aW9ucyB8IHRvQXN5bmM6ICRhbnkocHJvcHMpIHwgYXN5bmNcIj5cbiAgICAgICAgICA8bGFiZWxcbiAgICAgICAgICAgICpuZ0lmPVwiaXRlbS5oaWRlICE9PSBmYWxzZVwiXG4gICAgICAgICAgICBuei1yYWRpb1xuICAgICAgICAgICAgW2Zvcm1seUF0dHJpYnV0ZXNdPVwieyBwcm9wczogaXRlbSB9XCJcbiAgICAgICAgICAgIFtuekRpc2FibGVkXT1cIml0ZW0uZGlzYWJsZWRcIlxuICAgICAgICAgICAgW256VmFsdWVdPVwiaXRlbS52YWx1ZVwiXG4gICAgICAgICAgPlxuICAgICAgICAgICAgPGkgKm5nSWY9XCJpdGVtLmJlZm9yZUljb25cIiBuei1pY29uIFtuelR5cGVdPVwiaXRlbS5iZWZvcmVJY29uXCI+PC9pPlxuICAgICAgICAgICAge3sgaXRlbS5sYWJlbCB9fVxuICAgICAgICAgICAgPGkgKm5nSWY9XCJpdGVtLmFmdGVySWNvblwiIG56LWljb24gW256VHlwZV09XCJpdGVtLmFmdGVySWNvblwiPjwvaT5cbiAgICAgICAgICA8L2xhYmVsPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgICA8bmctdGVtcGxhdGUgI2J1dHRvblRlbXBsYXRlPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBpdGVtIG9mIHByb3BzLm9wdGlvbnMgfCB0b0FzeW5jOiAkYW55KHByb3BzKSB8IGFzeW5jIHwgZGVmYXVsdGlmeTogW11cIj5cbiAgICAgICAgICA8bGFiZWxcbiAgICAgICAgICAgICpuZ0lmPVwiaXRlbS5oaWRlICE9PSBmYWxzZVwiXG4gICAgICAgICAgICBuei1yYWRpby1idXR0b25cbiAgICAgICAgICAgIFtmb3JtbHlBdHRyaWJ1dGVzXT1cInsgcHJvcHM6IGl0ZW0gfVwiXG4gICAgICAgICAgICBbbnpEaXNhYmxlZF09XCJpdGVtLmRpc2FibGVkXCJcbiAgICAgICAgICAgIFtuelZhbHVlXT1cIml0ZW0udmFsdWVcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxpICpuZ0lmPVwiaXRlbS5iZWZvcmVJY29uXCIgbnotaWNvbiBbbnpUeXBlXT1cIml0ZW0uYmVmb3JlSWNvblwiPjwvaT5cbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJsYWJlbFRlbXBsYXRlOyBlbHNlIHN0ckxhYmVsVHBsXCI+XG4gICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm56U3RyaW5nVGVtcGxhdGVPdXRsZXQ9XCJsYWJlbFRlbXBsYXRlOyBjb250ZXh0OiB7ICRpbXBsaWNpdDogaXRlbSwgZmllbGQ6IGZpZWxkIH1cIj5cbiAgICAgICAgICAgICAgICA8c3Bhbj57eyBsYWJlbFRlbXBsYXRlIH19PC9zcGFuPlxuICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgICAgICAgICA8bmctdGVtcGxhdGUgI3N0ckxhYmVsVHBsPlxuICAgICAgICAgICAgICA8c3Bhbj57eyBpdGVtLmxhYmVsIH19PC9zcGFuPlxuICAgICAgICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICAgIDxpICpuZ0lmPVwiaXRlbS5hZnRlckljb25cIiBuei1pY29uIFtuelR5cGVdPVwiaXRlbS5hZnRlckljb25cIj48L2k+XG4gICAgICAgICAgPC9sYWJlbD5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICA8L25nLXRlbXBsYXRlPlxuICAgIDwvbnotcmFkaW8tZ3JvdXA+XG4gIGAsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIEZvcm1seUZpZWxkUmFkaW9Db21wb25lbnQgZXh0ZW5kcyBGaWVsZFR5cGUge1xuICBvdmVycmlkZSBkZWZhdWx0T3B0aW9ucyA9IHtcbiAgICBwcm9wczogeyBuelNpemU6ICdkZWZhdWx0Jywgb3B0aW9uczogW10gfVxuICB9O1xuXG4gIGNvbnN0cnVjdG9yKEBPcHRpb25hbCgpIHB1YmxpYyBmaWVsZFRlbXBsYXRlczogRm9ybWx5Qm94VGVtcGxhdGVzKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG4gIGdldCBsYWJlbFRlbXBsYXRlKCkge1xuICAgIHJldHVybiByZXNvbHZlVHBsTmFtZSh0aGlzLnByb3BzLCB0aGlzLmZpZWxkVGVtcGxhdGVzLCAnbGFiZWxUZW1wbGF0ZScpO1xuICB9XG59XG4iXX0=