@progress/kendo-angular-layout 17.0.0-develop.1 → 17.0.0-develop.11

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

@@ -7,7 +7,7 @@ import { Injectable, Directive, Optional, isDevMode, Component, SkipSelf, Host,
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i1$1 from '@progress/kendo-angular-common';
-import { Keys, shouldShowValidationUI, WatermarkOverlayComponent, isDocumentAvailable, DraggableDirective, PreventableEvent as PreventableEvent$1, guid, ResizeSensorComponent, hasObservers, isPresent as isPresent$1, focusableSelector, isChanged } from '@progress/kendo-angular-common';
+import { Keys, shouldShowValidationUI, WatermarkOverlayComponent, isObjectPresent, removeHTMLAttributes, parseAttributes, setHTMLAttributes, isDocumentAvailable, DraggableDirective, PreventableEvent as PreventableEvent$1, guid, ResizeSensorComponent, hasObservers, isPresent as isPresent$1, focusableSelector, isChanged } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$2 from '@angular/animations';
 import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
@@ -28,8 +28,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1728903258,
-    version: '17.0.0-develop.1',
+    publishDate: 1729238832,
+    version: '17.0.0-develop.11',
     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'
 };
 
@@ -1592,18 +1592,218 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['keydown', ['$event']]
             }] } });
 
+/**
+ * @hidden
+ */
+const shouldTogglePrev = (keyCode, prev, next) => {
+    const leftArrow = keyCode === Keys.ArrowLeft;
+    const upArrow = keyCode === Keys.ArrowUp;
+    const collapsePrev = !prev.collapsed && !next.collapsed && (leftArrow || upArrow);
+    const expandPrev = prev.collapsed && !(leftArrow || upArrow);
+    return collapsePrev || expandPrev;
+};
+/**
+ * @hidden
+ */
+const shouldToggleNext = (keyCode, prev, next) => {
+    const leftArrow = keyCode === Keys.ArrowLeft;
+    const upArrow = keyCode === Keys.ArrowUp;
+    const collapseNext = !next.collapsed && !prev.collapsed && !(leftArrow || upArrow);
+    const expandNext = next.collapsed && (leftArrow || upArrow);
+    return collapseNext || expandNext;
+};
+/**
+ * @hidden
+ */
+const shouldToggleOrResize = (keyCode, orientation) => {
+    const isHorizontal = orientation === 'horizontal';
+    const isHorizontalChange = isHorizontal && (keyCode === Keys.ArrowLeft || keyCode === Keys.ArrowRight);
+    const isVerticalChange = !isHorizontal && (keyCode === Keys.ArrowUp || keyCode === Keys.ArrowDown);
+    return isHorizontalChange || isVerticalChange;
+};
+
+const SIZING_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/layout/splitter/panes/#toc-size';
+/**
+ * @hidden
+ */
+class SplitterService {
+    constructor(zone) {
+        this.zone = zone;
+        this.layoutChange = new EventEmitter();
+        this.resizeStep = 10;
+        this.containerSize = () => { };
+    }
+    tryToggle(paneIndex) {
+        const pane = this.pane(paneIndex);
+        if (pane.collapsible) {
+            pane.collapsed = !pane.collapsed;
+            pane.collapsedChange.emit(pane.collapsed);
+            this.emit(this.layoutChange, {});
+            if (pane.collapsed) {
+                pane.detectChanges();
+            }
+        }
+        const notCollapsed = this.panes.filter(p => !p.collapsed);
+        const allHaveFixedSize = notCollapsed.every(p => p.fixedSize);
+        notCollapsed.filter(p => p.fixedSize).forEach(pane => {
+            pane.forceExpand = allHaveFixedSize ? true : false;
+        });
+        return pane.collapsible;
+    }
+    togglePane(keyCode, index) {
+        const prev = this.pane(index);
+        const next = this.pane(index + 1);
+        if (shouldTogglePrev(keyCode, prev, next)) {
+            this.tryToggle(index);
+        }
+        else if (shouldToggleNext(keyCode, prev, next)) {
+            this.tryToggle(index + 1);
+        }
+    }
+    resizePane(keyCode, index) {
+        const state = this.dragState(index);
+        const direction = keyCode === Keys.ArrowLeft || keyCode === (this.rtl ? Keys.ArrowDown : Keys.ArrowUp);
+        let step = direction ? (-this.resizeStep) : this.resizeStep;
+        if (this.rtl) {
+            step = -step;
+        }
+        this.setSize(state, step);
+    }
+    toggleContentOverlay(index, show) {
+        this.pane(index).toggleOverlay(show);
+        this.pane(index + 1).toggleOverlay(show);
+    }
+    dragState(splitbarIndex) {
+        const prev = this.pane(splitbarIndex);
+        const next = this.pane(splitbarIndex + 1);
+        const total = prev.computedSize + next.computedSize;
+        const px = s => this.toPixels(s);
+        return {
+            prev: {
+                index: splitbarIndex,
+                initialSize: prev.computedSize,
+                min: px(prev.min) || total - px(next.max) || 0,
+                max: px(prev.max) || total - px(next.min) || total
+            },
+            next: {
+                index: splitbarIndex + 1,
+                initialSize: next.computedSize,
+                min: px(next.min) || total - px(prev.max) || 0,
+                max: px(next.max) || total - px(prev.min) || total
+            }
+        };
+    }
+    setSize(state, delta) {
+        const clamp = (min, max, v) => Math.min(max, Math.max(min, v));
+        const resize = (paneState, change) => {
+            const pane = this.pane(paneState.index);
+            const splitterSize = this.containerSize();
+            const newSize = clamp(paneState.min, paneState.max, paneState.initialSize + change);
+            let size = "";
+            if (this.isPercent(pane.size)) {
+                size = (100 * newSize / splitterSize) + "%";
+            }
+            else {
+                size = newSize + "px";
+            }
+            pane.size = size;
+            pane.isResized = true;
+            this.emit(pane.sizeChange, size);
+        };
+        // resizing both panes
+        resize(state.prev, delta);
+        resize(state.next, -delta);
+        this.emit(this.layoutChange, {});
+    }
+    isDraggable(splitBarIndex) {
+        const prev = this.pane(splitBarIndex);
+        const next = this.pane(splitBarIndex + 1);
+        const betweenResizablePanes = prev.resizable && next.resizable;
+        const nearCollapsedPane = prev.collapsed || next.collapsed;
+        return betweenResizablePanes && !nearCollapsedPane;
+    }
+    isStatic(splitBarIndex) {
+        const prev = this.pane(splitBarIndex);
+        const next = this.pane(splitBarIndex + 1);
+        const betweenResizablePanes = prev.resizable && next.resizable;
+        const nearCollapsiblePane = prev.collapsible || next.collapsible;
+        return !betweenResizablePanes && !nearCollapsiblePane;
+    }
+    pane(index) {
+        if (!this.panes) {
+            throw new Error("Panes not initialized");
+        }
+        if (index < 0 || index >= this.panes.length) {
+            throw new Error("Index out of range");
+        }
+        return this.panes[index];
+    }
+    paneByIndex(pane) {
+        if (!this.panes) {
+            return -1;
+        }
+        return this.panes.findIndex(splitterPane => splitterPane === pane);
+    }
+    getPaneSplitterBar(pane) {
+        if (!this.splitterBars) {
+            return;
+        }
+        const paneIndex = this.paneByIndex(pane);
+        if (paneIndex < 0 || paneIndex >= this.splitterBars.length) {
+            return null;
+        }
+        return this.splitterBars[paneIndex];
+    }
+    configure({ panes, orientation, containerSize, direction }) {
+        this.panes = panes;
+        this.panes.forEach((pane, index) => {
+            pane.order = index * 2;
+            pane.orientation = orientation;
+        });
+        if (isDevMode()) {
+            const allPanesWithSize = panes.length && !panes.some(pane => !pane.fixedSize);
+            const hasResizedPane = panes.length && panes.some(pane => pane.isResized);
+            if (allPanesWithSize && !hasResizedPane) {
+                throw new Error(`
+                    The Splitter should have at least one pane without a set size.
+                    See ${SIZING_DOC_LINK} for more information.
+                `);
+            }
+        }
+        this.containerSize = containerSize;
+        this.rtl = direction === 'rtl';
+    }
+    isPercent(size) {
+        return /%$/.test(size);
+    }
+    toPixels(size) {
+        let result = parseFloat(size);
+        if (this.isPercent(size)) {
+            result = (this.containerSize() * result / 100);
+        }
+        return result;
+    }
+    emit(emitter, args) {
+        if (emitter.observers.length) {
+            this.zone.run(() => emitter.emit(args));
+        }
+    }
+}
+SplitterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+SplitterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+
 /**
  * Represents the pane component of the Splitter.
  */
 class SplitterPaneComponent {
-    constructor(element, renderer, cdr) {
+    constructor(element, renderer, cdr, splitterService) {
         this.element = element;
         this.renderer = renderer;
         this.cdr = cdr;
-        /**
-         * The value of the aria-label attribute of the auxiliary separator.
-         */
-        this.separatorLabel = 'Splitter pane';
+        this.splitterService = splitterService;
         /**
          * Specifies if the user is allowed to resize the pane and provide space for other panes.
          */
@@ -1681,6 +1881,21 @@ class SplitterPaneComponent {
     get size() {
         return this._size;
     }
+    /**
+     * Sets the HTML attributes of the splitter bar.
+     * The property accepts string key-value based pairs.
+     * Attributes which are essential for certain functionalities cannot be changed.
+     */
+    set splitterBarAttributes(attributes) {
+        this._splitterBarAttributes = attributes;
+        const splitterBar = this.splitterService.getPaneSplitterBar(this);
+        if (splitterBar) {
+            splitterBar.htmlAttributes = attributes;
+        }
+    }
+    get splitterBarAttributes() {
+        return this._splitterBarAttributes;
+    }
     /**
      * @hidden
      */
@@ -1749,8 +1964,8 @@ class SplitterPaneComponent {
         this.renderer.setStyle(element, 'order', this.order);
     }
 }
-SplitterPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterPaneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SplitterPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterPaneComponent, isStandalone: true, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", separatorLabel: "separatorLabel", min: "min", max: "max", resizable: "resizable", collapsible: "collapsible", scrollable: "scrollable", collapsed: "collapsed", orientation: "orientation", containsSplitter: "containsSplitter", overlayContent: "overlayContent" }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-pane": "this.hostClass", "class.k-pane-static": "this.staticPaneClass", "class.k-scrollable": "this.scrollablePaneClass" } }, exportAs: ["kendoSplitterPane"], ngImport: i0, template: `
+SplitterPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterPaneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: SplitterService }], target: i0.ɵɵFactoryTarget.Component });
+SplitterPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterPaneComponent, isStandalone: true, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", splitterBarAttributes: "splitterBarAttributes", splitterBarClass: "splitterBarClass", min: "min", max: "max", resizable: "resizable", collapsible: "collapsible", scrollable: "scrollable", collapsed: "collapsed", orientation: "orientation", containsSplitter: "containsSplitter", overlayContent: "overlayContent" }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-pane": "this.hostClass", "class.k-pane-static": "this.staticPaneClass", "class.k-scrollable": "this.scrollablePaneClass" } }, exportAs: ["kendoSplitterPane"], ngImport: i0, template: `
         <ng-container *ngIf="!collapsed"><ng-content></ng-content></ng-container>
         <div *ngIf="overlayContent" class="k-splitter-overlay k-overlay"></div>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -1766,11 +1981,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [NgIf]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { order: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: SplitterService }]; }, propDecorators: { order: [{
                 type: Input
             }], size: [{
                 type: Input
-            }], separatorLabel: [{
+            }], splitterBarAttributes: [{
+                type: Input
+            }], splitterBarClass: [{
                 type: Input
             }], min: [{
                 type: Input
@@ -1808,193 +2025,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['class.k-scrollable']
             }] } });
 
-/**
- * @hidden
- */
-const shouldTogglePrev = (keyCode, prev, next) => {
-    const leftArrow = keyCode === Keys.ArrowLeft;
-    const upArrow = keyCode === Keys.ArrowUp;
-    const collapsePrev = !prev.collapsed && !next.collapsed && (leftArrow || upArrow);
-    const expandPrev = prev.collapsed && !(leftArrow || upArrow);
-    return collapsePrev || expandPrev;
-};
-/**
- * @hidden
- */
-const shouldToggleNext = (keyCode, prev, next) => {
-    const leftArrow = keyCode === Keys.ArrowLeft;
-    const upArrow = keyCode === Keys.ArrowUp;
-    const collapseNext = !next.collapsed && !prev.collapsed && !(leftArrow || upArrow);
-    const expandNext = next.collapsed && (leftArrow || upArrow);
-    return collapseNext || expandNext;
-};
-/**
- * @hidden
- */
-const shouldToggleOrResize = (keyCode, orientation) => {
-    const isHorizontal = orientation === 'horizontal';
-    const isHorizontalChange = isHorizontal && (keyCode === Keys.ArrowLeft || keyCode === Keys.ArrowRight);
-    const isVerticalChange = !isHorizontal && (keyCode === Keys.ArrowUp || keyCode === Keys.ArrowDown);
-    return isHorizontalChange || isVerticalChange;
-};
-
-const SIZING_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/layout/splitter/panes/#toc-size';
-/**
- * @hidden
- */
-class SplitterService {
-    constructor(zone) {
-        this.zone = zone;
-        this.layoutChange = new EventEmitter();
-        this.resizeStep = 10;
-        this.containerSize = () => { };
-    }
-    tryToggle(paneIndex) {
-        const pane = this.pane(paneIndex);
-        if (pane.collapsible) {
-            pane.collapsed = !pane.collapsed;
-            pane.collapsedChange.emit(pane.collapsed);
-            this.emit(this.layoutChange, {});
-            if (pane.collapsed) {
-                pane.detectChanges();
-            }
-        }
-        const notCollapsed = this.panes.filter(p => !p.collapsed);
-        const allHaveFixedSize = notCollapsed.every(p => p.fixedSize);
-        notCollapsed.filter(p => p.fixedSize).forEach(pane => {
-            pane.forceExpand = allHaveFixedSize ? true : false;
-        });
-        return pane.collapsible;
-    }
-    togglePane(keyCode, index) {
-        const prev = this.pane(index);
-        const next = this.pane(index + 1);
-        if (shouldTogglePrev(keyCode, prev, next)) {
-            this.tryToggle(index);
-        }
-        else if (shouldToggleNext(keyCode, prev, next)) {
-            this.tryToggle(index + 1);
-        }
-    }
-    resizePane(keyCode, index) {
-        const state = this.dragState(index);
-        const direction = keyCode === Keys.ArrowLeft || keyCode === (this.rtl ? Keys.ArrowDown : Keys.ArrowUp);
-        let step = direction ? (-this.resizeStep) : this.resizeStep;
-        if (this.rtl) {
-            step = -step;
-        }
-        this.setSize(state, step);
-    }
-    toggleContentOverlay(index, show) {
-        this.pane(index).toggleOverlay(show);
-        this.pane(index + 1).toggleOverlay(show);
-    }
-    dragState(splitbarIndex) {
-        const prev = this.pane(splitbarIndex);
-        const next = this.pane(splitbarIndex + 1);
-        const total = prev.computedSize + next.computedSize;
-        const px = s => this.toPixels(s);
-        return {
-            prev: {
-                index: splitbarIndex,
-                initialSize: prev.computedSize,
-                min: px(prev.min) || total - px(next.max) || 0,
-                max: px(prev.max) || total - px(next.min) || total
-            },
-            next: {
-                index: splitbarIndex + 1,
-                initialSize: next.computedSize,
-                min: px(next.min) || total - px(prev.max) || 0,
-                max: px(next.max) || total - px(prev.min) || total
-            }
-        };
-    }
-    setSize(state, delta) {
-        const clamp = (min, max, v) => Math.min(max, Math.max(min, v));
-        const resize = (paneState, change) => {
-            const pane = this.pane(paneState.index);
-            const splitterSize = this.containerSize();
-            const newSize = clamp(paneState.min, paneState.max, paneState.initialSize + change);
-            let size = "";
-            if (this.isPercent(pane.size)) {
-                size = (100 * newSize / splitterSize) + "%";
-            }
-            else {
-                size = newSize + "px";
-            }
-            pane.size = size;
-            pane.isResized = true;
-            this.emit(pane.sizeChange, size);
-        };
-        // resizing both panes
-        resize(state.prev, delta);
-        resize(state.next, -delta);
-        this.emit(this.layoutChange, {});
-    }
-    isDraggable(splitBarIndex) {
-        const prev = this.pane(splitBarIndex);
-        const next = this.pane(splitBarIndex + 1);
-        const betweenResizablePanes = prev.resizable && next.resizable;
-        const nearCollapsedPane = prev.collapsed || next.collapsed;
-        return betweenResizablePanes && !nearCollapsedPane;
-    }
-    isStatic(splitBarIndex) {
-        const prev = this.pane(splitBarIndex);
-        const next = this.pane(splitBarIndex + 1);
-        const betweenResizablePanes = prev.resizable && next.resizable;
-        const nearCollapsiblePane = prev.collapsible || next.collapsible;
-        return !betweenResizablePanes && !nearCollapsiblePane;
-    }
-    pane(index) {
-        if (!this.panes) {
-            throw new Error("Panes not initialized");
-        }
-        if (index < 0 || index >= this.panes.length) {
-            throw new Error("Index out of range");
-        }
-        return this.panes[index];
-    }
-    configure({ panes, orientation, containerSize, direction }) {
-        this.panes = panes;
-        this.panes.forEach((pane, index) => {
-            pane.order = index * 2;
-            pane.orientation = orientation;
-        });
-        if (isDevMode()) {
-            const allPanesWithSize = panes.length && !panes.some(pane => !pane.fixedSize);
-            const hasResizedPane = panes.length && panes.some(pane => pane.isResized);
-            if (allPanesWithSize && !hasResizedPane) {
-                throw new Error(`
-                    The Splitter should have at least one pane without a set size.
-                    See ${SIZING_DOC_LINK} for more information.
-                `);
-            }
-        }
-        this.containerSize = containerSize;
-        this.rtl = direction === 'rtl';
-    }
-    isPercent(size) {
-        return /%$/.test(size);
-    }
-    toPixels(size) {
-        let result = parseFloat(size);
-        if (this.isPercent(size)) {
-            result = (this.containerSize() * result / 100);
-        }
-        return result;
-    }
-    emit(emitter, args) {
-        if (emitter.observers.length) {
-            this.zone.run(() => emitter.emit(args));
-        }
-    }
-}
-SplitterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-SplitterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const stopPropagation = ({ originalEvent: event }) => {
     event.stopPropagation();
@@ -2021,10 +2051,12 @@ class SplitterBarComponent {
         this.renderer = renderer;
         this.cdr = cdr;
         this.ariaRole = 'separator';
+        this.ariaLabel = 'Splitter pane';
         this.focused = false;
         this.orientation = 'horizontal';
         this.index = 0;
         this.subscriptions = new Subscription();
+        this.parsedAttributes = {};
     }
     get hostOrientation() {
         return this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
@@ -2051,6 +2083,28 @@ class SplitterBarComponent {
     get order() {
         return 2 * this.index + 1;
     }
+    set htmlAttributes(attributes) {
+        if (isObjectPresent(this.parsedAttributes)) {
+            removeHTMLAttributes(this.parsedAttributes, this.renderer, this.element.nativeElement);
+        }
+        this._htmlAttributes = attributes;
+        this.parsedAttributes = this.htmlAttributes ?
+            parseAttributes(this.htmlAttributes, this.defaultAttributes) :
+            this.htmlAttributes;
+        this.setHtmlAttributes();
+    }
+    get htmlAttributes() {
+        return this._htmlAttributes;
+    }
+    get defaultAttributes() {
+        return {
+            'aria-orientation': this.hostOrientation,
+            role: this.ariaRole
+        };
+    }
+    get mutableAttributes() {
+        return { 'tabindex': this.tabIndex };
+    }
     ngOnInit() {
         let state;
         const listener = this.draggable.kendoPress.pipe(tap(stopPropagation), filter(() => this.splitterService.isDraggable(this.index)), tap(() => state = this.splitterService.dragState(this.index)), tap(() => this.splitterService.toggleContentOverlay(this.index, true)), switchMap(preventOnDblClick(this.draggable.kendoRelease)), switchMap(createMoveStream(this.draggable))).subscribe(({ pageX, pageY, originalX, originalY }) => {
@@ -2197,9 +2251,13 @@ class SplitterBarComponent {
             this.splitterService.tryToggle(next);
         }
     }
+    setHtmlAttributes() {
+        const attributesToRender = { ...this.mutableAttributes, ...this.parsedAttributes };
+        setHTMLAttributes(attributesToRender, this.renderer, this.element.nativeElement);
+    }
 }
 SplitterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1$1.DraggableDirective, host: true }, { token: i1.LocalizationService }, { token: SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
+SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index", htmlAttributes: "htmlAttributes" }, host: { properties: { "attr.role": "this.ariaRole", "attr.aria-label": "this.ariaLabel", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
         <div *ngIf="shouldShowIcon('prev')" class="k-collapse-prev" (click)="togglePrevious()">
             <kendo-icon-wrapper
                 size="xsmall"
@@ -2245,6 +2303,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }] }, { type: i1.LocalizationService }, { type: SplitterService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { ariaRole: [{
                 type: HostBinding,
                 args: ['attr.role']
+            }], ariaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
             }], focused: [{
                 type: HostBinding,
                 args: ['class.k-focus']
@@ -2267,6 +2328,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], index: [{
                 type: Input
+            }], htmlAttributes: [{
+                type: Input
             }] } });
 
 /**
@@ -2349,6 +2412,7 @@ class SplitterComponent {
         return this.direction;
     }
     set splitbars(splitbars) {
+        this.splitterService.splitterBars = splitbars ? splitbars.toArray() : [];
         if (!isPresent(splitbars) || !isPresent(this.panes)) {
             return;
         }
@@ -2361,9 +2425,9 @@ class SplitterComponent {
             .sort((a, b) => a.order - b.order);
         const elements = components.map(component => component.element.nativeElement);
         panesArray.forEach((pane, i) => {
-            if (splitBarsArray[i] && pane.separatorLabel) {
-                const splitbar = splitBarsArray[i].element.nativeElement;
-                this.renderer.setAttribute(splitbar, 'aria-label', pane.separatorLabel);
+            const splitbar = splitBarsArray[i];
+            if (splitbar && pane.splitterBarAttributes) {
+                splitbar.htmlAttributes = pane.splitterBarAttributes;
             }
         });
         elements.forEach(element => this.renderer.appendChild(this.element.nativeElement, element));
@@ -2413,7 +2477,7 @@ class SplitterComponent {
     }
 }
 SplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterComponent, deps: [{ token: i0.ElementRef }, { token: SplitterService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: SplitterPaneComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterComponent, isStandalone: true, selector: "kendo-splitter", inputs: { orientation: "orientation", splitbarWidth: "splitbarWidth", resizeStep: "resizeStep" }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "class.k-splitter": "this.hostClasses", "class.k-splitter-flex": "this.hostClasses", "class.k-splitter-horizontal": "this.horizontalHostClasses", "class.k-splitter-vertical": "this.verticalHostClasses", "attr.dir": "this.dir" } }, providers: [
+SplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterComponent, isStandalone: true, selector: "kendo-splitter", inputs: { orientation: "orientation", splitbarWidth: "splitbarWidth", resizeStep: "resizeStep", splitterBarClass: "splitterBarClass" }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "class.k-splitter": "this.hostClasses", "class.k-splitter-flex": "this.hostClasses", "class.k-splitter-horizontal": "this.horizontalHostClasses", "class.k-splitter-vertical": "this.verticalHostClasses", "attr.dir": "this.dir" } }, providers: [
         SplitterService,
         LocalizationService,
         {
@@ -2432,13 +2496,14 @@ SplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
           *ngIf="!last"
           [index]="index"
           [orientation]="orientation"
+          [ngClass]="pane.splitterBarClass || splitterBarClass"
           [ngStyle]="{
             width: orientation === 'horizontal' ? splitbarWidth + 'px' : undefined,
             height: orientation === 'vertical' ? splitbarWidth + 'px' : undefined
           }">
         </kendo-splitter-bar>
       </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index", "htmlAttributes"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterComponent, decorators: [{
             type: Component,
             args: [{
@@ -2464,6 +2529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
           *ngIf="!last"
           [index]="index"
           [orientation]="orientation"
+          [ngClass]="pane.splitterBarClass || splitterBarClass"
           [ngStyle]="{
             width: orientation === 'horizontal' ? splitbarWidth + 'px' : undefined,
             height: orientation === 'vertical' ? splitbarWidth + 'px' : undefined
@@ -2472,7 +2538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
       </ng-container>
     `,
                     standalone: true,
-                    imports: [NgFor, NgIf, SplitterBarComponent, DraggableDirective, NgStyle]
+                    imports: [NgFor, NgIf, SplitterBarComponent, DraggableDirective, NgStyle, NgClass]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SplitterService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: SplitterPaneComponent, decorators: [{
                     type: Optional
@@ -2487,6 +2553,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], resizeStep: [{
                 type: Input
+            }], splitterBarClass: [{
+                type: Input
             }], layoutChange: [{
                 type: Output
             }], hostClasses: [{
@@ -3441,11 +3509,13 @@ class TabComponent {
     }
 }
 TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabComponent, isStandalone: true, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "class.k-tabstrip-item": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
+TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabComponent, isStandalone: true, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
         <ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
-            <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
+            <span class="k-link" *ngIf="!tab.tabTitle">
+                <span class="k-link-text">{{ tab.title }}</span>
+            </span>
             <span class="k-link" *ngIf="tab.tabTitle">
-                <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
+                <ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
                 </ng-template>
             </span>
         </ng-container>
@@ -3467,7 +3537,7 @@ TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
             (click)="closeTab(index)"
             class="k-remove-tab k-icon-button"
         ></button>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{
@@ -3475,9 +3545,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     selector: '[kendoTabStripTab]',
                     template: `
         <ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
-            <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
+            <span class="k-link" *ngIf="!tab.tabTitle">
+                <span class="k-link-text">{{ tab.title }}</span>
+            </span>
             <span class="k-link" *ngIf="tab.tabTitle">
-                <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
+                <ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
                 </ng-template>
             </span>
         </ng-container>
@@ -3520,9 +3592,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-item']
-            }, {
-                type: HostBinding,
-                args: ['class.k-tabstrip-item']
             }], activeClass: [{
                 type: HostBinding,
                 args: ['attr.aria-selected']
@@ -3611,6 +3680,12 @@ class TabStripComponent {
          * @default true
          */
         this.animate = true;
+        /**
+         * Sets the alignment of the tabs.
+         *
+         * @default: 'start'
+         */
+        this.tabAlignment = 'start';
         /**
          * Sets the position of the tabs. Defaults to `top`.
          *
@@ -3799,35 +3874,6 @@ class TabStripComponent {
             this.activeStateChangeSub.unsubscribe();
         }
     }
-    /**
-     * @hidden
-     */
-    get tabsAlignmentStyles() {
-        return {
-            start: 'flex-start',
-            end: 'flex-end',
-            center: 'center',
-            justify: 'space-between'
-        }[this.tabAlignment];
-    }
-    /**
-     * @hidden
-     */
-    get tabListWidth() {
-        if (this.tabPosition === 'top' || this.tabPosition === 'bottom') {
-            return '100%';
-        }
-        return null;
-    }
-    /**
-     * @hidden
-     */
-    get tabListHeight() {
-        if (this.tabPosition === 'left' || this.tabPosition === 'right') {
-            return '100%';
-        }
-        return null;
-    }
     /**
      * @hidden
      */
@@ -3979,7 +4025,7 @@ class TabStripComponent {
     }
 }
 TabStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 });
-TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-pos-relative": "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" } }, providers: [
+TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-header": "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" } }, providers: [
         TabStripService,
         ScrollService,
         LocalizationService,
@@ -4024,20 +4070,26 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                     [prev]="true"
                     [title]="localization.get('previousTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-rounded-md k-button-flat k-button-flat-base"
+                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
                     (onClick)="onScrollButtonClick($event)">
                 </span>
                 <ul role="tablist" #tablist
                     class="k-reset k-tabstrip-items"
-                    [style.justifyContent]="tabsAlignmentStyles"
-                    [style.width]="tabListWidth"
-                    [style.height]="tabListHeight"
+                    [ngClass]="{
+                        'k-tabstrip-items-start': tabAlignment === 'start', 
+                        'k-tabstrip-items-center': tabAlignment === 'center', 
+                        'k-tabstrip-items-end': tabAlignment === 'end', 
+                        'k-tabstrip-items-stretched': tabAlignment === 'stretched', 
+                        'k-tabstrip-items-justify': tabAlignment === 'justify' 
+                    }"
                     [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
                 >
                     <ng-container *ngFor="let tab of tabs; let i = index;">
                         <li
                             #tabHeaderContainer
                             kendoTabStripTab
+                            [class.k-first]="i === 0"
+                            [class.k-last]="i === tabs.length - 1"
                             [ngClass]="tab.cssClass"
                             [ngStyle]="tab.cssStyle"
                             [tab]="tab"
@@ -4063,7 +4115,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                     [prev]="false"
                     [title]="localization.get('nextTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-rounded-md k-button-flat k-button-flat-base"
+                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
                     (onClick)="onScrollButtonClick($event)"></span>
             </div>
         </ng-template>
@@ -4156,20 +4208,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     [prev]="true"
                     [title]="localization.get('previousTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-rounded-md k-button-flat k-button-flat-base"
+                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
                     (onClick)="onScrollButtonClick($event)">
                 </span>
                 <ul role="tablist" #tablist
                     class="k-reset k-tabstrip-items"
-                    [style.justifyContent]="tabsAlignmentStyles"
-                    [style.width]="tabListWidth"
-                    [style.height]="tabListHeight"
+                    [ngClass]="{
+                        'k-tabstrip-items-start': tabAlignment === 'start', 
+                        'k-tabstrip-items-center': tabAlignment === 'center', 
+                        'k-tabstrip-items-end': tabAlignment === 'end', 
+                        'k-tabstrip-items-stretched': tabAlignment === 'stretched', 
+                        'k-tabstrip-items-justify': tabAlignment === 'justify' 
+                    }"
                     [attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
                 >
                     <ng-container *ngFor="let tab of tabs; let i = index;">
                         <li
                             #tabHeaderContainer
                             kendoTabStripTab
+                            [class.k-first]="i === 0"
+                            [class.k-last]="i === tabs.length - 1"
                             [ngClass]="tab.cssClass"
                             [ngStyle]="tab.cssStyle"
                             [tab]="tab"
@@ -4195,7 +4253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     [prev]="false"
                     [title]="localization.get('nextTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-rounded-md k-button-flat k-button-flat-base"
+                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
                     (onClick)="onScrollButtonClick($event)"></span>
             </div>
         </ng-template>
@@ -4256,7 +4314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ['class.k-tabstrip']
             }, {
                 type: HostBinding,
-                args: ['class.k-pos-relative']
+                args: ['class.k-header']
             }], tabsAtTop: [{
                 type: HostBinding,
                 args: ['class.k-tabstrip-top']
@@ -10420,7 +10478,7 @@ TimelineCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 </kendo-card-actions>
             </div>
         </kendo-card>
-    `, isInline: true, dependencies: [{ kind: "component", type: CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardHeaderComponent, selector: "kendo-card-header" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CardTitleDirective, selector: "[kendoCardTitle]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: CardSubtitleDirective, selector: "[kendoCardSubtitle]" }, { kind: "component", type: CardBodyComponent, selector: "kendo-card-body" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CardMediaDirective, selector: "[kendoCardMedia]" }, { kind: "component", type: CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }], animations: [
+    `, isInline: true, dependencies: [{ kind: "component", type: CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardHeaderComponent, selector: "kendo-card-header" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CardTitleDirective, selector: "[kendoCardTitle]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: CardSubtitleDirective, selector: "[kendoCardSubtitle]" }, { kind: "component", type: CardBodyComponent, selector: "kendo-card-body" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CardMediaDirective, selector: "[kendoCardMedia]" }, { kind: "component", type: CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }], animations: [
         trigger('toggle', [
             state('collapsed', style({
                 height: '0',
@@ -11133,7 +11191,7 @@ TimelineHorizontalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
                 </li>
             </ul>
         </div>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TimelineCardComponent, selector: "kendo-timeline-card", inputs: ["event", "expanded", "collapsible", "reversed", "orientation", "navigable", "tabIndex", "animationDuration", "index", "eventWidth", "eventHeight", "headerTemplate", "bodyTemplate", "actionsTemplate", "calloutStyle"], exportAs: ["kendoTimelineCard"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }], animations: [
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TimelineCardComponent, selector: "kendo-timeline-card", inputs: ["event", "expanded", "collapsible", "reversed", "orientation", "navigable", "tabIndex", "animationDuration", "index", "eventWidth", "eventHeight", "headerTemplate", "bodyTemplate", "actionsTemplate", "calloutStyle"], exportAs: ["kendoTimelineCard"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }], animations: [
         trigger('trackSlide', [
             state('left', style({
                 transform: `translateX({{transformValue}}%)`,