@progress/kendo-angular-layout 11.0.0-develop.99 → 11.0.1-develop.1

package/esm2020/splitter.module.mjs

@@ -8,6 +8,7 @@ import { DraggableModule } from '@progress/kendo-angular-common';
 import { SplitterComponent } from './splitter/splitter.component';
 import { SplitterBarComponent } from './splitter/splitter-bar.component';
 import { SplitterPaneComponent } from './splitter/splitter-pane.component';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 const exportedModules = [
     SplitterComponent,
@@ -30,11 +31,13 @@ export class SplitterModule {
 SplitterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 SplitterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitterModule, declarations: [SplitterBarComponent, SplitterComponent,
         SplitterPaneComponent], imports: [CommonModule,
-        DraggableModule], exports: [SplitterComponent,
+        DraggableModule,
+        IconsModule], exports: [SplitterComponent,
         SplitterPaneComponent] });
 SplitterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitterModule, imports: [[
             CommonModule,
-            DraggableModule
+            DraggableModule,
+            IconsModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitterModule, decorators: [{
             type: NgModule,
@@ -43,7 +46,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     exports: [exportedModules],
                     imports: [
                         CommonModule,
-                        DraggableModule
+                        DraggableModule,
+                        IconsModule
                     ]
                 }]
         }] });

package/esm2020/stepper/list.component.mjs

@@ -89,7 +89,7 @@ export class StepperListComponent {
     }
 }
 StepperListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.StepperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-StepperListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StepperListComponent, selector: "[kendoStepperList]", inputs: { linear: "linear", stepType: "stepType", orientation: "orientation", currentStep: "currentStep", steps: "steps", successIcon: "successIcon", errorIcon: "errorIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, outputs: { listKeydown: "listKeydown", listClick: "listClick" }, ngImport: i0, template: "\n        <ng-container *ngFor='let step of steps; let idx = index'>\n            <li kendoStepperStep\n                [attr.data-kendo-stepper-index]='idx'\n                [type]='stepType'\n                [step]='step'\n                [index]='idx'\n                [current]='currentStep'\n                [successIcon]='successIcon'\n                [errorIcon]='errorIcon'\n                [indicatorTemplate]='indicatorTemplate'\n                [labelTemplate]='labelTemplate'\n                [stepTemplate]='stepTemplate'\n                class='k-step'\n                [class.k-step-first]='idx === 0'\n                [class.k-step-last]='idx === steps.length - 1'\n                [class.k-step-done]='idx < currentStep'\n                [class.k-step-current]='idx === currentStep'\n                [class.k-step-optional]='step.optional'\n                [class.k-disabled]='step.disabled'\n                [class.k-focus]='idx === focusedStep'\n                [ngClass]='step.cssClass'\n                [ngStyle]='step.cssStyle'\n                [style.max-width.%] = 'maxStepWidth'\n                [style.max-height.%] = 'maxStepHeight'\n            >\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: i2.StepperStepComponent, selector: "[kendoStepperStep]", inputs: ["step", "index", "current", "type", "successIcon", "errorIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+StepperListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StepperListComponent, selector: "[kendoStepperList]", inputs: { linear: "linear", stepType: "stepType", orientation: "orientation", currentStep: "currentStep", steps: "steps", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, outputs: { listKeydown: "listKeydown", listClick: "listClick" }, ngImport: i0, template: "\n        <ng-container *ngFor='let step of steps; let idx = index'>\n            <li kendoStepperStep\n                [attr.data-kendo-stepper-index]='idx'\n                [type]='stepType'\n                [step]='step'\n                [index]='idx'\n                [current]='currentStep'\n                [successIcon]='successIcon'\n                [successSVGIcon]='successSVGIcon'\n                [errorIcon]='errorIcon'\n                [errorSVGIcon]='errorSVGIcon'\n                [svgIcon]='svgIcon'\n                [indicatorTemplate]='indicatorTemplate'\n                [labelTemplate]='labelTemplate'\n                [stepTemplate]='stepTemplate'\n                class='k-step'\n                [class.k-step-first]='idx === 0'\n                [class.k-step-last]='idx === steps.length - 1'\n                [class.k-step-done]='idx < currentStep'\n                [class.k-step-current]='idx === currentStep'\n                [class.k-step-optional]='step.optional'\n                [class.k-disabled]='step.disabled'\n                [class.k-focus]='idx === focusedStep'\n                [ngClass]='step.cssClass'\n                [ngStyle]='step.cssStyle'\n                [style.max-width.%] = 'maxStepWidth'\n                [style.max-height.%] = 'maxStepHeight'\n            >\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: i2.StepperStepComponent, selector: "[kendoStepperStep]", inputs: ["step", "index", "current", "type", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperListComponent, decorators: [{
             type: Component,
             args: [{
@@ -104,7 +104,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [index]='idx'
                 [current]='currentStep'
                 [successIcon]='successIcon'
+                [successSVGIcon]='successSVGIcon'
                 [errorIcon]='errorIcon'
+                [errorSVGIcon]='errorSVGIcon'
+                [svgIcon]='svgIcon'
                 [indicatorTemplate]='indicatorTemplate'
                 [labelTemplate]='labelTemplate'
                 [stepTemplate]='stepTemplate'
@@ -137,8 +140,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], successIcon: [{
                 type: Input
+            }], successSVGIcon: [{
+                type: Input
             }], errorIcon: [{
                 type: Input
+            }], errorSVGIcon: [{
+                type: Input
+            }], svgIcon: [{
+                type: Input
             }], indicatorTemplate: [{
                 type: Input
             }], labelTemplate: [{

package/esm2020/stepper/step.component.mjs

@@ -8,10 +8,12 @@ import { packageMetadata } from '../package-metadata';
 import { isPresent } from '../common/util';
 import { StepperService } from './stepper.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { checkCircleIcon, exclamationCircleIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "./stepper.service";
 import * as i2 from "@progress/kendo-angular-l10n";
-import * as i3 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-icons";
+import * as i4 from "@angular/common";
 /**
  * @hidden
  */
@@ -22,6 +24,8 @@ export class StepperStepComponent {
         this.ngZone = ngZone;
         this.isStepValid = undefined;
         this.shouldCheckValidity = undefined;
+        this.checkCircleIcon = checkCircleIcon;
+        this.exclamationCircleIcon = exclamationCircleIcon;
         validatePackage(packageMetadata);
         this.subs = this.service.focusedStepChange.subscribe(() => {
             this.onFocusedStepChange();
@@ -69,16 +73,48 @@ export class StepperStepComponent {
         const active = this.service.focusedStep || this.service.currentStep;
         return this.index === active ? 0 : -1;
     }
-    get indicatorIconClasses() {
-        if (this.step.icon) {
-            return `k-icon k-i-${this.step.icon}`;
+    get indicatorIconClass() {
+        if (this.step.icon && !this.step.iconClass) {
+            return `${this.step.icon}`;
         }
+        if (!this.step.icon && !this.step.iconClass && this.shouldCheckValidity) {
+            return this.validationIconClasses;
+        }
+    }
+    get customIndicatorIconClass() {
         if (this.step.iconClass) {
             return `${this.step.iconClass}`;
         }
-        if (this.shouldCheckValidity) {
-            return this.validationIconClasses;
+        const renderCustomValidationIcon = !this.step.icon && !this.step.iconClass && this.shouldCheckValidity;
+        if (renderCustomValidationIcon) {
+            return this.customValidationIconClasses;
+        }
+    }
+    get SVGIndicatorIcon() {
+        if (this.step.svgIcon) {
+            return this.step.svgIcon;
+        }
+        if (!this.step.svgIcon && this.shouldCheckValidity) {
+            return this.validationSVGIcon;
+        }
+    }
+    get validationIconClasses() {
+        if (this.isStepValid) {
+            return !this.successIcon ? 'check-circle' : '';
+        }
+        return !this.errorIcon ? 'exclamation-circle' : '';
+    }
+    get customValidationIconClasses() {
+        if (this.isStepValid) {
+            return this.successIcon ? this.successIcon : '';
         }
+        return this.errorIcon ? this.errorIcon : '';
+    }
+    get validationSVGIcon() {
+        if (this.isStepValid) {
+            return this.successSVGIcon ? this.successSVGIcon : this.checkCircleIcon;
+        }
+        return this.errorSVGIcon ? this.errorSVGIcon : this.exclamationCircleIcon;
     }
     get showIndicatorIcon() {
         if (this.shouldCheckValidity) {
@@ -103,14 +139,6 @@ export class StepperStepComponent {
     get showLabelText() {
         return this.type === 'label' || this.type === 'full';
     }
-    get validationIconClasses() {
-        if (this.isStepValid) {
-            return this.successIcon ? `${this.successIcon}` : 'k-icon k-i-check-circle';
-        }
-        else {
-            return this.errorIcon ? `${this.errorIcon}` : 'k-icon k-i-exclamation-circle';
-        }
-    }
     get indicatorText() {
         const text = this.step.text;
         return text ? text : this.index + 1;
@@ -159,7 +187,7 @@ export class StepperStepComponent {
     }
 }
 StepperStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperStepComponent, deps: [{ token: i1.StepperService }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-StepperStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: { step: "step", index: "index", current: "current", type: "type", successIcon: "successIcon", errorIcon: "errorIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, host: { properties: { "class.k-step-error": "this.errorStepClass", "class.k-step-success": "this.successStepClass" } }, viewQueries: [{ propertyName: "stepLink", first: true, predicate: ["stepLink"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+StepperStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: { step: "step", index: "index", current: "current", type: "type", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, host: { properties: { "class.k-step-error": "this.errorStepClass", "class.k-step-success": "this.successStepClass" } }, viewQueries: [{ propertyName: "stepLink", first: true, predicate: ["stepLink"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <a href='#' class='k-step-link' #stepLink
             [attr.tabindex]='tabIndexAttr'
             [attr.title]='step.label'
@@ -184,7 +212,14 @@ StepperStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                     </ng-template>
 
                     <ng-container *ngIf='!indicatorTemplate'>
-                        <span *ngIf='showIndicatorIcon' class='k-step-indicator-icon' [ngClass]='indicatorIconClasses'></span>
+                        <kendo-icon-wrapper
+                            *ngIf='showIndicatorIcon'
+                            [name]='indicatorIconClass'
+                            [customFontClass]='customIndicatorIconClass'
+                            [svgIcon]='SVGIndicatorIcon'
+                            innerCssClass='k-step-indicator-icon'
+                        >
+                        </kendo-icon-wrapper>
                         <span class='k-step-indicator-text' *ngIf='!showIndicatorIcon'>{{ indicatorText }}</span>
                     </ng-container>
                 </span>
@@ -197,13 +232,20 @@ StepperStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
 
                     <ng-container *ngIf='!labelTemplate'>
                         <span class='k-step-text' *ngIf='showLabelText'>{{ step.label }}</span>
-                        <span [ngClass]='validationIconClasses' *ngIf='showLabelIcon' aria-hidden='true'></span>
+                        <kendo-icon-wrapper
+                            *ngIf='showLabelIcon'
+                            aria-hidden='true'
+                            [name]='validationIconClasses'
+                            [customFontClass]='customValidationIconClasses'
+                            [svgIcon]='validationSVGIcon'
+                        >
+                        </kendo-icon-wrapper>
                         <span class='k-step-label-optional' *ngIf='step.optional'>({{optionalText}})</span>
                     </ng-container>
                 </span>
             </ng-container>
         </a>
-    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperStepComponent, decorators: [{
             type: Component,
             args: [{
@@ -234,7 +276,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     </ng-template>
 
                     <ng-container *ngIf='!indicatorTemplate'>
-                        <span *ngIf='showIndicatorIcon' class='k-step-indicator-icon' [ngClass]='indicatorIconClasses'></span>
+                        <kendo-icon-wrapper
+                            *ngIf='showIndicatorIcon'
+                            [name]='indicatorIconClass'
+                            [customFontClass]='customIndicatorIconClass'
+                            [svgIcon]='SVGIndicatorIcon'
+                            innerCssClass='k-step-indicator-icon'
+                        >
+                        </kendo-icon-wrapper>
                         <span class='k-step-indicator-text' *ngIf='!showIndicatorIcon'>{{ indicatorText }}</span>
                     </ng-container>
                 </span>
@@ -247,7 +296,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
                     <ng-container *ngIf='!labelTemplate'>
                         <span class='k-step-text' *ngIf='showLabelText'>{{ step.label }}</span>
-                        <span [ngClass]='validationIconClasses' *ngIf='showLabelIcon' aria-hidden='true'></span>
+                        <kendo-icon-wrapper
+                            *ngIf='showLabelIcon'
+                            aria-hidden='true'
+                            [name]='validationIconClasses'
+                            [customFontClass]='customValidationIconClasses'
+                            [svgIcon]='validationSVGIcon'
+                        >
+                        </kendo-icon-wrapper>
                         <span class='k-step-label-optional' *ngIf='step.optional'>({{optionalText}})</span>
                     </ng-container>
                 </span>
@@ -265,8 +321,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], successIcon: [{
                 type: Input
+            }], successSVGIcon: [{
+                type: Input
             }], errorIcon: [{
                 type: Input
+            }], errorSVGIcon: [{
+                type: Input
+            }], svgIcon: [{
+                type: Input
             }], indicatorTemplate: [{
                 type: Input
             }], labelTemplate: [{

package/esm2020/stepper/stepper.component.mjs

@@ -118,6 +118,16 @@ export class StepperComponent {
     get steps() {
         return this._steps;
     }
+    /**
+     * Defines an SVG icon to be rendered inside the step indicator instead of the default numeric or text content.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        this._svgIcon = icon;
+    }
+    get svgIcon() {
+        return this._svgIcon;
+    }
     ngOnInit() {
         this.applyHostStyling();
     }
@@ -221,7 +231,7 @@ export class StepperComponent {
     }
 }
 StepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.StepperService }], target: i0.ɵɵFactoryTarget.Component });
-StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StepperComponent, selector: "kendo-stepper", inputs: { stepType: "stepType", linear: "linear", orientation: "orientation", currentStep: "currentStep", steps: "steps", successIcon: "successIcon", errorIcon: "errorIcon", animation: "animation" }, outputs: { activate: "activate", currentStepChange: "currentStepChange" }, host: { properties: { "class.k-stepper": "this.hostClasses", "class.k-stepper-linear": "this.linearClass", "attr.role": "this.ariaRole", "attr.dir": "this.direction", "style.display": "this.displayStyle" } }, providers: [
+StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StepperComponent, selector: "kendo-stepper", inputs: { stepType: "stepType", linear: "linear", orientation: "orientation", currentStep: "currentStep", steps: "steps", svgIcon: "svgIcon", successSVGIcon: "successSVGIcon", errorSVGIcon: "errorSVGIcon", successIcon: "successIcon", errorIcon: "errorIcon", animation: "animation" }, outputs: { activate: "activate", currentStepChange: "currentStepChange" }, host: { properties: { "class.k-stepper": "this.hostClasses", "class.k-stepper-linear": "this.linearClass", "attr.role": "this.ariaRole", "attr.dir": "this.direction", "style.display": "this.displayStyle" } }, providers: [
         LocalizationService,
         StepperService,
         {
@@ -241,7 +251,10 @@ StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             [steps]='steps'
             [currentStep]='currentStep'
             [successIcon]='successIcon'
+            [successSVGIcon]='successSVGIcon'
             [errorIcon]='errorIcon'
+            [errorSVGIcon]='errorSVGIcon'
+            [svgIcon]="svgIcon"
             [indicatorTemplate]='indicatorTemplate?.templateRef'
             [labelTemplate]='labelTemplate?.templateRef'
             [stepTemplate]='stepTemplate?.templateRef'
@@ -263,7 +276,7 @@ StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             [value]='currentStep'
             [ngStyle]='progressBarStyling'>
         </kendo-progressbar>
-    `, isInline: true, components: [{ type: i3.StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "errorIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { type: i4.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }], directives: [{ type: i5.LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    " }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i3.StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { type: i4.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }], directives: [{ type: i5.LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    " }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
             args: [{
@@ -290,7 +303,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [steps]='steps'
             [currentStep]='currentStep'
             [successIcon]='successIcon'
+            [successSVGIcon]='successSVGIcon'
             [errorIcon]='errorIcon'
+            [errorSVGIcon]='errorSVGIcon'
+            [svgIcon]="svgIcon"
             [indicatorTemplate]='indicatorTemplate?.templateRef'
             [labelTemplate]='labelTemplate?.templateRef'
             [stepTemplate]='stepTemplate?.templateRef'
@@ -339,6 +355,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], steps: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
+            }], successSVGIcon: [{
+                type: Input
+            }], errorSVGIcon: [{
+                type: Input
             }], successIcon: [{
                 type: Input
             }], errorIcon: [{

package/esm2020/stepper.module.mjs

@@ -13,6 +13,7 @@ import { StepperLabelTemplateDirective } from './stepper/template-directives/lab
 import { StepperStepTemplateDirective } from './stepper/template-directives/step-template.directive';
 import { LocalizedStepperMessagesDirective } from './stepper/localization/localized-messages.directive';
 import { StepperCustomMessagesComponent } from './stepper/localization/custom-messages.component';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 const templateDirectives = [
     StepperStepTemplateDirective,
@@ -42,16 +43,16 @@ StepperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         LocalizedStepperMessagesDirective, StepperComponent,
         StepperCustomMessagesComponent, StepperStepTemplateDirective,
         StepperLabelTemplateDirective,
-        StepperIndicatorTemplateDirective], imports: [CommonModule, ProgressBarModule], exports: [StepperComponent,
+        StepperIndicatorTemplateDirective], imports: [CommonModule, ProgressBarModule, IconsModule], exports: [StepperComponent,
         StepperCustomMessagesComponent, StepperStepTemplateDirective,
         StepperLabelTemplateDirective,
         StepperIndicatorTemplateDirective] });
-StepperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperModule, imports: [[CommonModule, ProgressBarModule]] });
+StepperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperModule, imports: [[CommonModule, ProgressBarModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StepperModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations],
                     exports: [exportedModules],
-                    imports: [CommonModule, ProgressBarModule]
+                    imports: [CommonModule, ProgressBarModule, IconsModule]
                 }]
         }] });

package/esm2020/tabstrip/constants.mjs

@@ -22,10 +22,10 @@ export const HIDDEN_CLASS = 'k-hidden';
  * @hidden
  */
 export const DIRECTION_CLASSES = {
-    left: 'k-i-caret-alt-left',
-    right: 'k-i-caret-alt-right',
-    up: 'k-i-caret-alt-up',
-    down: 'k-i-caret-alt-down'
+    left: 'caret-alt-left',
+    right: 'caret-alt-right',
+    up: 'caret-alt-up',
+    down: 'caret-alt-down'
 };
 /**
  * @hidden

package/esm2020/tabstrip/models/scrollable-settings.mjs

@@ -6,14 +6,16 @@ import { BUTTON_SCROLL_SPEED, MOUSE_SCROLL_SPEED } from "../constants";
 /**
  * @hidden
  */
-const normalizeSettings = ({ enabled = true, scrollButtons = 'auto', mouseScroll = true, buttonScrollSpeed = BUTTON_SCROLL_SPEED, mouseScrollSpeed = MOUSE_SCROLL_SPEED, prevButtonIcon, nextButtonIcon }) => ({
+const normalizeSettings = ({ enabled = true, scrollButtons = 'auto', mouseScroll = true, buttonScrollSpeed = BUTTON_SCROLL_SPEED, mouseScrollSpeed = MOUSE_SCROLL_SPEED, prevButtonIcon, nextButtonIcon, prevSVGButtonIcon, nextSVGButtonIcon }) => ({
     enabled,
     scrollButtons,
     mouseScroll,
     buttonScrollSpeed,
     mouseScrollSpeed,
     prevButtonIcon,
-    nextButtonIcon
+    nextButtonIcon,
+    prevSVGButtonIcon,
+    nextSVGButtonIcon
 });
 /**
  * @hidden

package/esm2020/tabstrip/models/tabstrip-tab.component.mjs

@@ -34,7 +34,7 @@ export class TabStripTabComponent {
     }
 }
 TabStripTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabStripTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabStripTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: { title: "title", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", selected: "selected", closable: "closable", closeIcon: "closeIcon" }, queries: [{ propertyName: "_tabContent", predicate: TabContentDirective }, { propertyName: "_tabTitleDirective", predicate: TabTitleDirective }], exportAs: ["kendoTabStripTab"], ngImport: i0, template: ``, isInline: true });
+TabStripTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: { title: "title", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", selected: "selected", closable: "closable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, queries: [{ propertyName: "_tabContent", predicate: TabContentDirective }, { propertyName: "_tabTitleDirective", predicate: TabTitleDirective }], exportAs: ["kendoTabStripTab"], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabStripTabComponent, decorators: [{
             type: Component,
             args: [{
@@ -56,6 +56,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], closeIcon: [{
                 type: Input
+            }], closeIconClass: [{
+                type: Input
+            }], closeSVGIcon: [{
+                type: Input
             }], _tabContent: [{
                 type: ContentChildren,
                 args: [TabContentDirective]

package/esm2020/tabstrip/rendering/tab.component.mjs

@@ -5,11 +5,11 @@
 import { TabStripTabComponent } from '../models/tabstrip-tab.component';
 import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { isPresent } from '../../common/util';
 import { TabCloseEvent } from '../events/tabclose-event';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-buttons";
+import * as i3 from "@angular/common";
 /**
  * @hidden
  */
@@ -38,10 +38,20 @@ export class TabComponent {
         return this.tabStripClosable;
     }
     get closeButtonClasses() {
-        if (isPresent(this.tab.closeIcon)) {
-            return this.tab.closeIcon;
+        if (!this.customTabstripCloseIcon && this.tabStripCloseIcon && !this.tab.closeIconClass) {
+            if (this.tab.closeIcon) {
+                return this.tab.closeIcon;
+            }
+            return this.tabStripCloseIcon;
+        }
+    }
+    get customCloseButtonClasses() {
+        if (this.customTabstripCloseIcon || this.tab.closeIconClass) {
+            if (this.tab.closeIconClass) {
+                return this.tab.closeIconClass;
+            }
+            return this.customTabstripCloseIcon;
         }
-        return this.tabStripCloseIcon;
     }
     get closeButtonTitle() {
         return this.localization.get('closeTitle');
@@ -52,21 +62,27 @@ export class TabComponent {
     }
 }
 TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TabComponent, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "class.k-state-default": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled]": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
+TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TabComponent, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "class.k-state-default": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled]": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
         <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
         <span class="k-link" *ngIf="tab.tabTitle">
             <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
             </ng-template>
         </span>
-        <span class="k-remove-tab k-button k-icon-button k-flat" *ngIf="tabClosable"
+
+        <button
+            kendoButton
+            *ngIf="tabClosable"
             role="button"
+            fillMode="flat"
+            [icon]="closeButtonClasses"
+            [iconClass]="customCloseButtonClasses"
+            [svgIcon]="closeSVGIcon"
             [title]="closeButtonTitle"
             [attr.aria-label]="closeButtonTitle"
             (click)="closeTab(index)"
-        >
-            <span [ngClass]="closeButtonClasses"></span>
-        </span>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+            class="k-remove-tab k-icon-button"
+        ></button>
+    `, isInline: true, components: [{ type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], 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.11", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{
@@ -78,14 +94,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
             </ng-template>
         </span>
-        <span class="k-remove-tab k-button k-icon-button k-flat" *ngIf="tabClosable"
+
+        <button
+            kendoButton
+            *ngIf="tabClosable"
             role="button"
+            fillMode="flat"
+            [icon]="closeButtonClasses"
+            [iconClass]="customCloseButtonClasses"
+            [svgIcon]="closeSVGIcon"
             [title]="closeButtonTitle"
             [attr.aria-label]="closeButtonTitle"
             (click)="closeTab(index)"
-        >
-            <span [ngClass]="closeButtonClasses"></span>
-        </span>
+            class="k-remove-tab k-icon-button"
+        ></button>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { tab: [{
@@ -96,6 +118,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], tabStripCloseIcon: [{
                 type: Input
+            }], customTabstripCloseIcon: [{
+                type: Input
+            }], closeSVGIcon: [{
+                type: Input
             }], tabClose: [{
                 type: Output
             }], hostClasses: [{