@progress/kendo-angular-inputs 22.1.0-develop.8 → 23.0.0-develop.1

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

@@ -8,7 +8,7 @@ import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, RadioControlValueAccessor
 import { Subscription, fromEvent, interval, merge, BehaviorSubject, Subject } from 'rxjs';
 import { take, tap, filter, concatMap, startWith, takeUntil, skip, debounceTime, throttleTime } from 'rxjs/operators';
 import * as i8 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, Keys, guid, anyChanged, normalizeKeys, hasObservers, EventsOutsideAngularDirective, DraggableDirective, ResizeSensorComponent, KendoInput, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, SuffixTemplateDirective, PrefixTemplateDirective, isChanged, isPresent as isPresent$1, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1, processCssValue, replaceMessagePlaceholder, getLicenseMessage, shouldShowValidationUI, WatermarkOverlayComponent, SeparatorComponent, ResizeBatchService, KENDO_ADORNMENTS } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, Keys, guid, anyChanged, normalizeKeys, hasObservers, EventsOutsideAngularDirective, DraggableDirective, ResizeSensorComponent, KendoInput, hasFocusableParent, isObjectPresent, removeHTMLAttributes, parseAttributes, isControlRequired, setHTMLAttributes, SuffixTemplateDirective, PrefixTemplateDirective, isChanged, isPresent as isPresent$1, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1, processCssValue, replaceMessagePlaceholder, getLicenseMessage, shouldShowValidationUI, WatermarkOverlayComponent, SeparatorComponent, ResizeBatchService, KENDO_ADORNMENTS } from '@progress/kendo-angular-common';
 export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
@@ -73,7 +73,8 @@ const ROUNDED_MAP = {
     small: 'sm',
     medium: 'md',
     large: 'lg',
-    full: 'full'
+    full: 'full',
+    none: 'none'
 };
 /**
  * @hidden
@@ -86,21 +87,33 @@ const isNone = (style) => style === 'none';
  */
 const getStylingClasses = (componentType, stylingOption, previousValue, newValue) => {
     switch (stylingOption) {
-        case 'size':
+        case 'size': {
             return {
-                toRemove: `k-${componentType}-${SIZE_MAP[previousValue]}`,
-                toAdd: newValue !== 'none' ? `k-${componentType}-${SIZE_MAP[newValue]}` : ''
+                toRemove: previousValue ? `k-${componentType}-${SIZE_MAP[previousValue]}` : null,
+                toAdd: newValue ? `k-${componentType}-${SIZE_MAP[newValue]}` : null
             };
-        case 'rounded':
+        }
+        case 'rounded': {
+            let roundedClassToAdd;
+            if (newValue) {
+                if (newValue !== 'none') {
+                    roundedClassToAdd = `k-rounded-${ROUNDED_MAP[newValue]}`;
+                }
+                else {
+                    roundedClassToAdd = 'k-rounded-none';
+                }
+            }
             return {
-                toRemove: `k-rounded-${ROUNDED_MAP[previousValue]}`,
-                toAdd: newValue !== 'none' ? `k-rounded-${ROUNDED_MAP[newValue]}` : ''
+                toRemove: previousValue ? `k-rounded-${ROUNDED_MAP[previousValue]}` : null,
+                toAdd: roundedClassToAdd || null
             };
-        case 'fillMode':
+        }
+        case 'fillMode': {
             return {
-                toRemove: `k-${componentType}-${previousValue}`,
-                toAdd: newValue !== 'none' ? `k-${componentType}-${newValue}` : ''
+                toRemove: previousValue ? `k-${componentType}-${previousValue}` : null,
+                toAdd: newValue ? `k-${componentType}-${newValue}` : null
             };
+        }
         default:
             break;
     }
@@ -554,7 +567,7 @@ const packageMetadata = {
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
     publishDate: 0,
-    version: '22.1.0-develop.8',
+    version: '23.0.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -603,11 +616,11 @@ class SliderBase {
     /**
      * Sets the title for the ticks.
      * The default title for each tick is its Slider value.
-     * If you use a callback function, the function receives the component value and returns a string for the new title [see example]({% slug ticks_slider %}#toc-titles).
+     * If you use a callback function, the function receives the component value and returns a string for the new title [see example](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/ticks#titles).
      */
     title = identity;
     /**
-     * Sets the location of the tick marks in the Slider [see example]({% slug ticks_slider %}#toc-placement).
+     * Sets the location of the tick marks in the Slider [see example](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/ticks#placement).
      *
      * The options are:
      * - `before` – Shows tick marks above a horizontal track or left of a vertical track.
@@ -619,21 +632,21 @@ class SliderBase {
      */
     tickPlacement = 'both';
     /**
-     * When `true`. renders a vertical Slider [see example]({% slug orientation_slider %}).
+     * When `true`. renders a vertical Slider [see example](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/orientation).
      *
      * @default false
      */
     vertical = false;
     /**
      * Sets the minimum value of the Slider.
-     * Accepts integers and floating-point numbers [see example]({% slug predefinedsteps_slider %}#toc-small-steps).
+     * Accepts integers and floating-point numbers [see example](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/predefined-steps#small-steps).
      *
      * @default 0
      */
     min = 0;
     /**
      * Sets the maximum value of the Slider.
-     * Accepts integers and floating-point numbers [see example]({% slug predefinedsteps_slider %}#toc-small-steps).
+     * Accepts integers and floating-point numbers [see example](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/predefined-steps#small-steps).
      *
      * @default 10
      */
@@ -641,32 +654,32 @@ class SliderBase {
     /**
      * Sets the step value of the Slider.
      * Accepts only positive values.
-     * Can be an integer or a floating-point number [see example]({% slug predefinedsteps_slider %}#toc-small-steps).
+     * Can be an integer or a floating-point number [see example](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/predefined-steps#small-steps).
      *
      * @default 1
      */
     smallStep = 1;
     /**
-     * Sets every n<sup>th</sup> tick as large and shows a label for it [see example]({% slug predefinedsteps_slider %}#toc-large-steps).
+     * Sets every n<sup>th</sup> tick as large and shows a label for it [see example](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/predefined-steps#large-steps).
      *
      * @default null
      */
     largeStep = null;
     /**
      * Sets the width between two ticks along the track, in pixels.
-     * If you do not set `fixedTickWidth`, the Slider adjusts the tick width automatically [see example]({% slug ticks_slider %}#toc-width).
+     * If you do not set `fixedTickWidth`, the Slider adjusts the tick width automatically [see example](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/ticks#width).
      *
      */
     fixedTickWidth;
     /**
      * When `true`, disables the Slider.
-     * To disable the component in reactive forms, see [Forms Support](slug:formssupport_slider#toc-managing-the-slider-disabled-state-in-reactive-forms) [see example]({% slug disabledstate_slider %}).
+     * To disable the component in reactive forms, see [Forms Support](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/forms#managing-the-slider-disabled-state-in-reactive-forms) [see example](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/disabled-state).
      *
      * @default false
      */
     disabled = false;
     /**
-     * When `true`, sets the Slider to read-only [see example]({% slug readonly_slider %}).
+     * When `true`, sets the Slider to read-only [see example](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/readonly-state).
      *
      * @default false
      */
@@ -1083,7 +1096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const PRESSED$1 = 'k-pressed';
 /**
- * Represents the [Kendo UI Slider component for Angular]({% slug overview_slider %}).
+ * Represents the [Kendo UI Slider component for Angular](https://www.telerik.com/kendo-angular-ui/components/inputs/slider).
  *
  * @example
  * ```html
@@ -1109,7 +1122,7 @@ class SliderComponent extends SliderBase {
      */
     dragHandleTitle;
     /**
-     * Sets the title of the **Increase** button of the Slider ([see example]({% slug sidebuttons_slider %}#toc-titles)).
+     * Sets the title of the **Increase** button of the Slider ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/side-buttons#titles)).
      */
     incrementTitle;
     /**
@@ -1119,11 +1132,11 @@ class SliderComponent extends SliderBase {
      */
     animate = true;
     /**
-     * Sets the title of the **Decrease** button of the Slider ([see example]({% slug sidebuttons_slider %}#toc-titles)).
+     * Sets the title of the **Decrease** button of the Slider ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/side-buttons#titles)).
      */
     decrementTitle;
     /**
-     * Shows or hides the arrow side buttons of the Slider ([see example]({% slug sidebuttons_slider %}#toc-hidden-state)).
+     * Shows or hides the arrow side buttons of the Slider ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/slider/side-buttons#hidden-state)).
      * When you set `showButtons` to `false`, the component does not display the buttons.
      * @default true
      */
@@ -2499,11 +2512,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }], ctorParameters: () => [{ type: i1.LocalizationService }] });
 
 const FOCUSED$5 = 'k-focus';
-const DEFAULT_SIZE$e = 'medium';
-const DEFAULT_THUMB_ROUNDED = 'full';
-const DEFAULT_TRACK_ROUNDED = 'full';
 /**
- * Represents the [Kendo UI Switch component for Angular]({% slug overview_switch %}).
+ * Represents the [Kendo UI Switch component for Angular](https://www.telerik.com/kendo-angular-ui/components/inputs/switch).
  *
  * @example
  * ```html
@@ -2531,14 +2541,14 @@ class SwitchComponent {
     }
     /**
      * Set the **On** label.
-     * This label takes precedence over the [custom messages component]({% slug api_inputs_switchcustommessagescomponent %}).
-     * [See example]({% slug labels_switch %}).
+     * This label takes precedence over the [custom messages component](https://www.telerik.com/kendo-angular-ui/components/inputs/api/switchcustommessagescomponent).
+     * [See example](https://www.telerik.com/kendo-angular-ui/components/inputs/switch/labels).
      */
     onLabel;
     /**
      * Set the **Off** label.
-     * This label takes precedence over the [custom messages component]({% slug api_inputs_switchcustommessagescomponent %}).
-     * [See example]({% slug labels_switch %}).
+     * This label takes precedence over the [custom messages component](https://www.telerik.com/kendo-angular-ui/components/inputs/api/switchcustommessagescomponent).
+     * [See example](https://www.telerik.com/kendo-angular-ui/components/inputs/switch/labels).
      */
     offLabel;
     /**
@@ -2553,14 +2563,14 @@ class SwitchComponent {
     }
     /**
      * When `true`, disables the Switch.
-     * [See example]({% slug disabled_switch %}).
-     * To disable the component in reactive forms, see [Forms Support](slug:formssupport_switch#toc-managing-the-switch-disabled-state-in-reactive-forms).
+     * [See example](https://www.telerik.com/kendo-angular-ui/components/inputs/switch/disabled-state).
+     * To disable the component in reactive forms, see [Forms Support](https://www.telerik.com/kendo-angular-ui/components/inputs/switch/forms#managing-the-switch-disabled-state-in-reactive-forms).
      * @default false
      */
     disabled = false;
     /**
      * When `true`, sets the Switch to read-only.
-     * [See example]({% slug readonly_switch %}).
+     * [See example](https://www.telerik.com/kendo-angular-ui/components/inputs/switch/readonly-state).
      * @default false
      */
     readonly = false;
@@ -2572,12 +2582,11 @@ class SwitchComponent {
     /**
      * Sets the size of the Switch.
      *
-     * @default "medium"
+     * @default undefined
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE$e;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -2585,12 +2594,11 @@ class SwitchComponent {
     /**
      * Sets the border radius of the Switch.
      *
-     * @default "full"
+     * @default undefined
      */
     set thumbRounded(thumbRounded) {
-        const newThumbRounded = thumbRounded || DEFAULT_THUMB_ROUNDED;
-        this.handleThumbClasses(newThumbRounded);
-        this._thumbRounded = newThumbRounded;
+        this.handleThumbClasses(thumbRounded);
+        this._thumbRounded = thumbRounded;
     }
     get thumbRounded() {
         return this._thumbRounded;
@@ -2598,12 +2606,11 @@ class SwitchComponent {
     /**
      * Sets the border radius of the Switch track.
      *
-     * @default "full"
+     * @default undefined
      */
     set trackRounded(trackRounded) {
-        const newTrackRounded = trackRounded || DEFAULT_TRACK_ROUNDED;
-        this.handleTrackClasses(newTrackRounded);
-        this._trackRounded = newTrackRounded;
+        this.handleTrackClasses(trackRounded);
+        this._trackRounded = trackRounded;
     }
     get trackRounded() {
         return this._trackRounded;
@@ -2664,9 +2671,9 @@ class SwitchComponent {
     control;
     domSubscriptions = [];
     _checked = false;
-    _size = 'medium';
-    _trackRounded = 'full';
-    _thumbRounded = 'full';
+    _size;
+    _trackRounded;
+    _thumbRounded;
     constructor(renderer, hostElement, localizationService, injector, changeDetector, ngZone) {
         this.renderer = renderer;
         this.hostElement = hostElement;
@@ -3070,7 +3077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /**
- * Represents the [Kendo UI TextBox directive]({% slug overview_textbox %}) for the Inputs components for Angular.
+ * Represents the [Kendo UI TextBox directive](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox) for the Inputs components for Angular.
  * Use this directive to style the textbox of any `input` element.
  *
  * @example
@@ -3154,7 +3161,7 @@ class TextBoxDirective {
         this.listeners.forEach(listener => listener());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TextBoxDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: TextBoxDirective, isStandalone: true, selector: "input[kendoTextBox]", inputs: { value: "value" }, host: { properties: { "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-input-md": "this.hostClasses", "class.k-rounded-md": "this.hostClasses", "class.k-input-solid": "this.hostClasses" } }, providers: [{
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: TextBoxDirective, isStandalone: true, selector: "input[kendoTextBox]", inputs: { value: "value" }, host: { properties: { "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses" } }, providers: [{
                 provide: KendoInput,
                 useExisting: forwardRef(() => TextBoxDirective)
             }], ngImport: i0 });
@@ -3175,15 +3182,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.k-input']
-            }, {
-                type: HostBinding,
-                args: ['class.k-input-md']
-            }, {
-                type: HostBinding,
-                args: ['class.k-rounded-md']
-            }, {
-                type: HostBinding,
-                args: ['class.k-input-solid']
             }], value: [{
                 type: Input
             }] } });
@@ -3211,7 +3209,7 @@ class TextAreaDirective {
     valueChange = new EventEmitter();
     /**
      * Sets whether the `textarea` element resizes its height automatically
-     * ([see example](slug:textarea_sizing#toc-auto-resizing)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/textarea/sizing#auto-resizing)).
      *
      * @default false
      */
@@ -3408,7 +3406,7 @@ class TextAreaDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TextAreaDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: TextAreaDirective, isStandalone: true, selector: "textarea[kendoTextArea]", inputs: { autoSize: "autoSize", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-textarea": "this.elementClasses", "class.k-input": "this.elementClasses", "class.k-input-md": "this.elementClasses", "class.k-rounded-md": "this.elementClasses", "class.k-input-solid": "this.elementClasses", "class.k-autofill": "this.autofillClass", "attr.dir": "this.direction" } }, providers: [{
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: TextAreaDirective, isStandalone: true, selector: "textarea[kendoTextArea]", inputs: { autoSize: "autoSize", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-textarea": "this.elementClasses", "class.k-input": "this.elementClasses", "class.k-autofill": "this.autofillClass", "attr.dir": "this.direction" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TextAreaDirective),
                 multi: true
@@ -3442,15 +3440,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.k-input']
-            }, {
-                type: HostBinding,
-                args: ['class.k-input-md']
-            }, {
-                type: HostBinding,
-                args: ['class.k-rounded-md']
-            }, {
-                type: HostBinding,
-                args: ['class.k-input-solid']
             }], autofillClass: [{
                 type: HostBinding,
                 args: ['class.k-autofill']
@@ -3502,11 +3491,11 @@ const createMinValidator = (minValue) => {
 /**
  * @hidden
  */
-const MIN_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/inputs/api/NumericTextBoxComponent/#toc-min';
+const MIN_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/inputs/api/NumericTextBoxComponent#min';
 /**
  * @hidden
  */
-const MAX_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/inputs/api/NumericTextBoxComponent/#toc-max';
+const MAX_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/inputs/api/NumericTextBoxComponent#max';
 /**
  * @hidden
  */
@@ -3623,7 +3612,7 @@ var ArrowDirection;
 })(ArrowDirection || (ArrowDirection = {}));
 
 /**
- * Represents a separator in the content of components like TextArea and TextBox. ([see examples]({% slug adornments_textbox %}#toc-separator)).
+ * Represents a separator in the content of components like TextArea and TextBox. ([see examples](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/adornments#separator)).
  *
  * @example
  * ```html
@@ -3637,7 +3626,7 @@ var ArrowDirection;
  */
 class InputSeparatorComponent {
     /**
-     * Sets the orientation of the separator. Use this for the adornments of the [`TextAreaComponent`](slug:api_inputs_textareacomponent).
+     * Sets the orientation of the separator. Use this for the adornments of the [`TextAreaComponent`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/textareacomponent).
      *
      * @default 'vertical'
      */
@@ -3724,6 +3713,19 @@ class SharedInputEventsDirective {
                     }
                 }
             }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'click', (args) => {
+                if (!this.isFocused) {
+                    return;
+                }
+                const element = args.target;
+                const adornmentContainer = element.closest('.k-input-prefix') || element.closest('.k-input-suffix');
+                if (adornmentContainer) {
+                    const isFocusable = hasFocusableParent(element, adornmentContainer);
+                    if (!isFocusable) {
+                        this.handleBlur.emit();
+                    }
+                }
+            }));
             this.subscriptions.add(this.renderer.listen(hostElement, 'mouseenter', () => {
                 cursorInsideWrapper = true;
             }));
@@ -3833,11 +3835,8 @@ const PARSABLE_DEFAULTS = {
     step: 1
 };
 const FOCUSED$4 = 'k-focus';
-const DEFAULT_SIZE$d = 'medium';
-const DEFAULT_ROUNDED$8 = 'medium';
-const DEFAULT_FILL_MODE$6 = 'solid';
 /**
- * Represents the [Kendo UI NumericTextBox component for Angular]({% slug overview_numerictextbox %}).
+ * Represents the [Kendo UI NumericTextBox component for Angular](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox).
  *
  * Use this component to allow users to input numeric values.
  *
@@ -3863,7 +3862,7 @@ class NumericTextBoxComponent {
     focusableId = `k-${guid()}`;
     /**
      * When `true`, disables the `NumericTextBox`.
-     * To disable the component in reactive forms, see [Forms Support](slug:formssupport_numerictextbox#toc-managing-the-numerictextbox-disabled-state-in-reactive-forms).
+     * To disable the component in reactive forms, see [Forms Support](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/forms#managing-the-numerictextbox-disabled-state-in-reactive-forms).
      *
      * @default false
      */
@@ -3879,11 +3878,11 @@ class NumericTextBoxComponent {
      */
     title = '';
     /**
-     * When `true`, the value is automatically corrected based on the minimum and maximum values ([see example]({% slug precision_numerictextbox %})).
+     * When `true`, the value is automatically corrected based on the minimum and maximum values ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/precision)).
      */
     autoCorrect = false;
     /**
-     * Specifies the number format used when the NumericTextBox is not focused ([see example]({% slug formats_numerictextbox %})).
+     * Specifies the number format used when the NumericTextBox is not focused ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/formats)).
      * If `format` is `null` or `undefined`, the default format is used.
      */
     get format() {
@@ -3894,15 +3893,15 @@ class NumericTextBoxComponent {
         this._format = value;
     }
     /**
-     * Sets the maximum valid value ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
+     * Sets the maximum valid value ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/precision#value-ranges)).
      */
     max;
     /**
-     * Sets the minimum valid value ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
+     * Sets the minimum valid value ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/precision#value-ranges)).
      */
     min;
     /**
-     * Specifies the number of decimals the user can enter when the input is focused ([see example]({% slug precision_numerictextbox %})).
+     * Specifies the number of decimals the user can enter when the input is focused ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/precision)).
      */
     decimals = null;
     /**
@@ -3910,13 +3909,13 @@ class NumericTextBoxComponent {
      */
     placeholder;
     /**
-     * Specifies the value used to increment or decrement the component value ([see example]({% slug predefinedsteps_numerictextbox %})).
+     * Specifies the value used to increment or decrement the component value ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/predefined-step)).
      *
      * @default 1
      */
     step = 1;
     /**
-     * When `true`, renders the **Up** and **Down** spin buttons ([see example]({% slug spinbuttons_numerictextbox %})).
+     * When `true`, renders the **Up** and **Down** spin buttons ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/spin-buttons)).
      *
      * @default true
      */
@@ -3953,7 +3952,7 @@ class NumericTextBoxComponent {
      */
     selectOnFocus = true;
     /**
-     * Sets the value of the NumericTextBox ([see example]({% slug formats_numerictextbox %})).
+     * Sets the value of the NumericTextBox ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/formats)).
      */
     value = null;
     /**
@@ -3963,40 +3962,37 @@ class NumericTextBoxComponent {
      */
     maxlength;
     /**
-     * Sets the padding of the internal input element ([see example]({% slug appearance_numerictextbox %}#toc-size)).
+     * Sets the padding of the internal input element ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/appearance#size)).
      *
      * @default 'medium'
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE$d;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
     }
     /**
-     * Sets the border radius of the NumericTextBox ([see example](slug:appearance_numerictextbox#toc-roundness)).
+     * Sets the border radius of the NumericTextBox ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/appearance#roundness)).
      *
      * @default 'medium'
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED$8;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
     }
     /**
-     * Sets the background and border styles of the NumericTextBox ([see example](slug:appearance_numerictextbox#toc-fill-mode)).
+     * Sets the background and border styles of the NumericTextBox ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/appearance#fill-mode)).
      *
      * @default 'solid'
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE$6;
-        this.handleClasses(newFillMode, 'fillMode');
-        this._fillMode = newFillMode;
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -4019,15 +4015,15 @@ class NumericTextBoxComponent {
         return this._inputAttributes;
     }
     /**
-     * Fires when the user selects a new value ([see example](slug:events_numerictextbox)).
+     * Fires when the user selects a new value ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/events)).
      */
     valueChange = new EventEmitter();
     /**
-     * Fires when the NumericTextBox element is focused ([see example](slug:events_numerictextbox)).
+     * Fires when the NumericTextBox element is focused ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/events)).
      */
     onFocus = new EventEmitter();
     /**
-     * Fires when the `NumericTextBox` component gets blurred ([see example](slug:events_numerictextbox)).
+     * Fires when the `NumericTextBox` component gets blurred ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/events)).
      */
     onBlur = new EventEmitter();
     /**
@@ -4084,9 +4080,9 @@ class NumericTextBoxComponent {
     control;
     isPasted = false;
     mouseDown = false;
-    _size = 'medium';
-    _rounded = 'medium';
-    _fillMode = 'solid';
+    _size = undefined;
+    _rounded = undefined;
+    _fillMode = undefined;
     ngChange = noop$1;
     ngTouched = noop$1;
     ngValidatorChange = noop$1;
@@ -4291,6 +4287,11 @@ class NumericTextBoxComponent {
             this.setSelection(selectionStart - 1, selectionEnd - 1);
             return;
         }
+        if (this.hasTrailingZeros(inputValue) && !this.isPasted) {
+            input.value = this.inputValue;
+            this.setSelection(selectionStart - 1, selectionEnd - 1);
+            return;
+        }
         const parsedValue = this.intl.parseNumber(inputValue);
         let value = this.restrictDecimals(parsedValue);
         if (this.autoCorrect) {
@@ -4667,7 +4668,7 @@ class NumericTextBoxComponent {
     }
     restrictDecimals(value, round) {
         let result = value;
-        if (value && this.hasDecimals) {
+        if (this.hasDecimals && isPresent(value)) {
             const decimals = this.decimals;
             const stringValue = String(value);
             if (round || EXPONENT_REGEX.test(stringValue)) {
@@ -4876,7 +4877,7 @@ class NumericTextBoxComponent {
                 [attr.aria-hidden]="true"
                 [attr.aria-label]="incrementTitle"
                 [title]="incrementTitle"
-                class="k-spinner-increase k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
+                class="k-spinner-increase k-button k-icon-button"
                 [class.k-active]="arrowDirection === ArrowDirection.Up"
                 tabindex="-1"
                 >
@@ -4894,7 +4895,7 @@ class NumericTextBoxComponent {
                 [attr.aria-label]="decrementTitle"
                 [title]="decrementTitle"
                 [class.k-active]="arrowDirection === ArrowDirection.Down"
-                class="k-spinner-decrease k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
+                class="k-spinner-decrease k-button k-icon-button"
                 tabindex="-1"
                 >
                 <kendo-icon-wrapper
@@ -4991,7 +4992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 [attr.aria-hidden]="true"
                 [attr.aria-label]="incrementTitle"
                 [title]="incrementTitle"
-                class="k-spinner-increase k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
+                class="k-spinner-increase k-button k-icon-button"
                 [class.k-active]="arrowDirection === ArrowDirection.Up"
                 tabindex="-1"
                 >
@@ -5009,7 +5010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 [attr.aria-label]="decrementTitle"
                 [title]="decrementTitle"
                 [class.k-active]="arrowDirection === ArrowDirection.Down"
-                class="k-spinner-decrease k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
+                class="k-spinner-decrease k-button k-icon-button"
                 tabindex="-1"
                 >
                 <kendo-icon-wrapper
@@ -5588,11 +5589,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 const resolvedPromise = Promise.resolve(null);
 const FOCUSED$3 = 'k-focus';
-const DEFAULT_SIZE$c = 'medium';
-const DEFAULT_ROUNDED$7 = 'medium';
-const DEFAULT_FILL_MODE$5 = 'solid';
 /**
- * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
+ * Represents the [Kendo UI MaskedTextBox component for Angular](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox).
  *
  * @example
  * ```typescript
@@ -5625,13 +5623,13 @@ class MaskedTextBoxComponent {
      */
     focusableId = `k-${guid()}`;
     /**
-     * Disables the MaskedTextBox when you set it to `true` ([see example]({% slug disabled_maskedtextbox %})).
-     * To disable the component in reactive forms, see [Forms Support](slug:formssupport_maskedtextbox#toc-managing-the-maskedtextbox-disabled-state-in-reactive-forms).
+     * Disables the MaskedTextBox when you set it to `true` ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/disabled-state)).
+     * To disable the component in reactive forms, see [Forms Support](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/forms#managing-the-maskedtextbox-disabled-state-in-reactive-forms).
      * @default false
      */
     disabled = false;
     /**
-     * When `true`, sets the MaskedTextBox to read-only mode ([see example]({% slug readonly_maskedtextbox %})).
+     * When `true`, sets the MaskedTextBox to read-only mode ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/readonly-state)).
      * @default false
      */
     readonly = false;
@@ -5640,46 +5638,43 @@ class MaskedTextBoxComponent {
      */
     title;
     /**
-     * Sets the padding size of the MaskedTextBox input element ([see example]({% slug appearance_maskedtextbox %}#toc-size)).
+     * Sets the padding size of the MaskedTextBox input element ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/appearance#size)).
      * @default 'medium'
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE$c;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
     }
     /**
-     * Sets the border radius of the MaskedTextBox ([see example](slug:appearance_maskedtextbox#toc-roundness)).
+     * Sets the border radius of the MaskedTextBox ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/appearance#roundness)).
      * @default 'medium'
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED$7;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
     }
     /**
-     * Sets the background and border style of the MaskedTextBox ([see example]({% slug appearance_maskedtextbox %}#toc-fill-mode)).
+     * Sets the background and border style of the MaskedTextBox ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/appearance#fill-mode)).
      * @default 'solid'
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE$5;
-        this.handleClasses(newFillMode, 'fillMode');
-        this._fillMode = newFillMode;
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
     }
     /**
-     * Sets the mask pattern for the MaskedTextBox ([see example]({% slug value_maskedtextbox %})).
+     * Sets the mask pattern for the MaskedTextBox ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/value)).
      * If you do not set a mask, the component acts as a standard `type="text"` input.
      *
-     * If the mask allows spaces, set the [`promptPlaceholder`]({% slug api_inputs_maskedtextboxcomponent %}#toc-promptplaceholder)
+     * If the mask allows spaces, set the [`promptPlaceholder`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/maskedtextboxcomponent#promptplaceholder)
      * to a character that the mask does not accept.
      */
     mask;
@@ -5688,7 +5683,7 @@ class MaskedTextBoxComponent {
      */
     value;
     /**
-     * Sets the RegExp-based mask validation rules ([see example]({% slug masks_maskedtextbox %})).
+     * Sets the RegExp-based mask validation rules ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/masks)).
      */
     set rules(value) {
         this._rules = { ...this.defaultRules, ...value };
@@ -5707,7 +5702,7 @@ class MaskedTextBoxComponent {
      */
     promptPlaceholder = ' ';
     /**
-     * When `true` includes literals in the raw value ([see example]({% slug value_maskedtextbox %})).
+     * When `true` includes literals in the raw value ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/value)).
      * @default false
      */
     includeLiterals = false;
@@ -5716,7 +5711,7 @@ class MaskedTextBoxComponent {
      */
     maskOnFocus = false;
     /**
-     * Enables the built-in mask validator when you set it to `true` ([see example]({% slug validation_maskedtextbox %})).
+     * Enables the built-in mask validator when you set it to `true` ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/validation)).
      * @default true
      */
     maskValidation = true;
@@ -5831,9 +5826,9 @@ class MaskedTextBoxComponent {
     isPasted = false;
     selection = [0, 0];
     control;
-    _size = 'medium';
-    _rounded = 'medium';
-    _fillMode = 'solid';
+    _size = undefined;
+    _rounded = undefined;
+    _fillMode = undefined;
     _inputAttributes;
     parsedAttributes = {};
     constructor(service, renderer, hostElement, ngZone, injector, changeDetector, rtl) {
@@ -6446,7 +6441,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 const FOCUSED$2 = 'k-focus';
-const DEFAULT_SIZE$b = 'medium';
 /**
  * @hidden
  */
@@ -6501,9 +6495,8 @@ class RadioCheckBoxBase {
      *
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$b;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -6663,7 +6656,7 @@ class RadioCheckBoxBase {
     ngChange = (_) => { };
     ngTouched = () => { };
     _isFocused = false;
-    _size = DEFAULT_SIZE$b;
+    _size = undefined;
     constructor(componentType, hostElement, renderer, cdr, ngZone, injector) {
         this.componentType = componentType;
         this.hostElement = hostElement;
@@ -6732,7 +6725,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 args: ['input', { static: true }]
             }] } });
 
-const DEFAULT_ROUNDED$6 = 'medium';
 /**
  * Represents the Kendo UI CheckBox component for Angular.
  * Use this component to create a styled checkbox with support for indeterminate state.
@@ -6768,14 +6760,13 @@ class CheckBoxComponent extends RadioCheckBoxBase {
     }
     /**
      * Sets the `rounded` property to specify the border radius of the CheckBox
-     * ([see example](slug:appearance_checkboxdirective#toc-roundness)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/checkbox/appearance#roundness)).
      *
      * @default 'medium'
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED$6;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
@@ -6811,7 +6802,7 @@ class CheckBoxComponent extends RadioCheckBoxBase {
             'aria-invalid': this.isControlInvalid
         };
     }
-    _rounded = DEFAULT_ROUNDED$6;
+    _rounded = undefined;
     _checkedState = false;
     constructor(renderer, hostElement, cdr, ngZone, injector) {
         super('checkbox', hostElement, renderer, cdr, ngZone, injector);
@@ -6947,10 +6938,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Output
             }] } });
 
-const DEFAULT_SIZE$a = 'medium';
-const DEFAULT_ROUNDED$5 = 'medium';
 /**
- * Renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
+ * Renders the [Kendo UI CheckBox](https://www.telerik.com/kendo-angular-ui/components/inputs/checkbox) input component.
  * Apply this directive to `input type="checkbox"` HTML elements.
  *
  * @example
@@ -6967,35 +6956,33 @@ class CheckBoxDirective {
     }
     /**
      * Sets the `size` property to specify the width and height of the CheckBox
-     * ([see example]({% slug appearance_checkboxdirective %}#toc-size)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/checkbox/appearance#size)).
      *
      * @default 'medium'
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$a;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
     }
     /**
      * Sets the `rounded` property to specify the border radius of the CheckBox
-     * ([see example](slug:appearance_checkboxdirective#toc-roundness)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/checkbox/appearance#roundness)).
      *
      * @default 'medium'
      *
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$5;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
     }
-    _size = 'medium';
-    _rounded = 'medium';
+    _size = undefined;
+    _rounded = undefined;
     constructor(renderer, hostElement) {
         this.renderer = renderer;
         this.hostElement = hostElement;
@@ -7416,7 +7403,7 @@ const isJapanese = (input) => {
 };
 
 /**
- * Represents a template for suffix adornments in the TextBox component ([see examples](slug:adornments_textbox#toc-suffix-adornments)).
+ * Represents a template for suffix adornments in the TextBox component ([see examples](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/adornments#suffix-adornments)).
  *
  * @example
  * ```html
@@ -7460,7 +7447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /**
- * Represents a template for prefix adornments in the TextBox component ([see examples](slug:adornments_textbox#toc-prefix-adornments)).
+ * Represents a template for prefix adornments in the TextBox component ([see examples](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/adornments#prefix-adornments)).
  *
  * @example
  * ```html
@@ -7558,9 +7545,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const FOCUSED$1 = 'k-focus';
-const DEFAULT_SIZE$9 = 'medium';
-const DEFAULT_ROUNDED$4 = 'medium';
-const DEFAULT_FILL_MODE$4 = 'solid';
 const iconsMap$1 = { checkIcon, exclamationCircleIcon, xIcon };
 /**
  * Represents the Kendo UI TextBox component for Angular.
@@ -7595,7 +7579,7 @@ class TextBoxComponent {
      */
     type = 'text';
     /**
-     * Sets the disabled state of the TextBox. To disable the component in reactive forms, see [Forms Support](slug:formssupport_textbox#toc-managing-the-textbox-disabled-state-in-reactive-forms).
+     * Sets the disabled state of the TextBox. To disable the component in reactive forms, see [Forms Support](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/forms#managing-the-textbox-disabled-state-in-reactive-forms).
      * @default false
      */
     disabled = false;
@@ -7619,13 +7603,13 @@ class TextBoxComponent {
      */
     selectOnFocus = false;
     /**
-     * Specifies when to show the Success icon ([see example]({% slug validation_textbox %})).
+     * Specifies when to show the Success icon ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/validation-icons)).
      *
      * @default false
      */
     showSuccessIcon = false;
     /**
-     * Specifies when to show the Error icon ([see example]({% slug validation_textbox %})).
+     * Specifies when to show the Error icon ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/validation-icons)).
      *
      * @default false
      */
@@ -7660,37 +7644,34 @@ class TextBoxComponent {
      */
     clearButtonSvgIcon;
     /**
-     * Sets the padding of the TextBox internal input element ([see example]({% slug appearance_textbox %}#toc-size)).
+     * Sets the padding of the TextBox internal input element ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/appearance#size)).
      * @default 'medium'
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$9;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
     }
     /**
-     * Sets the border radius of the TextBox ([see example](slug:appearance_textbox#toc-roundness)).
+     * Sets the border radius of the TextBox ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/appearance#roundness)).
      * @default 'medium'
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$4;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
     }
     /**
-     * Sets the background and border styles of the TextBox ([see example]({% slug appearance_textbox %}#toc-fill-mode)).
+     * Sets the background and border styles of the TextBox ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/appearance#fill-mode)).
      * @default 'solid'
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$4;
-        this.handleClasses(newFillMode, 'fillMode');
-        this._fillMode = newFillMode;
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -7729,7 +7710,7 @@ class TextBoxComponent {
         return this._inputAttributes;
     }
     /**
-     * Fires when the value changes—when the component is blurred or the value is cleared through the **Clear** button ([see example](slug:events_textbox)).
+     * Fires when the value changes—when the component is blurred or the value is cleared through the **Clear** button ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/events)).
      * Does not fire when you change the value programmatically through `ngModel` or `formControl`.
      */
     valueChange = new EventEmitter();
@@ -7797,9 +7778,9 @@ class TextBoxComponent {
     _isFocused = false;
     focusChangedProgrammatically = false;
     _inputAttributes;
-    _size = 'medium';
-    _rounded = 'medium';
-    _fillMode = 'solid';
+    _size = undefined;
+    _rounded = undefined;
+    _fillMode = undefined;
     parsedAttributes = {};
     get defaultAttributes() {
         return {
@@ -8495,7 +8476,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-const DEFAULT_SIZE$8 = 'medium';
 /**
  * @hidden
  */
@@ -8517,7 +8497,7 @@ class ColorInputComponent {
      *
      * @default 'medium'
      */
-    size = DEFAULT_SIZE$8;
+    size = undefined;
     /**
      * Sets the `tabindex` of the inputs.
      * @default -1
@@ -9513,7 +9493,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 let serial$3 = 0;
-const DEFAULT_SIZE$7 = 'medium';
 /**
  * Represents the Kendo UI ColorGradient component.
  *
@@ -9603,15 +9582,14 @@ class ColorGradientComponent {
      * @default 'medium'
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE$7;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
     }
     /**
-     * Disables the ColorGradient. To disable it in reactive forms, see [Forms Support](slug:formssupport_colorgradient#toc-managing-the-colorgradient-disabled-state-in-reactive-forms).
+     * Disables the ColorGradient. To disable it in reactive forms, see [Forms Support](https://www.telerik.com/kendo-angular-ui/components/inputs/colorgradient/forms#managing-the-colorgradient-disabled-state-in-reactive-forms).
      *
      * @default false
      */
@@ -9644,7 +9622,7 @@ class ColorGradientComponent {
         return this._value;
     }
     /**
-     * Enables the color contrast tool that checks the contrast ratio of the selected color against a predefined background color. [See example](slug:contrasttool_colorgradient).
+     * Enables the color contrast tool that checks the contrast ratio of the selected color against a predefined background color. [See example](https://www.telerik.com/kendo-angular-ui/components/inputs/colorgradient/contrast-tool).
      */
     set contrastTool(value) {
         this._contrastTool = parseColor(value, this.format, this.opacity);
@@ -9750,7 +9728,7 @@ class ColorGradientComponent {
     listeners = [];
     hueSliderTouched = false;
     alphaSliderTouched = false;
-    _size = 'medium';
+    _size = undefined;
     updateValues = new Subject();
     changeRequestsSubscription;
     dynamicRTLSubscription;
@@ -10754,7 +10732,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 const DEFAULT_COLUMNS_COUNT = 10;
 const DEFAULT_PRESET = 'office';
 const DEFAULT_ACCESSIBLE_PRESET = 'accessible';
-const DEFAULT_SIZE$6 = 'medium';
 let serial$2 = 0;
 /**
  * Represents the Kendo UI ColorPalette component.
@@ -10851,9 +10828,8 @@ class ColorPaletteComponent {
      * @default 'medium'
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE$6;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -10872,7 +10848,7 @@ class ColorPaletteComponent {
         return !this.disabled ? this._tabindex : undefined;
     }
     /**
-     * Disables the ColorPalette. To disable it in reactive forms, see [Forms Support](slug:formssupport_colorpalette#toc-managing-the-colorpalette-disabled-state-in-reactive-forms).
+     * Disables the ColorPalette. To disable it in reactive forms, see [Forms Support](https://www.telerik.com/kendo-angular-ui/components/inputs/colorpalette/forms#managing-the-colorpalette-disabled-state-in-reactive-forms).
      */
     disabled = false;
     /**
@@ -10951,7 +10927,7 @@ class ColorPaletteComponent {
      */
     uniqueId = guid();
     selection;
-    _size = 'medium';
+    _size = undefined;
     _value;
     _columns;
     _palette;
@@ -11808,7 +11784,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-unused-expressions */
-const DEFAULT_SIZE$5 = 'medium';
 /**
  * Represents the Kendo UI FlatColorPicker component for Angular.
  *
@@ -11879,7 +11854,7 @@ class FlatColorPickerComponent {
      */
     readonly = false;
     /**
-     * Sets the disabled state of the FlatColorPicker. To disable it in reactive forms, see [Forms Support](slug:formssupport_flatcolorpicker#toc-managing-the-flatcolorpicker-disabled-state-in-reactive-forms).
+     * Sets the disabled state of the FlatColorPicker. To disable it in reactive forms, see [Forms Support](https://www.telerik.com/kendo-angular-ui/components/inputs/flatcolorpicker/forms#managing-the-flatcolorpicker-disabled-state-in-reactive-forms).
      *
      * @default false
      */
@@ -11979,9 +11954,8 @@ class FlatColorPickerComponent {
      * @default 'medium'
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE$5;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -12033,7 +12007,7 @@ class FlatColorPickerComponent {
     dynamicRTLSubscription;
     subscriptions = new Subscription();
     internalNavigation = false;
-    _size = 'medium';
+    _size = undefined;
     control;
     /**
      * @hidden
@@ -12988,9 +12962,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", 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';
 /**
  * @hidden
  */
@@ -13074,7 +13045,7 @@ class ColorPickerComponent {
      */
     readonly = false;
     /**
-     * Sets the disabled state of the ColorPicker. To disable it in reactive forms, see [Forms Support](slug:formssupport_colorpicker#toc-managing-the-colorpicker-disabled-state-in-reactive-forms).
+     * Sets the disabled state of the ColorPicker. To disable it in reactive forms, see [Forms Support](https://www.telerik.com/kendo-angular-ui/components/inputs/colorpicker/forms#managing-the-colorpicker-disabled-state-in-reactive-forms).
      *
      * @default false
      */
@@ -13196,42 +13167,39 @@ class ColorPickerComponent {
     actionsLayout = 'end';
     /**
      * The size property specifies the padding of the ColorPicker internal elements
-     * ([see example]({% slug appearance_colorpicker %}#toc-size)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/colorpicker/appearance#size)).
      *
      * @default 'medium'
      */
     set size(size) {
-        const newSize = size || DEFAULT_SIZE$4;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
     }
     /**
      * The rounded property specifies the border radius of the ColorPicker
-     * ([see example](slug:appearance_colorpicker#toc-roundness)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/colorpicker/appearance#roundness)).
      *
      * @default 'medium'
      */
     set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED$3;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
     }
     /**
      * The fillMode property specifies the background and border styles of the ColorPicker
-     * ([see example]({% slug appearance_colorpicker %}#toc-fill-mode)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/colorpicker/appearance#fill-mode)).
      *
      * @default 'solid'
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE$3;
-        this.handleClasses(newFillMode, 'fillMode');
-        this._fillMode = newFillMode;
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -13268,7 +13236,7 @@ class ColorPickerComponent {
      * Fires when the left side of the ColorPicker wrapper is clicked.
      * The event is triggered regardless of whether a ColorPicker icon is set or not.
      *
-     * The [`ActiveColorClickEvent`]({% slug api_inputs_activecolorclickevent %}) event provides the option to prevent the popup opening.
+     * The [`ActiveColorClickEvent`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/activecolorclickevent) event provides the option to prevent the popup opening.
      */
     activeColorClick = new EventEmitter();
     /**
@@ -13365,9 +13333,9 @@ class ColorPickerComponent {
     _popupSettings = { animate: true };
     _paletteSettings = {};
     _gradientSettings = { opacity: true, delay: 0 };
-    _size = 'medium';
-    _rounded = 'medium';
-    _fillMode = 'solid';
+    _size = undefined;
+    _rounded = undefined;
+    _fillMode = undefined;
     dynamicRTLSubscription;
     subscriptions = new Subscription();
     popupSubs = new Subscription();
@@ -13948,7 +13916,6 @@ class ColorPickerComponent {
           [svgIcon]="arrowDownIcon"
           [fillMode]="fillMode"
           [disabled]="disabled"
-          rounded="none"
           class="k-input-button"
           [attr.aria-label]="messageFor('toggleButtonLabel')"
           >
@@ -14098,7 +14065,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
           [svgIcon]="arrowDownIcon"
           [fillMode]="fillMode"
           [disabled]="disabled"
-          rounded="none"
           class="k-input-button"
           [attr.aria-label]="messageFor('toggleButtonLabel')"
           >
@@ -15129,7 +15095,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Output
             }] } });
 
-const DEFAULT_SIZE$3 = 'medium';
 /**
  * Represents the directive that renders the Kendo UI RadioButton input component.
  * Place the directive on `input type="radio"` HTML elements.
@@ -15147,19 +15112,18 @@ class RadioButtonDirective {
         return this.hostElement.nativeElement.disabled;
     }
     /**
-     * Specifies the `size` of the RadioButton. The `size` property changes the width and height of the RadioButton ([see example]({% slug appearance_radiobuttondirective %}#toc-size)).
+     * Specifies the `size` of the RadioButton. The `size` property changes the width and height of the RadioButton ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/radiobutton/appearance#size)).
      *
      * @default "medium"
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$3;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
     }
-    _size = 'medium';
+    _size = undefined;
     constructor(renderer, hostElement) {
         this.renderer = renderer;
         this.hostElement = hostElement;
@@ -15249,7 +15213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 /**
  * Renders the hovered rating item content.
- * To define an item template, nest an `<ng-template>` tag with the `kendoRatingHoveredItemTemplate` directive inside the `<kendo-rating>` tag ([see example](slug:templates_rating)).
+ * To define an item template, nest an `<ng-template>` tag with the `kendoRatingHoveredItemTemplate` directive inside the `<kendo-rating>` tag ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/templates)).
  *
  * The index of the currently hovered item is available as an implicit context using the `let-index="index"` syntax.
  * @example
@@ -15279,7 +15243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 /**
  * Renders the rating item content.
- * To define an item template, nest an `<ng-template>` tag with the `kendoRatingItemTemplate` directive inside the `<kendo-rating>` tag ([see example](slug:templates_rating)).
+ * To define an item template, nest an `<ng-template>` tag with the `kendoRatingItemTemplate` directive inside the `<kendo-rating>` tag ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/templates)).
  * The index of the current item is available as an implicit context using the `let-index="index"` syntax.
  * * @example
  * ```html
@@ -15308,7 +15272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 /**
  * Renders the selected rating item content.
- * To define an item template, nest an `<ng-template>` tag with the `kendoRatingSelectedItemTemplate` directive inside the `<kendo-rating>` tag ([see example](slug:templates_rating)).
+ * To define an item template, nest an `<ng-template>` tag with the `kendoRatingSelectedItemTemplate` directive inside the `<kendo-rating>` tag ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/templates)).
  *
  * The index of the currently selected item is available as an implicit context using the `let-index="index"` syntax.
  *
@@ -15356,15 +15320,15 @@ class RatingComponent {
     hoveredItemTemplate;
     selectedItemTemplate;
     /**
-     * When `true`, disables the Rating ([see example]({% slug disabledstate_rating %})).
+     * When `true`, disables the Rating ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/disabled)).
 
-     * To disable the component in reactive forms, see [Forms Support](slug:formssupport_rating#toc-managing-the-rating-disabled-state-in-reactive-forms).
+     * To disable the component in reactive forms, see [Forms Support](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/forms#managing-the-rating-disabled-state-in-reactive-forms).
      *
      * @default false
      */
     disabled = false;
     /**
-     * When `true`, sets the Rating to read-only ([see example]({% slug readonly_rating %})).
+     * When `true`, sets the Rating to read-only ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/readonly)).
 
      *
      * @default false
@@ -15378,7 +15342,7 @@ class RatingComponent {
      */
     tabindex = 0;
     /**
-     * Sets the number of Rating items ([see example]({% slug itemscount_rating %})).
+     * Sets the number of Rating items ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/items)).
      *
      * @default 5
      */
@@ -15395,7 +15359,7 @@ class RatingComponent {
         return this._value;
     }
     /**
-     * Sets the selection mode of the Rating ([see example]({% slug selection_rating %})).
+     * Sets the selection mode of the Rating ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/selection)).
      *
      * @default 'continuous'
      */
@@ -15407,7 +15371,7 @@ class RatingComponent {
         return this._selection;
     }
     /**
-     * Sets the precision of the Rating ([see example]({% slug precision_rating %})).
+     * Sets the precision of the Rating ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/precision)).
      *
      * @default 'item'
      */
@@ -15419,19 +15383,19 @@ class RatingComponent {
         return this._precision;
     }
     /**
-     * Sets the label text for the Rating. The text renders in a `<span>` element ([see example]({% slug label_rating %})).
+     * Sets the label text for the Rating. The text renders in a `<span>` element ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/label)).
      */
     label;
     /**
-     * Sets a custom font icon for the Rating items ([see example]({% slug icon_rating %})).
+     * Sets a custom font icon for the Rating items ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/icon)).
      */
     icon;
     /**
-     * Sets a custom SVG icon for the selected or hovered state of the Rating items ([see example]({% slug icon_rating %})).
+     * Sets a custom SVG icon for the selected or hovered state of the Rating items ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/icon)).
      */
     svgIcon = starIcon;
     /**
-     * Sets a custom SVG icon for the default state of the Rating items when not hovered or selected ([see example]({% slug icon_rating %})).
+     * Sets a custom SVG icon for the default state of the Rating items when not hovered or selected ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/rating/icon)).
      */
     svgIconOutline = starOutlineIcon;
     /**
@@ -15701,144 +15665,144 @@ class RatingComponent {
                 provide: KendoInput,
                 useExisting: forwardRef(() => RatingComponent)
             }
-        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: RatingItemTemplateDirective, descendants: true }, { propertyName: "hoveredItemTemplate", first: true, predicate: RatingHoveredItemTemplateDirective, descendants: true }, { propertyName: "selectedItemTemplate", first: true, predicate: RatingSelectedItemTemplateDirective, descendants: true }], exportAs: ["kendoRating"], ngImport: i0, template: `
-        <span class="k-rating-container">
-          @for (item of ratingItems; track item; let i = $index) {
-            <span
-              class="k-rating-item"
-              [title]="item.title"
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: RatingItemTemplateDirective, descendants: true }, { propertyName: "hoveredItemTemplate", first: true, predicate: RatingHoveredItemTemplateDirective, descendants: true }, { propertyName: "selectedItemTemplate", first: true, predicate: RatingSelectedItemTemplateDirective, descendants: true }], exportAs: ["kendoRating"], ngImport: i0, template: `
+        <span class="k-rating-container">
+          @for (item of ratingItems; track item; let i = $index) {
+            <span
+              class="k-rating-item"
+              [title]="item.title"
                 [ngClass]="{
                     'k-selected': item.selected || item.selectedIndicator,
                     'k-hover': item.hovered
                 }"
-              (mouseenter)="onMouseEnter($event)"
-              (mouseout)="onMouseOut()"
-              (click)="changeValue(i, $event)"
-              >
-              @if (!item.half) {
-                @if (!itemTemplate) {
-                  @if (!icon) {
-                    <kendo-icon-wrapper
-                      size="xlarge"
-                      [name]="item.selected || item.hovered ? 'star' : 'star-outline'"
-                      [svgIcon]="item.selected || item.hovered ? svgIcon : svgIconOutline"
-                      >
-                    </kendo-icon-wrapper>
-                  }
-                  @if (icon) {
-                    <kendo-icon-wrapper
-                      size="xlarge"
-                      [name]="item.selected || item.hovered ? icon : icon + '-outline'"
-                      >
-                    </kendo-icon-wrapper>
-                  }
-                }
-                @if (itemTemplate && (!item.selected && !item.hovered)) {
-                  <ng-template
-                    [ngTemplateOutlet]="itemTemplate?.templateRef"
-                    [ngTemplateOutletContext]="{index: i}"
-                    >
-                  </ng-template>
-                }
-                @if (hoveredItemTemplate && item.hovered) {
-                  <ng-template
-                    [ngTemplateOutlet]="hoveredItemTemplate?.templateRef"
-                    [ngTemplateOutletContext]="{index: i}"
-                    >
-                  </ng-template>
-                }
-                @if (selectedItemTemplate && (item.selected && !item.hovered)) {
-                  <ng-template
-                    [ngTemplateOutlet]="selectedItemTemplate?.templateRef"
-                    [ngTemplateOutletContext]="{index: i}"
-                    >
-                  </ng-template>
-                }
-              }
-              @if (item.half) {
-                @if (!itemTemplate) {
-                  <span class="k-rating-precision-complement">
-                    @if (!icon) {
-                      <kendo-icon-wrapper
-                        size="xlarge"
-                        [name]="'star-outline'"
-                        [svgIcon]="svgIconOutline"
-                        >
-                      </kendo-icon-wrapper>
-                    }
-                    @if (icon) {
-                      <kendo-icon-wrapper
-                        size="xlarge"
-                        [name]="icon + '-outline'"
-                        >
-                      </kendo-icon-wrapper>
-                    }
-                  </span>
-                  <span
-                    class="k-rating-precision-part"
-                    [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
-                    >
-                    @if (!icon) {
-                      <kendo-icon-wrapper
-                        size="xlarge"
-                        [name]="'star'"
-                        [svgIcon]="svgIcon"
-                        >
-                      </kendo-icon-wrapper>
-                    }
-                    @if (icon) {
-                      <kendo-icon-wrapper
-                        size="xlarge"
-                        [name]="icon"
-                        >
-                      </kendo-icon-wrapper>
-                    }
-                  </span>
-                }
-                <span
-                  class="k-rating-precision-complement"
-                  >
-                  <ng-template
-                    [ngTemplateOutlet]="itemTemplate?.templateRef"
-                    [ngTemplateOutletContext]="{index: i}"
-                    >
-                  </ng-template>
-                </span>
-                @if (hoveredItemTemplate && item.hovered) {
-                  <span
-                    class="k-rating-precision-part"
-                    [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
-                    >
-                    <ng-template
-                      [ngTemplateOutlet]="hoveredItemTemplate?.templateRef"
-                      [ngTemplateOutletContext]="{index: i}"
-                      >
-                    </ng-template>
-                  </span>
-                }
-                @if (selectedItemTemplate && (item.selected && !item.hovered)) {
-                  <span
-                    class="k-rating-precision-part"
-                    [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
-                    >
-                    <ng-template
-                      [ngTemplateOutlet]="selectedItemTemplate?.templateRef"
-                      [ngTemplateOutletContext]="{index: i}"
-                      >
-                    </ng-template>
-                  </span>
-                }
-                <span [style.width.px]="24" [style.height.px]="24" [style.display]="'block'"></span>
-              }
-            </span>
-          }
-        </span>
-        
-        @if (label) {
-          <span
-            class="k-rating-label"
-          >{{ label }}</span>
-        }
+              (mouseenter)="onMouseEnter($event)"
+              (mouseout)="onMouseOut()"
+              (click)="changeValue(i, $event)"
+              >
+              @if (!item.half) {
+                @if (!itemTemplate) {
+                  @if (!icon) {
+                    <kendo-icon-wrapper
+                      size="xlarge"
+                      [name]="item.selected || item.hovered ? 'star' : 'star-outline'"
+                      [svgIcon]="item.selected || item.hovered ? svgIcon : svgIconOutline"
+                      >
+                    </kendo-icon-wrapper>
+                  }
+                  @if (icon) {
+                    <kendo-icon-wrapper
+                      size="xlarge"
+                      [name]="item.selected || item.hovered ? icon : icon + '-outline'"
+                      >
+                    </kendo-icon-wrapper>
+                  }
+                }
+                @if (itemTemplate && (!item.selected && !item.hovered)) {
+                  <ng-template
+                    [ngTemplateOutlet]="itemTemplate?.templateRef"
+                    [ngTemplateOutletContext]="{index: i}"
+                    >
+                  </ng-template>
+                }
+                @if (hoveredItemTemplate && item.hovered) {
+                  <ng-template
+                    [ngTemplateOutlet]="hoveredItemTemplate?.templateRef"
+                    [ngTemplateOutletContext]="{index: i}"
+                    >
+                  </ng-template>
+                }
+                @if (selectedItemTemplate && (item.selected && !item.hovered)) {
+                  <ng-template
+                    [ngTemplateOutlet]="selectedItemTemplate?.templateRef"
+                    [ngTemplateOutletContext]="{index: i}"
+                    >
+                  </ng-template>
+                }
+              }
+              @if (item.half) {
+                @if (!itemTemplate) {
+                  <span class="k-rating-precision-complement">
+                    @if (!icon) {
+                      <kendo-icon-wrapper
+                        size="xlarge"
+                        [name]="'star-outline'"
+                        [svgIcon]="svgIconOutline"
+                        >
+                      </kendo-icon-wrapper>
+                    }
+                    @if (icon) {
+                      <kendo-icon-wrapper
+                        size="xlarge"
+                        [name]="icon + '-outline'"
+                        >
+                      </kendo-icon-wrapper>
+                    }
+                  </span>
+                  <span
+                    class="k-rating-precision-part"
+                    [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
+                    >
+                    @if (!icon) {
+                      <kendo-icon-wrapper
+                        size="xlarge"
+                        [name]="'star'"
+                        [svgIcon]="svgIcon"
+                        >
+                      </kendo-icon-wrapper>
+                    }
+                    @if (icon) {
+                      <kendo-icon-wrapper
+                        size="xlarge"
+                        [name]="icon"
+                        >
+                      </kendo-icon-wrapper>
+                    }
+                  </span>
+                }
+                <span
+                  class="k-rating-precision-complement"
+                  >
+                  <ng-template
+                    [ngTemplateOutlet]="itemTemplate?.templateRef"
+                    [ngTemplateOutletContext]="{index: i}"
+                    >
+                  </ng-template>
+                </span>
+                @if (hoveredItemTemplate && item.hovered) {
+                  <span
+                    class="k-rating-precision-part"
+                    [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
+                    >
+                    <ng-template
+                      [ngTemplateOutlet]="hoveredItemTemplate?.templateRef"
+                      [ngTemplateOutletContext]="{index: i}"
+                      >
+                    </ng-template>
+                  </span>
+                }
+                @if (selectedItemTemplate && (item.selected && !item.hovered)) {
+                  <span
+                    class="k-rating-precision-part"
+                    [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
+                    >
+                    <ng-template
+                      [ngTemplateOutlet]="selectedItemTemplate?.templateRef"
+                      [ngTemplateOutletContext]="{index: i}"
+                      >
+                    </ng-template>
+                  </span>
+                }
+                <span [style.width.px]="24" [style.height.px]="24" [style.display]="'block'"></span>
+              }
+            </span>
+          }
+        </span>
+
+        @if (label) {
+          <span
+            class="k-rating-label"
+          >{{ label }}</span>
+        }
         `, isInline: true, dependencies: [{ 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RatingComponent, decorators: [{
@@ -15859,144 +15823,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         }
                     ],
                     selector: 'kendo-rating',
-                    template: `
-        <span class="k-rating-container">
-          @for (item of ratingItems; track item; let i = $index) {
-            <span
-              class="k-rating-item"
-              [title]="item.title"
+                    template: `
+        <span class="k-rating-container">
+          @for (item of ratingItems; track item; let i = $index) {
+            <span
+              class="k-rating-item"
+              [title]="item.title"
                 [ngClass]="{
                     'k-selected': item.selected || item.selectedIndicator,
                     'k-hover': item.hovered
                 }"
-              (mouseenter)="onMouseEnter($event)"
-              (mouseout)="onMouseOut()"
-              (click)="changeValue(i, $event)"
-              >
-              @if (!item.half) {
-                @if (!itemTemplate) {
-                  @if (!icon) {
-                    <kendo-icon-wrapper
-                      size="xlarge"
-                      [name]="item.selected || item.hovered ? 'star' : 'star-outline'"
-                      [svgIcon]="item.selected || item.hovered ? svgIcon : svgIconOutline"
-                      >
-                    </kendo-icon-wrapper>
-                  }
-                  @if (icon) {
-                    <kendo-icon-wrapper
-                      size="xlarge"
-                      [name]="item.selected || item.hovered ? icon : icon + '-outline'"
-                      >
-                    </kendo-icon-wrapper>
-                  }
-                }
-                @if (itemTemplate && (!item.selected && !item.hovered)) {
-                  <ng-template
-                    [ngTemplateOutlet]="itemTemplate?.templateRef"
-                    [ngTemplateOutletContext]="{index: i}"
-                    >
-                  </ng-template>
-                }
-                @if (hoveredItemTemplate && item.hovered) {
-                  <ng-template
-                    [ngTemplateOutlet]="hoveredItemTemplate?.templateRef"
-                    [ngTemplateOutletContext]="{index: i}"
-                    >
-                  </ng-template>
-                }
-                @if (selectedItemTemplate && (item.selected && !item.hovered)) {
-                  <ng-template
-                    [ngTemplateOutlet]="selectedItemTemplate?.templateRef"
-                    [ngTemplateOutletContext]="{index: i}"
-                    >
-                  </ng-template>
-                }
-              }
-              @if (item.half) {
-                @if (!itemTemplate) {
-                  <span class="k-rating-precision-complement">
-                    @if (!icon) {
-                      <kendo-icon-wrapper
-                        size="xlarge"
-                        [name]="'star-outline'"
-                        [svgIcon]="svgIconOutline"
-                        >
-                      </kendo-icon-wrapper>
-                    }
-                    @if (icon) {
-                      <kendo-icon-wrapper
-                        size="xlarge"
-                        [name]="icon + '-outline'"
-                        >
-                      </kendo-icon-wrapper>
-                    }
-                  </span>
-                  <span
-                    class="k-rating-precision-part"
-                    [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
-                    >
-                    @if (!icon) {
-                      <kendo-icon-wrapper
-                        size="xlarge"
-                        [name]="'star'"
-                        [svgIcon]="svgIcon"
-                        >
-                      </kendo-icon-wrapper>
-                    }
-                    @if (icon) {
-                      <kendo-icon-wrapper
-                        size="xlarge"
-                        [name]="icon"
-                        >
-                      </kendo-icon-wrapper>
-                    }
-                  </span>
-                }
-                <span
-                  class="k-rating-precision-complement"
-                  >
-                  <ng-template
-                    [ngTemplateOutlet]="itemTemplate?.templateRef"
-                    [ngTemplateOutletContext]="{index: i}"
-                    >
-                  </ng-template>
-                </span>
-                @if (hoveredItemTemplate && item.hovered) {
-                  <span
-                    class="k-rating-precision-part"
-                    [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
-                    >
-                    <ng-template
-                      [ngTemplateOutlet]="hoveredItemTemplate?.templateRef"
-                      [ngTemplateOutletContext]="{index: i}"
-                      >
-                    </ng-template>
-                  </span>
-                }
-                @if (selectedItemTemplate && (item.selected && !item.hovered)) {
-                  <span
-                    class="k-rating-precision-part"
-                    [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
-                    >
-                    <ng-template
-                      [ngTemplateOutlet]="selectedItemTemplate?.templateRef"
-                      [ngTemplateOutletContext]="{index: i}"
-                      >
-                    </ng-template>
-                  </span>
-                }
-                <span [style.width.px]="24" [style.height.px]="24" [style.display]="'block'"></span>
-              }
-            </span>
-          }
-        </span>
-        
-        @if (label) {
-          <span
-            class="k-rating-label"
-          >{{ label }}</span>
-        }
+              (mouseenter)="onMouseEnter($event)"
+              (mouseout)="onMouseOut()"
+              (click)="changeValue(i, $event)"
+              >
+              @if (!item.half) {
+                @if (!itemTemplate) {
+                  @if (!icon) {
+                    <kendo-icon-wrapper
+                      size="xlarge"
+                      [name]="item.selected || item.hovered ? 'star' : 'star-outline'"
+                      [svgIcon]="item.selected || item.hovered ? svgIcon : svgIconOutline"
+                      >
+                    </kendo-icon-wrapper>
+                  }
+                  @if (icon) {
+                    <kendo-icon-wrapper
+                      size="xlarge"
+                      [name]="item.selected || item.hovered ? icon : icon + '-outline'"
+                      >
+                    </kendo-icon-wrapper>
+                  }
+                }
+                @if (itemTemplate && (!item.selected && !item.hovered)) {
+                  <ng-template
+                    [ngTemplateOutlet]="itemTemplate?.templateRef"
+                    [ngTemplateOutletContext]="{index: i}"
+                    >
+                  </ng-template>
+                }
+                @if (hoveredItemTemplate && item.hovered) {
+                  <ng-template
+                    [ngTemplateOutlet]="hoveredItemTemplate?.templateRef"
+                    [ngTemplateOutletContext]="{index: i}"
+                    >
+                  </ng-template>
+                }
+                @if (selectedItemTemplate && (item.selected && !item.hovered)) {
+                  <ng-template
+                    [ngTemplateOutlet]="selectedItemTemplate?.templateRef"
+                    [ngTemplateOutletContext]="{index: i}"
+                    >
+                  </ng-template>
+                }
+              }
+              @if (item.half) {
+                @if (!itemTemplate) {
+                  <span class="k-rating-precision-complement">
+                    @if (!icon) {
+                      <kendo-icon-wrapper
+                        size="xlarge"
+                        [name]="'star-outline'"
+                        [svgIcon]="svgIconOutline"
+                        >
+                      </kendo-icon-wrapper>
+                    }
+                    @if (icon) {
+                      <kendo-icon-wrapper
+                        size="xlarge"
+                        [name]="icon + '-outline'"
+                        >
+                      </kendo-icon-wrapper>
+                    }
+                  </span>
+                  <span
+                    class="k-rating-precision-part"
+                    [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
+                    >
+                    @if (!icon) {
+                      <kendo-icon-wrapper
+                        size="xlarge"
+                        [name]="'star'"
+                        [svgIcon]="svgIcon"
+                        >
+                      </kendo-icon-wrapper>
+                    }
+                    @if (icon) {
+                      <kendo-icon-wrapper
+                        size="xlarge"
+                        [name]="icon"
+                        >
+                      </kendo-icon-wrapper>
+                    }
+                  </span>
+                }
+                <span
+                  class="k-rating-precision-complement"
+                  >
+                  <ng-template
+                    [ngTemplateOutlet]="itemTemplate?.templateRef"
+                    [ngTemplateOutletContext]="{index: i}"
+                    >
+                  </ng-template>
+                </span>
+                @if (hoveredItemTemplate && item.hovered) {
+                  <span
+                    class="k-rating-precision-part"
+                    [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
+                    >
+                    <ng-template
+                      [ngTemplateOutlet]="hoveredItemTemplate?.templateRef"
+                      [ngTemplateOutletContext]="{index: i}"
+                      >
+                    </ng-template>
+                  </span>
+                }
+                @if (selectedItemTemplate && (item.selected && !item.hovered)) {
+                  <span
+                    class="k-rating-precision-part"
+                    [ngStyle]="{'clipPath': direction === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)'}"
+                    >
+                    <ng-template
+                      [ngTemplateOutlet]="selectedItemTemplate?.templateRef"
+                      [ngTemplateOutletContext]="{index: i}"
+                      >
+                    </ng-template>
+                  </span>
+                }
+                <span [style.width.px]="24" [style.height.px]="24" [style.display]="'block'"></span>
+              }
+            </span>
+          }
+        </span>
+
+        @if (label) {
+          <span
+            class="k-rating-label"
+          >{{ label }}</span>
+        }
         `,
                     standalone: true,
                     imports: [NgClass, IconWrapperComponent, NgTemplateOutlet, NgStyle]
@@ -16244,16 +16208,13 @@ 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_POPUP_SCALE = 3;
 const DEFAULT_EXPORT_SCALE = 2;
 const DEFAULT_COLOR = '#000000';
 const DEFAULT_BACKGROUND_COLOR = '#ffffff';
 const iconsMap = { xIcon, hyperlinkOpenIcon };
 /**
- * Represents the [Kendo UI Signature component for Angular]({% slug overview_signature %}).
+ * Represents the [Kendo UI Signature component for Angular](https://www.telerik.com/kendo-angular-ui/components/inputs/signature).
  *
  * Use the Signature to let users add a hand-drawn signature to forms.
  *
@@ -16290,7 +16251,7 @@ class SignatureComponent {
      * Sets the disabled state of the Signature.
      *
      * Set to `true` to disable the component and prevent any user interaction.
-     * To disable the component in reactive forms, see [Managing the Signature Disabled State in Reactive Forms](slug:formssupport_signature#toc-managing-the-signature-disabled-state-in-reactive-forms).
+     * To disable the component in reactive forms, see [Managing the Signature Disabled State in Reactive Forms](https://www.telerik.com/kendo-angular-ui/components/inputs/signature/forms#managing-the-signature-disabled-state-in-reactive-forms).
      *
      * @default false
      */
@@ -16344,25 +16305,25 @@ class SignatureComponent {
     }
     /**
      * Sets the padding of the Signature internal controls
-     * ([ee example]({% slug appearance_signature %}#toc-size)).
+     * ([ee example](https://www.telerik.com/kendo-angular-ui/components/inputs/signature/appearance#size)).
      *
-     * @default 'medium'
+     * @default undefined
      */
-    size = DEFAULT_SIZE$2;
+    size;
     /**
      * Sets the border radius of the Signature
-     * ([see example](slug:appearance_signature#rounded-corners)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/signature/appearance#rounded-corners)).
      *
-     * @default 'medium'
+     * @default undefined
      */
-    rounded = DEFAULT_ROUNDED$2;
+    rounded;
     /**
      * Sets the background and border styles of the Signature
-     * ([see example](slug:appearance_signature#toc-fill-mode)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/signature/appearance#fill-mode)).
      *
-     * @default 'solid'
+     * @default undefined
      */
-    fillMode = DEFAULT_FILL_MODE$2;
+    fillMode;
     /**
      * Sets the stroke color of the Signature.
      *
@@ -16755,9 +16716,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]}`, isPresent(this.size)],
+            [`k-input-${this.fillMode}`, isPresent(this.fillMode)],
+            [`k-rounded-${ROUNDED_MAP[this.rounded]}`, isPresent(this.rounded)],
         ];
         this.hostClasses.forEach(([name, enabled]) => classList.toggle(name, enabled));
     }
@@ -17410,7 +17371,7 @@ class TextFieldsBase {
      */
     title;
     /**
-     * Sets the disabled state of the TextArea component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_textarea#toc-managing-the-textarea-disabled-state-in-reactive-forms).
+     * Sets the disabled state of the TextArea component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](https://www.telerik.com/kendo-angular-ui/components/inputs/textarea/forms#managing-the-textarea-disabled-state-in-reactive-forms).
      *
      * @default false
      */
@@ -17543,9 +17504,6 @@ const resizeClasses = {
     'auto': 'k-resize-none'
 };
 const FOCUSED = 'k-focus';
-const DEFAULT_SIZE$1 = 'medium';
-const DEFAULT_ROUNDED$1 = 'medium';
-const DEFAULT_FILL_MODE$1 = 'solid';
 /**
  * Represents the Kendo UI TextArea component for Angular.
  *
@@ -17663,37 +17621,34 @@ class TextAreaComponent extends TextFieldsBase {
      */
     resizable = 'vertical';
     /**
-     * Sets the size of the TextArea. Controls the padding of the text area element ([see example]({% slug appearance_textarea %}#toc-size)).
+     * Sets the size of the TextArea. Controls the padding of the text area element ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/textarea/appearance#size)).
      * @default 'medium'
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$1;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
     }
     /**
-     * Sets the border radius of the TextArea ([see example](slug:appearance_textarea#toc-roundness)).
+     * Sets the border radius of the TextArea ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/textarea/appearance#roundness)).
      * @default 'medium'
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$1;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
     }
     /**
-     * Sets the background and border styles of the TextArea ([see example](slug:appearance_textarea#toc-fill-mode)).
+     * Sets the background and border styles of the TextArea ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/textarea/appearance#fill-mode)).
      * @default 'solid'
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$1;
-        this.handleClasses(newFillMode, 'fillMode');
-        this._fillMode = newFillMode;
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -17725,7 +17680,7 @@ class TextAreaComponent extends TextFieldsBase {
      */
     onBlur = new EventEmitter();
     /**
-     * Fires when the value changes or the TextArea is blurred ([see example](slug:events_textarea)).
+     * Fires when the value changes or the TextArea is blurred ([see example](https://www.telerik.com/kendo-angular-ui/components/inputs/textarea/events)).
      *
      * The event does not fire when the value changes programmatically or through form control binding.
      */
@@ -17734,9 +17689,9 @@ class TextAreaComponent extends TextFieldsBase {
     maxResizableHeight;
     resizeSubscription;
     resizeObserver;
-    _size = 'medium';
-    _rounded = 'medium';
-    _fillMode = 'solid';
+    _size = undefined;
+    _rounded = undefined;
+    _fillMode = undefined;
     _adornmentsOrientation = 'horizontal';
     _inputAttributes;
     parsedAttributes = {};
@@ -18433,9 +18388,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }] });
 
-const DEFAULT_SIZE = 'medium';
-const DEFAULT_ROUNDED = 'medium';
-const DEFAULT_FILL_MODE = 'solid';
 const DEFAULT_OTPINPUT_LENGTH = 4;
 /**
  * Represents the Kendo UI OTP Input component for Angular.
@@ -18565,14 +18517,15 @@ class OTPInputComponent {
     /**
      * Sets the padding of the input fields.
      *
-     * @default 'medium'
+     * @default undefined
      */
     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;
+        if (size) {
+            this.renderer.addClass(elem, `k-otp-${SIZE_MAP[size]}`);
+        }
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -18583,7 +18536,7 @@ class OTPInputComponent {
      * @default 'medium'
      */
     set rounded(rounded) {
-        this._rounded = rounded || DEFAULT_ROUNDED;
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
@@ -18594,9 +18547,8 @@ class OTPInputComponent {
      * @default 'solid'
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE;
-        this.setGroupFillMode(newFillMode, this._fillMode);
-        this._fillMode = newFillMode;
+        this.setGroupFillMode(fillMode, this._fillMode);
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -18669,9 +18621,9 @@ class OTPInputComponent {
     _inputGroups;
     separatorPositions = new Set();
     _value = null;
-    _size = DEFAULT_SIZE;
-    _rounded = DEFAULT_ROUNDED;
-    _fillMode = DEFAULT_FILL_MODE;
+    _size = undefined;
+    _rounded = undefined;
+    _fillMode = undefined;
     _isFocused = false;
     focusChangedProgrammatically = false;
     inputFieldValueChanged = false;
@@ -18708,8 +18660,6 @@ class OTPInputComponent {
     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);
         });
@@ -19083,10 +19033,10 @@ class OTPInputComponent {
     }
     setGroupFillMode(fillMode, previousFillMode) {
         this.inputGroups?.forEach(element => {
-            if (previousFillMode !== 'none') {
+            if (previousFillMode) {
                 this.renderer.removeClass(element.nativeElement, `k-input-group-${previousFillMode}`);
             }
-            if (fillMode !== 'none') {
+            if (fillMode) {
                 this.renderer.addClass(element.nativeElement, `k-input-group-${fillMode}`);
             }
         });
@@ -19172,7 +19122,7 @@ class OTPInputComponent {
           (onFocus)="handleFocus()"
           >
           @if (spacing) {
-            @for (input of inputsArray; track input; let i = $index) {
+            @for (input of inputsArray; track $index; let i = $index) {
               <kendo-textbox
                 class="k-otp-input"
                 [class.k-invalid]="isControlInvalid"
@@ -19249,7 +19199,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
           (onFocus)="handleFocus()"
           >
           @if (spacing) {
-            @for (input of inputsArray; track input; let i = $index) {
+            @for (input of inputsArray; track $index; let i = $index) {
               <kendo-textbox
                 class="k-otp-input"
                 [class.k-invalid]="isControlInvalid"