@progress/kendo-angular-layout 13.0.0-develop.2 → 13.0.0-develop.20

package/esm2020/avatar/avatar.component.mjs

@@ -276,7 +276,7 @@ AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 </kendo-icon-wrapper>
             </span>
         </ng-container>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/drawer/item.component.mjs

@@ -101,7 +101,7 @@ DrawerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-icon-wrapper>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerItemComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/expansionpanel/expansionpanel.component.mjs

@@ -15,6 +15,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { ExpansionPanelActionEvent } from './events/action-event';
 import { take } from 'rxjs/operators';
+import { caretAltDownIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@angular/animations";
@@ -102,6 +103,8 @@ export class ExpansionPanelComponent {
         this.animationEnd = new EventEmitter();
         this.subscriptions = new Subscription();
         this._expanded = false;
+        this._svgExpandIcon = caretAltDownIcon;
+        this._svgCollapseIcon = caretAltUpIcon;
         validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
@@ -257,13 +260,8 @@ export class ExpansionPanelComponent {
     /**
      * @hidden
      */
-    get svgExpanderIndicatorClasses() {
-        if (this.expanded) {
-            return this.svgCollapseIcon ? this.svgCollapseIcon : undefined;
-        }
-        else {
-            return this.svgExpandIcon ? this.svgExpandIcon : undefined;
-        }
+    get expanderSvgIcon() {
+        return this.expanded ? this.svgCollapseIcon : this.svgExpandIcon;
     }
     /**
      * Toggles the visibility of the ExpansionPanel
@@ -375,7 +373,7 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 <kendo-icon-wrapper
                     [name]="expanderIndicatorClasses"
                     [customFontClass]="customExpanderIndicatorClasses"
-                    [svgIcon]="svgExpanderIndicatorClasses"
+                    [svgIcon]="expanderSvgIcon"
                 >
                 </kendo-icon-wrapper>
             </span>
@@ -385,7 +383,7 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 <ng-content></ng-content>
             </div>
         </div>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -425,7 +423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <kendo-icon-wrapper
                     [name]="expanderIndicatorClasses"
                     [customFontClass]="customExpanderIndicatorClasses"
-                    [svgIcon]="svgExpanderIndicatorClasses"
+                    [svgIcon]="expanderSvgIcon"
                 >
                 </kendo-icon-wrapper>
             </span>

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684846614,
-    version: '13.0.0-develop.2',
+    publishDate: 1685961101,
+    version: '13.0.0-develop.20',
     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'
 };

package/esm2020/panelbar/panelbar-item.component.mjs

@@ -11,7 +11,7 @@ import { PanelBarItemTitleDirective } from "./panelbar-item-title.directive";
 import { isFocusable } from '../common/dom-queries';
 import { Subscription } from 'rxjs';
 import { PanelBarExpandMode } from './panelbar-expand-mode';
-import { arrowDownIcon, arrowUpIcon } from '@progress/kendo-svg-icons';
+import { chevronDownIcon, chevronUpIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "./panelbar.service";
 import * as i2 from "@progress/kendo-angular-icons";
@@ -64,14 +64,6 @@ export class PanelBarItemComponent {
         this.role = "treeitem";
         this.titleAttribute = null; // eslint-disable-line
         this.kItemClass = true;
-        /**
-         * @hidden
-         */
-        this.arrowUpSVGIcon = arrowUpIcon;
-        /**
-         * @hidden
-         */
-        this.arrowDownSVGIcon = arrowDownIcon;
         this.focused = false;
         this.wrapperFocused = false;
         this.subscriptions = new Subscription(() => { });
@@ -207,8 +199,8 @@ export class PanelBarItemComponent {
     /**
      * @hidden
      */
-    get arrowSVGIcon() {
-        return this.expanded ? this.arrowUpSVGIcon : this.arrowDownSVGIcon;
+    get expanderSVGIcon() {
+        return this.expanded ? chevronUpIcon : chevronDownIcon;
     }
     /**
      * @hidden
@@ -326,7 +318,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 <kendo-icon-wrapper
                     *ngIf="hasChildItems || hasContent"
                     [name]="expanded ? 'arrow-chevron-up' : 'chevron-down'"
-                    [svgIcon]="arrowSVGIcon"
+                    [svgIcon]="expanderSVGIcon"
                     [innerCssClass]="dirInnerCssClasses"
                 >
                 </kendo-icon-wrapper>
@@ -406,7 +398,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     </ng-template>
                     <ng-template [ngIf]="!template">{{content}}</ng-template>
                 </div>
-            </div>`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+            </div>`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
         trigger('toggle', [
             state('inactive', style({ display: 'none' })),
             transition('* => active', [
@@ -479,7 +471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <kendo-icon-wrapper
                     *ngIf="hasChildItems || hasContent"
                     [name]="expanded ? 'arrow-chevron-up' : 'chevron-down'"
-                    [svgIcon]="arrowSVGIcon"
+                    [svgIcon]="expanderSVGIcon"
                     [innerCssClass]="dirInnerCssClasses"
                 >
                 </kendo-icon-wrapper>

package/esm2020/splitter/splitter-bar.component.mjs

@@ -126,9 +126,10 @@ export class SplitterBarComponent {
         const isCollapsible = pane.collapsible;
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
+        const isRTL = this.direction === 'rtl';
         return classFromObject({
-            'caret-alt-left': isCollapsible && isHorizontal && !isCollapsed,
-            'caret-alt-right': isCollapsible && isHorizontal && isCollapsed,
+            'caret-alt-left': isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL)),
+            'caret-alt-right': isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL)),
             'caret-alt-up': isCollapsible && !isHorizontal && !isCollapsed,
             'caret-alt-down': isCollapsible && !isHorizontal && isCollapsed
         });
@@ -138,10 +139,11 @@ export class SplitterBarComponent {
         const isCollapsible = pane.collapsible;
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
-        if (isCollapsible && isHorizontal && !isCollapsed) {
+        const isRTL = this.direction === 'rtl';
+        if (isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL))) {
             return caretAltLeftIcon;
         }
-        if (isCollapsible && isHorizontal && isCollapsed) {
+        if (isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL))) {
             return caretAltRightIcon;
         }
         if (isCollapsible && !isHorizontal && !isCollapsed) {
@@ -156,9 +158,10 @@ export class SplitterBarComponent {
         const isCollapsible = pane.collapsible;
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
+        const isRTL = this.direction === 'rtl';
         return classFromObject({
-            'caret-alt-right': isCollapsible && isHorizontal && !isCollapsed,
-            'caret-alt-left': isCollapsible && isHorizontal && isCollapsed,
+            'caret-alt-right': isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL)),
+            'caret-alt-left': isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL)),
             'caret-alt-down': isCollapsible && !isHorizontal && !isCollapsed,
             'caret-alt-up': isCollapsible && !isHorizontal && isCollapsed
         });
@@ -168,10 +171,11 @@ export class SplitterBarComponent {
         const isCollapsible = pane.collapsible;
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
-        if (isCollapsible && isHorizontal && !isCollapsed) {
+        const isRTL = this.direction === 'rtl';
+        if (isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL))) {
             return caretAltRightIcon;
         }
-        if (isCollapsible && isHorizontal && isCollapsed) {
+        if (isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL))) {
             return caretAltLeftIcon;
         }
         if (isCollapsible && !isHorizontal && !isCollapsed) {
@@ -221,24 +225,40 @@ export class SplitterBarComponent {
 SplitterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1.DraggableDirective, host: true }, { token: i2.LocalizationService }, { token: i3.SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SplitterBarComponent, 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: `
         <div *ngIf="shouldShowIcon('prev')" [class]="collapseClass('prev')" (click)="togglePrevious()">
-            <kendo-icon-wrapper [name]="previousArrowClass()" [svgIcon]="previousSVGArrowClass()"></kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                size="xsmall"
+                [name]="previousArrowClass()"
+                [svgIcon]="previousSVGArrowClass()"
+            ></kendo-icon-wrapper>
         </div>
         <div class="k-resize-handle"></div>
         <div *ngIf="shouldShowIcon('next')" [class]="collapseClass('next')" (click)="toggleNext()">
-            <kendo-icon-wrapper [name]="nextArrowClass()" [svgIcon]="nextSVGArrowClass()"></kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                size="xsmall"
+                [name]="nextArrowClass()"
+                [svgIcon]="nextSVGArrowClass()"
+            ></kendo-icon-wrapper>
         </div>
-    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-splitter-bar',
                     template: `
         <div *ngIf="shouldShowIcon('prev')" [class]="collapseClass('prev')" (click)="togglePrevious()">
-            <kendo-icon-wrapper [name]="previousArrowClass()" [svgIcon]="previousSVGArrowClass()"></kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                size="xsmall"
+                [name]="previousArrowClass()"
+                [svgIcon]="previousSVGArrowClass()"
+            ></kendo-icon-wrapper>
         </div>
         <div class="k-resize-handle"></div>
         <div *ngIf="shouldShowIcon('next')" [class]="collapseClass('next')" (click)="toggleNext()">
-            <kendo-icon-wrapper [name]="nextArrowClass()" [svgIcon]="nextSVGArrowClass()"></kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                size="xsmall"
+                [name]="nextArrowClass()"
+                [svgIcon]="nextSVGArrowClass()"
+            ></kendo-icon-wrapper>
         </div>
     `
                 }]

package/esm2020/stepper/step.component.mjs

@@ -245,7 +245,7 @@ StepperStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 </span>
             </ng-container>
         </a>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperStepComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/tabstrip/scrollable-button.component.mjs

@@ -8,19 +8,27 @@ import { Subscription } from 'rxjs';
 import { DIRECTION_CLASSES, HIDDEN_CLASS } from './constants';
 import { isTablistHorizontal } from './util';
 import { TabScrollEvent } from './events/tabscroll-event';
+import { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-icons";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@progress/kendo-angular-icons";
 /**
  * @hidden
  */
 export class TabStripScrollableButtonComponent {
-    constructor(host, renderer, ngZone) {
+    constructor(host, renderer, ngZone, localization) {
         this.host = host;
         this.renderer = renderer;
         this.ngZone = ngZone;
+        this.localization = localization;
         this.prev = false;
         this.tabScroll = new EventEmitter();
         this.onClick = new EventEmitter();
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
+        this.caretAltUpIcon = caretAltUpIcon;
+        this.caretAltDownIcon = caretAltDownIcon;
         this.subs = new Subscription();
         this.clickHandler = (scrollEvent) => {
             const tabStripScrollEvent = this.emitScrollEvent(scrollEvent);
@@ -62,8 +70,16 @@ export class TabStripScrollableButtonComponent {
         this.renderer[show ? 'removeClass' : 'addClass'](this.host.nativeElement, HIDDEN_CLASS);
     }
     get scrollButtonIconClass() {
-        const defaultPrevIcon = isTablistHorizontal(this.tabPosition) ? DIRECTION_CLASSES.left : DIRECTION_CLASSES.up;
-        const defaultNextIcon = isTablistHorizontal(this.tabPosition) ? DIRECTION_CLASSES.right : DIRECTION_CLASSES.down;
+        const defaultPrevIcon = isTablistHorizontal(this.tabPosition) ?
+            !this.localization.rtl ?
+                DIRECTION_CLASSES.left :
+                DIRECTION_CLASSES.right :
+            DIRECTION_CLASSES.up;
+        const defaultNextIcon = isTablistHorizontal(this.tabPosition) ?
+            !this.localization.rtl ?
+                DIRECTION_CLASSES.right :
+                DIRECTION_CLASSES.left :
+            DIRECTION_CLASSES.down;
         if (typeof this.scrollable === 'object') {
             const prevIcon = typeof this.scrollable.prevButtonIcon === 'undefined' ? defaultPrevIcon : '';
             const nextIcon = typeof this.scrollable.nextButtonIcon === 'undefined' ? defaultNextIcon : '';
@@ -88,9 +104,19 @@ export class TabStripScrollableButtonComponent {
         }
     }
     get scrollButtonSVGIcon() {
+        const defaultPrevSVGIcon = isTablistHorizontal(this.tabPosition) ?
+            !this.localization.rtl ?
+                this.caretAltLeftIcon :
+                this.caretAltRightIcon :
+            this.caretAltUpIcon;
+        const defaultNextSVGIcon = isTablistHorizontal(this.tabPosition) ?
+            !this.localization.rtl ?
+                this.caretAltRightIcon :
+                this.caretAltLeftIcon :
+            this.caretAltDownIcon;
         if (typeof this.scrollable === 'object') {
-            const prevIcon = this.scrollable.prevSVGButtonIcon !== undefined ? this.scrollable.prevSVGButtonIcon : undefined;
-            const nextIcon = this.scrollable.nextSVGButtonIcon !== undefined ? this.scrollable.nextSVGButtonIcon : undefined;
+            const prevIcon = this.scrollable.prevSVGButtonIcon !== undefined ? this.scrollable.prevSVGButtonIcon : defaultPrevSVGIcon;
+            const nextIcon = this.scrollable.nextSVGButtonIcon !== undefined ? this.scrollable.nextSVGButtonIcon : defaultNextSVGIcon;
             if (prevIcon || nextIcon) {
                 return this.prev ? prevIcon : nextIcon;
             }
@@ -104,7 +130,7 @@ export class TabStripScrollableButtonComponent {
         return scrollEvent;
     }
 }
-TabStripScrollableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TabStripScrollableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 TabStripScrollableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: { prev: "prev", tabPosition: "tabPosition", scrollable: "scrollable" }, outputs: { tabScroll: "tabScroll", onClick: "onClick" }, host: { properties: { "class.k-tabstrip-prev": "this.prevClass", "class.k-tabstrip-next": "this.nextClass" } }, ngImport: i0, template: `
         <kendo-icon-wrapper
             [name]="iconClass"
@@ -113,7 +139,7 @@ TabStripScrollableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             innerCssClass="k-button-icon"
         >
         </kendo-icon-wrapper>
-    `, isInline: true, components: [{ type: i1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripScrollableButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -129,7 +155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoTabStripScrollableButton]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { prevClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { prevClass: [{
                 type: HostBinding,
                 args: ['class.k-tabstrip-prev']
             }], nextClass: [{

package/expansionpanel/expansionpanel.component.d.ts

@@ -159,7 +159,7 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
     /**
      * @hidden
      */
-    get svgExpanderIndicatorClasses(): SVGIcon;
+    get expanderSvgIcon(): SVGIcon;
     /**
      * Toggles the visibility of the ExpansionPanel
      * ([see example]({% slug interaction_expansionpanel %}#toc-toggling-the-content)).

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

@@ -12,7 +12,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$2 from '@angular/animations';
 import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
 import { Subject, BehaviorSubject, Subscription, of } from 'rxjs';
-import { arrowUpIcon, arrowDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon, caretAltDownIcon, xIcon, chevronUpIcon, chevronDownIcon, checkCircleIcon, exclamationCircleIcon } from '@progress/kendo-svg-icons';
+import { chevronUpIcon, chevronDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon, caretAltDownIcon, xIcon, checkCircleIcon, exclamationCircleIcon } from '@progress/kendo-svg-icons';
 import * as i2 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i3 from '@angular/common';
@@ -31,8 +31,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684846614,
-    version: '13.0.0-develop.2',
+    publishDate: 1685961101,
+    version: '13.0.0-develop.20',
     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'
 };
 
@@ -334,14 +334,6 @@ class PanelBarItemComponent {
         this.role = "treeitem";
         this.titleAttribute = null; // eslint-disable-line
         this.kItemClass = true;
-        /**
-         * @hidden
-         */
-        this.arrowUpSVGIcon = arrowUpIcon;
-        /**
-         * @hidden
-         */
-        this.arrowDownSVGIcon = arrowDownIcon;
         this.focused = false;
         this.wrapperFocused = false;
         this.subscriptions = new Subscription(() => { });
@@ -477,8 +469,8 @@ class PanelBarItemComponent {
     /**
      * @hidden
      */
-    get arrowSVGIcon() {
-        return this.expanded ? this.arrowUpSVGIcon : this.arrowDownSVGIcon;
+    get expanderSVGIcon() {
+        return this.expanded ? chevronUpIcon : chevronDownIcon;
     }
     /**
      * @hidden
@@ -596,7 +588,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 <kendo-icon-wrapper
                     *ngIf="hasChildItems || hasContent"
                     [name]="expanded ? 'arrow-chevron-up' : 'chevron-down'"
-                    [svgIcon]="arrowSVGIcon"
+                    [svgIcon]="expanderSVGIcon"
                     [innerCssClass]="dirInnerCssClasses"
                 >
                 </kendo-icon-wrapper>
@@ -676,7 +668,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     </ng-template>
                     <ng-template [ngIf]="!template">{{content}}</ng-template>
                 </div>
-            </div>`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+            </div>`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
         trigger('toggle', [
             state('inactive', style({ display: 'none' })),
             transition('* => active', [
@@ -749,7 +741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <kendo-icon-wrapper
                     *ngIf="hasChildItems || hasContent"
                     [name]="expanded ? 'arrow-chevron-up' : 'chevron-down'"
-                    [svgIcon]="arrowSVGIcon"
+                    [svgIcon]="expanderSVGIcon"
                     [innerCssClass]="dirInnerCssClasses"
                 >
                 </kendo-icon-wrapper>
@@ -2102,9 +2094,10 @@ class SplitterBarComponent {
         const isCollapsible = pane.collapsible;
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
+        const isRTL = this.direction === 'rtl';
         return classFromObject({
-            'caret-alt-left': isCollapsible && isHorizontal && !isCollapsed,
-            'caret-alt-right': isCollapsible && isHorizontal && isCollapsed,
+            'caret-alt-left': isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL)),
+            'caret-alt-right': isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL)),
             'caret-alt-up': isCollapsible && !isHorizontal && !isCollapsed,
             'caret-alt-down': isCollapsible && !isHorizontal && isCollapsed
         });
@@ -2114,10 +2107,11 @@ class SplitterBarComponent {
         const isCollapsible = pane.collapsible;
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
-        if (isCollapsible && isHorizontal && !isCollapsed) {
+        const isRTL = this.direction === 'rtl';
+        if (isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL))) {
             return caretAltLeftIcon;
         }
-        if (isCollapsible && isHorizontal && isCollapsed) {
+        if (isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL))) {
             return caretAltRightIcon;
         }
         if (isCollapsible && !isHorizontal && !isCollapsed) {
@@ -2132,9 +2126,10 @@ class SplitterBarComponent {
         const isCollapsible = pane.collapsible;
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
+        const isRTL = this.direction === 'rtl';
         return classFromObject({
-            'caret-alt-right': isCollapsible && isHorizontal && !isCollapsed,
-            'caret-alt-left': isCollapsible && isHorizontal && isCollapsed,
+            'caret-alt-right': isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL)),
+            'caret-alt-left': isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL)),
             'caret-alt-down': isCollapsible && !isHorizontal && !isCollapsed,
             'caret-alt-up': isCollapsible && !isHorizontal && isCollapsed
         });
@@ -2144,10 +2139,11 @@ class SplitterBarComponent {
         const isCollapsible = pane.collapsible;
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
-        if (isCollapsible && isHorizontal && !isCollapsed) {
+        const isRTL = this.direction === 'rtl';
+        if (isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL))) {
             return caretAltRightIcon;
         }
-        if (isCollapsible && isHorizontal && isCollapsed) {
+        if (isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL))) {
             return caretAltLeftIcon;
         }
         if (isCollapsible && !isHorizontal && !isCollapsed) {
@@ -2197,24 +2193,40 @@ class SplitterBarComponent {
 SplitterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1$1.DraggableDirective, host: true }, { token: i1.LocalizationService }, { token: SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SplitterBarComponent, 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: `
         <div *ngIf="shouldShowIcon('prev')" [class]="collapseClass('prev')" (click)="togglePrevious()">
-            <kendo-icon-wrapper [name]="previousArrowClass()" [svgIcon]="previousSVGArrowClass()"></kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                size="xsmall"
+                [name]="previousArrowClass()"
+                [svgIcon]="previousSVGArrowClass()"
+            ></kendo-icon-wrapper>
         </div>
         <div class="k-resize-handle"></div>
         <div *ngIf="shouldShowIcon('next')" [class]="collapseClass('next')" (click)="toggleNext()">
-            <kendo-icon-wrapper [name]="nextArrowClass()" [svgIcon]="nextSVGArrowClass()"></kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                size="xsmall"
+                [name]="nextArrowClass()"
+                [svgIcon]="nextSVGArrowClass()"
+            ></kendo-icon-wrapper>
         </div>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-splitter-bar',
                     template: `
         <div *ngIf="shouldShowIcon('prev')" [class]="collapseClass('prev')" (click)="togglePrevious()">
-            <kendo-icon-wrapper [name]="previousArrowClass()" [svgIcon]="previousSVGArrowClass()"></kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                size="xsmall"
+                [name]="previousArrowClass()"
+                [svgIcon]="previousSVGArrowClass()"
+            ></kendo-icon-wrapper>
         </div>
         <div class="k-resize-handle"></div>
         <div *ngIf="shouldShowIcon('next')" [class]="collapseClass('next')" (click)="toggleNext()">
-            <kendo-icon-wrapper [name]="nextArrowClass()" [svgIcon]="nextSVGArrowClass()"></kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                size="xsmall"
+                [name]="nextArrowClass()"
+                [svgIcon]="nextSVGArrowClass()"
+            ></kendo-icon-wrapper>
         </div>
     `
                 }]
@@ -3151,13 +3163,18 @@ class TabScrollEvent extends PreventableEvent$1 {
  * @hidden
  */
 class TabStripScrollableButtonComponent {
-    constructor(host, renderer, ngZone) {
+    constructor(host, renderer, ngZone, localization) {
         this.host = host;
         this.renderer = renderer;
         this.ngZone = ngZone;
+        this.localization = localization;
         this.prev = false;
         this.tabScroll = new EventEmitter();
         this.onClick = new EventEmitter();
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
+        this.caretAltUpIcon = caretAltUpIcon;
+        this.caretAltDownIcon = caretAltDownIcon;
         this.subs = new Subscription();
         this.clickHandler = (scrollEvent) => {
             const tabStripScrollEvent = this.emitScrollEvent(scrollEvent);
@@ -3199,8 +3216,16 @@ class TabStripScrollableButtonComponent {
         this.renderer[show ? 'removeClass' : 'addClass'](this.host.nativeElement, HIDDEN_CLASS);
     }
     get scrollButtonIconClass() {
-        const defaultPrevIcon = isTablistHorizontal(this.tabPosition) ? DIRECTION_CLASSES.left : DIRECTION_CLASSES.up;
-        const defaultNextIcon = isTablistHorizontal(this.tabPosition) ? DIRECTION_CLASSES.right : DIRECTION_CLASSES.down;
+        const defaultPrevIcon = isTablistHorizontal(this.tabPosition) ?
+            !this.localization.rtl ?
+                DIRECTION_CLASSES.left :
+                DIRECTION_CLASSES.right :
+            DIRECTION_CLASSES.up;
+        const defaultNextIcon = isTablistHorizontal(this.tabPosition) ?
+            !this.localization.rtl ?
+                DIRECTION_CLASSES.right :
+                DIRECTION_CLASSES.left :
+            DIRECTION_CLASSES.down;
         if (typeof this.scrollable === 'object') {
             const prevIcon = typeof this.scrollable.prevButtonIcon === 'undefined' ? defaultPrevIcon : '';
             const nextIcon = typeof this.scrollable.nextButtonIcon === 'undefined' ? defaultNextIcon : '';
@@ -3225,9 +3250,19 @@ class TabStripScrollableButtonComponent {
         }
     }
     get scrollButtonSVGIcon() {
+        const defaultPrevSVGIcon = isTablistHorizontal(this.tabPosition) ?
+            !this.localization.rtl ?
+                this.caretAltLeftIcon :
+                this.caretAltRightIcon :
+            this.caretAltUpIcon;
+        const defaultNextSVGIcon = isTablistHorizontal(this.tabPosition) ?
+            !this.localization.rtl ?
+                this.caretAltRightIcon :
+                this.caretAltLeftIcon :
+            this.caretAltDownIcon;
         if (typeof this.scrollable === 'object') {
-            const prevIcon = this.scrollable.prevSVGButtonIcon !== undefined ? this.scrollable.prevSVGButtonIcon : undefined;
-            const nextIcon = this.scrollable.nextSVGButtonIcon !== undefined ? this.scrollable.nextSVGButtonIcon : undefined;
+            const prevIcon = this.scrollable.prevSVGButtonIcon !== undefined ? this.scrollable.prevSVGButtonIcon : defaultPrevSVGIcon;
+            const nextIcon = this.scrollable.nextSVGButtonIcon !== undefined ? this.scrollable.nextSVGButtonIcon : defaultNextSVGIcon;
             if (prevIcon || nextIcon) {
                 return this.prev ? prevIcon : nextIcon;
             }
@@ -3241,7 +3276,7 @@ class TabStripScrollableButtonComponent {
         return scrollEvent;
     }
 }
-TabStripScrollableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TabStripScrollableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 TabStripScrollableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: { prev: "prev", tabPosition: "tabPosition", scrollable: "scrollable" }, outputs: { tabScroll: "tabScroll", onClick: "onClick" }, host: { properties: { "class.k-tabstrip-prev": "this.prevClass", "class.k-tabstrip-next": "this.nextClass" } }, ngImport: i0, template: `
         <kendo-icon-wrapper
             [name]="iconClass"
@@ -3250,7 +3285,7 @@ TabStripScrollableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             innerCssClass="k-button-icon"
         >
         </kendo-icon-wrapper>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripScrollableButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -3266,7 +3301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoTabStripScrollableButton]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { prevClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { prevClass: [{
                 type: HostBinding,
                 args: ['class.k-tabstrip-prev']
             }], nextClass: [{
@@ -4626,7 +4661,7 @@ DrawerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-icon-wrapper>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -5836,7 +5871,7 @@ StepperStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 </span>
             </ng-container>
         </a>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperStepComponent, decorators: [{
             type: Component,
             args: [{
@@ -6859,7 +6894,7 @@ AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 </kendo-icon-wrapper>
             </span>
         </ng-container>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{
@@ -7552,6 +7587,8 @@ class ExpansionPanelComponent {
         this.animationEnd = new EventEmitter();
         this.subscriptions = new Subscription();
         this._expanded = false;
+        this._svgExpandIcon = caretAltDownIcon;
+        this._svgCollapseIcon = caretAltUpIcon;
         validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
@@ -7707,13 +7744,8 @@ class ExpansionPanelComponent {
     /**
      * @hidden
      */
-    get svgExpanderIndicatorClasses() {
-        if (this.expanded) {
-            return this.svgCollapseIcon ? this.svgCollapseIcon : undefined;
-        }
-        else {
-            return this.svgExpandIcon ? this.svgExpandIcon : undefined;
-        }
+    get expanderSvgIcon() {
+        return this.expanded ? this.svgCollapseIcon : this.svgExpandIcon;
     }
     /**
      * Toggles the visibility of the ExpansionPanel
@@ -7825,7 +7857,7 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 <kendo-icon-wrapper
                     [name]="expanderIndicatorClasses"
                     [customFontClass]="customExpanderIndicatorClasses"
-                    [svgIcon]="svgExpanderIndicatorClasses"
+                    [svgIcon]="expanderSvgIcon"
                 >
                 </kendo-icon-wrapper>
             </span>
@@ -7835,7 +7867,7 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 <ng-content></ng-content>
             </div>
         </div>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -7875,7 +7907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <kendo-icon-wrapper
                     [name]="expanderIndicatorClasses"
                     [customFontClass]="customExpanderIndicatorClasses"
-                    [svgIcon]="svgExpanderIndicatorClasses"
+                    [svgIcon]="expanderSvgIcon"
                 >
                 </kendo-icon-wrapper>
             </span>

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

@@ -12,7 +12,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$2 from '@angular/animations';
 import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
 import { Subject, BehaviorSubject, Subscription, of } from 'rxjs';
-import { arrowUpIcon, arrowDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon, caretAltDownIcon, xIcon, chevronUpIcon, chevronDownIcon, checkCircleIcon, exclamationCircleIcon } from '@progress/kendo-svg-icons';
+import { chevronUpIcon, chevronDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon, caretAltDownIcon, xIcon, checkCircleIcon, exclamationCircleIcon } from '@progress/kendo-svg-icons';
 import * as i2 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i3 from '@angular/common';
@@ -31,8 +31,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684846614,
-    version: '13.0.0-develop.2',
+    publishDate: 1685961101,
+    version: '13.0.0-develop.20',
     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'
 };
 
@@ -332,14 +332,6 @@ class PanelBarItemComponent {
         this.role = "treeitem";
         this.titleAttribute = null; // eslint-disable-line
         this.kItemClass = true;
-        /**
-         * @hidden
-         */
-        this.arrowUpSVGIcon = arrowUpIcon;
-        /**
-         * @hidden
-         */
-        this.arrowDownSVGIcon = arrowDownIcon;
         this.focused = false;
         this.wrapperFocused = false;
         this.subscriptions = new Subscription(() => { });
@@ -475,8 +467,8 @@ class PanelBarItemComponent {
     /**
      * @hidden
      */
-    get arrowSVGIcon() {
-        return this.expanded ? this.arrowUpSVGIcon : this.arrowDownSVGIcon;
+    get expanderSVGIcon() {
+        return this.expanded ? chevronUpIcon : chevronDownIcon;
     }
     /**
      * @hidden
@@ -594,7 +586,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 <kendo-icon-wrapper
                     *ngIf="hasChildItems || hasContent"
                     [name]="expanded ? 'arrow-chevron-up' : 'chevron-down'"
-                    [svgIcon]="arrowSVGIcon"
+                    [svgIcon]="expanderSVGIcon"
                     [innerCssClass]="dirInnerCssClasses"
                 >
                 </kendo-icon-wrapper>
@@ -674,7 +666,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     </ng-template>
                     <ng-template [ngIf]="!template">{{content}}</ng-template>
                 </div>
-            </div>`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+            </div>`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
         trigger('toggle', [
             state('inactive', style({ display: 'none' })),
             transition('* => active', [
@@ -747,7 +739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <kendo-icon-wrapper
                     *ngIf="hasChildItems || hasContent"
                     [name]="expanded ? 'arrow-chevron-up' : 'chevron-down'"
-                    [svgIcon]="arrowSVGIcon"
+                    [svgIcon]="expanderSVGIcon"
                     [innerCssClass]="dirInnerCssClasses"
                 >
                 </kendo-icon-wrapper>
@@ -2096,9 +2088,10 @@ class SplitterBarComponent {
         const isCollapsible = pane.collapsible;
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
+        const isRTL = this.direction === 'rtl';
         return classFromObject({
-            'caret-alt-left': isCollapsible && isHorizontal && !isCollapsed,
-            'caret-alt-right': isCollapsible && isHorizontal && isCollapsed,
+            'caret-alt-left': isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL)),
+            'caret-alt-right': isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL)),
             'caret-alt-up': isCollapsible && !isHorizontal && !isCollapsed,
             'caret-alt-down': isCollapsible && !isHorizontal && isCollapsed
         });
@@ -2108,10 +2101,11 @@ class SplitterBarComponent {
         const isCollapsible = pane.collapsible;
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
-        if (isCollapsible && isHorizontal && !isCollapsed) {
+        const isRTL = this.direction === 'rtl';
+        if (isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL))) {
             return caretAltLeftIcon;
         }
-        if (isCollapsible && isHorizontal && isCollapsed) {
+        if (isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL))) {
             return caretAltRightIcon;
         }
         if (isCollapsible && !isHorizontal && !isCollapsed) {
@@ -2126,9 +2120,10 @@ class SplitterBarComponent {
         const isCollapsible = pane.collapsible;
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
+        const isRTL = this.direction === 'rtl';
         return classFromObject({
-            'caret-alt-right': isCollapsible && isHorizontal && !isCollapsed,
-            'caret-alt-left': isCollapsible && isHorizontal && isCollapsed,
+            'caret-alt-right': isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL)),
+            'caret-alt-left': isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL)),
             'caret-alt-down': isCollapsible && !isHorizontal && !isCollapsed,
             'caret-alt-up': isCollapsible && !isHorizontal && isCollapsed
         });
@@ -2138,10 +2133,11 @@ class SplitterBarComponent {
         const isCollapsible = pane.collapsible;
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
-        if (isCollapsible && isHorizontal && !isCollapsed) {
+        const isRTL = this.direction === 'rtl';
+        if (isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL))) {
             return caretAltRightIcon;
         }
-        if (isCollapsible && isHorizontal && isCollapsed) {
+        if (isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL))) {
             return caretAltLeftIcon;
         }
         if (isCollapsible && !isHorizontal && !isCollapsed) {
@@ -2191,24 +2187,40 @@ class SplitterBarComponent {
 SplitterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1$1.DraggableDirective, host: true }, { token: i1.LocalizationService }, { token: SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SplitterBarComponent, 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: `
         <div *ngIf="shouldShowIcon('prev')" [class]="collapseClass('prev')" (click)="togglePrevious()">
-            <kendo-icon-wrapper [name]="previousArrowClass()" [svgIcon]="previousSVGArrowClass()"></kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                size="xsmall"
+                [name]="previousArrowClass()"
+                [svgIcon]="previousSVGArrowClass()"
+            ></kendo-icon-wrapper>
         </div>
         <div class="k-resize-handle"></div>
         <div *ngIf="shouldShowIcon('next')" [class]="collapseClass('next')" (click)="toggleNext()">
-            <kendo-icon-wrapper [name]="nextArrowClass()" [svgIcon]="nextSVGArrowClass()"></kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                size="xsmall"
+                [name]="nextArrowClass()"
+                [svgIcon]="nextSVGArrowClass()"
+            ></kendo-icon-wrapper>
         </div>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-splitter-bar',
                     template: `
         <div *ngIf="shouldShowIcon('prev')" [class]="collapseClass('prev')" (click)="togglePrevious()">
-            <kendo-icon-wrapper [name]="previousArrowClass()" [svgIcon]="previousSVGArrowClass()"></kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                size="xsmall"
+                [name]="previousArrowClass()"
+                [svgIcon]="previousSVGArrowClass()"
+            ></kendo-icon-wrapper>
         </div>
         <div class="k-resize-handle"></div>
         <div *ngIf="shouldShowIcon('next')" [class]="collapseClass('next')" (click)="toggleNext()">
-            <kendo-icon-wrapper [name]="nextArrowClass()" [svgIcon]="nextSVGArrowClass()"></kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                size="xsmall"
+                [name]="nextArrowClass()"
+                [svgIcon]="nextSVGArrowClass()"
+            ></kendo-icon-wrapper>
         </div>
     `
                 }]
@@ -3141,13 +3153,18 @@ class TabScrollEvent extends PreventableEvent$1 {
  * @hidden
  */
 class TabStripScrollableButtonComponent {
-    constructor(host, renderer, ngZone) {
+    constructor(host, renderer, ngZone, localization) {
         this.host = host;
         this.renderer = renderer;
         this.ngZone = ngZone;
+        this.localization = localization;
         this.prev = false;
         this.tabScroll = new EventEmitter();
         this.onClick = new EventEmitter();
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
+        this.caretAltUpIcon = caretAltUpIcon;
+        this.caretAltDownIcon = caretAltDownIcon;
         this.subs = new Subscription();
         this.clickHandler = (scrollEvent) => {
             const tabStripScrollEvent = this.emitScrollEvent(scrollEvent);
@@ -3189,8 +3206,16 @@ class TabStripScrollableButtonComponent {
         this.renderer[show ? 'removeClass' : 'addClass'](this.host.nativeElement, HIDDEN_CLASS);
     }
     get scrollButtonIconClass() {
-        const defaultPrevIcon = isTablistHorizontal(this.tabPosition) ? DIRECTION_CLASSES.left : DIRECTION_CLASSES.up;
-        const defaultNextIcon = isTablistHorizontal(this.tabPosition) ? DIRECTION_CLASSES.right : DIRECTION_CLASSES.down;
+        const defaultPrevIcon = isTablistHorizontal(this.tabPosition) ?
+            !this.localization.rtl ?
+                DIRECTION_CLASSES.left :
+                DIRECTION_CLASSES.right :
+            DIRECTION_CLASSES.up;
+        const defaultNextIcon = isTablistHorizontal(this.tabPosition) ?
+            !this.localization.rtl ?
+                DIRECTION_CLASSES.right :
+                DIRECTION_CLASSES.left :
+            DIRECTION_CLASSES.down;
         if (typeof this.scrollable === 'object') {
             const prevIcon = typeof this.scrollable.prevButtonIcon === 'undefined' ? defaultPrevIcon : '';
             const nextIcon = typeof this.scrollable.nextButtonIcon === 'undefined' ? defaultNextIcon : '';
@@ -3215,9 +3240,19 @@ class TabStripScrollableButtonComponent {
         }
     }
     get scrollButtonSVGIcon() {
+        const defaultPrevSVGIcon = isTablistHorizontal(this.tabPosition) ?
+            !this.localization.rtl ?
+                this.caretAltLeftIcon :
+                this.caretAltRightIcon :
+            this.caretAltUpIcon;
+        const defaultNextSVGIcon = isTablistHorizontal(this.tabPosition) ?
+            !this.localization.rtl ?
+                this.caretAltRightIcon :
+                this.caretAltLeftIcon :
+            this.caretAltDownIcon;
         if (typeof this.scrollable === 'object') {
-            const prevIcon = this.scrollable.prevSVGButtonIcon !== undefined ? this.scrollable.prevSVGButtonIcon : undefined;
-            const nextIcon = this.scrollable.nextSVGButtonIcon !== undefined ? this.scrollable.nextSVGButtonIcon : undefined;
+            const prevIcon = this.scrollable.prevSVGButtonIcon !== undefined ? this.scrollable.prevSVGButtonIcon : defaultPrevSVGIcon;
+            const nextIcon = this.scrollable.nextSVGButtonIcon !== undefined ? this.scrollable.nextSVGButtonIcon : defaultNextSVGIcon;
             if (prevIcon || nextIcon) {
                 return this.prev ? prevIcon : nextIcon;
             }
@@ -3231,7 +3266,7 @@ class TabStripScrollableButtonComponent {
         return scrollEvent;
     }
 }
-TabStripScrollableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TabStripScrollableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 TabStripScrollableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: { prev: "prev", tabPosition: "tabPosition", scrollable: "scrollable" }, outputs: { tabScroll: "tabScroll", onClick: "onClick" }, host: { properties: { "class.k-tabstrip-prev": "this.prevClass", "class.k-tabstrip-next": "this.nextClass" } }, ngImport: i0, template: `
         <kendo-icon-wrapper
             [name]="iconClass"
@@ -3240,7 +3275,7 @@ TabStripScrollableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             innerCssClass="k-button-icon"
         >
         </kendo-icon-wrapper>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripScrollableButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -3256,7 +3291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoTabStripScrollableButton]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { prevClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { prevClass: [{
                 type: HostBinding,
                 args: ['class.k-tabstrip-prev']
             }], nextClass: [{
@@ -4608,7 +4643,7 @@ DrawerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-icon-wrapper>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -5811,7 +5846,7 @@ StepperStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 </span>
             </ng-container>
         </a>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperStepComponent, decorators: [{
             type: Component,
             args: [{
@@ -6834,7 +6869,7 @@ AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 </kendo-icon-wrapper>
             </span>
         </ng-container>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{
@@ -7525,6 +7560,8 @@ class ExpansionPanelComponent {
         this.animationEnd = new EventEmitter();
         this.subscriptions = new Subscription();
         this._expanded = false;
+        this._svgExpandIcon = caretAltDownIcon;
+        this._svgCollapseIcon = caretAltUpIcon;
         validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
@@ -7680,13 +7717,8 @@ class ExpansionPanelComponent {
     /**
      * @hidden
      */
-    get svgExpanderIndicatorClasses() {
-        if (this.expanded) {
-            return this.svgCollapseIcon ? this.svgCollapseIcon : undefined;
-        }
-        else {
-            return this.svgExpandIcon ? this.svgExpandIcon : undefined;
-        }
+    get expanderSvgIcon() {
+        return this.expanded ? this.svgCollapseIcon : this.svgExpandIcon;
     }
     /**
      * Toggles the visibility of the ExpansionPanel
@@ -7798,7 +7830,7 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 <kendo-icon-wrapper
                     [name]="expanderIndicatorClasses"
                     [customFontClass]="customExpanderIndicatorClasses"
-                    [svgIcon]="svgExpanderIndicatorClasses"
+                    [svgIcon]="expanderSvgIcon"
                 >
                 </kendo-icon-wrapper>
             </span>
@@ -7808,7 +7840,7 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 <ng-content></ng-content>
             </div>
         </div>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -7848,7 +7880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <kendo-icon-wrapper
                     [name]="expanderIndicatorClasses"
                     [customFontClass]="customExpanderIndicatorClasses"
-                    [svgIcon]="svgExpanderIndicatorClasses"
+                    [svgIcon]="expanderSvgIcon"
                 >
                 </kendo-icon-wrapper>
             </span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "13.0.0-develop.2",
+  "version": "13.0.0-develop.20",
   "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -39,16 +39,16 @@
     "@angular/core": "13 - 16",
     "@angular/platform-browser": "13 - 16",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "13.0.0-develop.2",
-    "@progress/kendo-angular-l10n": "13.0.0-develop.2",
-    "@progress/kendo-angular-progressbar": "13.0.0-develop.2",
-    "@progress/kendo-angular-icons": "13.0.0-develop.2",
-    "@progress/kendo-angular-buttons": "13.0.0-develop.2",
+    "@progress/kendo-angular-common": "13.0.0-develop.20",
+    "@progress/kendo-angular-l10n": "13.0.0-develop.20",
+    "@progress/kendo-angular-progressbar": "13.0.0-develop.20",
+    "@progress/kendo-angular-icons": "13.0.0-develop.20",
+    "@progress/kendo-angular-buttons": "13.0.0-develop.20",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "13.0.0-develop.2",
+    "@progress/kendo-angular-schematics": "13.0.0-develop.20",
     "@progress/kendo-draggable": "^3.0.2"
   },
   "schematics": "./schematics/collection.json",

package/panelbar/panelbar-item.component.d.ts

@@ -104,14 +104,6 @@ export declare class PanelBarItemComponent implements OnInit, AfterContentChecke
     contentItems: QueryList<PanelBarItemComponent>;
     contentTemplate: QueryList<PanelBarContentDirective>;
     titleTemplates: QueryList<PanelBarItemTitleDirective>;
-    /**
-     * @hidden
-     */
-    arrowUpSVGIcon: SVGIcon;
-    /**
-     * @hidden
-     */
-    arrowDownSVGIcon: SVGIcon;
     focused: boolean;
     wrapperFocused: boolean;
     protected subscriptions: Subscription;
@@ -150,7 +142,7 @@ export declare class PanelBarItemComponent implements OnInit, AfterContentChecke
     /**
      * @hidden
      */
-    get arrowSVGIcon(): SVGIcon;
+    get expanderSVGIcon(): SVGIcon;
     /**
      * @hidden
      */

package/tabstrip/scrollable-button.component.d.ts

@@ -8,6 +8,7 @@ import { TabStripScrollableSettings } from './models/scrollable-settings';
 import { TabScrollEvent } from './events/tabscroll-event';
 import { ScrollButtonType } from './models/scroll-button-type';
 import { SVGIcon } from '@progress/kendo-svg-icons';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -16,6 +17,7 @@ export declare class TabStripScrollableButtonComponent implements AfterViewInit,
     host: ElementRef;
     private renderer;
     private ngZone;
+    private localization;
     get prevClass(): boolean;
     get nextClass(): boolean;
     prev: boolean;
@@ -27,8 +29,12 @@ export declare class TabStripScrollableButtonComponent implements AfterViewInit,
     get iconClass(): string;
     get customIconClass(): string;
     get svgIcon(): SVGIcon;
+    caretAltLeftIcon: SVGIcon;
+    caretAltRightIcon: SVGIcon;
+    caretAltUpIcon: SVGIcon;
+    caretAltDownIcon: SVGIcon;
     private subs;
-    constructor(host: ElementRef, renderer: Renderer2, ngZone: NgZone);
+    constructor(host: ElementRef, renderer: Renderer2, ngZone: NgZone, localization: LocalizationService);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     toggle(show: boolean): void;