primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [ • 6.22 kB
JavaScript
import { forwardRef, EventEmitter, ChangeDetectorRef, Input, ViewChild, Output, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const CHECKBOX_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => Checkbox),
multi: true
};
let Checkbox = class Checkbox {
constructor(cd) {
this.cd = cd;
this.checkboxIcon = 'pi pi-check';
this.onChange = new EventEmitter();
this.onModelChange = () => { };
this.onModelTouched = () => { };
this.focused = false;
this.checked = false;
}
onClick(event, checkbox, focus) {
event.preventDefault();
if (this.disabled || this.readonly) {
return;
}
this.checked = !this.checked;
this.updateModel();
if (focus) {
checkbox.focus();
}
}
updateModel() {
if (!this.binary) {
if (this.checked)
this.addValue();
else
this.removeValue();
this.onModelChange(this.model);
if (this.formControl) {
this.formControl.setValue(this.model);
}
}
else {
this.onModelChange(this.checked);
}
this.onChange.emit(this.checked);
}
handleChange(event) {
if (!this.readonly) {
this.checked = event.target.checked;
this.updateModel();
}
}
isChecked() {
if (this.binary)
return this.model;
else
return this.model && this.model.indexOf(this.value) > -1;
}
removeValue() {
this.model = this.model.filter(val => val !== this.value);
}
addValue() {
if (this.model)
this.model = [...this.model, this.value];
else
this.model = [this.value];
}
onFocus() {
this.focused = true;
}
onBlur() {
this.focused = false;
this.onModelTouched();
}
focus() {
this.inputViewChild.nativeElement.focus();
}
writeValue(model) {
this.model = model;
this.checked = this.isChecked();
this.cd.markForCheck();
}
registerOnChange(fn) {
this.onModelChange = fn;
}
registerOnTouched(fn) {
this.onModelTouched = fn;
}
setDisabledState(val) {
this.disabled = val;
}
};
Checkbox.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
__decorate([
Input()
], Checkbox.prototype, "value", void 0);
__decorate([
Input()
], Checkbox.prototype, "name", void 0);
__decorate([
Input()
], Checkbox.prototype, "disabled", void 0);
__decorate([
Input()
], Checkbox.prototype, "binary", void 0);
__decorate([
Input()
], Checkbox.prototype, "label", void 0);
__decorate([
Input()
], Checkbox.prototype, "ariaLabelledBy", void 0);
__decorate([
Input()
], Checkbox.prototype, "tabindex", void 0);
__decorate([
Input()
], Checkbox.prototype, "inputId", void 0);
__decorate([
Input()
], Checkbox.prototype, "style", void 0);
__decorate([
Input()
], Checkbox.prototype, "styleClass", void 0);
__decorate([
Input()
], Checkbox.prototype, "labelStyleClass", void 0);
__decorate([
Input()
], Checkbox.prototype, "formControl", void 0);
__decorate([
Input()
], Checkbox.prototype, "checkboxIcon", void 0);
__decorate([
Input()
], Checkbox.prototype, "readonly", void 0);
__decorate([
Input()
], Checkbox.prototype, "required", void 0);
__decorate([
ViewChild('cb')
], Checkbox.prototype, "inputViewChild", void 0);
__decorate([
Output()
], Checkbox.prototype, "onChange", void 0);
Checkbox = __decorate([
Component({
selector: 'p-checkbox',
template: `
<div [ngStyle]="style" [ngClass]="{'ui-chkbox ui-widget': true,'ui-chkbox-readonly': readonly}" [class]="styleClass">
<div class="ui-helper-hidden-accessible">
<input #cb type="checkbox" [attr.id]="inputId" [attr.name]="name" [readonly]="readonly" [value]="value" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()"
[ngClass]="{'ui-state-focus':focused}" (change)="handleChange($event)" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.aria-labelledby]="ariaLabelledBy" [attr.required]="required">
</div>
<div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default" (click)="onClick($event,cb,true)"
[ngClass]="{'ui-state-active':checked,'ui-state-disabled':disabled,'ui-state-focus':focused}" role="checkbox" [attr.aria-checked]="checked">
<span class="ui-chkbox-icon ui-clickable" [ngClass]="checked ? checkboxIcon : null"></span>
</div>
</div>
<label (click)="onClick($event,cb,true)" [class]="labelStyleClass"
[ngClass]="{'ui-chkbox-label': true, 'ui-label-active':checked, 'ui-label-disabled':disabled, 'ui-label-focus':focused}"
*ngIf="label" [attr.for]="inputId">{{label}}</label>
`,
providers: [CHECKBOX_VALUE_ACCESSOR],
changeDetection: ChangeDetectionStrategy.Default
})
], Checkbox);
let CheckboxModule = class CheckboxModule {
};
CheckboxModule = __decorate([
NgModule({
imports: [CommonModule],
exports: [Checkbox],
declarations: [Checkbox]
})
], CheckboxModule);
/**
* Generated bundle index. Do not edit.
*/
export { CHECKBOX_VALUE_ACCESSOR, Checkbox, CheckboxModule };
//# sourceMappingURL=primeng-checkbox.js.map