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

package/{esm2015/colorpicker/color-input.component.js → esm2020/colorpicker/color-input.component.mjs}

@@ -1,17 +1,22 @@
 /**-----------------------------------------------------------------------------------------
-* 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 { Component, Input, Output, EventEmitter, HostBinding, ViewChild } from '@angular/core';
+/* 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';
 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
  */
@@ -53,6 +58,10 @@ export class ColorInputComponent {
          * The rgba inputs values.
          */
         this.rgba = {};
+        /**
+         * @hidden
+         */
+        this.caretAltExpandIcon = caretAltExpandIcon;
         this.subscriptions = new Subscription();
     }
     /**
@@ -80,7 +89,7 @@ export 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;
@@ -135,22 +144,25 @@ export 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">
@@ -253,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"] }] });
-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: 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">
@@ -408,5 +424,5 @@ 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 }]
             }] } });

package/{esm2015/colorpicker/color-palette.component.js → esm2020/colorpicker/color-palette.component.mjs}

@@ -1,8 +1,8 @@
 /**-----------------------------------------------------------------------------------------
-* 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 { Component, Input, EventEmitter, Output, HostBinding, HostListener, forwardRef } from '@angular/core';
+import { Component, Input, EventEmitter, Output, HostBinding, HostListener, forwardRef, ChangeDetectorRef, Renderer2, ElementRef, NgZone } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Keys, KendoInput, guid } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -215,10 +215,10 @@ export 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();
         }
@@ -382,8 +382,8 @@ export 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: i1.ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i2.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: i1.ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i2.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,
@@ -433,7 +433,7 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </table>
         </div>
     `, isInline: true, directives: [{ type: i3.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.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',

package/{esm2015/colorpicker/colorpicker.component.js → esm2020/colorpicker/colorpicker.component.mjs}

@@ -1,11 +1,14 @@
 /**-----------------------------------------------------------------------------------------
-* 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
 *-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { take } from 'rxjs/operators';
-import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ViewContainerRef, forwardRef } 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';
+import { PopupService } from '@progress/kendo-angular-popup';
 import { validatePackage } from '@progress/kendo-licensing';
 import { Keys, KendoInput, isChanged, closest, guid } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -16,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';
@@ -147,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 = {};
@@ -181,8 +192,7 @@ export 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
@@ -229,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.
      *
@@ -306,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;
@@ -557,7 +591,7 @@ export class ColorPickerComponent {
     popupBlurInvalid(ev) {
         const focusInFlatColorPickerElement = this.popupRef.popupElement.contains(ev.relatedTarget);
         const hostClicked = closest(ev.relatedTarget, (element) => element === this.host.nativeElement);
-        return hostClicked || focusInFlatColorPickerElement;
+        return Boolean(hostClicked || focusInFlatColorPickerElement);
     }
     toggleWithEvents(open) {
         const sameState = this.isOpen === open;
@@ -651,7 +685,7 @@ export 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();
@@ -689,8 +723,8 @@ export class ColorPickerComponent {
         }
     }
 }
-ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "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.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", 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)
@@ -761,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
@@ -795,8 +841,8 @@ 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPickerComponent, decorators: [{
+    `, 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: [{
                     exportAs: 'kendoColorPicker',
@@ -872,18 +918,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
@@ -971,6 +1029,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], iconClass: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], clearButton: [{
                 type: Input
             }], tabindex: [{

package/{esm2015/colorpicker/constants.js → esm2020/colorpicker/constants.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
 *-------------------------------------------------------------------------------------------*/
 /**

package/{esm2015/colorpicker/contrast-validation.component.js → esm2020/colorpicker/contrast-validation.component.mjs}

@@ -1,18 +1,23 @@
 /**-----------------------------------------------------------------------------------------
-* 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 { 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');
@@ -21,25 +26,25 @@ export 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: i2.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.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: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -49,11 +54,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>
     `

package/{esm2015/colorpicker/contrast.component.js → esm2020/colorpicker/contrast.component.mjs}

@@ -1,20 +1,25 @@
 /**-----------------------------------------------------------------------------------------
-* 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 { 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);
@@ -29,21 +34,21 @@ export 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>
@@ -57,8 +62,8 @@ 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContrastComponent, decorators: [{
+    `, 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: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -68,11 +73,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>

package/{esm2015/colorpicker/events/active-color-click-event.js → esm2020/colorpicker/events/active-color-click-event.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
 *-------------------------------------------------------------------------------------------*/
 /**

package/{esm2015/colorpicker/events/cancel-event.js → esm2020/colorpicker/events/cancel-event.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 { PreventableEvent } from "@progress/kendo-angular-common";

package/{esm2015/colorpicker/events/close-event.js → esm2020/colorpicker/events/close-event.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 { PreventableEvent } from "@progress/kendo-angular-common";

package/{esm2015/colorpicker/models/gradient-settings.js → esm2020/colorpicker/events/kendo-drag-event.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
 *-------------------------------------------------------------------------------------------*/
 export {};

package/{esm2015/colorpicker/events/open-event.js → esm2020/colorpicker/events/open-event.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 { PreventableEvent } from "@progress/kendo-angular-common";