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

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

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

package/esm2022/colorpicker/flatcolorpicker.component.mjs

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

package/esm2022/colorpicker/localization/messages.mjs

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

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

@@ -0,0 +1,27 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @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/colorpicker/services/flatcolorpicker.service.mjs

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

package/esm2022/colorpicker.module.mjs

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

package/esm2022/inputs.module.mjs

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