@progress/kendo-angular-inputs 10.1.2-dev.202211170755 → 11.0.0-develop.100

package/{fesm2015/kendo-angular-inputs.js → fesm2020/progress-kendo-angular-inputs.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
@@ -10,20 +10,22 @@ import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, thro
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import * as i3 from '@progress/kendo-angular-common';
-import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent, findFocusableChild, closest as closest$1 } from '@progress/kendo-angular-common';
+import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1 } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
+import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, checkIcon, exclamationCircleIcon, xIcon, caretAltExpandIcon, xCircleIcon, dropletSlashIcon, dropletSliderIcon, paletteIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
+import * as i2 from '@progress/kendo-angular-buttons';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { browser, mobileOS, detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import * as i1$2 from '@progress/kendo-angular-intl';
+import * as i2$1 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i1$3 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import { parseColor as parseColor$1, Color, namedColors } from '@progress/kendo-drawing';
-import * as i5 from '@progress/kendo-angular-buttons';
-import { ButtonModule } from '@progress/kendo-angular-buttons';
-import * as i2 from '@progress/kendo-angular-dialog';
+import * as i3$1 from '@progress/kendo-angular-dialog';
 import { DialogsModule } from '@progress/kendo-angular-dialog';
-import { __awaiter } from 'tslib';
 import { SignaturePad } from '@progress/kendo-inputs-common';
 
 /**
@@ -507,6 +509,7 @@ const hasClass = (element, className) => Boolean(toClassList(element.className).
  */
 function invokeElementMethod(element, name, ...args) {
     if (element && element.nativeElement) {
+        // eslint-disable-next-line prefer-spread
         return element.nativeElement[name].apply(element.nativeElement, args);
     }
 }
@@ -535,9 +538,9 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1668671644,
+    publishDate: 1673469269,
     version: '',
-    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'
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
 /**
@@ -569,9 +572,9 @@ class LabelTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-LabelTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LabelTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-LabelTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LabelTemplateDirective, selector: "[kendoSliderLabelTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LabelTemplateDirective, decorators: [{
+LabelTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+LabelTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LabelTemplateDirective, selector: "[kendoSliderLabelTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoSliderLabelTemplate]'
@@ -748,9 +751,9 @@ class SliderBase {
         });
     }
 }
-SliderBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderBase, deps: [{ token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SliderBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SliderBase, selector: "kendo-slider-base", inputs: { title: "title", tickPlacement: "tickPlacement", vertical: "vertical", min: "min", max: "max", smallStep: "smallStep", largeStep: "largeStep", fixedTickWidth: "fixedTickWidth", disabled: "disabled", readonly: "readonly", tabindex: "tabindex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-slider-horizontal": "this.horizontalClass", "class.k-slider-vertical": "this.verticalClass", "class.k-slider": "this.sliderClass", "class.k-disabled": "this.disabledClass" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: LabelTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrap"], descendants: true, static: true }, { propertyName: "track", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "sliderSelection", first: true, predicate: ["sliderSelection"], descendants: true, static: true }, { propertyName: "ticksContainer", first: true, predicate: ["ticks"], descendants: true, read: ElementRef }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true }], ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderBase, decorators: [{
+SliderBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderBase, deps: [{ token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SliderBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SliderBase, selector: "kendo-slider-base", inputs: { title: "title", tickPlacement: "tickPlacement", vertical: "vertical", min: "min", max: "max", smallStep: "smallStep", largeStep: "largeStep", fixedTickWidth: "fixedTickWidth", disabled: "disabled", readonly: "readonly", tabindex: "tabindex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-slider-horizontal": "this.horizontalClass", "class.k-slider-vertical": "this.verticalClass", "class.k-slider": "this.sliderClass", "class.k-disabled": "this.disabledClass" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: LabelTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrap"], descendants: true, static: true }, { propertyName: "track", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "sliderSelection", first: true, predicate: ["sliderSelection"], descendants: true, static: true }, { propertyName: "ticksContainer", first: true, predicate: ["ticks"], descendants: true, read: ElementRef }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true }], ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderBase, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-slider-base',
@@ -852,7 +855,7 @@ class SliderTicksComponent {
             min: this.min,
             smallStep: this.step
         };
-        let result = [];
+        const result = [];
         for (let i = 0; i < count; i++) {
             result.push(new SliderTick(calculateValueFromTick(i, tickValueProps)));
             if (largeStep && i % largeStep === 0) {
@@ -873,8 +876,8 @@ class SliderTicksComponent {
         };
     }
 }
-SliderTicksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderTicksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SliderTicksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: { tickTitle: "tickTitle", vertical: "vertical", step: "step", largeStep: "largeStep", min: "min", max: "max", labelTemplate: "labelTemplate" }, host: { properties: { "class": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "tickElements", predicate: ["tickElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+SliderTicksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderTicksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SliderTicksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: { tickTitle: "tickTitle", vertical: "vertical", step: "step", largeStep: "largeStep", min: "min", max: "max", labelTemplate: "labelTemplate" }, host: { properties: { "class": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "tickElements", predicate: ["tickElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <li #tickElement *ngFor="let tick of ticks;"
         [ngClass]="tick.classes"
         title="{{ tickTitle(tick.value) }}"
@@ -893,7 +896,7 @@ SliderTicksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         {{ tickTitle(value) }}
      </ng-template>
   `, isInline: true, directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderTicksComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderTicksComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoSliderTicks]',
@@ -944,9 +947,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class SliderMessages extends ComponentMessages {
 }
-SliderMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-SliderMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SliderMessages, selector: "kendo-slider-messages-base", inputs: { decrement: "decrement", increment: "increment", dragHandle: "dragHandle" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderMessages, decorators: [{
+SliderMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+SliderMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: SliderMessages, selector: "kendo-slider-messages-base", inputs: { decrement: "decrement", increment: "increment", dragHandle: "dragHandle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -969,14 +972,14 @@ class LocalizedSliderMessagesDirective extends SliderMessages {
         this.service = service;
     }
 }
-LocalizedSliderMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedSliderMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedSliderMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]", providers: [
+LocalizedSliderMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedSliderMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedSliderMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]", providers: [
         {
             provide: SliderMessages,
             useExisting: forwardRef(() => LocalizedSliderMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedSliderMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedSliderMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -989,6 +992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const PRESSED$1 = 'k-pressed';
 /**
  * Represents the [Kendo UI Slider component for Angular]({% slug overview_slider %}).
@@ -1021,13 +1025,29 @@ class SliderComponent extends SliderBase {
          * The component can use either NgModel or the `value` binding but not both of them at the same time.
          */
         this.value = this.min;
+        /**
+         * @hidden
+         */
+        this.arrowUpIcon = caretAltUpIcon;
+        /**
+         * @hidden
+         */
+        this.arrowDownIcon = caretAltDownIcon;
+        /**
+         * @hidden
+         */
+        this.arrowLeftIcon = caretAltLeftIcon;
+        /**
+         * @hidden
+         */
+        this.arrowRightIcon = caretAltRightIcon;
         this.focusChangedProgrammatically = false;
         /**
          * @hidden
          */
         this.onWrapClick = (args) => {
             const target = args.target;
-            if (!this.isDisabled && !(isButton(target) || isButton(target.parentNode))) {
+            if (!this.isDisabled && !(target.closest('.k-button'))) {
                 const value = eventValue(args, this.track.nativeElement, this.getProps());
                 this.changeValue(value);
             }
@@ -1356,13 +1376,13 @@ class SliderComponent extends SliderBase {
         });
     }
 }
-SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SliderComponent, selector: "kendo-slider", inputs: { focusableId: "focusableId", dragHandleTitle: "dragHandleTitle", incrementTitle: "incrementTitle", animate: "animate", decrementTitle: "decrementTitle", showButtons: "showButtons", value: "value", tabIndex: "tabIndex" }, providers: [
+SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SliderComponent, selector: "kendo-slider", inputs: { focusableId: "focusableId", dragHandleTitle: "dragHandleTitle", incrementTitle: "incrementTitle", animate: "animate", decrementTitle: "decrementTitle", showButtons: "showButtons", value: "value", tabIndex: "tabIndex" }, providers: [
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.slider' },
         { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent) },
         { provide: KendoInput, useExisting: forwardRef(() => SliderComponent) }
-    ], viewQueries: [{ propertyName: "draghandle", first: true, predicate: ["draghandle"], descendants: true, static: true }, { propertyName: "decreaseButton", first: true, predicate: ["decreaseButton"], descendants: true }, { propertyName: "increaseButton", first: true, predicate: ["increaseButton"], descendants: true }], exportAs: ["kendoSlider"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "draghandle", first: true, predicate: ["draghandle"], descendants: true, static: true }, { propertyName: "decreaseButton", first: true, predicate: ["decreaseButton"], descendants: true, read: ElementRef }, { propertyName: "increaseButton", first: true, predicate: ["increaseButton"], descendants: true, read: ElementRef }], exportAs: ["kendoSlider"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoSliderLocalizedMessages
             i18n-increment="kendo.slider.increment|The title of the **Increase** button of the Slider."
             increment="increment"
@@ -1377,16 +1397,19 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             [class.k-slider-bottomright]="tickPlacement === 'after'"
             [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
             >
-            <button *ngIf="showButtons" type="button" #decreaseButton
-                class="k-button-decrease k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
+            <button 
+                kendoButton
+                #decreaseButton
+                *ngIf="showButtons"
+                type="button"
+                rounded="full"
+                [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
+                [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
+                class="k-button-decrease"
                 [title]="decrementMessage"
                 [attr.tabindex]="-1"
-                role="presentation">
-                    <span class="k-button-icon k-icon"
-                        [class.k-i-caret-alt-left]="!vertical"
-                        [class.k-i-caret-alt-down]="vertical">
-                    </span>
-            </button>
+                role="presentation"
+            ></button>
             <div class="k-slider-track-wrap">
                 <ul kendoSliderTicks
                     #ticks
@@ -1425,22 +1448,25 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                     ></span>
                 </div>
             </div>
-            <button *ngIf="showButtons" type="button" #increaseButton
-                class="k-button-increase k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
+            <button
+                kendoButton
+                #increaseButton
+                *ngIf="showButtons"
+                type="button"
+                rounded="full"
+                [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
+                [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
+                class="k-button-increase"
                 [title]="incrementMessage"
                 (click)="$event.preventDefault()"
                 [attr.tabindex]="-1"
                 [attr.aria-label]="currentValue"
-                role="presentation">
-                    <span class="k-button-icon k-icon"
-                        [class.k-i-caret-alt-right]="!vertical"
-                        [class.k-i-caret-alt-up]="vertical">
-                    </span>
-            </button>
+                role="presentation"
+            ></button>
             <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
         </div>
-  `, isInline: true, components: [{ type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderComponent, decorators: [{
+  `, 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"] }, { type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoSlider',
@@ -1466,16 +1492,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [class.k-slider-bottomright]="tickPlacement === 'after'"
             [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
             >
-            <button *ngIf="showButtons" type="button" #decreaseButton
-                class="k-button-decrease k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
+            <button 
+                kendoButton
+                #decreaseButton
+                *ngIf="showButtons"
+                type="button"
+                rounded="full"
+                [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
+                [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
+                class="k-button-decrease"
                 [title]="decrementMessage"
                 [attr.tabindex]="-1"
-                role="presentation">
-                    <span class="k-button-icon k-icon"
-                        [class.k-i-caret-alt-left]="!vertical"
-                        [class.k-i-caret-alt-down]="vertical">
-                    </span>
-            </button>
+                role="presentation"
+            ></button>
             <div class="k-slider-track-wrap">
                 <ul kendoSliderTicks
                     #ticks
@@ -1514,18 +1543,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     ></span>
                 </div>
             </div>
-            <button *ngIf="showButtons" type="button" #increaseButton
-                class="k-button-increase k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
+            <button
+                kendoButton
+                #increaseButton
+                *ngIf="showButtons"
+                type="button"
+                rounded="full"
+                [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
+                [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
+                class="k-button-increase"
                 [title]="incrementMessage"
                 (click)="$event.preventDefault()"
                 [attr.tabindex]="-1"
                 [attr.aria-label]="currentValue"
-                role="presentation">
-                    <span class="k-button-icon k-icon"
-                        [class.k-i-caret-alt-right]="!vertical"
-                        [class.k-i-caret-alt-up]="vertical">
-                    </span>
-            </button>
+                role="presentation"
+            ></button>
             <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
         </div>
   `
@@ -1551,10 +1583,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['draghandle', { static: true }]
             }], decreaseButton: [{
                 type: ViewChild,
-                args: ['decreaseButton', { static: false }]
+                args: ['decreaseButton', { read: ElementRef }]
             }], increaseButton: [{
                 type: ViewChild,
-                args: ['increaseButton', { static: false }]
+                args: ['increaseButton', { read: ElementRef }]
             }] } });
 
 /**
@@ -1608,9 +1640,9 @@ class RangeSliderModel extends SliderModelBase {
  */
 class RangeSliderMessages extends ComponentMessages {
 }
-RangeSliderMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RangeSliderMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-RangeSliderMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: RangeSliderMessages, selector: "kendo-rangeslider-messages-base", inputs: { dragHandleStart: "dragHandleStart", dragHandleEnd: "dragHandleEnd" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RangeSliderMessages, decorators: [{
+RangeSliderMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RangeSliderMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+RangeSliderMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: RangeSliderMessages, selector: "kendo-rangeslider-messages-base", inputs: { dragHandleStart: "dragHandleStart", dragHandleEnd: "dragHandleEnd" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RangeSliderMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1631,14 +1663,14 @@ class LocalizedRangeSliderMessagesDirective extends RangeSliderMessages {
         this.service = service;
     }
 }
-LocalizedRangeSliderMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedRangeSliderMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedRangeSliderMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedRangeSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]", providers: [
+LocalizedRangeSliderMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedRangeSliderMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedRangeSliderMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedRangeSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]", providers: [
         {
             provide: RangeSliderMessages,
             useExisting: forwardRef(() => LocalizedRangeSliderMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedRangeSliderMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedRangeSliderMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -1725,7 +1757,7 @@ class RangeSliderComponent extends SliderBase {
             const nonDraggedHandle = startHandleIsActive ? this.draghandleEnd.nativeElement : this.draghandleStart.nativeElement;
             this.renderer.removeStyle(nonDraggedHandle, 'zIndex');
             this.renderer.setStyle(e.target, 'zIndex', 1);
-            const value = handler(Object.assign(Object.assign({}, options), { value: startHandleIsActive ? this.value[0] : this.value[1] }));
+            const value = handler({ ...options, value: startHandleIsActive ? this.value[0] : this.value[1] });
             if (startHandleIsActive) {
                 if (value > this.value[1]) {
                     this.value[1] = value;
@@ -1797,8 +1829,8 @@ class RangeSliderComponent extends SliderBase {
     }
     ngOnChanges(changes) {
         if (anyChanged(['value', 'fixedTickWidth', 'tickPlacement'], changes, true)) {
-            if (changes.value && changes.value.currentValue) {
-                validateValue(changes.value.currentValue);
+            if (changes['value'] && changes['value'].currentValue) {
+                validateValue(changes['value'].currentValue);
             }
             this.ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
                 this.sizeComponent();
@@ -2062,8 +2094,8 @@ class RangeSliderComponent extends SliderBase {
         });
     }
 }
-RangeSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RangeSliderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-RangeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RangeSliderComponent, selector: "kendo-rangeslider", inputs: { value: "value" }, providers: [
+RangeSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RangeSliderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+RangeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: RangeSliderComponent, selector: "kendo-rangeslider", inputs: { value: "value" }, providers: [
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.rangeslider' },
         { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RangeSliderComponent) },
@@ -2141,7 +2173,7 @@ RangeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             <kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
         </div>
   `, isInline: true, components: [{ type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedRangeSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RangeSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RangeSliderComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoRangeSlider',
@@ -2241,9 +2273,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class Messages extends ComponentMessages {
 }
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Messages, selector: "kendo-switch-messages-base", inputs: { on: "on", off: "off" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, decorators: [{
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: Messages, selector: "kendo-switch-messages-base", inputs: { on: "on", off: "off" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2264,14 +2296,14 @@ class LocalizedSwitchMessagesDirective extends Messages {
         this.service = service;
     }
 }
-LocalizedSwitchMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedSwitchMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedSwitchMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedSwitchMessagesDirective, selector: "[kendoSwitchLocalizedMessages]", providers: [
+LocalizedSwitchMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedSwitchMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedSwitchMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedSwitchMessagesDirective, selector: "[kendoSwitchLocalizedMessages]", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => LocalizedSwitchMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedSwitchMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedSwitchMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -2644,9 +2676,8 @@ class SwitchComponent {
         }
     }
     handleTrackClasses(value) {
-        var _a, _b;
-        const elem = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.nativeElement;
-        const track = (_b = this.track) === null || _b === void 0 ? void 0 : _b.nativeElement;
+        const elem = this.hostElement?.nativeElement;
+        const track = this.track?.nativeElement;
         if (!elem || !track) {
             return;
         }
@@ -2661,8 +2692,7 @@ class SwitchComponent {
         }
     }
     handleThumbClasses(value) {
-        var _a;
-        const thumb = (_a = this.thumb) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        const thumb = this.thumb?.nativeElement;
         if (!thumb) {
             return;
         }
@@ -2675,8 +2705,8 @@ class SwitchComponent {
         }
     }
 }
-SwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SwitchComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SwitchComponent, selector: "kendo-switch", inputs: { focusableId: "focusableId", onLabel: "onLabel", offLabel: "offLabel", checked: "checked", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", size: "size", thumbRounded: "thumbRounded", trackRounded: "trackRounded", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-ie": "this.ieClass", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "class.k-switch": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+SwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SwitchComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SwitchComponent, selector: "kendo-switch", inputs: { focusableId: "focusableId", onLabel: "onLabel", offLabel: "offLabel", checked: "checked", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", size: "size", thumbRounded: "thumbRounded", trackRounded: "trackRounded", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-ie": "this.ieClass", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "class.k-switch": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.switch' },
         {
@@ -2722,7 +2752,7 @@ SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             <span #thumb class="k-switch-thumb"></span>
         </span>
   `, isInline: true, directives: [{ type: LocalizedSwitchMessagesDirective, selector: "[kendoSwitchLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SwitchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoSwitch',
@@ -2913,12 +2943,12 @@ class TextBoxDirective {
         this.listeners.forEach(listener => listener());
     }
 }
-TextBoxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-TextBoxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextBoxDirective, selector: "input[kendoTextBox]", inputs: { value: "value" }, host: { properties: { "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-input-md": "this.hostClasses", "class.k-rounded-md": "this.hostClasses", "class.k-input-solid": "this.hostClasses" } }, providers: [{
+TextBoxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+TextBoxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: TextBoxDirective, selector: "input[kendoTextBox]", inputs: { value: "value" }, host: { properties: { "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-input-md": "this.hostClasses", "class.k-rounded-md": "this.hostClasses", "class.k-input-solid": "this.hostClasses" } }, providers: [{
             provide: KendoInput,
             useExisting: forwardRef(() => TextBoxDirective)
         }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[kendoTextBox]',
@@ -3139,8 +3169,8 @@ class TextAreaDirective {
         }
     }
 }
-TextAreaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-TextAreaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: { autoSize: "autoSize", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-textarea": "this.elementClasses", "class.k-input": "this.elementClasses", "class.k-input-md": "this.elementClasses", "class.k-rounded-md": "this.elementClasses", "class.k-input-solid": "this.elementClasses", "class.k-autofill": "this.autofillClass", "attr.dir": "this.direction" } }, providers: [{
+TextAreaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextAreaDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+TextAreaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: { autoSize: "autoSize", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-textarea": "this.elementClasses", "class.k-input": "this.elementClasses", "class.k-input-md": "this.elementClasses", "class.k-rounded-md": "this.elementClasses", "class.k-input-solid": "this.elementClasses", "class.k-autofill": "this.autofillClass", "attr.dir": "this.direction" } }, providers: [{
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => TextAreaDirective),
             multi: true
@@ -3148,7 +3178,7 @@ TextAreaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", vers
             provide: KendoInput,
             useExisting: forwardRef(() => TextAreaDirective)
         }], usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextAreaDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [{
@@ -3282,7 +3312,8 @@ const decimalPart = (value) => {
 /**
  * @hidden
  */
-const noop$1 = (_) => { }; // eslint-disable-line no-empty
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop$1 = (_) => { };
 /**
  * @hidden
  */
@@ -3356,9 +3387,9 @@ var ArrowDirection;
  */
 class NumericTextBoxMessages extends ComponentMessages {
 }
-NumericTextBoxMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumericTextBoxMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-NumericTextBoxMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: NumericTextBoxMessages, selector: "kendo-numerictextbox-messages-base", inputs: { decrement: "decrement", increment: "increment" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumericTextBoxMessages, decorators: [{
+NumericTextBoxMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericTextBoxMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+NumericTextBoxMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: NumericTextBoxMessages, selector: "kendo-numerictextbox-messages-base", inputs: { decrement: "decrement", increment: "increment" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericTextBoxMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -3379,14 +3410,14 @@ class LocalizedNumericTextBoxMessagesDirective extends NumericTextBoxMessages {
         this.service = service;
     }
 }
-LocalizedNumericTextBoxMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedNumericTextBoxMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedNumericTextBoxMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]", providers: [
+LocalizedNumericTextBoxMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedNumericTextBoxMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedNumericTextBoxMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]", providers: [
         {
             provide: NumericTextBoxMessages,
             useExisting: forwardRef(() => LocalizedNumericTextBoxMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedNumericTextBoxMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedNumericTextBoxMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -3399,6 +3430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const PARSABLE_OPTIONS = ['min', 'max', 'step', 'decimals'];
 const PARSABLE_DEFAULTS = {
     decimals: null,
@@ -3505,6 +3537,14 @@ class NumericTextBoxComponent {
          */
         this.arrowDirection = ArrowDirection.None;
         this.hostClasses = true;
+        /**
+         * @hidden
+         */
+        this.arrowUpIcon = caretAltUpIcon;
+        /**
+         * @hidden
+         */
+        this.arrowDownIcon = caretAltDownIcon;
         this.inputValue = '';
         this.minValidateFn = noop$1;
         this.maxValidateFn = noop$1;
@@ -3830,7 +3870,7 @@ class NumericTextBoxComponent {
      */
     writeValue(value) {
         this.verifyValue(value);
-        let restrictedValue = this.restrictModelValue(value);
+        const restrictedValue = this.restrictModelValue(value);
         this.value = restrictedValue;
         this.setInputValue();
     }
@@ -3919,9 +3959,6 @@ class NumericTextBoxComponent {
     get focused() {
         return this.isFocused;
     }
-    get hasDecimals() {
-        return this.decimals !== null && this.decimals >= 0;
-    }
     set focused(value) {
         if (this.isFocused !== value && this.hostElement) {
             const wrap = this.hostElement.nativeElement;
@@ -3934,6 +3971,9 @@ class NumericTextBoxComponent {
             this.isFocused = value;
         }
     }
+    get hasDecimals() {
+        return this.decimals !== null && this.decimals >= 0;
+    }
     get isDisabled() {
         return this.disabled || this.readonly;
     }
@@ -4021,7 +4061,7 @@ class NumericTextBoxComponent {
         return result;
     }
     limitInputValue(value) {
-        let { selectionStart, selectionEnd, value: enteredValue } = this.numericInput.nativeElement;
+        const { selectionStart, selectionEnd, value: enteredValue } = this.numericInput.nativeElement;
         let limitedValue = value;
         let selectToEnd = false;
         if (!this.isInRange(value)) {
@@ -4231,8 +4271,8 @@ class NumericTextBoxComponent {
         }
     }
 }
-NumericTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumericTextBoxComponent, deps: [{ token: i1$2.IntlService }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", autoCorrect: "autoCorrect", format: "format", max: "max", min: "min", decimals: "decimals", placeholder: "placeholder", step: "step", spinners: "spinners", rangeValidation: "rangeValidation", tabindex: "tabindex", tabIndex: "tabIndex", changeValueOnScroll: "changeValueOnScroll", selectOnFocus: "selectOnFocus", value: "value", maxlength: "maxlength", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur" }, host: { properties: { "attr.dir": "this.direction", "class.k-disabled": "this.disableClass", "class.k-input": "this.hostClasses", "class.k-numerictextbox": "this.hostClasses" } }, providers: [
+NumericTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericTextBoxComponent, deps: [{ token: i1$2.IntlService }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", autoCorrect: "autoCorrect", format: "format", max: "max", min: "min", decimals: "decimals", placeholder: "placeholder", step: "step", spinners: "spinners", rangeValidation: "rangeValidation", tabindex: "tabindex", tabIndex: "tabIndex", changeValueOnScroll: "changeValueOnScroll", selectOnFocus: "selectOnFocus", value: "value", maxlength: "maxlength", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur" }, host: { properties: { "attr.dir": "this.direction", "class.k-disabled": "this.disableClass", "class.k-input": "this.hostClasses", "class.k-numerictextbox": "this.hostClasses" } }, providers: [
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.numerictextbox' },
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NumericTextBoxComponent), multi: true },
@@ -4282,12 +4322,17 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     [attr.aria-hidden]="true"
                     [attr.aria-label]="incrementTitle"
                     [title]="incrementTitle"
-                    [class.k-active]="arrowDirection === ArrowDirection.Up"
                     class="k-spinner-increase k-button k-icon-button k-button-solid k-button-solid-base"
+                    [class.k-active]="arrowDirection === ArrowDirection.Up"
                     tabindex="-1"
                 >
-                    <span class="k-button-icon k-icon k-i-caret-alt-up"></span>
-               </button>
+                    <kendo-icon-wrapper
+                        name="caret-alt-up"
+                        innerCssClass="k-button-icon"
+                        [svgIcon]="arrowUpIcon"
+                    >
+                    </kendo-icon-wrapper>
+                </button>
                <button
                     type="button"
                     [kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
@@ -4297,12 +4342,17 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     [class.k-active]="arrowDirection === ArrowDirection.Down"
                     class="k-spinner-decrease k-button k-icon-button k-button-solid k-button-solid-base"
                     tabindex="-1"
-               >
-                    <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
-               </button>
+                >
+                    <kendo-icon-wrapper
+                        name="caret-alt-down"
+                        innerCssClass="k-button-icon"
+                        [svgIcon]="arrowDownIcon"
+                    >
+                    </kendo-icon-wrapper>
+                </button>
             </span>
-      `, isInline: true, directives: [{ type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
+      `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoNumericTextBox',
@@ -4358,12 +4408,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [attr.aria-hidden]="true"
                     [attr.aria-label]="incrementTitle"
                     [title]="incrementTitle"
-                    [class.k-active]="arrowDirection === ArrowDirection.Up"
                     class="k-spinner-increase k-button k-icon-button k-button-solid k-button-solid-base"
+                    [class.k-active]="arrowDirection === ArrowDirection.Up"
                     tabindex="-1"
                 >
-                    <span class="k-button-icon k-icon k-i-caret-alt-up"></span>
-               </button>
+                    <kendo-icon-wrapper
+                        name="caret-alt-up"
+                        innerCssClass="k-button-icon"
+                        [svgIcon]="arrowUpIcon"
+                    >
+                    </kendo-icon-wrapper>
+                </button>
                <button
                     type="button"
                     [kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
@@ -4373,9 +4428,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [class.k-active]="arrowDirection === ArrowDirection.Down"
                     class="k-spinner-decrease k-button k-icon-button k-button-solid k-button-solid-base"
                     tabindex="-1"
-               >
-                    <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
-               </button>
+                >
+                    <kendo-icon-wrapper
+                        name="caret-alt-down"
+                        innerCssClass="k-button-icon"
+                        [svgIcon]="arrowDownIcon"
+                    >
+                    </kendo-icon-wrapper>
+                </button>
             </span>
       `
                 }]
@@ -4460,14 +4520,14 @@ class NumericTextBoxCustomMessagesComponent extends NumericTextBoxMessages {
         return true;
     }
 }
-NumericTextBoxCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumericTextBoxCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-NumericTextBoxCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages", providers: [
+NumericTextBoxCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericTextBoxCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+NumericTextBoxCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages", providers: [
         {
             provide: NumericTextBoxMessages,
             useExisting: forwardRef(() => NumericTextBoxCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumericTextBoxCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericTextBoxCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -4614,7 +4674,7 @@ const mask = ({ prompt, promptPlaceholder }) => rule => new Parser(stream => {
  */
 const literal = _token => new Parser(stream => {
     //    let {char, control} = stream.peek();
-    let char = stream.peek().char;
+    const char = stream.peek().char;
     if (char === _token) {
         stream.eat();
         return new Result(_token, stream, ResultType.Literal);
@@ -4682,7 +4742,7 @@ const token = (rules, creator) => new Parser(stream => {
  * @hidden
  */
 const rawMask = ({ prompt, promptPlaceholder }) => new Parser(stream => {
-    let { char } = stream.next();
+    const { char } = stream.next();
     if (char === prompt) {
         return new Result(promptPlaceholder, stream);
     }
@@ -4692,7 +4752,7 @@ const rawMask = ({ prompt, promptPlaceholder }) => new Parser(stream => {
  * @hidden
  */
 const rawLiteral = includeLiterals => new Parser(stream => {
-    let { char } = stream.next();
+    const { char } = stream.next();
     if (includeLiterals) {
         return new Result(char, stream);
     }
@@ -4789,7 +4849,7 @@ class MaskingService {
     }
     maskInRange(pasted, oldValue, start, end) {
         let value = '';
-        let selection = end;
+        const selection = end;
         const beforeChange = oldValue.split('').slice(0, start);
         const afterChange = oldValue.split('').slice(end);
         sequence(this.maskTokens.slice(start, end))
@@ -4900,9 +4960,9 @@ class MaskingService {
         });
     }
 }
-MaskingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MaskingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-MaskingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MaskingService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MaskingService, decorators: [{
+MaskingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MaskingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MaskingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MaskingService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MaskingService, decorators: [{
             type: Injectable
         }] });
 
@@ -5188,7 +5248,7 @@ class MaskedTextBoxComponent {
      */
     isEmpty() {
         if (this.input) {
-            return !Boolean(this.input.nativeElement.value);
+            return !this.input.nativeElement.value;
         }
     }
     /**
@@ -5267,7 +5327,7 @@ class MaskedTextBoxComponent {
      * @hidden
      */
     ngOnChanges(changes) {
-        if (changes.value) {
+        if (changes['value']) {
             this.value = this.normalizeValue();
         }
         if (!this.mask) {
@@ -5278,7 +5338,7 @@ class MaskedTextBoxComponent {
         this.updateService(next);
         const maskedValue = this.service.maskRaw(this.value);
         this.updateInput(maskedValue, null, true);
-        if (changes.includeLiterals || isChanged('promptPlaceholder', changes)) {
+        if (changes['includeLiterals'] || isChanged('promptPlaceholder', changes)) {
             resolvedPromise.then(() => {
                 this.updateValueWithEvents(this.maskedValue);
             });
@@ -5444,8 +5504,8 @@ class MaskedTextBoxComponent {
         }
     }
 }
-MaskedTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MaskedTextBoxComponent, deps: [{ token: MaskingService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MaskedTextBoxComponent, selector: "kendo-maskedtextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", size: "size", rounded: "rounded", fillMode: "fillMode", mask: "mask", value: "value", rules: "rules", prompt: "prompt", promptPlaceholder: "promptPlaceholder", includeLiterals: "includeLiterals", maskOnFocus: "maskOnFocus", maskValidation: "maskValidation", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { listeners: { "paste": "pasteHandler($event)", "input": "inputHandler($event)" }, properties: { "attr.dir": "this.direction", "class.k-input": "this.hostClasses", "class.k-maskedtextbox": "this.hostClasses", "class.k-disabled": "this.hostDisabledClass" } }, providers: [
+MaskedTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MaskedTextBoxComponent, deps: [{ token: MaskingService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MaskedTextBoxComponent, selector: "kendo-maskedtextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", size: "size", rounded: "rounded", fillMode: "fillMode", mask: "mask", value: "value", rules: "rules", prompt: "prompt", promptPlaceholder: "promptPlaceholder", includeLiterals: "includeLiterals", maskOnFocus: "maskOnFocus", maskValidation: "maskValidation", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { listeners: { "paste": "pasteHandler($event)", "input": "inputHandler($event)" }, properties: { "attr.dir": "this.direction", "class.k-input": "this.hostClasses", "class.k-maskedtextbox": "this.hostClasses", "class.k-disabled": "this.hostDisabledClass" } }, providers: [
         MaskingService,
         {
             multi: true,
@@ -5485,7 +5545,7 @@ MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             }"
         />
     `, isInline: true, directives: [{ type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MaskedTextBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MaskedTextBoxComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoMaskedTextBox',
@@ -5607,17 +5667,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class SlidersCommonModule {
 }
-SlidersCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SlidersCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SlidersCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SlidersCommonModule, declarations: [SliderTicksComponent,
+SlidersCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SlidersCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SlidersCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SlidersCommonModule, declarations: [SliderTicksComponent,
         LabelTemplateDirective], imports: [CommonModule, DraggableModule, EventsModule, ResizeSensorModule], exports: [LabelTemplateDirective,
         SliderTicksComponent,
         DraggableModule,
         EventsModule,
         ResizeSensorModule] });
-SlidersCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SlidersCommonModule, imports: [[CommonModule, DraggableModule, EventsModule, ResizeSensorModule], DraggableModule,
+SlidersCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SlidersCommonModule, imports: [[CommonModule, DraggableModule, EventsModule, ResizeSensorModule], DraggableModule,
         EventsModule,
         ResizeSensorModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SlidersCommonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SlidersCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -5647,14 +5707,14 @@ class SliderCustomMessagesComponent extends SliderMessages {
         return true;
     }
 }
-SliderCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-SliderCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SliderCustomMessagesComponent, selector: "kendo-slider-messages", providers: [
+SliderCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+SliderCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SliderCustomMessagesComponent, selector: "kendo-slider-messages", providers: [
         {
             provide: SliderMessages,
             useExisting: forwardRef(() => SliderCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -5669,7 +5729,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Slider component.
  *
  * @example
@@ -5702,15 +5762,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class SliderModule {
 }
-SliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderModule, declarations: [SliderComponent,
+SliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderModule, declarations: [SliderComponent,
         SliderCustomMessagesComponent,
-        LocalizedSliderMessagesDirective], imports: [CommonModule, SlidersCommonModule], exports: [SliderComponent,
+        LocalizedSliderMessagesDirective], imports: [CommonModule, SlidersCommonModule, IconsModule, ButtonModule], exports: [SliderComponent,
         SliderCustomMessagesComponent,
         LabelTemplateDirective,
         LocalizedSliderMessagesDirective] });
-SliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderModule, imports: [[CommonModule, SlidersCommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderModule, decorators: [{
+SliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderModule, imports: [[CommonModule, SlidersCommonModule, IconsModule, ButtonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SliderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -5724,7 +5784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         LabelTemplateDirective,
                         LocalizedSliderMessagesDirective
                     ],
-                    imports: [CommonModule, SlidersCommonModule]
+                    imports: [CommonModule, SlidersCommonModule, IconsModule, ButtonModule]
                 }]
         }] });
 
@@ -5740,14 +5800,14 @@ class RangeSliderCustomMessagesComponent extends RangeSliderMessages {
         return true;
     }
 }
-RangeSliderCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RangeSliderCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-RangeSliderCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RangeSliderCustomMessagesComponent, selector: "kendo-rangeslider-messages", providers: [
+RangeSliderCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RangeSliderCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+RangeSliderCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: RangeSliderCustomMessagesComponent, selector: "kendo-rangeslider-messages", providers: [
         {
             provide: RangeSliderMessages,
             useExisting: forwardRef(() => RangeSliderCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RangeSliderCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RangeSliderCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -5762,7 +5822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the RangeSlider component.
  *
  * @example
@@ -5795,15 +5855,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class RangeSliderModule {
 }
-RangeSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RangeSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RangeSliderModule, declarations: [RangeSliderComponent,
+RangeSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RangeSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RangeSliderModule, declarations: [RangeSliderComponent,
         RangeSliderCustomMessagesComponent,
         LocalizedRangeSliderMessagesDirective], imports: [CommonModule, SlidersCommonModule], exports: [RangeSliderComponent,
         RangeSliderCustomMessagesComponent,
         LocalizedRangeSliderMessagesDirective,
         LabelTemplateDirective] });
-RangeSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RangeSliderModule, imports: [[CommonModule, SlidersCommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RangeSliderModule, decorators: [{
+RangeSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RangeSliderModule, imports: [[CommonModule, SlidersCommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RangeSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -5833,14 +5893,14 @@ class SwitchCustomMessagesComponent extends Messages {
         return true;
     }
 }
-SwitchCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SwitchCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-SwitchCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SwitchCustomMessagesComponent, selector: "kendo-switch-messages", providers: [
+SwitchCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SwitchCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+SwitchCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SwitchCustomMessagesComponent, selector: "kendo-switch-messages", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => SwitchCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SwitchCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SwitchCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -5855,7 +5915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Switch component.
  *
  * @example
@@ -5887,14 +5947,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class SwitchModule {
 }
-SwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SwitchModule, declarations: [SwitchComponent,
+SwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SwitchModule, declarations: [SwitchComponent,
         SwitchCustomMessagesComponent,
         LocalizedSwitchMessagesDirective], imports: [CommonModule, EventsModule, ResizeSensorModule], exports: [SwitchComponent,
         SwitchCustomMessagesComponent,
         LocalizedSwitchMessagesDirective] });
-SwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SwitchModule, imports: [[CommonModule, EventsModule, ResizeSensorModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SwitchModule, decorators: [{
+SwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SwitchModule, imports: [[CommonModule, EventsModule, ResizeSensorModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SwitchModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -5912,7 +5972,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }] });
 
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the NumericTextBox component.
  *
  * @example
@@ -5944,13 +6004,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class NumericTextBoxModule {
 }
-NumericTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumericTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NumericTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumericTextBoxModule, declarations: [LocalizedNumericTextBoxMessagesDirective,
+NumericTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NumericTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericTextBoxModule, declarations: [LocalizedNumericTextBoxMessagesDirective,
         NumericTextBoxComponent,
-        NumericTextBoxCustomMessagesComponent], imports: [CommonModule, EventsModule], exports: [NumericTextBoxComponent,
+        NumericTextBoxCustomMessagesComponent], imports: [CommonModule, EventsModule, IconsModule], exports: [NumericTextBoxComponent,
         NumericTextBoxCustomMessagesComponent] });
-NumericTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumericTextBoxModule, imports: [[CommonModule, EventsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumericTextBoxModule, decorators: [{
+NumericTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericTextBoxModule, imports: [[CommonModule, EventsModule, IconsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -5962,12 +6022,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         NumericTextBoxComponent,
                         NumericTextBoxCustomMessagesComponent
                     ],
-                    imports: [CommonModule, EventsModule]
+                    imports: [CommonModule, EventsModule, IconsModule]
                 }]
         }] });
 
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the MaskedTextBox component.
  *
  * @example
@@ -5999,10 +6059,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class MaskedTextBoxModule {
 }
-MaskedTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MaskedTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MaskedTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MaskedTextBoxModule, declarations: [MaskedTextBoxComponent], imports: [CommonModule, EventsModule], exports: [MaskedTextBoxComponent] });
-MaskedTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MaskedTextBoxModule, imports: [[CommonModule, EventsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MaskedTextBoxModule, decorators: [{
+MaskedTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MaskedTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MaskedTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MaskedTextBoxModule, declarations: [MaskedTextBoxComponent], imports: [CommonModule, EventsModule], exports: [MaskedTextBoxComponent] });
+MaskedTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MaskedTextBoxModule, imports: [[CommonModule, EventsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MaskedTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MaskedTextBoxComponent],
@@ -6052,9 +6112,9 @@ class TextBoxSuffixTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-TextBoxSuffixTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxSuffixTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-TextBoxSuffixTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxSuffixTemplateDirective, decorators: [{
+TextBoxSuffixTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxSuffixTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+TextBoxSuffixTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxSuffixTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTextBoxSuffixTemplate]'
@@ -6085,9 +6145,9 @@ class TextBoxPrefixTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-TextBoxPrefixTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxPrefixTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-TextBoxPrefixTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxPrefixTemplateDirective, decorators: [{
+TextBoxPrefixTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxPrefixTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+TextBoxPrefixTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxPrefixTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTextBoxPrefixTemplate]'
@@ -6101,9 +6161,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class TextBoxMessages extends ComponentMessages {
 }
-TextBoxMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TextBoxMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextBoxMessages, selector: "kendo-textbox-messages-base", inputs: { clear: "clear" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxMessages, decorators: [{
+TextBoxMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TextBoxMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: TextBoxMessages, selector: "kendo-textbox-messages-base", inputs: { clear: "clear" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -6122,14 +6182,14 @@ class LocalizedTextBoxMessagesDirective extends TextBoxMessages {
         this.service = service;
     }
 }
-LocalizedTextBoxMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedTextBoxMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedTextBoxMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]", providers: [
+LocalizedTextBoxMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedTextBoxMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedTextBoxMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]", providers: [
         {
             provide: TextBoxMessages,
             useExisting: forwardRef(() => LocalizedTextBoxMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedTextBoxMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedTextBoxMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -6142,10 +6202,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const FOCUSED$1 = 'k-focus';
 const DEFAULT_SIZE$5 = 'medium';
 const DEFAULT_ROUNDED$4 = 'medium';
 const DEFAULT_FILL_MODE$3 = 'solid';
+const iconsMap$1 = { checkIcon, exclamationCircleIcon, xIcon };
 class TextBoxComponent {
     constructor(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
         this.localizationService = localizationService;
@@ -6470,7 +6532,7 @@ class TextBoxComponent {
         });
     }
     ngOnChanges(changes) {
-        if (changes.disabled || changes.readonly || changes.value) {
+        if (changes['disabled'] || changes['readonly'] || changes['value']) {
             this.checkClearButton();
         }
     }
@@ -6479,6 +6541,12 @@ class TextBoxComponent {
             this.subscriptions.unsubscribe();
         }
     }
+    /**
+     * @hidden
+     */
+    svgIcon(name) {
+        return iconsMap$1[name];
+    }
     /**
      * Focuses the TextBox.
      *
@@ -6605,25 +6673,49 @@ class TextBoxComponent {
      * @hidden
      */
     get successIconClasses() {
-        return this.successIcon
-            ? `${this.successIcon}`
-            : `k-input-validation-icon k-icon k-i-check`;
+        if (!this.successIcon) {
+            return `check`;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get customSuccessIconClasses() {
+        if (this.successIcon) {
+            return this.successIcon;
+        }
     }
     /**
      * @hidden
      */
     get errorIconClasses() {
-        return this.errorIcon
-            ? `${this.errorIcon}`
-            : `k-input-validation-icon k-icon k-i-exclamation-circle`;
+        if (!this.errorIcon) {
+            return `exclamation-circle`;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get customIconClasses() {
+        if (this.errorIcon) {
+            return this.errorIcon;
+        }
     }
     /**
      * @hidden
      */
-    get clearButtonClasses() {
-        return this.clearButtonIcon
-            ? this.clearButtonIcon
-            : `k-icon k-i-x`;
+    get customClearButtonClasses() {
+        if (this.clearButtonIcon) {
+            return this.clearButtonIcon;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get clearButtonClass() {
+        if (!this.clearButtonIcon) {
+            return 'x';
+        }
     }
     /**
      * @hidden
@@ -6696,8 +6788,8 @@ class TextBoxComponent {
         }
     }
 }
-TextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TextBoxComponent, selector: "kendo-textbox", inputs: { focusableId: "focusableId", title: "title", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", value: "value", selectOnFocus: "selectOnFocus", showSuccessIcon: "showSuccessIcon", showErrorIcon: "showErrorIcon", clearButton: "clearButton", successIcon: "successIcon", errorIcon: "errorIcon", clearButtonIcon: "clearButtonIcon", size: "size", rounded: "rounded", fillMode: "fillMode", tabIndex: "tabIndex", placeholder: "placeholder", maxlength: "maxlength" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-disabled": "this.disabledClass", "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.direction" } }, providers: [
+TextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TextBoxComponent, selector: "kendo-textbox", inputs: { focusableId: "focusableId", title: "title", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", value: "value", selectOnFocus: "selectOnFocus", showSuccessIcon: "showSuccessIcon", showErrorIcon: "showErrorIcon", clearButton: "clearButton", successIcon: "successIcon", errorIcon: "errorIcon", clearButtonIcon: "clearButtonIcon", size: "size", rounded: "rounded", fillMode: "fillMode", tabIndex: "tabIndex", placeholder: "placeholder", maxlength: "maxlength" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-disabled": "this.disabledClass", "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.textbox' },
         {
@@ -6744,18 +6836,37 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             [title]="clearTitle()"
             (keydown.enter)="clearValue($event)"
             (keydown.space)="clearValue($event)">
-                <span [ngClass]="clearButtonClasses"></span>
+                <kendo-icon-wrapper
+                    [name]="clearButtonClass"
+                    [customFontClass]="customClearButtonClasses"
+                    [svgIcon]="svgIcon('xIcon')"
+                >
+                </kendo-icon-wrapper>
         </span>
-        <span *ngIf="hasErrors" [ngClass]="errorIconClasses"></span>
-        <span *ngIf="isSuccessful" [ngClass]="successIconClasses"></span>
+        <kendo-icon-wrapper
+            *ngIf="hasErrors"
+            innerCssClass="k-input-validation-icon"
+            [name]="errorIconClasses"
+            [customFontClass]="customIconClasses"
+            [svgIcon]="svgIcon('exclamationCircleIcon')"
+        >
+        </kendo-icon-wrapper>
+        <kendo-icon-wrapper
+            *ngIf="isSuccessful"
+            innerCssClass="k-input-validation-icon"
+            [name]="successIconClasses"
+            [customFontClass]="customSuccessIconClasses"
+            [svgIcon]="svgIcon('checkIcon')"
+        >
+        </kendo-icon-wrapper>
         <span class="k-input-suffix">
             <ng-template
                 *ngIf="suffixTemplate"
                 [ngTemplateOutlet]="suffixTemplate?.templateRef">
             </ng-template>
         </span>
-    `, isInline: true, directives: [{ type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxComponent, decorators: [{
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoTextBox',
@@ -6808,10 +6919,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [title]="clearTitle()"
             (keydown.enter)="clearValue($event)"
             (keydown.space)="clearValue($event)">
-                <span [ngClass]="clearButtonClasses"></span>
+                <kendo-icon-wrapper
+                    [name]="clearButtonClass"
+                    [customFontClass]="customClearButtonClasses"
+                    [svgIcon]="svgIcon('xIcon')"
+                >
+                </kendo-icon-wrapper>
         </span>
-        <span *ngIf="hasErrors" [ngClass]="errorIconClasses"></span>
-        <span *ngIf="isSuccessful" [ngClass]="successIconClasses"></span>
+        <kendo-icon-wrapper
+            *ngIf="hasErrors"
+            innerCssClass="k-input-validation-icon"
+            [name]="errorIconClasses"
+            [customFontClass]="customIconClasses"
+            [svgIcon]="svgIcon('exclamationCircleIcon')"
+        >
+        </kendo-icon-wrapper>
+        <kendo-icon-wrapper
+            *ngIf="isSuccessful"
+            innerCssClass="k-input-validation-icon"
+            [name]="successIconClasses"
+            [customFontClass]="customSuccessIconClasses"
+            [svgIcon]="svgIcon('checkIcon')"
+        >
+        </kendo-icon-wrapper>
         <span class="k-input-suffix">
             <ng-template
                 *ngIf="suffixTemplate"
@@ -6905,14 +7035,14 @@ class TextBoxCustomMessagesComponent extends TextBoxMessages {
         return true;
     }
 }
-TextBoxCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TextBoxCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TextBoxCustomMessagesComponent, selector: "kendo-textbox-messages", providers: [
+TextBoxCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TextBoxCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TextBoxCustomMessagesComponent, selector: "kendo-textbox-messages", providers: [
         {
             provide: TextBoxMessages,
             useExisting: forwardRef(() => TextBoxCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -6949,9 +7079,9 @@ class InputSeparatorComponent {
         this.hostClass = true;
     }
 }
-InputSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InputSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", host: { properties: { "class.k-input-separator": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InputSeparatorComponent, decorators: [{
+InputSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: InputSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", host: { properties: { "class.k-input-separator": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: InputSeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-input-separator, kendo-textbox-separator',
@@ -6974,12 +7104,12 @@ const SHARED_DIRECTIVES = [
  */
 class SharedModule {
 }
-SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, declarations: [InputSeparatorComponent,
+SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, declarations: [InputSeparatorComponent,
         TextAreaDirective], exports: [InputSeparatorComponent,
         TextAreaDirective] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, decorators: [{
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SHARED_DIRECTIVES],
@@ -6988,7 +7118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }] });
 
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the TextBox directive.
  *
  * @example
@@ -7020,21 +7150,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class TextBoxModule {
 }
-TextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxModule, declarations: [TextBoxDirective,
+TextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxModule, declarations: [TextBoxDirective,
         TextBoxComponent,
         TextBoxSuffixTemplateDirective,
         TextBoxPrefixTemplateDirective,
         TextBoxCustomMessagesComponent,
-        LocalizedTextBoxMessagesDirective], imports: [CommonModule, EventsModule, SharedModule], exports: [TextBoxDirective,
+        LocalizedTextBoxMessagesDirective], imports: [CommonModule, EventsModule, SharedModule, IconsModule], exports: [TextBoxDirective,
         TextBoxComponent,
         TextBoxSuffixTemplateDirective,
         TextBoxPrefixTemplateDirective,
         EventsModule,
         TextBoxCustomMessagesComponent,
         LocalizedTextBoxMessagesDirective, InputSeparatorComponent, TextAreaDirective] });
-TextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxModule, imports: [[CommonModule, EventsModule, SharedModule], EventsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxModule, decorators: [{
+TextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxModule, imports: [[CommonModule, EventsModule, SharedModule, IconsModule], EventsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -7055,7 +7185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         LocalizedTextBoxMessagesDirective,
                         SHARED_DIRECTIVES
                     ],
-                    imports: [CommonModule, EventsModule, SharedModule]
+                    imports: [CommonModule, EventsModule, SharedModule, IconsModule]
                 }]
         }] });
 
@@ -7142,9 +7272,9 @@ class TextFieldsBase {
         this.disabled = isDisabled;
     }
 }
-TextFieldsBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextFieldsBase, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TextFieldsBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TextFieldsBase, selector: "kendo-textfield-base", inputs: { title: "title", disabled: "disabled", readonly: "readonly", value: "value", selectOnFocus: "selectOnFocus", placeholder: "placeholder" }, outputs: { inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-disabled": "this.disabledClass", "attr.dir": "this.direction" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextFieldsBase, decorators: [{
+TextFieldsBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextFieldsBase, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+TextFieldsBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TextFieldsBase, selector: "kendo-textfield-base", inputs: { title: "title", disabled: "disabled", readonly: "readonly", value: "value", selectOnFocus: "selectOnFocus", placeholder: "placeholder" }, outputs: { inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-disabled": "this.disabledClass", "attr.dir": "this.direction" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextFieldsBase, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-textfield-base',
@@ -7285,7 +7415,7 @@ class TextAreaComponent extends TextFieldsBase {
          * @hidden
          */
         this.handleInput = (ev) => {
-            let incomingValue = ev.target.value;
+            const incomingValue = ev.target.value;
             this.updateValue(incomingValue);
             this.resize();
         };
@@ -7640,8 +7770,8 @@ class TextAreaComponent extends TextFieldsBase {
         }
     }
 }
-TextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TextAreaComponent, selector: "kendo-textarea", inputs: { focusableId: "focusableId", flow: "flow", rows: "rows", cols: "cols", maxlength: "maxlength", tabindex: "tabindex", tabIndex: "tabIndex", resizable: "resizable", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.k-textarea": "this.hostClasses", "class.k-input": "this.hostClasses", "class.!k-flex-col": "this.flowCol", "class.!k-flex-row": "this.flowRow" } }, providers: [
+TextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextAreaComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TextAreaComponent, selector: "kendo-textarea", inputs: { focusableId: "focusableId", flow: "flow", rows: "rows", cols: "cols", maxlength: "maxlength", tabindex: "tabindex", tabIndex: "tabIndex", resizable: "resizable", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.k-textarea": "this.hostClasses", "class.k-input": "this.hostClasses", "class.!k-flex-col": "this.flowCol", "class.!k-flex-row": "this.flowRow" } }, providers: [
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.textarea' },
         {
@@ -7676,7 +7806,7 @@ TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </textarea>
             <ng-content select="kendo-textarea-suffix"></ng-content>
     `, isInline: true, directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoTextArea',
@@ -7783,9 +7913,9 @@ class TextAreaSuffixComponent {
         this.hostClass = true;
     }
 }
-TextAreaSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextAreaSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", host: { properties: { "class.k-input-suffix": "this.hostClass" } }, exportAs: ["kendoTextAreaSuffix"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaSuffixComponent, decorators: [{
+TextAreaSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextAreaSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextAreaSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", host: { properties: { "class.k-input-suffix": "this.hostClass" } }, exportAs: ["kendoTextAreaSuffix"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextAreaSuffixComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoTextAreaSuffix',
@@ -7798,7 +7928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the TextArea component.
  *
  * @example
@@ -7830,13 +7960,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class TextAreaModule {
 }
-TextAreaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TextAreaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaModule, declarations: [TextAreaComponent,
+TextAreaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TextAreaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextAreaModule, declarations: [TextAreaComponent,
         TextAreaSuffixComponent], imports: [CommonModule, EventsModule, SharedModule], exports: [TextAreaComponent,
         EventsModule,
         TextAreaSuffixComponent, InputSeparatorComponent, TextAreaDirective] });
-TextAreaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaModule, imports: [[CommonModule, EventsModule, SharedModule], EventsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaModule, decorators: [{
+TextAreaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextAreaModule, imports: [[CommonModule, EventsModule, SharedModule], EventsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TextAreaModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -7853,6 +7983,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
+/**
+ * @hidden
+ */
+class ColorPickerLocalizationService extends LocalizationService {
+    constructor(prefix, messageService, _rtl) {
+        super(prefix, messageService, _rtl);
+    }
+}
+ColorPickerLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+ColorPickerLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerLocalizationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerLocalizationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [L10N_PREFIX]
+                }] }, { type: i1.MessageService, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [RTL]
+                }] }]; } });
+
+/**
+ * @hidden
+ */
+class FlatColorPickerLocalizationService extends LocalizationService {
+    constructor(prefix, messageService, _rtl, colorPickerLocalization) {
+        super(prefix, messageService, _rtl);
+        this.colorPickerLocalization = colorPickerLocalization;
+    }
+    get(shortKey) {
+        if (this.colorPickerLocalization) {
+            return this.colorPickerLocalization.get(shortKey);
+        }
+        return super.get(shortKey);
+    }
+}
+FlatColorPickerLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FlatColorPickerLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }, { token: ColorPickerLocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+FlatColorPickerLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FlatColorPickerLocalizationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FlatColorPickerLocalizationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [L10N_PREFIX]
+                }] }, { type: i1.MessageService, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [RTL]
+                }] }, { type: ColorPickerLocalizationService, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ColorPickerLocalizationService]
+                }] }]; } });
+
+/**
+ * @hidden
+ */
+const DEFAULT_OUTPUT_FORMAT = 'rgba';
+/**
+ * @hidden
+ */
+const DEFAULT_GRADIENT_BACKGROUND_COLOR = 'rgba(255, 0, 0, 1)';
+/**
+ * @hidden
+ */
+const DRAGHANDLE_MOVE_SPEED = 5;
+/**
+ * @hidden
+ */
+const DRAGHANDLE_MOVE_SPEED_SMALL_STEP = 2;
+/**
+ * @hidden
+ */
+const AAA_RATIO = 7.0;
+/**
+ * @hidden
+ */
+const AA_RATIO = 4.5;
+/**
+ * @hidden
+ */
+const DEFAULT_PRESET$1 = 'office';
+/**
+ * @hidden
+ */
+const DEFAULT_ACCESSIBLE_PRESET$1 = 'accessible';
+/**
+ * @hidden
+ */
+const STEP_COUNT = 16;
+
 // eslint-disable max-line-length
 /**
  * @hidden
@@ -7914,6 +8141,38 @@ const PALETTEPRESETS = {
 
 ;
 
+/**
+ * @hidden
+ */
+class FlatColorPickerService {
+    getPaletteSettings(settings, format) {
+        const defaultPreset = (format !== 'name') ? DEFAULT_PRESET$1 : DEFAULT_ACCESSIBLE_PRESET$1;
+        const settingsPalette = settings.palette;
+        const presetColumns = typeof settingsPalette === 'string' && PALETTEPRESETS[settingsPalette] ?
+            PALETTEPRESETS[settingsPalette].columns :
+            undefined;
+        return {
+            palette: settingsPalette || defaultPreset,
+            tileSize: settings.tileSize || 24,
+            columns: settings.columns || presetColumns || 10
+        };
+    }
+    paletteTileLayout(tileSize) {
+        if (typeof tileSize === 'number') {
+            return { width: tileSize, height: tileSize };
+        }
+        return {
+            width: tileSize.width ? tileSize.width : tileSize.height,
+            height: tileSize.height ? tileSize.height : tileSize.width
+        };
+    }
+}
+FlatColorPickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FlatColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FlatColorPickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FlatColorPickerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FlatColorPickerService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * Arguments for the `cancel` event of the ColorPicker and FlatColorPicker components.
  */
@@ -8122,7 +8381,7 @@ const getRGBFromRGBA = (foregroundColor, backgroundColor) => {
  * Returns the relative luminance.
  */
 const getLuminance = (rgb) => {
-    let a = [rgb.r, rgb.g, rgb.b].map(function (v) {
+    const a = [rgb.r, rgb.g, rgb.b].map(function (v) {
         v /= 255;
         return v <= 0.03928
             ? v / 12.92
@@ -8235,14 +8494,21 @@ const svgPath = (points, command) => {
 /**
  * @hidden
  */
-class ColorPickerLocalizationService extends LocalizationService {
-    constructor(prefix, messageService, _rtl) {
+class ColorGradientLocalizationService extends LocalizationService {
+    constructor(prefix, messageService, _rtl, flatColorPickerLocalization) {
         super(prefix, messageService, _rtl);
+        this.flatColorPickerLocalization = flatColorPickerLocalization;
+    }
+    get(shortKey) {
+        if (this.flatColorPickerLocalization) {
+            return this.flatColorPickerLocalization.get(shortKey);
+        }
+        return super.get(shortKey);
     }
 }
-ColorPickerLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-ColorPickerLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerLocalizationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerLocalizationService, decorators: [{
+ColorGradientLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorGradientLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }, { token: FlatColorPickerLocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+ColorGradientLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorGradientLocalizationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorGradientLocalizationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
@@ -8254,431 +8520,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }, {
                     type: Inject,
                     args: [RTL]
+                }] }, { type: FlatColorPickerLocalizationService, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [FlatColorPickerLocalizationService]
                 }] }]; } });
 
 /**
  * @hidden
  */
-const DEFAULT_OUTPUT_FORMAT = 'rgba';
-/**
- * @hidden
- */
-const DEFAULT_GRADIENT_BACKGROUND_COLOR = 'rgba(255, 0, 0, 1)';
-/**
- * @hidden
- */
-const DRAGHANDLE_MOVE_SPEED = 5;
-/**
- * @hidden
- */
-const DRAGHANDLE_MOVE_SPEED_SMALL_STEP = 2;
-/**
- * @hidden
- */
-const AAA_RATIO = 7.0;
-/**
- * @hidden
- */
-const AA_RATIO = 4.5;
-/**
- * @hidden
- */
-const DEFAULT_PRESET$1 = 'office';
-/**
- * @hidden
- */
-const DEFAULT_ACCESSIBLE_PRESET$1 = 'accessible';
-/**
- * @hidden
- */
-const STEP_COUNT = 16;
-
-/**
- * @hidden
- */
-class FlatColorPickerLocalizationService extends LocalizationService {
-    constructor(prefix, messageService, _rtl, colorPickerLocalization) {
-        super(prefix, messageService, _rtl);
-        this.colorPickerLocalization = colorPickerLocalization;
-    }
-    get(shortKey) {
-        if (this.colorPickerLocalization) {
-            return this.colorPickerLocalization.get(shortKey);
-        }
-        return super.get(shortKey);
-    }
-}
-FlatColorPickerLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }, { token: ColorPickerLocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-FlatColorPickerLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerLocalizationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerLocalizationService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [L10N_PREFIX]
-                }] }, { type: i1.MessageService, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [RTL]
-                }] }, { type: ColorPickerLocalizationService, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [ColorPickerLocalizationService]
-                }] }]; } });
-
-/**
- * @hidden
- */
-class FlatColorPickerService {
-    getPaletteSettings(settings, format) {
-        const defaultPreset = (format !== 'name') ? DEFAULT_PRESET$1 : DEFAULT_ACCESSIBLE_PRESET$1;
-        const settingsPalette = settings.palette;
-        const presetColumns = typeof settingsPalette === 'string' && PALETTEPRESETS[settingsPalette] ?
-            PALETTEPRESETS[settingsPalette].columns :
-            undefined;
-        return {
-            palette: settingsPalette || defaultPreset,
-            tileSize: settings.tileSize || 24,
-            columns: settings.columns || presetColumns || 10
-        };
-    }
-    paletteTileLayout(tileSize) {
-        if (typeof tileSize === 'number') {
-            return { width: tileSize, height: tileSize };
-        }
-        return {
-            width: tileSize.width ? tileSize.width : tileSize.height,
-            height: tileSize.height ? tileSize.height : tileSize.width
-        };
-    }
-}
-FlatColorPickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FlatColorPickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * @hidden
- */
-class FlatColorPickerHeaderComponent {
-    constructor(localizationService) {
-        this.localizationService = localizationService;
-        this.hostClasses = true;
-        this.innerTabIndex = -1;
-        this.viewChange = new EventEmitter();
-        this.valuePaneClick = new EventEmitter();
-        this.clearButtonClick = new EventEmitter();
-        this.tabOut = new EventEmitter();
-    }
-    onViewButtonClick(view) {
-        this.activeView = view;
-        this.viewChange.emit(view);
-    }
-    get viewButtons() {
-        return this.views && this.views.indexOf('gradient') >= 0 && this.views.indexOf('palette') >= 0;
-    }
-    getViewButtonIcon(view) {
-        return view === 'gradient' ? 'k-i-color-canvas' : 'k-i-palette';
-    }
-    getText(text) {
-        return this.localizationService.get(text);
-    }
-    onHeaderTabOut(ev, index) {
-        if (index === 0) {
-            ev.preventDefault();
-            this.tabOut.emit();
-        }
-    }
-}
-FlatColorPickerHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerHeaderComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: { clearButton: "clearButton", activeView: "activeView", views: "views", preview: "preview", innerTabIndex: "innerTabIndex", value: "value", selection: "selection" }, outputs: { viewChange: "viewChange", valuePaneClick: "valuePaneClick", clearButtonClick: "clearButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-header": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "clearButtonElement", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef }, { propertyName: "viewButtonsCollection", predicate: ["viewButtons"], descendants: true, read: ElementRef }], ngImport: i0, template: `
-        <div class="k-coloreditor-header-actions k-hstack">
-            <div 
-                *ngIf="viewButtons" 
-                class="k-button-group k-button-group-flat">
-                <button *ngFor="let view of views; let i = index;"
-                    #viewButtons
-                    type="button"
-                    [tabindex]="innerTabIndex.toString()"
-                    (click)="onViewButtonClick(view)"
-                    (keydown.shift.tab)="onHeaderTabOut($event, i)"
-                    class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
-                    [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
-                    [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
-                    [attr.aria-pressed]="activeView === view"
-                    [ngClass]="activeView === view ? 'k-selected' : ''">
-                    <span
-                        class="k-button-icon k-icon"
-                        [ngClass]="getViewButtonIcon(view)">
-                    </span>
-                </button>
-            </div>
-        </div>
-        <div class="k-spacer"></div>
-        <div class="k-coloreditor-header-actions k-hstack">
-            <button
-                [tabindex]="innerTabIndex.toString()"
-                *ngIf="clearButton"
-                #clearButton
-                type="button"
-                class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset"
-                [attr.aria-label]="getText('clearButton')"
-                [attr.title]="getText('clearButton')"
-                (click)="clearButtonClick.emit()">
-                    <span class="k-button-icon k-icon k-i-droplet-slash"></span>
-            </button>
-            <div class="k-coloreditor-preview k-vstack" *ngIf="preview" aria-hidden="true">
-                <span
-                    class="k-coloreditor-preview-color k-color-preview"
-                    [attr.title]="getText('previewColor')"
-                    [style.background-color]="selection">
-                </span>
-                <span class="k-coloreditor-current-color k-color-preview"
-                    [style.background-color]="value"
-                    [attr.title]="getText('revertSelection')"
-                    (click)="valuePaneClick.emit($event)">
-                </span>
-            </div>
-        </div>
-    `, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerHeaderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: '[kendoFlatColorPickerHeader]',
-                    template: `
-        <div class="k-coloreditor-header-actions k-hstack">
-            <div 
-                *ngIf="viewButtons" 
-                class="k-button-group k-button-group-flat">
-                <button *ngFor="let view of views; let i = index;"
-                    #viewButtons
-                    type="button"
-                    [tabindex]="innerTabIndex.toString()"
-                    (click)="onViewButtonClick(view)"
-                    (keydown.shift.tab)="onHeaderTabOut($event, i)"
-                    class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
-                    [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
-                    [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
-                    [attr.aria-pressed]="activeView === view"
-                    [ngClass]="activeView === view ? 'k-selected' : ''">
-                    <span
-                        class="k-button-icon k-icon"
-                        [ngClass]="getViewButtonIcon(view)">
-                    </span>
-                </button>
-            </div>
-        </div>
-        <div class="k-spacer"></div>
-        <div class="k-coloreditor-header-actions k-hstack">
-            <button
-                [tabindex]="innerTabIndex.toString()"
-                *ngIf="clearButton"
-                #clearButton
-                type="button"
-                class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset"
-                [attr.aria-label]="getText('clearButton')"
-                [attr.title]="getText('clearButton')"
-                (click)="clearButtonClick.emit()">
-                    <span class="k-button-icon k-icon k-i-droplet-slash"></span>
-            </button>
-            <div class="k-coloreditor-preview k-vstack" *ngIf="preview" aria-hidden="true">
-                <span
-                    class="k-coloreditor-preview-color k-color-preview"
-                    [attr.title]="getText('previewColor')"
-                    [style.background-color]="selection">
-                </span>
-                <span class="k-coloreditor-current-color k-color-preview"
-                    [style.background-color]="value"
-                    [attr.title]="getText('revertSelection')"
-                    (click)="valuePaneClick.emit($event)">
-                </span>
-            </div>
-        </div>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-coloreditor-header']
-            }, {
-                type: HostBinding,
-                args: ['class.k-hstack']
-            }], clearButton: [{
-                type: Input
-            }], activeView: [{
-                type: Input
-            }], views: [{
-                type: Input
-            }], preview: [{
-                type: Input
-            }], innerTabIndex: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], selection: [{
-                type: Input
-            }], viewChange: [{
-                type: Output
-            }], valuePaneClick: [{
-                type: Output
-            }], clearButtonClick: [{
-                type: Output
-            }], tabOut: [{
-                type: Output
-            }], viewButtonsCollection: [{
-                type: ViewChildren,
-                args: ['viewButtons', { read: ElementRef }]
-            }], clearButtonElement: [{
-                type: ViewChild,
-                args: ['clearButton', { read: ElementRef }]
-            }] } });
-
-/**
- * @hidden
- */
-class ColorGradientLocalizationService extends LocalizationService {
-    constructor(prefix, messageService, _rtl, flatColorPickerLocalization) {
-        super(prefix, messageService, _rtl);
-        this.flatColorPickerLocalization = flatColorPickerLocalization;
-    }
-    get(shortKey) {
-        if (this.flatColorPickerLocalization) {
-            return this.flatColorPickerLocalization.get(shortKey);
-        }
-        return super.get(shortKey);
-    }
-}
-ColorGradientLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorGradientLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }, { token: FlatColorPickerLocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-ColorGradientLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorGradientLocalizationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorGradientLocalizationService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [L10N_PREFIX]
-                }] }, { type: i1.MessageService, decorators: [{
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [RTL]
-                }] }, { type: FlatColorPickerLocalizationService, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [FlatColorPickerLocalizationService]
-                }] }]; } });
-
-/**
- * @hidden
- */
-class ColorContrastSvgComponent {
-    constructor() {
-        this.hostClass = true;
-    }
-    ngAfterViewInit() {
-        this.metrics = this.wrapper.getBoundingClientRect();
-        this.oldA = this.hsva.value.a;
-        this.oldH = this.hsva.value.h;
-        this.hsva.subscribe((value) => {
-            if (value.h !== this.oldH || value.a !== this.oldA) {
-                this.oldH = value.h;
-                this.oldA = value.a;
-                this.setPaths();
-            }
-        });
-    }
-    ngOnChanges(changes) {
-        if (isPresent(changes.backgroundColor) && this.metrics) {
-            this.setPaths();
-        }
-    }
-    setPaths() {
-        const bezierCommandCalc = bezierCommand(controlPoint(line));
-        this.paths = [svgPath(this.getPaths(AA_RATIO, STEP_COUNT), bezierCommandCalc),
-            svgPath(this.getPaths(AA_RATIO, STEP_COUNT, true), bezierCommandCalc),
-            svgPath(this.getPaths(AAA_RATIO, STEP_COUNT), bezierCommandCalc),
-            svgPath(this.getPaths(AAA_RATIO, STEP_COUNT, true), bezierCommandCalc)];
-    }
-    findValue(contrast, saturation, low, high, comparer) {
-        const mid = (low + high) / 2;
-        const hsva = Object.assign({}, this.hsva.value, { s: saturation / this.metrics.width, v: 1 - mid / this.metrics.height });
-        const currentContrast = getContrastFromTwoRGBAs(getRGBA(getColorFromHSV(hsva)), getRGBA(this.backgroundColor || ''));
-        if (low + 0.5 > high) {
-            if (currentContrast < contrast + 1 && currentContrast > contrast - 1) {
-                return mid;
-            }
-            else {
-                return null;
-            }
-        }
-        if (comparer(currentContrast, contrast)) {
-            return this.findValue(contrast, saturation, low, high - (high - low) / 2, comparer);
-        }
-        return this.findValue(contrast, saturation, low + (high - low) / 2, high, comparer);
-    }
-    getPaths(contrast, stepCount, reversed = false) {
-        const points = [];
-        for (let i = 0; i <= this.metrics.width; i += this.metrics.width / stepCount) {
-            const value = this.findValue(contrast, i, 0, this.metrics.height, reversed ? ((a, b) => a < b) : ((a, b) => a > b));
-            if (value !== null) {
-                points.push([i, value]);
-            }
-        }
-        return points;
-    }
-}
-ColorContrastSvgComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorContrastSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColorContrastSvgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: { wrapper: "wrapper", hsva: "hsva", backgroundColor: "backgroundColor" }, host: { properties: { "class.k-color-contrast-svg": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
-        <svg:path *ngFor="let path of paths" [attr.d]="path" fill="none" stroke="white" stroke-width="1"></svg:path>
-    `, isInline: true, directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorContrastSvgComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: '[kendoColorContrastSvg]',
-                    template: `
-        <svg:path *ngFor="let path of paths" [attr.d]="path" fill="none" stroke="white" stroke-width="1"></svg:path>
-    `
-                }]
-        }], propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.k-color-contrast-svg']
-            }], wrapper: [{
-                type: Input
-            }], hsva: [{
-                type: Input
-            }], backgroundColor: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-class NumericLabelDirective {
-    constructor(host) {
-        this.host = host;
-    }
-    ngOnInit() {
-        const localizationToken = `${this.kendoAdditionalNumericLabel}ChannelLabel`;
-        this.host.numericInput.nativeElement.setAttribute('aria-label', this.localizationService.get(localizationToken));
-    }
-}
-NumericLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumericLabelDirective, deps: [{ token: NumericTextBoxComponent }], target: i0.ɵɵFactoryTarget.Directive });
-NumericLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: { kendoAdditionalNumericLabel: "kendoAdditionalNumericLabel", localizationService: "localizationService" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumericLabelDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kendoAdditionalNumericLabel]' }]
-        }], ctorParameters: function () { return [{ type: NumericTextBoxComponent }]; }, propDecorators: { kendoAdditionalNumericLabel: [{
-                type: Input
-            }], localizationService: [{
-                type: Input
-            }] } });
-
+class NumericLabelDirective {
+    constructor(host) {
+        this.host = host;
+    }
+    ngOnInit() {
+        const localizationToken = `${this.kendoAdditionalNumericLabel}ChannelLabel`;
+        this.host.numericInput.nativeElement.setAttribute('aria-label', this.localizationService.get(localizationToken));
+    }
+}
+NumericLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericLabelDirective, deps: [{ token: NumericTextBoxComponent }], target: i0.ɵɵFactoryTarget.Directive });
+NumericLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: { kendoAdditionalNumericLabel: "kendoAdditionalNumericLabel", localizationService: "localizationService" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NumericLabelDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoAdditionalNumericLabel]' }]
+        }], ctorParameters: function () { return [{ type: NumericTextBoxComponent }]; }, propDecorators: { kendoAdditionalNumericLabel: [{
+                type: Input
+            }], localizationService: [{
+                type: Input
+            }] } });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * @hidden
  */
@@ -8720,6 +8592,10 @@ class ColorInputComponent {
          * The rgba inputs values.
          */
         this.rgba = {};
+        /**
+         * @hidden
+         */
+        this.caretAltExpandIcon = caretAltExpandIcon;
         this.subscriptions = new Subscription();
     }
     /**
@@ -8747,7 +8623,7 @@ class ColorInputComponent {
         }
     }
     ngOnChanges(changes) {
-        if (isPresent(changes.value) && !this.isFocused) {
+        if (isPresent(changes['value']) && !this.isFocused) {
             this.hex = parseColor(this.value, 'hex', this.opacity);
             this.rgba = getRGBA(this.value);
             this.rgba.a = parseColor(this.value, 'rgba', this.opacity) ? this.rgba.a : 1;
@@ -8802,22 +8678,25 @@ class ColorInputComponent {
         this.subscriptions.add(this.renderer.listen(this.toggleFormatButton.nativeElement, 'click', () => this.toggleFormatView()));
     }
     lastInput() {
-        var _a;
-        return ((_a = this.hexInput) === null || _a === void 0 ? void 0 : _a.nativeElement) || this.opacityInput || this.blueInput;
+        return this.hexInput?.nativeElement || this.opacityInput || this.blueInput;
     }
 }
-ColorInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorInputComponent, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", tabindex: "tabindex", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", tabOut: "tabOut" }, host: { properties: { "class.k-colorgradient-inputs": "this.colorInputClass", "class.k-hstack": "this.colorInputClass" } }, viewQueries: [{ propertyName: "opacityInput", first: true, predicate: ["opacityInput"], descendants: true }, { propertyName: "hexInput", first: true, predicate: ["hexInput"], descendants: true }, { propertyName: "blueInput", first: true, predicate: ["blueInput"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+ColorInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColorInputComponent, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", tabindex: "tabindex", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", tabOut: "tabOut" }, host: { properties: { "class.k-colorgradient-inputs": "this.colorInputClass", "class.k-hstack": "this.colorInputClass" } }, viewQueries: [{ propertyName: "opacityInput", first: true, predicate: ["opacityInput"], descendants: true }, { propertyName: "hexInput", first: true, predicate: ["hexInput"], descendants: true }, { propertyName: "blueInput", first: true, predicate: ["blueInput"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <div class="k-vstack">
-            <button #toggleFormatButton
-                class="k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
+            <button 
+                kendoButton
+                type="button"
+                fillMode="flat"
+                #toggleFormatButton
+                icon="caret-alt-expand"
+                [svgIcon]="caretAltExpandIcon"
+                class="k-colorgradient-toggle-mode"
                 [attr.aria-label]="formatButtonTitle"
                 [attr.title]="formatButtonTitle"
                 [disabled]="disabled"
                 [tabindex]="tabindex.toString()"
-                type="button"
             >
-                <span class="k-button-icon k-icon k-i-caret-alt-expand"></span>
             </button>
         </div>
         <div *ngIf="formatView === 'hex'" class="k-vstack">
@@ -8920,22 +8799,26 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
             </div>
         </ng-container>
-    `, isInline: true, components: [{ type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorInputComponent, decorators: [{
+    `, 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"] }, { type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-colorinput',
                     template: `
         <div class="k-vstack">
-            <button #toggleFormatButton
-                class="k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
+            <button 
+                kendoButton
+                type="button"
+                fillMode="flat"
+                #toggleFormatButton
+                icon="caret-alt-expand"
+                [svgIcon]="caretAltExpandIcon"
+                class="k-colorgradient-toggle-mode"
                 [attr.aria-label]="formatButtonTitle"
                 [attr.title]="formatButtonTitle"
                 [disabled]="disabled"
                 [tabindex]="tabindex.toString()"
-                type="button"
             >
-                <span class="k-button-icon k-icon k-i-caret-alt-expand"></span>
             </button>
         </div>
         <div *ngIf="formatView === 'hex'" class="k-vstack">
@@ -9075,7 +8958,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['blueInput']
             }], toggleFormatButton: [{
                 type: ViewChild,
-                args: ['toggleFormatButton', { static: false }]
+                args: ['toggleFormatButton', { static: false, read: ElementRef }]
+            }] } });
+
+/**
+ * @hidden
+ */
+class ColorContrastSvgComponent {
+    constructor() {
+        this.hostClass = true;
+    }
+    ngAfterViewInit() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        this.metrics = this.wrapper.getBoundingClientRect();
+        this.oldA = this.hsva.value.a;
+        this.oldH = this.hsva.value.h;
+        this.hsva.subscribe((value) => {
+            if (value.h !== this.oldH || value.a !== this.oldA) {
+                this.oldH = value.h;
+                this.oldA = value.a;
+                this.setPaths();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        if (isPresent(changes['backgroundColor']) && this.metrics) {
+            this.setPaths();
+        }
+    }
+    setPaths() {
+        const bezierCommandCalc = bezierCommand(controlPoint(line));
+        this.paths = [svgPath(this.getPaths(AA_RATIO, STEP_COUNT), bezierCommandCalc),
+            svgPath(this.getPaths(AA_RATIO, STEP_COUNT, true), bezierCommandCalc),
+            svgPath(this.getPaths(AAA_RATIO, STEP_COUNT), bezierCommandCalc),
+            svgPath(this.getPaths(AAA_RATIO, STEP_COUNT, true), bezierCommandCalc)];
+    }
+    findValue(contrast, saturation, low, high, comparer) {
+        const mid = (low + high) / 2;
+        const hsva = Object.assign({}, this.hsva.value, { s: saturation / this.metrics.width, v: 1 - mid / this.metrics.height });
+        const currentContrast = getContrastFromTwoRGBAs(getRGBA(getColorFromHSV(hsva)), getRGBA(this.backgroundColor || ''));
+        if (low + 0.5 > high) {
+            if (currentContrast < contrast + 1 && currentContrast > contrast - 1) {
+                return mid;
+            }
+            else {
+                return null;
+            }
+        }
+        if (comparer(currentContrast, contrast)) {
+            return this.findValue(contrast, saturation, low, high - (high - low) / 2, comparer);
+        }
+        return this.findValue(contrast, saturation, low + (high - low) / 2, high, comparer);
+    }
+    getPaths(contrast, stepCount, reversed = false) {
+        const points = [];
+        for (let i = 0; i <= this.metrics.width; i += this.metrics.width / stepCount) {
+            const value = this.findValue(contrast, i, 0, this.metrics.height, reversed ? ((a, b) => a < b) : ((a, b) => a > b));
+            if (value !== null) {
+                points.push([i, value]);
+            }
+        }
+        return points;
+    }
+}
+ColorContrastSvgComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorContrastSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColorContrastSvgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: { wrapper: "wrapper", hsva: "hsva", backgroundColor: "backgroundColor" }, host: { properties: { "class.k-color-contrast-svg": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
+        <svg:path *ngFor="let path of paths" [attr.d]="path" fill="none" stroke="white" stroke-width="1"></svg:path>
+    `, isInline: true, directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorContrastSvgComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoColorContrastSvg]',
+                    template: `
+        <svg:path *ngFor="let path of paths" [attr.d]="path" fill="none" stroke="white" stroke-width="1"></svg:path>
+    `
+                }]
+        }], propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-color-contrast-svg']
+            }], wrapper: [{
+                type: Input
+            }], hsva: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
             }] } });
 
 /**
@@ -9084,6 +9053,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class ContrastValidationComponent {
     constructor(localization) {
         this.localization = localization;
+        this.checkIcon = checkIcon;
+        this.xCircleIcon = xCircleIcon;
     }
     get passMessage() {
         return this.localization.get('passContrast');
@@ -9092,25 +9063,25 @@ class ContrastValidationComponent {
         return this.localization.get('failContrast');
     }
     get contrastText() {
-        let ratio = this.type === 'AA' ? AA_RATIO : AAA_RATIO;
+        const ratio = this.type === 'AA' ? AA_RATIO : AAA_RATIO;
         return `${this.type}: ${ratio.toFixed(1)}`;
     }
 }
-ContrastValidationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContrastValidationComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ContrastValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: { type: "type", pass: "pass", value: "value" }, ngImport: i0, template: `
+ContrastValidationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ContrastValidationComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ContrastValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: { type: "type", pass: "pass", value: "value" }, ngImport: i0, template: `
         <span>{{contrastText}}</span>
         <ng-container *ngIf="value">
             <span class="k-contrast-validation k-text-success" *ngIf="pass">
                 {{passMessage}}
-                <span class="k-icon k-i-check"></span>
+                <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
             </span>
             <span class="k-contrast-validation k-text-error" *ngIf="!pass">
                 {{failMessage}}
-                <span class="k-icon k-i-x"></span>
+                <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
             </span>
         </ng-container>
-    `, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContrastValidationComponent, decorators: [{
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ContrastValidationComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -9120,11 +9091,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-container *ngIf="value">
             <span class="k-contrast-validation k-text-success" *ngIf="pass">
                 {{passMessage}}
-                <span class="k-icon k-i-check"></span>
+                <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
             </span>
             <span class="k-contrast-validation k-text-error" *ngIf="!pass">
                 {{failMessage}}
-                <span class="k-icon k-i-x"></span>
+                <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
             </span>
         </ng-container>
     `
@@ -9143,6 +9114,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class ContrastComponent {
     constructor(localization) {
         this.localization = localization;
+        this.checkIcon = checkIcon;
+        this.xCircleIcon = xCircleIcon;
     }
     get formatedRatio() {
         return this.contrastRatio.toFixed(2);
@@ -9157,21 +9130,21 @@ class ContrastComponent {
         return this.contrastRatio >= AAA_RATIO;
     }
     get contrastRatio() {
-        let contrast = getContrastFromTwoRGBAs(getRGBA(this.value), getRGBA(this.ratio));
+        const contrast = getContrastFromTwoRGBAs(getRGBA(this.value), getRGBA(this.ratio));
         return contrast;
     }
 }
-ContrastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContrastComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContrastComponent, selector: "[kendoContrastTool]", inputs: { value: "value", ratio: "ratio" }, ngImport: i0, template: `
+ContrastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ContrastComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ContrastComponent, selector: "[kendoContrastTool]", inputs: { value: "value", ratio: "ratio" }, ngImport: i0, template: `
         <div class="k-contrast-ratio">
             <span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
             <ng-container *ngIf="value">
                 <span class="k-contrast-validation k-text-success" *ngIf="satisfiesAACondition">
-                    <span class="k-icon k-i-check"></span>
-                    <span class="k-icon k-i-check" *ngIf="satisfiesAAACondition"></span>
+                    <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
+                    <kendo-icon-wrapper *ngIf="satisfiesAAACondition" name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
                 </span>
                 <span class="k-contrast-validation k-text-error" *ngIf="!satisfiesAACondition">
-                    <span class="k-icon k-i-x"></span>
+                    <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
                 </span>
             </ng-container>
         </div>
@@ -9185,8 +9158,8 @@ ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [value]="value"
             [pass]="satisfiesAAACondition">
         </div>
-    `, isInline: true, components: [{ type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContrastComponent, decorators: [{
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ContrastComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -9196,11 +9169,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
             <ng-container *ngIf="value">
                 <span class="k-contrast-validation k-text-success" *ngIf="satisfiesAACondition">
-                    <span class="k-icon k-i-check"></span>
-                    <span class="k-icon k-i-check" *ngIf="satisfiesAAACondition"></span>
+                    <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
+                    <kendo-icon-wrapper *ngIf="satisfiesAAACondition" name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
                 </span>
                 <span class="k-contrast-validation k-text-error" *ngIf="!satisfiesAACondition">
-                    <span class="k-icon k-i-x"></span>
+                    <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
                 </span>
             </ng-container>
         </div>
@@ -9227,9 +9200,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class ColorPickerMessages extends ComponentMessages {
 }
-ColorPickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-ColorPickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerMessages, decorators: [{
+ColorPickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+ColorPickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -9300,14 +9273,14 @@ class LocalizedColorPickerMessagesDirective extends ColorPickerMessages {
         this.service = service;
     }
 }
-LocalizedColorPickerMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedColorPickerMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedColorPickerMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]", providers: [
+LocalizedColorPickerMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedColorPickerMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedColorPickerMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]", providers: [
         {
             provide: ColorPickerMessages,
             useExisting: forwardRef(() => LocalizedColorPickerMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedColorPickerMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedColorPickerMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -9320,6 +9293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 let serial$3 = 0;
 /**
  * The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
@@ -9411,6 +9385,10 @@ class ColorGradientComponent {
          * @hidden
          */
         this.internalNavigation = false;
+        /**
+         * @hidden
+         */
+        this.dropletSlashIcon = dropletSlashIcon;
         this._tabindex = 0;
         this.listeners = [];
         this.hueSliderTouched = false;
@@ -9434,16 +9412,13 @@ class ColorGradientComponent {
         return this.id;
     }
     get hostTabindex() {
-        var _a;
-        return ((_a = this.tabindex) === null || _a === void 0 ? void 0 : _a.toString()) || '0';
+        return this.tabindex?.toString() || '0';
     }
     get isControlInvalid() {
-        var _a, _b;
-        return (_b = ((_a = this.control) === null || _a === void 0 ? void 0 : _a.invalid)) === null || _b === void 0 ? void 0 : _b.toString();
+        return (this.control?.invalid)?.toString();
     }
     get isDisabled() {
-        var _a;
-        return ((_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString()) || undefined;
+        return this.disabled?.toString() || undefined;
     }
     /**
      * @hidden
@@ -9780,7 +9755,7 @@ class ColorGradientComponent {
         hsva.v = 1 - top / gradientRectHeight;
         this.hsva.next(hsva);
         this.updateValues.next(getColorFromHSV(this.hsva.value, this.format, this.opacity));
-        this.setAlphaSliderBackground(getColorFromHSV(Object.assign(Object.assign({}, this.hsva.value), { a: 1 }), this.format, this.opacity));
+        this.setAlphaSliderBackground(getColorFromHSV({ ...this.hsva.value, a: 1 }, this.format, this.opacity));
     }
     handleValueChange(color) {
         if (this.value === color) {
@@ -9866,8 +9841,8 @@ class ColorGradientComponent {
         }
     }
 }
-ColorGradientComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled" } }, providers: [
+ColorGradientComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -9954,23 +9929,31 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     xmlns="http://www.w3.org/2000/svg"
                     [wrapper]="gradientWrapper ? gradientWrapper : undefined"
                     [hsva]="hsva"
-                    [backgroundColor]="contrastTool">
+                    [backgroundColor]="contrastTool"
+                    [style]="'position: absolute; overflow: visible; pointer-events: none; left: 0px; top: 0px;'">
                 </svg>
             </div>
             <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
-                <span class="k-clear-color k-button k-button-md k-button-flat k-button-flat-base k-button-icon"
+
+                <button
+                    kendoButton
                     *ngIf="clearButton"
-                    role="button"
+                    class="k-clear-color"
+                    fillMode="flat"
+                    icon="droplet-slash"
+                    [svgIcon]="dropletSlashIcon"
                     (click)="reset()"
                     (keydown.enter)="reset()"
                     (keydown.space)="reset()"
                     [attr.aria-label]="clearButtonTitle"
                     [attr.title]="clearButtonTitle"
-                    [tabindex]="innerTabIndex.toString()">
-                    <span class="k-icon k-i-droplet-slash"></span>
-                </span>
+                    [tabindex]="innerTabIndex.toString()"
+                    [style]="'position: absolute; top: 0; left: 50%; transform: translateX(-50%);'"
+                >
+                </button>
                 <kendo-slider
                     [ngClass]="{'k-align-self-end': clearButton}"
+                    [style.height.px]="clearButton ? '140' : null"
                     class="k-hue-slider k-colorgradient-slider"
                     [dragHandleTitle]="hueSliderTitle"
                     [tabindex]="innerTabIndex"
@@ -9992,6 +9975,7 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     #alphaSlider
                     [tabindex]="innerTabIndex"
                     [ngClass]="{'k-align-self-end': clearButton}"
+                    [style.height.px]="clearButton ? '140' : null"
                     class="k-alpha-slider k-colorgradient-slider"
                     [dragHandleTitle]="opacitySliderTitle"
                     [disabled]="disabled"
@@ -10026,8 +10010,8 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [value]="value"
             [ratio]="contrastTool">
         </div>
-    `, isInline: true, styles: ["\n        .k-clear-color {\n            position: absolute;\n            top: 0;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n        .k-colorgradient-slider.k-align-self-end {\n            height: 140px;\n        }\n\n        .k-color-contrast-svg {\n            position: absolute;\n            overflow: visible;\n            pointer-events: none;\n            left: 0px;\n            top: 0px;\n        }\n    "], components: [{ type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorGradientComponent, decorators: [{
+    `, isInline: true, components: [{ type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { 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"] }, { type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoColorGradient',
@@ -10120,23 +10104,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     xmlns="http://www.w3.org/2000/svg"
                     [wrapper]="gradientWrapper ? gradientWrapper : undefined"
                     [hsva]="hsva"
-                    [backgroundColor]="contrastTool">
+                    [backgroundColor]="contrastTool"
+                    [style]="'position: absolute; overflow: visible; pointer-events: none; left: 0px; top: 0px;'">
                 </svg>
             </div>
             <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
-                <span class="k-clear-color k-button k-button-md k-button-flat k-button-flat-base k-button-icon"
+
+                <button
+                    kendoButton
                     *ngIf="clearButton"
-                    role="button"
+                    class="k-clear-color"
+                    fillMode="flat"
+                    icon="droplet-slash"
+                    [svgIcon]="dropletSlashIcon"
                     (click)="reset()"
                     (keydown.enter)="reset()"
                     (keydown.space)="reset()"
                     [attr.aria-label]="clearButtonTitle"
                     [attr.title]="clearButtonTitle"
-                    [tabindex]="innerTabIndex.toString()">
-                    <span class="k-icon k-i-droplet-slash"></span>
-                </span>
+                    [tabindex]="innerTabIndex.toString()"
+                    [style]="'position: absolute; top: 0; left: 50%; transform: translateX(-50%);'"
+                >
+                </button>
                 <kendo-slider
                     [ngClass]="{'k-align-self-end': clearButton}"
+                    [style.height.px]="clearButton ? '140' : null"
                     class="k-hue-slider k-colorgradient-slider"
                     [dragHandleTitle]="hueSliderTitle"
                     [tabindex]="innerTabIndex"
@@ -10158,6 +10150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     #alphaSlider
                     [tabindex]="innerTabIndex"
                     [ngClass]="{'k-align-self-end': clearButton}"
+                    [style.height.px]="clearButton ? '140' : null"
                     class="k-alpha-slider k-colorgradient-slider"
                     [dragHandleTitle]="opacitySliderTitle"
                     [disabled]="disabled"
@@ -10192,26 +10185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [value]="value"
             [ratio]="contrastTool">
         </div>
-    `,
-                    styles: [`
-        .k-clear-color {
-            position: absolute;
-            top: 0;
-            left: 50%;
-            transform: translateX(-50%);
-        }
-        .k-colorgradient-slider.k-align-self-end {
-            height: 140px;
-        }
-
-        .k-color-contrast-svg {
-            position: absolute;
-            overflow: visible;
-            pointer-events: none;
-            left: 0px;
-            top: 0px;
-        }
-    `]
+    `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -10307,9 +10281,9 @@ class ColorPaletteLocalizationService extends LocalizationService {
         return super.get(shortKey);
     }
 }
-ColorPaletteLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPaletteLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }, { token: FlatColorPickerLocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-ColorPaletteLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPaletteLocalizationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPaletteLocalizationService, decorators: [{
+ColorPaletteLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPaletteLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }, { token: FlatColorPickerLocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+ColorPaletteLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPaletteLocalizationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPaletteLocalizationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
@@ -10383,9 +10357,9 @@ class ColorPaletteService {
         return index;
     }
 }
-ColorPaletteService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPaletteService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ColorPaletteService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPaletteService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPaletteService, decorators: [{
+ColorPaletteService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPaletteService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ColorPaletteService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPaletteService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPaletteService, decorators: [{
             type: Injectable
         }] });
 
@@ -10585,10 +10559,10 @@ class ColorPaletteComponent {
         }
     }
     ngOnChanges(changes) {
-        if (changes.palette || changes.columns) {
+        if (changes['palette'] || changes['columns']) {
             this.setRows();
         }
-        if (changes.palette || changes.value || changes.columns) {
+        if (changes['palette'] || changes['value'] || changes['columns']) {
             this.selectCell(this.value);
             this.setHostElementAriaLabel();
         }
@@ -10752,8 +10726,8 @@ class ColorPaletteComponent {
         this.handleCellSelection(selectedColor, this.focusedCell);
     }
 }
-ColorPaletteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { listeners: { "keydown": "handleKeydown($event)", "focus": "handleFocus($event)", "blur": "handleHostBlur()" }, properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
+ColorPaletteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { listeners: { "keydown": "handleKeydown($event)", "focus": "handleFocus($event)", "blur": "handleHostBlur()" }, properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -10803,7 +10777,7 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </table>
         </div>
     `, isInline: true, directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPaletteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPaletteComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoColorPalette',
@@ -10922,6 +10896,209 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['blur']
             }] } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * @hidden
+ */
+class FlatColorPickerHeaderComponent {
+    constructor(localizationService, renderer) {
+        this.localizationService = localizationService;
+        this.renderer = renderer;
+        this.hostClasses = true;
+        this.innerTabIndex = -1;
+        this.viewChange = new EventEmitter();
+        this.valuePaneClick = new EventEmitter();
+        this.clearButtonClick = new EventEmitter();
+        this.tabOut = new EventEmitter();
+        this.dropletSliderIcon = dropletSliderIcon;
+        this.paletteIcon = paletteIcon;
+        this.dropletSlashIcon = dropletSlashIcon;
+    }
+    ngAfterViewInit() {
+        if (this.viewButtonsCollection.length > 0) {
+            this.viewButtonsCollection.forEach((button) => {
+                const buttonElem = button.nativeElement;
+                const isViewActive = buttonElem.getAttribute('aria-pressed') === 'true';
+                if (isViewActive) {
+                    this.renderer.addClass(buttonElem, 'k-selected');
+                }
+            });
+        }
+    }
+    onViewButtonClick(view) {
+        this.activeView = view;
+        this.viewChange.emit(view);
+    }
+    get viewButtons() {
+        return this.views && this.views.indexOf('gradient') >= 0 && this.views.indexOf('palette') >= 0;
+    }
+    getViewButtonIcon(view) {
+        return view === 'gradient' ? 'color-canvas' : 'palette';
+    }
+    getViewButtonsSVGIcon(view) {
+        return view === 'gradient' ? this.dropletSliderIcon : this.paletteIcon;
+    }
+    getText(text) {
+        return this.localizationService.get(text);
+    }
+    onHeaderTabOut(ev, index) {
+        if (index === 0) {
+            ev.preventDefault();
+            this.tabOut.emit();
+        }
+    }
+}
+FlatColorPickerHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FlatColorPickerHeaderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: { clearButton: "clearButton", activeView: "activeView", views: "views", preview: "preview", innerTabIndex: "innerTabIndex", value: "value", selection: "selection" }, outputs: { viewChange: "viewChange", valuePaneClick: "valuePaneClick", clearButtonClick: "clearButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-header": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "clearButtonElement", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef }, { propertyName: "viewButtonsCollection", predicate: ["viewButtons"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+        <div class="k-coloreditor-header-actions k-hstack">
+            <div 
+                *ngIf="viewButtons" 
+                class="k-button-group k-button-group-flat">
+                <button 
+                    *ngFor="let view of views; let i = index;"
+                    kendoButton
+                    type="button"
+                    #viewButtons
+                    fillMode="flat"
+                    [tabindex]="innerTabIndex.toString()"
+                    (click)="onViewButtonClick(view)"
+                    [icon]="getViewButtonIcon(view)"
+                    [svgIcon]="getViewButtonsSVGIcon(view)"
+                    (keydown.shift.tab)="onHeaderTabOut($event, i)"
+                    class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
+                    [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
+                    [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
+                    [attr.aria-pressed]="activeView === view"
+                    [ngClass]="activeView === view ? 'k-selected' : ''">
+                </button>
+            </div>
+        </div>
+        <div class="k-spacer"></div>
+        <div class="k-coloreditor-header-actions k-hstack">
+            <button
+                kendoButton
+                type="button"
+                [tabindex]="innerTabIndex.toString()"
+                *ngIf="clearButton"
+                #clearButton
+                fillMode="flat"
+                icon="reset-color"
+                [svgIcon]="dropletSlashIcon"
+                class="k-coloreditor-reset"
+                [attr.aria-label]="getText('clearButton')"
+                [attr.title]="getText('clearButton')"
+                (click)="clearButtonClick.emit()">
+            </button>
+            <div class="k-coloreditor-preview k-vstack" *ngIf="preview" aria-hidden="true">
+                <span
+                    class="k-coloreditor-preview-color k-color-preview"
+                    [attr.title]="getText('previewColor')"
+                    [style.background-color]="selection">
+                </span>
+                <span class="k-coloreditor-current-color k-color-preview"
+                    [style.background-color]="value"
+                    [attr.title]="getText('revertSelection')"
+                    (click)="valuePaneClick.emit($event)">
+                </span>
+            </div>
+        </div>
+    `, 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: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FlatColorPickerHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoFlatColorPickerHeader]',
+                    template: `
+        <div class="k-coloreditor-header-actions k-hstack">
+            <div 
+                *ngIf="viewButtons" 
+                class="k-button-group k-button-group-flat">
+                <button 
+                    *ngFor="let view of views; let i = index;"
+                    kendoButton
+                    type="button"
+                    #viewButtons
+                    fillMode="flat"
+                    [tabindex]="innerTabIndex.toString()"
+                    (click)="onViewButtonClick(view)"
+                    [icon]="getViewButtonIcon(view)"
+                    [svgIcon]="getViewButtonsSVGIcon(view)"
+                    (keydown.shift.tab)="onHeaderTabOut($event, i)"
+                    class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
+                    [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
+                    [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
+                    [attr.aria-pressed]="activeView === view"
+                    [ngClass]="activeView === view ? 'k-selected' : ''">
+                </button>
+            </div>
+        </div>
+        <div class="k-spacer"></div>
+        <div class="k-coloreditor-header-actions k-hstack">
+            <button
+                kendoButton
+                type="button"
+                [tabindex]="innerTabIndex.toString()"
+                *ngIf="clearButton"
+                #clearButton
+                fillMode="flat"
+                icon="reset-color"
+                [svgIcon]="dropletSlashIcon"
+                class="k-coloreditor-reset"
+                [attr.aria-label]="getText('clearButton')"
+                [attr.title]="getText('clearButton')"
+                (click)="clearButtonClick.emit()">
+            </button>
+            <div class="k-coloreditor-preview k-vstack" *ngIf="preview" aria-hidden="true">
+                <span
+                    class="k-coloreditor-preview-color k-color-preview"
+                    [attr.title]="getText('previewColor')"
+                    [style.background-color]="selection">
+                </span>
+                <span class="k-coloreditor-current-color k-color-preview"
+                    [style.background-color]="value"
+                    [attr.title]="getText('revertSelection')"
+                    (click)="valuePaneClick.emit($event)">
+                </span>
+            </div>
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-coloreditor-header']
+            }, {
+                type: HostBinding,
+                args: ['class.k-hstack']
+            }], clearButton: [{
+                type: Input
+            }], activeView: [{
+                type: Input
+            }], views: [{
+                type: Input
+            }], preview: [{
+                type: Input
+            }], innerTabIndex: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], viewChange: [{
+                type: Output
+            }], valuePaneClick: [{
+                type: Output
+            }], clearButtonClick: [{
+                type: Output
+            }], tabOut: [{
+                type: Output
+            }], viewButtonsCollection: [{
+                type: ViewChildren,
+                args: ['viewButtons', { read: ElementRef }]
+            }], clearButtonElement: [{
+                type: ViewChild,
+                args: ['clearButton', { read: ElementRef }]
+            }] } });
+
 /**
  * @hidden
  */
@@ -10937,15 +11114,15 @@ class FlatColorPickerActionButtonsComponent {
         return this.localizationService.get(text);
     }
     onActionButtonClick(type, ev) {
-        let args = {
+        const args = {
             target: type,
             originalEvent: ev
         };
         this.actionButtonClick.emit(args);
     }
 }
-FlatColorPickerActionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerActionButtonsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FlatColorPickerActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: { innerTabIndex: "innerTabIndex" }, outputs: { actionButtonClick: "actionButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-footer": "this.hostClasses", "class.k-actions": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "firstButton", first: true, predicate: ["first"], descendants: true, read: ElementRef }, { propertyName: "lastButton", first: true, predicate: ["last"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+FlatColorPickerActionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FlatColorPickerActionButtonsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FlatColorPickerActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: { innerTabIndex: "innerTabIndex" }, outputs: { actionButtonClick: "actionButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-footer": "this.hostClasses", "class.k-actions": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "firstButton", first: true, predicate: ["first"], descendants: true, read: ElementRef }, { propertyName: "lastButton", first: true, predicate: ["last"], descendants: true, read: ElementRef }], ngImport: i0, template: `
         <button #first
             class="k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base"
             [attr.title]="getText('cancelButton')"
@@ -10962,7 +11139,7 @@ FlatColorPickerActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVer
             (keydown.tab)="$event.preventDefault(); tabOut.emit();"
         >{{getText('applyButton')}}</button>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerActionButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FlatColorPickerActionButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -11121,16 +11298,13 @@ class FlatColorPickerComponent {
         return this.readonly;
     }
     get hostTabindex() {
-        var _a;
-        return ((_a = this.tabindex) === null || _a === void 0 ? void 0 : _a.toString()) || '0';
+        return this.tabindex?.toString() || '0';
     }
     get isControlInvalid() {
-        var _a, _b;
-        return (_b = ((_a = this.control) === null || _a === void 0 ? void 0 : _a.invalid)) === null || _b === void 0 ? void 0 : _b.toString();
+        return (this.control?.invalid)?.toString();
     }
     get isDisabled() {
-        var _a;
-        return ((_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString()) || undefined;
+        return this.disabled?.toString() || undefined;
     }
     /**
      * @hidden
@@ -11141,7 +11315,7 @@ class FlatColorPickerComponent {
         }
         event.preventDefault();
         this.internalNavigation = true;
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => { var _a; return (_a = this.firstFocusable) === null || _a === void 0 ? void 0 : _a.focus(); });
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.firstFocusable?.focus());
     }
     /**
      * @hidden
@@ -11264,7 +11438,7 @@ class FlatColorPickerComponent {
         }
         ev.preventDefault();
         // eslint-disable-next-line no-unused-expressions
-        shiftKey ? previousTabStop === null || previousTabStop === void 0 ? void 0 : previousTabStop.focus() : nextTabStop === null || nextTabStop === void 0 ? void 0 : nextTabStop.focus();
+        shiftKey ? previousTabStop?.focus() : nextTabStop?.focus();
     }
     /**
      * @hidden
@@ -11322,8 +11496,7 @@ class FlatColorPickerComponent {
         this.activeViewChange.emit(view);
         this.ngZone.runOutsideAngular(() => {
             setTimeout(() => {
-                var _a;
-                (_a = this[this.activeView]) === null || _a === void 0 ? void 0 : _a.focus();
+                this[this.activeView]?.focus();
             });
         });
         if (this.activeView === 'gradient') {
@@ -11396,10 +11569,10 @@ class FlatColorPickerComponent {
     }
     setSizingVariables() {
         const paletteTileSize = this.service.paletteTileLayout(this.paletteSettings.tileSize);
-        const value = `--kendo-color-preview-columns: ${this.paletteSettings.columns};
-            --kendo-color-preview-width: ${paletteTileSize.width}px;
-            --kendo-color-preview-height: ${paletteTileSize.height}px;`;
-        this.host.nativeElement.querySelector('.k-coloreditor-views.k-vstack').setAttribute('style', value);
+        const element = this.host.nativeElement.querySelector('.k-coloreditor-views.k-vstack');
+        this.renderer.setStyle(element, '--kendo-color-preview-columns', this.paletteSettings.columns);
+        this.renderer.setStyle(element, '--kendo-color-preview-width', `${paletteTileSize.width}px`);
+        this.renderer.setStyle(element, '--kendo-color-preview-height', `${paletteTileSize.height}px;`);
     }
     changeCurrentValue(color) {
         this.selection = color;
@@ -11435,7 +11608,7 @@ class FlatColorPickerComponent {
         if (!this.host) {
             return;
         }
-        let hostElement = this.host.nativeElement;
+        const hostElement = this.host.nativeElement;
         this.ngZone.runOutsideAngular(() => {
             this.subscriptions.add(this.renderer.listen(hostElement, 'focus', () => {
                 this.focused = true;
@@ -11451,8 +11624,8 @@ class FlatColorPickerComponent {
         this.gradientElement && this.renderer.removeAttribute(this.gradientElement.nativeElement, 'aria-label');
     }
 }
-FlatColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: FlatColorPickerService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", paletteSettings: "paletteSettings" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", actionButtonClick: "actionButtonClick" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler()", "focusin": "focusHandler($event)" }, properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.isDisabled", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid" } }, providers: [
+FlatColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FlatColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: FlatColorPickerService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", paletteSettings: "paletteSettings" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", actionButtonClick: "actionButtonClick" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler()", "focusin": "focusHandler($event)" }, properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.isDisabled", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -11569,7 +11742,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             (actionButtonClick)="onAction($event)"
             (tabOut)="firstFocusable.focus()"></div>
 `, isInline: true, components: [{ type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["id", "opacity", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex"], outputs: ["actionButtonClick", "tabOut"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FlatColorPickerComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoFlatColorPicker',
@@ -11784,6 +11957,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['footer']
             }] } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const DOM_FOCUS_EVENTS = ['focus', 'blur'];
 const DEFAULT_SIZE$3 = 'medium';
 const DEFAULT_ROUNDED$2 = 'medium';
@@ -11909,6 +12083,10 @@ class ColorPickerComponent {
          * Indicates whether the ColorPicker wrapper is focused.
          */
         this.isFocused = false;
+        /**
+         * @hidden
+         */
+        this.arrowDownIcon = caretAltDownIcon;
         this._tabindex = 0;
         this._popupSettings = { animate: true };
         this._paletteSettings = {};
@@ -11943,8 +12121,7 @@ class ColorPickerComponent {
         return this.tabindex;
     }
     get isControlInvalid() {
-        var _a, _b;
-        return (_b = ((_a = this.control) === null || _a === void 0 ? void 0 : _a.invalid)) === null || _b === void 0 ? void 0 : _b.toString();
+        return (this.control?.invalid)?.toString();
     }
     /**
      * @hidden
@@ -11991,6 +12168,19 @@ class ColorPickerComponent {
     get gradientSettings() {
         return this._gradientSettings;
     }
+    /**
+     * Defines an SVGIcon to be rendered within the button.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        if (isDevMode() && icon && this.icon && this.iconClass) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this._svgIcon = icon;
+    }
+    get svgIcon() {
+        return this._svgIcon;
+    }
     /**
      * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      *
@@ -12068,13 +12258,24 @@ class ColorPickerComponent {
     /**
      * @hidden
      */
-    get iconStyles() {
+    get customIconStyles() {
         if (this.iconClass) {
-            return this.iconClass;
+            let parsedIconClass = '';
+            parseCSSClassNames(this.iconClass).forEach(iconClass => {
+                parsedIconClass += iconClass + ' ';
+            });
+            return parsedIconClass.slice(0, -1);
         }
-        if (this.icon) {
-            return `k-icon k-i-${this.icon}`;
+        return '';
+    }
+    /**
+     * @hidden
+     */
+    get iconStyles() {
+        if (this.icon && !this.iconClass) {
+            return `${this.icon}`;
         }
+        return '';
     }
     ngOnInit() {
         const defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET$1 : DEFAULT_ACCESSIBLE_PRESET$1;
@@ -12319,7 +12520,7 @@ class ColorPickerComponent {
     popupBlurInvalid(ev) {
         const focusInFlatColorPickerElement = this.popupRef.popupElement.contains(ev.relatedTarget);
         const hostClicked = closest$1(ev.relatedTarget, (element) => element === this.host.nativeElement);
-        return hostClicked || focusInFlatColorPickerElement;
+        return Boolean(hostClicked || focusInFlatColorPickerElement);
     }
     toggleWithEvents(open) {
         const sameState = this.isOpen === open;
@@ -12413,7 +12614,7 @@ class ColorPickerComponent {
         if (!this.host) {
             return;
         }
-        let hostElement = this.host.nativeElement;
+        const hostElement = this.host.nativeElement;
         this.ngZone.runOutsideAngular(() => {
             this.subscriptions.add(this.renderer.listen(hostElement, 'focusin', () => {
                 this.handleWrapperFocus();
@@ -12451,8 +12652,8 @@ class ColorPickerComponent {
         }
     }
 }
-ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.PopupService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid" } }, providers: [{
+ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.PopupService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid" } }, providers: [{
             multi: true,
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => ColorPickerComponent)
@@ -12523,18 +12724,30 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         <span #activeColor class="k-input-inner">
             <span
                 class="k-value-icon k-color-preview"
-                [ngClass]="{'k-icon-color-preview': iconStyles, 'k-no-color': !value}">
-                <span *ngIf="iconClass || icon" class="k-color-preview-icon k-icon" [ngClass]="iconStyles"></span>
+                [ngClass]="{'k-icon-color-preview': customIconStyles || iconStyles, 'k-no-color': !value}"
+            >
+                <kendo-icon-wrapper
+                    *ngIf="iconClass || icon"
+                    [name]="iconStyles"
+                    innerCssClass="k-color-preview-icon"
+                    [customFontClass]="customIconStyles"
+                    [svgIcon]="svgIcon"
+                >
+                </kendo-icon-wrapper>
                 <span class="k-color-preview-mask" [style.background-color]="value"></span>
             </span>
+
         </span>
         <button
+            kendoButton
             tabindex="-1"
             type="button"
             role="none"
+            icon="caret-alt-down"
+            [svgIcon]="arrowDownIcon"
             aria-hidden="true"
-            class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
-                <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
+            class="k-input-button"
+        >
         </button>
         <ng-template #popupTemplate>
             <kendo-flatcolorpicker
@@ -12557,8 +12770,8 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </kendo-flatcolorpicker>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerComponent, decorators: [{
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { 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"] }, { type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoColorPicker',
@@ -12634,18 +12847,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <span #activeColor class="k-input-inner">
             <span
                 class="k-value-icon k-color-preview"
-                [ngClass]="{'k-icon-color-preview': iconStyles, 'k-no-color': !value}">
-                <span *ngIf="iconClass || icon" class="k-color-preview-icon k-icon" [ngClass]="iconStyles"></span>
+                [ngClass]="{'k-icon-color-preview': customIconStyles || iconStyles, 'k-no-color': !value}"
+            >
+                <kendo-icon-wrapper
+                    *ngIf="iconClass || icon"
+                    [name]="iconStyles"
+                    innerCssClass="k-color-preview-icon"
+                    [customFontClass]="customIconStyles"
+                    [svgIcon]="svgIcon"
+                >
+                </kendo-icon-wrapper>
                 <span class="k-color-preview-mask" [style.background-color]="value"></span>
             </span>
+
         </span>
         <button
+            kendoButton
             tabindex="-1"
             type="button"
             role="none"
+            icon="caret-alt-down"
+            [svgIcon]="arrowDownIcon"
             aria-hidden="true"
-            class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
-                <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
+            class="k-input-button"
+        >
         </button>
         <ng-template #popupTemplate>
             <kendo-flatcolorpicker
@@ -12733,6 +12958,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], iconClass: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], clearButton: [{
                 type: Input
             }], tabindex: [{
@@ -12791,14 +13018,14 @@ class ColorPickerCustomMessagesComponent extends ColorPickerMessages {
         return true;
     }
 }
-ColorPickerCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ColorPickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorPickerCustomMessagesComponent, selector: "kendo-colorpicker-messages, kendo-flatcolorpicker-messages, kendo-colorgradient-messages, kendo-colorpalette-messages", providers: [
+ColorPickerCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ColorPickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColorPickerCustomMessagesComponent, selector: "kendo-colorpicker-messages, kendo-flatcolorpicker-messages, kendo-colorgradient-messages, kendo-colorpalette-messages", providers: [
         {
             provide: ColorPickerMessages,
             useExisting: forwardRef(() => ColorPickerCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -12827,9 +13054,9 @@ class FocusOnDomReadyDirective {
         this.ngZone.runOutsideAngular(() => setTimeout(() => this.host.nativeElement.focus()));
     }
 }
-FocusOnDomReadyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusOnDomReadyDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-FocusOnDomReadyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FocusOnDomReadyDirective, selector: "[kendoFocusOnDomReady]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusOnDomReadyDirective, decorators: [{
+FocusOnDomReadyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FocusOnDomReadyDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+FocusOnDomReadyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FocusOnDomReadyDirective, selector: "[kendoFocusOnDomReady]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FocusOnDomReadyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoFocusOnDomReady]'
@@ -12855,13 +13082,13 @@ const INTERNAL_DIRECTIVES = [
     ColorContrastSvgComponent
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the ColorPicker.
  */
 class ColorPickerModule {
 }
-ColorPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerModule, declarations: [ColorPickerComponent,
+ColorPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerModule, declarations: [ColorPickerComponent,
         ColorPaletteComponent,
         ColorGradientComponent,
         FlatColorPickerComponent,
@@ -12877,20 +13104,24 @@ ColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         NumericTextBoxModule,
         CommonModule,
         PopupModule,
-        DraggableModule], exports: [ColorPickerComponent,
+        DraggableModule,
+        ButtonModule,
+        IconsModule], exports: [ColorPickerComponent,
         ColorPaletteComponent,
         ColorGradientComponent,
         FlatColorPickerComponent,
         LocalizedColorPickerMessagesDirective,
         ColorPickerCustomMessagesComponent] });
-ColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerModule, imports: [[
+ColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerModule, imports: [[
             SliderModule,
             NumericTextBoxModule,
             CommonModule,
             PopupModule,
-            DraggableModule
+            DraggableModule,
+            ButtonModule,
+            IconsModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -12903,7 +13134,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         NumericTextBoxModule,
                         CommonModule,
                         PopupModule,
-                        DraggableModule
+                        DraggableModule,
+                        ButtonModule,
+                        IconsModule
                     ]
                 }]
         }] });
@@ -12980,9 +13213,9 @@ class CheckBoxDirective {
         }
     }
 }
-CheckBoxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckBoxDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-CheckBoxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: { size: "size", rounded: "rounded" }, host: { properties: { "class.k-checkbox": "this.kendoClass" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckBoxDirective, decorators: [{
+CheckBoxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CheckBoxDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+CheckBoxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: { size: "size", rounded: "rounded" }, host: { properties: { "class.k-checkbox": "this.kendoClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CheckBoxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[kendoCheckBox]'
@@ -12997,7 +13230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the CheckBox directive.
  *
  * @example
@@ -13029,10 +13262,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class CheckBoxModule {
 }
-CheckBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CheckBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckBoxModule, declarations: [CheckBoxDirective], imports: [CommonModule], exports: [CheckBoxDirective] });
-CheckBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckBoxModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckBoxModule, decorators: [{
+CheckBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CheckBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CheckBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CheckBoxModule, declarations: [CheckBoxDirective], imports: [CommonModule], exports: [CheckBoxDirective] });
+CheckBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CheckBoxModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CheckBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CheckBoxDirective],
@@ -13095,9 +13328,9 @@ class RadioButtonDirective {
         }
     }
 }
-RadioButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioButtonDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-RadioButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: { size: "size" }, host: { properties: { "class.k-radio": "this.kendoClass" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioButtonDirective, decorators: [{
+RadioButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RadioButtonDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+RadioButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: { size: "size" }, host: { properties: { "class.k-radio": "this.kendoClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RadioButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[kendoRadioButton]'
@@ -13110,7 +13343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the RadioButton directive.
  *
  * @example
@@ -13142,10 +13375,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class RadioButtonModule {
 }
-RadioButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RadioButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioButtonModule, declarations: [RadioButtonDirective], imports: [CommonModule], exports: [RadioButtonDirective] });
-RadioButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioButtonModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioButtonModule, decorators: [{
+RadioButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RadioButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RadioButtonModule, declarations: [RadioButtonDirective], imports: [CommonModule], exports: [RadioButtonDirective] });
+RadioButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RadioButtonModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RadioButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [RadioButtonDirective],
@@ -13186,11 +13419,11 @@ class ErrorComponent {
         return this.id;
     }
 }
-ErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ErrorComponent, selector: "kendo-formerror", inputs: { align: "align" }, host: { properties: { "class.k-form-error": "this.hostClass", "attr.role": "this.roleAttribute", "class.k-text-start": "this.startClass", "class.k-text-end": "this.endClass", "attr.id": "this.idAttribute" } }, ngImport: i0, template: `
+ErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ErrorComponent, selector: "kendo-formerror", inputs: { align: "align" }, host: { properties: { "class.k-form-error": "this.hostClass", "attr.role": "this.roleAttribute", "class.k-text-start": "this.startClass", "class.k-text-end": "this.endClass", "attr.id": "this.idAttribute" } }, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ErrorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-formerror',
@@ -13247,11 +13480,11 @@ class HintComponent {
         return this.id;
     }
 }
-HintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HintComponent, selector: "kendo-formhint", inputs: { align: "align" }, host: { properties: { "class.k-form-hint": "this.hostClass", "class.k-text-start": "this.startClass", "class.k-text-end": "this.endClass", "attr.id": "this.idAttribute" } }, ngImport: i0, template: `
+HintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: HintComponent, selector: "kendo-formhint", inputs: { align: "align" }, host: { properties: { "class.k-form-hint": "this.hostClass", "class.k-text-start": "this.startClass", "class.k-text-end": "this.endClass", "attr.id": "this.idAttribute" } }, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HintComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HintComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-formhint',
@@ -13474,8 +13707,8 @@ class FormFieldComponent {
         this.subscriptions.add(this.hintChildren.changes.subscribe(() => this.updateDescription()));
     }
 }
-FormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FormFieldComponent, selector: "kendo-formfield", inputs: { showHints: "showHints", orientation: "orientation", showErrors: "showErrors" }, host: { properties: { "class.k-form-field": "this.hostClass", "attr.dir": "this.direction", "class.k-form-field-error": "this.errorClass", "class.k-form-field-disabled": "this.disabledClass" } }, providers: [
+FormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FormFieldComponent, selector: "kendo-formfield", inputs: { showHints: "showHints", orientation: "orientation", showErrors: "showErrors" }, host: { properties: { "class.k-form-field": "this.hostClass", "attr.dir": "this.direction", "class.k-form-field-error": "this.errorClass", "class.k-form-field-disabled": "this.disabledClass" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -13489,7 +13722,7 @@ FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             <ng-content select="kendo-formerror" *ngIf="hasErrors"></ng-content>
         </div>
     `, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-formfield',
@@ -13545,7 +13778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the FormField, Error and Hint components.
  *
  * @example
@@ -13577,10 +13810,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class FormFieldModule {
 }
-FormFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormFieldModule, declarations: [HintComponent, ErrorComponent, FormFieldComponent], imports: [CommonModule], exports: [HintComponent, ErrorComponent, FormFieldComponent] });
-FormFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormFieldModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FormFieldModule, decorators: [{
+FormFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FormFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormFieldModule, declarations: [HintComponent, ErrorComponent, FormFieldComponent], imports: [CommonModule], exports: [HintComponent, ErrorComponent, FormFieldComponent] });
+FormFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormFieldModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [HintComponent, ErrorComponent, FormFieldComponent],
@@ -13594,9 +13827,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class SignatureMessages extends ComponentMessages {
 }
-SignatureMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-SignatureMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SignatureMessages, selector: "kendo-signature-messages-base", inputs: { clear: "clear", minimize: "minimize", maximize: "maximize", canvasLabel: "canvasLabel" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureMessages, decorators: [{
+SignatureMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SignatureMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+SignatureMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: SignatureMessages, selector: "kendo-signature-messages-base", inputs: { clear: "clear", minimize: "minimize", maximize: "maximize", canvasLabel: "canvasLabel" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SignatureMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -13624,14 +13857,14 @@ class SignatureCustomMessagesComponent extends SignatureMessages {
         return true;
     }
 }
-SignatureCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-SignatureCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SignatureCustomMessagesComponent, selector: "kendo-signature-messages", providers: [
+SignatureCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SignatureCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+SignatureCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SignatureCustomMessagesComponent, selector: "kendo-signature-messages", providers: [
         {
             provide: SignatureMessages,
             useExisting: forwardRef(() => SignatureCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SignatureCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -13654,14 +13887,14 @@ class LocalizedSignatureMessagesDirective extends SignatureMessages {
         this.service = service;
     }
 }
-LocalizedSignatureMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedSignatureMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedSignatureMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]", providers: [
+LocalizedSignatureMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedSignatureMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedSignatureMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]", providers: [
         {
             provide: SignatureMessages,
             useExisting: forwardRef(() => LocalizedSignatureMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedSignatureMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedSignatureMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -13695,6 +13928,7 @@ const DEFAULT_POPUP_SCALE = 3;
 const DEFAULT_EXPORT_SCALE = 2;
 const DEFAULT_COLOR = '#000000';
 const DEFAULT_BACKGROUND_COLOR = '#ffffff';
+const iconsMap = { xIcon, hyperlinkOpenIcon };
 /**
  * Represents the [Kendo UI Signature component for Angular]({% slug overview_signature %}).
  *
@@ -13855,6 +14089,12 @@ class SignatureComponent {
     get value() {
         return this._value;
     }
+    /**
+     * @hidden
+     */
+    svgIcon(name) {
+        return iconsMap[name];
+    }
     /**
      * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      *
@@ -13940,6 +14180,9 @@ class SignatureComponent {
     get showClear() {
         return !(this.isEmpty || this.isDrawing || this.readonly || this.disabled);
     }
+    /**
+     * @hidden
+     */
     get focused() {
         return this.isFocused;
     }
@@ -13973,11 +14216,19 @@ class SignatureComponent {
         });
     }
     ngAfterViewInit() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
         this.applyHostClasses();
         this.readThemeColors();
         this.ngZone.runOutsideAngular(() => {
             const element = this.canvas.nativeElement;
-            this.instance = new SignaturePad(element, Object.assign(Object.assign({}, this.options), { onChange: () => this.onValueChange(), onDraw: () => this.onDraw(), onDrawEnd: () => this.onDrawEnd() }));
+            this.instance = new SignaturePad(element, {
+                ...this.options,
+                onChange: () => this.onValueChange(),
+                onDraw: () => this.onDraw(),
+                onDrawEnd: () => this.onDrawEnd()
+            });
             if (this.value) {
                 this.instance.loadImage(this.value);
             }
@@ -14014,18 +14265,16 @@ class SignatureComponent {
     /**
      * @hidden
      */
-    onValueChange() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const value = yield this.instance.exportImage({
-                width: this.baseWidth * this.exportScale,
-                height: this.baseHeight * this.exportScale
-            });
-            this._value = value;
-            this.cd.markForCheck();
-            this.ngZone.run(() => {
-                this.valueChange.emit(value);
-                this.notifyNgChanged(value);
-            });
+    async onValueChange() {
+        const value = await this.instance.exportImage({
+            width: this.baseWidth * this.exportScale,
+            height: this.baseHeight * this.exportScale
+        });
+        this._value = value;
+        this.cd.markForCheck();
+        this.ngZone.run(() => {
+            this.valueChange.emit(value);
+            this.notifyNgChanged(value);
         });
     }
     /**
@@ -14041,44 +14290,40 @@ class SignatureComponent {
      * @hidden
      */
     onDialogClick(e) {
-        var _a;
         if (e.target.classList.contains('k-overlay')) {
             this.isOpen = false;
-            (_a = this.maximizeButton) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+            this.maximizeButton?.nativeElement.focus();
         }
     }
     /**
      * @hidden
      */
     onDialogKeydown(e) {
-        var _a;
         if (e.keyCode === Keys.Escape) {
             this.isOpen = false;
             this.cd.detectChanges();
-            (_a = this.maximizeButton) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+            this.maximizeButton?.nativeElement.focus();
         }
     }
     /**
      * @hidden
      */
     onDialogClose() {
-        var _a;
         const args = new SignatureCloseEvent();
         this.close.next(args);
         if (!args.isDefaultPrevented()) {
             this.isOpen = false;
-            (_a = this.maximizeButton) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+            this.maximizeButton?.nativeElement.focus();
         }
     }
     /**
      * Clears the value of the Signature.
      */
     reset() {
-        var _a;
         if (!isPresent(this.value)) {
             return;
         }
-        (_a = this.instance) === null || _a === void 0 ? void 0 : _a.clear();
+        this.instance?.clear();
         this.value = this._value = undefined;
         this.notifyNgChanged(undefined);
     }
@@ -14098,19 +14343,17 @@ class SignatureComponent {
     /**
      * @hidden
      */
-    onMaximize() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const args = new SignatureOpenEvent();
-            this.open.next(args);
-            if (!args.isDefaultPrevented()) {
-                this.popupValue = yield this.instance.exportImage({
-                    width: this.popupWidth * this.exportScale,
-                    height: this.popupHeight * this.exportScale
-                });
-                this.isOpen = true;
-                this.cd.detectChanges();
-            }
-        });
+    async onMaximize() {
+        const args = new SignatureOpenEvent();
+        this.open.next(args);
+        if (!args.isDefaultPrevented()) {
+            this.popupValue = await this.instance.exportImage({
+                width: this.popupWidth * this.exportScale,
+                height: this.popupHeight * this.exportScale
+            });
+            this.isOpen = true;
+            this.cd.detectChanges();
+        }
     }
     /**
      * @hidden
@@ -14241,8 +14484,8 @@ class SignatureComponent {
         return this.localization.get(key);
     }
 }
-SignatureComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SignatureComponent, selector: "kendo-signature", inputs: { readonly: "readonly", disabled: "disabled", width: "width", height: "height", value: "value", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", color: "color", backgroundColor: "backgroundColor", strokeWidth: "strokeWidth", smooth: "smooth", maximizable: "maximizable", maximized: "maximized", popupScale: "popupScale", exportScale: "exportScale", parentLocalization: "parentLocalization", hideLine: "hideLine" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", minimize: "minimize" }, host: { properties: { "class.k-signature": "this.staticHostClasses", "class.k-input": "this.staticHostClasses", "attr.dir": "this.direction", "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabled", "style.width.px": "this.width", "style.height.px": "this.height" } }, providers: [
+SignatureComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SignatureComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SignatureComponent, selector: "kendo-signature", inputs: { readonly: "readonly", disabled: "disabled", width: "width", height: "height", value: "value", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", color: "color", backgroundColor: "backgroundColor", strokeWidth: "strokeWidth", smooth: "smooth", maximizable: "maximizable", maximized: "maximized", popupScale: "popupScale", exportScale: "exportScale", parentLocalization: "parentLocalization", hideLine: "hideLine" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", minimize: "minimize" }, host: { properties: { "class.k-signature": "this.staticHostClasses", "class.k-input": "this.staticHostClasses", "attr.dir": "this.direction", "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabled", "style.width.px": "this.width", "style.height.px": "this.height" } }, providers: [
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.signature' },
         { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SignatureComponent) }
@@ -14265,6 +14508,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 kendoButton
                 class="k-signature-action k-signature-maximize"
                 icon="hyperlink-open"
+                [svgIcon]="svgIcon('hyperlinkOpenIcon')"
                 fillMode="flat"
                 [size]="size"
                 (click)="onMaximize()"
@@ -14276,6 +14520,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 kendoButton
                 class="k-signature-action k-signature-minimize k-rotate-180"
                 icon="hyperlink-open"
+                [svgIcon]="svgIcon('hyperlinkOpenIcon')"
                 fillMode="flat"
                 [size]="size"
                 (click)="onMinimize()"
@@ -14300,6 +14545,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 kendoButton
                 class="k-signature-action k-signature-clear"
                 icon="close"
+                [svgIcon]="svgIcon('xIcon')"
                 fillMode="flat"
                 [size]="size"
                 [attr.aria-label]="clearTitle"
@@ -14335,8 +14581,8 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [parentLocalization]="localization">
             </kendo-signature>
         </kendo-dialog>
-    `, isInline: true, components: [{ type: i2.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SignatureComponent, selector: "kendo-signature", inputs: ["readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "exportScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }], directives: [{ type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureComponent, decorators: [{
+    `, 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"] }, { type: i3$1.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SignatureComponent, selector: "kendo-signature", inputs: ["readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "exportScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }], directives: [{ type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SignatureComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoSignature',
@@ -14366,6 +14612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 kendoButton
                 class="k-signature-action k-signature-maximize"
                 icon="hyperlink-open"
+                [svgIcon]="svgIcon('hyperlinkOpenIcon')"
                 fillMode="flat"
                 [size]="size"
                 (click)="onMaximize()"
@@ -14377,6 +14624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 kendoButton
                 class="k-signature-action k-signature-minimize k-rotate-180"
                 icon="hyperlink-open"
+                [svgIcon]="svgIcon('hyperlinkOpenIcon')"
                 fillMode="flat"
                 [size]="size"
                 (click)="onMinimize()"
@@ -14401,6 +14649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 kendoButton
                 class="k-signature-action k-signature-clear"
                 icon="close"
+                [svgIcon]="svgIcon('xIcon')"
                 fillMode="flat"
                 [size]="size"
                 [attr.aria-label]="clearTitle"
@@ -14520,7 +14769,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Signature component.
  *
  * @example
@@ -14552,19 +14801,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class SignatureModule {
 }
-SignatureModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SignatureModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureModule, declarations: [SignatureComponent,
+SignatureModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SignatureModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SignatureModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SignatureModule, declarations: [SignatureComponent,
         SignatureCustomMessagesComponent,
         LocalizedSignatureMessagesDirective], imports: [ButtonModule,
         CommonModule,
-        DialogsModule], exports: [SignatureComponent,
+        DialogsModule,
+        IconsModule], exports: [SignatureComponent,
         SignatureCustomMessagesComponent] });
-SignatureModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureModule, imports: [[
+SignatureModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SignatureModule, imports: [[
             ButtonModule,
             CommonModule,
-            DialogsModule
+            DialogsModule,
+            IconsModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SignatureModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SignatureModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -14579,13 +14830,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     imports: [
                         ButtonModule,
                         CommonModule,
-                        DialogsModule
+                        DialogsModule,
+                        IconsModule
                     ]
                 }]
         }] });
 
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Inputs components.
  *
  * @example
@@ -14618,8 +14870,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class InputsModule {
 }
-InputsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InputsModule, imports: [CommonModule], exports: [TextAreaModule,
+InputsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+InputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: InputsModule, imports: [CommonModule], exports: [TextAreaModule,
         TextBoxModule,
         SliderModule,
         RangeSliderModule,
@@ -14631,7 +14883,7 @@ InputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         RadioButtonModule,
         FormFieldModule,
         SignatureModule] });
-InputsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InputsModule, imports: [[CommonModule], TextAreaModule,
+InputsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: InputsModule, imports: [[CommonModule], TextAreaModule,
         TextBoxModule,
         SliderModule,
         RangeSliderModule,
@@ -14643,7 +14895,7 @@ InputsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
         RadioButtonModule,
         FormFieldModule,
         SignatureModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InputsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: InputsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [