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

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

@@ -37,7 +37,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/'
 };
 
@@ -522,7 +522,8 @@ const getRoundedClass = (rounded) => {
         'small': 'k-rounded-sm',
         'medium': 'k-rounded-md',
         'large': 'k-rounded-lg',
-        'full': 'k-rounded-full'
+        'full': 'k-rounded-full',
+        'none': 'k-rounded-none'
     };
     return ROUNDED_CLASSES[rounded];
 };
@@ -538,18 +539,6 @@ const getFillModeClass = (component, fillMode) => {
     };
     return FILLMODE_CLASSES[fillMode];
 };
-/**
- * @hidden
- */
-const DEFAULT_ROUNDED = 'medium';
-/**
- * @hidden
- */
-const DEFAULT_SIZE = 'medium';
-/**
- * @hidden
- */
-const DEFAULT_FILL_MODE = 'solid';
 
 const EMPTY_DATA$3 = [[]];
 const CELLS_LENGTH$3 = 4;
@@ -1567,7 +1556,7 @@ function getTypeNameForDebugging(type) {
 }
 
 const noop$1 = () => false;
-const DISABLED_DATES_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/disabled-dates/';
+const DISABLED_DATES_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/disabled-dates';
 /**
  * @hidden
  */
@@ -3027,10 +3016,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * - `date` - The Date object representing the current cell's date
  * - `cellContext` - Additional context information about the current cell
  *
- * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
+ * For more examples, refer to the article on [templates](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/templates).
  *
  * `kendoCalendarCellTemplate` is equivalent to
- * [`kendoCalendarMonthCellTemplate`]({% slug api_dateinputs_monthcelltemplatedirective %}).
+ * [`kendoCalendarMonthCellTemplate`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/monthcelltemplatedirective).
  *
  * @example
  * ```html
@@ -3068,7 +3057,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * - `date` - The Date object representing the current cell's date
  * - `cellContext` - Additional context information about the current month cell
  *
- * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
+ * For more examples, refer to the article on [templates](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/templates).
  *
  * @example
  * ```html
@@ -3106,7 +3095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * - `date` - The Date object representing the current cell's date
  * - `cellContext` - Additional context information about the current year cell
  *
- * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
+ * For more examples, refer to the article on [templates](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/templates).
  *
  * @example
  * ```html
@@ -3144,7 +3133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * - `date` - The Date object representing the current cell's date
  * - `cellContext` - Additional context information about the current decade cell
  *
- * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
+ * For more examples, refer to the article on [templates](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/templates).
  *
  * @example
  * ```html
@@ -3182,7 +3171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * - `date` - The Date object representing the current cell's date
  * - `cellContext` - Additional context information about the current century cell
  *
- * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
+ * For more examples, refer to the article on [templates](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/templates).
  *
  * @example
  * ```html
@@ -3220,7 +3209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * - `date` - The Date object representing the current week's date
  * - `cellContext` - Additional context information about the current week number cell
  *
- * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
+ * For more examples, refer to the article on [templates](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/templates).
  *
  * @example
  * ```html
@@ -3258,7 +3247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * - `date` - The Date object representing the current header context
  * - `activeView` - The current active view of the Calendar
  *
- * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
+ * For more examples, refer to the article on [templates](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/templates).
  *
  * @example
  * ```html
@@ -3452,7 +3441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * - `date` - The Date object representing the current header context
  * - `activeView` - The current active view of the Calendar
  *
- * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
+ * For more examples, refer to the article on [templates](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/templates).
  *
  * @example
  * ```html
@@ -3492,7 +3481,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * - `date` - The Date object representing the current calendar context
  * - `activeView` - The current active view of the Calendar
  *
- * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
+ * For more examples, refer to the article on [templates](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/templates).
  *
  * @example
  * ```html
@@ -3658,11 +3647,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1$1.LocalizationService }] });
 
-const BOTTOM_VIEW_DOC_LINK$1 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-bottomview';
-const TOP_VIEW_DOC_LINK$1 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-topview';
-const MIN_DOC_LINK$3 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-min';
-const MAX_DOC_LINK$3 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-max';
-const VALUE_DOC_LINK$5 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/#toc-using-with-json';
+const BOTTOM_VIEW_DOC_LINK$1 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent#bottomview';
+const TOP_VIEW_DOC_LINK$1 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent#topview';
+const MIN_DOC_LINK$3 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent#min';
+const MAX_DOC_LINK$3 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent#max';
+const VALUE_DOC_LINK$5 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar#using-with-json';
 /**
  * @hidden
  */
@@ -3699,7 +3688,7 @@ class MultiViewCalendarComponent {
     disabledDatesService;
     selectionService;
     /**
-     * Shows days that fall outside the current month ([see example]({% slug viewoptions_multiviewcalendar %}#toc-displaying-other-month-days)).
+     * Shows days that fall outside the current month ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/view-options#displaying-other-month-days)).
      *
      * @default true
      */
@@ -3718,30 +3707,29 @@ class MultiViewCalendarComponent {
      *
      * The possible values are:
      * * `small`
-     * * `medium` (Default)
+     * * `medium`
      * * `large`
-     * * `none`
      *
+     * @default undefined
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE;
         this.renderer.removeClass(this.element.nativeElement, getSizeClass('calendar', this.size));
-        if (newSize !== 'none') {
-            this.renderer.addClass(this.element.nativeElement, getSizeClass('calendar', newSize));
+        if (size) {
+            this.renderer.addClass(this.element.nativeElement, getSizeClass('calendar', size));
         }
-        this._size = newSize;
+        this._size = size;
     }
     get size() {
         return this._size;
     }
-    _size = DEFAULT_SIZE;
+    _size = undefined;
     /**
      * @hidden
      */
     id;
     /**
      * Specifies the focused date of the Calendar
-     * ([see example]({% slug dates_multiviewcalendar %}#toc-focused-dates)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/dates#focused-dates)).
      *
      * If the Calendar is outside the `min` or `max` range, the component normalizes the defined `focusedDate`.
      */
@@ -3806,14 +3794,14 @@ class MultiViewCalendarComponent {
     /**
      * Determines whether the built-in validator for disabled
      * date ranges is enforced when validating a form
-     * ([see example](slug:disabled_dates_multiviewcalendar)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/disabled-dates)).
      *
      * @default false
      */
     disabledDatesRangeValidation = false;
     /**
      * Sets the Calendar selection mode
-     * ([see example]({% slug selection_multiviewcalendar %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/selection-modes)).
      * @default 'single'
      */
     set selection(_selection) {
@@ -3847,8 +3835,8 @@ class MultiViewCalendarComponent {
     }
     /**
      * Specifies whether the component is disabled
-     * ([see example]({% slug disabled_multiviewcalendar %})).
-     * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_multiviewcalendar#toc-managing-the-multiviewcalendar-disabled-state-in-reactive-forms).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/disabled-state)).
+     * 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/dateinputs/multiviewcalendar/forms#managing-the-multiviewcalendar-disabled-state-in-reactive-forms).
      *
      * @default false
      */
@@ -3882,7 +3870,7 @@ class MultiViewCalendarComponent {
     isActive = false;
     /**
      * Specifies the dates of the MultiViewCalendar that will be disabled
-     * ([see example]({% slug disabled_dates_multiviewcalendar %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/disabled-dates)).
      */
     set disabledDates(value) {
         this.disabledDatesService.initialize(value);
@@ -3924,7 +3912,7 @@ class MultiViewCalendarComponent {
     animateNavigation = false;
     /**
      * Specifies whether to display a week number column in the `month` view
-     * ([see example]({% slug weeknumcolumn_multiviewcalendar %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/week-num-column)).
      *
      * @default false
      */
@@ -3944,7 +3932,7 @@ class MultiViewCalendarComponent {
     /**
      * Specifies the `selectionRange` property and
      * defines the selection range of the component
-     * ([see example](slug:selection_multiviewcalendar#toc-range-selection)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/selection-modes#range-selection)).
      * > We recommend using the `value` property as it now supports `range` selection.
      */
     set selectionRange(range) {
@@ -3973,27 +3961,27 @@ class MultiViewCalendarComponent {
     orientation = 'horizontal';
     /**
      * Fires when the active view is changed
-     * ([see example](slug:events_multiviewcalendar)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/events)).
      */
     activeViewChange = new EventEmitter();
     /**
      * Fires when navigating in the currently active view
-     * ([see example](slug:events_multiviewcalendar)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/events)).
      */
     navigate = new EventEmitter();
     /**
      * Fires when a view cell is entered
-     * ([see example](slug:events_multiviewcalendar)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/events)).
      */
     cellEnter = new EventEmitter();
     /**
      * Fires when a view cell is leaved
-     * ([see example](slug:events_multiviewcalendar)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/events)).
      */
     cellLeave = new EventEmitter();
     /**
      * Fires when the value is changed
-     * ([see example](slug:events_multiviewcalendar)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/events)).
      */
     valueChange = new EventEmitter();
     /**
@@ -4003,12 +3991,12 @@ class MultiViewCalendarComponent {
     rangeSelectionChange = new EventEmitter();
     /**
      * Fires each time the MultiViewCalendar gets blurred
-     * ([see example](slug:events_multiviewcalendar)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/events)).
      */
     blurEvent = new EventEmitter();
     /**
      * Fires each time the MultiViewCalendar gets focused
-     * ([see example](slug:events_multiviewcalendar)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/events)).
      */
     focusEvent = new EventEmitter();
     /**
@@ -4684,7 +4672,9 @@ class MultiViewCalendarComponent {
     }
     setClasses(element) {
         this.renderer.addClass(element, 'k-calendar');
-        this.renderer.addClass(element, getSizeClass('calendar', this.size));
+        if (this.size) {
+            this.renderer.addClass(element, getSizeClass('calendar', this.size));
+        }
         if (this.views >= 2) {
             this.renderer.addClass(element, 'k-calendar-range');
         }
@@ -4837,13 +4827,13 @@ class MultiViewCalendarComponent {
     <ng-container kendoMultiViewCalendarLocalizedMessages
       i18n-today="kendo.multiviewcalendar.today|The label for the today button in the calendar header"
       today="Today"
-    
+
       i18n-prevButtonTitle="kendo.multiviewcalendar.prevButtonTitle|The label for the previous button in the Multiview calendar"
       prevButtonTitle="Navigate to previous view"
-    
+
       i18n-nextButtonTitle="kendo.multiviewcalendar.nextButtonTitle|The label for the next button in the Multiview calendar"
       nextButtonTitle="Navigate to next view"
-    
+
       i18n-parentViewButtonTitle="kendo.multiviewcalendar.parentViewButtonTitle|The title of the parent view button in the Multiview calendar header"
       parentViewButtonTitle="Navigate to parent view"
       >
@@ -4935,13 +4925,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
     <ng-container kendoMultiViewCalendarLocalizedMessages
       i18n-today="kendo.multiviewcalendar.today|The label for the today button in the calendar header"
       today="Today"
-    
+
       i18n-prevButtonTitle="kendo.multiviewcalendar.prevButtonTitle|The label for the previous button in the Multiview calendar"
       prevButtonTitle="Navigate to previous view"
-    
+
       i18n-nextButtonTitle="kendo.multiviewcalendar.nextButtonTitle|The label for the next button in the Multiview calendar"
       nextButtonTitle="Navigate to next view"
-    
+
       i18n-parentViewButtonTitle="kendo.multiviewcalendar.parentViewButtonTitle|The title of the parent view button in the Multiview calendar header"
       parentViewButtonTitle="Navigate to parent view"
       >
@@ -5192,10 +5182,10 @@ const tbody = domContainerFactory('tbody');
 const thead = domContainerFactory('thead');
 const table = domContainerFactory('table');
 const monthHeader = () => (div$1(`
-            <span class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-calendar-title">March 2017</span>
+            <span class="k-button k-button-flat k-calendar-title">March 2017</span>
             <span class="k-spacer"></span>
             <span class="k-calendar-nav">
-                <button class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-base k-rounded-md">TODAY</button>
+                <button class="k-calendar-nav-today k-button k-button-flat k-button-flat-base">TODAY</button>
             </span>
         `, 'k-calendar-header'));
 const monthWeekHeader = () => (table([
@@ -5205,7 +5195,7 @@ const monthWeekHeader = () => (table([
 ], 'k-calendar-weekdays k-calendar-table'));
 const repeat = (count, mapper) => new Array(count).fill('1').map(mapper);
 const content = (rows, cells = 1) => (table([
-    tbody([tr([th('1', 'k-calendar-th')], 'k-calendar-tr')].concat(repeat(rows, () => tr(repeat(cells, c => td(`<span class="k-link">${c}</span>`, 'k-calendar-td')), 'k-calendar-tr'))), 'k-calendar-tbody')
+    tbody([tr([th('1', 'k-calendar-th k-calendar-caption')], 'k-calendar-tr')].concat(repeat(rows, () => tr(repeat(cells, c => td(`<span class="k-link">${c}</span>`, 'k-calendar-td')), 'k-calendar-tr'))), 'k-calendar-tbody')
 ], 'k-calendar-table'));
 const scrollable$1 = (children) => div$1(children, 'k-flex k-content k-scrollable');
 const view = (contentElement, className, renderWeekHeader) => (div$1([
@@ -6643,7 +6633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * - `date` - The Date object representing the current navigation context
  * - `activeView` - The current active view of the Calendar
  *
- * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
+ * For more examples, refer to the article on [templates](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/templates).
  *
  * @example
  * ```html
@@ -6692,7 +6682,7 @@ class PickerService {
  * </kendo-multiviewcalendar-messages>
  * ```
  *
- * For more information, see the [globalization documentation]({% slug globalization_dateinputs %}#toc-custom-messages).
+ * For more information, see the [globalization documentation](https://www.telerik.com/kendo-angular-ui/components/dateinputs/globalization#custom-messages).
  */
 class MultiViewCalendarCustomMessagesComponent extends Messages {
     service;
@@ -6796,11 +6786,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1$1.LocalizationService }] });
 
-const BOTTOM_VIEW_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-bottomview';
-const TOP_VIEW_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-topview';
-const MIN_DOC_LINK$2 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-min';
-const MAX_DOC_LINK$2 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent/#toc-max';
-const VALUE_DOC_LINK$4 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/#toc-using-with-json';
+const BOTTOM_VIEW_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent#bottomview';
+const TOP_VIEW_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent#topview';
+const MIN_DOC_LINK$2 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent#min';
+const MAX_DOC_LINK$2 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/CalendarComponent#max';
+const VALUE_DOC_LINK$4 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar#using-with-json';
 const virtualizationProp = x => x ? x.virtualization : null;
 /**
  * @hidden
@@ -6826,7 +6816,7 @@ const KENDO_INPUT_PROVIDER = {
     useExisting: forwardRef(() => CalendarComponent)
 };
 /**
- * Represents the [Kendo UI Calendar component for Angular](slug:overview_calendar).
+ * Represents the [Kendo UI Calendar component for Angular](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar).
  * @example
  * ```html
  * <kendo-calendar></kendo-calendar>
@@ -6850,7 +6840,7 @@ class CalendarComponent {
     selectionService;
     pickerService;
     /**
-     * Shows days that fall outside the current month and the default values per Calendar type are false for infinite and true for classic ([see example]({% slug viewoptions_calendar %}#toc-displaying-other-month-days)).
+     * Shows days that fall outside the current month and the default values per Calendar type are false for infinite and true for classic ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/view-options#displaying-other-month-days)).
      */
     set showOtherMonthDays(_showOtherMonthDays) {
         this._showOtherMonthDays = _showOtherMonthDays;
@@ -6874,7 +6864,7 @@ class CalendarComponent {
     }
     /**
      * Specifies the focused date of the Calendar
-     * ([see example]({% slug dates_calendar %}#toc-focused-dates)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/dates#focused-dates)).
      *
      * If the Calendar is outside the `min` or `max` range, the component normalizes the defined `focusedDate`.
      */
@@ -6907,7 +6897,7 @@ class CalendarComponent {
     }
     /**
      * Specifies the minimum allowed date value
-     * ([see example]({% slug dateranges_calendar %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/date-ranges)).
      *
      * @default 1900-1-1
      */
@@ -6919,7 +6909,7 @@ class CalendarComponent {
     }
     /**
      * Specifies the maximum allowed date value
-     * ([see example]({% slug dateranges_calendar %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/date-ranges)).
      *
      * @default 2099-12-31
      */
@@ -6949,7 +6939,7 @@ class CalendarComponent {
     footer = false;
     /**
      * Sets the Calendar selection mode
-     * ([see example]({% slug selection_calendar %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/selection-modes)).
      * @default 'single'
      */
     set selection(_selection) {
@@ -6982,8 +6972,8 @@ class CalendarComponent {
     /**
      * Sets or gets the `disabled` property of the Calendar and
      * determines whether the component is active
-     * ([see example]({% slug disabled_calendar %})).
-     * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_calendar#toc-managing-the-calendar-disabled-state-in-reactive-forms).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/disabled-state)).
+     * 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/dateinputs/calendar/forms#managing-the-calendar-disabled-state-in-reactive-forms).
      */
     disabled = false;
     /**
@@ -7005,7 +6995,7 @@ class CalendarComponent {
     }
     /**
      * Specifies the dates of the Calendar that will be disabled
-     * ([see example]({% slug disabled_dates_calendar %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/disabled-dates)).
      */
     set disabledDates(value) {
         this.disabledDatesService.initialize(value);
@@ -7016,15 +7006,15 @@ class CalendarComponent {
     }
     /**
      * Determines whether the navigation side-bar will be displayed
-     * ([see example]({% slug sidebar_calendar %})).
-     * Applies to the [`infinite`]({% slug api_dateinputs_calendarcomponent %}#toc-type) Calendar only.
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/sidebar)).
+     * Applies to the [`infinite`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/calendarcomponent#type) Calendar only.
      *
      * @default true
      */
     navigation = true;
     /**
      * Defines the active view that the Calendar initially renders
-     * ([see example]({% slug viewoptions_calendar %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/view-options)).
      * You have to set `activeView` within the `topView`-`bottomView` range.
      *
      * @default 'month'
@@ -7032,14 +7022,14 @@ class CalendarComponent {
     activeView = CalendarViewEnum[CalendarViewEnum.month];
     /**
      * Defines the bottommost view to which the user can navigate
-     * ([see example](slug:viewdepth_calendar)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/view-depth)).
      *
      * @default 'month'
      */
     bottomView = CalendarViewEnum[CalendarViewEnum.month];
     /**
      * Defines the topmost view to which the user can navigate
-     * ([see example](slug:viewdepth_calendar)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/view-depth)).
      *
      * @default 'century'
      */
@@ -7061,7 +7051,7 @@ class CalendarComponent {
     }
     /**
      * Determines whether to enable animation when navigating to previous/next view.
-     * Applies to the [`classic`]({% slug api_dateinputs_calendarcomponent %}#toc-type) Calendar only.
+     * Applies to the [`classic`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/calendarcomponent#type) Calendar only.
      *
      * This feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
      *
@@ -7070,7 +7060,7 @@ class CalendarComponent {
     animateNavigation = false;
     /**
      * Determines whether to display a week number column in the `month` view
-     * ([see example]({% slug weeknumcolumn_calendar %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/week-num-column)).
      *
      * @default false
      */
@@ -7081,33 +7071,33 @@ class CalendarComponent {
     closePopup = new EventEmitter();
     /**
      * Fires when the active view is changed
-     * ([see example](slug:events_calendar)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/events)).
      */
     activeViewChange = new EventEmitter();
     /**
      * Fires when navigating in the currently active view
-     * ([see example](slug:events_calendar)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/events)).
      */
     navigate = new EventEmitter();
     /**
      * Fires when the active view date is changed
-     * ([see example](slug:events_calendar)).
-     * Applies to the [`infinite`]({% slug api_dateinputs_calendarcomponent %}#toc-type) Calendar only.
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/events)).
+     * Applies to the [`infinite`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/calendarcomponent#type) Calendar only.
      */
     activeViewDateChange = new EventEmitter();
     /**
      * Fires each time the Calendar gets blurred
-     * ([see example](slug:events_calendar)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/events)).
      */
     onBlur = new EventEmitter();
     /**
      * Fires each time the Calendar gets focused
-     * ([see example](slug:events_calendar)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/events)).
      */
     onFocus = new EventEmitter();
     /**
      * Fires when the value is changed
-     * ([see example](slug:events_calendar)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/events)).
      */
     valueChange = new EventEmitter();
     /**
@@ -7307,10 +7297,10 @@ class CalendarComponent {
      *
      * The possible values are:
      * * `small`
-     * * `medium` (Default)
+     * * `medium`
      * * `large`
-     * * `none`
      *
+     * @default undefined
      */
     set size(size) {
         this._size = size;
@@ -7318,7 +7308,7 @@ class CalendarComponent {
     get size() {
         return this._size;
     }
-    _size = DEFAULT_SIZE;
+    _size = undefined;
     /**
      * Specifies which end of the defined selection range should be marked as active.
      * Value will be ignored if the selection range is undefined. If range selection is used then the default value is 'start'.
@@ -7461,7 +7451,7 @@ class CalendarComponent {
     }
     ngAfterViewInit() {
         this.setAriaActivedescendant();
-        if (this.size !== 'none') {
+        if (this.size) {
             const element = this.type === 'infinite' ? this.element : this.multiViewCalendar.element;
             this.renderer.removeClass(element.nativeElement, getSizeClass('calendar', this.size));
             this.renderer.addClass(element.nativeElement, getSizeClass('calendar', this.size));
@@ -8045,13 +8035,13 @@ class CalendarComponent {
     <ng-container kendoCalendarLocalizedMessages
       i18n-today="kendo.calendar.today|The label for the today button in the calendar header"
       today="Today"
-    
+
       i18n-prevButtonTitle="kendo.calendar.prevButtonTitle|The title of the previous button in the Classic calendar"
       prevButtonTitle="Navigate to previous view"
-    
+
       i18n-nextButtonTitle="kendo.calendar.nextButtonTitle|The title of the next button in the Classic calendar"
       nextButtonTitle="Navigate to next view"
-    
+
       i18n-parentViewButtonTitle="kendo.calendar.parentViewButtonTitle|The title of the parent view button in the calendar header"
       parentViewButtonTitle="Navigate to parent view"
       >
@@ -8188,13 +8178,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
     <ng-container kendoCalendarLocalizedMessages
       i18n-today="kendo.calendar.today|The label for the today button in the calendar header"
       today="Today"
-    
+
       i18n-prevButtonTitle="kendo.calendar.prevButtonTitle|The title of the previous button in the Classic calendar"
       prevButtonTitle="Navigate to previous view"
-    
+
       i18n-nextButtonTitle="kendo.calendar.nextButtonTitle|The title of the next button in the Classic calendar"
       nextButtonTitle="Navigate to next view"
-    
+
       i18n-parentViewButtonTitle="kendo.calendar.parentViewButtonTitle|The title of the parent view button in the calendar header"
       parentViewButtonTitle="Navigate to parent view"
       >
@@ -8546,9 +8536,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }], ctorParameters: () => [{ type: i1$1.LocalizationService }] });
 
 let nextId = 0;
-const MIN_DOC_LINK$1 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DateInputComponent/#toc-min';
-const MAX_DOC_LINK$1 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DateInputComponent/#toc-max';
-const VALUE_DOC_LINK$3 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/#toc-using-with-json';
+const MIN_DOC_LINK$1 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DateInputComponent#min';
+const MAX_DOC_LINK$1 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DateInputComponent#max';
+const VALUE_DOC_LINK$3 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput#using-with-json';
 const TWO_DIGIT_YEAR_MAX$2 = 68;
 const DEFAULT_FORMAT$1 = 'd';
 const DEFAULT_FORMAT_PLACEHOLDER = 'wide';
@@ -8597,7 +8587,7 @@ class DateInputIntl {
     }
 }
 /**
- * Represents the [Kendo UI DateInput component for Angular](slug:overview_dateinput).
+ * Represents the [Kendo UI DateInput component for Angular](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput).
  *
  * ```html
  * <kendo-dateinput/>
@@ -8654,15 +8644,15 @@ class DateInputComponent {
     clearButton = false;
     /**
      * Specifies whether the component is disabled
-     * ([see example]({% slug disabled_dateinput %})).
-     * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_dateinput#toc-managing-the-dateinput-disabled-state-in-reactive-forms).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/disabled-state)).
+     * 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/dateinputs/dateinput/forms#managing-the-dateinput-disabled-state-in-reactive-forms).
      *
      * @default false
      */
     disabled = false;
     /**
      * Specifies the read-only state of the DateInput
-     * ([see example]({% slug readonly_dateinput %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/readonly-state)).
      *
      * @default false
      */
@@ -8702,7 +8692,7 @@ class DateInputComponent {
     isRequired = false;
     /**
      * Specifies the date format that is used to display the input value
-     * ([see example]({% slug formats_dateinput %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/formats)).
      *
      * You can provide a string if a single format is going to be used regardless whether the input is focused or blurred.
      * Alternatively, you can provide a FormatSettings object to display different formats when the component is focused or blurred by specifying inputFormat and displayFormat values.
@@ -8711,7 +8701,7 @@ class DateInputComponent {
     /**
      * Defines the descriptions of the format sections in the input field.
      * For more information, refer to the article on
-     * [placeholders]({% slug placeholders_dateinput %}).
+     * [placeholders](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/placeholders).
      */
     set formatPlaceholder(format) {
         this._formatPlaceholder = format || DEFAULT_FORMAT_PLACEHOLDER;
@@ -8722,25 +8712,25 @@ class DateInputComponent {
     /**
      * Specifies the hint the DateInput displays when its value is `null`.
      * For more information, refer to the article on
-     * [placeholders]({% slug placeholders_dateinput %}).
+     * [placeholders](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/placeholders).
      */
     placeholder;
     /**
      * Configures the incremental steps of the DateInput.
      * For more information, refer to the article on
-     * [incremental steps]({% slug incrementalsteps_dateinput %}).
+     * [incremental steps](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/incremental-steps).
      */
     steps = {};
     /**
      * Specifies the biggest date that is valid
-     * ([see example]({% slug dateranges_dateinput %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/date-ranges)).
      *
      * @default 2099-12-31
      */
     max = cloneDate(MAX_DATE);
     /**
      * Specifies the smallest date that is valid
-     * ([see example]({% slug dateranges_dateinput %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/date-ranges)).
      *
      * @default 1900-1-1
      */
@@ -8792,7 +8782,7 @@ class DateInputComponent {
     incompleteDateValidation = false;
     /**
      * The maximum year to assume to be from the current century when typing two-digit year value
-     * ([see example]({% slug formats_dateinput %}#toc-two-digit-year-format)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/formats#two-digit-year-format)).
      *
      * The default value is 68, indicating that typing any value less than 69
      * will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
@@ -8822,7 +8812,7 @@ class DateInputComponent {
     /**
      * Specifies whether the **Up** and **Down** spin buttons will be rendered.
      * For more information, refer to the article on
-     * [spinner buttons]({% slug spinbuttons_dateinput %}).
+     * [spinner buttons](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/spin-buttons).
      *
      * @default false
      */
@@ -8838,16 +8828,15 @@ class DateInputComponent {
     /**
      * Specifies the size of the component.
      *
-     * @default medium
+     * @default undefined
      *
      */
     set size(size) {
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
-        const newSize = size || DEFAULT_SIZE;
-        if (newSize !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
+        if (size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
         }
-        this._size = newSize;
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -8858,30 +8847,28 @@ class DateInputComponent {
      */
     set rounded(rounded) {
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        const newRounded = rounded || DEFAULT_ROUNDED;
-        if (newRounded !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
         }
-        this._rounded = newRounded;
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
     }
     /**
      * Specifies the fillMode of the component.
-     * @default 'solid'
+     * @default undefined
      */
     set fillMode(fillMode) {
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
-        const newFillMode = fillMode || DEFAULT_FILL_MODE;
-        if (newFillMode !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
+        if (fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
             if (this.spinners && this.spinup && this.spindown) {
-                this.setSpinnerFill(this.spinup.nativeElement, newFillMode, this.fillMode);
-                this.setSpinnerFill(this.spindown.nativeElement, newFillMode, this.fillMode);
+                this.setSpinnerFill(this.spinup.nativeElement, fillMode, this.fillMode);
+                this.setSpinnerFill(this.spindown.nativeElement, fillMode, this.fillMode);
             }
         }
-        this._fillMode = newFillMode;
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -8904,23 +8891,23 @@ class DateInputComponent {
     }
     /**
      * Fires each time the user selects a new value
-     * ([see example](slug:events_dateinput)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/events)).
      */
     valueChange = new EventEmitter();
     /**
      * @hidden
      * Fires each time the user selects a new value
-     * ([see example](slug:events_dateinput)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/events)).
      */
     valueUpdate = new EventEmitter();
     /**
      * Fires each time the user focuses the input element
-     * ([see example](slug:events_dateinput)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/events)).
      */
     onFocus = new EventEmitter();
     /**
      * Fires each time the input element gets blurred
-     * ([see example](slug:events_dateinput)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/dateinput/events)).
      */
     onBlur = new EventEmitter();
     /**
@@ -9011,9 +8998,9 @@ class DateInputComponent {
     onControlChange = noop$2;
     onControlTouched = noop$2;
     onValidatorChange = noop$2;
-    _size = DEFAULT_SIZE;
-    _rounded = DEFAULT_ROUNDED;
-    _fillMode = DEFAULT_FILL_MODE;
+    _size;
+    _rounded;
+    _fillMode;
     control;
     subs = new Subscription();
     _inputAttributes;
@@ -9375,24 +9362,24 @@ class DateInputComponent {
         }
     }
     setSpinnerFill(spinner, fill, oldFill) {
-        if (oldFill !== 'none') {
+        if (oldFill) {
             this.renderer.removeClass(spinner, `k-button-${oldFill}`);
-            this.renderer.removeClass(spinner, `k-button-${oldFill}-base`);
         }
-        this.renderer.addClass(spinner, `k-button-${fill}`);
-        this.renderer.addClass(spinner, `k-button-${fill}-base`);
+        if (fill) {
+            this.renderer.addClass(spinner, `k-button-${fill}`);
+        }
     }
     setComponentClasses() {
-        if (this.size !== 'none') {
+        if (this.size) {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
         }
-        if (this.rounded !== 'none') {
+        if (this.rounded) {
             this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
         }
-        if (this.fillMode !== 'none') {
+        if (this.fillMode) {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         }
-        if (this.spinners && this.fillMode !== 'none') {
+        if (this.spinners && this.fillMode) {
             this.setSpinnerFill(this.spinup.nativeElement, this.fillMode);
             this.setSpinnerFill(this.spindown.nativeElement, this.fillMode);
         }
@@ -9412,10 +9399,10 @@ class DateInputComponent {
     <ng-container kendoDateInputLocalizedMessages
       i18n-increment="kendo.dateinput.increment|The label for the **Increment** button in the DateInput"
       increment="Increase value"
-    
+
       i18n-decrement="kendo.dateinput.decrement|The label for the **Decrement** button in the DateInput"
       decrement="Decrease value"
-    
+
       i18n-clearTitle="kendo.dateinput.clearTitle|The title of the clear button"
       clearTitle="clear"
       >
@@ -9518,10 +9505,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
     <ng-container kendoDateInputLocalizedMessages
       i18n-increment="kendo.dateinput.increment|The label for the **Increment** button in the DateInput"
       increment="Increase value"
-    
+
       i18n-decrement="kendo.dateinput.decrement|The label for the **Decrement** button in the DateInput"
       decrement="Decrease value"
-    
+
       i18n-clearTitle="kendo.dateinput.clearTitle|The title of the clear button"
       clearTitle="clear"
       >
@@ -9760,7 +9747,7 @@ const disabledDatesValidator = (isDateDisabled) => {
  * </kendo-calendar-messages>
  * ```
  *
- * For more information, see the [globalization documentation]({% slug globalization_dateinputs %}#toc-custom-messages).
+ * For more information, see the [globalization documentation](https://www.telerik.com/kendo-angular-ui/components/dateinputs/globalization#custom-messages).
  */
 class CalendarCustomMessagesComponent extends CalendarMessages {
     service;
@@ -9796,7 +9783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 /**
  * Represents the Kendo UI DateInput custom messages component.
- * Overrides the default component messages with custom messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ * Overrides the default component messages with custom messages ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/globalization#custom-messages)).
  *
  * @example
  * ```ts
@@ -9934,14 +9921,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1$1.LocalizationService }] });
 
-const MIN_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent/#toc-min';
-const MAX_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent/#toc-max';
-const VALUE_DOC_LINK$2 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/#toc-using-with-json';
+const MIN_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent#min';
+const MAX_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent#max';
+const VALUE_DOC_LINK$2 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker#using-with-json';
 const DEFAULT_FORMAT = 'd';
 const TWO_DIGIT_YEAR_MAX$1 = 68;
 /**
  * Represents the Kendo UI DatePicker component for Angular.
- * Provides a user-friendly way to select dates with a calendar popup ([see example](slug:overview_datepicker)).
+ * Provides a user-friendly way to select dates with a calendar popup ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker)).
  *
  * @example
  * ```ts
@@ -10106,24 +10093,24 @@ class DatePickerComponent extends MultiTabStop {
      */
     weekDaysFormat = "short";
     /**
-     * Shows the days that fall outside the current month in the Calendar ([see example]({% slug viewoptions_calendar %}#toc-displaying-other-month-days)).
+     * Shows the days that fall outside the current month in the Calendar ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/view-options#displaying-other-month-days)).
      * The default value is `false` for infinite Calendar type and `true` for classic Calendar type.
      */
     showOtherMonthDays;
     /**
-     * Specifies the active view that the Calendar initially renders ([see example]({% slug viewoptions_calendar %}#toc-active-view)).
+     * Specifies the active view that the Calendar initially renders ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/view-options#active-view)).
      *
      * You have to set `activeView` within the `topView`-`bottomView` range.
      * @default 'month'
      */
     activeView = CalendarViewEnum[CalendarViewEnum.month];
     /**
-     * Specifies the bottommost Calendar view to which you can navigate ([see example](slug:datepicker_calendar_options#toc-view-selection-depth)).
+     * Specifies the bottommost Calendar view to which you can navigate ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/calendar-options#view-selection-depth)).
      * @default 'month'
      */
     bottomView = CalendarViewEnum[CalendarViewEnum.month];
     /**
-     * Specifies the topmost Calendar view to which you can navigate ([see example](slug:datepicker_calendar_options#toc-view-selection-depth)).
+     * Specifies the topmost Calendar view to which you can navigate ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/calendar-options#view-selection-depth)).
      * @default 'century'
      */
     topView = CalendarViewEnum[CalendarViewEnum.century];
@@ -10134,7 +10121,7 @@ class DatePickerComponent extends MultiTabStop {
     calendarType = 'infinite';
     /**
      * Determines whether to enable animation when navigating to previous/next Calendar view.
-     * Applies to the [`classic`]({% slug api_dateinputs_datepickercomponent %}#toc-calendartype) Calendar only.
+     * Applies to the [`classic`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/datepickercomponent#calendartype) Calendar only.
      *
      * This feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
      *
@@ -10142,21 +10129,21 @@ class DatePickerComponent extends MultiTabStop {
      */
     animateCalendarNavigation = false;
     /**
-     * Specifies or gets the `disabled` property of the DatePicker and determines whether the component is active ([see example]({% slug disabled_datepicker %})).
-     * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_datepicker#toc-managing-the-datepicker-disabled-state-in-reactive-forms).
+     * Specifies or gets the `disabled` property of the DatePicker and determines whether the component is active ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/disabled-state)).
+     * 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/dateinputs/datepicker/forms#managing-the-datepicker-disabled-state-in-reactive-forms).
      */
     disabled = false;
     /**
-     * Specifies the read-only state of the DatePicker ([see example]({% slug readonly_datepicker %}#toc-read-only-datepicker)).
+     * Specifies the read-only state of the DatePicker ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/readonly-state#read-only-datepicker)).
      *
      * @default false
      */
     readonly = false;
     /**
      * Sets the read-only state of the DatePicker input field
-     * ([see example]({% slug readonly_datepicker %}#toc-read-only-input)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/readonly-state#read-only-input)).
      *
-     * If you set the [`readonly`]({% slug api_dateinputs_datepickercomponent %}#toc-readonly) property value to `true`,
+     * If you set the [`readonly`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/datepickercomponent#readonly) property value to `true`,
      * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
      */
     readOnlyInput = false;
@@ -10176,7 +10163,7 @@ class DatePickerComponent extends MultiTabStop {
     /**
      * Sets or gets the `navigation` property of the Calendar
      * and determines whether the navigation side-bar is displayed.
-     * ([see example]({% slug sidebar_datepicker %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/sidebar)).
      */
     set navigation(state) {
         this._navigation = state;
@@ -10190,13 +10177,13 @@ class DatePickerComponent extends MultiTabStop {
     _navigation = true;
     /**
      * Specifies the smallest valid date
-     * ([see example]({% slug dateranges_datepicker %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/date-ranges)).
      * @default 1900-1-1
      */
     min = cloneDate(MIN_DATE);
     /**
      * Specifies the biggest valid date
-     * ([see example]({% slug dateranges_datepicker %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/date-ranges)).
      * @default 2099-12-31
      */
     max = cloneDate(MAX_DATE);
@@ -10241,7 +10228,7 @@ class DatePickerComponent extends MultiTabStop {
     autoFill = false;
     /**
      * Specifies the focused date of the Calendar component
-     * ([see example](slug:datepicker_calendar_options#toc-focused-dates)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/calendar-options#focused-dates)).
      * @default null
      */
     focusedDate = null;
@@ -10259,7 +10246,7 @@ class DatePickerComponent extends MultiTabStop {
     }
     /**
      * Specifies the date format that is used to display the input value
-     * ([see example]({% slug formats_datepicker %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/formats)).
      *
      * Format value options include string to provide a single format that is used regardless whether the input is focused or blurred.
      * FormatSettings can be used to display different formats when the component is focused or blurred by providing a settings object with specified inputFormat and displayFormat values.
@@ -10267,7 +10254,7 @@ class DatePickerComponent extends MultiTabStop {
     format = DEFAULT_FORMAT;
     /**
      * The maximum year to assume to be from the current century when typing two-digit year value
-     * ([see example]({% slug formats_datepicker %}#toc-two-digit-year-format)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/formats#two-digit-year-format)).
      *
      * The default value is 68, indicating that typing any value less than 69
      * will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
@@ -10276,13 +10263,13 @@ class DatePickerComponent extends MultiTabStop {
     twoDigitYearMax = TWO_DIGIT_YEAR_MAX$1;
     /**
      * Defines the descriptions of the format sections in the input field.
-     * ([more information and examples]({% slug placeholders_datepicker %})).
+     * ([more information and examples](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/placeholders)).
      *
      */
     formatPlaceholder;
     /**
      * Specifies the hint the DatePicker displays when its value is `null`.
-     * ([more information and exaples]({% slug placeholders_datepicker %})).
+     * ([more information and exaples](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/placeholders)).
      */
     placeholder;
     /**
@@ -10302,7 +10289,7 @@ class DatePickerComponent extends MultiTabStop {
     }
     /**
      * Sets the dates of the DatePicker that will be disabled
-     * ([see example]({% slug disabled_dates_datepicker %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/disabled-dates)).
      */
     set disabledDates(value) {
         this._disabledDates = value;
@@ -10313,13 +10300,13 @@ class DatePickerComponent extends MultiTabStop {
     }
     /**
      * Sets the title of the input element of the DatePicker and the title text rendered
-     * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode).
      * @default ""
      */
     adaptiveTitle = "";
     /**
      * Sets the subtitle text rendered in the header of the popup(action sheet).
-     * Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * Applicable only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode).
      * @default ""
      */
     adaptiveSubtitle = "";
@@ -10332,63 +10319,59 @@ class DatePickerComponent extends MultiTabStop {
     /**
      * Determines whether the built-in validator for disabled
      * date ranges is enforced when validating a form
-     * ([see example]( slug:disabled_dates_datepicker#toc-using-a-function)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/disabled-dates#using-a-function)).
      * @default true
      */
     disabledDatesValidation = true;
     /**
      * Determines whether to display a week number column in the `month` view of the Calendar
-     * ([see example](slug:datepicker_calendar_options#toc-week-number-column)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/calendar-options#week-number-column)).
      * @default false
      */
     weekNumber = false;
     /**
      * Sets the size of the component.
-     * @default 'medium'
+     * @default undefined
      */
     set size(size) {
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
         this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('button', this.size));
-        const newSize = size || DEFAULT_SIZE;
-        if (newSize !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
-            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', newSize));
+        if (size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
+            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', size));
         }
-        this._size = newSize;
+        this._size = size;
     }
     get size() {
         return this._size;
     }
     /**
      * Specifies the border radius of the component.
-     * @default 'medium'
+     * @default undefined
      */
     set rounded(rounded) {
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        const newRounded = rounded || DEFAULT_ROUNDED;
-        if (newRounded !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
         }
-        this._rounded = newRounded;
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
     }
     /**
      * Specifies the fillMode of the component.
-     * @default 'solid'
+     *
+     * @default undefined
      */
     set fillMode(fillMode) {
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
-        this.renderer.removeClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
-        if (newFillMode !== 'none') {
-            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', newFillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${newFillMode}-base`);
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
+        if (fillMode) {
+            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
         }
-        this._fillMode = newFillMode;
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -10401,28 +10384,28 @@ class DatePickerComponent extends MultiTabStop {
     adaptiveMode = 'none';
     /**
      * Fires each time the user selects a new value
-     * ([see example](slug:events_datepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/events)).
      */
     valueChange = new EventEmitter();
     /**
      * Fires each time the user focuses the input element
-     * ([see example](slug:events_datepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/events)).
      */
     onFocus = new EventEmitter();
     /**
      * Fires each time the input element gets blurred
-     * ([see example](slug:events_datepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/events)).
      */
     onBlur = new EventEmitter();
     /**
      * Fires each time the popup is about to open
-     * ([see example](slug:events_datepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/events)).
      * This event is preventable. If you cancel the event, the popup will remain closed.
      */
     open = new EventEmitter();
     /**
      * Fires each time the popup is about to close
-     * ([see example](slug:events_datepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/events)).
      * This event is preventable. If you cancel the event, the popup will remain open.
      */
     close = new EventEmitter();
@@ -10521,9 +10504,9 @@ class DatePickerComponent extends MultiTabStop {
     ariaActiveDescendantSubscription;
     control;
     domEvents = [];
-    _size = DEFAULT_SIZE;
-    _rounded = DEFAULT_ROUNDED;
-    _fillMode = DEFAULT_FILL_MODE;
+    _size;
+    _rounded;
+    _fillMode;
     constructor(zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, disabledDatesService, adaptiveService) {
         super();
         this.zone = zone;
@@ -11030,7 +11013,6 @@ class DatePickerComponent extends MultiTabStop {
         if (this.fillMode) {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
             this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: DisabledDatesService }, { token: i6.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
@@ -11097,9 +11079,6 @@ class DatePickerComponent extends MultiTabStop {
           [enableMouseWheel]="enableMouseWheel"
           [allowCaretMode]="allowCaretMode"
           [autoFill]="autoFill"
-          fillMode="none"
-          rounded="none"
-          size="none"
           [inputAttributes]="inputAttributes"
           [value]="value"
           (valueChange)="handleInputChange($event)"
@@ -11310,9 +11289,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
           [enableMouseWheel]="enableMouseWheel"
           [allowCaretMode]="allowCaretMode"
           [autoFill]="autoFill"
-          fillMode="none"
-          rounded="none"
-          size="none"
           [inputAttributes]="inputAttributes"
           [value]="value"
           (valueChange)="handleInputChange($event)"
@@ -13354,11 +13330,11 @@ class TimeSelectorComponent {
           </span>
           @if (showNowButton) {
             <button
-              #now
-              type="button"
-              class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary k-time-now"
-              [attr.title]="localization.get('nowLabel')"
-              [attr.aria-label]="localization.get('nowLabel')"
+                #now
+                type="button"
+                class="k-button k-button-flat k-button-primary k-time-now"
+                [attr.title]="localization.get('nowLabel')"
+                [attr.aria-label]="localization.get('nowLabel')"
                 [kendoEventsOutsideAngular]="{
                     click: handleNow,
                     focus: handleFocus,
@@ -13413,7 +13389,7 @@ class TimeSelectorComponent {
               <button
                 #accept
                 type="button"
-                class="k-button k-time-accept k-button-md k-rounded-md k-button-solid k-button-solid-primary"
+                class="k-button k-time-accept k-button-primary"
                 [attr.title]="localization.get('acceptLabel')"
                 [attr.aria-label]="localization.get('acceptLabel')"
                 [kendoEventsOutsideAngular]="{
@@ -13429,7 +13405,7 @@ class TimeSelectorComponent {
             @if (cancelButton) {
               <button
                 #cancel
-                class="k-button k-time-cancel k-button-md k-rounded-md k-button-solid k-button-solid-base"
+                class="k-button k-time-cancel"
                 type="button"
                 [attr.title]="localization.get('cancelLabel')"
                 [attr.aria-label]="localization.get('cancelLabel')"
@@ -13487,11 +13463,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
           </span>
           @if (showNowButton) {
             <button
-              #now
-              type="button"
-              class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary k-time-now"
-              [attr.title]="localization.get('nowLabel')"
-              [attr.aria-label]="localization.get('nowLabel')"
+                #now
+                type="button"
+                class="k-button k-button-flat k-button-primary k-time-now"
+                [attr.title]="localization.get('nowLabel')"
+                [attr.aria-label]="localization.get('nowLabel')"
                 [kendoEventsOutsideAngular]="{
                     click: handleNow,
                     focus: handleFocus,
@@ -13546,7 +13522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
               <button
                 #accept
                 type="button"
-                class="k-button k-time-accept k-button-md k-rounded-md k-button-solid k-button-solid-primary"
+                class="k-button k-time-accept k-button-primary"
                 [attr.title]="localization.get('acceptLabel')"
                 [attr.aria-label]="localization.get('acceptLabel')"
                 [kendoEventsOutsideAngular]="{
@@ -13562,7 +13538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             @if (cancelButton) {
               <button
                 #cancel
-                class="k-button k-time-cancel k-button-md k-rounded-md k-button-solid k-button-solid-base"
+                class="k-button k-time-cancel"
                 type="button"
                 [attr.title]="localization.get('cancelLabel')"
                 [attr.aria-label]="localization.get('cancelLabel')"
@@ -13723,13 +13699,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1$1.LocalizationService }] });
 
-const VALUE_DOC_LINK$1 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/#toc-integration-with-json';
+const VALUE_DOC_LINK$1 = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker#integration-with-json';
 const INTL_DATE_FORMAT = 'https://github.com/telerik/kendo-intl/blob/master/docs/date-formatting/index.md';
 const formatRegExp = new RegExp(`${TIME_PART.hour}|${TIME_PART.minute}|${TIME_PART.second}|${TIME_PART.millisecond}|${TIME_PART.dayperiod}|literal`);
 const ACCEPT_BUTTON_SELECTOR$1 = '.k-button.k-time-accept';
 const CANCEL_BUTTON_SELECTOR = '.k-button.k-time-cancel';
 /**
- * Represents the [Kendo UI TimePicker component for Angular](slug:overview_timepicker).
+ * Represents the [Kendo UI TimePicker component for Angular](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker).
  *
  * @example
  * ```typescript
@@ -13773,24 +13749,24 @@ class TimePickerComponent extends MultiTabStop {
     focusableId;
     /**
      * Determines whether the TimePicker is disabled
-     * ([see example]({% slug disabled_timepicker %})).
-     * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_timepicker#toc-managing-the-timepicker-disabled-state-in-reactive-forms).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/disabled-state)).
+     * 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/dateinputs/timepicker/forms#managing-the-timepicker-disabled-state-in-reactive-forms).
      *
      * @default false
      */
     disabled = false;
     /**
      * Determines the read-only state of the TimePicker
-     * ([see example]({% slug readonly_timepicker %}#toc-read-only-timepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/readonly-state#read-only-timepicker)).
      *
      * @default false
      */
     readonly = false;
     /**
      * Sets the read-only state of the TimePicker input field
-     * ([see example]({% slug readonly_timepicker %}#toc-read-only-input)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/readonly-state#read-only-input)).
      *
-     * If you set the [`readonly`]({% slug api_dateinputs_timepickercomponent %}#toc-readonly) property value to `true`,
+     * If you set the [`readonly`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/timepickercomponent#readonly) property value to `true`,
      * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
      * @default false
      */
@@ -13803,26 +13779,26 @@ class TimePickerComponent extends MultiTabStop {
     clearButton = false;
     /**
      * Specifies the time format that is used to display the input value
-     * ([see example]({% slug formats_timepicker %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/formats)).
      * @default 't'
      */
     format = 't';
     /**
      * Defines the descriptions of the format sections in the input field.
      * For more information, refer to the article on
-     * [placeholders]({% slug placeholders_timepicker %}).
+     * [placeholders](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/placeholders).
      */
     formatPlaceholder;
     /**
      * Specifies the hint the TimePicker displays when its value is `null`.
      * For more information, refer to the article on
-     * [placeholders]({% slug placeholders_timepicker %}).
+     * [placeholders](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/placeholders).
      * @default null
      */
     placeholder;
     /**
      * Specifies the smallest valid time value
-     * ([see example]({% slug timeranges_timepicker %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/time-ranges)).
      * @default `00:00:00`
      */
     set min(min) {
@@ -13833,7 +13809,7 @@ class TimePickerComponent extends MultiTabStop {
     }
     /**
      * Specifies the biggest valid time value
-     * ([see example]({% slug timeranges_timepicker %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/time-ranges)).
      * @default `23:59:59`
      */
     set max(max) {
@@ -13887,7 +13863,7 @@ class TimePickerComponent extends MultiTabStop {
     /**
      * Configures the incremental steps of the TimePicker.
      * For more information, refer to the article on
-     * [incremental steps]({% slug incrementalsteps_timepicker %}).
+     * [incremental steps](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/incremental-steps).
      *
      * If the incremental step is greater than `1`, the **Now** button will be hidden.
      */
@@ -13926,12 +13902,12 @@ class TimePickerComponent extends MultiTabStop {
     }
     /**
      * Sets the title of the input element of the TimePicker and the title text rendered
-     * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode).
      */
     adaptiveTitle = '';
     /**
      * Sets the subtitle text rendered in the header of the popup(action sheet).
-     * Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * Applicable only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode).
      * By default, subtitle is not rendered.
      */
     adaptiveSubtitle;
@@ -13960,52 +13936,47 @@ class TimePickerComponent extends MultiTabStop {
     }
     /**
      * Sets the size of the component.
-     * @default 'medium'
+     * @default undefined
      */
     set size(size) {
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
         this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('button', this.size));
-        const newSize = size ? size : DEFAULT_SIZE;
-        if (newSize !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
-            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', newSize));
+        if (size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
+            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', size));
         }
-        this._size = newSize;
+        this._size = size;
     }
     get size() {
         return this._size;
     }
     /**
      * Sets the rounded styling of the component.
-     * @default 'medium'
+     * @default undefined
      *
      */
     set rounded(rounded) {
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
-        if (newRounded !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
         }
-        this._rounded = newRounded;
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
     }
     /**
      * Sets the fillMode of the component.
-     * @default 'solid'
+     * @default undefined
      */
     set fillMode(fillMode) {
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
-        this.renderer.removeClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
-        if (newFillMode !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', newFillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${newFillMode}-base`);
+        if (fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
         }
-        this._fillMode = newFillMode;
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -14016,28 +13987,28 @@ class TimePickerComponent extends MultiTabStop {
     inputAttributes;
     /**
      * Fires each time the user selects a new value
-     * ([see example](slug:events_timepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/events)).
      */
     valueChange = new EventEmitter();
     /**
      * Fires each time the user focuses the input element
-     * ([see example](slug:events_timepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/events)).
      */
     onFocus = new EventEmitter();
     /**
      * Fires each time the input element gets blurred
-     * ([see example](slug:events_timepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/events)).
      */
     onBlur = new EventEmitter();
     /**
      * Fires each time the popup is about to open
-     * ([see example](slug:events_timepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/events)).
      * This event is preventable. If you cancel the event, the popup will remain closed.
      */
     open = new EventEmitter();
     /**
      * Fires each time the popup is about to close
-     * ([see example](slug:events_timepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/events)).
      * This event is preventable. If you cancel the event, the popup will remain open.
      */
     close = new EventEmitter();
@@ -14149,9 +14120,9 @@ class TimePickerComponent extends MultiTabStop {
     windowBlurSubscription;
     control;
     domEvents = [];
-    _size = DEFAULT_SIZE;
-    _rounded = DEFAULT_ROUNDED;
-    _fillMode = DEFAULT_FILL_MODE;
+    _size;
+    _rounded;
+    _fillMode;
     constructor(bus, zone, localization, cdr, popupService, wrapper, renderer, injector, pickerService, intl, adaptiveService) {
         super();
         this.bus = bus;
@@ -14695,7 +14666,6 @@ class TimePickerComponent extends MultiTabStop {
         if (this.fillMode) {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
             this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TimePickerComponent, deps: [{ token: BusViewService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i1$2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: PickerService }, { token: i1.IntlService }, { token: i6.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
@@ -14777,9 +14747,6 @@ class TimePickerComponent extends MultiTabStop {
           [autoSwitchKeys]="autoSwitchKeys"
           [enableMouseWheel]="enableMouseWheel"
           [allowCaretMode]="allowCaretMode"
-          fillMode="none"
-          rounded="none"
-          size="none"
           [steps]="steps"
           [tabindex]="!show ? tabindex : -1"
           [isRequired]="isControlRequired"
@@ -15020,9 +14987,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
           [autoSwitchKeys]="autoSwitchKeys"
           [enableMouseWheel]="enableMouseWheel"
           [allowCaretMode]="allowCaretMode"
-          fillMode="none"
-          rounded="none"
-          size="none"
           [steps]="steps"
           [tabindex]="!show ? tabindex : -1"
           [isRequired]="isControlRequired"
@@ -15459,8 +15423,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }], ctorParameters: () => [{ type: i1$1.LocalizationService }] });
 
 const timeFormatRegExp = new RegExp(`${TIME_PART.hour}|${TIME_PART.minute}|${TIME_PART.second}|${TIME_PART.dayperiod}|literal`);
-const VALUE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/integration-with-json/';
-const MIN_MAX_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/date-time-limits/';
+const VALUE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/integration-with-json';
+const MIN_MAX_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/date-time-limits';
 const DEFAULT_ACTIVE_TAB = 'date';
 const DEFAULT_DATEINPUT_FORMAT = 'g';
 const DEFAULT_TIMESELECTOR_FORMAT = 't';
@@ -15559,7 +15523,7 @@ class DateTimePickerComponent extends MultiTabStop {
      */
     weekDaysFormat = "short";
     /**
-     * Displays the days that fall out of the current month in the Calendar ([see example]({% slug datetimepicker_calendar_options %}#toc-displaying-other-month-days)).
+     * Displays the days that fall out of the current month in the Calendar ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/calendar-options#displaying-other-month-days)).
      * You can set this to show or hide days from other months.
      *
      * For infinite Calendar the default value is `false`, while for classic Calendar it is `true`.
@@ -15582,7 +15546,7 @@ class DateTimePickerComponent extends MultiTabStop {
     }
     /**
      * Specifies the date format for displaying the input value
-     * ([see example]({% slug formats_datetimepicker %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/formats)).
      *
      * When using a string format, the same format is applied regardless of whether the input is focused or blurred.
      * When using a FormatSettings object, you can specify different inputFormat and displayFormat values for focused and blurred states.
@@ -15599,7 +15563,7 @@ class DateTimePickerComponent extends MultiTabStop {
     }
     /**
      * The maximum year to assume to be from the current century when typing two-digit year value
-     * ([see example]({% slug formats_datetimepicker %}#toc-two-digit-year-format)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/formats#two-digit-year-format)).
      *
      * The default value is 68, indicating that typing any value less than 69
      * will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
@@ -15619,7 +15583,7 @@ class DateTimePickerComponent extends MultiTabStop {
     }
     /**
      * Sets the dates of the DateTimePicker that will be disabled
-     * ([see example]({% slug disabled_dates_datetimepicker %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/disabled-dates)).
      */
     set disabledDates(value) {
         this._disabledDates = value;
@@ -15630,7 +15594,7 @@ class DateTimePickerComponent extends MultiTabStop {
     }
     /**
      * Configures the popup settings of the DateTimePicker
-     * ([see example]({% slug datetimepicker_popup_options %}#toc-customizing-the-popup)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/popup-options#customizing-the-popup)).
      *
      * The available options are animate which controls the popup animation and by default, the open and close animations are enabled.
      * The `appendTo` option controls the popup container and by default, the popup will be appended to the root component.
@@ -15644,26 +15608,26 @@ class DateTimePickerComponent extends MultiTabStop {
     }
     /**
      * Specifies the title of the input element of the DateTimePicker and the title text rendered
-     * in the header of the popup (action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * in the header of the popup (action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode).
      * @default ''
      */
     adaptiveTitle = '';
     /**
      * Specifies the subtitle text rendered in the header of the popup (action sheet).
-     * Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * Applicable only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode).
      * @default ''
      */
     adaptiveSubtitle = '';
     /**
      * Specifies the `disabled` property of the DateTimePicker and determines whether the component is active
-     * ([see example]({% slug disabled_datetimepicker %})).
-     * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_datetimepicker#toc-managing-the-datetimepicker-disabled-state-in-reactive-forms).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/disabled-state)).
+     * 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/dateinputs/datetimepicker/forms#managing-the-datetimepicker-disabled-state-in-reactive-forms).
      * @default false
      */
     disabled = false;
     /**
      * Specifies the read-only state of the DateTimePicker
-     * ([see example]({% slug readonly_datetimepicker %}#toc-read-only-datetimepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/readonly-state#read-only-datetimepicker)).
      * @default false
      *
      * @default false
@@ -15671,9 +15635,9 @@ class DateTimePickerComponent extends MultiTabStop {
     readonly = false;
     /**
      * Determines whether the input field of the DateTimePicker is read-only
-     * ([see example]({% slug readonly_datetimepicker %}#toc-read-only-input)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/readonly-state#read-only-input)).
      *
-     * If you set the [`readonly`]({% slug api_dateinputs_datetimepickercomponent %}#toc-readonly) property value to `true`,
+     * If you set the [`readonly`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/datetimepickercomponent#readonly) property value to `true`,
      * the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
      *
      * @default false
@@ -15681,28 +15645,28 @@ class DateTimePickerComponent extends MultiTabStop {
     readOnlyInput = false;
     /**
      * Determines whether to display the **Cancel** button in the popup
-     * ([see example]({% slug datetimepicker_popup_options %}#toc-toggling-the-cancel-button)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/popup-options#toggling-the-cancel-button)).
      * @default true
      */
     cancelButton = true;
     /**
      * Defines the descriptions of the format sections in the input field
-     * ([see example]({% slug placeholders_datetimepicker %}#toc-format-sections-description)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/placeholders#format-sections-description)).
      */
     formatPlaceholder;
     /**
      * Specifies the hint which is displayed by the DateTimePicker when its value is `null`
-     * ([see example]({% slug placeholders_datetimepicker %}#toc-text-hints)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/placeholders#text-hints)).
      */
     placeholder;
     /**
      * Configures the incremental steps of the DateInput and the popup component of the TimePicker
-     * ([see example]({% slug incrementalsteps_datetimepicker %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/incremental-steps)).
      */
     steps = {};
     /**
      * Specifies the focused date of the popup Calendar
-     * ([see example]({% slug datetimepicker_calendar_options %}#toc-focused-dates)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/calendar-options#focused-dates)).
      */
     focusedDate;
     /**
@@ -15713,7 +15677,7 @@ class DateTimePickerComponent extends MultiTabStop {
     calendarType = 'infinite';
     /**
      * Determines whether to enable animation when navigating to previous/next Calendar view.
-     * Applies to the [`classic`]({% slug api_dateinputs_datetimepickercomponent %}#toc-calendartype) Calendar only.
+     * Applies to the [`classic`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/datetimepickercomponent#calendartype) Calendar only.
      *
      * The feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
      *
@@ -15722,7 +15686,7 @@ class DateTimePickerComponent extends MultiTabStop {
     animateCalendarNavigation = false;
     /**
      * Determines whether to display a week number column in the `month` view of the popup Calendar
-     * ([see example]({% slug datetimepicker_calendar_options %}#toc-week-number-column)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/calendar-options#week-number-column)).
      * @default false
      */
     weekNumber = false;
@@ -15731,7 +15695,7 @@ class DateTimePickerComponent extends MultiTabStop {
      * The Calendar will not display dates before this value.
      * If the `min` value of the Calendar is selected, the TimePicker will not display
      * time entries before the specified time portion of this value
-     * ([see example]({% slug dateranges_datetimepicker %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/date-time-limits)).
      */
     set min(value) {
         this._min = cloneDate(value);
@@ -15745,7 +15709,7 @@ class DateTimePickerComponent extends MultiTabStop {
      * The Calendar will not display dates after this value.
      * If the `max` value of the Calendar is selected, the TimePicker will not display
      * time entries after the specified time portion of this value
-     * ([see example]({% slug dateranges_datetimepicker %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/date-time-limits)).
      */
     set max(value) {
         this._max = cloneDate(value);
@@ -15756,14 +15720,14 @@ class DateTimePickerComponent extends MultiTabStop {
     }
     /**
      * Determines whether the built-in `min` or `max` validators are enforced when validating a form
-     * ([see example](slug:dateranges_datetimepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/date-time-limits)).
      *
      * @default true
      */
     rangeValidation = true;
     /**
      * Determines whether the built-in validator for disabled date ranges is enforced when validating a form
-     * ([see example](slug:disabled_dates_datetimepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/disabled-dates)).
      * @default true
      */
     disabledDatesValidation = true;
@@ -15823,29 +15787,29 @@ class DateTimePickerComponent extends MultiTabStop {
     inputAttributes;
     /**
      * Fires each time the user selects a new value
-     * ([see example](slug:events_datetimepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/events)).
      */
     valueChange = new EventEmitter();
     /**
      * Fires each time the popup is about to open
-     * ([see example](slug:events_datetimepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/events)).
      * This event is preventable. If you cancel the event by setting `event.preventDefault()`, the popup will remain closed.
      */
     open = new EventEmitter();
     /**
      * Fires each time the popup is about to close
-     * ([see example](slug:events_datetimepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/events)).
      * This event is preventable. If you cancel the event by setting `event.preventDefault()`, the popup will remain open.
      */
     close = new EventEmitter();
     /**
      * Fires each time the user focuses the component
-     * ([see example](slug:events_datetimepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/events)).
      */
     onFocus = new EventEmitter();
     /**
      * Fires each time the user blurs the component
-     * ([see example](slug:events_datetimepicker)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/events)).
      */
     onBlur = new EventEmitter();
     /**
@@ -15875,7 +15839,7 @@ class DateTimePickerComponent extends MultiTabStop {
     }
     /**
      * Specifies the active tab when opening the popup
-     * ([see example]({% slug datetimepicker_popup_options %}#toc-setting-the-default-tab)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datetimepicker/popup-options#setting-the-default-tab)).
      */
     set defaultTab(tab) {
         this._defaultTab = tab || DEFAULT_ACTIVE_TAB;
@@ -15887,16 +15851,16 @@ class DateTimePickerComponent extends MultiTabStop {
     /**
      * Specifies the size of the component.
      *
+     * @default undefined
      */
     set size(size) {
         this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
         this.renderer.removeClass(this.toggleButton.nativeElement, getSizeClass('button', this.size));
-        const newSize = size || DEFAULT_SIZE;
-        if (newSize !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', newSize));
-            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', newSize));
+        if (size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
+            this.renderer.addClass(this.toggleButton.nativeElement, getSizeClass('button', size));
         }
-        this._size = newSize;
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -15907,11 +15871,10 @@ class DateTimePickerComponent extends MultiTabStop {
      */
     set rounded(rounded) {
         this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
-        const newRounded = rounded || DEFAULT_ROUNDED;
-        if (newRounded !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(newRounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
         }
-        this._rounded = newRounded;
+        this._rounded = rounded;
     }
     get rounded() {
         return this._rounded;
@@ -15923,14 +15886,11 @@ class DateTimePickerComponent extends MultiTabStop {
     set fillMode(fillMode) {
         this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
-        this.renderer.removeClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
-        const newFillMode = fillMode || DEFAULT_FILL_MODE;
-        if (newFillMode !== 'none') {
-            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', newFillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${newFillMode}-base`);
+        if (fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', fillMode));
         }
-        this._fillMode = newFillMode;
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -16192,9 +16152,9 @@ class DateTimePickerComponent extends MultiTabStop {
     incompleteValidator = noop$2;
     subscriptions = new Subscription();
     ariaActiveDescendantSubscription;
-    _size = DEFAULT_SIZE;
-    _rounded = DEFAULT_ROUNDED;
-    _fillMode = DEFAULT_FILL_MODE;
+    _size;
+    _rounded;
+    _fillMode;
     constructor(popupService, intl, cdr, pickerService, ngZone, wrapper, localization, disabledDatesService, renderer, injector, adaptiveService) {
         super();
         this.popupService = popupService;
@@ -16894,7 +16854,6 @@ class DateTimePickerComponent extends MultiTabStop {
         if (this.fillMode) {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
             this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
-            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i1$2.PopupService }, { token: i1.IntlService }, { token: i0.ChangeDetectorRef }, { token: PickerService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i1$1.LocalizationService }, { token: DisabledDatesService }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i6.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
@@ -17013,9 +16972,6 @@ class DateTimePickerComponent extends MultiTabStop {
                 keydown: handleKeyDown
             }"
           [scope]="this"
-          fillMode="none"
-          rounded="none"
-          size="none"
           (click)="handleDateInputClick()"
           >
           <kendo-dateinput-messages
@@ -17143,10 +17099,7 @@ class DateTimePickerComponent extends MultiTabStop {
         <ng-template #dateTimeTemplate>
           <div
             class="k-datetime-wrap k-{{activeTab}}-tab"
-                [ngClass]="{
-                    'k-datetime-wrap-md': !isAdaptive,
-                    'k-datetime-wrap-lg': isAdaptive
-                }"
+                [class.k-datetime-wrap-lg]="isAdaptive"
                 [kendoEventsOutsideAngular]="{
                     mousedown: preventMouseDown,
                     keydown: handleKeyDown
@@ -17160,7 +17113,7 @@ class DateTimePickerComponent extends MultiTabStop {
                     }"
               [scope]="this"
               >
-              <div class="k-button-group k-button-group-solid k-button-group-stretched" role="group">
+              <div class="k-button-group k-button-group-stretched" role="group">
                 <button kendoButton
                   type="button"
                   class="k-group-start"
@@ -17443,9 +17396,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 keydown: handleKeyDown
             }"
           [scope]="this"
-          fillMode="none"
-          rounded="none"
-          size="none"
           (click)="handleDateInputClick()"
           >
           <kendo-dateinput-messages
@@ -17573,10 +17523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         <ng-template #dateTimeTemplate>
           <div
             class="k-datetime-wrap k-{{activeTab}}-tab"
-                [ngClass]="{
-                    'k-datetime-wrap-md': !isAdaptive,
-                    'k-datetime-wrap-lg': isAdaptive
-                }"
+                [class.k-datetime-wrap-lg]="isAdaptive"
                 [kendoEventsOutsideAngular]="{
                     mousedown: preventMouseDown,
                     keydown: handleKeyDown
@@ -17590,7 +17537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     }"
               [scope]="this"
               >
-              <div class="k-button-group k-button-group-solid k-button-group-stretched" role="group">
+              <div class="k-button-group k-button-group-stretched" role="group">
                 <button kendoButton
                   type="button"
                   class="k-group-start"
@@ -18183,7 +18130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 /**
  * Manages the MultiViewCalendar range selection.
  * This directive will be `deprecated` in a future version.
- * Use the MultiViewCalendar [range selection]({% slug selection_multiviewcalendar %}#toc-range-selection) instead.
+ * Use the MultiViewCalendar [range selection](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/selection-modes#range-selection) instead.
  */
 class DateRangeSelectionDirective {
     calendar;
@@ -18193,7 +18140,7 @@ class DateRangeSelectionDirective {
     /**
      * Specifies the auto-correction behavior. If the start date is greater than the end date,
      * the directive corrects the date range to a single date either on input change or on blur
-     * ([see example](slug:autocorrect_daterange#toc-calendar-selection-directive)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/autocorrect#calendar-selection-directive)).
      *
      * By default, the auto-correction triggers on change.
      * To disable this behavior, set the `autoCorrectOn` property to `none`.
@@ -18244,12 +18191,12 @@ class DateRangeSelectionDirective {
     shouldSetRange = true;
     /**
      * Fires when the active range end changes. For more information, refer to
-     * the section on [events](slug:events_multiviewcalendar).
+     * the section on [events](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/events).
      */
     activeRangeEndChange = new EventEmitter();
     /**
      * Fires when the selection range changes. For more information, refer to
-     * the section on [events](slug:events_multiviewcalendar).
+     * the section on [events](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/events).
      */
     selectionRangeChange = new EventEmitter();
     get calendarRange() {
@@ -18509,17 +18456,17 @@ class DateRangePopupComponent {
     showCalendarHeader = true;
     /**
      * Specifies the focused date of the MultiViewCalendar component.
-     * Defines which date receives focus when the component loads ([see example]({% slug dates_multiviewcalendar %}#toc-focused-dates)).
+     * Defines which date receives focus when the component loads ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/dates#focused-dates)).
      *
      * If the MultiViewCalendar is out of the min or max range, it normalizes the defined `focusedDate`.
      */
     focusedDate;
     /**
-     * Specifies the dates in the MultiViewCalendar that you want to disable ([see example]({% slug disabled_dates_multiviewcalendar %})).
+     * Specifies the dates in the MultiViewCalendar that you want to disable ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/disabled-dates)).
      */
     disabledDates;
     /**
-     * Specifies the initial view that the MultiViewCalendar displays when it loads ([see example]({% slug viewoptions_multiviewcalendar %})).
+     * Specifies the initial view that the MultiViewCalendar displays when it loads ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/view-options)).
      * By default, the active view is `month`.
      *
      * You have to set `activeView` within the `topView`-`bottomView` range.
@@ -18528,25 +18475,25 @@ class DateRangePopupComponent {
      */
     activeView = CalendarViewEnum[CalendarViewEnum.month];
     /**
-     * Specifies the lowest view level that users can navigate to ([see example](slug:viewdepth_multiviewcalendar)).
+     * Specifies the lowest view level that users can navigate to ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/view-depth)).
      *
      * @default 'month'
      */
     bottomView = CalendarViewEnum[CalendarViewEnum.month];
     /**
-     * Specifies the highest view level that users can navigate to ([see example](slug:viewdepth_multiviewcalendar)).
+     * Specifies the highest view level that users can navigate to ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/view-depth)).
      *
      * @default 'century'
      */
     topView = CalendarViewEnum[CalendarViewEnum.century];
     /**
-     * Specifies the minimum date that users can select ([see example]({% slug dates_multiviewcalendar %}#toc-focused-dates)).
+     * Specifies the minimum date that users can select ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/dates#focused-dates)).
      *
      * @default '1900-01-01'
      */
     min;
     /**
-     * Specifies the maximum date that users can select ([see example]({% slug dates_multiviewcalendar %}#toc-focused-dates)).
+     * Specifies the maximum date that users can select ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/dates#focused-dates)).
      *
      * @default '2099-12-31'
      */
@@ -18565,7 +18512,7 @@ class DateRangePopupComponent {
      */
     animateNavigation = false;
     /**
-     * Determines whether the MultiViewCalendar is interactive ([see example]({% slug disabled_multiviewcalendar %})).
+     * Determines whether the MultiViewCalendar is interactive ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/disabled-state)).
      * When you set `disabled` to `true`, users cannot interact with the component.
      *
      * @default false
@@ -18578,7 +18525,7 @@ class DateRangePopupComponent {
      */
     views = 2;
     /**
-     * Determines whether to display week numbers in the `month` view ([see example]({% slug weeknumcolumn_multiviewcalendar %})).
+     * Determines whether to display week numbers in the `month` view ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/week-num-column)).
      *
      * @default false
      */
@@ -18587,7 +18534,7 @@ class DateRangePopupComponent {
      * Controls the popup animations.
      * When you set `animate` to `true`, the popup displays opening and closing animations.
      * For more information about controlling the popup animations,
-     * refer to the article on [animations]({% slug animations_popup %}).
+     * refer to the article on [animations](https://www.telerik.com/kendo-angular-ui/components/popup/animations).
      *
      * @default true
      */
@@ -18596,24 +18543,24 @@ class DateRangePopupComponent {
      * Specifies the element that serves as an anchor for the popup.
      * The popup opens next to this element.
      * For more information, refer to the section on
-     * [aligning to specific components]({% slug alignmentpositioning_popup %}#toc-aligning-to-components).
+     * [aligning to specific components](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#aligning-to-components).
      */
     anchor;
     /**
      * Specifies the alignment point for the anchor element.
      * For more information, refer to the section on
-     * [positioning]({% slug alignmentpositioning_popup %}#toc-positioning).
+     * [positioning](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning).
      */
     anchorAlign;
     /**
-     * Determines whether to display a header for each view ([see example]({% slug viewheader_multiviewcalendar %})).
+     * Determines whether to display a header for each view ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/view-header)).
      * For example, displays the month name in the month view.
      *
      * @default false
      */
     showViewHeader = false;
     /**
-     * Determines whether to display days from adjacent months in the current month view ([see example]({% slug viewoptions_multiviewcalendar %}#toc-displaying-other-month-days)).
+     * Determines whether to display days from adjacent months in the current month view ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/multiviewcalendar/view-options#displaying-other-month-days)).
      *
      * @default false
      */
@@ -18628,7 +18575,7 @@ class DateRangePopupComponent {
     /**
      * Configures how the popup behaves when it encounters viewport boundaries.
      * For more information, refer to the article on
-     * [viewport boundary detection]({% slug viewportboundarydetection_popup %}).
+     * [viewport boundary detection](https://www.telerik.com/kendo-angular-ui/components/popup/viewport-boundary-detection).
      *
      * @default { horizontal: 'fit', vertical: 'flip' }
      */
@@ -18636,7 +18583,7 @@ class DateRangePopupComponent {
     /**
      * Specifies the alignment point for the popup element.
      * For more information, refer to the section on
-     * [positioning]({% slug alignmentpositioning_popup %}#toc-positioning).
+     * [positioning](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning).
      */
     popupAlign;
     /**
@@ -18653,14 +18600,14 @@ class DateRangePopupComponent {
     adaptiveMode = 'none';
     /**
      * Specifies the title text for the input element and the header of the action sheet.
-     * Applies only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * Applies only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode).
      *
      * @default ""
      */
     adaptiveTitle = "";
     /**
      * Specifies the subtitle text displayed in the header of the action sheet.
-     * Applies only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
+     * Applies only when [`AdaptiveMode` is set to `auto`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/adaptivemode).
      *
      * @default ""
      */
@@ -18670,29 +18617,29 @@ class DateRangePopupComponent {
      *
      * TODO: Make visible when the Infinite Calendar is fixed to set properly the size option.
      * Sets the size of the component.
-     * @default 'medium'
+     * @default undefined
      */
     size;
     /**
-     * Fires when the popup is about to open ([see example](slug:popup_daterange#toc-events)).
+     * Fires when the popup is about to open ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/popup#events)).
      * You can prevent this event to keep the popup closed.
      */
     open = new EventEmitter();
     /**
-     * Fires when the popup is about to close ([see example](slug:popup_daterange#toc-events)).
+     * Fires when the popup is about to close ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/popup#events)).
      * You can prevent this event to keep the popup open.
      */
     close = new EventEmitter();
     /**
-     * Fires when the calendar element loses focus ([see example](slug:popup_daterange#toc-events)).
+     * Fires when the calendar element loses focus ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/popup#events)).
      */
     onBlur = new EventEmitter();
     /**
-     * Fires when the calendar element receives focus ([see example](slug:popup_daterange#toc-events)).
+     * Fires when the calendar element receives focus ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/popup#events)).
      */
     onFocus = new EventEmitter();
     /**
-     * Fires when the popup closes due to an `ESC` keypress or when it leaves the viewport ([see example](slug:popup_daterange#toc-events)).
+     * Fires when the popup closes due to an `ESC` keypress or when it leaves the viewport ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/popup#events)).
      */
     cancel = new EventEmitter();
     /**
@@ -19088,16 +19035,16 @@ class DateRangePopupComponent {
         <ng-container kendoDateRangePopupLocalizedMessages
           i18n-accept="kendo.daterangepopup.accept|The Accept button text in the timepicker component"
           accept="Set"
-        
+
           i18n-acceptLabel="kendo.daterangepopup.acceptLabel|The label for the Accept button in the timepicker component"
           acceptLabel="Set time"
-        
+
           i18n-cancel="kendo.daterangepopup.cancel|The Cancel button text in the timepicker component"
           cancel="Cancel"
-        
+
           i18n-cancelLabel="kendo.daterangepopup.cancelLabel|The label for the Cancel button in the timepicker component"
           cancelLabel="Cancel changes"
-        
+
           i18n-adaptiveCloseButtonTitle="kendo.daterangepopup.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
           adaptiveCloseButtonTitle="Close"
           >
@@ -19130,7 +19077,7 @@ class DateRangePopupComponent {
             (rangeSelectionChange)="onRangeSelectionChange($event)"
           ></kendo-multiviewcalendar>
         </ng-template>
-        
+
         <kendo-actionsheet
           #actionSheet
           (overlayClick)="show=false"
@@ -19217,7 +19164,7 @@ class DateRangePopupComponent {
                 >
                 {{localization.get('cancel')}}
               </button>
-        
+
               <button kendoButton
                 class="k-time-accept"
                 type="button"
@@ -19250,16 +19197,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         <ng-container kendoDateRangePopupLocalizedMessages
           i18n-accept="kendo.daterangepopup.accept|The Accept button text in the timepicker component"
           accept="Set"
-        
+
           i18n-acceptLabel="kendo.daterangepopup.acceptLabel|The label for the Accept button in the timepicker component"
           acceptLabel="Set time"
-        
+
           i18n-cancel="kendo.daterangepopup.cancel|The Cancel button text in the timepicker component"
           cancel="Cancel"
-        
+
           i18n-cancelLabel="kendo.daterangepopup.cancelLabel|The label for the Cancel button in the timepicker component"
           cancelLabel="Cancel changes"
-        
+
           i18n-adaptiveCloseButtonTitle="kendo.daterangepopup.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
           adaptiveCloseButtonTitle="Close"
           >
@@ -19292,7 +19239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             (rangeSelectionChange)="onRangeSelectionChange($event)"
           ></kendo-multiviewcalendar>
         </ng-template>
-        
+
         <kendo-actionsheet
           #actionSheet
           (overlayClick)="show=false"
@@ -19379,7 +19326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 >
                 {{localization.get('cancel')}}
               </button>
-        
+
               <button kendoButton
                 class="k-time-accept"
                 type="button"
@@ -19520,7 +19467,7 @@ class DateRangeComponent {
      * TODO: Make visible when the Infinite Calendar is fixed to set properly the size option.
      * Sets the size of the component.
      *
-     * @default 'medium'
+     * @default undefined
      */
     size;
     /**
@@ -19749,7 +19696,7 @@ class DateRangeEndInputDirective extends DateRangeInput {
     rangeService;
     dateInput;
     /**
-     * Specifies the auto-correction behavior. If the start date is greater than the end date, the directive fixes the date range to a single date either on input change or on blur ([see example](slug:autocorrect_daterange#toc-input-directives)).
+     * Specifies the auto-correction behavior. If the start date is greater than the end date, the directive fixes the date range to a single date either on input change or on blur ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/autocorrect#input-directives)).
      *
      * By default, the component does not perform any auto-correction.
      *
@@ -19842,7 +19789,7 @@ class DateRangeStartInputDirective extends DateRangeInput {
     renderer;
     /**
      * Specifies when the component automatically corrects invalid date ranges.
-     * When the start date is greater than the end date, the component fixes the range to a single date either on input change or on blur ([see example](slug:autocorrect_daterange#toc-input-directives)).
+     * When the start date is greater than the end date, the component fixes the range to a single date either on input change or on blur ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/autocorrect#input-directives)).
      *
      * By default, the component does not perform any auto-correction.
      *
@@ -19907,7 +19854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /**
- * Allows you to override the default localization messages of the DatePicker component ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ * Allows you to override the default localization messages of the DatePicker component ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/globalization#custom-messages)).
  *
  * @example
  * ```html
@@ -19952,7 +19899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }], ctorParameters: () => [{ type: i1$1.LocalizationService }] });
 
 /**
- * Custom component messages override default component messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ * Custom component messages override default component messages ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/globalization#custom-messages)).
  */
 class DateRangePopupCustomMessagesComponent extends DateRangePopupMessages {
     service;
@@ -19987,7 +19934,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }], ctorParameters: () => [{ type: i1$1.LocalizationService }] });
 
 /**
- * Allows you to override the default messages of the DateTimePicker component ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ * Allows you to override the default messages of the DateTimePicker component ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/globalization#custom-messages)).
  *
  * @example
  * ```html
@@ -20031,7 +19978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }], ctorParameters: () => [{ type: i1$1.LocalizationService }] });
 
 /**
- * Represents the Kendo UI TimePicker custom messages component for Angular. Allows you to override default component messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
+ * Represents the Kendo UI TimePicker custom messages component for Angular. Allows you to override default component messages ([see example](https://www.telerik.com/kendo-angular-ui/components/dateinputs/globalization#custom-messages)).
  *
  * @example
  * ```html