@progress/kendo-angular-inputs 16.5.0 → 16.6.0-develop.2

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

@@ -11,12 +11,11 @@ import { Subscription } from 'rxjs';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { NumericTextBoxComponent } from './../numerictextbox/numerictextbox.component';
 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 * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "../numerictextbox/numerictextbox.component";
-import * as i3 from "@angular/common";
-import * as i4 from "@progress/kendo-angular-buttons";
-import * as i5 from "./color-gradient-numeric-label.directive";
 /**
  * @hidden
  */
@@ -155,7 +154,7 @@ export class ColorInputComponent {
     }
 }
 ColorInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColorInputComponent, 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: `
+ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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
@@ -273,7 +272,7 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
             </div>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "component", type: i2.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i5.NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "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: "15.2.10", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -396,7 +395,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
             </div>
         </ng-container>
-    `
+    `,
+                    standalone: true,
+                    imports: [ButtonComponent, NgIf, NumericTextBoxComponent, NumericLabelDirective]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { focusableId: [{
                 type: Input

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

@@ -16,11 +16,11 @@ import { PALETTEPRESETS } from './models';
 import { parseColor } from './utils';
 import { isPresent } from '../common/utils';
 import { ColorPaletteService } from './services/color-palette.service';
+import { NgFor, NgStyle } from '@angular/common';
+import { LocalizedColorPickerMessagesDirective } from './localization/localized-colorpicker-messages.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/color-palette.service";
 import * as i2 from "@progress/kendo-angular-l10n";
-import * as i3 from "@angular/common";
-import * as i4 from "./localization/localized-colorpicker-messages.directive";
 const DEFAULT_TILE_SIZE = 24;
 const DEFAULT_COLUMNS_COUNT = 10;
 const DEFAULT_PRESET = 'office';
@@ -397,7 +397,7 @@ export class ColorPaletteComponent {
     }
 }
 ColorPaletteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: i1.ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "class.k-readonly": "this.readonly", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
+ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColorPaletteComponent, isStandalone: true, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "class.k-readonly": "this.readonly", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -444,7 +444,7 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 </tr>
             </tbody>
         </table>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPaletteComponent, decorators: [{
             type: Component,
             args: [{
@@ -498,7 +498,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </tr>
             </tbody>
         </table>
-    `
+    `,
+                    standalone: true,
+                    imports: [LocalizedColorPickerMessagesDirective, NgFor, NgStyle]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ColorPaletteService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { direction: [{
                 type: HostBinding,

package/esm2020/colorpicker/colorpicker.component.mjs

@@ -19,16 +19,15 @@ import { parseColor } from './utils';
 import { getStylingClasses, isPresent } from '../common/utils';
 import { ColorPickerLocalizationService } from './localization/colorpicker-localization.service';
 import { DEFAULT_ACCESSIBLE_PRESET, DEFAULT_PRESET } from './constants';
+import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { parseCSSClassNames } from '@progress/kendo-angular-common';
 import { caretAltDownIcon } from '@progress/kendo-svg-icons';
+import { NgClass, NgIf } from '@angular/common';
+import { LocalizedColorPickerMessagesDirective } from './localization/localized-colorpicker-messages.directive';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-popup";
 import * as i2 from "@progress/kendo-angular-l10n";
-import * as i3 from "@angular/common";
-import * as i4 from "@progress/kendo-angular-buttons";
-import * as i5 from "@progress/kendo-angular-icons";
-import * as i6 from "./flatcolorpicker.component";
-import * as i7 from "./localization/localized-colorpicker-messages.directive";
 const DOM_FOCUS_EVENTS = ['focus', 'blur'];
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_ROUNDED = 'medium';
@@ -730,7 +729,7 @@ export class ColorPickerComponent {
     }
 }
 ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1.PopupService }, { token: i0.ChangeDetectorRef }, { token: i2.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", clearButtonClick: "clearButtonClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [{
+ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColorPickerComponent, isStandalone: true, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", clearButtonClick: "clearButtonClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [{
             multi: true,
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => ColorPickerComponent)
@@ -847,7 +846,7 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             </kendo-flatcolorpicker>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i5.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i6.FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }, { kind: "directive", type: i7.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -970,7 +969,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             </kendo-flatcolorpicker>
         </ng-template>
         <ng-container #container></ng-container>
-    `
+    `,
+                    standalone: true,
+                    imports: [LocalizedColorPickerMessagesDirective, NgClass, NgIf, IconWrapperComponent, ButtonComponent, FlatColorPickerComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PopupService }, { type: i0.ChangeDetectorRef }, { type: i2.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,

package/esm2020/colorpicker/contrast-validation.component.mjs

@@ -6,10 +6,10 @@ import { AA_RATIO, AAA_RATIO } from './constants';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Component, Input } from '@angular/core';
 import { checkIcon, xCircleIcon } from '@progress/kendo-svg-icons';
+import { NgIf } from '@angular/common';
+import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "@angular/common";
-import * as i3 from "@progress/kendo-angular-icons";
 /**
  * @hidden
  */
@@ -31,7 +31,7 @@ export class ContrastValidationComponent {
     }
 }
 ContrastValidationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContrastValidationComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ContrastValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: { type: "type", pass: "pass", value: "value" }, ngImport: i0, template: `
+ContrastValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ContrastValidationComponent, isStandalone: true, selector: "[kendoContrastValidation]", inputs: { type: "type", pass: "pass", value: "value" }, ngImport: i0, template: `
         <span>{{contrastText}}</span>
         <ng-container *ngIf="value">
             <span class="k-contrast-validation k-text-success" *ngIf="pass">
@@ -43,7 +43,7 @@ ContrastValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
                 <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
             </span>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContrastValidationComponent, decorators: [{
             type: Component,
             args: [{
@@ -61,7 +61,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
             </span>
         </ng-container>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgIf, IconWrapperComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { type: [{
                 type: Input

package/esm2020/colorpicker/contrast.component.mjs

@@ -7,11 +7,11 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { getContrastFromTwoRGBAs, getRGBA } from './utils';
 import { AA_RATIO, AAA_RATIO } from './constants';
 import { checkIcon, xCircleIcon } from '@progress/kendo-svg-icons';
+import { ContrastValidationComponent } from './contrast-validation.component';
+import { NgIf } from '@angular/common';
+import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "@angular/common";
-import * as i3 from "@progress/kendo-angular-icons";
-import * as i4 from "./contrast-validation.component";
 /**
  * @hidden
  */
@@ -39,7 +39,7 @@ export class ContrastComponent {
     }
 }
 ContrastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContrastComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ContrastComponent, selector: "[kendoContrastTool]", inputs: { value: "value", ratio: "ratio" }, ngImport: i0, template: `
+ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ContrastComponent, isStandalone: true, selector: "[kendoContrastTool]", inputs: { value: "value", ratio: "ratio" }, ngImport: i0, template: `
         <div class="k-contrast-ratio">
             <span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
             <ng-container *ngIf="value">
@@ -62,7 +62,7 @@ ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             [value]="value"
             [pass]="satisfiesAAACondition">
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i4.ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ContrastComponent, decorators: [{
             type: Component,
             args: [{
@@ -91,7 +91,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [value]="value"
             [pass]="satisfiesAAACondition">
         </div>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgIf, IconWrapperComponent, ContrastValidationComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { value: [{
                 type: Input

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

@@ -29,7 +29,7 @@ export class FlatColorPickerActionButtonsComponent {
     }
 }
 FlatColorPickerActionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FlatColorPickerActionButtonsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FlatColorPickerActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: { innerTabIndex: "innerTabIndex" }, outputs: { actionButtonClick: "actionButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-footer": "this.hostClasses", "class.k-actions": "this.hostClasses", "class.k-actions-horizontal": "this.hostClasses" } }, viewQueries: [{ propertyName: "firstButton", first: true, predicate: ["first"], descendants: true, read: ElementRef }, { propertyName: "lastButton", first: true, predicate: ["last"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+FlatColorPickerActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FlatColorPickerActionButtonsComponent, isStandalone: true, selector: "[kendoFlatColorPickerActionButtons]", inputs: { innerTabIndex: "innerTabIndex" }, outputs: { actionButtonClick: "actionButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-footer": "this.hostClasses", "class.k-actions": "this.hostClasses", "class.k-actions-horizontal": "this.hostClasses" } }, viewQueries: [{ propertyName: "firstButton", first: true, predicate: ["first"], descendants: true, read: ElementRef }, { propertyName: "lastButton", first: true, predicate: ["last"], descendants: true, read: ElementRef }], ngImport: i0, template: `
         <button #first
             class="k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base"
             [attr.title]="getText('cancelButton')"
@@ -67,7 +67,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [tabindex]="innerTabIndex.toString()"
             (keydown.tab)="$event.preventDefault(); tabOut.emit();"
         >{{getText('applyButton')}}</button>
-    `
+    `,
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,

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

@@ -6,10 +6,10 @@
 import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ViewChildren, QueryList, ElementRef, Renderer2 } from '@angular/core';
 import { dropletSlashIcon, dropletSliderIcon, paletteIcon } from '@progress/kendo-svg-icons';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { NgIf, NgFor, NgClass } from '@angular/common';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "@angular/common";
-import * as i3 from "@progress/kendo-angular-buttons";
 /**
  * @hidden
  */
@@ -62,7 +62,7 @@ export class FlatColorPickerHeaderComponent {
     }
 }
 FlatColorPickerHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FlatColorPickerHeaderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FlatColorPickerHeaderComponent, 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: `
+FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: `
         <div class="k-coloreditor-header-actions k-hstack">
             <div 
                 *ngIf="viewButtons" 
@@ -117,7 +117,7 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 </span>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FlatColorPickerHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -178,7 +178,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </span>
             </div>
         </div>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgIf, NgFor, ButtonComponent, NgClass]
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,

package/esm2020/colorpicker/flatcolorpicker.component.mjs

@@ -22,15 +22,11 @@ import { FlatColorPickerHeaderComponent } from './flatcolorpicker-header.compone
 import { FlatColorPickerActionButtonsComponent } from './flatcolorpicker-actions.component';
 import { DRAGHANDLE_MOVE_SPEED, DRAGHANDLE_MOVE_SPEED_SMALL_STEP } from "./constants";
 import { take } from "rxjs/operators";
+import { NgIf, NgClass } from "@angular/common";
+import { LocalizedColorPickerMessagesDirective } from "./localization/localized-colorpicker-messages.directive";
 import * as i0 from "@angular/core";
 import * as i1 from "./services/flatcolorpicker.service";
 import * as i2 from "@progress/kendo-angular-l10n";
-import * as i3 from "@angular/common";
-import * as i4 from "./color-palette.component";
-import * as i5 from "./color-gradient.component";
-import * as i6 from "./localization/localized-colorpicker-messages.directive";
-import * as i7 from "./flatcolorpicker-header.component";
-import * as i8 from "./flatcolorpicker-actions.component";
 /**
  * Represents the [Kendo UI FlatColorPicker component for Angular]({% slug overview_flatcolorpicker %}).
  *
@@ -492,7 +488,7 @@ export class FlatColorPickerComponent {
     }
 }
 FlatColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 });
-FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FlatColorPickerComponent, 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: [
+FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -609,7 +605,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
             [ngClass]="'k-justify-content-' + actionsLayout"
             (actionButtonClick)="onAction($event)"
             (tabOut)="firstFocusable.focus()"></div>
-`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { kind: "component", type: i5.ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["id", "opacity", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { kind: "directive", type: i6.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "component", type: i7.FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { kind: "component", type: i8.FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex"], outputs: ["actionButtonClick", "tabOut"] }] });
+`, 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FlatColorPickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -733,7 +729,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [ngClass]="'k-justify-content-' + actionsLayout"
             (actionButtonClick)="onAction($event)"
             (tabOut)="firstFocusable.focus()"></div>
-`
+`,
+                    standalone: true,
+                    imports: [LocalizedColorPickerMessagesDirective, NgIf, FlatColorPickerHeaderComponent, ColorGradientComponent, ColorPaletteComponent, FlatColorPickerActionButtonsComponent, NgClass]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FlatColorPickerService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,

package/esm2020/colorpicker/localization/custom-messages.component.mjs

@@ -20,7 +20,7 @@ export class ColorPickerCustomMessagesComponent extends ColorPickerMessages {
     }
 }
 ColorPickerCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ColorPickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColorPickerCustomMessagesComponent, selector: "kendo-colorpicker-messages, kendo-flatcolorpicker-messages, kendo-colorgradient-messages, kendo-colorpalette-messages", providers: [
+ColorPickerCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColorPickerCustomMessagesComponent, isStandalone: true, selector: "kendo-colorpicker-messages, kendo-flatcolorpicker-messages, kendo-colorgradient-messages, kendo-colorpalette-messages", providers: [
         {
             provide: ColorPickerMessages,
             useExisting: forwardRef(() => ColorPickerCustomMessagesComponent)
@@ -36,6 +36,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         }
                     ],
                     selector: 'kendo-colorpicker-messages, kendo-flatcolorpicker-messages, kendo-colorgradient-messages, kendo-colorpalette-messages',
-                    template: ``
+                    template: ``,
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });

package/esm2020/colorpicker/localization/localized-colorpicker-messages.directive.mjs

@@ -17,7 +17,7 @@ export class LocalizedColorPickerMessagesDirective extends ColorPickerMessages {
     }
 }
 LocalizedColorPickerMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedColorPickerMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedColorPickerMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]", providers: [
+LocalizedColorPickerMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedColorPickerMessagesDirective, isStandalone: true, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]", providers: [
         {
             provide: ColorPickerMessages,
             useExisting: forwardRef(() => LocalizedColorPickerMessagesDirective)
@@ -32,6 +32,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             useExisting: forwardRef(() => LocalizedColorPickerMessagesDirective)
                         }
                     ],
-                    selector: '[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]'
+                    selector: '[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });

package/esm2020/colorpicker.module.mjs

@@ -3,46 +3,17 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PopupModule } from '@progress/kendo-angular-popup';
-import { DraggableModule } from '@progress/kendo-angular-common';
-import { SliderModule } from './slider.module';
-import { NumericTextBoxModule } from './numerictextbox.module';
-import { ColorPickerComponent } from './colorpicker/colorpicker.component';
-import { ColorPaletteComponent } from './colorpicker/color-palette.component';
-import { ColorGradientComponent } from './colorpicker/color-gradient.component';
-import { ColorInputComponent } from './colorpicker/color-input.component';
-import { FlatColorPickerHeaderComponent } from './colorpicker/flatcolorpicker-header.component';
-import { FlatColorPickerActionButtonsComponent } from './colorpicker/flatcolorpicker-actions.component';
-import { FlatColorPickerComponent } from './colorpicker/flatcolorpicker.component';
-import { ColorPickerCustomMessagesComponent } from './colorpicker/localization/custom-messages.component';
-import { LocalizedColorPickerMessagesDirective } from './colorpicker/localization/localized-colorpicker-messages.directive';
-import { FocusOnDomReadyDirective } from './colorpicker/focus-on-dom-ready.directive';
-import { ContrastValidationComponent } from './colorpicker/contrast-validation.component';
-import { ContrastComponent } from './colorpicker/contrast.component';
-import { ColorContrastSvgComponent } from './colorpicker/color-contrast-svg.component';
-import { NumericLabelDirective } from './colorpicker/color-gradient-numeric-label.directive';
-import { ButtonModule } from '@progress/kendo-angular-buttons';
-import { IconsModule } from '@progress/kendo-angular-icons';
+import { KENDO_COLORGRADIENT, KENDO_COLORPALETTE, KENDO_COLORPICKER, KENDO_FLATCOLORPICKER } from './directives';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { ResizeBatchService } from '@progress/kendo-angular-common';
+import { IconsService } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
-const PUBLIC_DIRECTIVES = [
-    ColorPickerComponent,
-    ColorPaletteComponent,
-    ColorGradientComponent,
-    FlatColorPickerComponent,
-    LocalizedColorPickerMessagesDirective,
-    ColorPickerCustomMessagesComponent
-];
-const INTERNAL_DIRECTIVES = [
-    NumericLabelDirective,
-    ColorInputComponent,
-    FocusOnDomReadyDirective,
-    ContrastComponent,
-    ContrastValidationComponent,
-    FlatColorPickerHeaderComponent,
-    FlatColorPickerActionButtonsComponent,
-    ColorContrastSvgComponent
-];
+import * as i1 from "./colorpicker/colorpicker.component";
+import * as i2 from "./colorpicker/localization/custom-messages.component";
+import * as i3 from "./colorpicker/flatcolorpicker.component";
+import * as i4 from "./colorpicker/color-gradient.component";
+import * as i5 from "./colorpicker/color-palette.component";
+//IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the ColorPicker.
@@ -50,53 +21,13 @@ const INTERNAL_DIRECTIVES = [
 export class ColorPickerModule {
 }
 ColorPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerModule, declarations: [ColorPickerComponent,
-        ColorPaletteComponent,
-        ColorGradientComponent,
-        FlatColorPickerComponent,
-        LocalizedColorPickerMessagesDirective,
-        ColorPickerCustomMessagesComponent, NumericLabelDirective,
-        ColorInputComponent,
-        FocusOnDomReadyDirective,
-        ContrastComponent,
-        ContrastValidationComponent,
-        FlatColorPickerHeaderComponent,
-        FlatColorPickerActionButtonsComponent,
-        ColorContrastSvgComponent], imports: [SliderModule,
-        NumericTextBoxModule,
-        CommonModule,
-        PopupModule,
-        DraggableModule,
-        ButtonModule,
-        IconsModule], exports: [ColorPickerComponent,
-        ColorPaletteComponent,
-        ColorGradientComponent,
-        FlatColorPickerComponent,
-        LocalizedColorPickerMessagesDirective,
-        ColorPickerCustomMessagesComponent] });
-ColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerModule, imports: [SliderModule,
-        NumericTextBoxModule,
-        CommonModule,
-        PopupModule,
-        DraggableModule,
-        ButtonModule,
-        IconsModule] });
+ColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", 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] });
+ColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerModule, providers: [PopupService, IconsService, ResizeBatchService], imports: [KENDO_COLORPICKER, KENDO_FLATCOLORPICKER, KENDO_COLORGRADIENT, KENDO_COLORPALETTE] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        PUBLIC_DIRECTIVES,
-                        INTERNAL_DIRECTIVES
-                    ],
-                    exports: [PUBLIC_DIRECTIVES],
-                    imports: [
-                        SliderModule,
-                        NumericTextBoxModule,
-                        CommonModule,
-                        PopupModule,
-                        DraggableModule,
-                        ButtonModule,
-                        IconsModule
-                    ]
+                    imports: [...KENDO_COLORPICKER, ...KENDO_FLATCOLORPICKER, ...KENDO_COLORGRADIENT, ...KENDO_COLORPALETTE],
+                    exports: [...KENDO_COLORPICKER, ...KENDO_FLATCOLORPICKER, ...KENDO_COLORGRADIENT, ...KENDO_COLORPALETTE],
+                    providers: [PopupService, IconsService, ResizeBatchService]
                 }]
         }] });