@progress/kendo-angular-inputs 18.0.1-develop.3 → 18.1.0-develop.10

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

@@ -108,6 +108,10 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
  * Used to differentiate between the Radio and CheckBox components in their base class.
  */
 const COMPONENT_TYPE = new InjectionToken('TYPE_TOKEN');
+/**
+ * @hidden
+ */
+const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`{\\s*${name}\\s*}`, 'g'), value);
 
 /**
  * @hidden
@@ -547,8 +551,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1738076514,
-    version: '18.0.1-develop.3',
+    publishDate: 1738357163,
+    version: '18.1.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2468,7 +2472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 const FOCUSED$5 = 'k-focus';
-const DEFAULT_SIZE$9 = 'medium';
+const DEFAULT_SIZE$a = 'medium';
 const DEFAULT_THUMB_ROUNDED = 'full';
 const DEFAULT_TRACK_ROUNDED = 'full';
 /**
@@ -2534,7 +2538,7 @@ class SwitchComponent {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$9;
+        const newSize = size ? size : DEFAULT_SIZE$a;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -3811,9 +3815,9 @@ const PARSABLE_DEFAULTS = {
     step: 1
 };
 const FOCUSED$4 = 'k-focus';
-const DEFAULT_SIZE$8 = 'medium';
-const DEFAULT_ROUNDED$7 = 'medium';
-const DEFAULT_FILL_MODE$5 = 'solid';
+const DEFAULT_SIZE$9 = 'medium';
+const DEFAULT_ROUNDED$8 = 'medium';
+const DEFAULT_FILL_MODE$6 = 'solid';
 /**
  * Represents the [Kendo UI NumericTextBox component for Angular]({% slug overview_numerictextbox %}).
  */
@@ -3940,7 +3944,7 @@ class NumericTextBoxComponent {
      * * `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;
     }
@@ -3957,7 +3961,7 @@ class NumericTextBoxComponent {
      * * `none`
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$7;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$8;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -3974,7 +3978,7 @@ class NumericTextBoxComponent {
      * * `none`
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$5;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$6;
         this.handleClasses(newFillMode, 'fillMode');
         this._fillMode = newFillMode;
     }
@@ -5546,9 +5550,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 const resolvedPromise = Promise.resolve(null);
 const FOCUSED$3 = 'k-focus';
-const DEFAULT_SIZE$7 = 'medium';
-const DEFAULT_ROUNDED$6 = 'medium';
-const DEFAULT_FILL_MODE$4 = 'solid';
+const DEFAULT_SIZE$8 = 'medium';
+const DEFAULT_ROUNDED$7 = 'medium';
+const DEFAULT_FILL_MODE$5 = 'solid';
 /**
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
  *
@@ -5606,7 +5610,7 @@ class MaskedTextBoxComponent {
      * * `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;
     }
@@ -5623,7 +5627,7 @@ class MaskedTextBoxComponent {
      * * `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;
     }
@@ -5640,7 +5644,7 @@ class MaskedTextBoxComponent {
      * * `none`
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$4;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$5;
         this.handleClasses(newFillMode, 'fillMode');
         this._fillMode = newFillMode;
     }
@@ -6429,7 +6433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 const FOCUSED$2 = 'k-focus';
-const DEFAULT_SIZE$6 = 'medium';
+const DEFAULT_SIZE$7 = 'medium';
 /**
  * @hidden
  */
@@ -6489,7 +6493,7 @@ class RadioCheckBoxBase {
      * * `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;
     }
@@ -6653,7 +6657,7 @@ class RadioCheckBoxBase {
     ngChange = (_) => { };
     ngTouched = () => { };
     _isFocused = false;
-    _size = DEFAULT_SIZE$6;
+    _size = DEFAULT_SIZE$7;
     constructor(componentType, hostElement, renderer, cdr, ngZone, injector) {
         this.componentType = componentType;
         this.hostElement = hostElement;
@@ -6722,7 +6726,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['input', { static: true }]
             }] } });
 
-const DEFAULT_ROUNDED$5 = 'medium';
+const DEFAULT_ROUNDED$6 = 'medium';
 class CheckBoxComponent extends RadioCheckBoxBase {
     renderer;
     hostElement;
@@ -6758,7 +6762,7 @@ class CheckBoxComponent extends RadioCheckBoxBase {
      * * `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;
     }
@@ -6799,7 +6803,7 @@ class CheckBoxComponent extends RadioCheckBoxBase {
             'aria-invalid': this.isControlInvalid
         };
     }
-    _rounded = DEFAULT_ROUNDED$5;
+    _rounded = DEFAULT_ROUNDED$6;
     _checkedState = false;
     constructor(renderer, hostElement, cdr, ngZone, injector) {
         super('checkbox', hostElement, renderer, cdr, ngZone, injector);
@@ -6933,8 +6937,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-const DEFAULT_SIZE$5 = 'medium';
-const DEFAULT_ROUNDED$4 = 'medium';
+const DEFAULT_SIZE$6 = 'medium';
+const DEFAULT_ROUNDED$5 = 'medium';
 /**
  * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="checkbox" elements.
@@ -6959,7 +6963,7 @@ class CheckBoxDirective {
      * * `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;
     }
@@ -6977,7 +6981,7 @@ class CheckBoxDirective {
      * * `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;
     }
@@ -8072,7 +8076,7 @@ class ColorContrastSvgComponent {
     }
     findValue(contrast, saturation, low, high, comparer) {
         const mid = (low + high) / 2;
-        const hsva = Object.assign({}, this.hsva.value, { s: saturation / this.metrics.width, v: 1 - mid / this.metrics.height });
+        const hsva = { ...this.hsva.value, s: saturation / this.metrics.width, v: 1 - mid / this.metrics.height };
         const currentContrast = getContrastFromTwoRGBAs(getRGBA(getColorFromHSV(hsva)), getRGBA(this.backgroundColor || ''));
         if (low + 0.5 > high) {
             if (currentContrast < contrast + 1 && currentContrast > contrast - 1) {
@@ -11314,9 +11318,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const DOM_FOCUS_EVENTS = ['focus', 'blur'];
-const DEFAULT_SIZE$4 = 'medium';
-const DEFAULT_ROUNDED$3 = 'medium';
-const DEFAULT_FILL_MODE$3 = 'solid';
+const DEFAULT_SIZE$5 = 'medium';
+const DEFAULT_ROUNDED$4 = 'medium';
+const DEFAULT_FILL_MODE$4 = 'solid';
 /**
  * @hidden
  */
@@ -11520,7 +11524,7 @@ class ColorPickerComponent {
      * * `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;
     }
@@ -11539,7 +11543,7 @@ class ColorPickerComponent {
      * * `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;
     }
@@ -11557,7 +11561,7 @@ class ColorPickerComponent {
      * * `none`
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$3;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$4;
         this.handleClasses(newFillMode, 'fillMode');
         this._fillMode = newFillMode;
     }
@@ -13056,7 +13060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-const DEFAULT_SIZE$3 = 'medium';
+const DEFAULT_SIZE$4 = 'medium';
 /**
  * Represents the directive that renders the [Kendo UI RadioButton]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="radio" elements.
@@ -13080,7 +13084,7 @@ class RadioButtonDirective {
      * * `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;
     }
@@ -14075,9 +14079,9 @@ const noop = () => { };
 let _id = 0;
 const nextId = () => 'k-signature-focusable-' + _id++;
 const FOCUSED_CLASS = 'k-focus';
-const DEFAULT_SIZE$2 = 'medium';
-const DEFAULT_ROUNDED$2 = 'medium';
-const DEFAULT_FILL_MODE$2 = 'solid';
+const DEFAULT_SIZE$3 = 'medium';
+const DEFAULT_ROUNDED$3 = 'medium';
+const DEFAULT_FILL_MODE$3 = 'solid';
 const DEFAULT_POPUP_SCALE = 3;
 const DEFAULT_EXPORT_SCALE = 2;
 const DEFAULT_COLOR = '#000000';
@@ -14170,7 +14174,7 @@ class SignatureComponent {
      * * `large`
      * * `none`
      */
-    size = DEFAULT_SIZE$2;
+    size = DEFAULT_SIZE$3;
     /**
      * The `rounded` property specifies the border radius of the signature
      * ([see example](slug:appearance_signature#rounded-corners)).
@@ -14182,7 +14186,7 @@ class SignatureComponent {
      * * `full` (not supported by the Signature)
      * * `none`
      */
-    rounded = DEFAULT_ROUNDED$2;
+    rounded = DEFAULT_ROUNDED$3;
     /**
      * The `fillMode` property specifies the background and border styles of the signature
      * ([see example](slug:appearance_signature#toc-fill-mode)).
@@ -14193,7 +14197,7 @@ class SignatureComponent {
      * * `outline`
      * * `none`
      */
-    fillMode = DEFAULT_FILL_MODE$2;
+    fillMode = DEFAULT_FILL_MODE$3;
     /**
      * The stroke color of the signature.
      *
@@ -14585,9 +14589,9 @@ class SignatureComponent {
         const classList = this.element.nativeElement.classList;
         this.hostClasses.forEach(([name]) => classList.remove(name));
         this.hostClasses = [
-            [`k-signature-${SIZE_MAP[this.size || DEFAULT_SIZE$2]}`, !isNone(this.size)],
-            [`k-input-${this.fillMode || DEFAULT_FILL_MODE$2}`, !isNone(this.fillMode)],
-            [`k-rounded-${ROUNDED_MAP[this.rounded || DEFAULT_ROUNDED$2]}`, !isNone(this.rounded)]
+            [`k-signature-${SIZE_MAP[this.size || DEFAULT_SIZE$3]}`, !isNone(this.size)],
+            [`k-input-${this.fillMode || DEFAULT_FILL_MODE$3}`, !isNone(this.fillMode)],
+            [`k-rounded-${ROUNDED_MAP[this.rounded || DEFAULT_ROUNDED$3]}`, !isNone(this.rounded)]
         ];
         this.hostClasses.forEach(([name, enabled]) => classList.toggle(name, enabled));
     }
@@ -15366,9 +15370,9 @@ const resizeClasses = {
     'auto': 'k-resize-none'
 };
 const FOCUSED$1 = 'k-focus';
-const DEFAULT_SIZE$1 = 'medium';
-const DEFAULT_ROUNDED$1 = 'medium';
-const DEFAULT_FILL_MODE$1 = 'solid';
+const DEFAULT_SIZE$2 = 'medium';
+const DEFAULT_ROUNDED$2 = 'medium';
+const DEFAULT_FILL_MODE$2 = 'solid';
 /**
  * Represents the [Kendo UI TextArea component for Angular]({% slug overview_textarea %}).
  */
@@ -15495,7 +15499,7 @@ class TextAreaComponent extends TextFieldsBase {
      * * `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;
     }
@@ -15513,7 +15517,7 @@ class TextAreaComponent extends TextFieldsBase {
      * * `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;
     }
@@ -15531,7 +15535,7 @@ class TextAreaComponent extends TextFieldsBase {
      * * `none`
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$1;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$2;
         this.handleClasses(newFillMode, 'fillMode');
         this._fillMode = newFillMode;
     }
@@ -16289,9 +16293,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const FOCUSED = 'k-focus';
-const DEFAULT_SIZE = 'medium';
-const DEFAULT_ROUNDED = 'medium';
-const DEFAULT_FILL_MODE = 'solid';
+const DEFAULT_SIZE$1 = 'medium';
+const DEFAULT_ROUNDED$1 = 'medium';
+const DEFAULT_FILL_MODE$1 = 'solid';
 const iconsMap = { checkIcon, exclamationCircleIcon, xIcon };
 class TextBoxComponent {
     localizationService;
@@ -16405,7 +16409,7 @@ class TextBoxComponent {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE;
+        const newSize = size ? size : DEFAULT_SIZE$1;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -16424,7 +16428,7 @@ class TextBoxComponent {
      * * `none`
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$1;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -16442,7 +16446,7 @@ class TextBoxComponent {
      * * `none`
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$1;
         this.handleClasses(newFillMode, 'fillMode');
         this._fillMode = newFillMode;
     }
@@ -17247,37 +17251,1097 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Utility array that contains all `TextBox` related components and directives
+ * @hidden
  */
-const KENDO_TEXTBOX = [
-    TextBoxDirective,
-    TextBoxComponent,
-    InputSeparatorComponent,
-    TextBoxSuffixTemplateDirective,
-    TextBoxPrefixTemplateDirective,
-    TextBoxCustomMessagesComponent,
-    PrefixTemplateDirective,
-    SuffixTemplateDirective,
-    SeparatorComponent
-];
+class OTPInputSeparatorComponent {
+    set separator(otpSeparator) {
+        this._separator = otpSeparator;
+        this.clearSeparator();
+        if (!isPresent$1(otpSeparator)) {
+            return;
+        }
+        if (typeof otpSeparator === 'string') {
+            this.hasText = true;
+            return;
+        }
+        if (typeof otpSeparator.value !== 'string') {
+            this.hasSVGIcon = otpSeparator?.type === 'svgIcon';
+            this.separatorSVGIcon = otpSeparator.value;
+            return;
+        }
+        this.hasIconClass = otpSeparator?.type === 'iconClass';
+        this.hasFontIcon = otpSeparator?.type === 'fontIcon';
+        this.separatorIconString = otpSeparator.value;
+    }
+    get separator() {
+        return this._separator;
+    }
+    wrapperClass = true;
+    hasText;
+    hasIconClass;
+    hasSVGIcon;
+    hasFontIcon;
+    separatorIconString;
+    separatorSVGIcon;
+    _separator;
+    clearSeparator() {
+        this.hasText = false;
+        this.hasFontIcon = false;
+        this.hasIconClass = false;
+        this.hasSVGIcon = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OTPInputSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OTPInputSeparatorComponent, isStandalone: true, selector: "kendo-otpinput-separator", inputs: { separator: "separator" }, host: { properties: { "class.k-otp-separator": "this.wrapperClass" } }, exportAs: ["kendoOTPInputSeparator"], ngImport: i0, template: `
+        <ng-container *ngIf="hasText">{{this.separator}}</ng-container>
+        <span *ngIf="hasIconClass" [ngClass]="separatorIconString"></span>
+        <kendo-icon-wrapper
+            *ngIf="hasFontIcon || hasSVGIcon"
+            [name]="separatorIconString"
+            [svgIcon]="separatorSVGIcon"
+        ></kendo-icon-wrapper>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OTPInputSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoOTPInputSeparator',
+                    selector: 'kendo-otpinput-separator',
+                    template: `
+        <ng-container *ngIf="hasText">{{this.separator}}</ng-container>
+        <span *ngIf="hasIconClass" [ngClass]="separatorIconString"></span>
+        <kendo-icon-wrapper
+            *ngIf="hasFontIcon || hasSVGIcon"
+            [name]="separatorIconString"
+            [svgIcon]="separatorSVGIcon"
+        ></kendo-icon-wrapper>
+    `,
+                    standalone: true,
+                    imports: [NgIf, NgClass, IconWrapperComponent]
+                }]
+        }], propDecorators: { separator: [{
+                type: Input
+            }], wrapperClass: [{
+                type: HostBinding,
+                args: ['class.k-otp-separator']
+            }] } });
+
 /**
- * Utility array that contains all `NumericTextBox` related components and directives
+ * @hidden
  */
-const KENDO_NUMERICTEXTBOX = [
-    NumericTextBoxComponent,
-    NumericTextBoxCustomMessagesComponent,
-    PrefixTemplateDirective,
-    SuffixTemplateDirective,
-    SeparatorComponent
-];
+class OTPInputMessages extends ComponentMessages {
+    /**
+     * The aria-label of the OTP Input. Follows the pattern **Input {currentInput} of {totalInputs}, current value {value}** by default.
+     * Тhe default label text when the current input is 1, and the total number of inputs is 4 will be
+     * **Input 1 of 4, current value null**.
+     *
+     * The message consists of several parts - the current input number, the total number of inputs, the current value and a localizable string.
+     * To allow for reordering its parts, the `ariaLabel` input accepts a string with placeholders for the current input,
+     * total number of inputs and current value. The `{currentInput}`, `{totalInputs}` and `{currentValue}` placeholders will be
+     * replaced internally with the respective actual values.
+     */
+    ariaLabel;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OTPInputMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: OTPInputMessages, selector: "kendo-otpinput-messages-base", inputs: { ariaLabel: "ariaLabel" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OTPInputMessages, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'kendo-otpinput-messages-base'
+                }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input
+            }] } });
+
 /**
- * Utility array that contains all `MaskedTextBox` related components and directives
+ * @hidden
  */
-const KENDO_MASKEDTEXTBOX = [
-    MaskedTextBoxComponent,
-    PrefixTemplateDirective,
-    SuffixTemplateDirective,
-    SeparatorComponent
+class LocalizedOTPInputMessagesDirective extends OTPInputMessages {
+    service;
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedOTPInputMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedOTPInputMessagesDirective, isStandalone: true, selector: "[kendoOTPInputLocalizedMessages]", providers: [
+            {
+                provide: OTPInputMessages,
+                useExisting: forwardRef(() => LocalizedOTPInputMessagesDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedOTPInputMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: OTPInputMessages,
+                            useExisting: forwardRef(() => LocalizedOTPInputMessagesDirective)
+                        }
+                    ],
+                    selector: '[kendoOTPInputLocalizedMessages]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_FILL_MODE = 'solid';
+const DEFAULT_OTPINPUT_LENGTH = 4;
+class OTPInputComponent {
+    hostElement;
+    cdr;
+    injector;
+    renderer;
+    localizationService;
+    zone;
+    /**
+     * Configures the total number of input fields.
+     *
+     * @default 4
+     */
+    set length(value) {
+        if (value < 1 || this._length === value) {
+            return;
+        }
+        this._length = value;
+        this.inputsArray = new Array(this._length);
+    }
+    get length() {
+        return this._length;
+    }
+    /**
+     * Configures the input type.
+     *
+     * * The possible values are:
+     * * `text` (default)
+     * * `number`
+     * * `password`
+     *
+     * @default 'text'
+     */
+    type = 'text';
+    /**
+     * Configures whether the input fields are separate or adjacent to each other.
+     *
+     * @default true
+     */
+    spacing = true;
+    /**
+     * Adds a separator between groups of input fields.
+     *
+     * > The configuration can only be applied when `groupLength` is set.
+     */
+    separator;
+    /**
+     * Configures whether the component is enabled or disabled.
+     *
+     * @default false
+     */
+    disabled = false;
+    /**
+     * Configures whether the component is readonly.
+     *
+     * @default false
+     */
+    readonly = false;
+    /**
+     * Configures the placeholder of the input fields.
+     */
+    placeholder;
+    /**
+     * Configures the length of the groups. If `groupLength` is a number, all groups will have the same length. If it's an array, each group can have a different length.
+     */
+    get groupLength() {
+        return this._groupLength;
+    }
+    set groupLength(length) {
+        const isNumber = typeof length === 'number';
+        if (this._groupLength === length ||
+            isPresent$1(length) &&
+                ((isNumber && (length < 1 || length > this.length)) ||
+                    (!isNumber && !this.isValidGroupArray(length)))) {
+            return;
+        }
+        if (!isPresent$1(length)) {
+            this.clearGroups();
+        }
+        else if (isNumber) {
+            this.populateGroupArray(length);
+        }
+        else {
+            this.groupLengthArray = length;
+            if (!this.spacing) {
+                this.adjacentGroups = this.groupLengthArray;
+            }
+        }
+        this._groupLength = length;
+        this.populateSeparatorPosititons();
+    }
+    /**
+     * Configures the value of the component. Unfilled input fields are represented with space.
+     */
+    get value() {
+        return this._value;
+    }
+    set value(input) {
+        if (this._value === input ||
+            (this.type === 'number' && isPresent$1(input) && !this.isValidNumber(input))) {
+            return;
+        }
+        if (!isPresent$1(input)) {
+            this.clearInputValues();
+            this._value = null;
+        }
+        else {
+            this._value = input.slice(0, this.length);
+            if (!this.inputFieldValueChanged) {
+                this.fillInputs(input, 0, true);
+            }
+        }
+        if (this.inputAttributes) {
+            this.setInputAttributes();
+        }
+        else {
+            this.setDefaultAttributes();
+        }
+    }
+    /**
+     * The `size` property specifies the padding of the input fields.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set size(size) {
+        const newSize = size || DEFAULT_SIZE;
+        const elem = this.hostElement.nativeElement;
+        this.renderer.removeClass(elem, `k-otp-${SIZE_MAP[this._size]}`);
+        this.renderer.addClass(elem, `k-otp-${SIZE_MAP[newSize]}`);
+        this._size = newSize;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * The `rounded` property specifies the border radius of the OTP Input.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
+     */
+    set rounded(rounded) {
+        this._rounded = rounded || DEFAULT_ROUNDED;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * The `fillMode` property specifies the background and border styles of the OTP Input.
+     *
+     * The possible values are:
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
+     */
+    set fillMode(fillMode) {
+        const newFillMode = fillMode || DEFAULT_FILL_MODE;
+        this.setGroupFillMode(newFillMode, this._fillMode);
+        this._fillMode = newFillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
+    /**
+     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    set inputAttributes(attributes) {
+        this._inputAttributes = attributes;
+        this.parsedAttributes = this.inputAttributes ?
+            { ...this.defaultAttributes, ...this.inputAttributes } :
+            this.inputAttributes;
+        this.setInputAttributes();
+    }
+    get inputAttributes() {
+        return this._inputAttributes;
+    }
+    /**
+     * Fires each time the value is changed by the user&mdash;
+     * When the value of the component is programmatically changed to `ngModel` or `formControl`
+     * through its API or form binding, the `valueChange` event is not triggered because it
+     * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
+     */
+    valueChange = new EventEmitter();
+    /**
+     * Fires when the length of the trimmed value is equal to `length`.
+     */
+    inputFinish = new EventEmitter();
+    /**
+     * Fires each time the user focuses the OTP Input.
+     */
+    onFocus = new EventEmitter();
+    /**
+     * Fires each time the user blurs the OTP Input.
+     */
+    onBlur = new EventEmitter();
+    wrapperClass = true;
+    get invalidClass() {
+        return this.isControlInvalid;
+    }
+    direction;
+    role = 'group';
+    /**
+     * @hidden
+     */
+    inputFields;
+    /**
+     * @hidden
+     */
+    set inputGroups(elements) {
+        this._inputGroups = elements;
+        this.setGroupFillMode(this.fillMode);
+    }
+    get inputGroups() {
+        return this._inputGroups;
+    }
+    /**
+     * @hidden
+     */
+    groupLengthArray;
+    /**
+     * @hidden
+     */
+    inputsArray;
+    /**
+     * @hidden
+     */
+    inputsValues = [].constructor(DEFAULT_OTPINPUT_LENGTH);
+    /**
+     * @hidden
+     */
+    adjacentGroups;
+    _length = DEFAULT_OTPINPUT_LENGTH;
+    _groupLength;
+    _inputGroups;
+    separatorPositions = new Set();
+    _value = null;
+    _size = DEFAULT_SIZE;
+    _rounded = DEFAULT_ROUNDED;
+    _fillMode = DEFAULT_FILL_MODE;
+    _isFocused = false;
+    focusChangedProgrammatically = false;
+    inputFieldValueChanged = false;
+    focusedInput;
+    _inputAttributes;
+    parsedAttributes = {};
+    get defaultAttributes() {
+        return {
+            autocomplete: 'off'
+        };
+    }
+    subscriptions;
+    ngChange = (_) => { };
+    ngTouched = () => { };
+    constructor(hostElement, cdr, injector, renderer, localizationService, zone) {
+        this.hostElement = hostElement;
+        this.cdr = cdr;
+        this.injector = injector;
+        this.renderer = renderer;
+        this.localizationService = localizationService;
+        this.zone = zone;
+        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+    }
+    ngOnInit() {
+        this.inputsArray = Array.from({ length: this._length });
+        this.subscriptions = this.localizationService.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+        this.zone.runOutsideAngular(() => {
+            this.subscriptions.add(this.renderer.listen(this.hostElement.nativeElement, 'paste', this.handlePaste.bind(this)));
+            this.subscriptions.add(this.renderer.listen(this.hostElement.nativeElement, 'keydown', this.handleKeydown.bind(this)));
+        });
+    }
+    ngAfterViewInit() {
+        this.subscriptions.add(this.inputFields.changes.subscribe(this.handleInputChanges.bind(this)));
+        this.handleInputChanges();
+        this.renderer.addClass(this.hostElement.nativeElement, `k-otp-${SIZE_MAP[this._size]}`);
+        this.setGroupFillMode(this.fillMode);
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.fillInputs(this.value);
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes.length) {
+            if (typeof this.groupLength === 'number') {
+                this.populateGroupArray(this.groupLength);
+            }
+            this.populateSeparatorPosititons();
+        }
+        if (changes.spacing) {
+            if (this.spacing === true) {
+                this.adjacentGroups = null;
+            }
+            else {
+                this.adjacentGroups = this.groupLengthArray ?? [this.length];
+            }
+        }
+        if (changes.type && this.type === 'number') {
+            if (isPresent$1(this.value) && !this.isValidNumber(this.value)) {
+                this.value = null;
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return ngControl?.control || null;
+    }
+    /**
+     * @hidden
+     */
+    writeValue(value) {
+        this.value = value;
+    }
+    /**
+     * @hidden
+     */
+    registerOnChange(fn) {
+        this.ngChange = fn;
+    }
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn) {
+        this.ngTouched = fn;
+    }
+    /**
+     * @hidden
+     */
+    setDisabledState(isDisabled) {
+        this.cdr.markForCheck();
+        this.disabled = isDisabled;
+    }
+    /**
+     * @hidden
+     */
+    get isControlInvalid() {
+        return this.formControl?.touched && this.formControl.invalid;
+    }
+    /**
+     * @hidden
+     */
+    get isFocused() {
+        return this._isFocused;
+    }
+    /**
+     * @hidden
+     */
+    set isFocused(value) {
+        if (this._isFocused !== value && this.hostElement) {
+            this._isFocused = value;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get hasGroups() {
+        if (!this.spacing && isPresent$1(this.groupLength)) {
+            return true;
+        }
+    }
+    /**
+     * @hidden
+     */
+    showGroupSeparator(index) {
+        return this.separator && this.groupLengthArray && index < this.groupLengthArray.length - 1;
+    }
+    /**
+     * @hidden
+     */
+    showSeparator(index) {
+        return this.separator && this.groupLength ? this.separatorPositions.has(index) : false;
+    }
+    /**
+     * @hidden
+     */
+    handleValueChange(index, groupIndex) {
+        this.inputFieldValueChanged = true;
+        if (groupIndex) {
+            index = this.getIndexByGroup(groupIndex, index);
+        }
+        let newValue = '';
+        this.inputFields.forEach((input) => newValue = newValue.concat(input.value?.toString() || " "));
+        if (!areSame(this.value, newValue)) {
+            this.value = newValue;
+            this.ngChange(newValue);
+            this.valueChange.emit(newValue);
+        }
+        this.inputFieldValueChanged = false;
+        if (this.value && this.value.trim().length === this.length) {
+            this.inputFinish.emit(this.value);
+        }
+        if (isPresent$1(index) && isPresent$1(this.inputFields?.get(index).value)) {
+            this.focusNext();
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleInputFocus(index, groupIndex) {
+        if (this.focusChangedProgrammatically) {
+            return;
+        }
+        if (groupIndex) {
+            index = this.getIndexByGroup(groupIndex, index);
+        }
+        this.focusedInput = index;
+    }
+    /**
+     * @hidden
+     */
+    handleInput(event, index, groupIndex) {
+        if (this.type === 'number' && !this.isValidNumber(event?.data)) {
+            const inputIndex = groupIndex ? this.getIndexByGroup(groupIndex, index) : index;
+            this.inputFields.get(inputIndex).value = null;
+            this.showInvalidInput(inputIndex);
+            return;
+        }
+        this.handleValueChange(index, groupIndex);
+    }
+    /**
+     * @hidden
+     */
+    fillInputs(text, start = 0, replaceLast = false) {
+        if (!isPresent$1(text)) {
+            return;
+        }
+        let charCounter = 0;
+        this.inputFields?.forEach((otpInput, i) => {
+            if (i < start) {
+                return;
+            }
+            if (charCounter < text.length) {
+                if (text[charCounter] === ' ') {
+                    otpInput.value = null;
+                }
+                else {
+                    otpInput.value = text[charCounter];
+                }
+                charCounter++;
+            }
+            else if (replaceLast) {
+                otpInput.value = null;
+            }
+        });
+    }
+    /**
+     * Focuses the OTP Input.
+     */
+    focus(index) {
+        if (!this.inputFields || index < 0 || index >= this.length) {
+            return;
+        }
+        this.focusChangedProgrammatically = true;
+        this.isFocused = true;
+        this.inputFields.get(index || 0).focus();
+        this.focusedInput = index || 0;
+        this.focusChangedProgrammatically = false;
+    }
+    /**
+     * Blurs the OTP Input.
+     */
+    blur() {
+        this.focusChangedProgrammatically = true;
+        const isFocusedElement = this.hostElement.nativeElement.querySelector(':focus');
+        if (isFocusedElement) {
+            isFocusedElement.blur();
+        }
+        this.isFocused = false;
+        this.focusChangedProgrammatically = false;
+    }
+    /**
+     * @hidden
+     */
+    handleFocus() {
+        this.zone.run(() => {
+            if (!this.focusChangedProgrammatically && hasObservers(this.onFocus)) {
+                this.onFocus.emit();
+            }
+            this.isFocused = true;
+        });
+    }
+    /**
+     * @hidden
+     */
+    handleBlur() {
+        this.zone.run(() => {
+            if (!this.focusChangedProgrammatically) {
+                this.ngTouched();
+                this.onBlur.emit();
+            }
+            this.isFocused = false;
+        });
+    }
+    getIndexByGroup(groupIndex, itemIndex) {
+        return this.groupLengthArray.slice(0, groupIndex).reduce((sum, current) => sum + current, 0) + itemIndex;
+    }
+    focusNext() {
+        if (!this.inputFields || this.focusedInput === this.length - 1) {
+            return;
+        }
+        this.focusChangedProgrammatically = true;
+        this.isFocused = true;
+        this.inputFields.get(this.focusedInput).blur();
+        this.inputFields.get(this.focusedInput + 1).focus();
+        this.focusedInput++;
+        this.focusChangedProgrammatically = false;
+    }
+    focusPrevious() {
+        if (!this.inputFields || this.focusedInput === 0) {
+            return;
+        }
+        this.focusChangedProgrammatically = true;
+        this.isFocused = true;
+        this.inputFields.get(this.focusedInput).blur();
+        this.inputFields.get(this.focusedInput - 1).focus();
+        this.focusedInput--;
+        this.focusChangedProgrammatically = false;
+    }
+    handlePaste(event) {
+        event.preventDefault();
+        const text = event.clipboardData.getData('text').trim();
+        if (text === '') {
+            return;
+        }
+        if (this.type === 'number' && !this.isValidNumber(text)) {
+            this.showInvalidInput(this.focusedInput);
+            return;
+        }
+        this.inputFieldValueChanged = true;
+        this.fillInputs(text, this.focusedInput);
+        this.handleValueChange();
+        this.inputFieldValueChanged = false;
+        const focusedInput = this.focusedInput + text.length < this.inputFields?.length ?
+            this.focusedInput + text.length :
+            this.inputFields.length - 1;
+        this.inputFields.get(this.focusedInput).blur();
+        this.focusedInput = focusedInput;
+        this.inputFields.get(this.focusedInput).focus();
+    }
+    handleKeydown(event) {
+        if (event.keyCode === Keys.ArrowRight) {
+            event.preventDefault();
+            this.direction === 'ltr' ? this.focusNext() : this.focusPrevious();
+        }
+        if (event.keyCode === Keys.ArrowLeft) {
+            event.preventDefault();
+            this.direction === 'ltr' ? this.focusPrevious() : this.focusNext();
+        }
+        if (event.keyCode === Keys.Backspace) {
+            event.preventDefault();
+            this.inputFields.get(this.focusedInput).value = null;
+            this.handleValueChange();
+            this.focusPrevious();
+        }
+        if (event.keyCode === Keys.Delete) {
+            event.preventDefault();
+            this.inputFields.get(this.focusedInput).value = null;
+            this.handleValueChange();
+        }
+    }
+    isValidGroupArray(groups) {
+        if (!isPresent$1(groups)) {
+            return;
+        }
+        const sum = groups.reduce((sum, current) => sum + current, 0);
+        return sum === this.length;
+    }
+    populateGroupArray(length) {
+        const groupsCount = Math.floor(this.length / length);
+        const remainder = this.length % length;
+        const result = Array(groupsCount).fill(length);
+        if (remainder > 0) {
+            result.push(remainder);
+        }
+        this.groupLengthArray = [...result];
+        // groups with spacing shouldn't be wrapped in `k-input-group`
+        if (!this.spacing) {
+            this.adjacentGroups = [...this.groupLengthArray];
+        }
+    }
+    populateSeparatorPosititons() {
+        let itemIndex = 0;
+        this.separatorPositions.clear();
+        if (!isPresent$1(this.groupLengthArray)) {
+            return;
+        }
+        for (let i = 0; i < this.groupLengthArray.length - 1; i++) {
+            itemIndex += this.groupLengthArray[i];
+            this.separatorPositions.add(itemIndex - 1);
+        }
+    }
+    clearGroups() {
+        this.groupLengthArray = null;
+        if (!this.spacing) {
+            this.adjacentGroups = [this.length];
+        }
+        else {
+            this.adjacentGroups = null;
+        }
+        this.separatorPositions.clear();
+    }
+    clearInputValues() {
+        this.inputFields?.forEach((input) => input.value = null);
+    }
+    handleInputChanges() {
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.fillInputs(this.value?.trim());
+            if (this.inputAttributes) {
+                this.setInputAttributes();
+            }
+            else {
+                this.setDefaultAttributes();
+            }
+            this.cdr.detectChanges();
+        });
+    }
+    setGroupFillMode(fillMode, previousFillMode) {
+        this.inputGroups?.forEach(element => {
+            if (previousFillMode !== 'none') {
+                this.renderer.removeClass(element.nativeElement, `k-input-group-${previousFillMode}`);
+            }
+            if (fillMode !== 'none') {
+                this.renderer.addClass(element.nativeElement, `k-input-group-${fillMode}`);
+            }
+        });
+    }
+    setInputAttributes() {
+        this.inputFields?.forEach((input, index) => {
+            if (!this.parsedAttributes || !this.parsedAttributes?.['aria-label']) {
+                input.inputAttributes = { ...this.parsedAttributes, 'aria-label': this.ariaLabel(index) };
+            }
+            else {
+                input.inputAttributes = this.parsedAttributes;
+            }
+        });
+    }
+    setDefaultAttributes() {
+        this.inputFields?.forEach((input, index) => {
+            input.inputAttributes = {
+                autocomplete: 'off',
+                'aria-label': this.ariaLabel(index)
+            };
+        });
+    }
+    ariaLabel(index) {
+        const localizationMsg = this.localizationService.get('ariaLabel') || '';
+        return replaceMessagePlaceholder(replaceMessagePlaceholder(replaceMessagePlaceholder(localizationMsg, 'currentInput', (index + 1).toString()), 'totalInputs', this.length.toString()), 'value', this.value);
+    }
+    isValidNumber(value) {
+        if (!isPresent$1(value)) {
+            return;
+        }
+        const trimmedValue = value.trim();
+        return trimmedValue !== '' &&
+            trimmedValue !== 'Infinity' &&
+            trimmedValue !== '-Infinity' &&
+            !isNaN(Number(trimmedValue));
+    }
+    showInvalidInput(index) {
+        const inputElement = this.inputFields.get(index).hostElement.nativeElement;
+        this.renderer.addClass(inputElement, 'k-invalid');
+        this.zone.runOutsideAngular(() => {
+            setTimeout(() => {
+                if (!this.isControlInvalid && inputElement) {
+                    this.renderer.removeClass(inputElement, 'k-invalid');
+                }
+            }, 300);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OTPInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OTPInputComponent, isStandalone: true, selector: "kendo-otpinput", inputs: { length: "length", type: "type", spacing: "spacing", separator: "separator", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", groupLength: "groupLength", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", inputFinish: "inputFinish", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-otp": "this.wrapperClass", "class.k-invalid": "this.invalidClass", "attr.dir": "this.direction", "attr.role": "this.role" } }, providers: [
+            LocalizationService,
+            { provide: L10N_PREFIX, useValue: 'kendo.otpinput' },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => OTPInputComponent),
+                multi: true
+            },
+            { provide: KendoInput, useExisting: forwardRef(() => OTPInputComponent) }
+        ], viewQueries: [{ propertyName: "inputFields", predicate: TextBoxComponent, descendants: true }, { propertyName: "inputGroups", predicate: ["inputGroup"], descendants: true }], exportAs: ["kendoOTPInput"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoOTPInputLocalizedMessages
+            i18n-ariaLabel="kendo.otpinput.ariaLabel|The value of the aria-label attribute of the input fields."
+            ariaLabel="{{ 'Input {currentInput} of {totalInputs}, current value {value}' }}"
+        ></ng-container>
+        <ng-container
+            kendoInputSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
+        >
+            <ng-container *ngIf="spacing; else groups">
+                <ng-container *ngFor="let input of inputsArray; let i = index">
+                    <kendo-textbox
+                        class="k-otp-input"
+                        [class.k-invalid]="isControlInvalid"
+                        [selectOnFocus]="true"
+                        [maxlength]="1"
+                        [type]="type !== 'number' ? type : null"
+                        [placeholder]="placeholder"
+                        [size]="size"
+                        [rounded]="rounded"
+                        [fillMode]="fillMode"
+                        [disabled]="disabled"
+                        [readonly]="readonly"
+                        (focus)="handleInputFocus(i)"
+                        (input)="handleInput($event, i)"
+                    ></kendo-textbox>
+                    <kendo-otpinput-separator *ngIf="showSeparator(i)" [separator]="separator"></kendo-otpinput-separator>
+                </ng-container>
+            </ng-container>
+            <ng-template #groups>
+                <ng-container *ngFor="let group of adjacentGroups; let i = index">
+                    <div #inputGroup class="k-input-group">
+                        <kendo-textbox
+                            *ngFor="let input of [].constructor(group); let j = index"
+                            class="k-otp-input"
+                            [class.k-invalid]="isControlInvalid"
+                            [selectOnFocus]="true"
+                            [maxlength]="1"
+                            [type]="type !== 'number' ? type : null"
+                            [placeholder]="placeholder"
+                            [size]="size"
+                            [rounded]="rounded"
+                            [fillMode]="fillMode"
+                            [disabled]="disabled"
+                            [readonly]="readonly"
+                            (focus)="handleInputFocus(j, i)"
+                            (input)="handleInput($event, j, i)"
+                        ></kendo-textbox>
+                    </div>
+                    <kendo-otpinput-separator *ngIf="showGroupSeparator(i)" [separator]="separator"></kendo-otpinput-separator>
+                </ng-container>
+            </ng-template>
+        <ng-container>
+    `, isInline: true, dependencies: [{ kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: OTPInputSeparatorComponent, selector: "kendo-otpinput-separator", inputs: ["separator"], exportAs: ["kendoOTPInputSeparator"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LocalizedOTPInputMessagesDirective, selector: "[kendoOTPInputLocalizedMessages]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OTPInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoOTPInput',
+                    providers: [
+                        LocalizationService,
+                        { provide: L10N_PREFIX, useValue: 'kendo.otpinput' },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => OTPInputComponent),
+                            multi: true
+                        },
+                        { provide: KendoInput, useExisting: forwardRef(() => OTPInputComponent) }
+                    ],
+                    selector: 'kendo-otpinput',
+                    template: `
+        <ng-container kendoOTPInputLocalizedMessages
+            i18n-ariaLabel="kendo.otpinput.ariaLabel|The value of the aria-label attribute of the input fields."
+            ariaLabel="{{ 'Input {currentInput} of {totalInputs}, current value {value}' }}"
+        ></ng-container>
+        <ng-container
+            kendoInputSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
+        >
+            <ng-container *ngIf="spacing; else groups">
+                <ng-container *ngFor="let input of inputsArray; let i = index">
+                    <kendo-textbox
+                        class="k-otp-input"
+                        [class.k-invalid]="isControlInvalid"
+                        [selectOnFocus]="true"
+                        [maxlength]="1"
+                        [type]="type !== 'number' ? type : null"
+                        [placeholder]="placeholder"
+                        [size]="size"
+                        [rounded]="rounded"
+                        [fillMode]="fillMode"
+                        [disabled]="disabled"
+                        [readonly]="readonly"
+                        (focus)="handleInputFocus(i)"
+                        (input)="handleInput($event, i)"
+                    ></kendo-textbox>
+                    <kendo-otpinput-separator *ngIf="showSeparator(i)" [separator]="separator"></kendo-otpinput-separator>
+                </ng-container>
+            </ng-container>
+            <ng-template #groups>
+                <ng-container *ngFor="let group of adjacentGroups; let i = index">
+                    <div #inputGroup class="k-input-group">
+                        <kendo-textbox
+                            *ngFor="let input of [].constructor(group); let j = index"
+                            class="k-otp-input"
+                            [class.k-invalid]="isControlInvalid"
+                            [selectOnFocus]="true"
+                            [maxlength]="1"
+                            [type]="type !== 'number' ? type : null"
+                            [placeholder]="placeholder"
+                            [size]="size"
+                            [rounded]="rounded"
+                            [fillMode]="fillMode"
+                            [disabled]="disabled"
+                            [readonly]="readonly"
+                            (focus)="handleInputFocus(j, i)"
+                            (input)="handleInput($event, j, i)"
+                        ></kendo-textbox>
+                    </div>
+                    <kendo-otpinput-separator *ngIf="showGroupSeparator(i)" [separator]="separator"></kendo-otpinput-separator>
+                </ng-container>
+            </ng-template>
+        <ng-container>
+    `,
+                    standalone: true,
+                    imports: [SharedInputEventsDirective, TextBoxComponent, OTPInputSeparatorComponent, NgFor, NgIf, LocalizedOTPInputMessagesDirective]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { length: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], spacing: [{
+                type: Input
+            }], separator: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], groupLength: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], inputAttributes: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], inputFinish: [{
+                type: Output
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], wrapperClass: [{
+                type: HostBinding,
+                args: ['class.k-otp']
+            }], invalidClass: [{
+                type: HostBinding,
+                args: ['class.k-invalid']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], inputFields: [{
+                type: ViewChildren,
+                args: [TextBoxComponent]
+            }], inputGroups: [{
+                type: ViewChildren,
+                args: ['inputGroup']
+            }] } });
+
+/**
+ * Custom component messages override default component messages.
+ */
+class OTPInputCustomMessagesComponent extends OTPInputMessages {
+    service;
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OTPInputCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OTPInputCustomMessagesComponent, isStandalone: true, selector: "kendo-otpinput-messages", providers: [
+            {
+                provide: OTPInputMessages,
+                useExisting: forwardRef(() => OTPInputCustomMessagesComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OTPInputCustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: OTPInputMessages,
+                            useExisting: forwardRef(() => OTPInputCustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-otpinput-messages',
+                    template: ``,
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+/**
+ * Utility array that contains all `TextBox` related components and directives
+ */
+const KENDO_TEXTBOX = [
+    TextBoxDirective,
+    TextBoxComponent,
+    InputSeparatorComponent,
+    TextBoxSuffixTemplateDirective,
+    TextBoxPrefixTemplateDirective,
+    TextBoxCustomMessagesComponent,
+    PrefixTemplateDirective,
+    SuffixTemplateDirective,
+    SeparatorComponent
+];
+/**
+ * Utility array that contains all `NumericTextBox` related components and directives
+ */
+const KENDO_NUMERICTEXTBOX = [
+    NumericTextBoxComponent,
+    NumericTextBoxCustomMessagesComponent,
+    PrefixTemplateDirective,
+    SuffixTemplateDirective,
+    SeparatorComponent
+];
+/**
+ * Utility array that contains all `MaskedTextBox` related components and directives
+ */
+const KENDO_MASKEDTEXTBOX = [
+    MaskedTextBoxComponent,
+    PrefixTemplateDirective,
+    SuffixTemplateDirective,
+    SeparatorComponent
+];
+/**
+ * Utility array that contains all `OTP` related components and directives
+ */
+const KENDO_OTPINPUT = [
+    OTPInputComponent,
+    OTPInputCustomMessagesComponent
 ];
 /**
  * Utility array that contains all `TextArea` related components and directives
@@ -17398,6 +18462,7 @@ const KENDO_INPUTS = [
     ...KENDO_FLATCOLORPICKER,
     ...KENDO_COLORGRADIENT,
     ...KENDO_COLORPALETTE,
+    ...KENDO_OTPINPUT
 ];
 
 //IMPORTANT: NgModule export kept for backwards compatibility
@@ -17435,8 +18500,8 @@ const KENDO_INPUTS = [
  */
 class InputsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, imports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i7.SeparatorComponent, CheckBoxComponent, CheckBoxDirective, RadioButtonComponent, RadioButtonDirective, SwitchComponent, SwitchCustomMessagesComponent, FormFieldComponent, HintComponent, ErrorComponent, SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective, RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective, RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective, SignatureComponent, SignatureCustomMessagesComponent, ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent], exports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i7.SeparatorComponent, CheckBoxComponent, CheckBoxDirective, RadioButtonComponent, RadioButtonDirective, SwitchComponent, SwitchCustomMessagesComponent, FormFieldComponent, HintComponent, ErrorComponent, SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective, RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective, RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective, SignatureComponent, SignatureCustomMessagesComponent, ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [TextBoxComponent, i7.SeparatorComponent, NumericTextBoxComponent, i7.SeparatorComponent, i7.SeparatorComponent, i7.SeparatorComponent, SliderComponent, RangeSliderComponent, RatingComponent, SignatureComponent, ColorPickerComponent, FlatColorPickerComponent, ColorGradientComponent, i7.SeparatorComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, imports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i7.SeparatorComponent, CheckBoxComponent, CheckBoxDirective, RadioButtonComponent, RadioButtonDirective, SwitchComponent, SwitchCustomMessagesComponent, FormFieldComponent, HintComponent, ErrorComponent, SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective, RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective, RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective, SignatureComponent, SignatureCustomMessagesComponent, ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent, OTPInputComponent, OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent], exports: [TextBoxDirective, TextBoxComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective, TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, TextAreaComponent, TextAreaDirective, TextAreaPrefixComponent, TextAreaSuffixComponent, i7.SeparatorComponent, CheckBoxComponent, CheckBoxDirective, RadioButtonComponent, RadioButtonDirective, SwitchComponent, SwitchCustomMessagesComponent, FormFieldComponent, HintComponent, ErrorComponent, SliderComponent, SliderCustomMessagesComponent, LabelTemplateDirective, RangeSliderComponent, RangeSliderCustomMessagesComponent, LabelTemplateDirective, RatingComponent, RatingItemTemplateDirective, RatingHoveredItemTemplateDirective, RatingSelectedItemTemplateDirective, SignatureComponent, SignatureCustomMessagesComponent, ColorPickerComponent, ColorPickerCustomMessagesComponent, FlatColorPickerComponent, ColorPickerCustomMessagesComponent, ColorGradientComponent, ColorPickerCustomMessagesComponent, ColorPaletteComponent, ColorPickerCustomMessagesComponent, OTPInputComponent, OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [TextBoxComponent, i7.SeparatorComponent, NumericTextBoxComponent, i7.SeparatorComponent, i7.SeparatorComponent, i7.SeparatorComponent, SliderComponent, RangeSliderComponent, RatingComponent, SignatureComponent, ColorPickerComponent, FlatColorPickerComponent, ColorGradientComponent, OTPInputComponent, i7.SeparatorComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, decorators: [{
             type: NgModule,
@@ -18039,5 +19104,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActiveColorClickEvent, CheckBoxComponent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, KENDO_CHECKBOX, KENDO_COLORGRADIENT, KENDO_COLORPALETTE, KENDO_COLORPICKER, KENDO_FLATCOLORPICKER, KENDO_FORMFIELD, KENDO_INPUTS, KENDO_MASKEDTEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_RADIOBUTTON, KENDO_RANGESLIDER, KENDO_RATING, KENDO_SIGNATURE, KENDO_SLIDER, KENDO_SWITCH, KENDO_TEXTAREA, KENDO_TEXTBOX, 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, 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, KENDO_CHECKBOX, KENDO_COLORGRADIENT, KENDO_COLORPALETTE, KENDO_COLORPICKER, KENDO_FLATCOLORPICKER, KENDO_FORMFIELD, KENDO_INPUTS, KENDO_MASKEDTEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_OTPINPUT, KENDO_RADIOBUTTON, KENDO_RANGESLIDER, KENDO_RATING, KENDO_SIGNATURE, KENDO_SLIDER, KENDO_SWITCH, KENDO_TEXTAREA, KENDO_TEXTBOX, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, MaskingService, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, OTPInputComponent, OTPInputCustomMessagesComponent, RadioButtonComponent, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, RatingComponent, RatingHoveredItemTemplateDirective, RatingItemTemplateDirective, RatingModule, RatingSelectedItemTemplateDirective, 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 };