@progress/kendo-angular-layout 24.0.0-develop.20 → 24.0.0-develop.21

package/avatar/models/theme-color.d.ts

@@ -4,5 +4,11 @@
 *-------------------------------------------------------------------------------------------*/
 /**
  * Defines the possible theme colors of the Avatar ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/avatar/appearance#theme-color)).
+ *
+ * The possible values are:
+ * * `base`—Applies base coloring value.
+ * * `primary`—Applies primary coloring value.
+ * * `secondary`—Applies secondary coloring value.
+ * * `tertiary`—Applies tertiary coloring value.
  */
-export type AvatarThemeColor = 'primary' | 'secondary' | 'tertiary' | 'base' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+export type AvatarThemeColor = 'primary' | 'secondary' | 'tertiary' | 'base';

package/fesm2022/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 { chevronUpIcon, chevronDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon, caretAltDownIcon, xIcon, checkCircleIcon, exclamationCircleIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
+import { chevronUpIcon, chevronDownIcon, chevronLeftIcon, chevronRightIcon, xIcon, checkCircleIcon, exclamationCircleIcon } from '@progress/kendo-svg-icons';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { NgTemplateOutlet, NgStyle, NgClass } from '@angular/common';
 import { delay, takeUntil, map, tap, filter, switchMap, take } from 'rxjs/operators';
@@ -29,8 +29,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1778149392,
-    version: '24.0.0-develop.20',
+    publishDate: 1778160952,
+    version: '24.0.0-develop.21',
     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'
 };
 
@@ -2489,10 +2489,10 @@ class SplitterBarComponent {
         const isHorizontal = this.orientation === 'horizontal';
         const isRTL = this.direction === 'rtl';
         return classFromObject({
-            '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
+            'chevron-left': isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL)),
+            'chevron-right': isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL)),
+            'chevron-up': isCollapsible && !isHorizontal && !isCollapsed,
+            'chevron-down': isCollapsible && !isHorizontal && isCollapsed
         });
     }
     previousSVGArrowClass() {
@@ -2502,16 +2502,16 @@ class SplitterBarComponent {
         const isHorizontal = this.orientation === 'horizontal';
         const isRTL = this.direction === 'rtl';
         if (isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL))) {
-            return caretAltLeftIcon;
+            return chevronLeftIcon;
         }
         if (isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL))) {
-            return caretAltRightIcon;
+            return chevronRightIcon;
         }
         if (isCollapsible && !isHorizontal && !isCollapsed) {
-            return caretAltUpIcon;
+            return chevronUpIcon;
         }
         if (isCollapsible && !isHorizontal && isCollapsed) {
-            return caretAltDownIcon;
+            return chevronDownIcon;
         }
     }
     nextArrowClass() {
@@ -2521,10 +2521,10 @@ class SplitterBarComponent {
         const isHorizontal = this.orientation === 'horizontal';
         const isRTL = this.direction === 'rtl';
         return classFromObject({
-            '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
+            'chevron-right': isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL)),
+            'chevron-left': isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL)),
+            'chevron-down': isCollapsible && !isHorizontal && !isCollapsed,
+            'chevron-up': isCollapsible && !isHorizontal && isCollapsed
         });
     }
     nextSVGArrowClass() {
@@ -2534,16 +2534,16 @@ class SplitterBarComponent {
         const isHorizontal = this.orientation === 'horizontal';
         const isRTL = this.direction === 'rtl';
         if (isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL))) {
-            return caretAltRightIcon;
+            return chevronRightIcon;
         }
         if (isCollapsible && isHorizontal && ((isCollapsed && !isRTL) || (!isCollapsed && isRTL))) {
-            return caretAltLeftIcon;
+            return chevronLeftIcon;
         }
         if (isCollapsible && !isHorizontal && !isCollapsed) {
-            return caretAltDownIcon;
+            return chevronDownIcon;
         }
         if (isCollapsible && !isHorizontal && isCollapsed) {
-            return caretAltUpIcon;
+            return chevronUpIcon;
         }
     }
     togglePane() {
@@ -3504,10 +3504,10 @@ const HIDDEN_CLASS = 'k-hidden';
  * @hidden
  */
 const DIRECTION_CLASSES = {
-    left: 'caret-alt-left',
-    right: 'caret-alt-right',
-    up: 'caret-alt-up',
-    down: 'caret-alt-down'
+    left: 'chevron-left',
+    right: 'chevron-right',
+    up: 'chevron-up',
+    down: 'chevron-down'
 };
 /**
  * @hidden
@@ -3729,10 +3729,10 @@ class TabStripScrollableButtonComponent {
     get svgIcon() {
         return this.scrollButtonSVGIcon;
     }
-    caretAltLeftIcon = caretAltLeftIcon;
-    caretAltRightIcon = caretAltRightIcon;
-    caretAltUpIcon = caretAltUpIcon;
-    caretAltDownIcon = caretAltDownIcon;
+    chevronLeftIcon = chevronLeftIcon;
+    chevronRightIcon = chevronRightIcon;
+    chevronUpIcon = chevronUpIcon;
+    chevronDownIcon = chevronDownIcon;
     subs = new Subscription();
     constructor(host, renderer, ngZone, localization) {
         this.host = host;
@@ -3761,16 +3761,22 @@ class TabStripScrollableButtonComponent {
         this.onClick.emit(buttonType);
     };
     get scrollButtonIconClass() {
-        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;
+        const horizontal = isTablistHorizontal(this.tabPosition);
+        const rtl = this.localization.rtl;
+        let defaultPrevIcon;
+        if (!horizontal) {
+            defaultPrevIcon = DIRECTION_CLASSES.up;
+        }
+        else {
+            defaultPrevIcon = rtl ? DIRECTION_CLASSES.right : DIRECTION_CLASSES.left;
+        }
+        let defaultNextIcon;
+        if (!horizontal) {
+            defaultNextIcon = DIRECTION_CLASSES.down;
+        }
+        else {
+            defaultNextIcon = rtl ? DIRECTION_CLASSES.left : DIRECTION_CLASSES.right;
+        }
         if (typeof this.scrollable === 'object') {
             const prevIcon = typeof this.scrollable.prevButtonIcon === 'undefined' ? defaultPrevIcon : '';
             const nextIcon = typeof this.scrollable.nextButtonIcon === 'undefined' ? defaultNextIcon : '';
@@ -3795,16 +3801,22 @@ 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;
+        const horizontal = isTablistHorizontal(this.tabPosition);
+        const rtl = this.localization.rtl;
+        let defaultPrevSVGIcon;
+        if (!horizontal) {
+            defaultPrevSVGIcon = this.chevronUpIcon;
+        }
+        else {
+            defaultPrevSVGIcon = rtl ? this.chevronRightIcon : this.chevronLeftIcon;
+        }
+        let defaultNextSVGIcon;
+        if (!horizontal) {
+            defaultNextSVGIcon = this.chevronDownIcon;
+        }
+        else {
+            defaultNextSVGIcon = rtl ? this.chevronLeftIcon : this.chevronRightIcon;
+        }
         if (typeof this.scrollable === 'object') {
             const prevIcon = this.scrollable.prevSVGButtonIcon !== undefined ? this.scrollable.prevSVGButtonIcon : defaultPrevSVGIcon;
             const nextIcon = this.scrollable.nextSVGButtonIcon !== undefined ? this.scrollable.nextSVGButtonIcon : defaultNextSVGIcon;
@@ -3954,7 +3966,7 @@ class TabComponent {
         }
 
         @if (tabClosable) {
-          <span class="k-remove-tab k-icon-button k-button k-button-md k-rounded-md k-button-flat-base k-button-flat"
+          <span class="k-remove-tab k-icon-button k-button k-button-xs k-rounded-md k-button-flat-base k-button-flat"
             (click)="closeTab(index)" [title]="closeButtonTitle">
             <kendo-icon-wrapper
               [svgIcon]="closeSVGIconClass" [name]="closeIconClasses"
@@ -3986,7 +3998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         }
 
         @if (tabClosable) {
-          <span class="k-remove-tab k-icon-button k-button k-button-md k-rounded-md k-button-flat-base k-button-flat"
+          <span class="k-remove-tab k-icon-button k-button k-button-xs k-rounded-md k-button-flat-base k-button-flat"
             (click)="closeTab(index)" [title]="closeButtonTitle">
             <kendo-icon-wrapper
               [svgIcon]="closeSVGIconClass" [name]="closeIconClasses"
@@ -8078,7 +8090,7 @@ class AvatarComponent {
     _fillMode = undefined;
     _rounded = undefined;
     _svgIcon;
-    _themeColorClasses = ['k-avatar-primary', 'k-avatar-secondary', 'k-avatar-tertiary', 'k-avatar-base', 'k-avatar-info', 'k-avatar-success', 'k-avatar-warning', 'k-avatar-error', 'k-avatar-dark', 'k-avatar-light', 'k-avatar-inverse'];
+    _themeColorClasses = ['k-avatar-primary', 'k-avatar-secondary', 'k-avatar-tertiary', 'k-avatar-base'];
     constructor(localization, renderer, element) {
         this.localization = localization;
         this.renderer = renderer;
@@ -11945,7 +11957,7 @@ class TimelineCardComponent {
                   <div kendoCardTitle>
                     <span class="k-event-title">{{ event.title }}</span>
                     @if (collapsible && orientation === 'vertical') {
-                      <span class="k-event-collapse k-button k-button-flat k-icon-button">
+                      <span class="k-event-collapse k-button k-button-flat k-button-xs k-icon-button">
                         <kendo-icon-wrapper
                           [name]="calloutFontIcon"
                           [svgIcon]="calloutSvgIcon"
@@ -12095,7 +12107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                   <div kendoCardTitle>
                     <span class="k-event-title">{{ event.title }}</span>
                     @if (collapsible && orientation === 'vertical') {
-                      <span class="k-event-collapse k-button k-button-flat k-icon-button">
+                      <span class="k-event-collapse k-button k-button-flat k-button-xs k-icon-button">
                         <kendo-icon-wrapper
                           [name]="calloutFontIcon"
                           [svgIcon]="calloutSvgIcon"
@@ -12263,8 +12275,8 @@ class TimelineHorizontalComponent {
     trackWrapWidth;
     scrollableTrackWidth;
     cardWidth;
-    svgLeftIcon = caretAltLeftIcon;
-    svgRightIcon = caretAltRightIcon;
+    svgLeftIcon = chevronLeftIcon;
+    svgRightIcon = chevronRightIcon;
     calloutStyle;
     animationState = 'center';
     translateValue = 0;
@@ -12678,7 +12690,7 @@ class TimelineHorizontalComponent {
           <button
             kendoButton
             [svgIcon]="svgLeftIcon"
-            icon="caret-alt-left"
+            icon="chevron-left"
             class="k-timeline-arrow k-timeline-arrow-left"
             rounded="full"
             [title]="previousTitle"
@@ -12691,7 +12703,7 @@ class TimelineHorizontalComponent {
           <button
             kendoButton
             [svgIcon]="svgRightIcon"
-            icon="caret-alt-right"
+            icon="chevron-right"
             class="k-timeline-arrow k-timeline-arrow-right"
             rounded="full"
             [title]="nextTitle"
@@ -12780,7 +12792,7 @@ class TimelineHorizontalComponent {
           }
           <kendo-resize-sensor (resize)="onResize()" [rateLimit]="10"></kendo-resize-sensor>
         </div>
-        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { 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" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], animations: [
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { 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" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], animations: [
             trigger('trackSlide', [
                 state('left', style({
                     transform: `translateX({{transformValue}}%)`,
@@ -12834,7 +12846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           <button
             kendoButton
             [svgIcon]="svgLeftIcon"
-            icon="caret-alt-left"
+            icon="chevron-left"
             class="k-timeline-arrow k-timeline-arrow-left"
             rounded="full"
             [title]="previousTitle"
@@ -12847,7 +12859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           <button
             kendoButton
             [svgIcon]="svgRightIcon"
-            icon="caret-alt-right"
+            icon="chevron-right"
             class="k-timeline-arrow k-timeline-arrow-right"
             rounded="full"
             [title]="nextTitle"

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1778149392,
-  "version": "24.0.0-develop.20",
+  "publishDate": 1778160952,
+  "version": "24.0.0-develop.21",
   "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "24.0.0-develop.20",
+  "version": "24.0.0-develop.21",
   "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -63,7 +63,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1778149392,
+      "publishDate": 1778160952,
       "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"
     }
   },
@@ -73,17 +73,17 @@
     "@angular/core": "19 - 21",
     "@angular/platform-browser": "19 - 21",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-common": "24.0.0-develop.20",
-    "@progress/kendo-angular-l10n": "24.0.0-develop.20",
-    "@progress/kendo-angular-progressbar": "24.0.0-develop.20",
-    "@progress/kendo-angular-icons": "24.0.0-develop.20",
-    "@progress/kendo-angular-buttons": "24.0.0-develop.20",
-    "@progress/kendo-angular-intl": "24.0.0-develop.20",
+    "@progress/kendo-angular-common": "24.0.0-develop.21",
+    "@progress/kendo-angular-l10n": "24.0.0-develop.21",
+    "@progress/kendo-angular-progressbar": "24.0.0-develop.21",
+    "@progress/kendo-angular-icons": "24.0.0-develop.21",
+    "@progress/kendo-angular-buttons": "24.0.0-develop.21",
+    "@progress/kendo-angular-intl": "24.0.0-develop.21",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.0.0-develop.20",
+    "@progress/kendo-angular-schematics": "24.0.0-develop.21",
     "@progress/kendo-draggable": "^3.0.2"
   },
   "schematics": "./schematics/collection.json",

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

@@ -29,10 +29,10 @@ export declare class TabStripScrollableButtonComponent implements AfterViewInit,
     get iconClass(): string;
     get customIconClass(): string;
     get svgIcon(): SVGIcon;
-    caretAltLeftIcon: SVGIcon;
-    caretAltRightIcon: SVGIcon;
-    caretAltUpIcon: SVGIcon;
-    caretAltDownIcon: SVGIcon;
+    chevronLeftIcon: SVGIcon;
+    chevronRightIcon: SVGIcon;
+    chevronUpIcon: SVGIcon;
+    chevronDownIcon: SVGIcon;
     private subs;
     constructor(host: ElementRef, renderer: Renderer2, ngZone: NgZone, localization: LocalizationService);
     ngAfterViewInit(): void;