| 1 | import * as i0 from '@angular/core';
|
|---|
| 2 | import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, Output, NgModule } from '@angular/core';
|
|---|
| 3 | import * as i1 from '@angular/common';
|
|---|
| 4 | import { CommonModule } from '@angular/common';
|
|---|
| 5 | import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|---|
| 6 | import { ObjectUtils } from 'primeng/utils';
|
|---|
| 7 |
|
|---|
| 8 | const CHECKBOX_VALUE_ACCESSOR = {
|
|---|
| 9 | provide: NG_VALUE_ACCESSOR,
|
|---|
| 10 | useExisting: forwardRef(() => Checkbox),
|
|---|
| 11 | multi: true
|
|---|
| 12 | };
|
|---|
| 13 | class Checkbox {
|
|---|
| 14 | constructor(cd) {
|
|---|
| 15 | this.cd = cd;
|
|---|
| 16 | this.checkboxIcon = 'pi pi-check';
|
|---|
| 17 | this.trueValue = true;
|
|---|
| 18 | this.falseValue = false;
|
|---|
| 19 | this.onChange = new EventEmitter();
|
|---|
| 20 | this.onModelChange = () => { };
|
|---|
| 21 | this.onModelTouched = () => { };
|
|---|
| 22 | this.focused = false;
|
|---|
| 23 | }
|
|---|
| 24 | onClick(event, checkbox, focus) {
|
|---|
| 25 | event.preventDefault();
|
|---|
| 26 | if (this.disabled || this.readonly) {
|
|---|
| 27 | return;
|
|---|
| 28 | }
|
|---|
| 29 | this.updateModel(event);
|
|---|
| 30 | if (focus) {
|
|---|
| 31 | checkbox.focus();
|
|---|
| 32 | }
|
|---|
| 33 | }
|
|---|
| 34 | updateModel(event) {
|
|---|
| 35 | let newModelValue;
|
|---|
| 36 | if (!this.binary) {
|
|---|
| 37 | if (this.checked())
|
|---|
| 38 | newModelValue = this.model.filter(val => !ObjectUtils.equals(val, this.value));
|
|---|
| 39 | else
|
|---|
| 40 | newModelValue = this.model ? [...this.model, this.value] : [this.value];
|
|---|
| 41 | this.onModelChange(newModelValue);
|
|---|
| 42 | this.model = newModelValue;
|
|---|
| 43 | if (this.formControl) {
|
|---|
| 44 | this.formControl.setValue(newModelValue);
|
|---|
| 45 | }
|
|---|
| 46 | }
|
|---|
| 47 | else {
|
|---|
| 48 | newModelValue = this.checked() ? this.falseValue : this.trueValue;
|
|---|
| 49 | this.model = newModelValue;
|
|---|
| 50 | this.onModelChange(newModelValue);
|
|---|
| 51 | }
|
|---|
| 52 | this.onChange.emit({ checked: newModelValue, originalEvent: event });
|
|---|
| 53 | }
|
|---|
| 54 | handleChange(event) {
|
|---|
| 55 | if (!this.readonly) {
|
|---|
| 56 | this.updateModel(event);
|
|---|
| 57 | }
|
|---|
| 58 | }
|
|---|
| 59 | onFocus() {
|
|---|
| 60 | this.focused = true;
|
|---|
| 61 | }
|
|---|
| 62 | onBlur() {
|
|---|
| 63 | this.focused = false;
|
|---|
| 64 | this.onModelTouched();
|
|---|
| 65 | }
|
|---|
| 66 | focus() {
|
|---|
| 67 | this.inputViewChild.nativeElement.focus();
|
|---|
| 68 | }
|
|---|
| 69 | writeValue(model) {
|
|---|
| 70 | this.model = model;
|
|---|
| 71 | this.cd.markForCheck();
|
|---|
| 72 | }
|
|---|
| 73 | registerOnChange(fn) {
|
|---|
| 74 | this.onModelChange = fn;
|
|---|
| 75 | }
|
|---|
| 76 | registerOnTouched(fn) {
|
|---|
| 77 | this.onModelTouched = fn;
|
|---|
| 78 | }
|
|---|
| 79 | setDisabledState(val) {
|
|---|
| 80 | this.disabled = val;
|
|---|
| 81 | this.cd.markForCheck();
|
|---|
| 82 | }
|
|---|
| 83 | checked() {
|
|---|
| 84 | return this.binary ? this.model === this.trueValue : ObjectUtils.contains(this.value, this.model);
|
|---|
| 85 | }
|
|---|
| 86 | }
|
|---|
| 87 | Checkbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Checkbox, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|---|
| 88 | Checkbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: Checkbox, selector: "p-checkbox", inputs: { value: "value", name: "name", disabled: "disabled", binary: "binary", label: "label", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", tabindex: "tabindex", inputId: "inputId", style: "style", styleClass: "styleClass", labelStyleClass: "labelStyleClass", formControl: "formControl", checkboxIcon: "checkboxIcon", readonly: "readonly", required: "required", trueValue: "trueValue", falseValue: "falseValue" }, outputs: { onChange: "onChange" }, host: { classAttribute: "p-element" }, providers: [CHECKBOX_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["cb"], descendants: true }], ngImport: i0, template: `
|
|---|
| 89 | <div [ngStyle]="style" [ngClass]="{'p-checkbox p-component': true, 'p-checkbox-checked': checked(), 'p-checkbox-disabled': disabled, 'p-checkbox-focused': focused}" [class]="styleClass">
|
|---|
| 90 | <div class="p-hidden-accessible">
|
|---|
| 91 | <input #cb type="checkbox" [attr.id]="inputId" [attr.name]="name" [readonly]="readonly" [value]="value" [checked]="checked()" (focus)="onFocus()" (blur)="onBlur()"
|
|---|
| 92 | (change)="handleChange($event)" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-label]="ariaLabel" [attr.aria-checked]="checked()" [attr.required]="required">
|
|---|
| 93 | </div>
|
|---|
| 94 | <div class="p-checkbox-box" (click)="onClick($event,cb,true)"
|
|---|
| 95 | [ngClass]="{'p-highlight': checked(), 'p-disabled': disabled, 'p-focus': focused}">
|
|---|
| 96 | <span class="p-checkbox-icon" [ngClass]="checked() ? checkboxIcon : null"></span>
|
|---|
| 97 | </div>
|
|---|
| 98 | </div>
|
|---|
| 99 | <label (click)="onClick($event,cb,true)" [class]="labelStyleClass"
|
|---|
| 100 | [ngClass]="{'p-checkbox-label': true, 'p-checkbox-label-active':checked(), 'p-disabled':disabled, 'p-checkbox-label-focus':focused}"
|
|---|
| 101 | *ngIf="label" [attr.for]="inputId">{{label}}</label>
|
|---|
| 102 | `, isInline: true, styles: [".p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none;vertical-align:bottom;position:relative}.p-checkbox-disabled{cursor:default!important;pointer-events:none}.p-checkbox-box{display:flex;justify-content:center;align-items:center}p-checkbox{display:inline-flex;vertical-align:bottom;align-items:center}.p-checkbox-label{line-height:1}\n"], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|---|
| 103 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Checkbox, decorators: [{
|
|---|
| 104 | type: Component,
|
|---|
| 105 | args: [{ selector: 'p-checkbox', template: `
|
|---|
| 106 | <div [ngStyle]="style" [ngClass]="{'p-checkbox p-component': true, 'p-checkbox-checked': checked(), 'p-checkbox-disabled': disabled, 'p-checkbox-focused': focused}" [class]="styleClass">
|
|---|
| 107 | <div class="p-hidden-accessible">
|
|---|
| 108 | <input #cb type="checkbox" [attr.id]="inputId" [attr.name]="name" [readonly]="readonly" [value]="value" [checked]="checked()" (focus)="onFocus()" (blur)="onBlur()"
|
|---|
| 109 | (change)="handleChange($event)" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-label]="ariaLabel" [attr.aria-checked]="checked()" [attr.required]="required">
|
|---|
| 110 | </div>
|
|---|
| 111 | <div class="p-checkbox-box" (click)="onClick($event,cb,true)"
|
|---|
| 112 | [ngClass]="{'p-highlight': checked(), 'p-disabled': disabled, 'p-focus': focused}">
|
|---|
| 113 | <span class="p-checkbox-icon" [ngClass]="checked() ? checkboxIcon : null"></span>
|
|---|
| 114 | </div>
|
|---|
| 115 | </div>
|
|---|
| 116 | <label (click)="onClick($event,cb,true)" [class]="labelStyleClass"
|
|---|
| 117 | [ngClass]="{'p-checkbox-label': true, 'p-checkbox-label-active':checked(), 'p-disabled':disabled, 'p-checkbox-label-focus':focused}"
|
|---|
| 118 | *ngIf="label" [attr.for]="inputId">{{label}}</label>
|
|---|
| 119 | `, providers: [CHECKBOX_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|---|
| 120 | 'class': 'p-element'
|
|---|
| 121 | }, styles: [".p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none;vertical-align:bottom;position:relative}.p-checkbox-disabled{cursor:default!important;pointer-events:none}.p-checkbox-box{display:flex;justify-content:center;align-items:center}p-checkbox{display:inline-flex;vertical-align:bottom;align-items:center}.p-checkbox-label{line-height:1}\n"] }]
|
|---|
| 122 | }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { value: [{
|
|---|
| 123 | type: Input
|
|---|
| 124 | }], name: [{
|
|---|
| 125 | type: Input
|
|---|
| 126 | }], disabled: [{
|
|---|
| 127 | type: Input
|
|---|
| 128 | }], binary: [{
|
|---|
| 129 | type: Input
|
|---|
| 130 | }], label: [{
|
|---|
| 131 | type: Input
|
|---|
| 132 | }], ariaLabelledBy: [{
|
|---|
| 133 | type: Input
|
|---|
| 134 | }], ariaLabel: [{
|
|---|
| 135 | type: Input
|
|---|
| 136 | }], tabindex: [{
|
|---|
| 137 | type: Input
|
|---|
| 138 | }], inputId: [{
|
|---|
| 139 | type: Input
|
|---|
| 140 | }], style: [{
|
|---|
| 141 | type: Input
|
|---|
| 142 | }], styleClass: [{
|
|---|
| 143 | type: Input
|
|---|
| 144 | }], labelStyleClass: [{
|
|---|
| 145 | type: Input
|
|---|
| 146 | }], formControl: [{
|
|---|
| 147 | type: Input
|
|---|
| 148 | }], checkboxIcon: [{
|
|---|
| 149 | type: Input
|
|---|
| 150 | }], readonly: [{
|
|---|
| 151 | type: Input
|
|---|
| 152 | }], required: [{
|
|---|
| 153 | type: Input
|
|---|
| 154 | }], trueValue: [{
|
|---|
| 155 | type: Input
|
|---|
| 156 | }], falseValue: [{
|
|---|
| 157 | type: Input
|
|---|
| 158 | }], inputViewChild: [{
|
|---|
| 159 | type: ViewChild,
|
|---|
| 160 | args: ['cb']
|
|---|
| 161 | }], onChange: [{
|
|---|
| 162 | type: Output
|
|---|
| 163 | }] } });
|
|---|
| 164 | class CheckboxModule {
|
|---|
| 165 | }
|
|---|
| 166 | CheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|---|
| 167 | CheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CheckboxModule, declarations: [Checkbox], imports: [CommonModule], exports: [Checkbox] });
|
|---|
| 168 | CheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CheckboxModule, imports: [[CommonModule]] });
|
|---|
| 169 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CheckboxModule, decorators: [{
|
|---|
| 170 | type: NgModule,
|
|---|
| 171 | args: [{
|
|---|
| 172 | imports: [CommonModule],
|
|---|
| 173 | exports: [Checkbox],
|
|---|
| 174 | declarations: [Checkbox]
|
|---|
| 175 | }]
|
|---|
| 176 | }] });
|
|---|
| 177 |
|
|---|
| 178 | /**
|
|---|
| 179 | * Generated bundle index. Do not edit.
|
|---|
| 180 | */
|
|---|
| 181 |
|
|---|
| 182 | export { CHECKBOX_VALUE_ACCESSOR, Checkbox, CheckboxModule };
|
|---|
