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

package/colorpicker/color-gradient.component.d.ts

@@ -9,6 +9,7 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { OutputFormat, HSVA } from './models';
 import { KendoDragEvent } from './events/kendo-drag-event';
 import { ColorInputComponent } from './color-input.component';
+import { SVGIcon } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 /**
  * The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
@@ -149,6 +150,10 @@ export declare class ColorGradientComponent implements OnInit, OnChanges, OnDest
      * @hidden
      */
     internalNavigation: boolean;
+    /**
+     * @hidden
+     */
+    dropletSlashIcon: SVGIcon;
     private _value;
     private _tabindex;
     private _contrastTool;

package/colorpicker/color-input.component.d.ts

@@ -6,6 +6,7 @@ import { OnChanges, SimpleChanges, EventEmitter, ElementRef, AfterViewInit, Rend
 import { RGBA } from './models';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { NumericTextBoxComponent } from './../numerictextbox/numerictextbox.component';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -69,6 +70,10 @@ export declare class ColorInputComponent implements AfterViewInit, OnChanges {
      * Indicates whether any of the rgba inputs have value.
      */
     private get rgbaInputValid();
+    /**
+     * @hidden
+     */
+    caretAltExpandIcon: SVGIcon;
     private subscriptions;
     constructor(host: ElementRef, renderer: Renderer2, localizationService: LocalizationService);
     ngAfterViewInit(): void;

package/colorpicker/colorpicker.component.d.ts

@@ -9,6 +9,7 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupSettings, PaletteSettings, OutputFormat, ColorPickerView, GradientSettings, ColorPickerActionsLayout } from './models';
 import { ActiveColorClickEvent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerOpenEvent } from './events';
 import { InputFillMode, InputRounded, InputSize } from '../common/models';
+import { SVGIcon } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
@@ -114,6 +115,12 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
     iconClass: string | Array<string> | {
         [key: string]: boolean;
     };
+    /**
+     * 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: SVGIcon);
+    get svgIcon(): SVGIcon;
     /**
      * Specifies whether the ColorPicker should display a 'Clear color' button.
      *
@@ -237,9 +244,11 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
     /**
      * @hidden
      */
-    get iconStyles(): string | string[] | {
-        [key: string]: boolean;
-    };
+    get customIconStyles(): string;
+    /**
+     * @hidden
+     */
+    get iconStyles(): string;
     /**
      * Provides a reference to a container element inside the component markup.
      * The container element references the location of the appended popup&mdash;
@@ -249,7 +258,12 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
     private activeColor;
     private popupTemplate;
     private flatColorPicker;
+    /**
+     * @hidden
+     */
+    arrowDownIcon: SVGIcon;
     private popupRef;
+    private _svgIcon;
     private _value;
     private _tabindex;
     private _popupSettings;
@@ -360,5 +374,5 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
     private domFocusListener;
     private handleHostId;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ColorPickerComponent, "kendo-colorpicker", ["kendoColorPicker"], { "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"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; "cancel": "cancel"; "activeColorClick": "activeColorClick"; "activeViewChange": "activeViewChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorPickerComponent, "kendo-colorpicker", ["kendoColorPicker"], { "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"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; "cancel": "cancel"; "activeColorClick": "activeColorClick"; "activeViewChange": "activeViewChange"; }, never, never>;
 }

package/colorpicker/contrast-validation.component.d.ts

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -12,6 +13,8 @@ export declare class ContrastValidationComponent {
     type: string;
     pass: boolean;
     value: string;
+    checkIcon: SVGIcon;
+    xCircleIcon: SVGIcon;
     constructor(localization: LocalizationService);
     get passMessage(): string;
     get failMessage(): string;

package/colorpicker/contrast.component.d.ts

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -11,6 +12,8 @@ export declare class ContrastComponent {
     private localization;
     value: string;
     ratio: string;
+    checkIcon: SVGIcon;
+    xCircleIcon: SVGIcon;
     constructor(localization: LocalizationService);
     get formatedRatio(): string;
     get contrastRatioText(): string;

package/colorpicker/flatcolorpicker-header.component.d.ts

@@ -2,15 +2,17 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter, QueryList, ElementRef } from '@angular/core';
+import { EventEmitter, QueryList, ElementRef, Renderer2, AfterViewInit } from '@angular/core';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ColorPickerView } from './models';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
-export declare class FlatColorPickerHeaderComponent {
+export declare class FlatColorPickerHeaderComponent implements AfterViewInit {
     private localizationService;
+    private renderer;
     hostClasses: boolean;
     clearButton: boolean;
     activeView: ColorPickerView;
@@ -25,10 +27,15 @@ export declare class FlatColorPickerHeaderComponent {
     tabOut: EventEmitter<any>;
     viewButtonsCollection: QueryList<ElementRef>;
     clearButtonElement: ElementRef;
-    constructor(localizationService: LocalizationService);
+    dropletSliderIcon: SVGIcon;
+    paletteIcon: SVGIcon;
+    dropletSlashIcon: SVGIcon;
+    constructor(localizationService: LocalizationService, renderer: Renderer2);
+    ngAfterViewInit(): void;
     onViewButtonClick(view: ColorPickerView): void;
     get viewButtons(): boolean;
     getViewButtonIcon(view: string): string;
+    getViewButtonsSVGIcon(view: string): SVGIcon;
     getText(text: string): string;
     onHeaderTabOut(ev: any, index: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FlatColorPickerHeaderComponent, never>;

package/colorpicker.module.d.ts

@@ -22,12 +22,14 @@ import * as i16 from "./numerictextbox.module";
 import * as i17 from "@angular/common";
 import * as i18 from "@progress/kendo-angular-popup";
 import * as i19 from "@progress/kendo-angular-common";
+import * as i20 from "@progress/kendo-angular-buttons";
+import * as i21 from "@progress/kendo-angular-icons";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the ColorPicker.
  */
 export declare class ColorPickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ColorPickerModule, [typeof i1.ColorPickerComponent, typeof i2.ColorPaletteComponent, typeof i3.ColorGradientComponent, typeof i4.FlatColorPickerComponent, typeof i5.LocalizedColorPickerMessagesDirective, typeof i6.ColorPickerCustomMessagesComponent, typeof i7.NumericLabelDirective, typeof i8.ColorInputComponent, typeof i9.FocusOnDomReadyDirective, typeof i10.ContrastComponent, typeof i11.ContrastValidationComponent, typeof i12.FlatColorPickerHeaderComponent, typeof i13.FlatColorPickerActionButtonsComponent, typeof i14.ColorContrastSvgComponent], [typeof i15.SliderModule, typeof i16.NumericTextBoxModule, typeof i17.CommonModule, typeof i18.PopupModule, typeof i19.DraggableModule], [typeof i1.ColorPickerComponent, typeof i2.ColorPaletteComponent, typeof i3.ColorGradientComponent, typeof i4.FlatColorPickerComponent, typeof i5.LocalizedColorPickerMessagesDirective, typeof i6.ColorPickerCustomMessagesComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ColorPickerModule, [typeof i1.ColorPickerComponent, typeof i2.ColorPaletteComponent, typeof i3.ColorGradientComponent, typeof i4.FlatColorPickerComponent, typeof i5.LocalizedColorPickerMessagesDirective, typeof i6.ColorPickerCustomMessagesComponent, typeof i7.NumericLabelDirective, typeof i8.ColorInputComponent, typeof i9.FocusOnDomReadyDirective, typeof i10.ContrastComponent, typeof i11.ContrastValidationComponent, typeof i12.FlatColorPickerHeaderComponent, typeof i13.FlatColorPickerActionButtonsComponent, typeof i14.ColorContrastSvgComponent], [typeof i15.SliderModule, typeof i16.NumericTextBoxModule, typeof i17.CommonModule, typeof i18.PopupModule, typeof i19.DraggableModule, typeof i20.ButtonModule, typeof i21.IconsModule], [typeof i1.ColorPickerComponent, typeof i2.ColorPaletteComponent, typeof i3.ColorGradientComponent, typeof i4.FlatColorPickerComponent, typeof i5.LocalizedColorPickerMessagesDirective, typeof i6.ColorPickerCustomMessagesComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ColorPickerModule>;
 }

package/esm2020/colorpicker/color-gradient.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, Input, ViewChild, ElementRef, Renderer2, NgZone, Output, EventEmitter, HostBinding, forwardRef, ChangeDetectorRef, Injector, HostListener } from '@angular/core';
 import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BehaviorSubject, Subject } from 'rxjs';
@@ -17,15 +18,17 @@ import { ColorGradientLocalizationService } from './localization/colorgradient-l
 import { ColorInputComponent } from './color-input.component';
 import { DEFAULT_GRADIENT_BACKGROUND_COLOR, DEFAULT_OUTPUT_FORMAT, DRAGHANDLE_MOVE_SPEED, DRAGHANDLE_MOVE_SPEED_SMALL_STEP } from './constants';
 import { packageMetadata } from '../package-metadata';
+import { dropletSlashIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./color-contrast-svg.component";
-import * as i3 from "../slider/slider.component";
-import * as i4 from "./color-input.component";
-import * as i5 from "./contrast.component";
-import * as i6 from "./localization/localized-colorpicker-messages.directive";
-import * as i7 from "@progress/kendo-angular-common";
-import * as i8 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-buttons";
+import * as i4 from "../slider/slider.component";
+import * as i5 from "./color-input.component";
+import * as i6 from "./contrast.component";
+import * as i7 from "./localization/localized-colorpicker-messages.directive";
+import * as i8 from "@progress/kendo-angular-common";
+import * as i9 from "@angular/common";
 let serial = 0;
 /**
  * The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
@@ -117,6 +120,10 @@ export class ColorGradientComponent {
          * @hidden
          */
         this.internalNavigation = false;
+        /**
+         * @hidden
+         */
+        this.dropletSlashIcon = dropletSlashIcon;
         this._tabindex = 0;
         this.listeners = [];
         this.hueSliderTouched = false;
@@ -662,18 +669,23 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </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()"
-                    [style]="'position: absolute; top: 0; left: 50%; transform: translateX(-50%);'">
-                    <span class="k-icon k-i-droplet-slash"></span>
-                </span>
+                    [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"
@@ -733,7 +745,7 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [value]="value"
             [ratio]="contrastTool">
         </div>
-    `, isInline: true, components: [{ type: i2.ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { type: i3.SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: i4.ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { type: i5.ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: i6.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i7.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i2.ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { type: i3.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: i4.SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: i5.ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { type: i6.ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: i7.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i8.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,
             args: [{
@@ -832,18 +844,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 </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()"
-                    [style]="'position: absolute; top: 0; left: 50%; transform: translateX(-50%);'">
-                    <span class="k-icon k-i-droplet-slash"></span>
-                </span>
+                    [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"

package/esm2020/colorpicker/color-input.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, Input, Output, EventEmitter, ElementRef, HostBinding, ViewChild, Renderer2 } from '@angular/core';
 import { getRGBA, parseColor, getColorFromRGBA } from './utils';
 import { isPresent } from '../common/utils';
@@ -9,11 +10,13 @@ import { guid, isDocumentAvailable } from '@progress/kendo-angular-common';
 import { Subscription } from 'rxjs';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { NumericTextBoxComponent } from './../numerictextbox/numerictextbox.component';
+import { caretAltExpandIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "../numerictextbox/numerictextbox.component";
-import * as i3 from "@angular/common";
-import * as i4 from "./color-gradient-numeric-label.directive";
+import * as i2 from "@progress/kendo-angular-buttons";
+import * as i3 from "../numerictextbox/numerictextbox.component";
+import * as i4 from "@angular/common";
+import * as i5 from "./color-gradient-numeric-label.directive";
 /**
  * @hidden
  */
@@ -55,6 +58,10 @@ export class ColorInputComponent {
          * The rgba inputs values.
          */
         this.rgba = {};
+        /**
+         * @hidden
+         */
+        this.caretAltExpandIcon = caretAltExpandIcon;
         this.subscriptions = new Subscription();
     }
     /**
@@ -141,17 +148,21 @@ export class ColorInputComponent {
     }
 }
 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 }], usesOnChanges: true, ngImport: i0, template: `
+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">
@@ -254,22 +265,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: i2.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
+    `, 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.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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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">
@@ -409,5 +424,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['blueInput']
             }], toggleFormatButton: [{
                 type: ViewChild,
-                args: ['toggleFormatButton', { static: false }]
+                args: ['toggleFormatButton', { static: false, read: ElementRef }]
             }] } });

package/esm2020/colorpicker/colorpicker.component.mjs

@@ -2,8 +2,9 @@
 * 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 { take } from 'rxjs/operators';
-import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ElementRef, TemplateRef, ViewContainerRef, forwardRef, ChangeDetectorRef, NgZone, Renderer2, Injector } from '@angular/core';
+import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ElementRef, TemplateRef, ViewContainerRef, forwardRef, ChangeDetectorRef, NgZone, Renderer2, Injector, isDevMode } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { FlatColorPickerComponent } from './flatcolorpicker.component';
@@ -18,12 +19,16 @@ import { parseColor } from './utils';
 import { getStylingClasses, isPresent } from '../common/utils';
 import { ColorPickerLocalizationService } from './localization/colorpicker-localization.service';
 import { DEFAULT_ACCESSIBLE_PRESET, DEFAULT_PRESET } from './constants';
+import { parseCSSClassNames } from '@progress/kendo-angular-common';
+import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-popup";
 import * as i2 from "@progress/kendo-angular-l10n";
-import * as i3 from "./flatcolorpicker.component";
-import * as i4 from "./localization/localized-colorpicker-messages.directive";
-import * as i5 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-icons";
+import * as i4 from "@progress/kendo-angular-buttons";
+import * as i5 from "./flatcolorpicker.component";
+import * as i6 from "./localization/localized-colorpicker-messages.directive";
+import * as i7 from "@angular/common";
 const DOM_FOCUS_EVENTS = ['focus', 'blur'];
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_ROUNDED = 'medium';
@@ -149,6 +154,10 @@ export 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 = {};
@@ -230,6 +239,19 @@ export 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.
      *
@@ -307,13 +329,24 @@ export 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 : DEFAULT_ACCESSIBLE_PRESET;
@@ -691,7 +724,7 @@ export class ColorPickerComponent {
     }
 }
 ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1.PopupService }, { token: i0.ChangeDetectorRef }, { token: i2.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", 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.ɵ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)
@@ -762,18 +795,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
@@ -796,7 +841,7 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </kendo-flatcolorpicker>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i3.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: i4.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { type: i4.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: i5.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: i6.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.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: [{
@@ -873,18 +918,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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
@@ -972,6 +1029,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], iconClass: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], clearButton: [{
                 type: Input
             }], tabindex: [{