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

package/esm2022/colorpicker/color-palette.component.mjs

@@ -14,17 +14,17 @@ import { ColorPaletteLocalizationService } from './localization/colorpalette-loc
 import { packageMetadata } from '../package-metadata';
 import { PALETTEPRESETS } from './models';
 import { parseColor } from './utils';
-import { getStylingClasses, isPresent } from '../common/utils';
+import { isPresent } from '../common/utils';
 import { ColorPaletteService } from './services/color-palette.service';
 import { NgFor, NgStyle } from '@angular/common';
 import { LocalizedColorPickerMessagesDirective } from './localization/localized-colorpicker-messages.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/color-palette.service";
 import * as i2 from "@progress/kendo-angular-l10n";
+const DEFAULT_TILE_SIZE = 24;
 const DEFAULT_COLUMNS_COUNT = 10;
 const DEFAULT_PRESET = 'office';
 const DEFAULT_ACCESSIBLE_PRESET = 'accessible';
-const DEFAULT_SIZE = 'medium';
 let serial = 0;
 /**
  * The ColorPalette component provides a set of predefined palette presets and enables you to implement a custom color palette.
@@ -114,23 +114,6 @@ export class ColorPaletteComponent {
     get palette() {
         return this._palette;
     }
-    /**
-     * The size property specifies the padding of the ColorPalette internal elements.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
-     */
-    set size(size) {
-        const newSize = size || DEFAULT_SIZE;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
-    }
-    get size() {
-        return this._size;
-    }
     /**
      * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      */
@@ -153,9 +136,13 @@ export class ColorPaletteComponent {
      */
     readonly = false;
     /**
-     * Specifies the size of a color cell. The default tile size depends on the `size` of the component.
+     * Specifies the size of a color cell.
+     *
+     * The possible values are:
+     * * (Default) `tileSize = 24`
+     * * `{ width: number, height: number }`
      */
-    tileSize;
+    tileSize = { width: DEFAULT_TILE_SIZE, height: DEFAULT_TILE_SIZE };
     /**
      * @hidden
      */
@@ -222,7 +209,6 @@ export class ColorPaletteComponent {
      */
     uniqueId = guid();
     selection;
-    _size = 'medium';
     _value;
     _columns;
     _palette;
@@ -253,10 +239,6 @@ export class ColorPaletteComponent {
         this.subs.add(this.renderer.listen(elem, 'blur', () => this.handleHostBlur()));
     }
     ngAfterViewInit() {
-        const stylingInputs = ['size'];
-        stylingInputs.forEach(input => {
-            this.handleClasses(this[input], input);
-        });
         this.setHostElementAriaLabel();
         if (this.value) {
             this.ngZone.onStable.pipe(take(1)).subscribe(() => {
@@ -442,20 +424,10 @@ export class ColorPaletteComponent {
         const selectedColor = this.service.getColorAt(this.focusedCell);
         this.handleCellSelection(selectedColor, this.focusedCell);
     }
-    handleClasses(value, input) {
-        const elem = this.host.nativeElement;
-        const classes = getStylingClasses('colorpalette', input, this[input], value);
-        if (classes.toRemove) {
-            this.renderer.removeClass(elem, classes.toRemove);
-        }
-        if (classes.toAdd) {
-            this.renderer.addClass(elem, classes.toAdd);
-        }
-    }
     notifyNgTouched = () => { };
     notifyNgChanged = () => { };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: i1.ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPaletteComponent, isStandalone: true, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", size: "size", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "class.k-readonly": "this.readonly", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPaletteComponent, isStandalone: true, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "class.k-readonly": "this.readonly", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -494,9 +466,9 @@ export class ColorPaletteComponent {
                         (click)="handleCellSelection(color, { row: rowIndex, col: colIndex })"
                         [ngStyle]="{
                             backgroundColor: color,
-                            width: tileLayout?.width + 'px',
-                            height: tileLayout?.height + 'px',
-                            minWidth: tileLayout?.width + 'px'
+                            width: tileLayout.width + 'px',
+                            height: tileLayout.height + 'px',
+                            minWidth: tileLayout.width + 'px'
                         }">
                     </td>
                 </tr>
@@ -549,9 +521,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         (click)="handleCellSelection(color, { row: rowIndex, col: colIndex })"
                         [ngStyle]="{
                             backgroundColor: color,
-                            width: tileLayout?.width + 'px',
-                            height: tileLayout?.height + 'px',
-                            minWidth: tileLayout?.width + 'px'
+                            width: tileLayout.width + 'px',
+                            height: tileLayout.height + 'px',
+                            minWidth: tileLayout.width + 'px'
                         }">
                     </td>
                 </tr>
@@ -583,8 +555,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], palette: [{
                 type: Input
-            }], size: [{
-                type: Input
             }], tabindex: [{
                 type: Input
             }], disabled: [{

package/esm2022/colorpicker/colorpicker.component.mjs

@@ -9,10 +9,8 @@ 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, ResizeSensorComponent, isDocumentAvailable } from '@progress/kendo-angular-common';
+import { Keys, KendoInput, isChanged, closest, guid } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { packageMetadata } from '../package-metadata';
 import { PALETTEPRESETS } from './models';
@@ -26,12 +24,10 @@ 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 { ButtonComponent } from '@progress/kendo-angular-buttons';
 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';
@@ -54,7 +50,6 @@ export class ColorPickerComponent {
     ngZone;
     renderer;
     injector;
-    adaptiveService;
     hostClasses = true;
     get focusedClass() {
         return this.isFocused;
@@ -95,10 +90,6 @@ 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.
      *
@@ -293,13 +284,13 @@ export class ColorPickerComponent {
      */
     valueChange = new EventEmitter();
     /**
-     * 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.
+     * Fires each time the popup is about to open.
+     * This event is preventable. If you cancel it, the popup will remain closed.
      */
     open = new EventEmitter();
     /**
-     * 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.
+     * Fires each time the popup is about to close.
+     * This event is preventable. If you cancel it, the popup will remain open.
      */
     close = new EventEmitter();
     /**
@@ -338,14 +329,10 @@ export class ColorPickerComponent {
      */
     isFocused = false;
     /**
-    * @hidden
-    */
-    windowSize = 'large';
-    /**
-     * Returns the current open state. Returns `true` if the Popup (or ActionSheet in adaptive mode) is currently open.
+     * Indicates whether the ColorPicker popup is open.
      */
     get isOpen() {
-        return isPresent(this.popupRef) || this.isActionSheetExpanded;
+        return isPresent(this.popupRef);
     }
     /**
      * @hidden
@@ -360,30 +347,6 @@ 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
      */
@@ -402,10 +365,6 @@ export class ColorPickerComponent {
     activeColor;
     popupTemplate;
     flatColorPicker;
-    /**
-     * @hidden
-     */
-    adaptiveRenderer;
     /**
      * @hidden
      */
@@ -425,7 +384,7 @@ export class ColorPickerComponent {
     popupSubs = new Subscription();
     colorPickerId;
     control;
-    constructor(host, popupService, cdr, localizationService, ngZone, renderer, injector, adaptiveService) {
+    constructor(host, popupService, cdr, localizationService, ngZone, renderer, injector) {
         this.host = host;
         this.popupService = popupService;
         this.cdr = cdr;
@@ -433,7 +392,6 @@ 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';
@@ -448,7 +406,7 @@ export class ColorPickerComponent {
             undefined;
         this._paletteSettings = {
             palette: settingsPalette || defaultPreset,
-            tileSize: this._paletteSettings.tileSize,
+            tileSize: this._paletteSettings.tileSize || 24,
             columns: this._paletteSettings.columns || presetColumns || 10
         };
         this.handleHostId();
@@ -462,12 +420,6 @@ 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') {
@@ -489,18 +441,6 @@ 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
      */
@@ -511,10 +451,8 @@ export class ColorPickerComponent {
      * @hidden
      */
     togglePopup() {
-        if (!this.isActionSheetExpanded) {
-            this.focus();
-            this.toggleWithEvents(!this.isOpen);
-        }
+        this.focus();
+        this.toggleWithEvents(!this.isOpen);
     }
     /**
      * @hidden
@@ -532,9 +470,7 @@ export class ColorPickerComponent {
             }
             return;
         }
-        if (!this.isActionSheetExpanded) {
-            this.toggleWithEvents(!this.isOpen);
-        }
+        this.toggleWithEvents(!this.isOpen);
     }
     /**
      * Focuses the wrapper of the ColorPicker.
@@ -567,15 +503,13 @@ export class ColorPickerComponent {
      * @hidden
      */
     handleWrapperBlur() {
-        if (!this.isActionSheetExpanded) {
-            if (this.isOpen) {
-                return;
-            }
-            this.ngZone.run(() => {
-                this.onBlur.emit();
-                this.isFocused = false;
-            });
+        if (this.isOpen) {
+            return;
         }
+        this.ngZone.run(() => {
+            this.onBlur.emit();
+            this.isFocused = false;
+        });
     }
     /**
      * Clears the value of the ColorPicker.
@@ -589,31 +523,20 @@ export class ColorPickerComponent {
         this.notifyNgChanged(undefined);
     }
     /**
-     * Toggles the Popup (or ActionSheet in adaptive mode) of the ColorPicker.
+     * Toggles the popup 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();
-        if (this.isActionSheetExpanded) {
-            this.closeActionSheet();
-        }
-        else {
-            this.closePopup();
-        }
+        this.closePopup();
         open = isPresent(open) ? open : !this.isOpen;
         if (open) {
-            if (this.isAdaptive && !this.isActionSheetExpanded) {
-                this.openActionSheet();
-            }
-            else {
-                this.openPopup();
-            }
+            this.openPopup();
             this.focusFirstElement();
         }
     }
@@ -634,15 +557,13 @@ export class ColorPickerComponent {
      * @hidden
      */
     handlePopupBlur(event) {
-        if (!this.isActionSheetExpanded) {
-            if (this.popupBlurInvalid(event)) {
-                return;
-            }
-            this.isFocused = false;
-            this.onBlur.emit();
-            this.notifyNgTouched();
-            this.toggleWithEvents(false);
+        if (this.popupBlurInvalid(event)) {
+            return;
         }
+        this.isFocused = false;
+        this.onBlur.emit();
+        this.notifyNgTouched();
+        this.toggleWithEvents(false);
     }
     /**
      * @hidden
@@ -680,20 +601,6 @@ export class ColorPickerComponent {
             });
         }
     }
-    /**
-     * @hidden
-     */
-    onApply() {
-        this.handleValueChange(this.flatColorPicker.selection);
-        this.toggleWithEvents(false);
-    }
-    /**
-     * @hidden
-     */
-    onCancel(e) {
-        this.flatColorPicker.resetSelection(e);
-        this.toggleWithEvents(false);
-    }
     /**
      * @hidden
      */
@@ -733,7 +640,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);
     }
@@ -768,15 +675,6 @@ 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" };
@@ -818,7 +716,7 @@ export class ColorPickerComponent {
     }
     get lastFocusableElement() {
         if (this.preview) {
-            return this.flatColorPicker.footer?.lastButton || this.adaptiveRenderer.applyButton.nativeElement;
+            return this.flatColorPicker.footer.lastButton;
         }
         if (this.flatColorPicker.palette) {
             return this.flatColorPicker.palette.host;
@@ -850,9 +748,7 @@ export class ColorPickerComponent {
                     closest(event.relatedTarget, (element) => element === this.flatColorPicker.host.nativeElement) :
                     false;
                 const closestWrapper = closest(event.relatedTarget, (element) => element === this.host.nativeElement);
-                const closestActionSheet = this.isActionSheetExpanded ? closest(event.relatedTarget, (element) => element === this.actionSheet.element.nativeElement) :
-                    false;
-                if (!closestPopup && !closestWrapper && !closestActionSheet) {
+                if (!closestPopup && !closestWrapper) {
                     this.handleWrapperBlur();
                 }
             }));
@@ -862,7 +758,7 @@ export class ColorPickerComponent {
             }));
             this.subscriptions.add(this.renderer.listen(hostElement, 'click', (event) => {
                 this.ngZone.run(() => {
-                    !this.isActionSheetExpanded && this.handleWrapperClick(event);
+                    this.handleWrapperClick(event);
                 });
             }));
         });
@@ -880,8 +776,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 }, { 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.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: [{
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ColorPickerComponent)
@@ -898,7 +794,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 }, { propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, 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 }], 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"
@@ -932,10 +828,6 @@ 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."
@@ -968,13 +860,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"
@@ -988,11 +880,9 @@ 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"
@@ -1007,17 +897,7 @@ export class ColorPickerComponent {
             </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>
-        `, 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"] }] });
+    `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
@@ -1075,10 +955,6 @@ 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."
@@ -1111,13 +987,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"
@@ -1131,11 +1007,9 @@ 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"
@@ -1150,21 +1024,11 @@ 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, ResizeSensorComponent, AdaptiveRendererComponent]
+                    imports: [LocalizedColorPickerMessagesDirective, NgClass, NgIf, IconWrapperComponent, ButtonComponent, FlatColorPickerComponent]
                 }]
-        }], 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: [{
+        }], 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: [{
                 type: HostBinding,
                 args: ['class.k-colorpicker']
             }, {
@@ -1207,8 +1071,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], view: [{
                 type: Input
-            }], adaptiveMode: [{
-                type: Input
             }], activeView: [{
                 type: Input
             }], readonly: [{
@@ -1280,7 +1142,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], flatColorPicker: [{
                 type: ViewChild,
                 args: ['flatColorPicker', { static: false }]
-            }], adaptiveRenderer: [{
-                type: ViewChild,
-                args: [AdaptiveRendererComponent]
             }] } });