1 | import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, Input, Output, NgModule } from '@angular/core';
|
2 | import { CommonModule } from '@angular/common';
|
3 | import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
4 |
|
5 | const INPUTSWITCH_VALUE_ACCESSOR = {
|
6 | provide: NG_VALUE_ACCESSOR,
|
7 | useExisting: forwardRef(() => InputSwitch),
|
8 | multi: true
|
9 | };
|
10 | class InputSwitch {
|
11 | constructor(cd) {
|
12 | this.cd = cd;
|
13 | this.onChange = new EventEmitter();
|
14 | this.checked = false;
|
15 | this.focused = false;
|
16 | this.onModelChange = () => { };
|
17 | this.onModelTouched = () => { };
|
18 | }
|
19 | onClick(event, cb) {
|
20 | if (!this.disabled && !this.readonly) {
|
21 | event.preventDefault();
|
22 | this.toggle(event);
|
23 | cb.focus();
|
24 | }
|
25 | }
|
26 | onInputChange(event) {
|
27 | if (!this.readonly) {
|
28 | const inputChecked = event.target.checked;
|
29 | this.updateModel(event, inputChecked);
|
30 | }
|
31 | }
|
32 | toggle(event) {
|
33 | this.updateModel(event, !this.checked);
|
34 | }
|
35 | updateModel(event, value) {
|
36 | this.checked = value;
|
37 | this.onModelChange(this.checked);
|
38 | this.onChange.emit({
|
39 | originalEvent: event,
|
40 | checked: this.checked
|
41 | });
|
42 | }
|
43 | onFocus(event) {
|
44 | this.focused = true;
|
45 | }
|
46 | onBlur(event) {
|
47 | this.focused = false;
|
48 | this.onModelTouched();
|
49 | }
|
50 | writeValue(checked) {
|
51 | this.checked = checked;
|
52 | this.cd.markForCheck();
|
53 | }
|
54 | registerOnChange(fn) {
|
55 | this.onModelChange = fn;
|
56 | }
|
57 | registerOnTouched(fn) {
|
58 | this.onModelTouched = fn;
|
59 | }
|
60 | setDisabledState(val) {
|
61 | this.disabled = val;
|
62 | this.cd.markForCheck();
|
63 | }
|
64 | }
|
65 | InputSwitch.decorators = [
|
66 | { type: Component, args: [{
|
67 | selector: 'p-inputSwitch',
|
68 | template: `
|
69 | <div [ngClass]="{'p-inputswitch p-component': true, 'p-inputswitch-checked': checked, 'p-disabled': disabled, 'p-focus': focused}"
|
70 | [ngStyle]="style" [class]="styleClass" (click)="onClick($event, cb)">
|
71 | <div class="p-hidden-accessible">
|
72 | <input #cb type="checkbox" [attr.id]="inputId" [attr.name]="name" [attr.tabindex]="tabindex" [checked]="checked" (change)="onInputChange($event)"
|
73 | (focus)="onFocus($event)" (blur)="onBlur($event)" [disabled]="disabled" role="switch" [attr.aria-checked]="checked" [attr.aria-labelledby]="ariaLabelledBy"/>
|
74 | </div>
|
75 | <span class="p-inputswitch-slider"></span>
|
76 | </div>
|
77 | `,
|
78 | providers: [INPUTSWITCH_VALUE_ACCESSOR],
|
79 | changeDetection: ChangeDetectionStrategy.OnPush,
|
80 | encapsulation: ViewEncapsulation.None,
|
81 | styles: [".p-inputswitch{display:inline-block;position:relative}.p-inputswitch-slider{bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0}.p-inputswitch-slider:before{content:\"\";position:absolute;top:50%}"]
|
82 | },] }
|
83 | ];
|
84 | InputSwitch.ctorParameters = () => [
|
85 | { type: ChangeDetectorRef }
|
86 | ];
|
87 | InputSwitch.propDecorators = {
|
88 | style: [{ type: Input }],
|
89 | styleClass: [{ type: Input }],
|
90 | tabindex: [{ type: Input }],
|
91 | inputId: [{ type: Input }],
|
92 | name: [{ type: Input }],
|
93 | disabled: [{ type: Input }],
|
94 | readonly: [{ type: Input }],
|
95 | ariaLabelledBy: [{ type: Input }],
|
96 | onChange: [{ type: Output }]
|
97 | };
|
98 | class InputSwitchModule {
|
99 | }
|
100 | InputSwitchModule.decorators = [
|
101 | { type: NgModule, args: [{
|
102 | imports: [CommonModule],
|
103 | exports: [InputSwitch],
|
104 | declarations: [InputSwitch]
|
105 | },] }
|
106 | ];
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 | export { INPUTSWITCH_VALUE_ACCESSOR, InputSwitch, InputSwitchModule };
|
113 |
|