@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
303 lines (302 loc) • 9.58 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 { Input, Component, Renderer2, Output, EventEmitter, ViewChild, ElementRef, Injector, ChangeDetectorRef, NgZone, Inject } from '@angular/core';
import { NgControl } from '@angular/forms';
import { guid, hasObservers, isControlRequired, isObjectPresent, isPresent, parseAttributes, removeHTMLAttributes, setHTMLAttributes } from '@progress/kendo-angular-common';
import { COMPONENT_TYPE, getStylingClasses, requiresZoneOnBlur } from './utils';
import * as i0 from "@angular/core";
const FOCUSED = 'k-focus';
const DEFAULT_SIZE = 'medium';
/**
* @hidden
*/
export class RadioCheckBoxBase {
componentType;
hostElement;
renderer;
cdr;
ngZone;
injector;
/**
* @hidden
*/
focusableId = `k-${guid()}`;
/**
* Sets the `title` attribute of the `input` element of the component.
*/
title;
/**
* Sets the `name` attribute for the component.
*/
name;
/**
* Sets the disabled state of the component.
*
* @default false
*/
disabled = false;
/**
* Specifies the `tabindex` of the component.
*
* @default 0
*/
tabindex = 0;
/**
* @hidden
*/
set tabIndex(tabIndex) {
this.tabindex = tabIndex;
}
get tabIndex() {
return this.tabindex;
}
/**
* Provides a value for the component.
*/
value;
/**
* The size property specifies the width and height of the component.
*
* @default 'medium'
*
* The possible values are:
* * `small`
* * `medium`
* * `large`
* * `none`
*/
set size(size) {
const newSize = size ? size : DEFAULT_SIZE;
this.handleClasses(newSize, 'size');
this._size = newSize;
}
get size() {
return this._size;
}
/**
* Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
*/
set inputAttributes(attributes) {
if (isObjectPresent(this.parsedAttributes)) {
removeHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement);
}
this._inputAttributes = attributes;
this.parsedAttributes = this.inputAttributes ?
parseAttributes(this.inputAttributes, this.defaultAttributes) :
this.inputAttributes;
this.setInputAttributes();
}
get inputAttributes() {
return this._inputAttributes;
}
ngOnInit() {
this.control = this.injector.get(NgControl, null);
}
/**
* Fires each time the user focuses the component.
*
* > To wire the event programmatically, use the `onFocus` property.
*/
onFocus = new EventEmitter();
/**
* Fires each time the component gets blurred.
*
* > To wire the event programmatically, use the `onBlur` property.
*/
onBlur = new EventEmitter();
/**
* Focuses the component.
*/
focus() {
if (!this.input) {
return;
}
this.focusChangedProgrammatically = true;
this.isFocused = true;
this.input.nativeElement.focus();
this.focusChangedProgrammatically = false;
}
/**
* Blurs the component.
*/
blur() {
this.focusChangedProgrammatically = true;
const isFocusedElement = this.hostElement.nativeElement.querySelector(':focus');
if (isFocusedElement) {
isFocusedElement.blur();
}
this.isFocused = false;
this.focusChangedProgrammatically = false;
}
/**
* @hidden
*/
handleInputBlur = () => {
this.cdr.markForCheck();
if (requiresZoneOnBlur(this.control)) {
this.ngZone.run(() => {
this.ngTouched();
});
}
};
/**
* @hidden
*/
handleFocus() {
this.ngZone.run(() => {
if (!this.focusChangedProgrammatically && hasObservers(this.onFocus)) {
this.onFocus.emit();
}
this.isFocused = true;
});
}
/**
* @hidden
*/
handleBlur() {
this.ngZone.run(() => {
if (!this.focusChangedProgrammatically) {
this.ngTouched();
this.onBlur.emit();
}
this.isFocused = false;
});
}
/**
* @hidden
*/
registerOnChange(fn) {
this.ngChange = fn;
}
/**
* @hidden
*/
registerOnTouched(fn) {
this.ngTouched = fn;
}
/**
* @hidden
*/
get isControlRequired() {
return isControlRequired(this.control?.control);
}
/**
* @hidden
*/
get isControlInvalid() {
return this.control && this.control.touched && !this.control.valid;
}
/**
* Represents the visible `input` element.
*/
input;
/**
* @hidden
*/
get isFocused() {
return this._isFocused;
}
/**
* @hidden
*/
set isFocused(value) {
if (this._isFocused !== value && this.input) {
const element = this.input.nativeElement;
if (value && !this.disabled) {
this.renderer.addClass(element, FOCUSED);
}
else {
this.renderer.removeClass(element, FOCUSED);
}
this._isFocused = value;
}
}
/**
* @hidden
* Called when the status of the component changes to or from `disabled`.
* Depending on the value, it enables or disables the appropriate DOM element.
*
* @param isDisabled
*/
setDisabledState(isDisabled) {
this.cdr.markForCheck();
this.disabled = isDisabled;
}
control;
focusChangedProgrammatically = false;
get defaultAttributes() { return null; }
parsedAttributes = {};
_inputAttributes;
ngChange = (_) => { };
ngTouched = () => { };
_isFocused = false;
_size = DEFAULT_SIZE;
constructor(componentType, hostElement, renderer, cdr, ngZone, injector) {
this.componentType = componentType;
this.hostElement = hostElement;
this.renderer = renderer;
this.cdr = cdr;
this.ngZone = ngZone;
this.injector = injector;
}
/**
* @hidden
*/
writeValue(_value) { }
handleClasses(value, input) {
if (!isPresent(this.input)) {
return;
}
const inputElem = this.input.nativeElement;
const classes = getStylingClasses(this.componentType, input, this[input], value);
if (classes.toRemove) {
this.renderer.removeClass(inputElem, classes.toRemove);
}
if (classes.toAdd) {
this.renderer.addClass(inputElem, classes.toAdd);
}
}
setInputAttributes() {
setHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement, this.ngZone);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioCheckBoxBase, deps: [{ token: COMPONENT_TYPE }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioCheckBoxBase, selector: "ng-component", inputs: { focusableId: "focusableId", title: "title", name: "name", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex", value: "value", size: "size", inputAttributes: "inputAttributes" }, outputs: { onFocus: "focus", onBlur: "blur" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioCheckBoxBase, decorators: [{
type: Component,
args: [{
template: ''
}]
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Inject,
args: [COMPONENT_TYPE]
}] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Injector }]; }, propDecorators: { focusableId: [{
type: Input
}], title: [{
type: Input
}], name: [{
type: Input
}], disabled: [{
type: Input
}], tabindex: [{
type: Input
}], tabIndex: [{
type: Input
}], value: [{
type: Input
}], size: [{
type: Input
}], inputAttributes: [{
type: Input
}], onFocus: [{
type: Output,
args: ['focus']
}], onBlur: [{
type: Output,
args: ['blur']
}], input: [{
type: ViewChild,
args: ['input', { static: true }]
}] } });