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

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, getStylingClasses } from '../common/utils';
+import { isPresent, fitIntoBounds } from '../common/utils';
 import { SliderComponent } from '../slider/slider.component';
 import { ColorGradientLocalizationService } from './localization/colorgradient-localization.service';
 import { ColorInputComponent } from './color-input.component';
@@ -27,7 +27,6 @@ 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.
@@ -86,10 +85,6 @@ export class ColorGradientComponent {
     focusHandler(ev) {
         this.internalNavigation = ev.target !== this.host.nativeElement;
     }
-    /**
-     * @hidden
-     */
-    adaptiveMode = false;
     /**
      * @hidden
      */
@@ -100,23 +95,6 @@ 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).
      *
@@ -254,7 +232,6 @@ export class ColorGradientComponent {
     listeners = [];
     hueSliderTouched = false;
     alphaSliderTouched = false;
-    _size = 'medium';
     updateValues = new Subject();
     changeRequestsSubscription;
     dynamicRTLSubscription;
@@ -297,10 +274,6 @@ 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();
@@ -554,7 +527,7 @@ export class ColorGradientComponent {
             return;
         }
         const sliderTrack = this.alphaSlider.track.nativeElement;
-        this.renderer.setStyle(sliderTrack, 'background', `linear-gradient(to ${this.adaptiveMode ? 'right' : 'top'}, transparent, ${backgroundColor})`);
+        this.renderer.setStyle(sliderTrack, 'background', `linear-gradient(to top, transparent, ${backgroundColor})`);
     }
     setHostElementAriaLabel() {
         const parsed = parseColor(this.value, this.format, this.opacity);
@@ -617,18 +590,8 @@ 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: { 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: [
+    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: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -684,11 +647,7 @@ export class ColorGradientComponent {
             i18n-hexInputPlaceholder="kendo.colorgradient.hexInputPlaceholder|The placeholder for the HEX color input."
             hexInputPlaceholder="HEX">
         </ng-container>
-        <div [ngClass]="{
-                'k-colorgradient-canvas': true,
-                'k-vstack': adaptiveMode,
-                'k-hstack': !adaptiveMode
-            }">
+        <div class="k-colorgradient-canvas k-hstack">
             <div class="k-hsv-rectangle" #hsvRectangle>
                 <div
                     #gradientWrapper
@@ -724,12 +683,8 @@ export class ColorGradientComponent {
                     [style]="'position: absolute; overflow: visible; pointer-events: none; left: 0px; top: 0px;'">
                 </svg>
             </div>
-            <div [ngClass]="{
-                    'k-hsv-controls': true,
-                    'k-sliders-wrap-clearable': clearButton,
-                    'k-vstack': adaptiveMode,
-                    'k-hstack': !adaptiveMode
-                }">
+            <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
+
                 <button
                     kendoButton
                     *ngIf="clearButton"
@@ -737,7 +692,6 @@ export class ColorGradientComponent {
                     fillMode="flat"
                     icon="droplet-slash"
                     [svgIcon]="dropletSlashIcon"
-                    [size]="size"
                     (click)="reset()"
                     (keydown.enter)="reset()"
                     (keydown.space)="reset()"
@@ -757,7 +711,7 @@ export class ColorGradientComponent {
                     [readonly]="readonly"
                     [showButtons]="false"
                     tickPlacement="none"
-                    [vertical]="!adaptiveMode"
+                    [vertical]="true"
                     [min]="0"
                     [max]="360"
                     [value]="hsva.value.h"
@@ -778,7 +732,7 @@ export class ColorGradientComponent {
                     [readonly]="readonly"
                     [showButtons]="false"
                     tickPlacement="none"
-                    [vertical]="!adaptiveMode"
+                    [vertical]="true"
                     [min]="0"
                     [max]="100"
                     [smallStep]="1"
@@ -792,7 +746,6 @@ export class ColorGradientComponent {
         <kendo-colorinput  #inputs
             [tabindex]="innerTabIndex"
             [opacity]="opacity"
-            [size]="size"
             [formatView]="format"
             [value]="value"
             [disabled]="disabled"
@@ -807,7 +760,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", "size", "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", "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,
@@ -871,11 +824,7 @@ 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 [ngClass]="{
-                'k-colorgradient-canvas': true,
-                'k-vstack': adaptiveMode,
-                'k-hstack': !adaptiveMode
-            }">
+        <div class="k-colorgradient-canvas k-hstack">
             <div class="k-hsv-rectangle" #hsvRectangle>
                 <div
                     #gradientWrapper
@@ -911,12 +860,8 @@ 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 [ngClass]="{
-                    'k-hsv-controls': true,
-                    'k-sliders-wrap-clearable': clearButton,
-                    'k-vstack': adaptiveMode,
-                    'k-hstack': !adaptiveMode
-                }">
+            <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
+
                 <button
                     kendoButton
                     *ngIf="clearButton"
@@ -924,7 +869,6 @@ 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()"
@@ -944,7 +888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [readonly]="readonly"
                     [showButtons]="false"
                     tickPlacement="none"
-                    [vertical]="!adaptiveMode"
+                    [vertical]="true"
                     [min]="0"
                     [max]="360"
                     [value]="hsva.value.h"
@@ -965,7 +909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [readonly]="readonly"
                     [showButtons]="false"
                     tickPlacement="none"
-                    [vertical]="!adaptiveMode"
+                    [vertical]="true"
                     [min]="0"
                     [max]="100"
                     [smallStep]="1"
@@ -979,7 +923,6 @@ 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"
@@ -1001,6 +944,9 @@ 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']
@@ -1034,14 +980,10 @@ 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: [{

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, Input, Output, EventEmitter, ElementRef, HostBinding, ViewChild, Renderer2, ChangeDetectorRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ElementRef, HostBinding, ViewChild, Renderer2 } from '@angular/core';
 import { getRGBA, parseColor, getColorFromRGBA } from './utils';
 import { isPresent } from '../common/utils';
 import { guid, isDocumentAvailable } from '@progress/kendo-angular-common';
@@ -14,18 +14,14 @@ import { caretAltExpandIcon } from '@progress/kendo-svg-icons';
 import { NumericLabelDirective } from './color-gradient-numeric-label.directive';
 import { NgIf } from '@angular/common';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { TextBoxComponent } from '../textbox/textbox.component';
-import { TextLabelDirective } from './color-gradient-text-label.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-const DEFAULT_SIZE = 'medium';
 /**
  * @hidden
  */
 export class ColorInputComponent {
     host;
     renderer;
-    cdr;
     localizationService;
     /**
      * The id of the hex input.
@@ -35,16 +31,6 @@ export class ColorInputComponent {
      * The color format view.
      */
     formatView;
-    /**
-     * The size property specifies the padding of the ColorInput.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
-     */
-    size = DEFAULT_SIZE;
     /**
      * The inputs tabindex.
      */
@@ -110,10 +96,9 @@ export class ColorInputComponent {
      */
     caretAltExpandIcon = caretAltExpandIcon;
     subscriptions = new Subscription();
-    constructor(host, renderer, cdr, localizationService) {
+    constructor(host, renderer, localizationService) {
         this.host = host;
         this.renderer = renderer;
-        this.cdr = cdr;
         this.localizationService = localizationService;
     }
     ngAfterViewInit() {
@@ -177,8 +162,6 @@ export class ColorInputComponent {
     }
     toggleFormatView() {
         this.formatView = this.formatView === 'hex' ? 'rgba' : 'hex';
-        // needed to update the view when ChangeDetectionStrategy.OnPush
-        this.cdr.markForCheck();
     }
     initDomEvents() {
         if (!this.host) {
@@ -189,8 +172,8 @@ export class ColorInputComponent {
     lastInput() {
         return this.hexInput?.nativeElement || this.opacityInput || this.blueInput;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorInputComponent, isStandalone: true, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", size: "size", tabindex: "tabindex", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", tabOut: "tabOut" }, host: { properties: { "class.k-colorgradient-inputs": "this.colorInputClass", "class.k-hstack": "this.colorInputClass" } }, viewQueries: [{ propertyName: "opacityInput", first: true, predicate: ["opacityInput"], descendants: true }, { propertyName: "hexInput", first: true, predicate: ["hexInput"], descendants: true }, { propertyName: "blueInput", first: true, predicate: ["blue"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorInputComponent, isStandalone: true, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", tabindex: "tabindex", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", tabOut: "tabOut" }, host: { properties: { "class.k-colorgradient-inputs": "this.colorInputClass", "class.k-hstack": "this.colorInputClass" } }, viewQueries: [{ propertyName: "opacityInput", first: true, predicate: ["opacityInput"], descendants: true }, { propertyName: "hexInput", first: true, predicate: ["hexInput"], descendants: true }, { propertyName: "blueInput", first: true, predicate: ["blue"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <div class="k-vstack">
             <button 
                 kendoButton
@@ -199,7 +182,6 @@ export class ColorInputComponent {
                 #toggleFormatButton
                 icon="caret-alt-expand"
                 [svgIcon]="caretAltExpandIcon"
-                [size]="size"
                 class="k-colorgradient-toggle-mode"
                 [attr.aria-label]="formatButtonTitle"
                 [attr.title]="formatButtonTitle"
@@ -208,22 +190,20 @@ export class ColorInputComponent {
             >
             </button>
         </div>
-        <div *ngIf="formatView === 'hex'" class="k-vstack k-flex-1">
-            <kendo-textbox
+        <div *ngIf="formatView === 'hex'" class="k-vstack">
+            <input
                 #hexInput
-                kendoTextLabel
-                [focusableId]="focusableId"
-                class="k-hex-value"
-                [size]="size"
+                [id]="focusableId"
+                class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-hex-value"
                 [class.k-readonly]="readonly"
                 [disabled]="disabled"
                 [readonly]="readonly"
                 [value]="hex || ''"
                 (blur)="handleHexInputBlur()"
                 (input)="handleHexValueChange(hexInput.value)"
-                [tabindex]="tabindex"
-                (keydown.tab)="focusDragHandle($event)">
-            </kendo-textbox>
+                [tabindex]="tabindex.toString()"
+                (keydown.tab)="focusDragHandle($event)"
+            />
             <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
         </div>
         <ng-container *ngIf="formatView === 'rgba'">
@@ -233,7 +213,6 @@ export class ColorInputComponent {
                     kendoAdditionalNumericLabel="red"
                     [localizationService]="localizationService"
                     [disabled]="disabled"
-                    [size]="size"
                     [readonly]="readonly"
                     [tabindex]="tabindex"
                     [min]="0"
@@ -256,7 +235,6 @@ export class ColorInputComponent {
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [tabindex]="tabindex"
-                    [size]="size"
                     [min]="0"
                     [max]="255"
                     [(value)]="rgba.g"
@@ -277,7 +255,6 @@ export class ColorInputComponent {
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [tabindex]="tabindex"
-                    [size]="size"
                     [min]="0"
                     [max]="255"
                     [(value)]="rgba.b"
@@ -292,14 +269,13 @@ export class ColorInputComponent {
                 <label [for]="blue.focusableId" class="k-colorgradient-input-label">B</label>
             </div>
             <div class="k-vstack" *ngIf="opacity">
-                <kendo-numerictextbox #opacityInput
+                <kendo-numerictextbox  #opacityInput
                     #alpha
                     kendoAdditionalNumericLabel="alpha"
                     [localizationService]="localizationService"
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [tabindex]="tabindex"
-                    [size]="size"
                     [min]="0"
                     [max]="1"
                     [(value)]="rgba.a"
@@ -315,7 +291,7 @@ export class ColorInputComponent {
                 <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
             </div>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextLabelDirective, selector: "[kendoTextLabel]", inputs: ["focusableId"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
@@ -330,7 +306,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 #toggleFormatButton
                 icon="caret-alt-expand"
                 [svgIcon]="caretAltExpandIcon"
-                [size]="size"
                 class="k-colorgradient-toggle-mode"
                 [attr.aria-label]="formatButtonTitle"
                 [attr.title]="formatButtonTitle"
@@ -339,22 +314,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             >
             </button>
         </div>
-        <div *ngIf="formatView === 'hex'" class="k-vstack k-flex-1">
-            <kendo-textbox
+        <div *ngIf="formatView === 'hex'" class="k-vstack">
+            <input
                 #hexInput
-                kendoTextLabel
-                [focusableId]="focusableId"
-                class="k-hex-value"
-                [size]="size"
+                [id]="focusableId"
+                class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-hex-value"
                 [class.k-readonly]="readonly"
                 [disabled]="disabled"
                 [readonly]="readonly"
                 [value]="hex || ''"
                 (blur)="handleHexInputBlur()"
                 (input)="handleHexValueChange(hexInput.value)"
-                [tabindex]="tabindex"
-                (keydown.tab)="focusDragHandle($event)">
-            </kendo-textbox>
+                [tabindex]="tabindex.toString()"
+                (keydown.tab)="focusDragHandle($event)"
+            />
             <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
         </div>
         <ng-container *ngIf="formatView === 'rgba'">
@@ -364,7 +337,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     kendoAdditionalNumericLabel="red"
                     [localizationService]="localizationService"
                     [disabled]="disabled"
-                    [size]="size"
                     [readonly]="readonly"
                     [tabindex]="tabindex"
                     [min]="0"
@@ -387,7 +359,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [tabindex]="tabindex"
-                    [size]="size"
                     [min]="0"
                     [max]="255"
                     [(value)]="rgba.g"
@@ -408,7 +379,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [tabindex]="tabindex"
-                    [size]="size"
                     [min]="0"
                     [max]="255"
                     [(value)]="rgba.b"
@@ -423,14 +393,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 <label [for]="blue.focusableId" class="k-colorgradient-input-label">B</label>
             </div>
             <div class="k-vstack" *ngIf="opacity">
-                <kendo-numerictextbox #opacityInput
+                <kendo-numerictextbox  #opacityInput
                     #alpha
                     kendoAdditionalNumericLabel="alpha"
                     [localizationService]="localizationService"
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [tabindex]="tabindex"
-                    [size]="size"
                     [min]="0"
                     [max]="1"
                     [(value)]="rgba.a"
@@ -448,14 +417,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </ng-container>
     `,
                     standalone: true,
-                    imports: [ButtonComponent, NgIf, NumericTextBoxComponent, NumericLabelDirective, TextBoxComponent, TextLabelDirective]
+                    imports: [ButtonComponent, NgIf, NumericTextBoxComponent, NumericLabelDirective]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }]; }, propDecorators: { focusableId: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { focusableId: [{
                 type: Input
             }], formatView: [{
                 type: Input
-            }], size: [{
-                type: Input
             }], tabindex: [{
                 type: Input
             }], value: [{