@progress/kendo-angular-inputs 19.0.0-develop.7 → 19.0.0-develop.9

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

@@ -8,12 +8,14 @@ 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 { AdaptiveService, AdaptiveSize } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
 export declare class AdaptiveRendererComponent {
     localization: LocalizationService;
+    adaptiveService: AdaptiveService;
     title: string;
     subtitle: string;
     actionSheetTemplate: TemplateRef<any>;
@@ -28,11 +30,11 @@ export declare class AdaptiveRendererComponent {
     actionSheetSearchBar: TextBoxComponent;
     cancelButton: ButtonComponent;
     applyButton: ButtonComponent;
-    constructor(localization: LocalizationService);
+    constructor(localization: LocalizationService, adaptiveService: AdaptiveService);
     animationDuration: number;
-    xIcon: SVGIcon;
     checkIcon: SVGIcon;
     messageFor(key: string): string;
+    get windowSize(): AdaptiveSize;
     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/colorpicker.component.d.ts

@@ -130,6 +130,15 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
      */
     set svgIcon(icon: SVGIcon);
     get svgIcon(): SVGIcon;
+    /**
+     * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+     */
+    adaptiveTitle: string;
+    /**
+     * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+     * By default the ActionSheet does not render a subtitle.
+    */
+    adaptiveSubtitle: any;
     /**
      * Specifies whether the ColorPicker should display a 'Clear color' button.
      *
@@ -394,11 +403,15 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
     /**
      * @hidden
      */
-    onApply(): void;
+    applyValue(): void;
+    /**
+     * @hidden
+     */
+    cancelValue(e: any): void;
     /**
      * @hidden
      */
-    onCancel(e: any): void;
+    onActionSheetClose(e: any): void;
     /**
      * @hidden
      */
@@ -426,5 +439,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; }; "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>;
+    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; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; "adaptiveSubtitle": { "alias": "adaptiveSubtitle"; "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/localization/messages.d.ts

@@ -117,13 +117,13 @@ export declare class ColorPickerMessages extends ComponentMessages {
      */
     cancelButton: string;
     /**
-     * The title for the Close button in adaptive mode.
+     * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
      */
-    closeButton: string;
+    adaptiveCloseButtonTitle: 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; }; "closeButton": { "alias": "closeButton"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "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; }; "adaptiveCloseButtonTitle": { "alias": "adaptiveCloseButtonTitle"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -2,9 +2,6 @@
 * 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.
  *
@@ -17,7 +14,3 @@ 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-renderer.component.mjs

@@ -4,20 +4,23 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input, Output, EventEmitter, TemplateRef, ViewChild } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { checkIcon, xIcon } from '@progress/kendo-svg-icons';
+import { checkIcon } from '@progress/kendo-svg-icons';
 import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
 import { NgIf, NgTemplateOutlet } from '@angular/common';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { TextBoxComponent } from '../../textbox/textbox.component';
 import { animationDuration } from '../models/adaptive-mode';
 import { AdaptiveCloseButtonComponent } from './adaptive-close-button.component';
+import { AdaptiveService } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@progress/kendo-angular-utils";
 /**
  * @hidden
  */
 export class AdaptiveRendererComponent {
     localization;
+    adaptiveService;
     title;
     subtitle;
     actionSheetTemplate;
@@ -32,52 +35,55 @@ export class AdaptiveRendererComponent {
     actionSheetSearchBar;
     cancelButton;
     applyButton;
-    constructor(localization) {
+    constructor(localization, adaptiveService) {
         this.localization = localization;
+        this.adaptiveService = adaptiveService;
     }
     animationDuration = animationDuration;
-    xIcon = xIcon;
     checkIcon = checkIcon;
     messageFor(key) {
         return this.localization.get(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    get windowSize() {
+        return this.adaptiveService.size;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", actionSheetTemplate: "actionSheetTemplate", isActionSheetExpanded: "isActionSheetExpanded", preview: "preview" }, outputs: { actionSheetClose: "actionSheetClose", onExpand: "onExpand", onCollapse: "onCollapse", onApply: "onApply", onCancel: "onCancel" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }, { propertyName: "cancelButton", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["apply"], descendants: true }], ngImport: i0, template: `
         <kendo-actionsheet
             #actionSheet
             [animation]="{ duration: animationDuration }"
             [expanded]="isActionSheetExpanded"
+            [cssClass]="{
+                'k-adaptive-actionsheet': true,
+                'k-actionsheet-fullscreen': windowSize === 'small',
+                'k-actionsheet-bottom': windowSize === 'medium'
+            }"
+            [cssStyle]="{
+                height: windowSize === 'small' ? '100vh' : '60vh'
+            }"
             (overlayClick)="actionSheetClose.emit()"
             (expand)="onExpand.emit()"
             (collapse)="onCollapse.emit()"
         >
             <ng-template kendoActionSheetTemplate>
-                <div class="k-text-center k-actionsheet-titlebar">
-                    <div class="k-actionsheet-titlebar-group k-hbox">
+                <div class="k-actionsheet-titlebar">
+                    <div class="k-actionsheet-titlebar-group">
                         <div class="k-actionsheet-title">
-                            <div class="k-text-center">{{ messageFor('adaptiveTitle') }}</div>
-                            <div class="k-actionsheet-subtitle k-text-center"></div>
+                            <div class="k-text-center">{{ title || messageFor('adaptiveTitle') }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center" *ngIf="subtitle">{{ subtitle }}</div>
                         </div>
-                        <div *ngIf="!preview" class="k-actionsheet-actions">
+                        <div class="k-actionsheet-actions">
                             <kendo-adaptive-close-button
                                 icon="check"
                                 color="primary"
-                                [title]="messageFor('closeButton')"
+                                [title]="messageFor('adaptiveCloseButtonTitle')"
                                 [svgIcon]="checkIcon"
-                                (close)="onApply.emit($event)">
-                            </kendo-adaptive-close-button>
-                        </div>
-                        <div *ngIf="preview" class="k-actionsheet-actions">
-                            <kendo-adaptive-close-button
-                                icon="x"
-                                [title]="messageFor('closeButton')"
-                                [svgIcon]="xIcon"
                                 (close)="actionSheetClose.emit($event)">
                             </kendo-adaptive-close-button>
                         </div>
                     </div>
                 </div>
-                <div class="k-actionsheet-content !k-overflow-hidden">
+                <div class="k-actionsheet-content">
                     <ng-container *ngTemplateOutlet="actionSheetTemplate"></ng-container>
                 </div>
                 <div *ngIf="preview" class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
@@ -101,7 +107,7 @@ export class AdaptiveRendererComponent {
                 </div>
             </ng-template>
         </kendo-actionsheet>
-    `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { 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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveCloseButtonComponent, selector: "kendo-adaptive-close-button", inputs: ["title", "icon", "svgIcon", "color"], outputs: ["close"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { 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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveCloseButtonComponent, selector: "kendo-adaptive-close-button", inputs: ["title", "icon", "svgIcon", "color"], outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
             type: Component,
@@ -112,37 +118,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             #actionSheet
             [animation]="{ duration: animationDuration }"
             [expanded]="isActionSheetExpanded"
+            [cssClass]="{
+                'k-adaptive-actionsheet': true,
+                'k-actionsheet-fullscreen': windowSize === 'small',
+                'k-actionsheet-bottom': windowSize === 'medium'
+            }"
+            [cssStyle]="{
+                height: windowSize === 'small' ? '100vh' : '60vh'
+            }"
             (overlayClick)="actionSheetClose.emit()"
             (expand)="onExpand.emit()"
             (collapse)="onCollapse.emit()"
         >
             <ng-template kendoActionSheetTemplate>
-                <div class="k-text-center k-actionsheet-titlebar">
-                    <div class="k-actionsheet-titlebar-group k-hbox">
+                <div class="k-actionsheet-titlebar">
+                    <div class="k-actionsheet-titlebar-group">
                         <div class="k-actionsheet-title">
-                            <div class="k-text-center">{{ messageFor('adaptiveTitle') }}</div>
-                            <div class="k-actionsheet-subtitle k-text-center"></div>
+                            <div class="k-text-center">{{ title || messageFor('adaptiveTitle') }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center" *ngIf="subtitle">{{ subtitle }}</div>
                         </div>
-                        <div *ngIf="!preview" class="k-actionsheet-actions">
+                        <div class="k-actionsheet-actions">
                             <kendo-adaptive-close-button
                                 icon="check"
                                 color="primary"
-                                [title]="messageFor('closeButton')"
+                                [title]="messageFor('adaptiveCloseButtonTitle')"
                                 [svgIcon]="checkIcon"
-                                (close)="onApply.emit($event)">
-                            </kendo-adaptive-close-button>
-                        </div>
-                        <div *ngIf="preview" class="k-actionsheet-actions">
-                            <kendo-adaptive-close-button
-                                icon="x"
-                                [title]="messageFor('closeButton')"
-                                [svgIcon]="xIcon"
                                 (close)="actionSheetClose.emit($event)">
                             </kendo-adaptive-close-button>
                         </div>
                     </div>
                 </div>
-                <div class="k-actionsheet-content !k-overflow-hidden">
+                <div class="k-actionsheet-content">
                     <ng-container *ngTemplateOutlet="actionSheetTemplate"></ng-container>
                 </div>
                 <div *ngIf="preview" class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
@@ -170,7 +176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, NgIf, NgTemplateOutlet, AdaptiveCloseButtonComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { title: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.AdaptiveService }]; }, propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
                 type: Input

package/esm2022/colorpicker/colorpicker.component.mjs

@@ -26,7 +26,6 @@ import { parseCSSClassNames } from '@progress/kendo-angular-common';
 import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 import { NgClass, NgIf } from '@angular/common';
 import { LocalizedColorPickerMessagesDirective } from './localization/localized-colorpicker-messages.directive';
-import { updateActionSheetAdaptiveAppearance } from './models/adaptive-mode';
 import { AdaptiveRendererComponent } from './adaptiveness/adaptive-renderer.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-popup";
@@ -192,6 +191,15 @@ export class ColorPickerComponent {
     get svgIcon() {
         return this._svgIcon;
     }
+    /**
+     * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+     */
+    adaptiveTitle = '';
+    /**
+     * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+     * By default the ActionSheet does not render a subtitle.
+    */
+    adaptiveSubtitle;
     /**
      * Specifies whether the ColorPicker should display a 'Clear color' button.
      *
@@ -683,17 +691,28 @@ export class ColorPickerComponent {
     /**
      * @hidden
      */
-    onApply() {
+    applyValue() {
         this.handleValueChange(this.flatColorPicker.selection);
         this.toggleWithEvents(false);
     }
     /**
      * @hidden
      */
-    onCancel(e) {
+    cancelValue(e) {
         this.flatColorPicker.resetSelection(e);
         this.toggleWithEvents(false);
     }
+    /**
+     * @hidden
+     */
+    onActionSheetClose(e) {
+        if (this.preview) {
+            this.cancelValue(e);
+        }
+        else {
+            this.applyValue();
+        }
+    }
     /**
      * @hidden
      */
@@ -769,9 +788,7 @@ export class ColorPickerComponent {
         });
     }
     openActionSheet() {
-        this.windowSize = this.adaptiveService.size;
         this.actionSheet.toggle(true);
-        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
     }
     closeActionSheet() {
         this.actionSheet.toggle(false);
@@ -881,7 +898,7 @@ export class ColorPickerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1.PopupService }, { token: i0.ChangeDetectorRef }, { token: i2.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i3.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerComponent, isStandalone: true, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", adaptiveMode: "adaptiveMode", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", clearButtonClick: "clearButtonClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerComponent, isStandalone: true, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", adaptiveMode: "adaptiveMode", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", clearButtonClick: "clearButtonClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [{
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ColorPickerComponent)
@@ -932,8 +949,8 @@ export class ColorPickerComponent {
             applyButton="Apply"
             i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
             cancelButton="Cancel"
-            i18n-closeButton="kendo.colorpicker.closeButton|The title for the Close button."
-            closeButton="Close"
+            i18n-adaptiveCloseButtonTitle="kendo.colorpicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode."
+            adaptiveCloseButtonTitle="Close"
             i18n-adaptiveTitle="kendo.colorpicker.adaptiveTitle|The title for the ActionSheet when in adaptive mode."
             adaptiveTitle="Choose Color"
             i18n-redChannelLabel="kendo.colorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
@@ -1010,10 +1027,12 @@ export class ColorPickerComponent {
         <kendo-adaptive-renderer
             [actionSheetTemplate]="popupTemplate"
             [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="adaptiveTitle"
+            [subtitle]="adaptiveSubtitle"
             [preview]="preview"
-            (actionSheetClose)="onCancel($event)"
-            (onApply)="onApply()"
-            (onCancel)="onCancel($event)"
+            (actionSheetClose)="onActionSheetClose($event)"
+            (onApply)="applyValue()"
+            (onCancel)="cancelValue($event)"
         >
         </kendo-adaptive-renderer>
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
@@ -1075,8 +1094,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             applyButton="Apply"
             i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
             cancelButton="Cancel"
-            i18n-closeButton="kendo.colorpicker.closeButton|The title for the Close button."
-            closeButton="Close"
+            i18n-adaptiveCloseButtonTitle="kendo.colorpicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode."
+            adaptiveCloseButtonTitle="Close"
             i18n-adaptiveTitle="kendo.colorpicker.adaptiveTitle|The title for the ActionSheet when in adaptive mode."
             adaptiveTitle="Choose Color"
             i18n-redChannelLabel="kendo.colorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
@@ -1153,10 +1172,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <kendo-adaptive-renderer
             [actionSheetTemplate]="popupTemplate"
             [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="adaptiveTitle"
+            [subtitle]="adaptiveSubtitle"
             [preview]="preview"
-            (actionSheetClose)="onCancel($event)"
-            (onApply)="onApply()"
-            (onCancel)="onCancel($event)"
+            (actionSheetClose)="onActionSheetClose($event)"
+            (onApply)="applyValue()"
+            (onCancel)="cancelValue($event)"
         >
         </kendo-adaptive-renderer>
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
@@ -1234,6 +1255,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], svgIcon: [{
                 type: Input
+            }], adaptiveTitle: [{
+                type: Input
+            }], adaptiveSubtitle: [{
+                type: Input
             }], clearButton: [{
                 type: Input
             }], tabindex: [{

package/esm2022/colorpicker/localization/messages.mjs

@@ -118,15 +118,15 @@ export class ColorPickerMessages extends ComponentMessages {
      */
     cancelButton;
     /**
-     * The title for the Close button in adaptive mode.
+     * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
      */
-    closeButton;
+    adaptiveCloseButtonTitle;
     /**
      * 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", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveTitle: "adaptiveTitle" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, decorators: [{
             type: Directive,
@@ -188,7 +188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], cancelButton: [{
                 type: Input
-            }], closeButton: [{
+            }], adaptiveCloseButtonTitle: [{
                 type: Input
             }], adaptiveTitle: [{
                 type: Input

package/esm2022/colorpicker/models/adaptive-mode.mjs

@@ -6,22 +6,3 @@
  * @hidden
  */
 export const animationDuration = 300;
-/**
- * @hidden
- */
-export const updateActionSheetAdaptiveAppearance = (actionSheet, windowSize, renderer) => {
-    const element = actionSheet['element'].nativeElement.querySelector('.k-actionsheet');
-    const animationContainer = actionSheet['element'].nativeElement.querySelector('.k-child-animation-container');
-    renderer.addClass(element, 'k-adaptive-actionsheet');
-    renderer.setStyle(animationContainer, 'width', '100%');
-    if (windowSize === 'medium') {
-        renderer.removeClass(element, 'k-actionsheet-fullscreen');
-        renderer.addClass(element, 'k-actionsheet-bottom');
-        renderer.setStyle(animationContainer, 'bottom', '0px');
-    }
-    else if (windowSize === 'small') {
-        renderer.removeClass(element, 'k-actionsheet-bottom');
-        renderer.addClass(element, 'k-actionsheet-fullscreen');
-        renderer.setStyle(animationContainer, 'height', '100%');
-    }
-};

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1746022401,
-    version: '19.0.0-develop.7',
+    publishDate: 1746776413,
+    version: '19.0.0-develop.9',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/fesm2022/progress-kendo-angular-inputs.mjs

@@ -22,7 +22,7 @@ import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icon
 import { parseColor as parseColor$1, Color, namedColors } from '@progress/kendo-drawing';
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
-import * as i3 from '@progress/kendo-angular-utils';
+import * as i2 from '@progress/kendo-angular-utils';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
 import { SignaturePad } from '@progress/kendo-inputs-common';
@@ -554,8 +554,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1746022401,
-    version: '19.0.0-develop.7',
+    publishDate: 1746776413,
+    version: '19.0.0-develop.9',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -9420,15 +9420,15 @@ class ColorPickerMessages extends ComponentMessages {
      */
     cancelButton;
     /**
-     * The title for the Close button in adaptive mode.
+     * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
      */
-    closeButton;
+    adaptiveCloseButtonTitle;
     /**
      * 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", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveTitle: "adaptiveTitle" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, decorators: [{
             type: Directive,
@@ -9490,7 +9490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], cancelButton: [{
                 type: Input
-            }], closeButton: [{
+            }], adaptiveCloseButtonTitle: [{
                 type: Input
             }], adaptiveTitle: [{
                 type: Input
@@ -12673,25 +12673,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * @hidden
  */
 const animationDuration = 300;
-/**
- * @hidden
- */
-const updateActionSheetAdaptiveAppearance = (actionSheet, windowSize, renderer) => {
-    const element = actionSheet['element'].nativeElement.querySelector('.k-actionsheet');
-    const animationContainer = actionSheet['element'].nativeElement.querySelector('.k-child-animation-container');
-    renderer.addClass(element, 'k-adaptive-actionsheet');
-    renderer.setStyle(animationContainer, 'width', '100%');
-    if (windowSize === 'medium') {
-        renderer.removeClass(element, 'k-actionsheet-fullscreen');
-        renderer.addClass(element, 'k-actionsheet-bottom');
-        renderer.setStyle(animationContainer, 'bottom', '0px');
-    }
-    else if (windowSize === 'small') {
-        renderer.removeClass(element, 'k-actionsheet-bottom');
-        renderer.addClass(element, 'k-actionsheet-fullscreen');
-        renderer.setStyle(animationContainer, 'height', '100%');
-    }
-};
 
 /**
  * @hidden
@@ -12754,6 +12735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class AdaptiveRendererComponent {
     localization;
+    adaptiveService;
     title;
     subtitle;
     actionSheetTemplate;
@@ -12768,52 +12750,55 @@ class AdaptiveRendererComponent {
     actionSheetSearchBar;
     cancelButton;
     applyButton;
-    constructor(localization) {
+    constructor(localization, adaptiveService) {
         this.localization = localization;
+        this.adaptiveService = adaptiveService;
     }
     animationDuration = animationDuration;
-    xIcon = xIcon;
     checkIcon = checkIcon;
     messageFor(key) {
         return this.localization.get(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    get windowSize() {
+        return this.adaptiveService.size;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", actionSheetTemplate: "actionSheetTemplate", isActionSheetExpanded: "isActionSheetExpanded", preview: "preview" }, outputs: { actionSheetClose: "actionSheetClose", onExpand: "onExpand", onCollapse: "onCollapse", onApply: "onApply", onCancel: "onCancel" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }, { propertyName: "cancelButton", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["apply"], descendants: true }], ngImport: i0, template: `
         <kendo-actionsheet
             #actionSheet
             [animation]="{ duration: animationDuration }"
             [expanded]="isActionSheetExpanded"
+            [cssClass]="{
+                'k-adaptive-actionsheet': true,
+                'k-actionsheet-fullscreen': windowSize === 'small',
+                'k-actionsheet-bottom': windowSize === 'medium'
+            }"
+            [cssStyle]="{
+                height: windowSize === 'small' ? '100vh' : '60vh'
+            }"
             (overlayClick)="actionSheetClose.emit()"
             (expand)="onExpand.emit()"
             (collapse)="onCollapse.emit()"
         >
             <ng-template kendoActionSheetTemplate>
-                <div class="k-text-center k-actionsheet-titlebar">
-                    <div class="k-actionsheet-titlebar-group k-hbox">
+                <div class="k-actionsheet-titlebar">
+                    <div class="k-actionsheet-titlebar-group">
                         <div class="k-actionsheet-title">
-                            <div class="k-text-center">{{ messageFor('adaptiveTitle') }}</div>
-                            <div class="k-actionsheet-subtitle k-text-center"></div>
+                            <div class="k-text-center">{{ title || messageFor('adaptiveTitle') }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center" *ngIf="subtitle">{{ subtitle }}</div>
                         </div>
-                        <div *ngIf="!preview" class="k-actionsheet-actions">
+                        <div class="k-actionsheet-actions">
                             <kendo-adaptive-close-button
                                 icon="check"
                                 color="primary"
-                                [title]="messageFor('closeButton')"
+                                [title]="messageFor('adaptiveCloseButtonTitle')"
                                 [svgIcon]="checkIcon"
-                                (close)="onApply.emit($event)">
-                            </kendo-adaptive-close-button>
-                        </div>
-                        <div *ngIf="preview" class="k-actionsheet-actions">
-                            <kendo-adaptive-close-button
-                                icon="x"
-                                [title]="messageFor('closeButton')"
-                                [svgIcon]="xIcon"
                                 (close)="actionSheetClose.emit($event)">
                             </kendo-adaptive-close-button>
                         </div>
                     </div>
                 </div>
-                <div class="k-actionsheet-content !k-overflow-hidden">
+                <div class="k-actionsheet-content">
                     <ng-container *ngTemplateOutlet="actionSheetTemplate"></ng-container>
                 </div>
                 <div *ngIf="preview" class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
@@ -12837,7 +12822,7 @@ class AdaptiveRendererComponent {
                 </div>
             </ng-template>
         </kendo-actionsheet>
-    `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { 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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveCloseButtonComponent, selector: "kendo-adaptive-close-button", inputs: ["title", "icon", "svgIcon", "color"], outputs: ["close"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { 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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveCloseButtonComponent, selector: "kendo-adaptive-close-button", inputs: ["title", "icon", "svgIcon", "color"], outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
             type: Component,
@@ -12848,37 +12833,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             #actionSheet
             [animation]="{ duration: animationDuration }"
             [expanded]="isActionSheetExpanded"
+            [cssClass]="{
+                'k-adaptive-actionsheet': true,
+                'k-actionsheet-fullscreen': windowSize === 'small',
+                'k-actionsheet-bottom': windowSize === 'medium'
+            }"
+            [cssStyle]="{
+                height: windowSize === 'small' ? '100vh' : '60vh'
+            }"
             (overlayClick)="actionSheetClose.emit()"
             (expand)="onExpand.emit()"
             (collapse)="onCollapse.emit()"
         >
             <ng-template kendoActionSheetTemplate>
-                <div class="k-text-center k-actionsheet-titlebar">
-                    <div class="k-actionsheet-titlebar-group k-hbox">
+                <div class="k-actionsheet-titlebar">
+                    <div class="k-actionsheet-titlebar-group">
                         <div class="k-actionsheet-title">
-                            <div class="k-text-center">{{ messageFor('adaptiveTitle') }}</div>
-                            <div class="k-actionsheet-subtitle k-text-center"></div>
+                            <div class="k-text-center">{{ title || messageFor('adaptiveTitle') }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center" *ngIf="subtitle">{{ subtitle }}</div>
                         </div>
-                        <div *ngIf="!preview" class="k-actionsheet-actions">
+                        <div class="k-actionsheet-actions">
                             <kendo-adaptive-close-button
                                 icon="check"
                                 color="primary"
-                                [title]="messageFor('closeButton')"
+                                [title]="messageFor('adaptiveCloseButtonTitle')"
                                 [svgIcon]="checkIcon"
-                                (close)="onApply.emit($event)">
-                            </kendo-adaptive-close-button>
-                        </div>
-                        <div *ngIf="preview" class="k-actionsheet-actions">
-                            <kendo-adaptive-close-button
-                                icon="x"
-                                [title]="messageFor('closeButton')"
-                                [svgIcon]="xIcon"
                                 (close)="actionSheetClose.emit($event)">
                             </kendo-adaptive-close-button>
                         </div>
                     </div>
                 </div>
-                <div class="k-actionsheet-content !k-overflow-hidden">
+                <div class="k-actionsheet-content">
                     <ng-container *ngTemplateOutlet="actionSheetTemplate"></ng-container>
                 </div>
                 <div *ngIf="preview" class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
@@ -12906,7 +12891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, NgIf, NgTemplateOutlet, AdaptiveCloseButtonComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { title: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.AdaptiveService }]; }, propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
                 type: Input
@@ -13101,6 +13086,15 @@ class ColorPickerComponent {
     get svgIcon() {
         return this._svgIcon;
     }
+    /**
+     * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+     */
+    adaptiveTitle = '';
+    /**
+     * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+     * By default the ActionSheet does not render a subtitle.
+    */
+    adaptiveSubtitle;
     /**
      * Specifies whether the ColorPicker should display a 'Clear color' button.
      *
@@ -13592,17 +13586,28 @@ class ColorPickerComponent {
     /**
      * @hidden
      */
-    onApply() {
+    applyValue() {
         this.handleValueChange(this.flatColorPicker.selection);
         this.toggleWithEvents(false);
     }
     /**
      * @hidden
      */
-    onCancel(e) {
+    cancelValue(e) {
         this.flatColorPicker.resetSelection(e);
         this.toggleWithEvents(false);
     }
+    /**
+     * @hidden
+     */
+    onActionSheetClose(e) {
+        if (this.preview) {
+            this.cancelValue(e);
+        }
+        else {
+            this.applyValue();
+        }
+    }
     /**
      * @hidden
      */
@@ -13678,9 +13683,7 @@ class ColorPickerComponent {
         });
     }
     openActionSheet() {
-        this.windowSize = this.adaptiveService.size;
         this.actionSheet.toggle(true);
-        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
     }
     closeActionSheet() {
         this.actionSheet.toggle(false);
@@ -13789,8 +13792,8 @@ class ColorPickerComponent {
             this.focusableId = id;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.PopupService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i3.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerComponent, isStandalone: true, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", adaptiveMode: "adaptiveMode", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", clearButtonClick: "clearButtonClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.PopupService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerComponent, isStandalone: true, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", adaptiveMode: "adaptiveMode", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", clearButtonClick: "clearButtonClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [{
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ColorPickerComponent)
@@ -13841,8 +13844,8 @@ class ColorPickerComponent {
             applyButton="Apply"
             i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
             cancelButton="Cancel"
-            i18n-closeButton="kendo.colorpicker.closeButton|The title for the Close button."
-            closeButton="Close"
+            i18n-adaptiveCloseButtonTitle="kendo.colorpicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode."
+            adaptiveCloseButtonTitle="Close"
             i18n-adaptiveTitle="kendo.colorpicker.adaptiveTitle|The title for the ActionSheet when in adaptive mode."
             adaptiveTitle="Choose Color"
             i18n-redChannelLabel="kendo.colorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
@@ -13919,10 +13922,12 @@ class ColorPickerComponent {
         <kendo-adaptive-renderer
             [actionSheetTemplate]="popupTemplate"
             [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="adaptiveTitle"
+            [subtitle]="adaptiveSubtitle"
             [preview]="preview"
-            (actionSheetClose)="onCancel($event)"
-            (onApply)="onApply()"
-            (onCancel)="onCancel($event)"
+            (actionSheetClose)="onActionSheetClose($event)"
+            (onApply)="applyValue()"
+            (onCancel)="cancelValue($event)"
         >
         </kendo-adaptive-renderer>
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
@@ -13984,8 +13989,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             applyButton="Apply"
             i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
             cancelButton="Cancel"
-            i18n-closeButton="kendo.colorpicker.closeButton|The title for the Close button."
-            closeButton="Close"
+            i18n-adaptiveCloseButtonTitle="kendo.colorpicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode."
+            adaptiveCloseButtonTitle="Close"
             i18n-adaptiveTitle="kendo.colorpicker.adaptiveTitle|The title for the ActionSheet when in adaptive mode."
             adaptiveTitle="Choose Color"
             i18n-redChannelLabel="kendo.colorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
@@ -14062,10 +14067,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <kendo-adaptive-renderer
             [actionSheetTemplate]="popupTemplate"
             [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="adaptiveTitle"
+            [subtitle]="adaptiveSubtitle"
             [preview]="preview"
-            (actionSheetClose)="onCancel($event)"
-            (onApply)="onApply()"
-            (onCancel)="onCancel($event)"
+            (actionSheetClose)="onActionSheetClose($event)"
+            (onApply)="applyValue()"
+            (onCancel)="cancelValue($event)"
         >
         </kendo-adaptive-renderer>
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
@@ -14073,7 +14080,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [LocalizedColorPickerMessagesDirective, NgClass, NgIf, IconWrapperComponent, ButtonComponent, FlatColorPickerComponent, ResizeSensorComponent, AdaptiveRendererComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.PopupService }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i3.AdaptiveService }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.PopupService }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i2.AdaptiveService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-colorpicker']
             }, {
@@ -14143,6 +14150,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], svgIcon: [{
                 type: Input
+            }], adaptiveTitle: [{
+                type: Input
+            }], adaptiveSubtitle: [{
+                type: Input
             }], clearButton: [{
                 type: Input
             }], tabindex: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-inputs",
-  "version": "19.0.0-develop.7",
+  "version": "19.0.0-develop.9",
   "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",
@@ -28,7 +28,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1746022401,
+      "publishDate": 1746776413,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -40,20 +40,20 @@
     "@angular/platform-browser": "16 - 19",
     "@progress/kendo-drawing": "^1.21.0",
     "@progress/kendo-licensing": "^1.5.0",
-    "@progress/kendo-angular-buttons": "19.0.0-develop.7",
-    "@progress/kendo-angular-common": "19.0.0-develop.7",
-    "@progress/kendo-angular-utils": "19.0.0-develop.7",
-    "@progress/kendo-angular-navigation": "19.0.0-develop.7",
-    "@progress/kendo-angular-dialog": "19.0.0-develop.7",
-    "@progress/kendo-angular-intl": "19.0.0-develop.7",
-    "@progress/kendo-angular-l10n": "19.0.0-develop.7",
-    "@progress/kendo-angular-popup": "19.0.0-develop.7",
-    "@progress/kendo-angular-icons": "19.0.0-develop.7",
+    "@progress/kendo-angular-buttons": "19.0.0-develop.9",
+    "@progress/kendo-angular-common": "19.0.0-develop.9",
+    "@progress/kendo-angular-utils": "19.0.0-develop.9",
+    "@progress/kendo-angular-navigation": "19.0.0-develop.9",
+    "@progress/kendo-angular-dialog": "19.0.0-develop.9",
+    "@progress/kendo-angular-intl": "19.0.0-develop.9",
+    "@progress/kendo-angular-l10n": "19.0.0-develop.9",
+    "@progress/kendo-angular-popup": "19.0.0-develop.9",
+    "@progress/kendo-angular-icons": "19.0.0-develop.9",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "19.0.0-develop.7",
+    "@progress/kendo-angular-schematics": "19.0.0-develop.9",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-draggable": "^3.0.0",
     "@progress/kendo-inputs-common": "^3.1.0"