@progress/kendo-angular-inputs 18.1.0-develop.28 → 18.1.0-develop.3

package/esm2022/colorpicker/flatcolorpicker-actions.component.mjs

@@ -4,7 +4,6 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, HostBinding, EventEmitter, Output, ElementRef, ViewChild, Input } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
@@ -14,7 +13,6 @@ export class FlatColorPickerActionButtonsComponent {
     localizationService;
     hostClasses = true;
     innerTabIndex = -1;
-    size;
     actionButtonClick = new EventEmitter();
     tabOut = new EventEmitter();
     firstButton;
@@ -33,28 +31,23 @@ export class FlatColorPickerActionButtonsComponent {
         this.actionButtonClick.emit(args);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerActionButtonsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FlatColorPickerActionButtonsComponent, isStandalone: true, selector: "[kendoFlatColorPickerActionButtons]", inputs: { innerTabIndex: "innerTabIndex", size: "size" }, outputs: { actionButtonClick: "actionButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-footer": "this.hostClasses", "class.k-actions": "this.hostClasses", "class.k-actions-horizontal": "this.hostClasses" } }, viewQueries: [{ propertyName: "firstButton", first: true, predicate: ["first"], descendants: true, read: ElementRef }, { propertyName: "lastButton", first: true, predicate: ["last"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FlatColorPickerActionButtonsComponent, isStandalone: true, selector: "[kendoFlatColorPickerActionButtons]", inputs: { innerTabIndex: "innerTabIndex" }, outputs: { actionButtonClick: "actionButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-footer": "this.hostClasses", "class.k-actions": "this.hostClasses", "class.k-actions-horizontal": "this.hostClasses" } }, viewQueries: [{ propertyName: "firstButton", first: true, predicate: ["first"], descendants: true, read: ElementRef }, { propertyName: "lastButton", first: true, predicate: ["last"], descendants: true, read: ElementRef }], ngImport: i0, template: `
         <button #first
-            kendoButton
-            class="k-coloreditor-cancel"
-            [size]="size"
+            class="k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base"
             [attr.title]="getText('cancelButton')"
             (click)="onActionButtonClick('cancel', $event)"
             type="button"
             [tabindex]="innerTabIndex.toString()"
         >{{getText('cancelButton')}}</button>
         <button #last
-            kendoButton
-            themeColor="primary"
-            [size]="size"
-            class="k-coloreditor-apply"
+            class="k-coloreditor-apply k-button k-button-md k-button-solid k-button-solid-primary"
             [attr.title]="getText('applyButton')"
             (click)="onActionButtonClick('apply', $event)"
             type="button"
             [tabindex]="innerTabIndex.toString()"
             (keydown.tab)="$event.preventDefault(); tabOut.emit();"
         >{{getText('applyButton')}}</button>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerActionButtonsComponent, decorators: [{
             type: Component,
@@ -63,19 +56,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoFlatColorPickerActionButtons]',
                     template: `
         <button #first
-            kendoButton
-            class="k-coloreditor-cancel"
-            [size]="size"
+            class="k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base"
             [attr.title]="getText('cancelButton')"
             (click)="onActionButtonClick('cancel', $event)"
             type="button"
             [tabindex]="innerTabIndex.toString()"
         >{{getText('cancelButton')}}</button>
         <button #last
-            kendoButton
-            themeColor="primary"
-            [size]="size"
-            class="k-coloreditor-apply"
+            class="k-coloreditor-apply k-button k-button-md k-button-solid k-button-solid-primary"
             [attr.title]="getText('applyButton')"
             (click)="onActionButtonClick('apply', $event)"
             type="button"
@@ -83,8 +71,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             (keydown.tab)="$event.preventDefault(); tabOut.emit();"
         >{{getText('applyButton')}}</button>
     `,
-                    standalone: true,
-                    imports: [ButtonComponent]
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -97,8 +84,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['class.k-actions-horizontal']
             }], innerTabIndex: [{
                 type: Input
-            }], size: [{
-                type: Input
             }], actionButtonClick: [{
                 type: Output
             }], tabOut: [{

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

@@ -24,7 +24,6 @@ export class FlatColorPickerHeaderComponent {
     innerTabIndex = -1;
     value;
     selection;
-    size;
     viewChange = new EventEmitter();
     valuePaneClick = new EventEmitter();
     clearButtonClick = new EventEmitter();
@@ -72,7 +71,7 @@ export class FlatColorPickerHeaderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerHeaderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FlatColorPickerHeaderComponent, isStandalone: true, selector: "[kendoFlatColorPickerHeader]", inputs: { clearButton: "clearButton", activeView: "activeView", views: "views", preview: "preview", innerTabIndex: "innerTabIndex", value: "value", selection: "selection", size: "size" }, outputs: { viewChange: "viewChange", valuePaneClick: "valuePaneClick", clearButtonClick: "clearButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-header": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "clearButtonElement", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef }, { propertyName: "viewButtonsCollection", predicate: ["viewButtons"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FlatColorPickerHeaderComponent, isStandalone: true, selector: "[kendoFlatColorPickerHeader]", inputs: { clearButton: "clearButton", activeView: "activeView", views: "views", preview: "preview", innerTabIndex: "innerTabIndex", value: "value", selection: "selection" }, outputs: { viewChange: "viewChange", valuePaneClick: "valuePaneClick", clearButtonClick: "clearButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-header": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "clearButtonElement", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef }, { propertyName: "viewButtonsCollection", predicate: ["viewButtons"], descendants: true, read: ElementRef }], ngImport: i0, template: `
         <div class="k-coloreditor-header-actions k-hstack">
             <div 
                 *ngIf="viewButtons" 
@@ -90,7 +89,7 @@ export class FlatColorPickerHeaderComponent {
                     [icon]="getViewButtonIcon(view)"
                     [svgIcon]="getViewButtonsSVGIcon(view)"
                     (keydown.shift.tab)="onHeaderTabOut($event, i)"
-                    [size]="size"
+                    class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
@@ -106,7 +105,6 @@ export class FlatColorPickerHeaderComponent {
                 [tabindex]="innerTabIndex.toString()"
                 *ngIf="clearButton"
                 #clearButton
-                [size]="size"
                 fillMode="flat"
                 icon="reset-color"
                 [svgIcon]="dropletSlashIcon"
@@ -153,7 +151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [icon]="getViewButtonIcon(view)"
                     [svgIcon]="getViewButtonsSVGIcon(view)"
                     (keydown.shift.tab)="onHeaderTabOut($event, i)"
-                    [size]="size"
+                    class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
@@ -169,7 +167,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [tabindex]="innerTabIndex.toString()"
                 *ngIf="clearButton"
                 #clearButton
-                [size]="size"
                 fillMode="flat"
                 icon="reset-color"
                 [svgIcon]="dropletSlashIcon"
@@ -215,8 +212,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], selection: [{
                 type: Input
-            }], size: [{
-                type: Input
             }], viewChange: [{
                 type: Output
             }], valuePaneClick: [{

package/esm2022/colorpicker/flatcolorpicker.component.mjs

@@ -15,7 +15,7 @@ import { FlatColorPickerService } from './services/flatcolorpicker.service';
 import { packageMetadata } from "../package-metadata";
 import { ColorPickerCancelEvent } from './events';
 import { parseColor } from './utils';
-import { getStylingClasses, isPresent } from '../common/utils';
+import { isPresent } from '../common/utils';
 import { ColorGradientComponent } from './color-gradient.component';
 import { ColorPaletteComponent } from './color-palette.component';
 import { FlatColorPickerHeaderComponent } from './flatcolorpicker-header.component';
@@ -27,7 +27,6 @@ import { LocalizedColorPickerMessagesDirective } from "./localization/localized-
 import * as i0 from "@angular/core";
 import * as i1 from "./services/flatcolorpicker.service";
 import * as i2 from "@progress/kendo-angular-l10n";
-const DEFAULT_SIZE = 'medium';
 /**
  * Represents the [Kendo UI FlatColorPicker component for Angular]({% slug overview_flatcolorpicker %}).
  *
@@ -178,10 +177,6 @@ export class FlatColorPickerComponent {
     get gradientSettings() {
         return this._gradientSettings;
     }
-    /**
-     * @hidden
-     */
-    adaptiveMode = false;
     /**
      * Configures the palette view.
      */
@@ -191,23 +186,6 @@ export class FlatColorPickerComponent {
     get paletteSettings() {
         return this._paletteSettings;
     }
-    /**
-     * The size property specifies the padding of the FlatColorPicker internal elements.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
-     */
-    set size(size) {
-        const newSize = size || DEFAULT_SIZE;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
-    }
-    get size() {
-        return this._size;
-    }
     /**
      * Fires each time the component value is changed.
      */
@@ -255,7 +233,6 @@ export class FlatColorPickerComponent {
     dynamicRTLSubscription;
     subscriptions = new Subscription();
     internalNavigation = false;
-    _size = 'medium';
     control;
     /**
      * @hidden
@@ -292,10 +269,6 @@ export class FlatColorPickerComponent {
         this.setActiveView();
     }
     ngAfterViewInit() {
-        const stylingInputs = ['size'];
-        stylingInputs.forEach(input => {
-            this.handleClasses(this[input], input);
-        });
         this.setHostElementAriaLabel();
         this.initDomEvents();
         this.setSizingVariables();
@@ -483,14 +456,12 @@ export class FlatColorPickerComponent {
     setSizingVariables() {
         const paletteTileSize = this.service.paletteTileLayout(this.paletteSettings.tileSize);
         const element = this.host.nativeElement.querySelector('.k-coloreditor-views.k-vstack');
-        const cssProperties = [`--kendo-color-preview-columns: ${this.paletteSettings.columns};`];
-        if (paletteTileSize.width) {
-            cssProperties.push(`--kendo-color-preview-width: ${paletteTileSize.width}px;`);
-        }
-        if (paletteTileSize.height) {
-            cssProperties.push(`--kendo-color-preview-height: ${paletteTileSize.height}px;`);
-        }
-        this.renderer.setProperty(element, 'style', cssProperties.join(' '));
+        const cssProperties = `
+            --kendo-color-preview-columns: ${this.paletteSettings.columns};
+            --kendo-color-preview-width: ${paletteTileSize.width}px;
+            --kendo-color-preview-height: ${paletteTileSize.height}px;
+        `;
+        this.renderer.setProperty(element, 'style', cssProperties);
     }
     changeCurrentValue(color) {
         this.selection = color;
@@ -543,18 +514,8 @@ export class FlatColorPickerComponent {
         this.gradientElement && this.renderer.removeAttribute(this.gradientElement.nativeElement, 'role');
         this.gradientElement && this.renderer.removeAttribute(this.gradientElement.nativeElement, 'aria-label');
     }
-    handleClasses(value, input) {
-        const elem = this.host.nativeElement;
-        const classes = getStylingClasses('coloreditor', input, this[input], value);
-        if (classes.toRemove) {
-            this.renderer.removeClass(elem, classes.toRemove);
-        }
-        if (classes.toAdd) {
-            this.renderer.addClass(elem, classes.toAdd);
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1.FlatColorPickerService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FlatColorPickerComponent, isStandalone: true, 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", adaptiveMode: "adaptiveMode", paletteSettings: "paletteSettings", size: "size" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", clearButtonClick: "clearButtonClick", actionButtonClick: "actionButtonClick" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler()", "focusin": "focusHandler($event)" }, properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.isDisabled", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FlatColorPickerComponent, isStandalone: true, 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", clearButtonClick: "clearButtonClick", actionButtonClick: "actionButtonClick" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler()", "focusin": "focusHandler($event)" }, properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.isDisabled", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -630,7 +591,6 @@ export class FlatColorPickerComponent {
             [clearButton]="clearButton"
             [activeView]="activeView"
             [views]="views"
-            [size]="size"
             [value]="value"
             [selection]="selection"
             [preview]="preview"
@@ -643,8 +603,6 @@ export class FlatColorPickerComponent {
                 [tabindex]="innerTabIndex"
                 *ngIf="activeView === 'gradient'"
                 [value]="selection"
-                [size]="size"
-                [adaptiveMode]="adaptiveMode"
                 [format]="format"
                 [opacity]="gradientSettings.opacity"
                 [delay]="gradientSettings.delay"
@@ -659,7 +617,6 @@ export class FlatColorPickerComponent {
                 [tabindex]="innerTabIndex"
                 *ngIf="activeView === 'palette'"
                 [palette]="paletteSettings.palette"
-                [size]="size"
                 [columns]="paletteSettings.columns"
                 [tileSize]="paletteSettings.tileSize"
                 [format]="format"
@@ -668,16 +625,14 @@ export class FlatColorPickerComponent {
                 (valueChange)="handleValueChange($event)"
             ></kendo-colorpalette>
         </div>
-        <div *ngIf="preview && !adaptiveMode"
-            #footer
-            kendoFlatColorPickerActionButtons
+        <div kendoFlatColorPickerActionButtons
             [innerTabIndex]="innerTabIndex"
-            [size]="size"
+            *ngIf="preview"
+            #footer
             [ngClass]="'k-justify-content-' + actionsLayout"
             (actionButtonClick)="onAction($event)"
-            (tabOut)="firstFocusable.focus()">
-        </div>
-`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection", "size"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { kind: "component", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["adaptiveMode", "id", "opacity", "size", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { kind: "component", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "size", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { kind: "component", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex", "size"], outputs: ["actionButtonClick", "tabOut"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+            (tabOut)="firstFocusable.focus()"></div>
+`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { kind: "component", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["id", "opacity", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { kind: "component", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { kind: "component", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex"], outputs: ["actionButtonClick", "tabOut"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerComponent, decorators: [{
             type: Component,
@@ -761,7 +716,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [clearButton]="clearButton"
             [activeView]="activeView"
             [views]="views"
-            [size]="size"
             [value]="value"
             [selection]="selection"
             [preview]="preview"
@@ -774,8 +728,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [tabindex]="innerTabIndex"
                 *ngIf="activeView === 'gradient'"
                 [value]="selection"
-                [size]="size"
-                [adaptiveMode]="adaptiveMode"
                 [format]="format"
                 [opacity]="gradientSettings.opacity"
                 [delay]="gradientSettings.delay"
@@ -790,7 +742,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [tabindex]="innerTabIndex"
                 *ngIf="activeView === 'palette'"
                 [palette]="paletteSettings.palette"
-                [size]="size"
                 [columns]="paletteSettings.columns"
                 [tileSize]="paletteSettings.tileSize"
                 [format]="format"
@@ -799,15 +750,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 (valueChange)="handleValueChange($event)"
             ></kendo-colorpalette>
         </div>
-        <div *ngIf="preview && !adaptiveMode"
-            #footer
-            kendoFlatColorPickerActionButtons
+        <div kendoFlatColorPickerActionButtons
             [innerTabIndex]="innerTabIndex"
-            [size]="size"
+            *ngIf="preview"
+            #footer
             [ngClass]="'k-justify-content-' + actionsLayout"
             (actionButtonClick)="onAction($event)"
-            (tabOut)="firstFocusable.focus()">
-        </div>
+            (tabOut)="firstFocusable.focus()"></div>
 `,
                     standalone: true,
                     imports: [LocalizedColorPickerMessagesDirective, NgIf, FlatColorPickerHeaderComponent, ColorGradientComponent, ColorPaletteComponent, FlatColorPickerActionButtonsComponent, NgClass]
@@ -876,12 +825,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], gradientSettings: [{
                 type: Input
-            }], adaptiveMode: [{
-                type: Input
             }], paletteSettings: [{
                 type: Input
-            }], size: [{
-                type: Input
             }], valueChange: [{
                 type: Output
             }], cancel: [{

package/esm2022/colorpicker/localization/messages.mjs

@@ -117,16 +117,8 @@ export class ColorPickerMessages extends ComponentMessages {
      * The message for the Cancel action button.
      */
     cancelButton;
-    /**
-     * The title for the Close button in adaptive mode.
-     */
-    closeButton;
-    /**
-     * The title for the ActionSheet when in adaptive mode.
-     */
-    adaptiveTitle;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton", closeButton: "closeButton", adaptiveTitle: "adaptiveTitle" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, decorators: [{
             type: Directive,
@@ -188,8 +180,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], cancelButton: [{
                 type: Input
-            }], closeButton: [{
-                type: Input
-            }], adaptiveTitle: [{
-                type: Input
             }] } });

package/esm2022/colorpicker/services/flatcolorpicker.service.mjs

@@ -18,7 +18,7 @@ export class FlatColorPickerService {
             undefined;
         return {
             palette: settingsPalette || defaultPreset,
-            tileSize: settings.tileSize,
+            tileSize: settings.tileSize || 24,
             columns: settings.columns || presetColumns || 10
         };
     }
@@ -27,8 +27,8 @@ export class FlatColorPickerService {
             return { width: tileSize, height: tileSize };
         }
         return {
-            width: tileSize?.width ? tileSize?.width : tileSize?.height,
-            height: tileSize?.height ? tileSize?.height : tileSize?.width
+            width: tileSize.width ? tileSize.width : tileSize.height,
+            height: tileSize.height ? tileSize.height : tileSize.width
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });

package/esm2022/colorpicker.module.mjs

@@ -7,7 +7,6 @@ import { KENDO_COLORGRADIENT, KENDO_COLORPALETTE, KENDO_COLORPICKER, KENDO_FLATC
 import { PopupService } from '@progress/kendo-angular-popup';
 import { ResizeBatchService } from '@progress/kendo-angular-common';
 import { IconsService } from '@progress/kendo-angular-icons';
-import { AdaptiveService } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./colorpicker/colorpicker.component";
 import * as i2 from "./colorpicker/localization/custom-messages.component";
@@ -22,13 +21,13 @@ import * as i5 from "./colorpicker/color-palette.component";
 export class ColorPickerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerModule, imports: [i1.ColorPickerComponent, i2.ColorPickerCustomMessagesComponent, i3.FlatColorPickerComponent, i2.ColorPickerCustomMessagesComponent, i4.ColorGradientComponent, i2.ColorPickerCustomMessagesComponent, i5.ColorPaletteComponent, i2.ColorPickerCustomMessagesComponent], exports: [i1.ColorPickerComponent, i2.ColorPickerCustomMessagesComponent, i3.FlatColorPickerComponent, i2.ColorPickerCustomMessagesComponent, i4.ColorGradientComponent, i2.ColorPickerCustomMessagesComponent, i5.ColorPaletteComponent, i2.ColorPickerCustomMessagesComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerModule, providers: [PopupService, IconsService, ResizeBatchService, AdaptiveService], imports: [i1.ColorPickerComponent, i3.FlatColorPickerComponent, i4.ColorGradientComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerModule, providers: [PopupService, IconsService, ResizeBatchService], imports: [i1.ColorPickerComponent, i3.FlatColorPickerComponent, i4.ColorGradientComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_COLORPICKER, ...KENDO_FLATCOLORPICKER, ...KENDO_COLORGRADIENT, ...KENDO_COLORPALETTE],
                     exports: [...KENDO_COLORPICKER, ...KENDO_FLATCOLORPICKER, ...KENDO_COLORGRADIENT, ...KENDO_COLORPALETTE],
-                    providers: [PopupService, IconsService, ResizeBatchService, AdaptiveService]
+                    providers: [PopupService, IconsService, ResizeBatchService]
                 }]
         }] });

package/esm2022/inputs.module.mjs

@@ -8,7 +8,6 @@ import { KENDO_ADORNMENTS, ResizeBatchService } from '@progress/kendo-angular-co
 import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
 import { IconsService } from '@progress/kendo-angular-icons';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { AdaptiveService } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./textbox/textbox.directive";
 import * as i2 from "./textbox/textbox.component";
@@ -87,13 +86,13 @@ import * as i41 from "./otpinput/localization/custom-messages.component";
 export class InputsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, imports: [i1.TextBoxDirective, i2.TextBoxComponent, i3.InputSeparatorComponent, i4.TextBoxSuffixTemplateDirective, i5.TextBoxPrefixTemplateDirective, i6.TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i8.NumericTextBoxComponent, i9.NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i10.MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i11.TextAreaComponent, i12.TextAreaDirective, i13.TextAreaPrefixComponent, i14.TextAreaSuffixComponent, i7.SeparatorComponent, i15.CheckBoxComponent, i16.CheckBoxDirective, i17.RadioButtonComponent, i18.RadioButtonDirective, i19.SwitchComponent, i20.SwitchCustomMessagesComponent, i21.FormFieldComponent, i22.HintComponent, i23.ErrorComponent, i24.SliderComponent, i25.SliderCustomMessagesComponent, i26.LabelTemplateDirective, i27.RangeSliderComponent, i28.RangeSliderCustomMessagesComponent, i26.LabelTemplateDirective, i29.RatingComponent, i30.RatingItemTemplateDirective, i31.RatingHoveredItemTemplateDirective, i32.RatingSelectedItemTemplateDirective, i33.SignatureComponent, i34.SignatureCustomMessagesComponent, i35.ColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i37.FlatColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i38.ColorGradientComponent, i36.ColorPickerCustomMessagesComponent, i39.ColorPaletteComponent, i36.ColorPickerCustomMessagesComponent, i40.OTPInputComponent, i41.OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent], exports: [i1.TextBoxDirective, i2.TextBoxComponent, i3.InputSeparatorComponent, i4.TextBoxSuffixTemplateDirective, i5.TextBoxPrefixTemplateDirective, i6.TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i8.NumericTextBoxComponent, i9.NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i10.MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i11.TextAreaComponent, i12.TextAreaDirective, i13.TextAreaPrefixComponent, i14.TextAreaSuffixComponent, i7.SeparatorComponent, i15.CheckBoxComponent, i16.CheckBoxDirective, i17.RadioButtonComponent, i18.RadioButtonDirective, i19.SwitchComponent, i20.SwitchCustomMessagesComponent, i21.FormFieldComponent, i22.HintComponent, i23.ErrorComponent, i24.SliderComponent, i25.SliderCustomMessagesComponent, i26.LabelTemplateDirective, i27.RangeSliderComponent, i28.RangeSliderCustomMessagesComponent, i26.LabelTemplateDirective, i29.RatingComponent, i30.RatingItemTemplateDirective, i31.RatingHoveredItemTemplateDirective, i32.RatingSelectedItemTemplateDirective, i33.SignatureComponent, i34.SignatureCustomMessagesComponent, i35.ColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i37.FlatColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i38.ColorGradientComponent, i36.ColorPickerCustomMessagesComponent, i39.ColorPaletteComponent, i36.ColorPickerCustomMessagesComponent, i40.OTPInputComponent, i41.OTPInputCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService, AdaptiveService], imports: [i2.TextBoxComponent, i7.SeparatorComponent, i8.NumericTextBoxComponent, i7.SeparatorComponent, i7.SeparatorComponent, i7.SeparatorComponent, i24.SliderComponent, i27.RangeSliderComponent, i29.RatingComponent, i33.SignatureComponent, i35.ColorPickerComponent, i37.FlatColorPickerComponent, i38.ColorGradientComponent, i40.OTPInputComponent, i7.SeparatorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [i2.TextBoxComponent, i7.SeparatorComponent, i8.NumericTextBoxComponent, i7.SeparatorComponent, i7.SeparatorComponent, i7.SeparatorComponent, i24.SliderComponent, i27.RangeSliderComponent, i29.RatingComponent, i33.SignatureComponent, i35.ColorPickerComponent, i37.FlatColorPickerComponent, i38.ColorGradientComponent, i40.OTPInputComponent, i7.SeparatorComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_INPUTS, ...KENDO_ADORNMENTS],
                     exports: [...KENDO_INPUTS, ...KENDO_ADORNMENTS],
-                    providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService, AdaptiveService]
+                    providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService]
                 }]
         }] });