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

package/colorpicker/adaptiveness/adaptive-close-button.component.d.ts

@@ -0,0 +1,20 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EventEmitter } from '@angular/core';
+import { ButtonThemeColor } from '@progress/kendo-angular-buttons';
+import { SVGIcon } from '@progress/kendo-angular-icons';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class AdaptiveCloseButtonComponent {
+    title: string;
+    icon: string;
+    svgIcon: SVGIcon;
+    color: ButtonThemeColor;
+    close: EventEmitter<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdaptiveCloseButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdaptiveCloseButtonComponent, "kendo-adaptive-close-button", never, { "title": { "alias": "title"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, { "close": "close"; }, never, never, true, never>;
+}

package/colorpicker/adaptiveness/adaptive-renderer.component.d.ts

@@ -0,0 +1,38 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EventEmitter, TemplateRef } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { SVGIcon } from '@progress/kendo-angular-icons';
+import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
+import { TextBoxComponent } from '../../textbox/textbox.component';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class AdaptiveRendererComponent {
+    localization: LocalizationService;
+    title: string;
+    subtitle: string;
+    actionSheetTemplate: TemplateRef<any>;
+    isActionSheetExpanded: boolean;
+    preview: boolean;
+    actionSheetClose: EventEmitter<any>;
+    onExpand: EventEmitter<any>;
+    onCollapse: EventEmitter<any>;
+    onApply: EventEmitter<any>;
+    onCancel: EventEmitter<any>;
+    actionSheet: ActionSheetComponent;
+    actionSheetSearchBar: TextBoxComponent;
+    cancelButton: ButtonComponent;
+    applyButton: ButtonComponent;
+    constructor(localization: LocalizationService);
+    animationDuration: number;
+    xIcon: SVGIcon;
+    checkIcon: SVGIcon;
+    messageFor(key: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdaptiveRendererComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdaptiveRendererComponent, "kendo-adaptive-renderer", never, { "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "actionSheetTemplate": { "alias": "actionSheetTemplate"; "required": false; }; "isActionSheetExpanded": { "alias": "isActionSheetExpanded"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; }, { "actionSheetClose": "actionSheetClose"; "onExpand": "onExpand"; "onCollapse": "onCollapse"; "onApply": "onApply"; "onCancel": "onCancel"; }, never, never, true, never>;
+}

package/colorpicker/color-gradient-text-label.directive.d.ts

@@ -0,0 +1,19 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { OnInit, Renderer2 } from '@angular/core';
+import { TextBoxComponent } from '../textbox/textbox.component';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class TextLabelDirective implements OnInit {
+    private textBox;
+    private renderer;
+    focusableId: any;
+    constructor(textBox: TextBoxComponent, renderer: Renderer2);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextLabelDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TextLabelDirective, "[kendoTextLabel]", never, { "focusableId": { "alias": "focusableId"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -10,6 +10,7 @@ import { OutputFormat, HSVA } from './models';
 import { KendoDragEvent } from './events/kendo-drag-event';
 import { ColorInputComponent } from './color-input.component';
 import { SVGIcon } from '@progress/kendo-angular-icons';
+import { InputSize } from '../common/models';
 import * as i0 from "@angular/core";
 /**
  * The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
@@ -43,6 +44,10 @@ export declare class ColorGradientComponent implements OnInit, OnChanges, OnDest
      * @hidden
      */
     focusHandler(ev: any): void;
+    /**
+     * @hidden
+     */
+    adaptiveMode: boolean;
     /**
      * @hidden
      */
@@ -53,6 +58,17 @@ export declare class ColorGradientComponent implements OnInit, OnChanges, OnDest
      * @default true
      */
     opacity: boolean;
+    /**
+     * The size property specifies the padding of the ColorGradient internal elements.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set size(size: InputSize);
+    get size(): InputSize;
     /**
      * Sets the disabled state of the ColorGradient. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorgradient#toc-managing-the-colorgradient-disabled-state-in-reactive-forms).
      *
@@ -160,6 +176,7 @@ export declare class ColorGradientComponent implements OnInit, OnChanges, OnDest
     private listeners;
     private hueSliderTouched;
     private alphaSliderTouched;
+    private _size;
     private updateValues;
     private changeRequestsSubscription;
     private dynamicRTLSubscription;
@@ -276,6 +293,7 @@ export declare class ColorGradientComponent implements OnInit, OnChanges, OnDest
     private addEventListeners;
     private subscribeChanges;
     private unsubscribeChanges;
+    private handleClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorGradientComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ColorGradientComponent, "kendo-colorgradient", ["kendoColorGradient"], { "id": { "alias": "id"; "required": false; }; "opacity": { "alias": "opacity"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "delay": { "alias": "delay"; "required": false; }; "value": { "alias": "value"; "required": false; }; "contrastTool": { "alias": "contrastTool"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "format": { "alias": "format"; "required": false; }; "gradientSliderStep": { "alias": "gradientSliderStep"; "required": false; }; "gradientSliderSmallStep": { "alias": "gradientSliderSmallStep"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorGradientComponent, "kendo-colorgradient", ["kendoColorGradient"], { "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "id": { "alias": "id"; "required": false; }; "opacity": { "alias": "opacity"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "delay": { "alias": "delay"; "required": false; }; "value": { "alias": "value"; "required": false; }; "contrastTool": { "alias": "contrastTool"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "format": { "alias": "format"; "required": false; }; "gradientSliderStep": { "alias": "gradientSliderStep"; "required": false; }; "gradientSliderSmallStep": { "alias": "gradientSliderSmallStep"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }

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

@@ -2,11 +2,12 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { OnChanges, SimpleChanges, EventEmitter, ElementRef, AfterViewInit, Renderer2 } from '@angular/core';
+import { OnChanges, SimpleChanges, EventEmitter, ElementRef, AfterViewInit, Renderer2, ChangeDetectorRef } from '@angular/core';
 import { RGBA } from './models';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { NumericTextBoxComponent } from './../numerictextbox/numerictextbox.component';
 import { SVGIcon } from '@progress/kendo-svg-icons';
+import { InputSize } from '../common/models';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -14,6 +15,7 @@ import * as i0 from "@angular/core";
 export declare class ColorInputComponent implements AfterViewInit, OnChanges {
     private host;
     private renderer;
+    private cdr;
     localizationService: LocalizationService;
     /**
      * The id of the hex input.
@@ -23,6 +25,16 @@ export declare class ColorInputComponent implements AfterViewInit, OnChanges {
      * The color format view.
      */
     formatView: string;
+    /**
+     * The size property specifies the padding of the ColorInput.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    size: InputSize;
     /**
      * The inputs tabindex.
      */
@@ -77,7 +89,7 @@ export declare class ColorInputComponent implements AfterViewInit, OnChanges {
      */
     caretAltExpandIcon: SVGIcon;
     private subscriptions;
-    constructor(host: ElementRef, renderer: Renderer2, localizationService: LocalizationService);
+    constructor(host: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef, localizationService: LocalizationService);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -93,5 +105,5 @@ export declare class ColorInputComponent implements AfterViewInit, OnChanges {
     private initDomEvents;
     private lastInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ColorInputComponent, "kendo-colorinput", never, { "focusableId": { "alias": "focusableId"; "required": false; }; "formatView": { "alias": "formatView"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "value": { "alias": "value"; "required": false; }; "opacity": { "alias": "opacity"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "valueChange": "valueChange"; "tabOut": "tabOut"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorInputComponent, "kendo-colorinput", never, { "focusableId": { "alias": "focusableId"; "required": false; }; "formatView": { "alias": "formatView"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "value": { "alias": "value"; "required": false; }; "opacity": { "alias": "opacity"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "valueChange": "valueChange"; "tabOut": "tabOut"; }, never, never, true, never>;
 }

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

@@ -7,6 +7,7 @@ import { ControlValueAccessor } from '@angular/forms';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { TileSize, OutputFormat, TableCell } from './models';
 import { ColorPaletteService } from './services/color-palette.service';
+import { InputSize } from '../common/models';
 import * as i0 from "@angular/core";
 /**
  * The ColorPalette component provides a set of predefined palette presets and enables you to implement a custom color palette.
@@ -71,6 +72,17 @@ export declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnD
      */
     set palette(value: string | Array<string>);
     get palette(): string | Array<string>;
+    /**
+     * The size property specifies the padding of the ColorPalette internal elements.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set size(size: InputSize);
+    get size(): InputSize;
     /**
      * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      */
@@ -87,11 +99,7 @@ export declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnD
      */
     readonly: boolean;
     /**
-     * Specifies the size of a color cell.
-     *
-     * The possible values are:
-     * * (Default) `tileSize = 24`
-     * * `{ width: number, height: number }`
+     * Specifies the size of a color cell. The default tile size depends on the `size` of the component.
      */
     tileSize: number | TileSize;
     /**
@@ -153,6 +161,7 @@ export declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnD
      */
     uniqueId: string;
     private selection;
+    private _size;
     private _value;
     private _columns;
     private _palette;
@@ -216,8 +225,9 @@ export declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnD
     private handleCellNavigation;
     private setHostElementAriaLabel;
     private handleEnter;
+    private handleClasses;
     private notifyNgTouched;
     private notifyNgChanged;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorPaletteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ColorPaletteComponent, "kendo-colorpalette", ["kendoColorPalette"], { "id": { "alias": "id"; "required": false; }; "format": { "alias": "format"; "required": false; }; "value": { "alias": "value"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "palette": { "alias": "palette"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tileSize": { "alias": "tileSize"; "required": false; }; }, { "selectionChange": "selectionChange"; "valueChange": "valueChange"; "cellSelection": "cellSelection"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorPaletteComponent, "kendo-colorpalette", ["kendoColorPalette"], { "id": { "alias": "id"; "required": false; }; "format": { "alias": "format"; "required": false; }; "value": { "alias": "value"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "palette": { "alias": "palette"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tileSize": { "alias": "tileSize"; "required": false; }; }, { "selectionChange": "selectionChange"; "valueChange": "valueChange"; "cellSelection": "cellSelection"; }, never, never, true, never>;
 }

package/colorpicker/colorpicker.component.d.ts

@@ -5,11 +5,15 @@
 import { EventEmitter, ElementRef, OnDestroy, ViewContainerRef, ChangeDetectorRef, NgZone, OnChanges, OnInit, AfterViewInit, Renderer2, Injector } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { PopupService } from '@progress/kendo-angular-popup';
+import { AdaptiveService, AdaptiveSize } from '@progress/kendo-angular-utils';
+import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupSettings, PaletteSettings, OutputFormat, ColorPickerView, GradientSettings, ColorPickerActionsLayout } from './models';
 import { ActiveColorClickEvent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerOpenEvent } from './events';
 import { InputFillMode, InputRounded, InputSize } from '../common/models';
 import { SVGIcon } from '@progress/kendo-angular-icons';
+import { AdaptiveMode } from './models/adaptive-mode';
+import { AdaptiveRendererComponent } from './adaptiveness/adaptive-renderer.component';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
@@ -25,6 +29,7 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
     private ngZone;
     private renderer;
     private injector;
+    private adaptiveService;
     hostClasses: boolean;
     get focusedClass(): boolean;
     get disabledClass(): boolean;
@@ -49,6 +54,10 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
      */
     set view(view: ColorPickerView);
     get view(): ColorPickerView;
+    /**
+     * Enables or disables the adaptive mode. By default, adaptive rendering is disabled.
+     */
+    adaptiveMode: AdaptiveMode;
     /**
      * Sets the initially active view in the popup. The property supports two-way binding.
      *
@@ -198,13 +207,13 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
      */
     valueChange: EventEmitter<any>;
     /**
-     * Fires each time the popup is about to open.
-     * This event is preventable. If you cancel it, the popup will remain closed.
+     * Fires each time the Popup (or ActionSheet in adaptive mode) is about to open.
+     * This event is preventable. If you cancel it, the Popup (or the ActionSheet) will remain closed.
      */
     open: EventEmitter<ColorPickerOpenEvent>;
     /**
-     * Fires each time the popup is about to close.
-     * This event is preventable. If you cancel it, the popup will remain open.
+     * Fires each time the Popup (or ActionSheet in adaptive mode) is about to close.
+     * This event is preventable. If you cancel it, the Popup (or the ActionSheet) will remain open.
      */
     close: EventEmitter<ColorPickerCloseEvent>;
     /**
@@ -243,13 +252,33 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
      */
     isFocused: boolean;
     /**
-     * Indicates whether the ColorPicker popup is open.
+    * @hidden
+    */
+    windowSize: AdaptiveSize;
+    /**
+     * Returns the current open state. Returns `true` if the Popup (or ActionSheet in adaptive mode) is currently open.
      */
     get isOpen(): boolean;
     /**
      * @hidden
      */
     get customIconStyles(): string;
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled(): boolean;
+    /**
+     * @hidden
+     */
+    get isAdaptive(): boolean;
+    /**
+     * @hidden
+     */
+    get actionSheet(): ActionSheetComponent;
+    /**
+     * @hidden
+     */
+    get isActionSheetExpanded(): boolean;
     /**
      * @hidden
      */
@@ -263,6 +292,10 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
     private activeColor;
     private popupTemplate;
     private flatColorPicker;
+    /**
+     * @hidden
+     */
+    adaptiveRenderer: AdaptiveRendererComponent;
     /**
      * @hidden
      */
@@ -282,11 +315,15 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
     private popupSubs;
     private colorPickerId;
     private control;
-    constructor(host: ElementRef, popupService: PopupService, cdr: ChangeDetectorRef, localizationService: LocalizationService, ngZone: NgZone, renderer: Renderer2, injector: Injector);
+    constructor(host: ElementRef, popupService: PopupService, cdr: ChangeDetectorRef, localizationService: LocalizationService, ngZone: NgZone, renderer: Renderer2, injector: Injector, adaptiveService: AdaptiveService);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnChanges(changes: any): void;
     ngOnDestroy(): void;
+    /**
+     * @hidden
+     */
+    onResize(): void;
     /**
      * @hidden
      */
@@ -320,7 +357,7 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
      */
     reset(): void;
     /**
-     * Toggles the popup of the ColorPicker.
+     * Toggles the Popup (or ActionSheet in adaptive mode) of the ColorPicker.
      * Does not trigger the `open` and `close` events of the component.
      *
      * @param open An optional parameter. Specifies whether the popup will be opened or closed.
@@ -354,6 +391,14 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
      * @hidden
      */
     handleWrapperKeyDown(event: any): void;
+    /**
+     * @hidden
+     */
+    onApply(): void;
+    /**
+     * @hidden
+     */
+    onCancel(e: any): void;
     /**
      * @hidden
      */
@@ -368,6 +413,8 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
     private popupBlurInvalid;
     private toggleWithEvents;
     private focusFirstElement;
+    private openActionSheet;
+    private closeActionSheet;
     private openPopup;
     private closePopup;
     private get firstFocusableElement();
@@ -379,5 +426,5 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
     private domFocusListener;
     private handleHostId;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ColorPickerComponent, "kendo-colorpicker", ["kendoColorPicker"], { "views": { "alias": "views"; "required": false; }; "view": { "alias": "view"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "format": { "alias": "format"; "required": false; }; "value": { "alias": "value"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "paletteSettings": { "alias": "paletteSettings"; "required": false; }; "gradientSettings": { "alias": "gradientSettings"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; "actionsLayout": { "alias": "actionsLayout"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; "cancel": "cancel"; "activeColorClick": "activeColorClick"; "clearButtonClick": "clearButtonClick"; "activeViewChange": "activeViewChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorPickerComponent, "kendo-colorpicker", ["kendoColorPicker"], { "views": { "alias": "views"; "required": false; }; "view": { "alias": "view"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "format": { "alias": "format"; "required": false; }; "value": { "alias": "value"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "paletteSettings": { "alias": "paletteSettings"; "required": false; }; "gradientSettings": { "alias": "gradientSettings"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; "actionsLayout": { "alias": "actionsLayout"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; "cancel": "cancel"; "activeColorClick": "activeColorClick"; "clearButtonClick": "clearButtonClick"; "activeViewChange": "activeViewChange"; }, never, never, true, never>;
 }

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

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { EventEmitter, ElementRef } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { InputSize } from '../common/models';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -12,6 +13,7 @@ export declare class FlatColorPickerActionButtonsComponent {
     localizationService: LocalizationService;
     hostClasses: boolean;
     innerTabIndex: number;
+    size: InputSize;
     actionButtonClick: EventEmitter<any>;
     tabOut: EventEmitter<any>;
     firstButton: ElementRef;
@@ -20,5 +22,5 @@ export declare class FlatColorPickerActionButtonsComponent {
     getText(text: string): string;
     onActionButtonClick(type: string, ev: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FlatColorPickerActionButtonsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FlatColorPickerActionButtonsComponent, "[kendoFlatColorPickerActionButtons]", never, { "innerTabIndex": { "alias": "innerTabIndex"; "required": false; }; }, { "actionButtonClick": "actionButtonClick"; "tabOut": "tabOut"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlatColorPickerActionButtonsComponent, "[kendoFlatColorPickerActionButtons]", never, { "innerTabIndex": { "alias": "innerTabIndex"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "actionButtonClick": "actionButtonClick"; "tabOut": "tabOut"; }, never, never, true, never>;
 }

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

@@ -6,6 +6,7 @@ import { EventEmitter, QueryList, ElementRef, Renderer2, AfterViewInit } from '@
 import { SVGIcon } from '@progress/kendo-svg-icons';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ColorPickerView } from './models';
+import { InputSize } from '../common/models';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -21,6 +22,7 @@ export declare class FlatColorPickerHeaderComponent implements AfterViewInit {
     innerTabIndex: number;
     value: string;
     selection: string;
+    size: InputSize;
     viewChange: EventEmitter<ColorPickerView>;
     valuePaneClick: EventEmitter<any>;
     clearButtonClick: EventEmitter<any>;
@@ -39,5 +41,5 @@ export declare class FlatColorPickerHeaderComponent implements AfterViewInit {
     getText(text: string): string;
     onHeaderTabOut(ev: any, index: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FlatColorPickerHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FlatColorPickerHeaderComponent, "[kendoFlatColorPickerHeader]", never, { "clearButton": { "alias": "clearButton"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "views": { "alias": "views"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; "innerTabIndex": { "alias": "innerTabIndex"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; }, { "viewChange": "viewChange"; "valuePaneClick": "valuePaneClick"; "clearButtonClick": "clearButtonClick"; "tabOut": "tabOut"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlatColorPickerHeaderComponent, "[kendoFlatColorPickerHeader]", never, { "clearButton": { "alias": "clearButton"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "views": { "alias": "views"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; "innerTabIndex": { "alias": "innerTabIndex"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "viewChange": "viewChange"; "valuePaneClick": "valuePaneClick"; "clearButtonClick": "clearButtonClick"; "tabOut": "tabOut"; }, never, never, true, never>;
 }

package/colorpicker/flatcolorpicker.component.d.ts

@@ -12,6 +12,7 @@ import { ColorGradientComponent } from './color-gradient.component';
 import { ColorPaletteComponent } from './color-palette.component';
 import { FlatColorPickerHeaderComponent } from './flatcolorpicker-header.component';
 import { FlatColorPickerActionButtonsComponent } from './flatcolorpicker-actions.component';
+import { InputSize } from "../common/models";
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI FlatColorPicker component for Angular]({% slug overview_flatcolorpicker %}).
@@ -122,11 +123,26 @@ export declare class FlatColorPickerComponent implements OnInit, AfterViewInit,
      */
     set gradientSettings(value: GradientSettings);
     get gradientSettings(): GradientSettings;
+    /**
+     * @hidden
+     */
+    adaptiveMode: boolean;
     /**
      * Configures the palette view.
      */
     set paletteSettings(value: PaletteSettings);
     get paletteSettings(): PaletteSettings;
+    /**
+     * The size property specifies the padding of the FlatColorPicker internal elements.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set size(size: InputSize);
+    get size(): InputSize;
     /**
      * Fires each time the component value is changed.
      */
@@ -169,6 +185,7 @@ export declare class FlatColorPickerComponent implements OnInit, AfterViewInit,
     private dynamicRTLSubscription;
     private subscriptions;
     private internalNavigation;
+    private _size;
     private control;
     /**
      * @hidden
@@ -262,6 +279,7 @@ export declare class FlatColorPickerComponent implements OnInit, AfterViewInit,
     private notifyNgTouched;
     private initDomEvents;
     private removeGradientAttributes;
+    private handleClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<FlatColorPickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FlatColorPickerComponent, "kendo-flatcolorpicker", ["kendoFlatColorPicker"], { "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "format": { "alias": "format"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; "actionsLayout": { "alias": "actionsLayout"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "views": { "alias": "views"; "required": false; }; "gradientSettings": { "alias": "gradientSettings"; "required": false; }; "paletteSettings": { "alias": "paletteSettings"; "required": false; }; }, { "valueChange": "valueChange"; "cancel": "cancel"; "activeViewChange": "activeViewChange"; "clearButtonClick": "clearButtonClick"; "actionButtonClick": "actionButtonClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlatColorPickerComponent, "kendo-flatcolorpicker", ["kendoFlatColorPicker"], { "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "format": { "alias": "format"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; "actionsLayout": { "alias": "actionsLayout"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "views": { "alias": "views"; "required": false; }; "gradientSettings": { "alias": "gradientSettings"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "paletteSettings": { "alias": "paletteSettings"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "valueChange": "valueChange"; "cancel": "cancel"; "activeViewChange": "activeViewChange"; "clearButtonClick": "clearButtonClick"; "actionButtonClick": "actionButtonClick"; }, never, never, true, never>;
 }

package/colorpicker/localization/messages.d.ts

@@ -116,6 +116,14 @@ export declare class ColorPickerMessages extends ComponentMessages {
      * The message for the Cancel action button.
      */
     cancelButton: string;
+    /**
+     * The title for the Close button in adaptive mode.
+     */
+    closeButton: string;
+    /**
+     * The title for the ActionSheet when in adaptive mode.
+     */
+    adaptiveTitle: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerMessages, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ColorPickerMessages, "kendo-colorpicker-messages-base", never, { "colorPaletteNoColor": { "alias": "colorPaletteNoColor"; "required": false; }; "colorGradientNoColor": { "alias": "colorGradientNoColor"; "required": false; }; "flatColorPickerNoColor": { "alias": "flatColorPickerNoColor"; "required": false; }; "colorPickerNoColor": { "alias": "colorPickerNoColor"; "required": false; }; "colorGradientHandle": { "alias": "colorGradientHandle"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "hueSliderHandle": { "alias": "hueSliderHandle"; "required": false; }; "opacitySliderHandle": { "alias": "opacitySliderHandle"; "required": false; }; "hexInputPlaceholder": { "alias": "hexInputPlaceholder"; "required": false; }; "redInputPlaceholder": { "alias": "redInputPlaceholder"; "required": false; }; "greenInputPlaceholder": { "alias": "greenInputPlaceholder"; "required": false; }; "blueInputPlaceholder": { "alias": "blueInputPlaceholder"; "required": false; }; "alphaInputPlaceholder": { "alias": "alphaInputPlaceholder"; "required": false; }; "redChannelLabel": { "alias": "redChannelLabel"; "required": false; }; "greenChannelLabel": { "alias": "greenChannelLabel"; "required": false; }; "blueChannelLabel": { "alias": "blueChannelLabel"; "required": false; }; "alphaChannelLabel": { "alias": "alphaChannelLabel"; "required": false; }; "passContrast": { "alias": "passContrast"; "required": false; }; "failContrast": { "alias": "failContrast"; "required": false; }; "contrastRatio": { "alias": "contrastRatio"; "required": false; }; "previewColor": { "alias": "previewColor"; "required": false; }; "revertSelection": { "alias": "revertSelection"; "required": false; }; "gradientView": { "alias": "gradientView"; "required": false; }; "paletteView": { "alias": "paletteView"; "required": false; }; "formatButton": { "alias": "formatButton"; "required": false; }; "applyButton": { "alias": "applyButton"; "required": false; }; "cancelButton": { "alias": "cancelButton"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ColorPickerMessages, "kendo-colorpicker-messages-base", never, { "colorPaletteNoColor": { "alias": "colorPaletteNoColor"; "required": false; }; "colorGradientNoColor": { "alias": "colorGradientNoColor"; "required": false; }; "flatColorPickerNoColor": { "alias": "flatColorPickerNoColor"; "required": false; }; "colorPickerNoColor": { "alias": "colorPickerNoColor"; "required": false; }; "colorGradientHandle": { "alias": "colorGradientHandle"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "hueSliderHandle": { "alias": "hueSliderHandle"; "required": false; }; "opacitySliderHandle": { "alias": "opacitySliderHandle"; "required": false; }; "hexInputPlaceholder": { "alias": "hexInputPlaceholder"; "required": false; }; "redInputPlaceholder": { "alias": "redInputPlaceholder"; "required": false; }; "greenInputPlaceholder": { "alias": "greenInputPlaceholder"; "required": false; }; "blueInputPlaceholder": { "alias": "blueInputPlaceholder"; "required": false; }; "alphaInputPlaceholder": { "alias": "alphaInputPlaceholder"; "required": false; }; "redChannelLabel": { "alias": "redChannelLabel"; "required": false; }; "greenChannelLabel": { "alias": "greenChannelLabel"; "required": false; }; "blueChannelLabel": { "alias": "blueChannelLabel"; "required": false; }; "alphaChannelLabel": { "alias": "alphaChannelLabel"; "required": false; }; "passContrast": { "alias": "passContrast"; "required": false; }; "failContrast": { "alias": "failContrast"; "required": false; }; "contrastRatio": { "alias": "contrastRatio"; "required": false; }; "previewColor": { "alias": "previewColor"; "required": false; }; "revertSelection": { "alias": "revertSelection"; "required": false; }; "gradientView": { "alias": "gradientView"; "required": false; }; "paletteView": { "alias": "paletteView"; "required": false; }; "formatButton": { "alias": "formatButton"; "required": false; }; "applyButton": { "alias": "applyButton"; "required": false; }; "cancelButton": { "alias": "cancelButton"; "required": false; }; "closeButton": { "alias": "closeButton"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; }, {}, never, never, false, never>;
 }

package/colorpicker/models/adaptive-mode.d.ts

@@ -0,0 +1,23 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Renderer2 } from "@angular/core";
+import { ActionSheetComponent } from "@progress/kendo-angular-navigation";
+import { AdaptiveSize } from "@progress/kendo-angular-utils";
+/**
+ * Specifies the adaptive rendering of the component.
+ *
+ * The supported values are:
+ * * `none`—(default)
+ * * `auto`
+ */
+export type AdaptiveMode = 'none' | 'auto';
+/**
+ * @hidden
+ */
+export declare const animationDuration = 300;
+/**
+ * @hidden
+ */
+export declare const updateActionSheetAdaptiveAppearance: (actionSheet: ActionSheetComponent, windowSize: AdaptiveSize, renderer: Renderer2) => void;

package/esm2022/colorpicker/adaptiveness/adaptive-close-button.component.mjs

@@ -0,0 +1,62 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 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 } from '@angular/core';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class AdaptiveCloseButtonComponent {
+    title;
+    icon;
+    svgIcon;
+    color;
+    close = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveCloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdaptiveCloseButtonComponent, isStandalone: true, selector: "kendo-adaptive-close-button", inputs: { title: "title", icon: "icon", svgIcon: "svgIcon", color: "color" }, outputs: { close: "close" }, ngImport: i0, template: `
+        <button kendoButton
+            type="button"
+            [title]="title"
+            [icon]="icon"
+            [svgIcon]="svgIcon"
+            [themeColor]="color"
+            fillMode="flat"
+            size="large"
+            [tabIndex]="-1"
+            (click)="close.emit($event)"
+        ></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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveCloseButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-adaptive-close-button',
+                    template: `
+        <button kendoButton
+            type="button"
+            [title]="title"
+            [icon]="icon"
+            [svgIcon]="svgIcon"
+            [themeColor]="color"
+            fillMode="flat"
+            size="large"
+            [tabIndex]="-1"
+            (click)="close.emit($event)"
+        ></button>
+    `,
+                    standalone: true,
+                    imports: [ButtonComponent]
+                }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], svgIcon: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }] } });