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

package/esm2022/colorpicker/adaptiveness/adaptive-renderer.component.mjs

@@ -0,0 +1,205 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, Output, EventEmitter, TemplateRef, ViewChild } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { checkIcon, xIcon } from '@progress/kendo-svg-icons';
+import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
+import { TextBoxComponent } from '../../textbox/textbox.component';
+import { animationDuration } from '../models/adaptive-mode';
+import { AdaptiveCloseButtonComponent } from './adaptive-close-button.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+/**
+ * @hidden
+ */
+export class AdaptiveRendererComponent {
+    localization;
+    title;
+    subtitle;
+    actionSheetTemplate;
+    isActionSheetExpanded;
+    preview;
+    actionSheetClose = new EventEmitter();
+    onExpand = new EventEmitter();
+    onCollapse = new EventEmitter();
+    onApply = new EventEmitter();
+    onCancel = new EventEmitter();
+    actionSheet;
+    actionSheetSearchBar;
+    cancelButton;
+    applyButton;
+    constructor(localization) {
+        this.localization = localization;
+    }
+    animationDuration = animationDuration;
+    xIcon = xIcon;
+    checkIcon = checkIcon;
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", actionSheetTemplate: "actionSheetTemplate", isActionSheetExpanded: "isActionSheetExpanded", preview: "preview" }, outputs: { actionSheetClose: "actionSheetClose", onExpand: "onExpand", onCollapse: "onCollapse", onApply: "onApply", onCancel: "onCancel" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }, { propertyName: "cancelButton", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["apply"], descendants: true }], ngImport: i0, template: `
+        <kendo-actionsheet
+            #actionSheet
+            [animation]="{ duration: animationDuration }"
+            [expanded]="isActionSheetExpanded"
+            (overlayClick)="actionSheetClose.emit()"
+            (expand)="onExpand.emit()"
+            (collapse)="onCollapse.emit()"
+        >
+            <ng-template kendoActionSheetTemplate>
+                <div class="k-text-center k-actionsheet-titlebar">
+                    <div class="k-actionsheet-titlebar-group k-hbox">
+                        <div class="k-actionsheet-title">
+                            <div class="k-text-center">{{ messageFor('adaptiveTitle') }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center"></div>
+                        </div>
+                        <div *ngIf="!preview" class="k-actionsheet-actions">
+                            <kendo-adaptive-close-button
+                                icon="check"
+                                color="primary"
+                                [title]="messageFor('closeButton')"
+                                [svgIcon]="checkIcon"
+                                (close)="onApply.emit($event)">
+                            </kendo-adaptive-close-button>
+                        </div>
+                        <div *ngIf="preview" class="k-actionsheet-actions">
+                            <kendo-adaptive-close-button
+                                icon="x"
+                                [title]="messageFor('closeButton')"
+                                [svgIcon]="xIcon"
+                                (close)="actionSheetClose.emit($event)">
+                            </kendo-adaptive-close-button>
+                        </div>
+                    </div>
+                </div>
+                <div class="k-actionsheet-content !k-overflow-hidden">
+                    <ng-container *ngTemplateOutlet="actionSheetTemplate"></ng-container>
+                </div>
+                <div *ngIf="preview" class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button 
+                        #cancel
+                        kendoButton
+                        size="large"
+                        (click)="onCancel.emit($event)"
+                        [title]="messageFor('cancelButton')">
+                        {{messageFor('cancelButton')}}
+                    </button>
+                    <button
+                        #apply
+                        kendoButton
+                        size="large"
+                        themeColor="primary"
+                        (click)="onApply.emit()"
+                        [title]="messageFor('applyButton')">
+                        {{messageFor('applyButton')}}
+                    </button>
+                </div>
+            </ng-template>
+        </kendo-actionsheet>
+    `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveCloseButtonComponent, selector: "kendo-adaptive-close-button", inputs: ["title", "icon", "svgIcon", "color"], outputs: ["close"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-adaptive-renderer',
+                    template: `
+        <kendo-actionsheet
+            #actionSheet
+            [animation]="{ duration: animationDuration }"
+            [expanded]="isActionSheetExpanded"
+            (overlayClick)="actionSheetClose.emit()"
+            (expand)="onExpand.emit()"
+            (collapse)="onCollapse.emit()"
+        >
+            <ng-template kendoActionSheetTemplate>
+                <div class="k-text-center k-actionsheet-titlebar">
+                    <div class="k-actionsheet-titlebar-group k-hbox">
+                        <div class="k-actionsheet-title">
+                            <div class="k-text-center">{{ messageFor('adaptiveTitle') }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center"></div>
+                        </div>
+                        <div *ngIf="!preview" class="k-actionsheet-actions">
+                            <kendo-adaptive-close-button
+                                icon="check"
+                                color="primary"
+                                [title]="messageFor('closeButton')"
+                                [svgIcon]="checkIcon"
+                                (close)="onApply.emit($event)">
+                            </kendo-adaptive-close-button>
+                        </div>
+                        <div *ngIf="preview" class="k-actionsheet-actions">
+                            <kendo-adaptive-close-button
+                                icon="x"
+                                [title]="messageFor('closeButton')"
+                                [svgIcon]="xIcon"
+                                (close)="actionSheetClose.emit($event)">
+                            </kendo-adaptive-close-button>
+                        </div>
+                    </div>
+                </div>
+                <div class="k-actionsheet-content !k-overflow-hidden">
+                    <ng-container *ngTemplateOutlet="actionSheetTemplate"></ng-container>
+                </div>
+                <div *ngIf="preview" class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
+                    <button 
+                        #cancel
+                        kendoButton
+                        size="large"
+                        (click)="onCancel.emit($event)"
+                        [title]="messageFor('cancelButton')">
+                        {{messageFor('cancelButton')}}
+                    </button>
+                    <button
+                        #apply
+                        kendoButton
+                        size="large"
+                        themeColor="primary"
+                        (click)="onApply.emit()"
+                        [title]="messageFor('applyButton')">
+                        {{messageFor('applyButton')}}
+                    </button>
+                </div>
+            </ng-template>
+        </kendo-actionsheet>
+    `,
+                    standalone: true,
+                    imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, NgIf, NgTemplateOutlet, AdaptiveCloseButtonComponent]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], actionSheetTemplate: [{
+                type: Input
+            }], isActionSheetExpanded: [{
+                type: Input
+            }], preview: [{
+                type: Input
+            }], actionSheetClose: [{
+                type: Output
+            }], onExpand: [{
+                type: Output
+            }], onCollapse: [{
+                type: Output
+            }], onApply: [{
+                type: Output
+            }], onCancel: [{
+                type: Output
+            }], actionSheet: [{
+                type: ViewChild,
+                args: [ActionSheetComponent]
+            }], actionSheetSearchBar: [{
+                type: ViewChild,
+                args: ['actionSheetSearchBar']
+            }], cancelButton: [{
+                type: ViewChild,
+                args: ['cancel']
+            }], applyButton: [{
+                type: ViewChild,
+                args: ['apply']
+            }] } });

package/esm2022/colorpicker/color-gradient-text-label.directive.mjs

@@ -0,0 +1,34 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input, Renderer2 } from '@angular/core';
+import { TextBoxComponent } from '../textbox/textbox.component';
+import * as i0 from "@angular/core";
+import * as i1 from "../textbox/textbox.component";
+/**
+ * @hidden
+ */
+export class TextLabelDirective {
+    textBox;
+    renderer;
+    focusableId;
+    constructor(textBox, renderer) {
+        this.textBox = textBox;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        this.renderer.setAttribute(this.textBox.input.nativeElement, 'id', this.focusableId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextLabelDirective, deps: [{ token: i1.TextBoxComponent }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TextLabelDirective, isStandalone: true, selector: "[kendoTextLabel]", inputs: { focusableId: "focusableId" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTextLabel]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1.TextBoxComponent }, { type: i0.Renderer2 }]; }, propDecorators: { focusableId: [{
+                type: Input
+            }] } });

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

@@ -12,7 +12,7 @@ import { DraggableDirective, isChanged, isDocumentAvailable, KendoInput } from '
 import { validatePackage } from '@progress/kendo-licensing';
 import { containsFocus, isUntouched } from '../common/dom-utils';
 import { parseColor, getHSV, getColorFromHSV, getColorFromHue } from './utils';
-import { isPresent, fitIntoBounds } from '../common/utils';
+import { isPresent, fitIntoBounds, getStylingClasses } from '../common/utils';
 import { SliderComponent } from '../slider/slider.component';
 import { ColorGradientLocalizationService } from './localization/colorgradient-localization.service';
 import { ColorInputComponent } from './color-input.component';
@@ -27,6 +27,7 @@ import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 let serial = 0;
+const DEFAULT_SIZE = 'medium';
 /**
  * The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
  * The ColorGradient is independently used by `kendo-colorpicker` and can be directly added to the page.
@@ -85,6 +86,10 @@ export class ColorGradientComponent {
     focusHandler(ev) {
         this.internalNavigation = ev.target !== this.host.nativeElement;
     }
+    /**
+     * @hidden
+     */
+    adaptiveMode = false;
     /**
      * @hidden
      */
@@ -95,6 +100,23 @@ export class ColorGradientComponent {
      * @default true
      */
     opacity = true;
+    /**
+     * The size property specifies the padding of the ColorGradient 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;
+    }
     /**
      * Sets the disabled state of the ColorGradient. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorgradient#toc-managing-the-colorgradient-disabled-state-in-reactive-forms).
      *
@@ -232,6 +254,7 @@ export class ColorGradientComponent {
     listeners = [];
     hueSliderTouched = false;
     alphaSliderTouched = false;
+    _size = 'medium';
     updateValues = new Subject();
     changeRequestsSubscription;
     dynamicRTLSubscription;
@@ -274,6 +297,10 @@ export class ColorGradientComponent {
         this.control = this.injector.get(NgControl, null);
     }
     ngAfterViewInit() {
+        const stylingInputs = ['size'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
             this.updateUI();
             this.cdr.detectChanges();
@@ -527,7 +554,7 @@ export class ColorGradientComponent {
             return;
         }
         const sliderTrack = this.alphaSlider.track.nativeElement;
-        this.renderer.setStyle(sliderTrack, 'background', `linear-gradient(to top, transparent, ${backgroundColor})`);
+        this.renderer.setStyle(sliderTrack, 'background', `linear-gradient(to ${this.adaptiveMode ? 'right' : 'top'}, transparent, ${backgroundColor})`);
     }
     setHostElementAriaLabel() {
         const parsed = parseColor(this.value, this.format, this.opacity);
@@ -590,8 +617,18 @@ export class ColorGradientComponent {
             this.changeRequestsSubscription.unsubscribe();
         }
     }
+    handleClasses(value, input) {
+        const elem = this.host.nativeElement;
+        const classes = getStylingClasses('colorgradient', 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: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorGradientComponent, isStandalone: true, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "class.k-colorgradient-md": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorGradientComponent, isStandalone: true, selector: "kendo-colorgradient", inputs: { adaptiveMode: "adaptiveMode", id: "id", opacity: "opacity", size: "size", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled", "class.k-readonly": "this.readonly" } }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -647,7 +684,11 @@ export class ColorGradientComponent {
             i18n-hexInputPlaceholder="kendo.colorgradient.hexInputPlaceholder|The placeholder for the HEX color input."
             hexInputPlaceholder="HEX">
         </ng-container>
-        <div class="k-colorgradient-canvas k-hstack">
+        <div [ngClass]="{
+                'k-colorgradient-canvas': true,
+                'k-vstack': adaptiveMode,
+                'k-hstack': !adaptiveMode
+            }">
             <div class="k-hsv-rectangle" #hsvRectangle>
                 <div
                     #gradientWrapper
@@ -683,8 +724,12 @@ export class ColorGradientComponent {
                     [style]="'position: absolute; overflow: visible; pointer-events: none; left: 0px; top: 0px;'">
                 </svg>
             </div>
-            <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
-
+            <div [ngClass]="{
+                    'k-hsv-controls': true,
+                    'k-sliders-wrap-clearable': clearButton,
+                    'k-vstack': adaptiveMode,
+                    'k-hstack': !adaptiveMode
+                }">
                 <button
                     kendoButton
                     *ngIf="clearButton"
@@ -692,6 +737,7 @@ export class ColorGradientComponent {
                     fillMode="flat"
                     icon="droplet-slash"
                     [svgIcon]="dropletSlashIcon"
+                    [size]="size"
                     (click)="reset()"
                     (keydown.enter)="reset()"
                     (keydown.space)="reset()"
@@ -711,7 +757,7 @@ export class ColorGradientComponent {
                     [readonly]="readonly"
                     [showButtons]="false"
                     tickPlacement="none"
-                    [vertical]="true"
+                    [vertical]="!adaptiveMode"
                     [min]="0"
                     [max]="360"
                     [value]="hsva.value.h"
@@ -732,7 +778,7 @@ export class ColorGradientComponent {
                     [readonly]="readonly"
                     [showButtons]="false"
                     tickPlacement="none"
-                    [vertical]="true"
+                    [vertical]="!adaptiveMode"
                     [min]="0"
                     [max]="100"
                     [smallStep]="1"
@@ -746,6 +792,7 @@ export class ColorGradientComponent {
         <kendo-colorinput  #inputs
             [tabindex]="innerTabIndex"
             [opacity]="opacity"
+            [size]="size"
             [formatView]="format"
             [value]="value"
             [disabled]="disabled"
@@ -760,7 +807,7 @@ export class ColorGradientComponent {
             [value]="value"
             [ratio]="contrastTool">
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { 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: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { kind: "component", type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { 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: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "size", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { kind: "component", type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,
@@ -824,7 +871,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             i18n-hexInputPlaceholder="kendo.colorgradient.hexInputPlaceholder|The placeholder for the HEX color input."
             hexInputPlaceholder="HEX">
         </ng-container>
-        <div class="k-colorgradient-canvas k-hstack">
+        <div [ngClass]="{
+                'k-colorgradient-canvas': true,
+                'k-vstack': adaptiveMode,
+                'k-hstack': !adaptiveMode
+            }">
             <div class="k-hsv-rectangle" #hsvRectangle>
                 <div
                     #gradientWrapper
@@ -860,8 +911,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [style]="'position: absolute; overflow: visible; pointer-events: none; left: 0px; top: 0px;'">
                 </svg>
             </div>
-            <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
-
+            <div [ngClass]="{
+                    'k-hsv-controls': true,
+                    'k-sliders-wrap-clearable': clearButton,
+                    'k-vstack': adaptiveMode,
+                    'k-hstack': !adaptiveMode
+                }">
                 <button
                     kendoButton
                     *ngIf="clearButton"
@@ -869,6 +924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     fillMode="flat"
                     icon="droplet-slash"
                     [svgIcon]="dropletSlashIcon"
+                    [size]="size"
                     (click)="reset()"
                     (keydown.enter)="reset()"
                     (keydown.space)="reset()"
@@ -888,7 +944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [readonly]="readonly"
                     [showButtons]="false"
                     tickPlacement="none"
-                    [vertical]="true"
+                    [vertical]="!adaptiveMode"
                     [min]="0"
                     [max]="360"
                     [value]="hsva.value.h"
@@ -909,7 +965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [readonly]="readonly"
                     [showButtons]="false"
                     tickPlacement="none"
-                    [vertical]="true"
+                    [vertical]="!adaptiveMode"
                     [min]="0"
                     [max]="100"
                     [smallStep]="1"
@@ -923,6 +979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <kendo-colorinput  #inputs
             [tabindex]="innerTabIndex"
             [opacity]="opacity"
+            [size]="size"
             [formatView]="format"
             [value]="value"
             [disabled]="disabled"
@@ -944,9 +1001,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-colorgradient']
-            }, {
-                type: HostBinding,
-                args: ['class.k-colorgradient-md']
             }], readonlyAttribute: [{
                 type: HostBinding,
                 args: ['attr.aria-readonly']
@@ -980,10 +1034,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], focusHandler: [{
                 type: HostListener,
                 args: ['focusin', ['$event']]
+            }], adaptiveMode: [{
+                type: Input
             }], id: [{
                 type: Input
             }], opacity: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], readonly: [{