UNPKG

4.44 kBJavaScriptView Raw
1import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ChangeDetectorRef, Input, Output, ViewChild, NgModule } from '@angular/core';
2import { CommonModule } from '@angular/common';
3import { NG_VALUE_ACCESSOR } from '@angular/forms';
4
5const RADIO_VALUE_ACCESSOR = {
6 provide: NG_VALUE_ACCESSOR,
7 useExisting: forwardRef(() => RadioButton),
8 multi: true
9};
10class RadioButton {
11 constructor(cd) {
12 this.cd = cd;
13 this.onClick = new EventEmitter();
14 this.onFocus = new EventEmitter();
15 this.onBlur = new EventEmitter();
16 this.onModelChange = () => { };
17 this.onModelTouched = () => { };
18 }
19 handleClick(event, radioButton, focus) {
20 event.preventDefault();
21 if (this.disabled) {
22 return;
23 }
24 this.select(event);
25 if (focus) {
26 radioButton.focus();
27 }
28 }
29 select(event) {
30 if (!this.disabled) {
31 this.inputViewChild.nativeElement.checked = true;
32 this.checked = true;
33 this.onModelChange(this.value);
34 this.onClick.emit(event);
35 }
36 }
37 writeValue(value) {
38 this.checked = (value == this.value);
39 if (this.inputViewChild && this.inputViewChild.nativeElement) {
40 this.inputViewChild.nativeElement.checked = this.checked;
41 }
42 this.cd.markForCheck();
43 }
44 registerOnChange(fn) {
45 this.onModelChange = fn;
46 }
47 registerOnTouched(fn) {
48 this.onModelTouched = fn;
49 }
50 setDisabledState(val) {
51 this.disabled = val;
52 this.cd.markForCheck();
53 }
54 onInputFocus(event) {
55 this.focused = true;
56 this.onFocus.emit(event);
57 }
58 onInputBlur(event) {
59 this.focused = false;
60 this.onModelTouched();
61 this.onBlur.emit(event);
62 }
63 onChange(event) {
64 this.select(event);
65 }
66 focus() {
67 this.inputViewChild.nativeElement.focus();
68 }
69}
70RadioButton.decorators = [
71 { type: Component, args: [{
72 selector: 'p-radioButton',
73 template: `
74 <div [ngStyle]="style" [ngClass]="{'p-radiobutton p-component':true,'p-radiobutton-checked': checked, 'p-radiobutton-disabled': disabled, 'p-radiobutton-focused': focused}" [class]="styleClass">
75 <div class="p-hidden-accessible">
76 <input #rb type="radio" [attr.id]="inputId" [attr.name]="name" [attr.value]="value" [attr.tabindex]="tabindex" [attr.aria-labelledby]="ariaLabelledBy"
77 [checked]="checked" (change)="onChange($event)" (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" [disabled]="disabled">
78 </div>
79 <div (click)="handleClick($event, rb, true)" role="radio" [attr.aria-checked]="checked"
80 [ngClass]="{'p-radiobutton-box':true,
81 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}">
82 <span class="p-radiobutton-icon"></span>
83 </div>
84 </div>
85 <label (click)="select($event)" [class]="labelStyleClass"
86 [ngClass]="{'p-radiobutton-label':true, 'p-radiobutton-label-active':rb.checked, 'p-disabled':disabled, 'p-radiobutton-label-focus':focused}"
87 *ngIf="label" [attr.for]="inputId">{{label}}</label>
88 `,
89 providers: [RADIO_VALUE_ACCESSOR],
90 changeDetection: ChangeDetectionStrategy.OnPush
91 },] }
92];
93RadioButton.ctorParameters = () => [
94 { type: ChangeDetectorRef }
95];
96RadioButton.propDecorators = {
97 value: [{ type: Input }],
98 name: [{ type: Input }],
99 disabled: [{ type: Input }],
100 label: [{ type: Input }],
101 tabindex: [{ type: Input }],
102 inputId: [{ type: Input }],
103 ariaLabelledBy: [{ type: Input }],
104 style: [{ type: Input }],
105 styleClass: [{ type: Input }],
106 labelStyleClass: [{ type: Input }],
107 onClick: [{ type: Output }],
108 onFocus: [{ type: Output }],
109 onBlur: [{ type: Output }],
110 inputViewChild: [{ type: ViewChild, args: ['rb',] }]
111};
112class RadioButtonModule {
113}
114RadioButtonModule.decorators = [
115 { type: NgModule, args: [{
116 imports: [CommonModule],
117 exports: [RadioButton],
118 declarations: [RadioButton]
119 },] }
120];
121
122/**
123 * Generated bundle index. Do not edit.
124 */
125
126export { RADIO_VALUE_ACCESSOR, RadioButton, RadioButtonModule };
127//# sourceMappingURL=primeng-radiobutton.js.map