@progress/kendo-angular-layout 22.1.0-develop.9 → 23.0.0-develop.1

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

@@ -30,7 +30,7 @@ const packageMetadata = {
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
     publishDate: 1645546576,
-    version: '22.1.0-develop.9',
+    version: '23.0.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -140,11 +140,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 /**
  * Defines the template directive of the PanelBar which helps to customize the item title
- * ([more information and example]({% slug templates_panelbar %}#toc-customizing-the-appearance-of-the-title)).
+ * ([more information and example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/templates#customizing-the-appearance-of-the-title)).
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoPanelBarItemTitle` directive inside the `<kendo-panelbar-item>` tag.
  *
- * The `kendoPanelBarItemTitle` directive overrides the PanelBarItem [title]({% slug api_layout_panelbaritemcomponent %}#toc-title) option.
+ * The `kendoPanelBarItemTitle` directive overrides the PanelBarItem [title](https://www.telerik.com/kendo-angular-ui/components/layout/api/panelbaritemcomponent#title) option.
  *
  * @example
  * ```html
@@ -185,7 +185,8 @@ const ROUNDNESS = {
     small: 'sm',
     medium: 'md',
     large: 'lg',
-    full: 'full'
+    full: 'full',
+    none: 'none',
 };
 const SHAPE_TO_ROUNDED = {
     rounded: 'large',
@@ -233,16 +234,18 @@ const isNavigationKey = keyCode => keyCode === Keys.PageUp || keyCode === Keys.P
  */
 const getStylingClasses = (componentType, stylingOption, previousValue, newValue) => {
     switch (stylingOption) {
-        case 'size':
+        case 'size': {
             return {
-                toRemove: `k-${componentType}-${SIZES[previousValue]}`,
-                toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
+                toRemove: previousValue && SIZES[previousValue] ? `k-${componentType}-${SIZES[previousValue]}` : null,
+                toAdd: newValue && SIZES[newValue] ? `k-${componentType}-${SIZES[newValue]}` : null
             };
-        case 'rounded':
+        }
+        case 'rounded': {
             return {
-                toRemove: `k-rounded-${ROUNDNESS[previousValue]}`,
-                toAdd: newValue !== 'none' ? `k-rounded-${ROUNDNESS[newValue]}` : ''
+                toRemove: previousValue && ROUNDNESS[previousValue] ? `k-rounded-${ROUNDNESS[previousValue]}` : null,
+                toAdd: newValue && ROUNDNESS[newValue] ? `k-rounded-${ROUNDNESS[newValue]}` : null
             };
+        }
         default:
             break;
     }
@@ -250,7 +253,7 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
 /**
  * @hidden
  */
-const mapShapeToRounded = (shape) => SHAPE_TO_ROUNDED[shape] || 'none';
+const mapShapeToRounded = (shape) => SHAPE_TO_ROUNDED[shape] || undefined;
 /**
  * @hidden
  */
@@ -320,7 +323,7 @@ class PanelBarItemComponent {
     element;
     renderer;
     /**
-     * Sets the title of the PanelBar item ([see example]({% slug items_panelbar %}#toc-titles)).
+     * Sets the title of the PanelBar item ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/items#titles)).
      */
     title;
     /**
@@ -329,21 +332,21 @@ class PanelBarItemComponent {
      */
     id = `default-${nextId++}`;
     /**
-     * Defines the icon that renders next to the title ([see example]({% slug items_panelbar %}#toc-title-icons)).
+     * Defines the icon that renders next to the title ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/items#title-icons)).
      *
      * @default ''
      */
     icon = '';
     /**
      * Defines the icon that renders next to the title by using a custom CSS class
-     * ([see example]({% slug items_panelbar %}#toc-title-icons)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/items#title-icons)).
      *
      * @default ''
      */
     iconClass = '';
     /**
      * Defines an SVG icon to render.
-     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * You can use either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     set svgIcon(icon) {
         if (isDevMode() && icon && this.icon && this.iconClass) {
@@ -356,19 +359,19 @@ class PanelBarItemComponent {
     }
     /**
      * Defines the location of the image that displays next to the title
-     * ([see example]({% slug items_panelbar %}#toc-title-images)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/items#title-images)).
      *
      * @default ''
      */
     imageUrl = '';
     /**
-     * When set to `true`, disables a PanelBar item ([see example]({% slug items_panelbar %}#toc-disabled-state)).
+     * When set to `true`, disables a PanelBar item ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/items#disabled-state)).
      *
      * @default false
      */
     disabled = false;
     /**
-     * When set to `true`, expands the PanelBar item ([see example]({% slug items_panelbar %}#toc-expanded-state)).
+     * When set to `true`, expands the PanelBar item ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/items#expanded-state)).
      */
     set expanded(value) {
         const activeState = this.animate ? "active" : "activeWithoutAnimation";
@@ -382,14 +385,14 @@ class PanelBarItemComponent {
         return this._expanded;
     }
     /**
-     * Sets the selected state of a PanelBar item ([see example]({% slug items_panelbar %}#toc-selected-state)).
+     * Sets the selected state of a PanelBar item ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/items#selected-state)).
      *
      * @default false
      */
     selected = false;
     /**
      * Sets the content of the PanelBar item.
-     * It is used when the [`items`]({% slug api_layout_panelbarcomponent %}#toc-items) property of the PanelBar is set.
+     * It is used when the [`items`](https://www.telerik.com/kendo-angular-ui/components/layout/api/panelbarcomponent#items) property of the PanelBar is set.
      */
     content;
     /**
@@ -1121,7 +1124,7 @@ class PanelBarItemClickEvent {
 
 /**
  * Represents the Kendo UI PanelBar component for Angular.
- * Displays hierarchical data as an expandable and collapsible accordion-style interface ([see overview]({% slug overview_panelbar %})).
+ * Displays hierarchical data as an expandable and collapsible accordion-style interface ([see overview](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar)).
  *
  * @example
  * ```typescript
@@ -1146,7 +1149,7 @@ class PanelBarItemClickEvent {
 class PanelBarComponent {
     localization;
     /**
-     * Sets the expand mode of the PanelBar through the `PanelBarExpandMode` enum ([see example]({% slug expandmodes_panelbar %})).
+     * Sets the expand mode of the PanelBar through the `PanelBarExpandMode` enum ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/expand-modes)).
      *
      * @default 'multiple
      */
@@ -1158,7 +1161,7 @@ class PanelBarComponent {
      */
     selectable = true;
     /**
-     * Sets the animate state of the PanelBar ([see example]({% slug animations_panelbar %})).
+     * Sets the animate state of the PanelBar ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/animations)).
      *
      * @default true
      */
@@ -1179,7 +1182,7 @@ class PanelBarComponent {
     * * `false`&mdash;Removes collapsed items' content from the DOM.
     * * `"loadOnDemand"`&mdash;Loads items' content only when expanded for the first time. Collapsed items' content is not rendered until the item is expanded.
     *
-    * For more information, refer to the [Rendering Modes](slug:rendering_panelbar) article.
+    * For more information, refer to the [Rendering Modes](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/rendering-modes) article.
     *
     * @default false
     */
@@ -1192,7 +1195,7 @@ class PanelBarComponent {
     }
     /**
      * Sets the items of the PanelBar as an array of `PanelBarItemModel` instances
-     * ([see example]({% slug items_panelbar %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/items)).
      */
     set items(data) {
         if (data) {
@@ -1205,30 +1208,30 @@ class PanelBarComponent {
     /**
      * Fires when the state of the PanelBar changes.
      * This event is triggered when an item is selected, expanded, or collapsed.
-     * ([see example](slug:routing_panelbar#using-router-service)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/routing#using-router-service)).
      * The event data contains a collection of all items that are modified.
      */
     stateChange = new EventEmitter();
     /**
      * Fires when an item is about to be selected.
      * This event is preventable. If you cancel it, the item will not be selected
-     * ([see example]({% slug events_panelbar %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/events)).
      */
     select = new EventEmitter();
     /**
      * Fires when an item is about to be expanded.
      * This event is preventable. If you cancel it, the item will remain collapsed
-     * ([see example]({% slug events_panelbar %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/events)).
      */
     expand = new EventEmitter();
     /**
      * Fires when an item is about to be collapsed.
      * This event is preventable. If you cancel it, the item will remain expanded
-     * ([see example]({% slug events_panelbar %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/events)).
      */
     collapse = new EventEmitter();
     /**
-     * Fires when an item is clicked ([see example]({% slug events_panelbar %})).
+     * Fires when an item is clicked ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/events)).
      */
     itemClick = new EventEmitter();
     hostClasses = true;
@@ -2671,9 +2674,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }] } });
 
-const SIZING_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/layout/splitter/panes/#specifying-the-dimensions';
+const SIZING_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/layout/splitter/panes#specifying-the-dimensions';
 /**
- * Represents the [Kendo UI Splitter component for Angular]({% slug overview_splitter %}).
+ * Represents the [Kendo UI Splitter component for Angular](https://www.telerik.com/kendo-angular-ui/components/layout/splitter).
  *
  * @example
  * ```html
@@ -2991,7 +2994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 /**
  * Represents the title template of the Kendo UI TabStrip.
  * To define the template, nest an `<ng-template>` tag with the `kendoTabTitle` directive inside the component tag.
- * The `kendoTabTitle` directive overrides the TabStripTab [`title`]({% slug api_layout_tabstriptabcomponent %}#toc-title) option.
+ * The `kendoTabTitle` directive overrides the TabStripTab [`title`](https://www.telerik.com/kendo-angular-ui/components/layout/api/tabstriptabcomponent#title) option.
  *
  * @example
  * ```html
@@ -3056,11 +3059,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  */
 class TabStripTabComponent {
     /**
-     * Sets the title text for the tab ([see example](slug:tabs_tabstrip#toc-tab-titles)).
+     * Sets the title text for the tab ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/tabs#tab-titles)).
      */
     title;
     /**
-     * Disables the tab and prevents user interaction ([see example]({% slug tabs_tabstrip %}#toc-disabled-tabs)).
+     * Disables the tab and prevents user interaction ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/tabs#disabled-tabs)).
      *
      * @default false
      */
@@ -3077,7 +3080,7 @@ class TabStripTabComponent {
     cssStyle;
     /**
      * Selects the tab when the TabStrip loads
-     * ([see example](slug:tabs_tabstrip#toc-selected-tab)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/tabs#selected-tab)).
      */
     selected;
     /**
@@ -3098,7 +3101,7 @@ class TabStripTabComponent {
     closeIconClass;
     /**
      * Sets an SVG icon for the close button.
-     * You can use an [existing Kendo SVG icon](slug:svgicon_list) or provide a custom one.
+     * You can use an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or provide a custom one.
      */
     closeSVGIcon;
     get tabContent() {
@@ -4095,7 +4098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }], ctorParameters: () => [{ type: i1.LocalizationService }] });
 
 /**
- * Represents the [Kendo UI TabStrip component for Angular]({% slug overview_tabstrip %}).
+ * Represents the [Kendo UI TabStrip component for Angular](https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip).
  *
  * @example
  * ```html
@@ -4160,7 +4163,7 @@ class TabStripComponent {
     * * `false`&mdash;Removes inactive tabs' content from the DOM.
     * * `"loadOnDemand"`&mdash;Loads tabs' content only when activated for the first time. Inactive tabs' content is not rendered until the tab is activated.
     *
-    * For more information, refer to the [Rendering Modes](slug:rendering_tabstrip) article.
+    * For more information, refer to the [Rendering Modes](https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/rendering-modes) article.
     *
     * @default false
     */
@@ -4191,8 +4194,8 @@ class TabStripComponent {
     }
     /**
      * Sets the size of the TabStrip.
-     * [See example](slug:api_layout_tabstripcomponent#toc-size).
-     * @default 'medium'
+     * [See example](https://www.telerik.com/kendo-angular-ui/components/layout/api/tabstripcomponent#size).
+     * @default undefined
      */
     set size(value) {
         switch (value) {
@@ -4211,10 +4214,6 @@ class TabStripComponent {
                 this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-sm');
                 this.renderer.addClass(this.wrapper.nativeElement, 'k-tabstrip-lg');
                 break;
-            case 'none':
-                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-md');
-                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-lg');
-                this.renderer.removeClass(this.wrapper.nativeElement, 'k-tabstrip-sm');
         }
         this._size = value;
         this.ngZone.onStable.pipe(take(1)).subscribe(() => this.onResize());
@@ -4233,7 +4232,7 @@ class TabStripComponent {
     closeIconClass;
     /**
      * Defines an SVGIcon to render for the close icon.
-     * The input accepts either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * The input accepts either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     set closeSVGIcon(icon) {
         if (isDevMode() && icon && this.closeIcon && this.closeIcon !== 'x') {
@@ -4327,7 +4326,7 @@ class TabStripComponent {
     tabStripId = guid();
     tabsChangesSub;
     activeStateChangeSub;
-    _size = 'medium';
+    _size;
     constructor(localization, renderer, wrapper, tabstripService, scrollService, ngZone) {
         this.localization = localization;
         this.renderer = renderer;
@@ -4582,7 +4581,7 @@ class TabStripComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TabStripService }, { token: ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", size: "size", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-tabstrip-md": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable", "class.k-tabstrip-scrollable-overlay": "this.tabStripScrollableOverlay" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", size: "size", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable", "class.k-tabstrip-scrollable-overlay": "this.tabStripScrollableOverlay" } }, providers: [
             TabStripService,
             ScrollService,
             LocalizationService,
@@ -4627,10 +4626,10 @@ class TabStripComponent {
                 [prev]="true"
                 [title]="localization.get('previousTabButton')"
                 (tabScroll)="tabScroll.emit($event)"
-                class="k-icon-button k-button k-button-flat k-button-flat-base"
+                class="k-icon-button k-button k-button-flat k-rounded-none"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
               (onClick)="onScrollButtonClick($event)"></span>
@@ -4645,10 +4644,10 @@ class TabStripComponent {
                 [prev]="false"
                 [title]="localization.get('nextTabButton')"
                 (tabScroll)="tabScroll.emit($event)"
-                class="k-icon-button k-button k-button-flat k-button-flat-base"
+                class="k-icon-button k-button k-button-flat k-rounded-none"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
               (onClick)="onScrollButtonClick($event)"></span>
@@ -4696,10 +4695,10 @@ class TabStripComponent {
                 [prev]="true"
                 [title]="localization.get('previousTabButton')"
                 (tabScroll)="tabScroll.emit($event)"
-                class="k-icon-button k-button k-button-flat k-button-flat-base"
+                class="k-icon-button k-button k-button-flat k-rounded-none"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
               (onClick)="onScrollButtonClick($event)"></span>
@@ -4714,10 +4713,10 @@ class TabStripComponent {
                 [prev]="false"
                 [title]="localization.get('nextTabButton')"
                 (tabScroll)="tabScroll.emit($event)"
-                class="k-icon-button k-button k-button-flat k-button-flat-base"
+                class="k-icon-button k-button k-button-flat k-rounded-none"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
               (onClick)="onScrollButtonClick($event)"></span>
@@ -4820,10 +4819,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 [prev]="true"
                 [title]="localization.get('previousTabButton')"
                 (tabScroll)="tabScroll.emit($event)"
-                class="k-icon-button k-button k-button-flat k-button-flat-base"
+                class="k-icon-button k-button k-button-flat k-rounded-none"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
               (onClick)="onScrollButtonClick($event)"></span>
@@ -4838,10 +4837,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 [prev]="false"
                 [title]="localization.get('nextTabButton')"
                 (tabScroll)="tabScroll.emit($event)"
-                class="k-icon-button k-button k-button-flat k-button-flat-base"
+                class="k-icon-button k-button k-button-flat k-rounded-none"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
               (onClick)="onScrollButtonClick($event)"></span>
@@ -4889,10 +4888,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 [prev]="true"
                 [title]="localization.get('previousTabButton')"
                 (tabScroll)="tabScroll.emit($event)"
-                class="k-icon-button k-button k-button-flat k-button-flat-base"
+                class="k-icon-button k-button k-button-flat k-rounded-none"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
               (onClick)="onScrollButtonClick($event)"></span>
@@ -4907,10 +4906,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 [prev]="false"
                 [title]="localization.get('nextTabButton')"
                 (tabScroll)="tabScroll.emit($event)"
-                class="k-icon-button k-button k-button-flat k-button-flat-base"
+                class="k-icon-button k-button k-button-flat k-rounded-none"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
               (onClick)="onScrollButtonClick($event)"></span>
@@ -4980,9 +4979,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-tabstrip']
-            }, {
-                type: HostBinding,
-                args: ['class.k-tabstrip-md']
             }], tabsAtTop: [{
                 type: HostBinding,
                 args: ['class.k-tabstrip-top']
@@ -5023,7 +5019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 /**
  * Represents the custom messages component for the TabStrip.
- * It allows you to override the default messages used in the TabStrip component ([see example]({% slug rtl_layout %})).
+ * It allows you to override the default messages used in the TabStrip component ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/globalization)).
  *
  * ```html
  * <kendo-tabstrip>
@@ -5841,7 +5837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const DEFAULT_ANIMATION = { type: 'slide', duration: 200 };
 /**
- * Represents the [Kendo UI Drawer component for Angular]({% slug overview_drawer %}).
+ * Represents the [Kendo UI Drawer component for Angular](https://www.telerik.com/kendo-angular-ui/components/layout/drawer).
  * Provides a dismissible or permanently visible panel for navigation in responsive web applications.
  *
  * @example
@@ -5908,14 +5904,14 @@ class DrawerComponent {
     mode = 'overlay';
     /**
      * Specifies the position of the Drawer
-     * ([see example]({% slug positioning_drawer %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/drawer/positioning)).
      *
      * @default 'start'
      */
     position = 'start';
     /**
      * Enables the mini (compact) view of the Drawer which displays when the component is collapsed
-     * ([see example]({% slug expandmodespositions_drawer %}#toc-mini-view)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/drawer/display-modes#mini-view)).
      *
      * @default false
      */
@@ -5969,7 +5965,7 @@ class DrawerComponent {
     direction;
     /**
      * Specifies the animation settings of the Drawer
-     * ([see example]({% slug interaction_drawer %}#toc-toggling-between-states)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/drawer/interaction-modes#toggling-between-states)).
      *
      * @default { type: 'slide', duration: 200 }
      */
@@ -6290,7 +6286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /**
- * Serves as a container for the [Drawer component]({% slug overview_drawer %}) and its content.
+ * Serves as a container for the [Drawer component](https://www.telerik.com/kendo-angular-ui/components/layout/drawer) and its content.
  *
  * @example
  * ```html
@@ -7368,7 +7364,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 const DEFAULT_ANIMATION_DURATION = 400;
 /**
- * Represents the [Kendo UI Stepper component for Angular]({% slug overview_stepper %}).
+ * Represents the [Kendo UI Stepper component for Angular](https://www.telerik.com/kendo-angular-ui/components/layout/stepper).
  *
  * @example
  * ```ts
@@ -7414,7 +7410,7 @@ class StepperComponent {
     linear = true;
     /**
      * Specifies the orientation of the Stepper
-     * ([see example]({% slug orientation_stepper %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/stepper/orientation)).
      *
      * @default 'horizontal'
      */
@@ -7430,7 +7426,7 @@ class StepperComponent {
     }
     /**
      * Specifies the collection of steps that will be rendered in the Stepper
-     * ([see example]({% slug step_appearance_stepper %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/stepper/step-appearance)).
      */
     set steps(steps) {
         if (isPresent(steps) && steps.length > 0) {
@@ -7442,7 +7438,7 @@ class StepperComponent {
     }
     /**
      * Specifies an SVG icon to be rendered inside the step indicator instead of the default numeric or text content.
-     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * You can use either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     set svgIcon(icon) {
         this._svgIcon = icon;
@@ -7452,22 +7448,22 @@ class StepperComponent {
     }
     /**
      * Specifies an SVG icon to be rendered for the success icon.
-     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * You can use either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     successSVGIcon;
     /**
      * Specifies an SVG icon to be rendered for the error icon.
-     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * You can use either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     errorSVGIcon;
     /**
      * Specifies an SVG icon that will be rendered inside the step for valid previous steps.
-     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * You can use either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     successIcon;
     /**
     * Specifies an SVG icon that will be rendered inside the step for invalid previous steps.
-    * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+    * You can use either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
     */
     errorIcon;
     /**
@@ -7530,9 +7526,9 @@ class StepperComponent {
         }
     }
     /**
-     * Manually triggers the validity check configured by the [isValid]({% slug api_layout_stepperstep %}#toc-isvalid) property of the steps ([see example]({% slug step_validation_stepper %}#toc-triggering-the-validation)).
+     * Manually triggers the validity check configured by the [isValid](https://www.telerik.com/kendo-angular-ui/components/layout/api/stepperstep#isvalid) property of the steps ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/stepper/step-validation#triggering-the-validation)).
      *
-     * Steps that have their [validate]({% slug api_layout_stepperstep %}#toc-validate) property set to `false`, will not be validated.
+     * Steps that have their [validate](https://www.telerik.com/kendo-angular-ui/components/layout/api/stepperstep#validate) property set to `false`, will not be validated.
      */
     validateSteps() {
         this.stepperService.validateSteps();
@@ -7648,7 +7644,7 @@ class StepperComponent {
           (listKeydown)="onListKeydown($event)"
           (listClick)="onListClick($event)">
         </ol>
-        
+
         @if (steps.length > 0) {
           <kendo-progressbar
             [attr.aria-hidden]='true'
@@ -7703,7 +7699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
           (listKeydown)="onListKeydown($event)"
           (listClick)="onListClick($event)">
         </ol>
-        
+
         @if (steps.length > 0) {
           <kendo-progressbar
             [attr.aria-hidden]='true'
@@ -7803,7 +7799,7 @@ class StepperActivateEvent extends PreventableEvent$1 {
 
 /**
  * Provides custom component messages that override default component messages
- * ([see example]({% slug rtl_layout %})).
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/globalization)).
  *
  * ```html
  * <kendo-stepper>
@@ -7898,10 +7894,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }] });
 
-const DEFAULT_ROUNDED = 'full';
-const DEFAULT_SIZE = 'medium';
-const DEFAULT_THEME_COLOR = 'primary';
-const DEFAULT_FILL_MODE = 'solid';
 /**
  * Represents the Kendo UI Avatar component for Angular. Displays images, icons, or initials representing people or other entities.
  *
@@ -7950,15 +7942,14 @@ class AvatarComponent {
     }
     /**
      * Specifies the size of the Avatar
-     * ([see example]({% slug appearance_avatar %}#toc-size)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/avatar/appearance#size)).
      *
-     * @default 'medium'
+     * @default undefined
      */
     set size(size) {
         if (size !== this._size) {
-            const newSize = size ? size : DEFAULT_SIZE;
-            this.handleClasses('size', newSize);
-            this._size = newSize;
+            this.handleClasses('size', size);
+            this._size = size;
         }
     }
     get size() {
@@ -7966,15 +7957,14 @@ class AvatarComponent {
     }
     /**
      * Specifies the rounded styling of the Avatar
-     * ([see example](slug:appearance_avatar#toc-roundness)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/avatar/appearance#roundness)).
      *
-     * @default 'full'
+     * @default undefined
      */
     set rounded(rounded) {
-        if (rounded !== this._rounded) {
-            const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
-            this.handleClasses('rounded', newRounded);
-            this._rounded = newRounded;
+        if (rounded !== this.rounded) {
+            this.handleClasses('rounded', rounded);
+            this._rounded = rounded;
         }
     }
     get rounded() {
@@ -7984,12 +7974,11 @@ class AvatarComponent {
      * Specifies the theme color of the Avatar.
      * The theme color applies as background and border color while adjusting the text color accordingly.
      *
-     * @default 'primary'
+     * @default undefined
      */
     set themeColor(themeColor) {
         if (themeColor !== this._themeColor) {
-            const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
-            this._themeColor = newThemeColor;
+            this._themeColor = themeColor;
             this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
         }
     }
@@ -7999,12 +7988,11 @@ class AvatarComponent {
     /**
      * Specifies the fill style of the Avatar.
      *
-     * @default 'solid'
+     * @default undefined
      */
     set fillMode(fillMode) {
         if (fillMode !== this.fillMode) {
-            const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
-            this._fillMode = newFillMode;
+            this._fillMode = fillMode;
             this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
         }
     }
@@ -8062,7 +8050,7 @@ class AvatarComponent {
     initials;
     /**
      * Sets the icon for the Avatar.
-     * All [Kendo UI Icons](slug:icons#icons-list) are supported.
+     * All [Kendo UI Icons](https://www.telerik.com/kendo-angular-ui/components/styling/icons#icons-list) are supported.
      */
     icon;
     /**
@@ -8071,7 +8059,7 @@ class AvatarComponent {
     imageSrc;
     /**
      * Defines an SVG icon to render.
-     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * You can use either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     set svgIcon(icon) {
         if (isDevMode() && icon && this.icon && this.iconClass) {
@@ -8082,11 +8070,12 @@ class AvatarComponent {
     get svgIcon() {
         return this._svgIcon;
     }
-    _themeColor = DEFAULT_THEME_COLOR;
-    _size = DEFAULT_SIZE;
-    _fillMode = DEFAULT_FILL_MODE;
-    _rounded = DEFAULT_ROUNDED;
+    _themeColor = undefined;
+    _size = undefined;
+    _fillMode = undefined;
+    _rounded = undefined;
     _svgIcon;
+    _themeColorClasses = ['k-avatar-primary', 'k-avatar-secondary', 'k-avatar-tertiary', 'k-avatar-base', 'k-avatar-info', 'k-avatar-success', 'k-avatar-warning', 'k-avatar-error', 'k-avatar-dark', 'k-avatar-light', 'k-avatar-inverse'];
     constructor(localization, renderer, element) {
         this.localization = localization;
         this.renderer = renderer;
@@ -8096,13 +8085,6 @@ class AvatarComponent {
     ngOnInit() {
         this.verifyProperties();
     }
-    ngAfterViewInit() {
-        const stylingInputs = ['size', 'rounded'];
-        stylingInputs.forEach(input => {
-            this.handleClasses(input, this[input]);
-        });
-        this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
-    }
     /**
      * @hidden
      */
@@ -8138,16 +8120,16 @@ class AvatarComponent {
         // remove existing fill and theme color classes
         const currentClasses = Array.from(wrapperElement.classList);
         const classesToRemove = currentClasses.filter(cl => {
-            return cl.startsWith('k-avatar-solid') || cl.startsWith('k-avatar-outline');
+            return this._themeColorClasses.includes(cl) || cl.startsWith('k-avatar-solid') || cl.startsWith('k-avatar-outline');
         });
         classesToRemove.forEach((cl => this.renderer.removeClass(wrapperElement, cl)));
         // add fill if needed
-        if (fill !== 'none') {
+        if (fill && (fill === 'solid' || fill === 'outline')) {
             this.renderer.addClass(wrapperElement, `k-avatar-${fill}`);
         }
-        // add theme color class if fill and theme color
-        if (fill !== 'none' && themeColor !== 'none') {
-            this.renderer.addClass(wrapperElement, `k-avatar-${fill}-${themeColor}`);
+        // add theme color class if needed
+        if (themeColor && this._themeColorClasses.includes(`k-avatar-${themeColor}`)) {
+            this.renderer.addClass(wrapperElement, `k-avatar-${themeColor}`);
         }
     }
     /**
@@ -8169,21 +8151,21 @@ class AvatarComponent {
           avatarAlt="Avatar"
           >
         </ng-container>
-        
+
         @if (customAvatar) {
           <ng-content></ng-content>
         }
-        
+
         @if (imageSrc) {
           <span class="k-avatar-image">
             <img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
           </span>
         }
-        
+
         @if (initials) {
           <span class="k-avatar-text" [ngStyle]="cssStyle">{{ initials.substring(0, 2) }}</span>
         }
-        
+
         @if (icon || iconClass || svgIcon) {
           <span class="k-avatar-icon">
             <kendo-icon-wrapper
@@ -8214,21 +8196,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
           avatarAlt="Avatar"
           >
         </ng-container>
-        
+
         @if (customAvatar) {
           <ng-content></ng-content>
         }
-        
+
         @if (imageSrc) {
           <span class="k-avatar-image">
             <img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
           </span>
         }
-        
+
         @if (initials) {
           <span class="k-avatar-text" [ngStyle]="cssStyle">{{ initials.substring(0, 2) }}</span>
         }
-        
+
         @if (icon || iconClass || svgIcon) {
           <span class="k-avatar-icon">
             <kendo-icon-wrapper
@@ -8294,7 +8276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 // eslint-disable no-forward-ref
 /**
  * Provides custom component messages that override default component messages
- * ([see example]({% slug rtl_layout %})).
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/globalization)).
  *
  * ```html
  * <kendo-avatar>
@@ -8338,7 +8320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 /**
  * Represents the Kendo UI Card component for Angular.
- * Displays content in a structured container with customizable layout and styling ([Card overview]({% slug overview_card %})).
+ * Displays content in a structured container with customizable layout and styling ([Card overview](https://www.telerik.com/kendo-angular-ui/components/layout/card)).
  *
  * @example
  * ```html
@@ -8543,7 +8525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /**
- * Defines the action buttons of the Card ([see example]({% slug actions_card %})).
+ * Defines the action buttons of the Card ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/card/action_buttons)).
  * The Card actions can be used to perform operations related to the Card's content, such as saving, editing, or deleting.
  *
  * @example
@@ -8626,7 +8608,7 @@ class CardActionsComponent {
           @for (action of actionsArray; track action) {
             <button
               type="button"
-              class="k-button k-button-md k-rounded-md"
+              class="k-button"
               [class.k-button-solid]="!action.flat"
               [class.k-button-flat]="action.flat"
               [class.k-button-solid-base]="!action.primary && !action.flat"
@@ -8658,7 +8640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
           @for (action of actionsArray; track action) {
             <button
               type="button"
-              class="k-button k-button-md k-rounded-md"
+              class="k-button"
               [class.k-button-solid]="!action.flat"
               [class.k-button-flat]="action.flat"
               [class.k-button-solid-base]="!action.primary && !action.flat"
@@ -8870,7 +8852,7 @@ class CardAction {
 /**
  * Defines a template that specifies the content of the ExpansionPanel title.
  * To define the template, nest an `<ng-template>` tag with the `kendoExpansionPanelTitleDirective` directive inside the `<kendo-expansionpanel>` tag
- * ([see example]({% slug title_expansionpanel %}#toc-title-template)).
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/title#title-template)).
  *
  * @example
  * ```html
@@ -8940,7 +8922,7 @@ const DEFAULT_DURATION = 200;
 const CONTENT_HIDDEN_CLASS = 'k-hidden';
 let incrementingId = 0;
 /**
- * Represents the Kendo UI ExpansionPanel component for Angular. Provides an expandable and collapsible content container with customizable header and animation ([see overview]({% slug overview_expansionpanel %})).
+ * Represents the Kendo UI ExpansionPanel component for Angular. Provides an expandable and collapsible content container with customizable header and animation ([see overview](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel)).
  *
  * @example
  * ```html
@@ -8960,24 +8942,24 @@ class ExpansionPanelComponent {
     builder;
     /**
      * Specifies the primary text in the header of the ExpansionPanel
-     * ([see example](slug:title_expansionpanel#toc-titles-and-subtitles)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/title#titles-and-subtitles)).
      */
     title = '';
     /**
      * Specifies the secondary text in the header of the ExpansionPanel, which renders next to the collapse/expand icon
-     * ([see example](slug:title_expansionpanel#toc-titles-and-subtitles)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/title#titles-and-subtitles)).
      */
     subtitle = '';
     /**
      * Specifies whether the ExpansionPanel is disabled. If disabled, the ExpansionPanel can be neither expanded nor collapsed
-     * ([see example]({% slug disabled_expansionpanel %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/disabled-state)).
      *
      * @default false
      */
     disabled = false;
     /**
      * Specifies whether the ExpansionPanel is expanded. The property supports two-way binding
-     * ([see example]({% slug interaction_expansionpanel %}#toc-setting-the-initial-state)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/interaction#setting-the-initial-state)).
      *
      * @default false
      */
@@ -8998,7 +8980,7 @@ class ExpansionPanelComponent {
     }
     /**
      * Defines an SVG icon for the expanded state of the component.
-     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * You can use either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     set svgExpandIcon(icon) {
         if (isDevMode() && icon && this.expandIcon) {
@@ -9011,7 +8993,7 @@ class ExpansionPanelComponent {
     }
     /**
      * Defines an SVG icon for the collapsed state of the component.
-     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * You can use either an [existing Kendo SVG icon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list) or a custom one.
      */
     set svgCollapseIcon(icon) {
         if (isDevMode() && icon && this.collapseIcon) {
@@ -9024,17 +9006,17 @@ class ExpansionPanelComponent {
     }
     /**
      * Sets a custom icon via CSS class(es) for the collapsed state of the component
-     * ([see example]({% slug icons_expansionpanel %}#toc-icons)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/icons#icons)).
      */
     expandIcon;
     /**
      * Sets a custom icon via CSS class(es) for the expanded state of the component
-     * ([see example]({% slug icons_expansionpanel %}#toc-icons)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/icons#icons)).
      */
     collapseIcon;
     /**
      * Specifies the animation settings of the ExpansionPanel
-     * ([see example]({% slug animations_expansionpanel %})).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/animations)).
      *
      * @default true
      */
@@ -9042,22 +9024,22 @@ class ExpansionPanelComponent {
     /**
      * Fires when the `expanded` property of the component is updated.
      * Used to provide a two-way binding for the `expanded` property
-     * ([see example](slug:events_expansionpanel)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/events)).
      */
     expandedChange = new EventEmitter();
     /**
      * Fires when the expanded state of the ExpansionPanel is about to change. This event is preventable
-     * ([see example](slug:events_expansionpanel)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/events)).
      */
     action = new EventEmitter();
     /**
      * Fires when the ExpansionPanel is expanded. If there is animation it fires when the animation is complete
-     * ([see example](slug:events_expansionpanel)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/events)).
      */
     expand = new EventEmitter();
     /**
      * Fires when the ExpansionPanel is collapsed. If there is animation it fires when the animation is complete
-     * ([see example](slug:events_expansionpanel)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/events)).
      */
     collapse = new EventEmitter();
     /**
@@ -9201,7 +9183,7 @@ class ExpansionPanelComponent {
     }
     /**
      * Toggles the visibility of the ExpansionPanel
-     * ([see example](slug:interaction_expansionpanel#toggling-between-states)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/interaction#toggling-between-states)).
      *
      * @param expanded Specifies whether the ExpansionPanel will be expanded or collapsed.
      */
@@ -10400,16 +10382,16 @@ class TileLayoutItemComponent {
     draggingService;
     keyboardNavigationService;
     /**
-     * Sets the title text that appears in the item header ([see example]({% slug tiles_tilelayout %}#toc-tiles-configuration)).
+     * Sets the title text that appears in the item header ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/tiles-configuration#tiles-configuration)).
      */
     title;
     /**
-     * Sets how many rows the tile item spans ([see example](slug:resizing_tilelayout#programmatic-resizing)).
+     * Sets how many rows the tile item spans ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/resizing#programmatic-resizing)).
      * @default 1
      */
     rowSpan = 1;
     /**
-     *  Sets how many columns the tile item spans ([see example](slug:resizing_tilelayout#programmatic-resizing)).
+     *  Sets how many columns the tile item spans ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/resizing#programmatic-resizing)).
      * @default 1
      */
     colSpan = 1;
@@ -10425,11 +10407,11 @@ class TileLayoutItemComponent {
         return this._order;
     }
     /**
-     * Sets the starting column position of the item ([see example](slug:tiles_tilelayout#size-and-position)).
+     * Sets the starting column position of the item ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/tiles-configuration#size-and-position)).
      */
     col;
     /**
-     * Sets the starting row position of the item ([see example](slug:tiles_tilelayout#size-and-position)).
+     * Sets the starting row position of the item ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/tiles-configuration#size-and-position)).
      */
     row;
     /**
@@ -10690,7 +10672,7 @@ const autoFlowClasses = {
     'row-dense': 'k-grid-flow-row-dense'
 };
 /**
- * Represents the [Kendo UI TileLayout component for Angular]({% slug overview_tilelayout %})
+ * Represents the [Kendo UI TileLayout component for Angular](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout)
  *
  * @example
  * ```html
@@ -10710,13 +10692,13 @@ class TileLayoutComponent {
     draggingService;
     navigationService;
     /**
-     * Specifies the number of columns ([see example](slug:tiles_tilelayout#size-and-position)).
+     * Specifies the number of columns ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/tiles-configuration#size-and-position)).
      * @default 1
      */
     columns = 1;
     /**
      * Sets the width of the columns.
-     * Use numeric values for pixels or string values for other CSS units ([see example](slug:tiles_tilelayout#size-and-position)).
+     * Use numeric values for pixels or string values for other CSS units ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/tiles-configuration#size-and-position)).
      * @default '1fr'
      */
     columnWidth = '1fr';
@@ -10734,41 +10716,41 @@ class TileLayoutComponent {
         return this._gap;
     }
     /**
-     * Enables or disables item reordering ([see example]({% slug reordering_tilelayout %})).
+     * Enables or disables item reordering ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/reordering)).
      * @default false
      */
     reorderable = false;
     /**
-     * Enables or disables item resizing ([see example]({% slug resizing_tilelayout %})).
+     * Enables or disables item resizing ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/resizing)).
      * @default false
      */
     resizable = false;
     /**
      * Sets the height of the rows.
-     * Use numeric values for pixels or string values for other CSS units ([see example](slug:tiles_tilelayout#size-and-position)).
+     * Use numeric values for pixels or string values for other CSS units ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/tiles-configuration#size-and-position)).
      * @default '1fr'
      */
     rowHeight = '1fr';
     /**
      *
-     * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items are flowed in the TileLayout ([see example]({% slug tiles_autoflow_tilelayout %})).
+     * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items are flowed in the TileLayout ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/auto-flow)).
      *
      * For further reference, check the [grid-auto-flow CSS article](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow).
      * @default 'column'
      */
     autoFlow = 'column';
     /**
-     * Enables or disables [keyboard navigation](slug:keyboard_navigation_tilelayout).
+     * Enables or disables [keyboard navigation](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/keyboard-navigation).
      * @default true
      */
     navigable = true;
     /**
-     * Fires when item reordering is completed ([see example]({% slug reordering_tilelayout %})).
+     * Fires when item reordering is completed ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/reordering)).
      * You can prevent this event to cancel the reorder operation.
      */
     reorder = new EventEmitter();
     /**
-     * Fires when item resizing is completed ([see example]({% slug resizing_tilelayout %})).
+     * Fires when item resizing is completed ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/resizing)).
      * You can prevent this event to cancel the resize operation.
      */
     resize = new EventEmitter();
@@ -11193,7 +11175,7 @@ const validateGridLayoutRowsCols = (arr) => {
 
 /**
  * Represents the Kendo UI GridLayout component for Angular.
- * Arranges child components in a two-dimensional grid layout with customizable rows, columns, and gaps ([see overview]({% slug overview_gridlayout %})).
+ * Arranges child components in a two-dimensional grid layout with customizable rows, columns, and gaps ([see overview](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout)).
  *
  * @example
  * ```html
@@ -11220,7 +11202,7 @@ class GridLayoutComponent {
     }
     /**
      * Specifies the number of rows and their height
-     * ([More details](slug:layout_gridlayout#toc-rows-and-columns)).
+     * ([More details](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout/layout#rows-and-columns)).
      *
      * You can define rows by passing an array where the number of elements determines the number of rows or each element defines the size of the corresponding row.
      * For example, you can use CSS units like `px`, `%`, `fr`, or `auto` to define the row sizes.
@@ -11228,21 +11210,21 @@ class GridLayoutComponent {
     rows;
     /**
      * Specifies the number of columns and their widths
-     * ([More details](slug:layout_gridlayout#toc-rows-and-columns)).
+     * ([More details](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout/layout#rows-and-columns)).
      *
      * You can define columns by passing an array where the number of elements determines the number of columns or each element defines the size of the corresponding column.
      * For example, you can use CSS units like `px`, `%`, `fr`, or `auto` to define the column sizes.
      */
     cols;
     /**
-     * Specifies the gaps between the elements ([see example](slug:layout_gridlayout#toc-gap)).
+     * Specifies the gaps between the elements ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout/layout#gap)).
      *
      * @default 0
      */
     gap = 0;
     /**
      * Specifies the horizontal and vertical alignment of the inner GridLayout elements
-     * ([see example]({% slug layout_gridlayout %}#toc-alignment)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout/layout#alignment)).
      */
     set align(align) {
         this._align = Object.assign({}, this._align, align);
@@ -11373,22 +11355,22 @@ class GridLayoutItemComponent {
     element;
     /**
      * Sets the row of the item in the GridLayout
-     * ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout/items#size-and-position)).
      */
     row;
     /**
      * Sets the column of the item in the GridLayout
-     * ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout/items#size-and-position)).
      */
     col;
     /**
-     * Specifies how many rows the item spans ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     * Specifies how many rows the item spans ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout/items#size-and-position)).
      *
      * @default 1
      */
     rowSpan;
     /**
-     * Specifies how many columns the item spans ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     * Specifies how many columns the item spans ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout/items#size-and-position)).
      *
      * @default 1
      */
@@ -11437,7 +11419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 
 /**
  * Represents the Kendo UI StackLayout component for Angular.
- * Arranges child components in a single row or column with customizable alignment and spacing ([see overview]({% slug overview_stacklayout %})).
+ * Arranges child components in a single row or column with customizable alignment and spacing ([see overview](https://www.telerik.com/kendo-angular-ui/components/layout/stacklayout)).
  *
  * @example
  * ```html
@@ -11464,7 +11446,7 @@ class StackLayoutComponent {
     }
     /**
      * Specifies the horizontal and vertical alignment of the inner StackLayout elements
-     * ([see example]({% slug layout_stacklayout %}#toc-alignment)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/stacklayout/layout#alignment)).
      */
     set align(align) {
         this._align = Object.assign({}, this._align, align);
@@ -11474,14 +11456,14 @@ class StackLayoutComponent {
         return this._align;
     }
     /**
-     * Specifies the gap between the inner StackLayout elements ([see example](slug:layout_stacklayout#toc-gap)).
+     * Specifies the gap between the inner StackLayout elements ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/stacklayout/layout#gap)).
      *
      * @default 0
      */
     gap = 0;
     /**
      * Specifies the orientation of the StackLayout
-     * ([see example]({% slug layout_stacklayout %}#toc-orientation)).
+     * ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/stacklayout/layout#orientation)).
      *
      * @default 'horizontal'
      */
@@ -13232,7 +13214,7 @@ const DEFAULT_EVENT_WIDTH = 400;
 const DEFAULT_EVENT_HEIGHT = 600;
 const DEFAULT_DATE_FORMAT = 'MMMM dd, yyyy';
 /**
- * Represents the [Kendo UI Timeline component for Angular]({% slug overview_timeline %}).
+ * Represents the [Kendo UI Timeline component for Angular](https://www.telerik.com/kendo-angular-ui/components/layout/timeline).
  *
  * @remarks
  * Supported children components are: {@link TimelineCustomMessagesComponent}.