@progress/kendo-angular-inputs 8.0.0-dev.202112161434 → 8.0.0-dev.202201121416

package/dist/es2015/colorpicker/colorpicker.component.js

@@ -4,21 +4,23 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 var ColorPickerComponent_1;
-import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ElementRef, TemplateRef, ViewContainerRef, forwardRef, ChangeDetectorRef, NgZone } from '@angular/core';
+import { take } from 'rxjs/operators';
+import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ElementRef, TemplateRef, ViewContainerRef, forwardRef, ChangeDetectorRef, NgZone, Renderer2 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Subscription } from 'rxjs';
 import { FlatColorPickerComponent } from './flatcolorpicker.component';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { validatePackage } from '@progress/kendo-licensing';
-import { Keys, KendoInput } from '@progress/kendo-angular-common';
+import { Keys, KendoInput, isChanged, closest, guid } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { packageMetadata } from '../package-metadata';
 import { PALETTEPRESETS } from './models';
 import { ActiveColorClickEvent, ColorPickerCloseEvent, ColorPickerOpenEvent } from './events';
 import { parseColor } from './utils';
-import { isPresent } from '../common/utils';
+import { getStylingClasses, isPresent } from '../common/utils';
 import { ColorPickerLocalizationService } from './localization/colorpicker-localization.service';
 import { DEFAULT_ACCESSIBLE_PRESET, DEFAULT_PRESET } from './constants';
-let serial = 0;
+const DOM_FOCUS_EVENTS = ['focus', 'blur'];
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
  *
@@ -26,16 +28,15 @@ let serial = 0;
  * which are rendered in its popup. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
 let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
-    constructor(popupService, cdr, localizationService, ngZone) {
+    constructor(host, popupService, cdr, localizationService, ngZone, renderer) {
+        this.host = host;
         this.popupService = popupService;
         this.cdr = cdr;
         this.localizationService = localizationService;
         this.ngZone = ngZone;
+        this.renderer = renderer;
         this.hostClasses = true;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-colorpicker-${serial++}`;
+        this.role = 'listbox';
         /**
          * Specifies the views that will be rendered in the popup.
          * By default both the gradient and palette views will be rendered.
@@ -131,17 +132,50 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
          * 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;
         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.notifyNgTouched = () => { };
         this.notifyNgChanged = () => { };
+        this.domFocusListener = (event) => event.stopImmediatePropagation();
         validatePackage(packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
     }
+    get focusedClass() {
+        return this.isFocused;
+    }
+    get disabledClass() {
+        return this.disabled;
+    }
+    get ariaReadonly() {
+        return this.readonly;
+    }
+    get ariaExpanded() {
+        return this.isOpen;
+    }
+    get hostTabindex() {
+        return this.tabindex;
+    }
+    /**
+     * @hidden
+     */
+    set view(view) {
+        this.views = [view];
+    }
+    get view() {
+        return (this.views && this.views.length > 0) ? this.views[0] : null;
+    }
     /**
      * Specifies the value of the initially selected color.
      */
@@ -191,6 +225,58 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     get tabindex() {
         return !this.disabled ? this._tabindex : undefined;
     }
+    /**
+     * The size property specifies the font size and line height of the ColorPicker
+     * ([see example]({% slug appearance_colorpicker %}#toc-size)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    set size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * The rounded property specifies the border radius of the ColorPicker
+     * ([see example]({% slug appearance_colorpicker %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     */
+    set rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * The fillMode property specifies the background and border styles of the ColorPicker
+     * ([see example]({% slug appearance_colorpicker %}#toc-fillMode)).
+     *
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `null`
+     */
+    set fillMode(fillMode) {
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     /**
      * Indicates whether the ColorPicker popup is open.
      */
@@ -220,6 +306,15 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
             columns: this._paletteSettings.columns || presetColumns || 10
         };
     }
+    ngAfterViewInit() {
+        const stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+        this.setHostElementAriaLabel();
+        this.handleHostId();
+        this.initDomEvents();
+    }
     ngOnChanges(changes) {
         if (changes.format && changes.format.currentValue === 'name') {
             this.activeView = 'palette';
@@ -228,18 +323,17 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
             this.format = 'rgba';
             this.value = parseColor(this.value, this.format, this.gradientSettings.opacity);
         }
+        if (isChanged('value', changes)) {
+            this.setHostElementAriaLabel();
+        }
     }
     ngOnDestroy() {
         this.closePopup();
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
         }
-    }
-    /**
-     * @hidden
-     */
-    get colorPickerAriaLabel() {
-        return this.value ? this.value : this.localizationService.get('colorPickerNoColor');
+        this.subscriptions.unsubscribe();
+        this.handleDomEvents('remove', DOM_FOCUS_EVENTS);
     }
     /**
      * @hidden
@@ -251,28 +345,33 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
      * @hidden
      */
     togglePopup() {
-        this.toggleWithEvents(!this.isOpen);
         this.focus();
+        this.toggleWithEvents(!this.isOpen);
     }
     /**
      * @hidden
      */
-    handleActiveColorClick() {
+    handleWrapperClick(event) {
+        if (this.disabled) {
+            return;
+        }
         this.focus();
-        const event = new ActiveColorClickEvent(this.value);
-        this.activeColorClick.emit(event);
-        if (!event.isOpenPrevented() || this.isOpen) {
-            this.togglePopup();
+        if (closest(event.target, (element) => element === this.activeColor.nativeElement)) {
+            const event = new ActiveColorClickEvent(this.value);
+            this.activeColorClick.emit(event);
+            if (!event.isOpenPrevented() || this.isOpen) {
+                this.toggleWithEvents(!this.isOpen);
+            }
+            return;
         }
+        this.toggleWithEvents(!this.isOpen);
     }
     /**
      * Focuses the wrapper of the ColorPicker.
      */
     focus() {
-        if (this.disabled) {
-            return;
-        }
-        this.wrapper.nativeElement.focus();
+        this.isFocused = true;
+        this.host.nativeElement.focus();
     }
     /**
      * @hidden
@@ -281,14 +380,18 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         if (this.isFocused) {
             return;
         }
-        this.isFocused = true;
-        this.onFocus.emit();
+        this.ngZone.run(() => {
+            this.focus();
+            this.onFocus.emit();
+        });
     }
     /**
      * Blurs the ColorPicker.
      */
     blur() {
-        this.wrapper.nativeElement.blur();
+        this.isFocused = false;
+        this.host.nativeElement.blur();
+        this.notifyNgTouched();
     }
     /**
      * @hidden
@@ -297,9 +400,16 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         if (this.isOpen) {
             return;
         }
-        this.isFocused = false;
-        this.onBlur.emit();
-        this.notifyNgTouched();
+        this.ngZone.run(() => {
+            this.onBlur.emit();
+            this.isFocused = false;
+        });
+    }
+    /**
+     * @hidden
+     */
+    arrowButtonMouseDown(ev) {
+        ev.preventDefault();
     }
     /**
      * Clears the value of the ColorPicker.
@@ -309,6 +419,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
             return;
         }
         this._value = undefined;
+        this.setHostElementAriaLabel();
         this.notifyNgChanged(undefined);
     }
     /**
@@ -336,6 +447,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         if (valueChange) {
             this.value = parsedColor;
             this.valueChange.emit(parsedColor);
+            this.setHostElementAriaLabel();
             this.notifyNgChanged(parsedColor);
         }
     }
@@ -382,7 +494,9 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     handleWrapperKeyDown(event) {
         if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.Enter) {
             event.preventDefault();
-            this.toggleWithEvents(true);
+            this.ngZone.run(() => {
+                this.toggleWithEvents(true);
+            });
         }
     }
     /**
@@ -391,14 +505,14 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     handlePopupKeyDown(event) {
         if (event.keyCode === Keys.Escape) {
             this.toggleWithEvents(false);
-            this.wrapper.nativeElement.focus();
+            this.host.nativeElement.focus();
         }
         if (event.keyCode === Keys.Tab) {
             const currentElement = event.shiftKey ? this.firstFocusableElement.nativeElement : this.lastFocusableElement.nativeElement;
             const nextElement = event.shiftKey ? this.lastFocusableElement.nativeElement : this.firstFocusableElement.nativeElement;
             if (event.target === currentElement) {
                 event.preventDefault();
-                nextElement.nativeElement.focus();
+                nextElement.focus();
             }
         }
     }
@@ -409,10 +523,24 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     isEmpty() {
         return false;
     }
+    setHostElementAriaLabel() {
+        const ariaLabelValue = `${this.value ? this.value : this.localizationService.get('colorPickerNoColor')}`;
+        this.renderer.setAttribute(this.host.nativeElement, 'aria-label', ariaLabelValue);
+    }
+    handleClasses(value, input) {
+        const elem = this.host.nativeElement;
+        const classes = getStylingClasses('picker', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
     popupBlurInvalid(ev) {
-        const focusInPopupElement = this.popupRef.popupElement.contains(ev.relatedTarget);
-        const wrapperClicked = ev.relatedTarget === this.wrapper.nativeElement;
-        return !this.isFocused || wrapperClicked || focusInPopupElement;
+        const focusInFlatColorPickerElement = this.popupRef.popupElement.contains(ev.relatedTarget);
+        const hostClicked = closest(ev.relatedTarget, (element) => element === this.host.nativeElement);
+        return hostClicked || focusInFlatColorPickerElement;
     }
     toggleWithEvents(open) {
         const sameState = this.isOpen === open;
@@ -436,12 +564,12 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         }
     }
     focusFirstElement() {
-        this.ngZone.runOutsideAngular(() => {
-            setTimeout(() => {
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            if (this.flatColorPicker) {
                 const elementToFocus = this.flatColorPicker.gradient ? this.flatColorPicker.gradient.gradientDragHandle :
                     this.flatColorPicker.palette.host;
                 elementToFocus.nativeElement.focus();
-            });
+            }
         });
     }
     openPopup() {
@@ -449,7 +577,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
         const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
         this.popupRef = this.popupService.open({
-            anchor: this.wrapper,
+            anchor: this.activeColor,
             animate: this.popupSettings.animate,
             appendTo: this.popupSettings.appendTo,
             popupAlign: popupPosition,
@@ -461,7 +589,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         this.popupRef.popupAnchorViewportLeave.subscribe(() => {
             this.toggleWithEvents(false);
             if (!this.isOpen) {
-                this.wrapper.nativeElement.focus({
+                this.host.nativeElement.focus({
                     preventScroll: true
                 });
             }
@@ -489,23 +617,101 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         }
         return this.gradientSettings.opacity ? this.flatColorPicker.gradient.inputs.opacityInput.numericInput : this.flatColorPicker.gradient.inputs.blueInput;
     }
+    handleDomEvents(action, events) {
+        const hostElement = this.host.nativeElement;
+        events.forEach(ev => hostElement[`${action}EventListener`](ev, this.domFocusListener, true));
+    }
+    initDomEvents() {
+        if (!this.host) {
+            return;
+        }
+        let hostElement = this.host.nativeElement;
+        this.ngZone.runOutsideAngular(() => {
+            this.subscriptions.add(this.renderer.listen(hostElement, 'focusin', () => {
+                this.handleWrapperFocus();
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'focusout', (event) => {
+                const closestPopup = this.popupRef ?
+                    closest(event.relatedTarget, (element) => element === this.flatColorPicker.host.nativeElement) :
+                    false;
+                const closestWrapper = closest(event.relatedTarget, (element) => element === this.host.nativeElement);
+                if (!closestPopup && !closestWrapper) {
+                    this.handleWrapperBlur();
+                }
+            }));
+            this.handleDomEvents('add', DOM_FOCUS_EVENTS);
+            this.subscriptions.add(this.renderer.listen(hostElement, 'keydown', (event) => {
+                this.handleWrapperKeyDown(event);
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'click', (event) => {
+                this.ngZone.run(() => {
+                    this.handleWrapperClick(event);
+                });
+            }));
+        });
+    }
+    handleHostId() {
+        const hostElement = this.host.nativeElement;
+        const existingId = hostElement.getAttribute('id');
+        if (existingId) {
+            this.focusableId = existingId;
+        }
+        else {
+            const id = `k-${guid()}`;
+            hostElement.setAttribute('id', id);
+            this.focusableId = id;
+        }
+    }
 };
 tslib_1.__decorate([
     HostBinding('class.k-colorpicker'),
+    HostBinding('class.k-icon-picker'),
+    HostBinding('class.k-picker'),
     tslib_1.__metadata("design:type", Boolean)
 ], ColorPickerComponent.prototype, "hostClasses", void 0);
+tslib_1.__decorate([
+    HostBinding('class.k-focus'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], ColorPickerComponent.prototype, "focusedClass", null);
+tslib_1.__decorate([
+    HostBinding('attr.aria-disabled'),
+    HostBinding('class.k-disabled'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], ColorPickerComponent.prototype, "disabledClass", null);
+tslib_1.__decorate([
+    HostBinding('attr.aria-readonly'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], ColorPickerComponent.prototype, "ariaReadonly", null);
+tslib_1.__decorate([
+    HostBinding('attr.aria-expanded'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], ColorPickerComponent.prototype, "ariaExpanded", null);
+tslib_1.__decorate([
+    HostBinding('attr.tabindex'),
+    tslib_1.__metadata("design:type", Number),
+    tslib_1.__metadata("design:paramtypes", [])
+], ColorPickerComponent.prototype, "hostTabindex", null);
 tslib_1.__decorate([
     HostBinding('attr.dir'),
     tslib_1.__metadata("design:type", String)
 ], ColorPickerComponent.prototype, "direction", void 0);
 tslib_1.__decorate([
-    Input(),
+    HostBinding('attr.role'),
     tslib_1.__metadata("design:type", String)
-], ColorPickerComponent.prototype, "focusableId", void 0);
+], ColorPickerComponent.prototype, "role", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Array)
 ], ColorPickerComponent.prototype, "views", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ColorPickerComponent.prototype, "view", null);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
@@ -567,6 +773,21 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
 ], ColorPickerComponent.prototype, "actionsLayout", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ColorPickerComponent.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ColorPickerComponent.prototype, "rounded", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ColorPickerComponent.prototype, "fillMode", null);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -604,9 +825,9 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", ViewContainerRef)
 ], ColorPickerComponent.prototype, "container", void 0);
 tslib_1.__decorate([
-    ViewChild('wrapper', { static: true }),
+    ViewChild('activeColor', { static: true }),
     tslib_1.__metadata("design:type", ElementRef)
-], ColorPickerComponent.prototype, "wrapper", void 0);
+], ColorPickerComponent.prototype, "activeColor", void 0);
 tslib_1.__decorate([
     ViewChild('popupTemplate', { static: true }),
     tslib_1.__metadata("design:type", TemplateRef)
@@ -672,35 +893,21 @@ ColorPickerComponent = ColorPickerComponent_1 = tslib_1.__decorate([
             i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
             cancelButton="Cancel">
         </ng-container>
-        <span
-            #wrapper
-            [ngClass]="{
-                'k-picker-wrap': true,
-                'k-state-disabled': this.disabled,
-                'k-state-focused': this.isFocused
-            }"
-            role="listbox"
-            [attr.aria-expanded]="isOpen"
-            [attr.aria-readonly]="readonly"
-            [attr.aria-disabled]="disabled"
-            [attr.aria-label]="colorPickerAriaLabel"
-            [id]="focusableId"
-            [attr.tabindex]="tabindex"
-            (focus)="handleWrapperFocus()"
-            (blur)="handleWrapperBlur()"
-            (mousedown)="$event.preventDefault()"
-            (keydown)="handleWrapperKeyDown($event)"
-        >
-            <span *ngIf="!iconStyles" class="k-selected-color" [style.background]="value" (click)="handleActiveColorClick()">
-                <span class="k-icon k-i-line" *ngIf="!value"></span>
-            </span>
-            <span *ngIf="iconStyles" class="k-tool-icon" [ngClass]="iconStyles" (click)="handleActiveColorClick()">
-                <span class="k-selected-color" [style.background-color]="value"></span>
-            </span>
-            <span class="k-select" (click)="togglePopup()">
-                <span class="k-icon k-i-arrow-s"></span>
+        <span #activeColor class="k-input-inner">
+            <span
+                class="k-value-icon k-color-preview"
+                [ngClass]="{'k-icon-color-preview': iconStyles, 'k-no-color': !value}">
+                <span *ngIf="iconClass || icon" class="k-color-preview-icon k-icon" [ngClass]="iconStyles"></span>
+                <span class="k-color-preview-mask" [style.background-color]="value"></span>
             </span>
         </span>
+        <button
+            #arrowButton
+            tabindex="-1"
+            role="button"
+            class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                <span class="k-button-icon k-icon k-i-arrow-s"></span>
+        </button>
         <ng-template #popupTemplate>
             <kendo-flatcolorpicker
                 #flatColorPicker
@@ -713,8 +920,8 @@ ColorPickerComponent = ColorPickerComponent_1 = tslib_1.__decorate([
                 [gradientSettings]="gradientSettings"
                 [paletteSettings]="paletteSettings"
                 [clearButton]="clearButton"
-                (focusout)="handlePopupBlur($event)"
                 (cancel)="handleCancelEvent($event)"
+                (focusout)="handlePopupBlur($event)"
                 (valueChange)="handleValueChange($event)"
                 (keydown)="handlePopupKeyDown($event)"
                 (activeViewChange)="activeViewChange.emit($event)"
@@ -724,9 +931,11 @@ ColorPickerComponent = ColorPickerComponent_1 = tslib_1.__decorate([
         <ng-container #container></ng-container>
     `
     }),
-    tslib_1.__metadata("design:paramtypes", [PopupService,
+    tslib_1.__metadata("design:paramtypes", [ElementRef,
+        PopupService,
         ChangeDetectorRef,
         LocalizationService,
-        NgZone])
+        NgZone,
+        Renderer2])
 ], ColorPickerComponent);
 export { ColorPickerComponent };

package/dist/es2015/colorpicker/flatcolorpicker-actions.component.js

@@ -44,12 +44,12 @@ FlatColorPickerActionButtonsComponent = tslib_1.__decorate([
         selector: '[kendoFlatColorPickerActionButtons]',
         template: `
         <button
-            class="k-coloreditor-cancel k-button"
+            class="k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base"
             [attr.title]="getText('cancelButton')"
             (click)="onActionButtonClick('cancel', $event)"
         >{{getText('cancelButton')}}</button>
         <button #last
-            class="k-coloreditor-apply k-button k-primary"
+            class="k-coloreditor-apply k-button k-button-md k-button-solid k-button-solid-primary"
             [attr.title]="getText('applyButton')"
             (click)="onActionButtonClick('apply', $event)"
         >{{getText('applyButton')}}</button>

package/dist/es2015/colorpicker/flatcolorpicker-header.component.js

@@ -88,7 +88,7 @@ FlatColorPickerHeaderComponent = tslib_1.__decorate([
                 <button *ngFor="let view of views"
                     #viewButtons
                     (click)="onViewButtonClick(view)"
-                    class="k-button k-icon-button k-flat"
+                    class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
@@ -105,7 +105,7 @@ FlatColorPickerHeaderComponent = tslib_1.__decorate([
         <div class="k-coloreditor-header-actions k-hstack">
             <button *ngIf="clearButton"
                 #clearButton
-                class="k-button k-icon-button k-flat k-coloreditor-reset"
+                class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset"
                 [attr.aria-label]="getText('clearButton')"
                 [attr.title]="getText('clearButton')"
                 (click)="clearButtonClick.emit()">

package/dist/es2015/colorpicker/flatcolorpicker.component.d.ts

@@ -19,8 +19,8 @@ import { FlatColorPickerActionButtonsComponent } from './flatcolorpicker-actions
  * through a gradient that renders an hsv canvas. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
 export declare class FlatColorPickerComponent implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor {
+    host: ElementRef;
     private service;
-    private host;
     private localizationService;
     private cdr;
     private renderer;
@@ -140,7 +140,7 @@ export declare class FlatColorPickerComponent implements OnInit, AfterViewInit,
     private _paletteSettings;
     private dynamicRTLSubscription;
     private subscriptions;
-    constructor(service: FlatColorPickerService, host: ElementRef, localizationService: LocalizationService, cdr: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone);
+    constructor(host: ElementRef, service: FlatColorPickerService, localizationService: LocalizationService, cdr: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;