@progress/kendo-angular-inputs 15.5.0-develop.9 → 15.5.0

package/checkbox/checkbox.component.d.ts

@@ -0,0 +1,71 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ElementRef, Renderer2, AfterViewInit, EventEmitter, ChangeDetectorRef, NgZone, Injector, OnInit } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { CheckBoxRounded } from '../common/models';
+import { CheckBoxState } from './checked-state';
+import { RadioCheckBoxBase } from '../common/radio-checkbox.base';
+import * as i0 from "@angular/core";
+export declare class CheckBoxComponent extends RadioCheckBoxBase implements ControlValueAccessor, OnInit, AfterViewInit {
+    protected renderer: Renderer2;
+    hostElement: ElementRef;
+    protected cdr: ChangeDetectorRef;
+    protected ngZone: NgZone;
+    protected injector: Injector;
+    hostClass: boolean;
+    /**
+     * Sets the checked state of the component.
+     *
+     * @default false
+     */
+    set checkedState(value: CheckBoxState);
+    get checkedState(): CheckBoxState;
+    /**
+     * The rounded property specifies the border radius of the CheckBox
+     * ([see example]({% slug appearance_checkboxdirective %}#toc-rounded)).
+     *
+     * @default 'medium'
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium`
+     * * `large`
+     * * `none`
+     */
+    set rounded(rounded: CheckBoxRounded);
+    get rounded(): CheckBoxRounded;
+    /**
+     * Fires each time the inner input's 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 `checkedState` property.
+     */
+    checkedStateChange: EventEmitter<CheckBoxState>;
+    /**
+     * @hidden
+     */
+    get isChecked(): boolean;
+    /**
+     * @hidden
+     */
+    get isIndeterminate(): boolean;
+    protected get defaultAttributes(): any;
+    private _rounded;
+    private _checkedState;
+    constructor(renderer: Renderer2, hostElement: ElementRef, cdr: ChangeDetectorRef, ngZone: NgZone, injector: Injector);
+    ngAfterViewInit(): void;
+    /**
+     * @hidden
+     */
+    handleChange: ($event: any) => void;
+    /**
+     * @hidden
+     */
+    writeValue(value: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CheckBoxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckBoxComponent, "kendo-checkbox", ["kendoCheckBox"], { "checkedState": "checkedState"; "rounded": "rounded"; }, { "checkedStateChange": "checkedStateChange"; }, never, never>;
+}

package/checkbox/checked-state.d.ts

@@ -0,0 +1,13 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the options for the `checkedState` input of the CheckBox component.
+ *
+ * @example
+ * ```html
+ * <kendo-checkbox checkedState="indeterminate"></kendo-checkbox>
+ * ```
+ */
+export declare type CheckBoxState = boolean | 'indeterminate';

package/checkbox.module.d.ts

@@ -4,10 +4,13 @@
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from "@angular/core";
 import * as i1 from "./checkbox/checkbox.directive";
-import * as i2 from "@angular/common";
+import * as i2 from "./checkbox/checkbox.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@progress/kendo-angular-common";
+import * as i5 from "./shared-events.module";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the CheckBox directive.
+ * definition for the CheckBox directive and CheckBoxComponent.
  *
  * @example
  *
@@ -38,6 +41,6 @@ import * as i2 from "@angular/common";
  */
 export declare class CheckBoxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckBoxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<CheckBoxModule, [typeof i1.CheckBoxDirective], [typeof i2.CommonModule], [typeof i1.CheckBoxDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CheckBoxModule, [typeof i1.CheckBoxDirective, typeof i2.CheckBoxComponent], [typeof i3.CommonModule, typeof i4.EventsModule, typeof i5.SharedEventsModule], [typeof i1.CheckBoxDirective, typeof i2.CheckBoxComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<CheckBoxModule>;
 }

package/common/radio-checkbox.base.d.ts

@@ -0,0 +1,166 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Renderer2, EventEmitter, ElementRef, Injector, ChangeDetectorRef, NgZone } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { ComponentType } from './utils';
+import { CheckBoxRounded, InputSize } from './models';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class RadioCheckBoxBase implements ControlValueAccessor {
+    private componentType;
+    protected hostElement: ElementRef;
+    protected renderer: Renderer2;
+    protected cdr: ChangeDetectorRef;
+    protected ngZone: NgZone;
+    protected injector: Injector;
+    /**
+     * @hidden
+     */
+    focusableId: string;
+    /**
+     * Sets the `title` attribute of the `input` element of the component.
+     */
+    title: string;
+    /**
+     * Sets the `name` attribute for the component.
+     */
+    name: string;
+    /**
+     * Sets the disabled state of the component.
+     *
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Specifies the `tabindex` of the component.
+     *
+     * @default 0
+     */
+    tabindex: number;
+    /**
+     * @hidden
+     */
+    set tabIndex(tabIndex: number);
+    get tabIndex(): number;
+    /**
+     * Provides a value for the component.
+     */
+    value: string;
+    /**
+     * The size property specifies the width and height of the component.
+     *
+     * @default 'medium'
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium`
+     * * `large`
+     * * `none`
+     */
+    set size(size: InputSize);
+    get size(): InputSize;
+    /**
+     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    set inputAttributes(attributes: {
+        [key: string]: string;
+    });
+    get inputAttributes(): {
+        [key: string]: string;
+    };
+    ngOnInit(): void;
+    /**
+     * Fires each time the user focuses the component.
+     *
+     * > To wire the event programmatically, use the `onFocus` property.
+     */
+    onFocus: EventEmitter<any>;
+    /**
+     * Fires each time the component gets blurred.
+     *
+     * > To wire the event programmatically, use the `onBlur` property.
+     */
+    onBlur: EventEmitter<any>;
+    /**
+     * Focuses the component.
+     */
+    focus(): void;
+    /**
+     * Blurs the component.
+     */
+    blur(): void;
+    /**
+     * @hidden
+     */
+    handleInputBlur: () => void;
+    /**
+     * @hidden
+     */
+    handleFocus(): void;
+    /**
+     * @hidden
+     */
+    handleBlur(): void;
+    /**
+     * @hidden
+     */
+    registerOnChange(fn: (_: any) => void): void;
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn: () => any): void;
+    /**
+     * @hidden
+     */
+    get isControlRequired(): boolean;
+    /**
+     * @hidden
+     */
+    get isControlInvalid(): boolean;
+    /**
+     * Represents the visible `input` element.
+     */
+    input: ElementRef;
+    /**
+     * @hidden
+     */
+    get isFocused(): boolean;
+    /**
+     * @hidden
+     */
+    set isFocused(value: boolean);
+    /**
+     * @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: boolean): void;
+    protected control: NgControl;
+    protected focusChangedProgrammatically: boolean;
+    protected get defaultAttributes(): any;
+    protected parsedAttributes: {
+        [key: string]: string;
+    };
+    protected _inputAttributes: {
+        [key: string]: string;
+    };
+    protected ngChange: Function;
+    protected ngTouched: Function;
+    private _isFocused;
+    private _size;
+    constructor(componentType: ComponentType, hostElement: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef, ngZone: NgZone, injector: Injector);
+    /**
+     * @hidden
+     */
+    writeValue(_value: any): void;
+    protected handleClasses(value: InputSize | CheckBoxRounded, input: string): void;
+    protected setInputAttributes(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioCheckBoxBase, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioCheckBoxBase, "ng-component", never, { "focusableId": "focusableId"; "title": "title"; "name": "name"; "disabled": "disabled"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "value": "value"; "size": "size"; "inputAttributes": "inputAttributes"; }, { "onFocus": "focus"; "onBlur": "blur"; }, never, never>;
+}

package/common/utils.d.ts

@@ -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";
 import { InputStylingClasses } from "./models";
 /**
  * @hidden
@@ -54,3 +55,13 @@ export declare const isNone: (style: string) => boolean;
  * Returns the styling classes to be added and removed
  */
 export declare const getStylingClasses: (componentType: any, stylingOption: string, previousValue: any, newValue: any) => InputStylingClasses;
+/**
+ * @hidden
+ *
+ * Used to differentiate between the Radio and CheckBox components in their base class.
+ */
+export declare const COMPONENT_TYPE: InjectionToken<ComponentType>;
+/**
+ * @hidden
+ */
+export declare type ComponentType = 'radio' | 'checkbox';

package/esm2020/checkbox/checkbox.component.mjs

@@ -0,0 +1,215 @@
+/**-----------------------------------------------------------------------------------------
+* 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, 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 * as i0 from "@angular/core";
+import * as i1 from "../shared/shared-events.directive";
+import * as i2 from "@progress/kendo-angular-common";
+const DEFAULT_ROUNDED = 'medium';
+export class CheckBoxComponent extends RadioCheckBoxBase {
+    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;
+        this.hostClass = true;
+        /**
+         * Fires each time the inner input's 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 `checkedState` property.
+         */
+        this.checkedStateChange = new EventEmitter();
+        this._rounded = DEFAULT_ROUNDED;
+        this._checkedState = false;
+        /**
+         * @hidden
+         */
+        this.handleChange = ($event) => {
+            this.ngZone.run(() => {
+                this.checkedState = $event && $event.target && $event.target.checked;
+                this.checkedStateChange.emit(this.checkedState);
+                this.ngChange(this.checkedState);
+            });
+        };
+        validatePackage(packageMetadata);
+    }
+    /**
+     * Sets the checked state of the component.
+     *
+     * @default false
+     */
+    set checkedState(value) {
+        this._checkedState = value;
+        if (!isPresent(this.input)) {
+            return;
+        }
+        this.input.nativeElement.indeterminate = value === 'indeterminate';
+    }
+    get checkedState() {
+        return this._checkedState;
+    }
+    /**
+     * The rounded property specifies the border radius of the CheckBox
+     * ([see example]({% slug appearance_checkboxdirective %}#toc-rounded)).
+     *
+     * @default 'medium'
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium`
+     * * `large`
+     * * `none`
+     */
+    set rounded(rounded) {
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * @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
+        };
+    }
+    ngAfterViewInit() {
+        const stylingInputs = ['size', 'rounded'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+        this.input.nativeElement.indeterminate = this.checkedState === 'indeterminate';
+    }
+    /**
+     * @hidden
+     */
+    writeValue(value) {
+        this.checkedState = value;
+    }
+}
+CheckBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+CheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CheckBoxComponent, 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"
+                [attr.aria-invalid]="isControlInvalid"
+                [attr.required]="isControlRequired ? '' : null"
+                [kendoEventsOutsideAngular]="{
+                    blur: handleInputBlur,
+                    change: handleChange
+                }"
+            />
+        </ng-container>
+    `, isInline: true, directives: [{ type: i1.SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i2.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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"
+                [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 }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-checkbox-wrap']
+            }], checkedState: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], checkedStateChange: [{
+                type: Output
+            }] } });

package/esm2020/checkbox/checked-state.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2020/checkbox.module.mjs

@@ -3,12 +3,15 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { NgModule } from '@angular/core';
-import { CheckBoxDirective } from './checkbox/checkbox.directive';
+import { EventsModule } from '@progress/kendo-angular-common';
 import { CommonModule } from '@angular/common';
+import { CheckBoxDirective } from './checkbox/checkbox.directive';
+import { CheckBoxComponent } from './checkbox/checkbox.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 CheckBox directive.
+ * definition for the CheckBox directive and CheckBoxComponent.
  *
  * @example
  *
@@ -40,13 +43,13 @@ import * as i0 from "@angular/core";
 export class CheckBoxModule {
 }
 CheckBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CheckBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxModule, declarations: [CheckBoxDirective], imports: [CommonModule], exports: [CheckBoxDirective] });
-CheckBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxModule, imports: [[CommonModule]] });
+CheckBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxModule, declarations: [CheckBoxDirective, CheckBoxComponent], imports: [CommonModule, EventsModule, SharedEventsModule], exports: [CheckBoxDirective, CheckBoxComponent] });
+CheckBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxModule, imports: [[CommonModule, EventsModule, SharedEventsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [CheckBoxDirective],
-                    exports: [CheckBoxDirective],
-                    imports: [CommonModule]
+                    declarations: [CheckBoxDirective, CheckBoxComponent],
+                    exports: [CheckBoxDirective, CheckBoxComponent],
+                    imports: [CommonModule, EventsModule, SharedEventsModule]
                 }]
         }] });