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

package/fesm2020/progress-kendo-angular-inputs.mjs

@@ -3,14 +3,14 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { isDevMode, Directive, Optional, EventEmitter, ElementRef, Component, Input, HostBinding, Output, ViewChild, ContentChild, ViewChildren, forwardRef, Inject, Injectable, HostListener, NgModule, ContentChildren, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
+import { InjectionToken, isDevMode, Directive, Optional, EventEmitter, ElementRef, Component, Input, HostBinding, Output, ViewChild, ContentChild, ViewChildren, forwardRef, Inject, Injectable, HostListener, NgModule, ContentChildren, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
 import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, RadioControlValueAccessor } from '@angular/forms';
 import { Subscription, fromEvent, interval, merge, BehaviorSubject, Subject } from 'rxjs';
 import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, throttleTime } from 'rxjs/operators';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
-import * as i4 from '@progress/kendo-angular-common';
-import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, SuffixTemplateDirective, PrefixTemplateDirective, isChanged, DraggableModule, EventsModule, ResizeSensorModule, AdornmentsModule, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1 } from '@progress/kendo-angular-common';
+import * as i3$1 from '@progress/kendo-angular-common';
+import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, SuffixTemplateDirective, PrefixTemplateDirective, isChanged, DraggableModule, EventsModule, ResizeSensorModule, AdornmentsModule, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1, isPresent as isPresent$1 } from '@progress/kendo-angular-common';
 export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, checkIcon, exclamationCircleIcon, xIcon, caretAltExpandIcon, xCircleIcon, dropletSlashIcon, dropletSliderIcon, paletteIcon, hyperlinkOpenIcon, starIcon, starOutlineIcon } from '@progress/kendo-svg-icons';
@@ -25,7 +25,7 @@ import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import { parseColor as parseColor$1, Color, namedColors } from '@progress/kendo-drawing';
-import * as i3$1 from '@progress/kendo-angular-dialog';
+import * as i3$2 from '@progress/kendo-angular-dialog';
 import { DialogsModule } from '@progress/kendo-angular-dialog';
 import { SignaturePad } from '@progress/kendo-inputs-common';
 
@@ -106,6 +106,12 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
             break;
     }
 };
+/**
+ * @hidden
+ *
+ * Used to differentiate between the Radio and CheckBox components in their base class.
+ */
+const COMPONENT_TYPE = new InjectionToken('TYPE_TOKEN');
 
 /**
  * @hidden
@@ -537,8 +543,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1712910858,
-    version: '15.5.0-develop.9',
+    publishDate: 1713437421,
+    version: '15.5.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1498,7 +1504,7 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             [attr.aria-label]="currentValue"
         ></button>
         <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
-  `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i4.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
+  `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i3$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i3$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{
@@ -2201,7 +2207,7 @@ RangeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </div>
         </div>
         <kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
-  `, isInline: true, components: [{ type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i4.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedRangeSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
+  `, isInline: true, components: [{ type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i3$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedRangeSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i3$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RangeSliderComponent, decorators: [{
             type: Component,
             args: [{
@@ -2345,8 +2351,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
-const FOCUSED$4 = 'k-focus';
-const DEFAULT_SIZE$8 = 'medium';
+const FOCUSED$5 = 'k-focus';
+const DEFAULT_SIZE$9 = 'medium';
 const DEFAULT_THUMB_ROUNDED = 'full';
 const DEFAULT_TRACK_ROUNDED = 'full';
 /**
@@ -2468,7 +2474,7 @@ class SwitchComponent {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$8;
+        const newSize = size ? size : DEFAULT_SIZE$9;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -2695,10 +2701,10 @@ class SwitchComponent {
         if (this.isFocused !== value && this.hostElement) {
             const wrapper = this.hostElement.nativeElement;
             if (value) {
-                this.renderer.addClass(wrapper, FOCUSED$4);
+                this.renderer.addClass(wrapper, FOCUSED$5);
             }
             else {
-                this.renderer.removeClass(wrapper, FOCUSED$4);
+                this.renderer.removeClass(wrapper, FOCUSED$5);
             }
             this.isFocused = value;
         }
@@ -3630,9 +3636,9 @@ const PARSABLE_DEFAULTS = {
     min: null,
     step: 1
 };
-const FOCUSED$3 = 'k-focus';
-const DEFAULT_SIZE$7 = 'medium';
-const DEFAULT_ROUNDED$6 = 'medium';
+const FOCUSED$4 = 'k-focus';
+const DEFAULT_SIZE$8 = 'medium';
+const DEFAULT_ROUNDED$7 = 'medium';
 const DEFAULT_FILL_MODE$5 = 'solid';
 /**
  * Represents the [Kendo UI NumericTextBox component for Angular]({% slug overview_numerictextbox %}).
@@ -3978,7 +3984,7 @@ class NumericTextBoxComponent {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$7;
+        const newSize = size ? size : DEFAULT_SIZE$8;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -3995,7 +4001,7 @@ class NumericTextBoxComponent {
      * * `none`
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$6;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$7;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -4241,10 +4247,10 @@ class NumericTextBoxComponent {
         if (this.isFocused !== value && this.hostElement) {
             const wrap = this.hostElement.nativeElement;
             if (value) {
-                this.renderer.addClass(wrap, FOCUSED$3);
+                this.renderer.addClass(wrap, FOCUSED$4);
             }
             else {
-                this.renderer.removeClass(wrap, FOCUSED$3);
+                this.renderer.removeClass(wrap, FOCUSED$4);
             }
             this.isFocused = value;
         }
@@ -4661,7 +4667,7 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </button>
             </span>
         </ng-container>
-    `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -5310,9 +5316,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }] });
 
 const resolvedPromise = Promise.resolve(null);
-const FOCUSED$2 = 'k-focus';
-const DEFAULT_SIZE$6 = 'medium';
-const DEFAULT_ROUNDED$5 = 'medium';
+const FOCUSED$3 = 'k-focus';
+const DEFAULT_SIZE$7 = 'medium';
+const DEFAULT_ROUNDED$6 = 'medium';
 const DEFAULT_FILL_MODE$4 = 'solid';
 /**
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
@@ -5550,7 +5556,7 @@ class MaskedTextBoxComponent {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$6;
+        const newSize = size ? size : DEFAULT_SIZE$7;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -5567,7 +5573,7 @@ class MaskedTextBoxComponent {
      * * `none`
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$5;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$6;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -5910,10 +5916,10 @@ class MaskedTextBoxComponent {
         if (this.isFocused !== value && this.hostElement) {
             const element = this.hostElement.nativeElement;
             if (value) {
-                this.renderer.addClass(element, FOCUSED$2);
+                this.renderer.addClass(element, FOCUSED$3);
             }
             else {
-                this.renderer.removeClass(element, FOCUSED$2);
+                this.renderer.removeClass(element, FOCUSED$3);
             }
             this.isFocused = value;
         }
@@ -6001,7 +6007,7 @@ MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </ng-template>
             </span>
         </ng-container>
-    `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }], directives: [{ type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }], directives: [{ type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -6776,9 +6782,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-const FOCUSED$1 = 'k-focus';
-const DEFAULT_SIZE$5 = 'medium';
-const DEFAULT_ROUNDED$4 = 'medium';
+const FOCUSED$2 = 'k-focus';
+const DEFAULT_SIZE$6 = 'medium';
+const DEFAULT_ROUNDED$5 = 'medium';
 const DEFAULT_FILL_MODE$3 = 'solid';
 const iconsMap$1 = { checkIcon, exclamationCircleIcon, xIcon };
 class TextBoxComponent {
@@ -6891,7 +6897,7 @@ class TextBoxComponent {
          * })
          * class AppComponent {
          *   public handleFocus(): void {
-         *      console.log('Component is isFocused');
+         *      console.log('Component is focused.');
          *   }
          * }
          * ```
@@ -6988,7 +6994,7 @@ class TextBoxComponent {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$5;
+        const newSize = size ? size : DEFAULT_SIZE$6;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -7007,7 +7013,7 @@ class TextBoxComponent {
      * * `none`
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$4;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$5;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -7307,10 +7313,10 @@ class TextBoxComponent {
         if (this._isFocused !== value && this.hostElement) {
             const element = this.hostElement.nativeElement;
             if (value && !this.disabled) {
-                this.renderer.addClass(element, FOCUSED$1);
+                this.renderer.addClass(element, FOCUSED$2);
             }
             else {
-                this.renderer.removeClass(element, FOCUSED$1);
+                this.renderer.removeClass(element, FOCUSED$2);
             }
             this._isFocused = value;
         }
@@ -7468,7 +7474,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                 </ng-template>
             </span>
         <ng-container>
-    `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -8020,9 +8026,9 @@ const resizeClasses = {
     'none': 'k-resize-none',
     'auto': 'k-resize-none'
 };
-const FOCUSED = 'k-focus';
-const DEFAULT_SIZE$4 = 'medium';
-const DEFAULT_ROUNDED$3 = 'medium';
+const FOCUSED$1 = 'k-focus';
+const DEFAULT_SIZE$5 = 'medium';
+const DEFAULT_ROUNDED$4 = 'medium';
 const DEFAULT_FILL_MODE$2 = 'solid';
 /**
  * Represents the [Kendo UI TextArea component for Angular]({% slug overview_textarea %}).
@@ -8087,7 +8093,7 @@ class TextAreaComponent extends TextFieldsBase {
          * })
          * class AppComponent {
          *   public handleFocus(): void {
-         *      console.log('Component is focused');
+         *      console.log('Component is focused.');
          *   }
          * }
          * ```
@@ -8240,7 +8246,7 @@ class TextAreaComponent extends TextFieldsBase {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$4;
+        const newSize = size ? size : DEFAULT_SIZE$5;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -8258,7 +8264,7 @@ class TextAreaComponent extends TextFieldsBase {
      * * `none`
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$3;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$4;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -8429,10 +8435,10 @@ class TextAreaComponent extends TextFieldsBase {
         if (this._isFocused !== value && this.hostElement) {
             const element = this.hostElement.nativeElement;
             if (value && !this.disabled) {
-                this.renderer.addClass(element, FOCUSED);
+                this.renderer.addClass(element, FOCUSED$1);
             }
             else {
-                this.renderer.removeClass(element, FOCUSED);
+                this.renderer.removeClass(element, FOCUSED$1);
             }
             this._isFocused = value;
         }
@@ -8597,7 +8603,7 @@ TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             ></kendo-input-separator>
             <ng-content select="kendo-textarea-suffix"></ng-content>
         </ng-container>
-    `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }], directives: [{ type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }], directives: [{ type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
             args: [{
@@ -10816,7 +10822,7 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [value]="value"
             [ratio]="contrastTool">
         </div>
-    `, isInline: true, components: [{ type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i4.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i3$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,
             args: [{
@@ -12805,8 +12811,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const DOM_FOCUS_EVENTS = ['focus', 'blur'];
-const DEFAULT_SIZE$3 = 'medium';
-const DEFAULT_ROUNDED$2 = 'medium';
+const DEFAULT_SIZE$4 = 'medium';
+const DEFAULT_ROUNDED$3 = 'medium';
 const DEFAULT_FILL_MODE$1 = 'solid';
 /**
  * @hidden
@@ -13056,7 +13062,7 @@ class ColorPickerComponent {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$3;
+        const newSize = size ? size : DEFAULT_SIZE$4;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -13075,7 +13081,7 @@ class ColorPickerComponent {
      * * `none`
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$2;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$3;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -13998,8 +14004,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
-const DEFAULT_SIZE$2 = 'medium';
-const DEFAULT_ROUNDED$1 = 'medium';
+const DEFAULT_SIZE$3 = 'medium';
+const DEFAULT_ROUNDED$2 = 'medium';
 /**
  * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="checkbox" elements.
@@ -14028,7 +14034,7 @@ class CheckBoxDirective {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$2;
+        const newSize = size ? size : DEFAULT_SIZE$3;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -14046,7 +14052,7 @@ class CheckBoxDirective {
      * * `none`
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$1;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$2;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -14086,122 +14092,771 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+const FOCUSED = 'k-focus';
+const DEFAULT_SIZE$2 = 'medium';
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the CheckBox directive.
- *
- * @example
- *
- * ```ts-no-run
- * // Import the CheckBox module
- * import { CheckBoxModule } from '@progress/kendo-angular-inputs';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
- * import { NgModule } from '@angular/core';
- *
- * // Import the app component
- * import { AppComponent } from './app.component';
- *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, CheckBoxModule], // import CheckBox module
- *     bootstrap:    [AppComponent]
- * })
- * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
- * ```
- */
-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]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CheckBoxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [CheckBoxDirective],
-                    exports: [CheckBoxDirective],
-                    imports: [CommonModule]
-                }]
-        }] });
-
-const DEFAULT_SIZE$1 = 'medium';
-/**
- * Represents the directive that renders the [Kendo UI RadioButton]({% slug overview_checkbox %}) input component.
- * The directive is placed on input type="radio" elements.
- *
- * @example
- * ```ts-no-run
- * <input type="radio" kendoRadioButton />
- * ```
+ * @hidden
  */
-class RadioButtonDirective {
-    constructor(renderer, hostElement) {
-        this.renderer = renderer;
+class RadioCheckBoxBase {
+    constructor(componentType, hostElement, renderer, cdr, ngZone, injector) {
+        this.componentType = componentType;
         this.hostElement = hostElement;
-        this.kendoClass = true;
-        this._size = 'medium';
-        validatePackage(packageMetadata);
+        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$2;
     }
     /**
-     * The size property specifies the width and height of the RadioButton
-     * ([see example]({% slug appearance_radiobuttondirective %}#toc-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` (default)
+     * * `medium`
      * * `large`
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$1;
+        const newSize = size ? size : DEFAULT_SIZE$2;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
     get size() {
         return this._size;
     }
-    ngAfterViewInit() {
-        // kept in sync with other inputs for easier refactoring
-        // to a common base class
-        const stylingInputs = ['size'];
-        stylingInputs.forEach(input => {
-            this.handleClasses(this[input], input);
-        });
+    /**
+     * 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();
     }
-    handleClasses(value, input) {
-        const elem = this.hostElement.nativeElement;
-        const classes = getStylingClasses('radio', input, this[input], value);
-        if (classes.toRemove) {
-            this.renderer.removeClass(elem, classes.toRemove);
+    get inputAttributes() {
+        return this._inputAttributes;
+    }
+    ngOnInit() {
+        this.control = this.injector.get(NgControl, null);
+    }
+    /**
+     * Focuses the component.
+     */
+    focus() {
+        if (!this.input) {
+            return;
         }
-        if (classes.toAdd) {
-            this.renderer.addClass(elem, classes.toAdd);
+        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;
     }
-}
-RadioButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-RadioButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: { size: "size" }, host: { properties: { "class.k-radio": "this.kendoClass" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[kendoRadioButton]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { kendoClass: [{
-                type: HostBinding,
-                args: ['class.k-radio']
-            }], size: [{
-                type: Input
-            }] } });
-
+    /**
+     * @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$1(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 }]
+            }] } });
+
+const DEFAULT_ROUNDED$1 = 'medium';
+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$1;
+        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$1(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$1;
+        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: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3$1.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
+            }] } });
+
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the CheckBox directive and CheckBoxComponent.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the CheckBox module
+ * import { CheckBoxModule } from '@progress/kendo-angular-inputs';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, CheckBoxModule], // import CheckBox module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+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, 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, CheckBoxComponent],
+                    exports: [CheckBoxDirective, CheckBoxComponent],
+                    imports: [CommonModule, EventsModule, SharedEventsModule]
+                }]
+        }] });
+
+const DEFAULT_SIZE$1 = 'medium';
+/**
+ * Represents the directive that renders the [Kendo UI RadioButton]({% slug overview_checkbox %}) input component.
+ * The directive is placed on input type="radio" elements.
+ *
+ * @example
+ * ```ts-no-run
+ * <input type="radio" kendoRadioButton />
+ * ```
+ */
+class RadioButtonDirective {
+    constructor(renderer, hostElement) {
+        this.renderer = renderer;
+        this.hostElement = hostElement;
+        this.kendoClass = true;
+        this._size = 'medium';
+        validatePackage(packageMetadata);
+    }
+    /**
+     * The size property specifies the width and height of the RadioButton
+     * ([see example]({% slug appearance_radiobuttondirective %}#toc-size)).
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE$1;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
+    }
+    get size() {
+        return this._size;
+    }
+    ngAfterViewInit() {
+        // kept in sync with other inputs for easier refactoring
+        // to a common base class
+        const stylingInputs = ['size'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+    }
+    handleClasses(value, input) {
+        const elem = this.hostElement.nativeElement;
+        const classes = getStylingClasses('radio', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
+}
+RadioButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+RadioButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: { size: "size" }, host: { properties: { "class.k-radio": "this.kendoClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RadioButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[kendoRadioButton]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { kendoClass: [{
+                type: HostBinding,
+                args: ['class.k-radio']
+            }], size: [{
+                type: Input
+            }] } });
+
+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: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i3$1.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
+            }] } });
+
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the RadioButton directive.
+ * definition for the RadioButton directive and RadioButtonComponent.
  *
  * @example
  *
@@ -14233,14 +14888,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 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]
                 }]
         }] });
 
@@ -15471,7 +16126,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [parentLocalization]="localization">
             </kendo-signature>
         </kendo-dialog>
-    `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3$1.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SignatureComponent, selector: "kendo-signature", inputs: ["focusableId", "readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "exportScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }], directives: [{ type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3$2.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SignatureComponent, selector: "kendo-signature", inputs: ["focusableId", "readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "exportScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }], directives: [{ type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SignatureComponent, decorators: [{
             type: Component,
             args: [{
@@ -16657,5 +17312,5 @@ class SwitchFocusEvent {
  * Generated bundle index. Do not edit.
  */
 
-export { ActiveColorClickEvent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, MaskingService, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, RatingComponent, RatingHoveredItemTemplateDirective, RatingItemTemplateDirective, RatingModule, RatingSelectedItemTemplateDirective, SharedModule, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchBlurEvent, SwitchComponent, SwitchCustomMessagesComponent, SwitchFocusEvent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaPrefixComponent, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
+export { ActiveColorClickEvent, CheckBoxComponent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, MaskingService, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, RadioButtonComponent, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, RatingComponent, RatingHoveredItemTemplateDirective, RatingItemTemplateDirective, RatingModule, RatingSelectedItemTemplateDirective, SharedModule, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchBlurEvent, SwitchComponent, SwitchCustomMessagesComponent, SwitchFocusEvent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaPrefixComponent, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };