@progress/kendo-angular-inputs 13.2.1-develop.11 → 13.2.1-develop.13

package/esm2020/colorpicker/constants.mjs

@@ -0,0 +1,40 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export const DEFAULT_OUTPUT_FORMAT = 'rgba';
+/**
+ * @hidden
+ */
+export const DEFAULT_GRADIENT_BACKGROUND_COLOR = 'rgba(255, 0, 0, 1)';
+/**
+ * @hidden
+ */
+export const DRAGHANDLE_MOVE_SPEED = 5;
+/**
+ * @hidden
+ */
+export const DRAGHANDLE_MOVE_SPEED_SMALL_STEP = 2;
+/**
+ * @hidden
+ */
+export const AAA_RATIO = 7.0;
+/**
+ * @hidden
+ */
+export const AA_RATIO = 4.5;
+/**
+ * @hidden
+ */
+export const DEFAULT_PRESET = 'office';
+/**
+ * @hidden
+ */
+export const DEFAULT_ACCESSIBLE_PRESET = 'accessible';
+/**
+ * @hidden
+ */
+export const STEP_COUNT = 16;

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

@@ -0,0 +1,72 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+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 * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@progress/kendo-angular-icons";
+import * as i3 from "@angular/common";
+/**
+ * @hidden
+ */
+export class ContrastValidationComponent {
+    constructor(localization) {
+        this.localization = localization;
+        this.checkIcon = checkIcon;
+        this.xCircleIcon = xCircleIcon;
+    }
+    get passMessage() {
+        return this.localization.get('passContrast');
+    }
+    get failMessage() {
+        return this.localization.get('failContrast');
+    }
+    get contrastText() {
+        const ratio = this.type === 'AA' ? AA_RATIO : AAA_RATIO;
+        return `${this.type}: ${ratio.toFixed(1)}`;
+    }
+}
+ContrastValidationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContrastValidationComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ContrastValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ContrastValidationComponent, 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">
+                {{passMessage}}
+                <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
+            </span>
+            <span class="k-contrast-validation k-text-error" *ngIf="!pass">
+                {{failMessage}}
+                <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
+            </span>
+        </ng-container>
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContrastValidationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoContrastValidation]',
+                    template: `
+        <span>{{contrastText}}</span>
+        <ng-container *ngIf="value">
+            <span class="k-contrast-validation k-text-success" *ngIf="pass">
+                {{passMessage}}
+                <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
+            </span>
+            <span class="k-contrast-validation k-text-error" *ngIf="!pass">
+                {{failMessage}}
+                <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
+            </span>
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { type: [{
+                type: Input
+            }], pass: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });

package/esm2020/colorpicker/contrast.component.mjs

@@ -0,0 +1,100 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input } from '@angular/core';
+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 * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@progress/kendo-angular-icons";
+import * as i3 from "./contrast-validation.component";
+import * as i4 from "@angular/common";
+/**
+ * @hidden
+ */
+export class ContrastComponent {
+    constructor(localization) {
+        this.localization = localization;
+        this.checkIcon = checkIcon;
+        this.xCircleIcon = xCircleIcon;
+    }
+    get formatedRatio() {
+        return this.contrastRatio.toFixed(2);
+    }
+    get contrastRatioText() {
+        return `${this.localization.get('contrastRatio')}: ${this.value ? this.formatedRatio : 'n/a'}`;
+    }
+    get satisfiesAACondition() {
+        return this.contrastRatio >= AA_RATIO;
+    }
+    get satisfiesAAACondition() {
+        return this.contrastRatio >= AAA_RATIO;
+    }
+    get contrastRatio() {
+        const contrast = getContrastFromTwoRGBAs(getRGBA(this.value), getRGBA(this.ratio));
+        return contrast;
+    }
+}
+ContrastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContrastComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ContrastComponent, 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">
+                <span class="k-contrast-validation k-text-success" *ngIf="satisfiesAACondition">
+                    <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
+                    <kendo-icon-wrapper *ngIf="satisfiesAAACondition" name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
+                </span>
+                <span class="k-contrast-validation k-text-error" *ngIf="!satisfiesAACondition">
+                    <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
+                </span>
+            </ng-container>
+        </div>
+        <div kendoContrastValidation
+            type="AA"
+            [value]="value"
+            [pass]="satisfiesAACondition">
+        </div>
+        <div kendoContrastValidation
+            type="AAA"
+            [value]="value"
+            [pass]="satisfiesAAACondition">
+        </div>
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i3.ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContrastComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoContrastTool]',
+                    template: `
+        <div class="k-contrast-ratio">
+            <span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
+            <ng-container *ngIf="value">
+                <span class="k-contrast-validation k-text-success" *ngIf="satisfiesAACondition">
+                    <kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
+                    <kendo-icon-wrapper *ngIf="satisfiesAAACondition" name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
+                </span>
+                <span class="k-contrast-validation k-text-error" *ngIf="!satisfiesAACondition">
+                    <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
+                </span>
+            </ng-container>
+        </div>
+        <div kendoContrastValidation
+            type="AA"
+            [value]="value"
+            [pass]="satisfiesAACondition">
+        </div>
+        <div kendoContrastValidation
+            type="AAA"
+            [value]="value"
+            [pass]="satisfiesAAACondition">
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { value: [{
+                type: Input
+            }], ratio: [{
+                type: Input
+            }] } });

package/esm2020/colorpicker/events/active-color-click-event.mjs

@@ -0,0 +1,58 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * 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.
+ *
+ * Provides information about the current active color and gives the option to prevent the opening of the popup.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *       <kendo-colorpicker
+ *           [icon]="'edit-tools'"
+ *           [value]="'#900'"
+ *           (activeColorClick)="handleActiveColorClick($event)"
+ *       >
+ *       </kendo-colorpicker>
+ *   `
+ * })
+ * class AppComponent {
+ *     public handleActiveColorClick(event: ActiveColorClickEvent): void {
+ *         event.preventOpen();
+ *
+ *         console.log('Open prevented:', event.isOpenPrevented());
+ *         console.log('Current color:', event.color);
+ *     }
+ *  }
+ * ```
+ */
+export class ActiveColorClickEvent {
+    /**
+     * @hidden
+     * @param color Represents the current value of the ColorPicker.
+     */
+    constructor(color) {
+        this.color = color;
+        this.openPrevented = false;
+    }
+    /**
+     * Prevents the opening of the popup.
+     */
+    preventOpen() {
+        this.openPrevented = true;
+    }
+    /**
+     * Returns `true` if the popup opening is prevented by any of its subscribers.
+     *
+     * @returns - Returns `true` if the open action was prevented. Otherwise, returns `false`.
+     */
+    isOpenPrevented() {
+        return this.openPrevented;
+    }
+}

package/esm2020/colorpicker/events/cancel-event.mjs

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from "@progress/kendo-angular-common";
+/**
+ * Arguments for the `cancel` event of the ColorPicker and FlatColorPicker components.
+ */
+export class ColorPickerCancelEvent extends PreventableEvent {
+    constructor(originalEvent) {
+        super();
+        this.originalEvent = originalEvent;
+    }
+}

package/esm2020/colorpicker/events/close-event.mjs

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from "@progress/kendo-angular-common";
+/**
+ * Arguments for the `close` event of the ColorPicker component.
+ */
+export class ColorPickerCloseEvent extends PreventableEvent {
+}

package/esm2020/colorpicker/events/kendo-drag-event.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2020/colorpicker/events/open-event.mjs

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from "@progress/kendo-angular-common";
+/**
+ * Arguments for the `open` event of the ColorPicker component.
+ */
+export class ColorPickerOpenEvent extends PreventableEvent {
+}

package/esm2020/colorpicker/events.mjs

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export * from './events/cancel-event';
+export * from './events/close-event';
+export * from './events/open-event';
+export * from './events/active-color-click-event';

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

@@ -0,0 +1,93 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, EventEmitter, Output, ElementRef, ViewChild, Input } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+/**
+ * @hidden
+ */
+export class FlatColorPickerActionButtonsComponent {
+    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);
+    }
+    onActionButtonClick(type, ev) {
+        const args = {
+            target: type,
+            originalEvent: ev
+        };
+        this.actionButtonClick.emit(args);
+    }
+}
+FlatColorPickerActionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatColorPickerActionButtonsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FlatColorPickerActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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: `
+        <button #first
+            class="k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base"
+            [attr.title]="getText('cancelButton')"
+            (click)="onActionButtonClick('cancel', $event)"
+            type="button"
+            [tabindex]="innerTabIndex.toString()"
+        >{{getText('cancelButton')}}</button>
+        <button #last
+            class="k-coloreditor-apply k-button k-button-md k-button-solid k-button-solid-primary"
+            [attr.title]="getText('applyButton')"
+            (click)="onActionButtonClick('apply', $event)"
+            type="button"
+            [tabindex]="innerTabIndex.toString()"
+            (keydown.tab)="$event.preventDefault(); tabOut.emit();"
+        >{{getText('applyButton')}}</button>
+    `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatColorPickerActionButtonsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoFlatColorPickerActionButtons]',
+                    template: `
+        <button #first
+            class="k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base"
+            [attr.title]="getText('cancelButton')"
+            (click)="onActionButtonClick('cancel', $event)"
+            type="button"
+            [tabindex]="innerTabIndex.toString()"
+        >{{getText('cancelButton')}}</button>
+        <button #last
+            class="k-coloreditor-apply k-button k-button-md k-button-solid k-button-solid-primary"
+            [attr.title]="getText('applyButton')"
+            (click)="onActionButtonClick('apply', $event)"
+            type="button"
+            [tabindex]="innerTabIndex.toString()"
+            (keydown.tab)="$event.preventDefault(); tabOut.emit();"
+        >{{getText('applyButton')}}</button>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-coloreditor-footer']
+            }, {
+                type: HostBinding,
+                args: ['class.k-actions']
+            }, {
+                type: HostBinding,
+                args: ['class.k-actions-horizontal']
+            }], innerTabIndex: [{
+                type: Input
+            }], actionButtonClick: [{
+                type: Output
+            }], tabOut: [{
+                type: Output
+            }], firstButton: [{
+                type: ViewChild,
+                args: ['first', { read: ElementRef }]
+            }], lastButton: [{
+                type: ViewChild,
+                args: ['last', { read: ElementRef }]
+            }] } });

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

@@ -0,0 +1,217 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
+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 * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@progress/kendo-angular-buttons";
+import * as i3 from "@angular/common";
+/**
+ * @hidden
+ */
+export class FlatColorPickerHeaderComponent {
+    constructor(localizationService, renderer) {
+        this.localizationService = localizationService;
+        this.renderer = renderer;
+        this.hostClasses = true;
+        this.innerTabIndex = -1;
+        this.viewChange = new EventEmitter();
+        this.valuePaneClick = new EventEmitter();
+        this.clearButtonClick = new EventEmitter();
+        this.tabOut = new EventEmitter();
+        this.dropletSliderIcon = dropletSliderIcon;
+        this.paletteIcon = paletteIcon;
+        this.dropletSlashIcon = dropletSlashIcon;
+    }
+    ngAfterViewInit() {
+        if (this.viewButtonsCollection.length > 0) {
+            this.viewButtonsCollection.forEach((button) => {
+                const buttonElem = button.nativeElement;
+                const isViewActive = buttonElem.getAttribute('aria-pressed') === 'true';
+                if (isViewActive) {
+                    this.renderer.addClass(buttonElem, 'k-selected');
+                }
+            });
+        }
+    }
+    onViewButtonClick(view) {
+        this.activeView = view;
+        this.viewChange.emit(view);
+    }
+    get viewButtons() {
+        return this.views && this.views.indexOf('gradient') >= 0 && this.views.indexOf('palette') >= 0;
+    }
+    getViewButtonIcon(view) {
+        return view === 'gradient' ? 'color-canvas' : 'palette';
+    }
+    getViewButtonsSVGIcon(view) {
+        return view === 'gradient' ? this.dropletSliderIcon : this.paletteIcon;
+    }
+    getText(text) {
+        return this.localizationService.get(text);
+    }
+    onHeaderTabOut(ev, index) {
+        if (index === 0) {
+            ev.preventDefault();
+            this.tabOut.emit(ev);
+        }
+    }
+}
+FlatColorPickerHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatColorPickerHeaderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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: `
+        <div class="k-coloreditor-header-actions k-hstack">
+            <div 
+                *ngIf="viewButtons" 
+                class="k-button-group k-button-group-flat"
+                role="group"
+            >
+                <button 
+                    *ngFor="let view of views; let i = index;"
+                    kendoButton
+                    type="button"
+                    #viewButtons
+                    fillMode="flat"
+                    [tabindex]="innerTabIndex.toString()"
+                    (click)="onViewButtonClick(view)"
+                    [icon]="getViewButtonIcon(view)"
+                    [svgIcon]="getViewButtonsSVGIcon(view)"
+                    (keydown.shift.tab)="onHeaderTabOut($event, i)"
+                    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"
+                    [ngClass]="activeView === view ? 'k-selected' : ''">
+                </button>
+            </div>
+        </div>
+        <div class="k-spacer"></div>
+        <div class="k-coloreditor-header-actions k-hstack">
+            <button
+                kendoButton
+                type="button"
+                [tabindex]="innerTabIndex.toString()"
+                *ngIf="clearButton"
+                #clearButton
+                fillMode="flat"
+                icon="reset-color"
+                [svgIcon]="dropletSlashIcon"
+                class="k-coloreditor-reset"
+                [attr.aria-label]="getText('clearButton')"
+                [attr.title]="getText('clearButton')"
+                (click)="clearButtonClick.emit()">
+            </button>
+            <div class="k-coloreditor-preview k-vstack" *ngIf="preview" aria-hidden="true">
+                <span
+                    class="k-coloreditor-preview-color k-color-preview"
+                    [attr.title]="getText('previewColor')"
+                    [style.background-color]="selection">
+                </span>
+                <span class="k-coloreditor-current-color k-color-preview"
+                    [style.background-color]="value"
+                    [attr.title]="getText('revertSelection')"
+                    (click)="valuePaneClick.emit($event)">
+                </span>
+            </div>
+        </div>
+    `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatColorPickerHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoFlatColorPickerHeader]',
+                    template: `
+        <div class="k-coloreditor-header-actions k-hstack">
+            <div 
+                *ngIf="viewButtons" 
+                class="k-button-group k-button-group-flat"
+                role="group"
+            >
+                <button 
+                    *ngFor="let view of views; let i = index;"
+                    kendoButton
+                    type="button"
+                    #viewButtons
+                    fillMode="flat"
+                    [tabindex]="innerTabIndex.toString()"
+                    (click)="onViewButtonClick(view)"
+                    [icon]="getViewButtonIcon(view)"
+                    [svgIcon]="getViewButtonsSVGIcon(view)"
+                    (keydown.shift.tab)="onHeaderTabOut($event, i)"
+                    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"
+                    [ngClass]="activeView === view ? 'k-selected' : ''">
+                </button>
+            </div>
+        </div>
+        <div class="k-spacer"></div>
+        <div class="k-coloreditor-header-actions k-hstack">
+            <button
+                kendoButton
+                type="button"
+                [tabindex]="innerTabIndex.toString()"
+                *ngIf="clearButton"
+                #clearButton
+                fillMode="flat"
+                icon="reset-color"
+                [svgIcon]="dropletSlashIcon"
+                class="k-coloreditor-reset"
+                [attr.aria-label]="getText('clearButton')"
+                [attr.title]="getText('clearButton')"
+                (click)="clearButtonClick.emit()">
+            </button>
+            <div class="k-coloreditor-preview k-vstack" *ngIf="preview" aria-hidden="true">
+                <span
+                    class="k-coloreditor-preview-color k-color-preview"
+                    [attr.title]="getText('previewColor')"
+                    [style.background-color]="selection">
+                </span>
+                <span class="k-coloreditor-current-color k-color-preview"
+                    [style.background-color]="value"
+                    [attr.title]="getText('revertSelection')"
+                    (click)="valuePaneClick.emit($event)">
+                </span>
+            </div>
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-coloreditor-header']
+            }, {
+                type: HostBinding,
+                args: ['class.k-hstack']
+            }], clearButton: [{
+                type: Input
+            }], activeView: [{
+                type: Input
+            }], views: [{
+                type: Input
+            }], preview: [{
+                type: Input
+            }], innerTabIndex: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], viewChange: [{
+                type: Output
+            }], valuePaneClick: [{
+                type: Output
+            }], clearButtonClick: [{
+                type: Output
+            }], tabOut: [{
+                type: Output
+            }], viewButtonsCollection: [{
+                type: ViewChildren,
+                args: ['viewButtons', { read: ElementRef }]
+            }], clearButtonElement: [{
+                type: ViewChild,
+                args: ['clearButton', { read: ElementRef }]
+            }] } });