@progress/kendo-angular-inputs 18.1.0-develop.9 → 18.1.0

package/esm2022/colorpicker/colorpicker.component.mjs

@@ -9,8 +9,10 @@ import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { FlatColorPickerComponent } from './flatcolorpicker.component';
 import { PopupService } from '@progress/kendo-angular-popup';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
+import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { validatePackage } from '@progress/kendo-licensing';
-import { Keys, KendoInput, isChanged, closest, guid } from '@progress/kendo-angular-common';
+import { Keys, KendoInput, isChanged, closest, guid, ResizeSensorComponent, isDocumentAvailable } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { packageMetadata } from '../package-metadata';
 import { PALETTEPRESETS } from './models';
@@ -24,10 +26,12 @@ 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 { ButtonComponent } from '@progress/kendo-angular-buttons';
+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";
 import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "@progress/kendo-angular-utils";
 const DOM_FOCUS_EVENTS = ['focus', 'blur'];
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_ROUNDED = 'medium';
@@ -50,6 +54,7 @@ export class ColorPickerComponent {
     ngZone;
     renderer;
     injector;
+    adaptiveService;
     hostClasses = true;
     get focusedClass() {
         return this.isFocused;
@@ -90,6 +95,10 @@ export class ColorPickerComponent {
     get view() {
         return (this.views && this.views.length > 0) ? this.views[0] : null;
     }
+    /**
+     * Enables or disables the adaptive mode. By default, adaptive rendering is disabled.
+     */
+    adaptiveMode = 'none';
     /**
      * Sets the initially active view in the popup. The property supports two-way binding.
      *
@@ -284,13 +293,13 @@ export class ColorPickerComponent {
      */
     valueChange = new EventEmitter();
     /**
-     * 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 = new EventEmitter();
     /**
-     * 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 = new EventEmitter();
     /**
@@ -329,10 +338,14 @@ export class ColorPickerComponent {
      */
     isFocused = false;
     /**
-     * Indicates whether the ColorPicker popup is open.
+    * @hidden
+    */
+    windowSize = 'large';
+    /**
+     * Returns the current open state. Returns `true` if the Popup (or ActionSheet in adaptive mode) is currently open.
      */
     get isOpen() {
-        return isPresent(this.popupRef);
+        return isPresent(this.popupRef) || this.isActionSheetExpanded;
     }
     /**
      * @hidden
@@ -347,6 +360,30 @@ export class ColorPickerComponent {
         }
         return '';
     }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
+    }
+    /**
+     * @hidden
+     */
+    get actionSheet() {
+        return this.adaptiveRenderer?.actionSheet;
+    }
+    /**
+     * @hidden
+     */
+    get isActionSheetExpanded() {
+        return Boolean(this.actionSheet?.expanded);
+    }
     /**
      * @hidden
      */
@@ -365,6 +402,10 @@ export class ColorPickerComponent {
     activeColor;
     popupTemplate;
     flatColorPicker;
+    /**
+     * @hidden
+     */
+    adaptiveRenderer;
     /**
      * @hidden
      */
@@ -384,7 +425,7 @@ export class ColorPickerComponent {
     popupSubs = new Subscription();
     colorPickerId;
     control;
-    constructor(host, popupService, cdr, localizationService, ngZone, renderer, injector) {
+    constructor(host, popupService, cdr, localizationService, ngZone, renderer, injector, adaptiveService) {
         this.host = host;
         this.popupService = popupService;
         this.cdr = cdr;
@@ -392,6 +433,7 @@ export class ColorPickerComponent {
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.injector = injector;
+        this.adaptiveService = adaptiveService;
         validatePackage(packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
@@ -406,7 +448,7 @@ export class ColorPickerComponent {
             undefined;
         this._paletteSettings = {
             palette: settingsPalette || defaultPreset,
-            tileSize: this._paletteSettings.tileSize || 24,
+            tileSize: this._paletteSettings.tileSize,
             columns: this._paletteSettings.columns || presetColumns || 10
         };
         this.handleHostId();
@@ -420,6 +462,12 @@ export class ColorPickerComponent {
         });
         this.setHostElementAriaLabel();
         this.initDomEvents();
+        this.windowSize = this.adaptiveService.size;
+        if (this.actionSheet && isDocumentAvailable()) {
+            // The following syntax is used as it does not violate CSP compliance
+            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
+            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
+        }
     }
     ngOnChanges(changes) {
         if (changes.format && changes.format.currentValue === 'name') {
@@ -441,6 +489,18 @@ export class ColorPickerComponent {
         this.subscriptions.unsubscribe();
         this.handleDomEvents('remove', DOM_FOCUS_EVENTS);
     }
+    /**
+     * @hidden
+     */
+    onResize() {
+        const currentWindowSize = this.adaptiveService.size;
+        if (this.isAdaptiveModeEnabled && this.windowSize !== currentWindowSize) {
+            if (this.isOpen) {
+                this.toggleWithEvents(false);
+            }
+            this.windowSize = currentWindowSize;
+        }
+    }
     /**
      * @hidden
      */
@@ -451,8 +511,10 @@ export class ColorPickerComponent {
      * @hidden
      */
     togglePopup() {
-        this.focus();
-        this.toggleWithEvents(!this.isOpen);
+        if (!this.isActionSheetExpanded) {
+            this.focus();
+            this.toggleWithEvents(!this.isOpen);
+        }
     }
     /**
      * @hidden
@@ -470,7 +532,9 @@ export class ColorPickerComponent {
             }
             return;
         }
-        this.toggleWithEvents(!this.isOpen);
+        if (!this.isActionSheetExpanded) {
+            this.toggleWithEvents(!this.isOpen);
+        }
     }
     /**
      * Focuses the wrapper of the ColorPicker.
@@ -503,13 +567,15 @@ export class ColorPickerComponent {
      * @hidden
      */
     handleWrapperBlur() {
-        if (this.isOpen) {
-            return;
+        if (!this.isActionSheetExpanded) {
+            if (this.isOpen) {
+                return;
+            }
+            this.ngZone.run(() => {
+                this.onBlur.emit();
+                this.isFocused = false;
+            });
         }
-        this.ngZone.run(() => {
-            this.onBlur.emit();
-            this.isFocused = false;
-        });
     }
     /**
      * Clears the value of the ColorPicker.
@@ -523,20 +589,31 @@ export class ColorPickerComponent {
         this.notifyNgChanged(undefined);
     }
     /**
-     * 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.
      */
     toggle(open) {
+        this.windowSize = this.adaptiveService.size;
         if (this.disabled || this.readonly) {
             return;
         }
         this.cdr.markForCheck();
-        this.closePopup();
+        if (this.isActionSheetExpanded) {
+            this.closeActionSheet();
+        }
+        else {
+            this.closePopup();
+        }
         open = isPresent(open) ? open : !this.isOpen;
         if (open) {
-            this.openPopup();
+            if (this.isAdaptive && !this.isActionSheetExpanded) {
+                this.openActionSheet();
+            }
+            else {
+                this.openPopup();
+            }
             this.focusFirstElement();
         }
     }
@@ -557,13 +634,15 @@ export class ColorPickerComponent {
      * @hidden
      */
     handlePopupBlur(event) {
-        if (this.popupBlurInvalid(event)) {
-            return;
+        if (!this.isActionSheetExpanded) {
+            if (this.popupBlurInvalid(event)) {
+                return;
+            }
+            this.isFocused = false;
+            this.onBlur.emit();
+            this.notifyNgTouched();
+            this.toggleWithEvents(false);
         }
-        this.isFocused = false;
-        this.onBlur.emit();
-        this.notifyNgTouched();
-        this.toggleWithEvents(false);
     }
     /**
      * @hidden
@@ -601,6 +680,20 @@ export class ColorPickerComponent {
             });
         }
     }
+    /**
+     * @hidden
+     */
+    onApply() {
+        this.handleValueChange(this.flatColorPicker.selection);
+        this.toggleWithEvents(false);
+    }
+    /**
+     * @hidden
+     */
+    onCancel(e) {
+        this.flatColorPicker.resetSelection(e);
+        this.toggleWithEvents(false);
+    }
     /**
      * @hidden
      */
@@ -640,7 +733,7 @@ export class ColorPickerComponent {
         }
     }
     popupBlurInvalid(ev) {
-        const focusInFlatColorPickerElement = this.popupRef.popupElement.contains(ev.relatedTarget);
+        const focusInFlatColorPickerElement = this.popupRef?.popupElement?.contains(ev.relatedTarget);
         const hostClicked = closest(ev.relatedTarget, (element) => element === this.host.nativeElement);
         return Boolean(hostClicked || focusInFlatColorPickerElement);
     }
@@ -675,6 +768,15 @@ 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);
+        this.focus();
+    }
     openPopup() {
         const horizontalAlign = this.direction === "rtl" ? "right" : "left";
         const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
@@ -716,7 +818,7 @@ export class ColorPickerComponent {
     }
     get lastFocusableElement() {
         if (this.preview) {
-            return this.flatColorPicker.footer.lastButton;
+            return this.flatColorPicker.footer?.lastButton || this.adaptiveRenderer.applyButton.nativeElement;
         }
         if (this.flatColorPicker.palette) {
             return this.flatColorPicker.palette.host;
@@ -748,7 +850,9 @@ export class ColorPickerComponent {
                     closest(event.relatedTarget, (element) => element === this.flatColorPicker.host.nativeElement) :
                     false;
                 const closestWrapper = closest(event.relatedTarget, (element) => element === this.host.nativeElement);
-                if (!closestPopup && !closestWrapper) {
+                const closestActionSheet = this.isActionSheetExpanded ? closest(event.relatedTarget, (element) => element === this.actionSheet.element.nativeElement) :
+                    false;
+                if (!closestPopup && !closestWrapper && !closestActionSheet) {
                     this.handleWrapperBlur();
                 }
             }));
@@ -758,7 +862,7 @@ export class ColorPickerComponent {
             }));
             this.subscriptions.add(this.renderer.listen(hostElement, 'click', (event) => {
                 this.ngZone.run(() => {
-                    this.handleWrapperClick(event);
+                    !this.isActionSheetExpanded && this.handleWrapperClick(event);
                 });
             }));
         });
@@ -776,8 +880,8 @@ export 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.PopupService }, { token: i0.ChangeDetectorRef }, { token: i2.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }], 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", 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.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: [{
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ColorPickerComponent)
@@ -794,7 +898,7 @@ export class ColorPickerComponent {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.colorpicker'
             }
-        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "activeColor", first: true, predicate: ["activeColor"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "flatColorPicker", first: true, predicate: ["flatColorPicker"], descendants: true }], exportAs: ["kendoColorPicker"], usesOnChanges: true, ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "activeColor", first: true, predicate: ["activeColor"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "flatColorPicker", first: true, predicate: ["flatColorPicker"], descendants: true }, { propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, descendants: true }], exportAs: ["kendoColorPicker"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoColorPickerLocalizedMessages
             i18n-colorPickerNoColor="kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty."
             colorPickerNoColor="Colorpicker no color chosen"
@@ -828,6 +932,10 @@ 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-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."
             redChannelLabel="Red channel"
             i18n-greenChannelLabel="kendo.colorpicker.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
@@ -860,13 +968,13 @@ export class ColorPickerComponent {
                 </kendo-icon-wrapper>
                 <span class="k-color-preview-mask" [style.background-color]="value"></span>
             </span>
-
         </span>
         <button
             kendoButton
             tabindex="-1"
             type="button"
             icon="caret-alt-down"
+            [size]="size"
             [svgIcon]="arrowDownIcon"
             [fillMode]="fillMode"
             [disabled]="disabled"
@@ -880,9 +988,11 @@ export class ColorPickerComponent {
                 #flatColorPicker
                 [value]="value"
                 [format]="format"
+                [size]="isAdaptive ? 'large' : size"
                 [views]="views"
                 [activeView]="activeView"
                 [actionsLayout]="actionsLayout"
+                [adaptiveMode]="isActionSheetExpanded"
                 [preview]="preview"
                 [gradientSettings]="gradientSettings"
                 [paletteSettings]="paletteSettings"
@@ -897,7 +1007,17 @@ export class ColorPickerComponent {
             </kendo-flatcolorpicker>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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: "component", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }] });
+        <kendo-adaptive-renderer
+            [actionSheetTemplate]="popupTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [preview]="preview"
+            (actionSheetClose)="onCancel($event)"
+            (onApply)="onApply()"
+            (onCancel)="onCancel($event)"
+        >
+        </kendo-adaptive-renderer>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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: "component", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "adaptiveMode", "paletteSettings", "size"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "actionSheetTemplate", "isActionSheetExpanded", "preview"], outputs: ["actionSheetClose", "onExpand", "onCollapse", "onApply", "onCancel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
@@ -955,6 +1075,10 @@ 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-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."
             redChannelLabel="Red channel"
             i18n-greenChannelLabel="kendo.colorpicker.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
@@ -987,13 +1111,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </kendo-icon-wrapper>
                 <span class="k-color-preview-mask" [style.background-color]="value"></span>
             </span>
-
         </span>
         <button
             kendoButton
             tabindex="-1"
             type="button"
             icon="caret-alt-down"
+            [size]="size"
             [svgIcon]="arrowDownIcon"
             [fillMode]="fillMode"
             [disabled]="disabled"
@@ -1007,9 +1131,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 #flatColorPicker
                 [value]="value"
                 [format]="format"
+                [size]="isAdaptive ? 'large' : size"
                 [views]="views"
                 [activeView]="activeView"
                 [actionsLayout]="actionsLayout"
+                [adaptiveMode]="isActionSheetExpanded"
                 [preview]="preview"
                 [gradientSettings]="gradientSettings"
                 [paletteSettings]="paletteSettings"
@@ -1024,11 +1150,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </kendo-flatcolorpicker>
         </ng-template>
         <ng-container #container></ng-container>
-    `,
+        <kendo-adaptive-renderer
+            [actionSheetTemplate]="popupTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [preview]="preview"
+            (actionSheetClose)="onCancel($event)"
+            (onApply)="onApply()"
+            (onCancel)="onCancel($event)"
+        >
+        </kendo-adaptive-renderer>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        `,
                     standalone: true,
-                    imports: [LocalizedColorPickerMessagesDirective, NgClass, NgIf, IconWrapperComponent, ButtonComponent, FlatColorPickerComponent]
+                    imports: [LocalizedColorPickerMessagesDirective, NgClass, NgIf, IconWrapperComponent, ButtonComponent, FlatColorPickerComponent, ResizeSensorComponent, AdaptiveRendererComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PopupService }, { type: i0.ChangeDetectorRef }, { type: i2.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PopupService }, { type: i0.ChangeDetectorRef }, { type: i2.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i3.AdaptiveService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-colorpicker']
             }, {
@@ -1071,6 +1207,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], view: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
             }], activeView: [{
                 type: Input
             }], readonly: [{
@@ -1142,4 +1280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], flatColorPicker: [{
                 type: ViewChild,
                 args: ['flatColorPicker', { static: false }]
+            }], adaptiveRenderer: [{
+                type: ViewChild,
+                args: [AdaptiveRendererComponent]
             }] } });

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

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