primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
441 lines (435 loc) • 20.1 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, forwardRef, input, EventEmitter, signal, inject, computed, booleanAttribute, numberAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
import { contains, equals } from '@primeuix/utils';
import { SharedModule, PrimeTemplate } from 'primeng/api';
import { BaseEditableHolder } from 'primeng/baseeditableholder';
import { style } from '@primeuix/styles/checkbox';
import { BaseStyle } from 'primeng/base';
import { CheckIcon } from 'primeng/icons/check';
const theme = /*css*/ `
${style}
/* For PrimeNG */
p-checkBox.ng-invalid.ng-dirty .p-checkbox-box,
p-check-box.ng-invalid.ng-dirty .p-checkbox-box,
p-checkbox.ng-invalid.ng-dirty .p-checkbox-box {
border-color: dt('checkbox.invalid.border.color');
}
`;
const classes = {
root: ({ instance }) => [
'p-checkbox p-component',
{
'p-checkbox-checked p-highlight': instance.checked,
'p-disabled': instance.$disabled(),
'p-invalid': instance.invalid(),
'p-variant-filled': instance.$variant() === 'filled',
'p-checkbox-sm p-inputfield-sm': instance.size() === 'small',
'p-checkbox-lg p-inputfield-lg': instance.size() === 'large'
}
],
box: 'p-checkbox-box',
input: 'p-checkbox-input',
icon: 'p-checkbox-icon'
};
class CheckboxStyle extends BaseStyle {
name = 'checkbox';
theme = theme;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CheckboxStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CheckboxStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CheckboxStyle, decorators: [{
type: Injectable
}] });
/**
*
* Checkbox is an extension to standard checkbox element with theming.
*
* [Live Demo](https://www.primeng.org/checkbox/)
*
* @module checkboxstyle
*
*/
var CheckboxClasses;
(function (CheckboxClasses) {
/**
* Class name of the root element
*/
CheckboxClasses["root"] = "p-checkbox";
/**
* Class name of the box element
*/
CheckboxClasses["box"] = "p-checkbox-box";
/**
* Class name of the input element
*/
CheckboxClasses["input"] = "p-checkbox-input";
/**
* Class name of the icon element
*/
CheckboxClasses["icon"] = "p-checkbox-icon";
})(CheckboxClasses || (CheckboxClasses = {}));
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 extends BaseEditableHolder {
/**
* Value of the checkbox.
* @group Props
*/
value;
/**
* Allows to select a boolean value instead of multiple values.
* @group Props
*/
binary;
/**
* 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 input element.
* @group Props
*/
inputStyle;
/**
* Style class of the component.
* @deprecated since v20.0.0, use `class` instead.
* @group Props
*/
styleClass;
/**
* Style class of the input element.
* @group Props
*/
inputClass;
/**
* When present, it specifies input state as indeterminate.
* @group Props
*/
indeterminate = false;
/**
* 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 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.
* @defaultValue undefined
* @group Props
*/
variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
/**
* Specifies the size of the component.
* @defaultValue undefined
* @group Props
*/
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
/**
* 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;
get checked() {
return this._indeterminate() ? false : this.binary ? this.modelValue() === this.trueValue : contains(this.value, this.modelValue());
}
_indeterminate = signal(undefined, ...(ngDevMode ? [{ debugName: "_indeterminate" }] : []));
/**
* The template of the checkbox icon.
* @group Templates
*/
checkboxIconTemplate;
templates;
_checkboxIconTemplate;
focused = false;
_componentStyle = inject(CheckboxStyle);
$variant = computed(() => this.variant() || this.config.inputStyle() || this.config.inputVariant(), ...(ngDevMode ? [{ debugName: "$variant" }] : []));
ngAfterContentInit() {
this.templates.forEach((item) => {
switch (item.getType()) {
case 'icon':
this._checkboxIconTemplate = item.template;
break;
case 'checkboxicon':
this._checkboxIconTemplate = item.template;
break;
}
});
}
ngOnChanges(changes) {
super.ngOnChanges(changes);
if (changes.indeterminate) {
this._indeterminate.set(changes.indeterminate.currentValue);
}
}
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.modelValue();
if (!this.binary) {
if (this.checked || this._indeterminate())
newModelValue = currentModelValue.filter((val) => !equals(val, this.value));
else
newModelValue = currentModelValue ? [...currentModelValue, this.value] : [this.value];
this.onModelChange(newModelValue);
this.writeModelValue(newModelValue);
if (this.formControl) {
this.formControl.setValue(newModelValue);
}
}
else {
newModelValue = this._indeterminate() ? this.trueValue : this.checked ? this.falseValue : this.trueValue;
this.writeModelValue(newModelValue);
this.onModelChange(newModelValue);
}
if (this._indeterminate()) {
this._indeterminate.set(false);
}
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();
}
/**
* @override
*
* @see {@link BaseEditableHolder.writeControlValue}
* Writes the value to the control.
*/
writeControlValue(value, setModelValue) {
setModelValue(value);
this.cd.markForCheck();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: Checkbox, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: Checkbox, isStandalone: true, selector: "p-checkbox, p-checkBox, p-check-box", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, binary: { classPropertyName: "binary", publicName: "binary", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: false, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: false, isRequired: false, transformFunction: null }, checkboxIcon: { classPropertyName: "checkboxIcon", publicName: "checkboxIcon", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, trueValue: { classPropertyName: "trueValue", publicName: "trueValue", isSignal: false, isRequired: false, transformFunction: null }, falseValue: { classPropertyName: "falseValue", publicName: "falseValue", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onFocus: "onFocus", onBlur: "onBlur" }, host: { properties: { "class": "cn(cx('root'), styleClass)", "attr.data-p-highlight": "checked", "attr.data-p-checked": "checked", "attr.data-p-disabled": "$disabled()" } }, providers: [CHECKBOX_VALUE_ACCESSOR, CheckboxStyle], queries: [{ propertyName: "checkboxIconTemplate", first: true, predicate: ["icon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
<input
#input
[attr.id]="inputId"
type="checkbox"
[attr.value]="value"
[attr.name]="name()"
[checked]="checked"
[attr.tabindex]="tabindex"
[attr.required]="required() ? '' : undefined"
[attr.readonly]="readonly ? '' : undefined"
[attr.disabled]="$disabled() ? '' : undefined"
[attr.aria-labelledby]="ariaLabelledBy"
[attr.aria-label]="ariaLabel"
[style]="inputStyle"
[class]="cn(cx('input'), inputClass)"
(focus)="onInputFocus($event)"
(blur)="onInputBlur($event)"
(change)="handleChange($event)"
/>
<div [class]="cx('box')">
<ng-container *ngIf="!checkboxIconTemplate && !_checkboxIconTemplate">
<ng-container *ngIf="checked">
<span *ngIf="checkboxIcon" [class]="cx('icon')" [ngClass]="checkboxIcon" [attr.data-pc-section]="'icon'"></span>
<svg data-p-icon="check" *ngIf="!checkboxIcon" [class]="cx('icon')" [attr.data-pc-section]="'icon'" />
</ng-container>
<svg data-p-icon="minus" *ngIf="_indeterminate()" [class]="cx('icon')" [attr.data-pc-section]="'icon'" />
</ng-container>
<ng-template *ngTemplateOutlet="checkboxIconTemplate || _checkboxIconTemplate; context: { checked: checked, class: cx('icon') }"></ng-template>
</div>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: CheckIcon, selector: "[data-p-icon=\"check\"]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: Checkbox, decorators: [{
type: Component,
args: [{
selector: 'p-checkbox, p-checkBox, p-check-box',
standalone: true,
imports: [CommonModule, SharedModule, CheckIcon],
template: `
<input
#input
[attr.id]="inputId"
type="checkbox"
[attr.value]="value"
[attr.name]="name()"
[checked]="checked"
[attr.tabindex]="tabindex"
[attr.required]="required() ? '' : undefined"
[attr.readonly]="readonly ? '' : undefined"
[attr.disabled]="$disabled() ? '' : undefined"
[attr.aria-labelledby]="ariaLabelledBy"
[attr.aria-label]="ariaLabel"
[style]="inputStyle"
[class]="cn(cx('input'), inputClass)"
(focus)="onInputFocus($event)"
(blur)="onInputBlur($event)"
(change)="handleChange($event)"
/>
<div [class]="cx('box')">
<ng-container *ngIf="!checkboxIconTemplate && !_checkboxIconTemplate">
<ng-container *ngIf="checked">
<span *ngIf="checkboxIcon" [class]="cx('icon')" [ngClass]="checkboxIcon" [attr.data-pc-section]="'icon'"></span>
<svg data-p-icon="check" *ngIf="!checkboxIcon" [class]="cx('icon')" [attr.data-pc-section]="'icon'" />
</ng-container>
<svg data-p-icon="minus" *ngIf="_indeterminate()" [class]="cx('icon')" [attr.data-pc-section]="'icon'" />
</ng-container>
<ng-template *ngTemplateOutlet="checkboxIconTemplate || _checkboxIconTemplate; context: { checked: checked, class: cx('icon') }"></ng-template>
</div>
`,
providers: [CHECKBOX_VALUE_ACCESSOR, CheckboxStyle],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
'[class]': "cn(cx('root'), styleClass)",
'[attr.data-p-highlight]': 'checked',
'[attr.data-p-checked]': 'checked',
'[attr.data-p-disabled]': '$disabled()'
}
}]
}], propDecorators: { value: [{
type: Input
}], binary: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], ariaLabelledBy: [{
type: Input
}], ariaLabel: [{
type: Input
}], tabindex: [{
type: Input,
args: [{ transform: numberAttribute }]
}], inputId: [{
type: Input
}], inputStyle: [{
type: Input
}], styleClass: [{
type: Input
}], inputClass: [{
type: Input
}], indeterminate: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], formControl: [{
type: Input
}], checkboxIcon: [{
type: Input
}], readonly: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], autofocus: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], trueValue: [{
type: Input
}], falseValue: [{
type: Input
}], onChange: [{
type: Output
}], onFocus: [{
type: Output
}], onBlur: [{
type: Output
}], inputViewChild: [{
type: ViewChild,
args: ['input']
}], checkboxIconTemplate: [{
type: ContentChild,
args: ['icon', { descendants: false }]
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] } });
class CheckboxModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: CheckboxModule, imports: [Checkbox, SharedModule], exports: [Checkbox, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CheckboxModule, imports: [Checkbox, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CheckboxModule, decorators: [{
type: NgModule,
args: [{
imports: [Checkbox, SharedModule],
exports: [Checkbox, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { CHECKBOX_VALUE_ACCESSOR, Checkbox, CheckboxClasses, CheckboxModule, CheckboxStyle };
//# sourceMappingURL=primeng-checkbox.mjs.map