1 | import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ChangeDetectorRef, Input, Output, ViewChild, NgModule } from '@angular/core';
|
2 | import { CommonModule } from '@angular/common';
|
3 | import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
4 |
|
5 | const RADIO_VALUE_ACCESSOR = {
|
6 | provide: NG_VALUE_ACCESSOR,
|
7 | useExisting: forwardRef(() => RadioButton),
|
8 | multi: true
|
9 | };
|
10 | class 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 | }
|
70 | RadioButton.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 | ];
|
93 | RadioButton.ctorParameters = () => [
|
94 | { type: ChangeDetectorRef }
|
95 | ];
|
96 | RadioButton.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 | };
|
112 | class RadioButtonModule {
|
113 | }
|
114 | RadioButtonModule.decorators = [
|
115 | { type: NgModule, args: [{
|
116 | imports: [CommonModule],
|
117 | exports: [RadioButton],
|
118 | declarations: [RadioButton]
|
119 | },] }
|
120 | ];
|
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 | export { RADIO_VALUE_ACCESSOR, RadioButton, RadioButtonModule };
|
127 |
|