@progress/kendo-angular-inputs 11.0.0-develop.95 → 11.0.0-develop.96

package/esm2020/colorpicker/contrast-validation.component.mjs

@@ -5,15 +5,19 @@
 import { AA_RATIO, AAA_RATIO } from './constants';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Component, Input } from '@angular/core';
+import { checkIcon, xCircleIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-icons";
+import * as i3 from "@angular/common";
 /**
  * @hidden
  */
 export class ContrastValidationComponent {
     constructor(localization) {
         this.localization = localization;
+        this.checkIcon = checkIcon;
+        this.xCircleIcon = xCircleIcon;
     }
     get passMessage() {
         return this.localization.get('passContrast');
@@ -32,14 +36,14 @@ ContrastValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         <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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ContrastValidationComponent, decorators: [{
             type: Component,
             args: [{
@@ -50,11 +54,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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>
     `

package/esm2020/colorpicker/contrast.component.mjs

@@ -6,16 +6,20 @@ import { Component, Input } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { getContrastFromTwoRGBAs, getRGBA } from './utils';
 import { AA_RATIO, AAA_RATIO } from './constants';
+import { checkIcon, xCircleIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "./contrast-validation.component";
-import * as i3 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-icons";
+import * as i3 from "./contrast-validation.component";
+import * as i4 from "@angular/common";
 /**
  * @hidden
  */
 export class ContrastComponent {
     constructor(localization) {
         this.localization = localization;
+        this.checkIcon = checkIcon;
+        this.xCircleIcon = xCircleIcon;
     }
     get formatedRatio() {
         return this.contrastRatio.toFixed(2);
@@ -40,11 +44,11 @@ ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             <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>
@@ -58,7 +62,7 @@ ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [value]="value"
             [pass]="satisfiesAAACondition">
         </div>
-    `, isInline: true, components: [{ type: i2.ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i3.ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i4.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: [{
@@ -69,11 +73,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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>

package/esm2020/colorpicker/flatcolorpicker-header.component.mjs

@@ -2,23 +2,41 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ViewChildren, QueryList, ElementRef } from '@angular/core';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ViewChildren, QueryList, ElementRef, Renderer2 } from '@angular/core';
+import { dropletSlashIcon, dropletSliderIcon, paletteIcon } from '@progress/kendo-svg-icons';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-buttons";
+import * as i3 from "@angular/common";
 /**
  * @hidden
  */
 export class FlatColorPickerHeaderComponent {
-    constructor(localizationService) {
+    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;
@@ -28,7 +46,10 @@ export class FlatColorPickerHeaderComponent {
         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';
+        return view === 'gradient' ? 'color-canvas' : 'palette';
+    }
+    getViewButtonsSVGIcon(view) {
+        return view === 'gradient' ? this.dropletSliderIcon : this.paletteIcon;
     }
     getText(text) {
         return this.localizationService.get(text);
@@ -40,42 +61,46 @@ export class FlatColorPickerHeaderComponent {
         }
     }
 }
-FlatColorPickerHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FlatColorPickerHeaderComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+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;"
-                    #viewButtons
+                <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' : ''">
-                    <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
+                kendoButton
+                type="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"
+                fillMode="flat"
+                icon="reset-color"
+                [svgIcon]="dropletSlashIcon"
+                class="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
@@ -90,7 +115,7 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 </span>
             </div>
         </div>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FlatColorPickerHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -101,36 +126,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <div 
                 *ngIf="viewButtons" 
                 class="k-button-group k-button-group-flat">
-                <button *ngFor="let view of views; let i = index;"
-                    #viewButtons
+                <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' : ''">
-                    <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
+                kendoButton
+                type="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"
+                fillMode="flat"
+                icon="reset-color"
+                [svgIcon]="dropletSlashIcon"
+                class="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
@@ -147,7 +176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-coloreditor-header']
             }, {

package/esm2020/colorpicker.module.mjs

@@ -22,6 +22,8 @@ import { ContrastValidationComponent } from './colorpicker/contrast-validation.c
 import { ContrastComponent } from './colorpicker/contrast.component';
 import { ColorContrastSvgComponent } from './colorpicker/color-contrast-svg.component';
 import { NumericLabelDirective } from './colorpicker/color-gradient-numeric-label.directive';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 const PUBLIC_DIRECTIVES = [
     ColorPickerComponent,
@@ -64,7 +66,9 @@ ColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         NumericTextBoxModule,
         CommonModule,
         PopupModule,
-        DraggableModule], exports: [ColorPickerComponent,
+        DraggableModule,
+        ButtonModule,
+        IconsModule], exports: [ColorPickerComponent,
         ColorPaletteComponent,
         ColorGradientComponent,
         FlatColorPickerComponent,
@@ -75,7 +79,9 @@ ColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
             NumericTextBoxModule,
             CommonModule,
             PopupModule,
-            DraggableModule
+            DraggableModule,
+            ButtonModule,
+            IconsModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerModule, decorators: [{
             type: NgModule,
@@ -90,7 +96,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         NumericTextBoxModule,
                         CommonModule,
                         PopupModule,
-                        DraggableModule
+                        DraggableModule,
+                        ButtonModule,
+                        IconsModule
                     ]
                 }]
         }] });

package/esm2020/numerictextbox/numerictextbox.component.mjs

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, ViewChild, forwardRef, isDevMode, NgZone, ChangeDetectorRef, Injector } from '@angular/core';
 import { anyChanged, hasObservers, Keys, guid, KendoInput } from '@progress/kendo-angular-common';
 import { areSame, getStylingClasses, requiresZoneOnBlur } from '../common/utils';
@@ -18,12 +19,14 @@ import { MIN_DOC_LINK, MAX_DOC_LINK, POINT, INITIAL_SPIN_DELAY, SPIN_DELAY, EXPO
 import { defined, noop, numericRegex, isNumber, pad, decimalPart, getDeltaFromMouseWheel, getCaretPosition, extractSignificantNumericChars, isRightClick } from './utils';
 import { ArrowDirection } from './arrow-direction';
 import { mobileOS } from '@progress/kendo-common';
+import { caretAltUpIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-intl";
 import * as i2 from "@progress/kendo-angular-l10n";
-import * as i3 from "./localization/localized-numerictextbox-messages.directive";
-import * as i4 from "@progress/kendo-angular-common";
-import * as i5 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-icons";
+import * as i4 from "./localization/localized-numerictextbox-messages.directive";
+import * as i5 from "@progress/kendo-angular-common";
+import * as i6 from "@angular/common";
 const PARSABLE_OPTIONS = ['min', 'max', 'step', 'decimals'];
 const PARSABLE_DEFAULTS = {
     decimals: null,
@@ -130,6 +133,14 @@ export class NumericTextBoxComponent {
          */
         this.arrowDirection = ArrowDirection.None;
         this.hostClasses = true;
+        /**
+         * @hidden
+         */
+        this.arrowUpIcon = caretAltUpIcon;
+        /**
+         * @hidden
+         */
+        this.arrowDownIcon = caretAltDownIcon;
         this.inputValue = '';
         this.minValidateFn = noop;
         this.maxValidateFn = noop;
@@ -907,12 +918,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 }"
@@ -922,11 +938,16 @@ 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: i3.LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+      `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i6.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: [{
@@ -983,12 +1004,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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 }"
@@ -998,9 +1024,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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>
       `
                 }]

package/esm2020/numerictextbox.module.mjs

@@ -8,6 +8,7 @@ import { CommonModule } from '@angular/common';
 import { LocalizedNumericTextBoxMessagesDirective } from './numerictextbox/localization/localized-numerictextbox-messages.directive';
 import { NumericTextBoxCustomMessagesComponent } from './numerictextbox/localization/custom-messages.component';
 import { EventsModule } from '@progress/kendo-angular-common';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -45,9 +46,9 @@ export class NumericTextBoxModule {
 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: "13.3.11", ngImport: i0, type: NumericTextBoxModule, imports: [[CommonModule, EventsModule]] });
+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: [{
@@ -60,6 +61,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         NumericTextBoxComponent,
                         NumericTextBoxCustomMessagesComponent
                     ],
-                    imports: [CommonModule, EventsModule]
+                    imports: [CommonModule, EventsModule, IconsModule]
                 }]
         }] });

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673435233,
+    publishDate: 1673446165,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/signature/signature.component.mjs

@@ -11,6 +11,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { isNone, isPresent, ROUNDED_MAP, SIZE_MAP } from '../common/utils';
 import { packageMetadata } from '../package-metadata';
 import { SignatureCloseEvent, SignatureOpenEvent } from './events';
+import { xIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-buttons";
@@ -26,6 +27,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 %}).
  *
@@ -186,6 +188,12 @@ export 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.
      *
@@ -271,6 +279,9 @@ export class SignatureComponent {
     get showClear() {
         return !(this.isEmpty || this.isDrawing || this.readonly || this.disabled);
     }
+    /**
+     * @hidden
+     */
     get focused() {
         return this.isFocused;
     }
@@ -596,6 +607,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()"
@@ -607,6 +619,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()"
@@ -631,6 +644,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"
@@ -697,6 +711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 kendoButton
                 class="k-signature-action k-signature-maximize"
                 icon="hyperlink-open"
+                [svgIcon]="svgIcon('hyperlinkOpenIcon')"
                 fillMode="flat"
                 [size]="size"
                 (click)="onMaximize()"
@@ -708,6 +723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 kendoButton
                 class="k-signature-action k-signature-minimize k-rotate-180"
                 icon="hyperlink-open"
+                [svgIcon]="svgIcon('hyperlinkOpenIcon')"
                 fillMode="flat"
                 [size]="size"
                 (click)="onMinimize()"
@@ -732,6 +748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 kendoButton
                 class="k-signature-action k-signature-clear"
                 icon="close"
+                [svgIcon]="svgIcon('xIcon')"
                 fillMode="flat"
                 [size]="size"
                 [attr.aria-label]="clearTitle"

package/esm2020/signature.module.mjs

@@ -6,6 +6,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
 import { DialogsModule } from '@progress/kendo-angular-dialog';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import { LocalizedSignatureMessagesDirective, SignatureCustomMessagesComponent } from './signature/localization';
 import { SignatureComponent } from './signature/signature.component';
 import * as i0 from "@angular/core";
@@ -47,12 +48,14 @@ SignatureModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         SignatureCustomMessagesComponent,
         LocalizedSignatureMessagesDirective], imports: [ButtonModule,
         CommonModule,
-        DialogsModule], exports: [SignatureComponent,
+        DialogsModule,
+        IconsModule], exports: [SignatureComponent,
         SignatureCustomMessagesComponent] });
 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: "13.3.11", ngImport: i0, type: SignatureModule, decorators: [{
             type: NgModule,
@@ -69,7 +72,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     imports: [
                         ButtonModule,
                         CommonModule,
-                        DialogsModule
+                        DialogsModule,
+                        IconsModule
                     ]
                 }]
         }] });