@progress/kendo-angular-inputs 15.5.0-develop.12 → 15.5.0-develop.13

package/esm2020/common/radio-checkbox.base.mjs

@@ -0,0 +1,278 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 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 {
+    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
+         */
+        this.focusableId = `k-${guid()}`;
+        /**
+         * Sets the disabled state of the component.
+         *
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Specifies the `tabindex` of the component.
+         *
+         * @default 0
+         */
+        this.tabindex = 0;
+        /**
+         * Fires each time the user focuses the component.
+         *
+         * > To wire the event programmatically, use the `onFocus` property.
+         */
+        this.onFocus = new EventEmitter();
+        /**
+         * Fires each time the component gets blurred.
+         *
+         * > To wire the event programmatically, use the `onBlur` property.
+         */
+        this.onBlur = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.handleInputBlur = () => {
+            this.cdr.markForCheck();
+            if (requiresZoneOnBlur(this.control)) {
+                this.ngZone.run(() => {
+                    this.ngTouched();
+                });
+            }
+        };
+        this.focusChangedProgrammatically = false;
+        this.parsedAttributes = {};
+        this.ngChange = (_) => { };
+        this.ngTouched = () => { };
+        this._isFocused = false;
+        this._size = DEFAULT_SIZE;
+    }
+    /**
+     * @hidden
+     */
+    set tabIndex(tabIndex) {
+        this.tabindex = tabIndex;
+    }
+    get tabIndex() {
+        return this.tabindex;
+    }
+    /**
+     * 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);
+    }
+    /**
+     * 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
+     */
+    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;
+    }
+    /**
+     * @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;
+    }
+    get defaultAttributes() { return; }
+    /**
+     * @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);
+    }
+}
+RadioCheckBoxBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.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 });
+RadioCheckBoxBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.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: "13.3.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 }]
+            }] } });

package/esm2020/common/utils.mjs

@@ -2,6 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { InjectionToken } from "@angular/core";
 /**
  * @hidden
  *
@@ -79,3 +80,9 @@ export const getStylingClasses = (componentType, stylingOption, previousValue, n
             break;
     }
 };
+/**
+ * @hidden
+ *
+ * Used to differentiate between the Radio and CheckBox components in their base class.
+ */
+export const COMPONENT_TYPE = new InjectionToken('TYPE_TOKEN');

package/esm2020/index.mjs

@@ -42,6 +42,10 @@ export { FormFieldModule } from './formfield.module';
 export { TextBoxComponent } from './textbox/textbox.component';
 export { TextBoxPrefixTemplateDirective } from './textbox/textbox-prefix.directive';
 export { TextBoxSuffixTemplateDirective } from './textbox/textbox-suffix.directive';
+//CheckBox Component
+export { CheckBoxComponent } from './checkbox/checkbox.component';
+//RadioButton Component
+export { RadioButtonComponent } from './radiobutton/radiobutton.component';
 //TextArea Component
 export { TextAreaComponent } from './textarea/textarea.component';
 export { TextAreaPrefixComponent } from './textarea/textarea-prefix.component';

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1713254860,
-    version: '15.5.0-develop.12',
+    publishDate: 1713265586,
+    version: '15.5.0-develop.13',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/radiobutton/radiobutton.component.mjs

@@ -0,0 +1,192 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 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 { KendoInput } 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 { Subscription } from 'rxjs';
+import { RadioCheckBoxBase } from '../common/radio-checkbox.base';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../shared/shared-events.directive";
+import * as i3 from "@progress/kendo-angular-common";
+export class RadioButtonComponent extends RadioCheckBoxBase {
+    constructor(renderer, hostElement, cdr, ngZone, injector, localizationService) {
+        super('radio', hostElement, renderer, cdr, ngZone, injector);
+        this.renderer = renderer;
+        this.hostElement = hostElement;
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+        this.injector = injector;
+        this.localizationService = localizationService;
+        this.hostClass = true;
+        /**
+         * Specifies the checked state of the RadioButton.
+         *
+         * @default false
+         */
+        this.checked = false;
+        /**
+         * Fires each time the checked state is changed.
+         * When the state of the component is programmatically changed to `ngModel` or `formControl`
+         * through its API or form binding, the `checkedStateChange` event is not triggered because it
+         * might cause a mix-up with the built-in mechanisms of the `ngModel` or `formControl` bindings.
+         *
+         * Used to provide a two-way binding for the `checked` property.
+         */
+        this.checkedChange = new EventEmitter();
+        this.subs = new Subscription();
+        /**
+         * @hidden
+         */
+        this.handleChange = ($event) => {
+            this.ngZone.run(() => {
+                this.checked = $event.target.checked;
+                this.checkedChange.emit(this.checked);
+                this.ngChange($event.target.value);
+            });
+        };
+        validatePackage(packageMetadata);
+        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+    }
+    get defaultAttributes() {
+        return {
+            type: 'radio',
+            id: this.focusableId,
+            title: this.title,
+            tabindex: this.tabindex,
+            tabIndex: this.tabindex,
+            disabled: this.disabled ? '' : null,
+            value: this.value,
+            checked: this.checked,
+            name: this.name,
+            'aria-invalid': this.isControlInvalid
+        };
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.subs.add(this.localizationService.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        }));
+    }
+    ngAfterViewInit() {
+        const stylingInputs = ['size'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+        // Otherwise the view is not updated in Reactive Forms - https://github.com/angular/angular/issues/13792
+        if (this.control) {
+            this.subs.add(this.control.valueChanges.subscribe(e => {
+                this.control.control.setValue(e, { emitEvent: false });
+            }));
+        }
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    writeValue(value) {
+        this.checked = value === this.value;
+    }
+}
+RadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RadioButtonComponent, selector: "kendo-radiobutton", inputs: { checked: "checked" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.k-radio-wrap": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
+        LocalizationService,
+        { provide: L10N_PREFIX, useValue: 'kendo.radiobutton' },
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => RadioButtonComponent),
+            multi: true
+        },
+        { provide: KendoInput, useExisting: forwardRef(() => RadioButtonComponent) }
+    ], exportAs: ["kendoRadioButton"], usesInheritance: true, ngImport: i0, template: `
+        <ng-container
+            kendoInputSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
+        >
+            <input #input
+                type="radio"
+                class="k-radio"
+                [id]="focusableId"
+                [attr.title]="title"
+                [disabled]="disabled"
+                [class.k-disabled]="disabled"
+                [attr.tabindex]="disabled ? undefined : tabindex"
+                [value]="value"
+                [name]="name"
+                [checked]="checked"
+                [class.k-checked]="checked"
+                [attr.aria-invalid]="isControlInvalid"
+                [attr.required]="isControlRequired ? '' : null"
+                [kendoEventsOutsideAngular]="{
+                    blur: handleInputBlur,
+                    change: handleChange
+                }"
+            />
+        </ng-container>
+    `, isInline: true, directives: [{ type: i2.SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoRadioButton',
+                    providers: [
+                        LocalizationService,
+                        { provide: L10N_PREFIX, useValue: 'kendo.radiobutton' },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioButtonComponent),
+                            multi: true
+                        },
+                        { provide: KendoInput, useExisting: forwardRef(() => RadioButtonComponent) }
+                    ],
+                    selector: 'kendo-radiobutton',
+                    template: `
+        <ng-container
+            kendoInputSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
+        >
+            <input #input
+                type="radio"
+                class="k-radio"
+                [id]="focusableId"
+                [attr.title]="title"
+                [disabled]="disabled"
+                [class.k-disabled]="disabled"
+                [attr.tabindex]="disabled ? undefined : tabindex"
+                [value]="value"
+                [name]="name"
+                [checked]="checked"
+                [class.k-checked]="checked"
+                [attr.aria-invalid]="isControlInvalid"
+                [attr.required]="isControlRequired ? '' : null"
+                [kendoEventsOutsideAngular]="{
+                    blur: handleInputBlur,
+                    change: handleChange
+                }"
+            />
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-radio-wrap']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], checked: [{
+                type: Input
+            }], checkedChange: [{
+                type: Output
+            }] } });

package/esm2020/radiobutton.module.mjs

@@ -2,13 +2,16 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { EventsModule } from '@progress/kendo-angular-common';
 import { NgModule } from '@angular/core';
 import { RadioButtonDirective } from './radiobutton/radiobutton.directive';
 import { CommonModule } from '@angular/common';
+import { RadioButtonComponent } from './radiobutton/radiobutton.component';
+import { SharedEventsModule } from './shared-events.module';
 import * as i0 from "@angular/core";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the RadioButton directive.
+ * definition for the RadioButton directive and RadioButtonComponent.
  *
  * @example
  *
@@ -40,13 +43,13 @@ import * as i0 from "@angular/core";
 export class RadioButtonModule {
 }
 RadioButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RadioButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonModule, declarations: [RadioButtonDirective], imports: [CommonModule], exports: [RadioButtonDirective] });
-RadioButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonModule, imports: [[CommonModule]] });
+RadioButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonModule, declarations: [RadioButtonDirective, RadioButtonComponent], imports: [CommonModule, EventsModule, SharedEventsModule], exports: [RadioButtonDirective, RadioButtonComponent] });
+RadioButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonModule, imports: [[CommonModule, EventsModule, SharedEventsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [RadioButtonDirective],
-                    exports: [RadioButtonDirective],
-                    imports: [CommonModule]
+                    declarations: [RadioButtonDirective, RadioButtonComponent],
+                    exports: [RadioButtonDirective, RadioButtonComponent],
+                    imports: [CommonModule, EventsModule, SharedEventsModule]
                 }]
         }] });

package/esm2020/textarea/textarea.component.mjs

@@ -95,7 +95,7 @@ export class TextAreaComponent extends TextFieldsBase {
          * })
          * class AppComponent {
          *   public handleFocus(): void {
-         *      console.log('Component is focused');
+         *      console.log('Component is focused.');
          *   }
          * }
          * ```

package/esm2020/textbox/textbox.component.mjs

@@ -138,7 +138,7 @@ export class TextBoxComponent {
          * })
          * class AppComponent {
          *   public handleFocus(): void {
-         *      console.log('Component is isFocused');
+         *      console.log('Component is focused.');
          *   }
          * }
          * ```