ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
242 lines (235 loc) • 13.3 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, HostBinding, HostListener, forwardRef, 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 i1$1 from 'ng-zorro-antd-mobile/list';
import { ListModule } from 'ng-zorro-antd-mobile/list';
import { Subject, merge } from 'rxjs';
import { takeUntil, startWith } from 'rxjs/operators';
class RadioComponent {
get checked() {
return this._checked;
}
set checked(value) {
this._checked = value;
this.updateClassMap();
}
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = value;
this.updateClassMap();
}
onClick(event) {
event.preventDefault();
if (!this._disabled && !this._checked) {
this.updateValue(true);
}
}
constructor() {
this.prefixCls = 'am-radio';
this.classMap = {
[this.prefixCls]: true,
[`${this.prefixCls}-checked`]: this.checked,
[`${this.prefixCls}-disabled`]: this.disabled
};
this._checked = false;
this._disabled = false;
this.onChange = new EventEmitter();
this.radioWrapper = true;
}
updateValue(checkValue) {
this.checked = checkValue;
this.onChange.emit({
name: this.name,
value: this.value
});
}
ngOnInit() {
this.updateClassMap();
}
updateClassMap() {
this.classMap = {
[this.prefixCls]: true,
[`${this.prefixCls}-checked`]: this.checked,
[`${this.prefixCls}-disabled`]: this.disabled
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: RadioComponent, selector: "[Radio], [nzm-radio]", inputs: { name: "name", value: "value", checked: "checked", disabled: "disabled" }, outputs: { onChange: "onChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.am-radio-wrapper": "this.radioWrapper" } }, ngImport: i0, template: "<span [ngClass]=\"classMap\">\n <input\n type=\"radio\"\n class=\"{{ prefixCls }}-input\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n />\n <span class=\"{{ prefixCls }}-inner\"></span>\n</span>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RadioComponent, decorators: [{
type: Component,
args: [{ selector: '[Radio], [nzm-radio]', preserveWhitespaces: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [ngClass]=\"classMap\">\n <input\n type=\"radio\"\n class=\"{{ prefixCls }}-input\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n />\n <span class=\"{{ prefixCls }}-inner\"></span>\n</span>\n<ng-content></ng-content>\n" }]
}], ctorParameters: () => [], propDecorators: { name: [{
type: Input
}], value: [{
type: Input
}], checked: [{
type: Input
}], disabled: [{
type: Input
}], onChange: [{
type: Output
}], radioWrapper: [{
type: HostBinding,
args: ['class.am-radio-wrapper']
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class RadioItemComponent {
get checked() {
return this._checked;
}
set checked(value) {
this._checked = value;
this.cdr.markForCheck();
}
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = value;
this.cdr.markForCheck();
}
constructor(cdr) {
this.cdr = cdr;
this.select$ = new Subject();
this.prefixCls = 'am-radio';
this._checked = false;
this._disabled = false;
this.wrap = false;
this.error = false;
this.multipleLine = false;
this.platform = 'ios';
this.align = 'middle';
}
onRadioItemClick(event) { }
change(event) {
if (!this.disabled && !this.checked) {
this.select$.next(this);
}
}
markForCheck() {
this.cdr.markForCheck();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RadioItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: RadioItemComponent, selector: "RadioItem, nzm-radio-item", inputs: { name: "name", value: "value", arrow: "arrow", thumb: "thumb", wrap: "wrap", error: "error", multipleLine: "multipleLine", platform: "platform", align: "align", disabled: "disabled" }, ngImport: i0, template: "<ListItem\n [wrap]=\"wrap\"\n [align]=\"align\"\n [arrow]=\"arrow\"\n [error]=\"error\"\n [extra]=\"radio\"\n [thumb]=\"thumb\"\n [disabled]=\"disabled\"\n [platform]=\"platform\"\n [multipleLine]=\"multipleLine\"\n [className]=\"'am-radio-item ' + (disabled ? 'am-radio-item-disabled' : '')\"\n (onClick)=\"onRadioItemClick($event)\"\n>\n <ng-content></ng-content>\n</ListItem>\n<ng-template #radio>\n <label\n Radio\n [name]=\"name\"\n [value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (onChange)=\"change($event)\"\n ></label>\n</ng-template>\n", dependencies: [{ kind: "component", type: i1$1.ListItemComponent, selector: "ListItem, nzm-list-item", inputs: ["extra", "className", "arrow", "multipleLine", "error", "wrap", "align", "platform", "disabled", "thumb"], outputs: ["onClick"] }, { kind: "component", type: RadioComponent, selector: "[Radio], [nzm-radio]", inputs: ["name", "value", "checked", "disabled"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RadioItemComponent, decorators: [{
type: Component,
args: [{ selector: 'RadioItem, nzm-radio-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ListItem\n [wrap]=\"wrap\"\n [align]=\"align\"\n [arrow]=\"arrow\"\n [error]=\"error\"\n [extra]=\"radio\"\n [thumb]=\"thumb\"\n [disabled]=\"disabled\"\n [platform]=\"platform\"\n [multipleLine]=\"multipleLine\"\n [className]=\"'am-radio-item ' + (disabled ? 'am-radio-item-disabled' : '')\"\n (onClick)=\"onRadioItemClick($event)\"\n>\n <ng-content></ng-content>\n</ListItem>\n<ng-template #radio>\n <label\n Radio\n [name]=\"name\"\n [value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (onChange)=\"change($event)\"\n ></label>\n</ng-template>\n" }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
type: Input
}], value: [{
type: Input
}], arrow: [{
type: Input
}], thumb: [{
type: Input
}], wrap: [{
type: Input
}], error: [{
type: Input
}], multipleLine: [{
type: Input
}], platform: [{
type: Input
}], align: [{
type: Input
}], disabled: [{
type: Input
}] } });
const RADIO_ITEM_GROUP_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RadioItemGroupComponent),
multi: true
};
class RadioItemGroupComponent {
constructor(cdr) {
this.cdr = cdr;
this.destroy$ = new Subject();
this.onChange = new EventEmitter();
}
updateChildrenStatus() {
if (this.radioItems && typeof this.selectedValue !== 'undefined' && null !== this.selectedValue) {
Promise.resolve().then(() => {
this.radioItems.forEach(radioItem => {
radioItem.checked = radioItem.value === this.selectedValue;
radioItem.markForCheck();
});
});
}
}
ngAfterContentInit() {
this.radioItems.changes
.pipe(startWith(null), takeUntil(this.destroy$))
.subscribe(() => {
this.updateChildrenStatus();
if (this.selectSubscription) {
this.selectSubscription.unsubscribe();
}
this.selectSubscription = merge(...this.radioItems.map(radioItem => radioItem.select$))
.pipe(takeUntil(this.destroy$))
.subscribe(radioItem => {
if (typeof this.selectedValue !== 'undefined' && null !== this.selectedValue) {
this.selectedValue = radioItem.value;
this._ngModelOnChange(radioItem.value);
this.updateChildrenStatus();
if (this.onChange) {
this.onChange.emit({ name: radioItem.name, value: radioItem.value });
}
}
});
});
}
ngOnDestroy() {
this.destroy$.next('');
this.destroy$.complete();
}
writeValue(value) {
if (typeof value !== 'undefined' && null !== value) {
this.selectedValue = value;
this.updateChildrenStatus();
this.cdr.markForCheck();
}
}
registerOnChange(fn) {
this._ngModelOnChange = fn;
}
registerOnTouched(fn) {
this._ngModelOnTouched = fn;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RadioItemGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: RadioItemGroupComponent, selector: "RadioItemGroup, nzm-radio-item-group", outputs: { onChange: "onChange" }, providers: [RADIO_ITEM_GROUP_VALUE_ACCESSOR], queries: [{ propertyName: "radioItems", predicate: i0.forwardRef(() => RadioItemComponent) }], ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RadioItemGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'RadioItemGroup, nzm-radio-item-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [RADIO_ITEM_GROUP_VALUE_ACCESSOR], template: "<ng-content></ng-content>\n" }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { radioItems: [{
type: ContentChildren,
args: [forwardRef(() => RadioItemComponent)]
}], onChange: [{
type: Output
}] } });
class RadioModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: RadioModule, declarations: [RadioComponent, RadioItemComponent, RadioItemGroupComponent], imports: [CommonModule, FormsModule, ListModule], exports: [RadioComponent, RadioItemComponent, RadioItemGroupComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RadioModule, imports: [CommonModule, FormsModule, ListModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RadioModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, FormsModule, ListModule],
declarations: [RadioComponent, RadioItemComponent, RadioItemGroupComponent],
exports: [RadioComponent, RadioItemComponent, RadioItemGroupComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { RadioComponent, RadioItemComponent, RadioItemGroupComponent, RadioModule };
//# sourceMappingURL=ng-zorro-antd-mobile-radio.mjs.map