UNPKG

primeng

Version:

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/primeng.svg)](https://badge.fury.io/js/primeng) [![npm downloads](https://img.shields.io/npm/dm/primeng.sv

114 lines (110 loc) 3.91 kB
import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, Input, Output, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; const INPUTSWITCH_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputSwitch), multi: true }; class InputSwitch { constructor(cd) { this.cd = cd; this.onChange = new EventEmitter(); this.checked = false; this.focused = false; this.onModelChange = () => { }; this.onModelTouched = () => { }; } onClick(event, cb) { if (!this.disabled && !this.readonly) { event.preventDefault(); this.toggle(event); cb.focus(); } } onInputChange(event) { if (!this.readonly) { const inputChecked = event.target.checked; this.updateModel(event, inputChecked); } } toggle(event) { this.updateModel(event, !this.checked); } updateModel(event, value) { this.checked = value; this.onModelChange(this.checked); this.onChange.emit({ originalEvent: event, checked: this.checked }); } onFocus(event) { this.focused = true; } onBlur(event) { this.focused = false; this.onModelTouched(); } writeValue(checked) { this.checked = checked; this.cd.markForCheck(); } registerOnChange(fn) { this.onModelChange = fn; } registerOnTouched(fn) { this.onModelTouched = fn; } setDisabledState(val) { this.disabled = val; this.cd.markForCheck(); } } InputSwitch.decorators = [ { type: Component, args: [{ selector: 'p-inputSwitch', template: ` <div [ngClass]="{'p-inputswitch p-component': true, 'p-inputswitch-checked': checked, 'p-disabled': disabled, 'p-focus': focused}" [ngStyle]="style" [class]="styleClass" (click)="onClick($event, cb)"> <div class="p-hidden-accessible"> <input #cb type="checkbox" [attr.id]="inputId" [attr.name]="name" [attr.tabindex]="tabindex" [checked]="checked" (change)="onInputChange($event)" (focus)="onFocus($event)" (blur)="onBlur($event)" [disabled]="disabled" role="switch" [attr.aria-checked]="checked" [attr.aria-labelledby]="ariaLabelledBy"/> </div> <span class="p-inputswitch-slider"></span> </div> `, providers: [INPUTSWITCH_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".p-inputswitch{-ms-user-select:none;-webkit-user-select:none;display:inline-block;position:relative;user-select:none}.p-inputswitch-slider{bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0}.p-inputswitch-slider:before{content:\"\";position:absolute;top:50%}"] },] } ]; InputSwitch.ctorParameters = () => [ { type: ChangeDetectorRef } ]; InputSwitch.propDecorators = { style: [{ type: Input }], styleClass: [{ type: Input }], tabindex: [{ type: Input }], inputId: [{ type: Input }], name: [{ type: Input }], disabled: [{ type: Input }], readonly: [{ type: Input }], ariaLabelledBy: [{ type: Input }], onChange: [{ type: Output }] }; class InputSwitchModule { } InputSwitchModule.decorators = [ { type: NgModule, args: [{ imports: [CommonModule], exports: [InputSwitch], declarations: [InputSwitch] },] } ]; /** * Generated bundle index. Do not edit. */ export { INPUTSWITCH_VALUE_ACCESSOR, InputSwitch, InputSwitchModule }; //# sourceMappingURL=primeng-inputswitch.js.map