UNPKG

3.85 kBJavaScriptView Raw
1import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, Input, Output, NgModule } from '@angular/core';
2import { CommonModule } from '@angular/common';
3import { NG_VALUE_ACCESSOR } from '@angular/forms';
4
5const INPUTSWITCH_VALUE_ACCESSOR = {
6 provide: NG_VALUE_ACCESSOR,
7 useExisting: forwardRef(() => InputSwitch),
8 multi: true
9};
10class 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}
65InputSwitch.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];
84InputSwitch.ctorParameters = () => [
85 { type: ChangeDetectorRef }
86];
87InputSwitch.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};
98class InputSwitchModule {
99}
100InputSwitchModule.decorators = [
101 { type: NgModule, args: [{
102 imports: [CommonModule],
103 exports: [InputSwitch],
104 declarations: [InputSwitch]
105 },] }
106];
107
108/**
109 * Generated bundle index. Do not edit.
110 */
111
112export { INPUTSWITCH_VALUE_ACCESSOR, InputSwitch, InputSwitchModule };
113//# sourceMappingURL=primeng-inputswitch.js.map