@progress/kendo-angular-inputs 9.0.3 → 9.0.4

package/esm2015/colorpicker/color-gradient.component.js

@@ -480,10 +480,10 @@ export class ColorGradientComponent {
                 }
             });
             const dragHandleFocusInListener = this.renderer.listen(this.gradientDragHandle.nativeElement, 'focusin', () => {
-                this.renderer.addClass(this.gradientDragHandle.nativeElement, 'k-state-focus');
+                this.renderer.addClass(this.gradientDragHandle.nativeElement, 'k-focus');
             });
             const dragHandleFocusOutListener = this.renderer.listen(this.gradientDragHandle.nativeElement, 'focusout', () => {
-                this.renderer.removeClass(this.gradientDragHandle.nativeElement, 'k-state-focus');
+                this.renderer.removeClass(this.gradientDragHandle.nativeElement, 'k-focus');
             });
             this.listeners.push(focusOutListener, keydownListener, keyupListener, dragHandleFocusInListener, dragHandleFocusOutListener);
         });
@@ -500,7 +500,7 @@ export class ColorGradientComponent {
     }
 }
 ColorGradientComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-state-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
+ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -800,7 +800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['attr.aria-readonly']
             }], disabledClass: [{
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }], gradientId: [{
                 type: HostBinding,
                 args: ['attr.id']

package/esm2015/colorpicker/color-palette.component.js

@@ -352,7 +352,7 @@ export class ColorPaletteComponent {
     }
 }
 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)", "blur": "handleHostBlur()" }, properties: { "attr.dir": "this.direction", "attr.id": "this.paletteId", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-state-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
+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)", "blur": "handleHostBlur()" }, properties: { "attr.dir": "this.direction", "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,
@@ -383,8 +383,8 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     <tr *ngFor="let row of colorRows; let rowIndex = index">
                         <td *ngFor="let color of row; let colIndex = index"
                             role="option"
-                            [class.k-state-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
-                            [class.k-state-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
+                            [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
+                            [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
                             [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
                             [attr.aria-label]="color"
                             class="k-colorpalette-tile"
@@ -440,8 +440,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     <tr *ngFor="let row of colorRows; let rowIndex = index">
                         <td *ngFor="let color of row; let colIndex = index"
                             role="option"
-                            [class.k-state-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
-                            [class.k-state-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
+                            [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
+                            [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
                             [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
                             [attr.aria-label]="color"
                             class="k-colorpalette-tile"
@@ -502,7 +502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['attr.aria-disabled']
             }, {
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }], readonlyAttribute: [{
                 type: HostBinding,
                 args: ['attr.aria-readonly']

package/esm2015/colorpicker/flatcolorpicker-header.component.js

@@ -43,7 +43,7 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
-                    [ngClass]="activeView === view ? 'k-state-selected' : ''"
+                    [ngClass]="activeView === view ? 'k-selected' : ''"
                 >
                     <span
                         class="k-button-icon k-icon"
@@ -93,7 +93,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
-                    [ngClass]="activeView === view ? 'k-state-selected' : ''"
+                    [ngClass]="activeView === view ? 'k-selected' : ''"
                 >
                     <span
                         class="k-button-icon k-icon"

package/esm2015/colorpicker/flatcolorpicker.component.js

@@ -374,7 +374,7 @@ export class FlatColorPickerComponent {
     }
 }
 FlatColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1.FlatColorPickerService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", paletteSettings: "paletteSettings" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", actionButtonClick: "actionButtonClick" }, host: { properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-state-disabled": "this.disabledClass", "attr.aria-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
+FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", paletteSettings: "paletteSettings" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", actionButtonClick: "actionButtonClick" }, host: { properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -461,6 +461,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                 [tileSize]="paletteSettings.tileSize"
                 [format]="format"
                 [value]="selection"
+                [readonly]="readonly"
                 (valueChange)="handleValueChange($event)"
             >
             </kendo-colorpalette>
@@ -564,6 +565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [tileSize]="paletteSettings.tileSize"
                 [format]="format"
                 [value]="selection"
+                [readonly]="readonly"
                 (valueChange)="handleValueChange($event)"
             >
             </kendo-colorpalette>
@@ -583,7 +585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class.k-coloreditor']
             }], disabledClass: [{
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }, {
                 type: HostBinding,
                 args: ['attr.aria-disabled']

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1655306203,
+    publishDate: 1659455021,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2015/sliders-common/slider-base.js

@@ -181,7 +181,7 @@ export class SliderBase {
     }
 }
 SliderBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderBase, deps: [{ token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SliderBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SliderBase, selector: "kendo-slider-base", inputs: { title: "title", tickPlacement: "tickPlacement", vertical: "vertical", min: "min", max: "max", smallStep: "smallStep", largeStep: "largeStep", fixedTickWidth: "fixedTickWidth", disabled: "disabled", readonly: "readonly", tabindex: "tabindex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-slider-horizontal": "this.horizontalClass", "class.k-slider-vertical": "this.verticalClass", "class.k-slider": "this.sliderClass", "class.k-state-disabled": "this.disabledClass" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: LabelTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrap"], descendants: true, static: true }, { propertyName: "track", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "sliderSelection", first: true, predicate: ["sliderSelection"], descendants: true, static: true }, { propertyName: "ticksContainer", first: true, predicate: ["ticks"], descendants: true, read: ElementRef }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true }], ngImport: i0, template: ``, isInline: true });
+SliderBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SliderBase, selector: "kendo-slider-base", inputs: { title: "title", tickPlacement: "tickPlacement", vertical: "vertical", min: "min", max: "max", smallStep: "smallStep", largeStep: "largeStep", fixedTickWidth: "fixedTickWidth", disabled: "disabled", readonly: "readonly", tabindex: "tabindex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-slider-horizontal": "this.horizontalClass", "class.k-slider-vertical": "this.verticalClass", "class.k-slider": "this.sliderClass", "class.k-disabled": "this.disabledClass" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: LabelTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrap"], descendants: true, static: true }, { propertyName: "track", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "sliderSelection", first: true, predicate: ["sliderSelection"], descendants: true, static: true }, { propertyName: "ticksContainer", first: true, predicate: ["ticks"], descendants: true, read: ElementRef }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true }], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderBase, decorators: [{
             type: Component,
             args: [{
@@ -232,7 +232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class.k-slider']
             }], disabledClass: [{
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }], wrapper: [{
                 type: ViewChild,
                 args: ['wrap', { static: true }]

package/fesm2015/kendo-angular-inputs.js

@@ -519,7 +519,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1655306203,
+    publishDate: 1659455021,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -733,7 +733,7 @@ class SliderBase {
     }
 }
 SliderBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderBase, deps: [{ token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SliderBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SliderBase, selector: "kendo-slider-base", inputs: { title: "title", tickPlacement: "tickPlacement", vertical: "vertical", min: "min", max: "max", smallStep: "smallStep", largeStep: "largeStep", fixedTickWidth: "fixedTickWidth", disabled: "disabled", readonly: "readonly", tabindex: "tabindex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-slider-horizontal": "this.horizontalClass", "class.k-slider-vertical": "this.verticalClass", "class.k-slider": "this.sliderClass", "class.k-state-disabled": "this.disabledClass" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: LabelTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrap"], descendants: true, static: true }, { propertyName: "track", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "sliderSelection", first: true, predicate: ["sliderSelection"], descendants: true, static: true }, { propertyName: "ticksContainer", first: true, predicate: ["ticks"], descendants: true, read: ElementRef }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true }], ngImport: i0, template: ``, isInline: true });
+SliderBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SliderBase, selector: "kendo-slider-base", inputs: { title: "title", tickPlacement: "tickPlacement", vertical: "vertical", min: "min", max: "max", smallStep: "smallStep", largeStep: "largeStep", fixedTickWidth: "fixedTickWidth", disabled: "disabled", readonly: "readonly", tabindex: "tabindex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-slider-horizontal": "this.horizontalClass", "class.k-slider-vertical": "this.verticalClass", "class.k-slider": "this.sliderClass", "class.k-disabled": "this.disabledClass" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: LabelTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrap"], descendants: true, static: true }, { propertyName: "track", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "sliderSelection", first: true, predicate: ["sliderSelection"], descendants: true, static: true }, { propertyName: "ticksContainer", first: true, predicate: ["ticks"], descendants: true, read: ElementRef }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true }], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderBase, decorators: [{
             type: Component,
             args: [{
@@ -784,7 +784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class.k-slider']
             }], disabledClass: [{
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }], wrapper: [{
                 type: ViewChild,
                 args: ['wrap', { static: true }]
@@ -8316,7 +8316,7 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
-                    [ngClass]="activeView === view ? 'k-state-selected' : ''"
+                    [ngClass]="activeView === view ? 'k-selected' : ''"
                 >
                     <span
                         class="k-button-icon k-icon"
@@ -8366,7 +8366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
-                    [ngClass]="activeView === view ? 'k-state-selected' : ''"
+                    [ngClass]="activeView === view ? 'k-selected' : ''"
                 >
                     <span
                         class="k-button-icon k-icon"
@@ -9581,10 +9581,10 @@ class ColorGradientComponent {
                 }
             });
             const dragHandleFocusInListener = this.renderer.listen(this.gradientDragHandle.nativeElement, 'focusin', () => {
-                this.renderer.addClass(this.gradientDragHandle.nativeElement, 'k-state-focus');
+                this.renderer.addClass(this.gradientDragHandle.nativeElement, 'k-focus');
             });
             const dragHandleFocusOutListener = this.renderer.listen(this.gradientDragHandle.nativeElement, 'focusout', () => {
-                this.renderer.removeClass(this.gradientDragHandle.nativeElement, 'k-state-focus');
+                this.renderer.removeClass(this.gradientDragHandle.nativeElement, 'k-focus');
             });
             this.listeners.push(focusOutListener, keydownListener, keyupListener, dragHandleFocusInListener, dragHandleFocusOutListener);
         });
@@ -9601,7 +9601,7 @@ class ColorGradientComponent {
     }
 }
 ColorGradientComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-state-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
+ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -9901,7 +9901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['attr.aria-readonly']
             }], disabledClass: [{
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }], gradientId: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -10380,7 +10380,7 @@ class ColorPaletteComponent {
     }
 }
 ColorPaletteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { listeners: { "keydown": "handleKeydown($event)", "blur": "handleHostBlur()" }, properties: { "attr.dir": "this.direction", "attr.id": "this.paletteId", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-state-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
+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)", "blur": "handleHostBlur()" }, properties: { "attr.dir": "this.direction", "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,
@@ -10411,8 +10411,8 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     <tr *ngFor="let row of colorRows; let rowIndex = index">
                         <td *ngFor="let color of row; let colIndex = index"
                             role="option"
-                            [class.k-state-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
-                            [class.k-state-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
+                            [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
+                            [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
                             [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
                             [attr.aria-label]="color"
                             class="k-colorpalette-tile"
@@ -10468,8 +10468,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     <tr *ngFor="let row of colorRows; let rowIndex = index">
                         <td *ngFor="let color of row; let colIndex = index"
                             role="option"
-                            [class.k-state-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
-                            [class.k-state-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
+                            [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
+                            [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
                             [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
                             [attr.aria-label]="color"
                             class="k-colorpalette-tile"
@@ -10530,7 +10530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['attr.aria-disabled']
             }, {
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }], readonlyAttribute: [{
                 type: HostBinding,
                 args: ['attr.aria-readonly']
@@ -10987,7 +10987,7 @@ class FlatColorPickerComponent {
     }
 }
 FlatColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: FlatColorPickerService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", paletteSettings: "paletteSettings" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", actionButtonClick: "actionButtonClick" }, host: { properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-state-disabled": "this.disabledClass", "attr.aria-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
+FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", paletteSettings: "paletteSettings" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", actionButtonClick: "actionButtonClick" }, host: { properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -11074,6 +11074,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                 [tileSize]="paletteSettings.tileSize"
                 [format]="format"
                 [value]="selection"
+                [readonly]="readonly"
                 (valueChange)="handleValueChange($event)"
             >
             </kendo-colorpalette>
@@ -11177,6 +11178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [tileSize]="paletteSettings.tileSize"
                 [format]="format"
                 [value]="selection"
+                [readonly]="readonly"
                 (valueChange)="handleValueChange($event)"
             >
             </kendo-colorpalette>
@@ -11196,7 +11198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class.k-coloreditor']
             }], disabledClass: [{
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }, {
                 type: HostBinding,
                 args: ['attr.aria-disabled']

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-angular-inputs",
-  "version": "9.0.3",
-  "description": "Inputs Package for Angular",
+  "version": "9.0.4",
+  "description": "Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
   "homepage": "https://www.telerik.com/kendo-angular-ui/components/",