@progress/kendo-angular-inputs 17.0.0-develop.9 → 17.0.1-develop.1

package/{esm2020 → esm2022}/colorpicker/colorpicker.component.mjs

@@ -43,143 +43,14 @@ let nextColorPickerId = 0;
  * which are rendered in its popup. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
 export class ColorPickerComponent {
-    constructor(host, popupService, cdr, localizationService, ngZone, renderer, injector) {
-        this.host = host;
-        this.popupService = popupService;
-        this.cdr = cdr;
-        this.localizationService = localizationService;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.injector = injector;
-        this.hostClasses = true;
-        this.role = 'combobox';
-        this.hasPopup = 'dialog';
-        /**
-         * Specifies the views that will be rendered in the popup.
-         * By default both the gradient and palette views will be rendered.
-         */
-        this.views = ['gradient', 'palette'];
-        /**
-         * Sets the read-only state of the ColorPicker.
-         *
-         * @default false
-         */
-        this.readonly = false;
-        /**
-         * Sets the disabled state of the ColorPicker. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorpicker#toc-managing-the-colorpicker-disabled-state-in-reactive-forms).
-         *
-         * @default false
-         */
-        this.disabled = false;
-        /**
-         * Specifies the output format of the ColorPicker.
-         *
-         * If the input value is in a different format, it will be parsed into the specified output `format`.
-         *
-         * The supported values are:
-         * * `rgba` (default)
-         * * `hex`
-         */
-        this.format = 'rgba';
-        /**
-         * Specifies whether the ColorPicker should display a 'Clear color' button.
-         *
-         * @default true
-         */
-        this.clearButton = true;
-        /**
-         * Displays `Apply` and `Cancel` action buttons and color preview panes.
-         *
-         * When enabled, the component value will not change immediately upon
-         * color selection, but only after the `Apply` button is clicked.
-         *
-         * The `Cancel` button reverts the current selection to its
-         * previous state i.e. to the current value.
-         *
-         * @default false
-         */
-        this.preview = false;
-        /**
-         * Configures the layout of the `Apply` and `Cancel` action buttons.
-         *
-         * The possible values are:
-         * * `start`
-         * * `center`
-         * * `end` (default)
-         * * `stretch`
-         */
-        this.actionsLayout = 'end';
-        /**
-         * Fires each time the value is changed.
-         */
-        this.valueChange = new EventEmitter();
-        /**
-         * Fires each time the popup is about to open.
-         * This event is preventable. If you cancel it, the popup will remain closed.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close.
-         * This event is preventable. If you cancel it, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        /**
-         * Fires each time ColorPicker is focused.
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires each time the ColorPicker is blurred.
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * Fires when the user cancels the current color selection.
-         *
-         * Fires on preview pane or 'Cancel' button click.
-         */
-        this.cancel = new EventEmitter();
-        /**
-         * Fires each time the left side of the ColorPicker wrapper is clicked.
-         * The event is triggered regardless of whether a ColorPicker icon is set or not.
-         *
-         * The [ActiveColorClickEvent]({% slug api_inputs_activecolorclickevent %}) event provides the option to prevent the popup opening.
-         */
-        this.activeColorClick = new EventEmitter();
-        /**
-         * @hidden
-         * Fires each time the clear button is clicked.
-         */
-        this.clearButtonClick = new EventEmitter();
-        /**
-         * Fires each time the view is about to change.
-         * Used to provide a two-way binding for the `activeView` property.
-         */
-        this.activeViewChange = new EventEmitter();
-        /**
-         * Indicates whether the ColorPicker wrapper is focused.
-         */
-        this.isFocused = false;
-        /**
-         * @hidden
-         */
-        this.arrowDownIcon = caretAltDownIcon;
-        this._tabindex = 0;
-        this._popupSettings = { animate: true };
-        this._paletteSettings = {};
-        this._gradientSettings = { opacity: true, delay: 0 };
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._fillMode = 'solid';
-        this.subscriptions = new Subscription();
-        this.popupSubs = new Subscription();
-        this.notifyNgTouched = () => { };
-        this.notifyNgChanged = () => { };
-        this.domFocusListener = (event) => event.stopImmediatePropagation();
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        });
-        this.colorPickerId = nextColorPickerId++;
-    }
+    host;
+    popupService;
+    cdr;
+    localizationService;
+    ngZone;
+    renderer;
+    injector;
+    hostClasses = true;
     get focusedClass() {
         return this.isFocused;
     }
@@ -195,9 +66,21 @@ export class ColorPickerComponent {
     get hostTabindex() {
         return this.tabindex;
     }
+    direction;
+    role = 'combobox';
+    hasPopup = 'dialog';
     get isControlInvalid() {
         return (this.control?.invalid)?.toString();
     }
+    /**
+     * @hidden
+     */
+    focusableId;
+    /**
+     * Specifies the views that will be rendered in the popup.
+     * By default both the gradient and palette views will be rendered.
+     */
+    views = ['gradient', 'palette'];
     /**
      * @hidden
      */
@@ -207,6 +90,36 @@ export class ColorPickerComponent {
     get view() {
         return (this.views && this.views.length > 0) ? this.views[0] : null;
     }
+    /**
+     * Sets the initially active view in the popup. The property supports two-way binding.
+     *
+     * The supported values are:
+     * * `gradient`
+     * * `palette`
+     */
+    activeView;
+    /**
+     * Sets the read-only state of the ColorPicker.
+     *
+     * @default false
+     */
+    readonly = false;
+    /**
+     * Sets the disabled state of the ColorPicker. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorpicker#toc-managing-the-colorpicker-disabled-state-in-reactive-forms).
+     *
+     * @default false
+     */
+    disabled = false;
+    /**
+     * Specifies the output format of the ColorPicker.
+     *
+     * If the input value is in a different format, it will be parsed into the specified output `format`.
+     *
+     * The supported values are:
+     * * `rgba` (default)
+     * * `hex`
+     */
+    format = 'rgba';
     /**
      * Specifies the value of the initially selected color.
      */
@@ -243,6 +156,20 @@ export class ColorPickerComponent {
     get gradientSettings() {
         return this._gradientSettings;
     }
+    /**
+     * Defines the name of an [existing icon in the Kendo UI theme]({% slug icons %}).
+     * Provide only the name of the icon without the `k-icon` or the `k-i-` prefixes.
+     *
+     * For example, `pencil-tools` will be parsed to `k-icon k-i-pencil-tools`.
+     */
+    icon;
+    /**
+     * A CSS class name which displays an icon in the ColorPicker button.
+     * `iconClass` is compatible with the `ngClass` syntax.
+     *
+     * Takes precedence over `icon` if both are defined.
+     */
+    iconClass;
     /**
      * Defines an SVGIcon to be rendered within the button.
      * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
@@ -256,6 +183,12 @@ export class ColorPickerComponent {
     get svgIcon() {
         return this._svgIcon;
     }
+    /**
+     * Specifies whether the ColorPicker should display a 'Clear color' button.
+     *
+     * @default true
+     */
+    clearButton = true;
     /**
      * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      *
@@ -269,6 +202,28 @@ export class ColorPickerComponent {
     get tabindex() {
         return !this.disabled ? this._tabindex : undefined;
     }
+    /**
+     * Displays `Apply` and `Cancel` action buttons and color preview panes.
+     *
+     * When enabled, the component value will not change immediately upon
+     * color selection, but only after the `Apply` button is clicked.
+     *
+     * The `Cancel` button reverts the current selection to its
+     * previous state i.e. to the current value.
+     *
+     * @default false
+     */
+    preview = false;
+    /**
+     * Configures the layout of the `Apply` and `Cancel` action buttons.
+     *
+     * The possible values are:
+     * * `start`
+     * * `center`
+     * * `end` (default)
+     * * `stretch`
+     */
+    actionsLayout = 'end';
     /**
      * The size property specifies the padding of the ColorPicker internal elements
      * ([see example]({% slug appearance_colorpicker %}#toc-size)).
@@ -324,6 +279,55 @@ export class ColorPickerComponent {
     get fillMode() {
         return this._fillMode;
     }
+    /**
+     * Fires each time the value is changed.
+     */
+    valueChange = new EventEmitter();
+    /**
+     * Fires each time the popup is about to open.
+     * This event is preventable. If you cancel it, the popup will remain closed.
+     */
+    open = new EventEmitter();
+    /**
+     * Fires each time the popup is about to close.
+     * This event is preventable. If you cancel it, the popup will remain open.
+     */
+    close = new EventEmitter();
+    /**
+     * Fires each time ColorPicker is focused.
+     */
+    onFocus = new EventEmitter();
+    /**
+     * Fires each time the ColorPicker is blurred.
+     */
+    onBlur = new EventEmitter();
+    /**
+     * Fires when the user cancels the current color selection.
+     *
+     * Fires on preview pane or 'Cancel' button click.
+     */
+    cancel = new EventEmitter();
+    /**
+     * Fires each time the left side of the ColorPicker wrapper is clicked.
+     * The event is triggered regardless of whether a ColorPicker icon is set or not.
+     *
+     * The [ActiveColorClickEvent]({% slug api_inputs_activecolorclickevent %}) event provides the option to prevent the popup opening.
+     */
+    activeColorClick = new EventEmitter();
+    /**
+     * @hidden
+     * Fires each time the clear button is clicked.
+     */
+    clearButtonClick = new EventEmitter();
+    /**
+     * Fires each time the view is about to change.
+     * Used to provide a two-way binding for the `activeView` property.
+     */
+    activeViewChange = new EventEmitter();
+    /**
+     * Indicates whether the ColorPicker wrapper is focused.
+     */
+    isFocused = false;
     /**
      * Indicates whether the ColorPicker popup is open.
      */
@@ -352,6 +356,48 @@ export class ColorPickerComponent {
         }
         return '';
     }
+    /**
+     * Provides a reference to a container element inside the component markup.
+     * The container element references the location of the appended popup—
+     * for example, inside the component markup.
+     */
+    container;
+    activeColor;
+    popupTemplate;
+    flatColorPicker;
+    /**
+     * @hidden
+     */
+    arrowDownIcon = caretAltDownIcon;
+    popupRef;
+    _svgIcon;
+    _value;
+    _tabindex = 0;
+    _popupSettings = { animate: true };
+    _paletteSettings = {};
+    _gradientSettings = { opacity: true, delay: 0 };
+    _size = 'medium';
+    _rounded = 'medium';
+    _fillMode = 'solid';
+    dynamicRTLSubscription;
+    subscriptions = new Subscription();
+    popupSubs = new Subscription();
+    colorPickerId;
+    control;
+    constructor(host, popupService, cdr, localizationService, ngZone, renderer, injector) {
+        this.host = host;
+        this.popupService = popupService;
+        this.cdr = cdr;
+        this.localizationService = localizationService;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.injector = injector;
+        validatePackage(packageMetadata);
+        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+        this.colorPickerId = nextColorPickerId++;
+    }
     ngOnInit() {
         const defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
         const settingsPalette = this._paletteSettings.palette;
@@ -682,6 +728,8 @@ export class ColorPickerComponent {
         }
         return this.gradientSettings.opacity ? inputs.opacityInput.numericInput : inputs.blueInput.numericInput;
     }
+    notifyNgTouched = () => { };
+    notifyNgChanged = () => { };
     handleDomEvents(action, events) {
         const hostElement = this.host.nativeElement;
         events.forEach(ev => hostElement[`${action}EventListener`](ev, this.domFocusListener, true));
@@ -715,6 +763,7 @@ export class ColorPickerComponent {
             }));
         });
     }
+    domFocusListener = (event) => event.stopImmediatePropagation();
     handleHostId() {
         const hostElement = this.host.nativeElement;
         const existingId = hostElement.getAttribute('id');
@@ -727,26 +776,25 @@ export class ColorPickerComponent {
             this.focusableId = id;
         }
     }
-}
-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, 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)
-        }, {
-            provide: KendoInput,
-            useExisting: forwardRef(() => ColorPickerComponent)
-        },
-        ColorPickerLocalizationService,
-        {
-            provide: LocalizationService,
-            useExisting: ColorPickerLocalizationService
-        },
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.colorpicker'
-        }
-    ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "activeColor", first: true, predicate: ["activeColor"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "flatColorPicker", first: true, predicate: ["flatColorPicker"], descendants: true }], exportAs: ["kendoColorPicker"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1.PopupService }, { token: i0.ChangeDetectorRef }, { token: i2.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerComponent, isStandalone: true, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", clearButtonClick: "clearButtonClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [{
+                multi: true,
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ColorPickerComponent)
+            }, {
+                provide: KendoInput,
+                useExisting: forwardRef(() => ColorPickerComponent)
+            },
+            ColorPickerLocalizationService,
+            {
+                provide: LocalizationService,
+                useExisting: ColorPickerLocalizationService
+            },
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.colorpicker'
+            }
+        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "activeColor", first: true, predicate: ["activeColor"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "flatColorPicker", first: true, predicate: ["flatColorPicker"], descendants: true }], exportAs: ["kendoColorPicker"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoColorPickerLocalizedMessages
             i18n-colorPickerNoColor="kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty."
             colorPickerNoColor="Colorpicker no color chosen"
@@ -820,6 +868,8 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             type="button"
             icon="caret-alt-down"
             [svgIcon]="arrowDownIcon"
+            [fillMode]="fillMode"
+            rounded="none"
             aria-hidden="true"
             class="k-input-button"
         >
@@ -847,7 +897,8 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
         </ng-template>
         <ng-container #container></ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPickerComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoColorPicker',
@@ -943,6 +994,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type="button"
             icon="caret-alt-down"
             [svgIcon]="arrowDownIcon"
+            [fillMode]="fillMode"
+            rounded="none"
             aria-hidden="true"
             class="k-input-button"
         >

package/{esm2020 → esm2022}/colorpicker/contrast-validation.component.mjs

@@ -14,10 +14,14 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class ContrastValidationComponent {
+    localization;
+    type;
+    pass;
+    value;
+    checkIcon = checkIcon;
+    xCircleIcon = xCircleIcon;
     constructor(localization) {
         this.localization = localization;
-        this.checkIcon = checkIcon;
-        this.xCircleIcon = xCircleIcon;
     }
     get passMessage() {
         return this.localization.get('passContrast');
@@ -29,9 +33,8 @@ export class ContrastValidationComponent {
         const ratio = this.type === 'AA' ? AA_RATIO : AAA_RATIO;
         return `${this.type}: ${ratio.toFixed(1)}`;
     }
-}
-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, isStandalone: true, selector: "[kendoContrastValidation]", inputs: { type: "type", pass: "pass", value: "value" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContrastValidationComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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">
@@ -44,7 +47,8 @@ ContrastValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
             </span>
         </ng-container>
     `, 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: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContrastValidationComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector

package/{esm2020 → esm2022}/colorpicker/contrast.component.mjs

@@ -16,10 +16,13 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class ContrastComponent {
+    localization;
+    value;
+    ratio;
+    checkIcon = checkIcon;
+    xCircleIcon = xCircleIcon;
     constructor(localization) {
         this.localization = localization;
-        this.checkIcon = checkIcon;
-        this.xCircleIcon = xCircleIcon;
     }
     get formatedRatio() {
         return this.contrastRatio.toFixed(2);
@@ -37,9 +40,8 @@ export class ContrastComponent {
         const contrast = getContrastFromTwoRGBAs(getRGBA(this.value), getRGBA(this.ratio));
         return contrast;
     }
-}
-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, isStandalone: true, selector: "[kendoContrastTool]", inputs: { value: "value", ratio: "ratio" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContrastComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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">
@@ -63,7 +65,8 @@ ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             [pass]="satisfiesAAACondition">
         </div>
     `, 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: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContrastComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector

package/{esm2020 → esm2022}/colorpicker/events/active-color-click-event.mjs

@@ -33,13 +33,14 @@
  * ```
  */
 export class ActiveColorClickEvent {
+    color;
+    openPrevented = false;
     /**
      * @hidden
      * @param color Represents the current value of the ColorPicker.
      */
     constructor(color) {
         this.color = color;
-        this.openPrevented = false;
     }
     /**
      * Prevents the opening of the popup.

package/{esm2020 → esm2022}/colorpicker/events/cancel-event.mjs

@@ -7,6 +7,10 @@ import { PreventableEvent } from "@progress/kendo-angular-common";
  * Arguments for the `cancel` event of the ColorPicker and FlatColorPicker components.
  */
 export class ColorPickerCancelEvent extends PreventableEvent {
+    /**
+     * The DOM event that triggered the `cancel` event.
+     */
+    originalEvent;
     constructor(originalEvent) {
         super();
         this.originalEvent = originalEvent;

package/{esm2020 → esm2022}/colorpicker/flatcolorpicker-actions.component.mjs

@@ -10,12 +10,15 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class FlatColorPickerActionButtonsComponent {
+    localizationService;
+    hostClasses = true;
+    innerTabIndex = -1;
+    actionButtonClick = new EventEmitter();
+    tabOut = new EventEmitter();
+    firstButton;
+    lastButton;
     constructor(localizationService) {
         this.localizationService = localizationService;
-        this.hostClasses = true;
-        this.innerTabIndex = -1;
-        this.actionButtonClick = new EventEmitter();
-        this.tabOut = new EventEmitter();
     }
     getText(text) {
         return this.localizationService.get(text);
@@ -27,9 +30,8 @@ export class FlatColorPickerActionButtonsComponent {
         };
         this.actionButtonClick.emit(args);
     }
-}
-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, 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerActionButtonsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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')"
@@ -46,7 +48,8 @@ FlatColorPickerActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVer
             (keydown.tab)="$event.preventDefault(); tabOut.emit();"
         >{{getText('applyButton')}}</button>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FlatColorPickerActionButtonsComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerActionButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector