@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
228 lines (227 loc) • 9.62 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, ElementRef, forwardRef, Input, HostBinding, Renderer2, Output, EventEmitter, ChangeDetectorRef, NgZone, Injector } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { EventsOutsideAngularDirective, KendoInput, isPresent, } from '@progress/kendo-angular-common';
import { validatePackage } from '@progress/kendo-licensing';
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
import { packageMetadata } from '../package-metadata';
import { RadioCheckBoxBase } from '../common/radio-checkbox.base';
import { SharedInputEventsDirective } from '../shared/shared-events.directive';
import * as i0 from "@angular/core";
const DEFAULT_ROUNDED = 'medium';
/**
* Represents the Kendo UI CheckBox component for Angular.
* Use this component to create a styled checkbox with support for indeterminate state.
*
* @example
* ```html
* <kendo-checkbox [(checkedState)]="value"></kendo-checkbox>
* ```
*/
export class CheckBoxComponent extends RadioCheckBoxBase {
renderer;
hostElement;
cdr;
ngZone;
injector;
hostClass = true;
/**
* Sets the checked state of the component.
*
* Use `true`, `false`, or `'indeterminate'` to control the state.
*
* @default false
*/
set checkedState(value) {
this._checkedState = value;
if (!isPresent(this.input)) {
return;
}
this.input.nativeElement.indeterminate = value === 'indeterminate';
}
get checkedState() {
return this._checkedState;
}
/**
* Sets the `rounded` property to specify the border radius of the CheckBox
* ([see example](slug:appearance_checkboxdirective#toc-roundness)).
*
* @default 'medium'
*/
set rounded(rounded) {
const newRounded = rounded || DEFAULT_ROUNDED;
this.handleClasses(newRounded, 'rounded');
this._rounded = newRounded;
}
get rounded() {
return this._rounded;
}
/**
* Fires when the inner input's checked state changes.
* This event does not fire when you change the state programmatically using `ngModel` or `formControl`.
* Use this event for two-way binding with the `checkedState` property.
*/
checkedStateChange = new EventEmitter();
/**
* @hidden
*/
get isChecked() {
return typeof this.checkedState === 'boolean' && this.checkedState;
}
/**
* @hidden
*/
get isIndeterminate() {
return typeof this.checkedState === 'string' && this.checkedState === 'indeterminate';
}
get defaultAttributes() {
return {
type: 'checkbox',
id: this.focusableId,
title: this.title,
tabindex: this.tabindex,
tabIndex: this.tabindex,
disabled: this.disabled ? '' : null,
value: this.value,
checked: this.isChecked,
'aria-invalid': this.isControlInvalid
};
}
_rounded = DEFAULT_ROUNDED;
_checkedState = false;
constructor(renderer, hostElement, cdr, ngZone, injector) {
super('checkbox', hostElement, renderer, cdr, ngZone, injector);
this.renderer = renderer;
this.hostElement = hostElement;
this.cdr = cdr;
this.ngZone = ngZone;
this.injector = injector;
validatePackage(packageMetadata);
}
ngAfterViewInit() {
const stylingInputs = ['size', 'rounded'];
stylingInputs.forEach(input => {
this.handleClasses(this[input], input);
});
this.input.nativeElement.indeterminate = this.checkedState === 'indeterminate';
}
/**
* @hidden
*/
handleChange = ($event) => {
this.ngZone.run(() => {
this.checkedState = $event && $event.target && $event.target.checked;
this.checkedStateChange.emit(this.checkedState);
this.ngChange(this.checkedState);
this.cdr.markForCheck();
});
};
/**
* @hidden
*/
writeValue(value) {
this.checkedState = value;
this.cdr.markForCheck();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckBoxComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CheckBoxComponent, isStandalone: true, selector: "kendo-checkbox", inputs: { checkedState: "checkedState", rounded: "rounded" }, outputs: { checkedStateChange: "checkedStateChange" }, host: { properties: { "class.k-checkbox-wrap": "this.hostClass" } }, providers: [
LocalizationService,
{ provide: L10N_PREFIX, useValue: 'kendo.checkbox' },
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CheckBoxComponent),
multi: true
},
{ provide: KendoInput, useExisting: forwardRef(() => CheckBoxComponent) }
], exportAs: ["kendoCheckBox"], usesInheritance: true, ngImport: i0, template: `
<ng-container
kendoInputSharedEvents
[hostElement]="hostElement"
[(isFocused)]="isFocused"
(handleBlur)="handleBlur()"
(onFocus)="handleFocus()"
>
<input #input
type="checkbox"
class="k-checkbox"
[id]="focusableId"
[attr.title]="title"
[disabled]="disabled"
[class.k-disabled]="disabled"
[attr.tabindex]="disabled ? undefined : tabindex"
[value]="value"
[checked]="isChecked"
[class.k-checked]="isChecked"
[class.k-indeterminate]="isIndeterminate"
[class.k-invalid]="isControlInvalid"
[attr.aria-invalid]="isControlInvalid"
[attr.required]="isControlRequired ? '' : null"
[kendoEventsOutsideAngular]="{
blur: handleInputBlur,
change: handleChange
}"
/>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckBoxComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoCheckBox',
providers: [
LocalizationService,
{ provide: L10N_PREFIX, useValue: 'kendo.checkbox' },
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CheckBoxComponent),
multi: true
},
{ provide: KendoInput, useExisting: forwardRef(() => CheckBoxComponent) }
],
selector: 'kendo-checkbox',
template: `
<ng-container
kendoInputSharedEvents
[hostElement]="hostElement"
[(isFocused)]="isFocused"
(handleBlur)="handleBlur()"
(onFocus)="handleFocus()"
>
<input #input
type="checkbox"
class="k-checkbox"
[id]="focusableId"
[attr.title]="title"
[disabled]="disabled"
[class.k-disabled]="disabled"
[attr.tabindex]="disabled ? undefined : tabindex"
[value]="value"
[checked]="isChecked"
[class.k-checked]="isChecked"
[class.k-indeterminate]="isIndeterminate"
[class.k-invalid]="isControlInvalid"
[attr.aria-invalid]="isControlInvalid"
[attr.required]="isControlRequired ? '' : null"
[kendoEventsOutsideAngular]="{
blur: handleInputBlur,
change: handleChange
}"
/>
</ng-container>
`,
standalone: true,
imports: [SharedInputEventsDirective, EventsOutsideAngularDirective]
}]
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Injector }], propDecorators: { hostClass: [{
type: HostBinding,
args: ['class.k-checkbox-wrap']
}], checkedState: [{
type: Input
}], rounded: [{
type: Input
}], checkedStateChange: [{
type: Output
}] } });