ng-zorro-antd-radio.mjs 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
  1. import * as i0 from '@angular/core';
  2. import { Injectable, forwardRef, booleanAttribute, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, ViewChild, NgModule } from '@angular/core';
  3. import { NG_VALUE_ACCESSOR } from '@angular/forms';
  4. import { ReplaySubject, Subject } from 'rxjs';
  5. import { takeUntil } from 'rxjs/operators';
  6. import * as i2 from '@angular/cdk/bidi';
  7. import { Directionality } from '@angular/cdk/bidi';
  8. import { NzFormStatusService } from 'ng-zorro-antd/core/form';
  9. import { fromEventOutsideAngular } from 'ng-zorro-antd/core/util';
  10. import * as i1 from '@angular/cdk/a11y';
  11. /**
  12. * Use of this source code is governed by an MIT-style license that can be
  13. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  14. */
  15. class NzRadioService {
  16. selected$ = new ReplaySubject(1);
  17. touched$ = new Subject();
  18. disabled$ = new ReplaySubject(1);
  19. name$ = new ReplaySubject(1);
  20. touch() {
  21. this.touched$.next();
  22. }
  23. select(value) {
  24. this.selected$.next(value);
  25. }
  26. setDisabled(value) {
  27. this.disabled$.next(value);
  28. }
  29. setName(value) {
  30. this.name$.next(value);
  31. }
  32. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzRadioService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
  33. static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzRadioService });
  34. }
  35. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzRadioService, decorators: [{
  36. type: Injectable
  37. }] });
  38. class NzRadioGroupComponent {
  39. cdr;
  40. nzRadioService;
  41. directionality;
  42. value = null;
  43. destroy$ = new Subject();
  44. isNzDisableFirstChange = true;
  45. onChange = () => { };
  46. onTouched = () => { };
  47. nzDisabled = false;
  48. nzButtonStyle = 'outline';
  49. nzSize = 'default';
  50. nzName = null;
  51. dir = 'ltr';
  52. constructor(cdr, nzRadioService, directionality) {
  53. this.cdr = cdr;
  54. this.nzRadioService = nzRadioService;
  55. this.directionality = directionality;
  56. }
  57. ngOnInit() {
  58. this.nzRadioService.selected$.pipe(takeUntil(this.destroy$)).subscribe(value => {
  59. if (this.value !== value) {
  60. this.value = value;
  61. this.onChange(this.value);
  62. }
  63. });
  64. this.nzRadioService.touched$.pipe(takeUntil(this.destroy$)).subscribe(() => {
  65. Promise.resolve().then(() => this.onTouched());
  66. });
  67. this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  68. this.dir = direction;
  69. this.cdr.detectChanges();
  70. });
  71. this.dir = this.directionality.value;
  72. }
  73. ngOnChanges(changes) {
  74. const { nzDisabled, nzName } = changes;
  75. if (nzDisabled) {
  76. this.nzRadioService.setDisabled(this.nzDisabled);
  77. }
  78. if (nzName) {
  79. this.nzRadioService.setName(this.nzName);
  80. }
  81. }
  82. ngOnDestroy() {
  83. this.destroy$.next(true);
  84. this.destroy$.complete();
  85. }
  86. writeValue(value) {
  87. this.value = value;
  88. this.nzRadioService.select(value);
  89. this.cdr.markForCheck();
  90. }
  91. registerOnChange(fn) {
  92. this.onChange = fn;
  93. }
  94. registerOnTouched(fn) {
  95. this.onTouched = fn;
  96. }
  97. setDisabledState(isDisabled) {
  98. this.nzDisabled = (this.isNzDisableFirstChange && this.nzDisabled) || isDisabled;
  99. this.isNzDisableFirstChange = false;
  100. this.nzRadioService.setDisabled(this.nzDisabled);
  101. this.cdr.markForCheck();
  102. }
  103. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NzRadioService }, { token: i2.Directionality }], target: i0.ɵɵFactoryTarget.Component });
  104. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", type: NzRadioGroupComponent, isStandalone: true, selector: "nz-radio-group", inputs: { nzDisabled: ["nzDisabled", "nzDisabled", booleanAttribute], nzButtonStyle: "nzButtonStyle", nzSize: "nzSize", nzName: "nzName" }, host: { properties: { "class.ant-radio-group-large": "nzSize === 'large'", "class.ant-radio-group-small": "nzSize === 'small'", "class.ant-radio-group-solid": "nzButtonStyle === 'solid'", "class.ant-radio-group-rtl": "dir === 'rtl'" }, classAttribute: "ant-radio-group" }, providers: [
  105. NzRadioService,
  106. {
  107. provide: NG_VALUE_ACCESSOR,
  108. useExisting: forwardRef(() => NzRadioGroupComponent),
  109. multi: true
  110. }
  111. ], exportAs: ["nzRadioGroup"], usesOnChanges: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  112. }
  113. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzRadioGroupComponent, decorators: [{
  114. type: Component,
  115. args: [{
  116. selector: 'nz-radio-group',
  117. exportAs: 'nzRadioGroup',
  118. preserveWhitespaces: false,
  119. template: ` <ng-content></ng-content> `,
  120. encapsulation: ViewEncapsulation.None,
  121. changeDetection: ChangeDetectionStrategy.OnPush,
  122. providers: [
  123. NzRadioService,
  124. {
  125. provide: NG_VALUE_ACCESSOR,
  126. useExisting: forwardRef(() => NzRadioGroupComponent),
  127. multi: true
  128. }
  129. ],
  130. host: {
  131. class: 'ant-radio-group',
  132. '[class.ant-radio-group-large]': `nzSize === 'large'`,
  133. '[class.ant-radio-group-small]': `nzSize === 'small'`,
  134. '[class.ant-radio-group-solid]': `nzButtonStyle === 'solid'`,
  135. '[class.ant-radio-group-rtl]': `dir === 'rtl'`
  136. }
  137. }]
  138. }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: NzRadioService }, { type: i2.Directionality }], propDecorators: { nzDisabled: [{
  139. type: Input,
  140. args: [{ transform: booleanAttribute }]
  141. }], nzButtonStyle: [{
  142. type: Input
  143. }], nzSize: [{
  144. type: Input
  145. }], nzName: [{
  146. type: Input
  147. }] } });
  148. class NzRadioComponent {
  149. ngZone;
  150. elementRef;
  151. cdr;
  152. focusMonitor;
  153. isNgModel = false;
  154. destroy$ = new Subject();
  155. isNzDisableFirstChange = true;
  156. directionality = inject(Directionality);
  157. nzRadioService = inject(NzRadioService, { optional: true });
  158. nzFormStatusService = inject(NzFormStatusService, { optional: true });
  159. isChecked = false;
  160. name = null;
  161. onChange = () => { };
  162. onTouched = () => { };
  163. inputElement;
  164. nzValue = null;
  165. nzDisabled = false;
  166. nzAutoFocus = false;
  167. isRadioButton = false;
  168. dir = 'ltr';
  169. focus() {
  170. this.focusMonitor.focusVia(this.inputElement, 'keyboard');
  171. }
  172. blur() {
  173. this.inputElement.nativeElement.blur();
  174. }
  175. constructor(ngZone, elementRef, cdr, focusMonitor) {
  176. this.ngZone = ngZone;
  177. this.elementRef = elementRef;
  178. this.cdr = cdr;
  179. this.focusMonitor = focusMonitor;
  180. }
  181. setDisabledState(disabled) {
  182. this.nzDisabled = (this.isNzDisableFirstChange && this.nzDisabled) || disabled;
  183. this.isNzDisableFirstChange = false;
  184. this.cdr.markForCheck();
  185. }
  186. writeValue(value) {
  187. this.isChecked = value;
  188. this.cdr.markForCheck();
  189. }
  190. registerOnChange(fn) {
  191. this.isNgModel = true;
  192. this.onChange = fn;
  193. }
  194. registerOnTouched(fn) {
  195. this.onTouched = fn;
  196. }
  197. ngOnInit() {
  198. if (this.nzRadioService) {
  199. this.nzRadioService.name$.pipe(takeUntil(this.destroy$)).subscribe(name => {
  200. this.name = name;
  201. this.cdr.markForCheck();
  202. });
  203. this.nzRadioService.disabled$.pipe(takeUntil(this.destroy$)).subscribe(disabled => {
  204. this.nzDisabled = (this.isNzDisableFirstChange && this.nzDisabled) || disabled;
  205. this.isNzDisableFirstChange = false;
  206. this.cdr.markForCheck();
  207. });
  208. this.nzRadioService.selected$.pipe(takeUntil(this.destroy$)).subscribe(value => {
  209. const isChecked = this.isChecked;
  210. this.isChecked = this.nzValue === value;
  211. // We don't have to run `onChange()` on each `nz-radio` button whenever the `selected$` emits.
  212. // If we have 8 `nz-radio` buttons within the `nz-radio-group` and they're all connected with
  213. // `ngModel` or `formControl` then `onChange()` will be called 8 times for each `nz-radio` button.
  214. // We prevent this by checking if `isChecked` has been changed or not.
  215. if (this.isNgModel &&
  216. isChecked !== this.isChecked &&
  217. // We're only intereted if `isChecked` has been changed to `false` value to emit `false` to the ascendant form,
  218. // since we already emit `true` within the `setupClickListener`.
  219. this.isChecked === false) {
  220. this.onChange(false);
  221. }
  222. this.cdr.markForCheck();
  223. });
  224. }
  225. this.focusMonitor
  226. .monitor(this.elementRef, true)
  227. .pipe(takeUntil(this.destroy$))
  228. .subscribe(focusOrigin => {
  229. if (!focusOrigin) {
  230. Promise.resolve().then(() => this.onTouched());
  231. if (this.nzRadioService) {
  232. this.nzRadioService.touch();
  233. }
  234. }
  235. });
  236. this.directionality.change.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  237. this.dir = direction;
  238. this.cdr.detectChanges();
  239. });
  240. this.dir = this.directionality.value;
  241. this.setupClickListener();
  242. }
  243. ngAfterViewInit() {
  244. if (this.nzAutoFocus) {
  245. this.focus();
  246. }
  247. }
  248. ngOnDestroy() {
  249. this.destroy$.next();
  250. this.destroy$.complete();
  251. this.focusMonitor.stopMonitoring(this.elementRef);
  252. }
  253. setupClickListener() {
  254. fromEventOutsideAngular(this.elementRef.nativeElement, 'click')
  255. .pipe(takeUntil(this.destroy$))
  256. .subscribe(event => {
  257. /** prevent label click triggered twice. **/
  258. event.stopPropagation();
  259. event.preventDefault();
  260. if (this.nzDisabled || this.isChecked) {
  261. return;
  262. }
  263. this.ngZone.run(() => {
  264. this.focus();
  265. this.nzRadioService?.select(this.nzValue);
  266. if (this.isNgModel) {
  267. this.isChecked = true;
  268. this.onChange(true);
  269. }
  270. this.cdr.markForCheck();
  271. });
  272. });
  273. }
  274. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzRadioComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
  275. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", type: NzRadioComponent, isStandalone: true, selector: "[nz-radio],[nz-radio-button]", inputs: { nzValue: "nzValue", nzDisabled: ["nzDisabled", "nzDisabled", booleanAttribute], nzAutoFocus: ["nzAutoFocus", "nzAutoFocus", booleanAttribute], isRadioButton: ["nz-radio-button", "isRadioButton", booleanAttribute] }, host: { properties: { "class.ant-radio-wrapper-in-form-item": "!!nzFormStatusService", "class.ant-radio-wrapper": "!isRadioButton", "class.ant-radio-button-wrapper": "isRadioButton", "class.ant-radio-wrapper-checked": "isChecked && !isRadioButton", "class.ant-radio-button-wrapper-checked": "isChecked && isRadioButton", "class.ant-radio-wrapper-disabled": "nzDisabled && !isRadioButton", "class.ant-radio-button-wrapper-disabled": "nzDisabled && isRadioButton", "class.ant-radio-wrapper-rtl": "!isRadioButton && dir === 'rtl'", "class.ant-radio-button-wrapper-rtl": "isRadioButton && dir === 'rtl'" } }, providers: [
  276. {
  277. provide: NG_VALUE_ACCESSOR,
  278. useExisting: forwardRef(() => NzRadioComponent),
  279. multi: true
  280. }
  281. ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], exportAs: ["nzRadio"], ngImport: i0, template: `
  282. <span
  283. [class.ant-radio]="!isRadioButton"
  284. [class.ant-radio-checked]="isChecked && !isRadioButton"
  285. [class.ant-radio-disabled]="nzDisabled && !isRadioButton"
  286. [class.ant-radio-button]="isRadioButton"
  287. [class.ant-radio-button-checked]="isChecked && isRadioButton"
  288. [class.ant-radio-button-disabled]="nzDisabled && isRadioButton"
  289. >
  290. <input
  291. #inputElement
  292. type="radio"
  293. [attr.autofocus]="nzAutoFocus ? 'autofocus' : null"
  294. [class.ant-radio-input]="!isRadioButton"
  295. [class.ant-radio-button-input]="isRadioButton"
  296. [disabled]="nzDisabled"
  297. [checked]="isChecked"
  298. [attr.name]="name"
  299. />
  300. <span [class.ant-radio-inner]="!isRadioButton" [class.ant-radio-button-inner]="isRadioButton"></span>
  301. </span>
  302. <span><ng-content></ng-content></span>
  303. `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  304. }
  305. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzRadioComponent, decorators: [{
  306. type: Component,
  307. args: [{
  308. selector: '[nz-radio],[nz-radio-button]',
  309. exportAs: 'nzRadio',
  310. preserveWhitespaces: false,
  311. template: `
  312. <span
  313. [class.ant-radio]="!isRadioButton"
  314. [class.ant-radio-checked]="isChecked && !isRadioButton"
  315. [class.ant-radio-disabled]="nzDisabled && !isRadioButton"
  316. [class.ant-radio-button]="isRadioButton"
  317. [class.ant-radio-button-checked]="isChecked && isRadioButton"
  318. [class.ant-radio-button-disabled]="nzDisabled && isRadioButton"
  319. >
  320. <input
  321. #inputElement
  322. type="radio"
  323. [attr.autofocus]="nzAutoFocus ? 'autofocus' : null"
  324. [class.ant-radio-input]="!isRadioButton"
  325. [class.ant-radio-button-input]="isRadioButton"
  326. [disabled]="nzDisabled"
  327. [checked]="isChecked"
  328. [attr.name]="name"
  329. />
  330. <span [class.ant-radio-inner]="!isRadioButton" [class.ant-radio-button-inner]="isRadioButton"></span>
  331. </span>
  332. <span><ng-content></ng-content></span>
  333. `,
  334. encapsulation: ViewEncapsulation.None,
  335. changeDetection: ChangeDetectionStrategy.OnPush,
  336. providers: [
  337. {
  338. provide: NG_VALUE_ACCESSOR,
  339. useExisting: forwardRef(() => NzRadioComponent),
  340. multi: true
  341. }
  342. ],
  343. host: {
  344. '[class.ant-radio-wrapper-in-form-item]': '!!nzFormStatusService',
  345. '[class.ant-radio-wrapper]': '!isRadioButton',
  346. '[class.ant-radio-button-wrapper]': 'isRadioButton',
  347. '[class.ant-radio-wrapper-checked]': 'isChecked && !isRadioButton',
  348. '[class.ant-radio-button-wrapper-checked]': 'isChecked && isRadioButton',
  349. '[class.ant-radio-wrapper-disabled]': 'nzDisabled && !isRadioButton',
  350. '[class.ant-radio-button-wrapper-disabled]': 'nzDisabled && isRadioButton',
  351. '[class.ant-radio-wrapper-rtl]': `!isRadioButton && dir === 'rtl'`,
  352. '[class.ant-radio-button-wrapper-rtl]': `isRadioButton && dir === 'rtl'`
  353. }
  354. }]
  355. }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }], propDecorators: { inputElement: [{
  356. type: ViewChild,
  357. args: ['inputElement', { static: true }]
  358. }], nzValue: [{
  359. type: Input
  360. }], nzDisabled: [{
  361. type: Input,
  362. args: [{ transform: booleanAttribute }]
  363. }], nzAutoFocus: [{
  364. type: Input,
  365. args: [{ transform: booleanAttribute }]
  366. }], isRadioButton: [{
  367. type: Input,
  368. args: [{ alias: 'nz-radio-button', transform: booleanAttribute }]
  369. }] } });
  370. /**
  371. * Use of this source code is governed by an MIT-style license that can be
  372. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  373. */
  374. class NzRadioModule {
  375. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  376. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzRadioModule, imports: [NzRadioComponent, NzRadioGroupComponent], exports: [NzRadioComponent, NzRadioGroupComponent] });
  377. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzRadioModule });
  378. }
  379. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzRadioModule, decorators: [{
  380. type: NgModule,
  381. args: [{
  382. imports: [NzRadioComponent, NzRadioGroupComponent],
  383. exports: [NzRadioComponent, NzRadioGroupComponent]
  384. }]
  385. }] });
  386. /**
  387. * Use of this source code is governed by an MIT-style license that can be
  388. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  389. */
  390. /**
  391. * Generated bundle index. Do not edit.
  392. */
  393. export { NzRadioComponent, NzRadioGroupComponent, NzRadioModule, NzRadioService };
  394. //# sourceMappingURL=ng-zorro-antd-radio.mjs.map