import * as i2 from '@angular/common'; import { CommonModule } from '@angular/common'; import * as i0 from '@angular/core'; import { forwardRef, EventEmitter, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core'; import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms'; import * as i1 from 'primeng/api'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import * as i3 from 'primeng/autofocus'; import { AutoFocusModule } from 'primeng/autofocus'; import { CheckIcon } from 'primeng/icons/check'; import { ObjectUtils } from 'primeng/utils'; const CHECKBOX_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Checkbox), multi: true }; /** * Checkbox is an extension to standard checkbox element with theming. * @group Components */ class Checkbox { cd; injector; config; /** * Value of the checkbox. * @group Props */ value; /** * Name of the checkbox group. * @group Props */ name; /** * When present, it specifies that the element should be disabled. * @group Props */ disabled; /** * Allows to select a boolean value instead of multiple values. * @group Props */ binary; /** * Label of the checkbox. * @group Props */ label; /** * Establishes relationships between the component and label(s) where its value should be one or more element IDs. * @group Props */ ariaLabelledBy; /** * Used to define a string that labels the input element. * @group Props */ ariaLabel; /** * Index of the element in tabbing order. * @group Props */ tabindex; /** * Identifier of the focus input to match a label defined for the component. * @group Props */ inputId; /** * Inline style of the component. * @group Props */ style; /** * Style class of the component. * @group Props */ styleClass; /** * Style class of the label. * @group Props */ labelStyleClass; /** * Form control value. * @group Props */ formControl; /** * Icon class of the checkbox icon. * @group Props */ checkboxIcon; /** * When present, it specifies that the component cannot be edited. * @group Props */ readonly; /** * When present, it specifies that checkbox must be checked before submitting the form. * @group Props */ required; /** * When present, it specifies that the component should automatically get focus on load. * @group Props */ autofocus; /** * Value in checked state. * @group Props */ trueValue = true; /** * Value in unchecked state. * @group Props */ falseValue = false; /** * Specifies the input variant of the component. * @group Props */ variant = 'outlined'; /** * Callback to invoke on value change. * @param {CheckboxChangeEvent} event - Custom value change event. * @group Emits */ onChange = new EventEmitter(); /** * Callback to invoke when the receives focus. * @param {Event} event - Browser event. * @group Emits */ onFocus = new EventEmitter(); /** * Callback to invoke when the loses focus. * @param {Event} event - Browser event. * @group Emits */ onBlur = new EventEmitter(); inputViewChild; templates; checkboxIconTemplate; model; onModelChange = () => { }; onModelTouched = () => { }; focused = false; constructor(cd, injector, config) { this.cd = cd; this.injector = injector; this.config = config; } ngAfterContentInit() { this.templates.forEach((item) => { switch (item.getType()) { case 'icon': this.checkboxIconTemplate = item.template; break; } }); } onClick(event, checkbox, focus) { event.preventDefault(); if (this.disabled || this.readonly) { return; } this.updateModel(event); if (focus) { checkbox.focus(); } } updateModel(event) { let newModelValue; /* * When `formControlName` or `formControl` is used - `writeValue` is not called after control changes. * Otherwise it is causing multiple references to the actual value: there is one array reference inside the component and another one in the control value. * `selfControl` is the source of truth of references, it is made to avoid reference loss. * */ const selfControl = this.injector.get(NgControl, null, { optional: true, self: true }); const currentModelValue = selfControl && !this.formControl ? selfControl.value : this.model; if (!this.binary) { if (this.checked()) newModelValue = currentModelValue.filter((val) => !ObjectUtils.equals(val, this.value)); else newModelValue = currentModelValue ? [...currentModelValue, this.value] : [this.value]; this.onModelChange(newModelValue); this.model = newModelValue; if (this.formControl) { this.formControl.setValue(newModelValue); } } else { newModelValue = this.checked() ? this.falseValue : this.trueValue; this.model = newModelValue; this.onModelChange(newModelValue); } this.onChange.emit({ checked: newModelValue, originalEvent: event }); } handleChange(event) { if (!this.readonly) { this.updateModel(event); } } onInputFocus(event) { this.focused = true; this.onFocus.emit(event); } onInputBlur(event) { this.focused = false; this.onBlur.emit(event); this.onModelTouched(); } focus() { this.inputViewChild.nativeElement.focus(); } writeValue(model) { this.model = model; this.cd.markForCheck(); } registerOnChange(fn) { this.onModelChange = fn; } registerOnTouched(fn) { this.onModelTouched = fn; } setDisabledState(val) { setTimeout(() => { this.disabled = val; this.cd.markForCheck(); }); } checked() { return this.binary ? this.model === this.trueValue : ObjectUtils.contains(this.value, this.model); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: Checkbox, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: Checkbox, selector: "p-checkbox", inputs: { value: "value", name: "name", disabled: ["disabled", "disabled", booleanAttribute], binary: ["binary", "binary", booleanAttribute], label: "label", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", tabindex: ["tabindex", "tabindex", numberAttribute], inputId: "inputId", style: "style", styleClass: "styleClass", labelStyleClass: "labelStyleClass", formControl: "formControl", checkboxIcon: "checkboxIcon", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], trueValue: "trueValue", falseValue: "falseValue", variant: "variant" }, outputs: { onChange: "onChange", onFocus: "onFocus", onBlur: "onBlur" }, host: { classAttribute: "p-element" }, providers: [CHECKBOX_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: `