@progress/kendo-angular-inputs 8.0.9 → 9.0.0-dev.202204150721

package/{dist/es2015 → esm2015}/colorpicker/color-input.component.js

@@ -2,18 +2,19 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
-import { Component, Input, Output, EventEmitter, ElementRef, HostBinding, ViewChild, Renderer2 } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ElementRef, HostBinding, ViewChild } from '@angular/core';
 import { getRGBA, parseColor, getColorFromRGBA } from './utils';
 import { isPresent } from '../common/utils';
 import { guid, isDocumentAvailable } from '@progress/kendo-angular-common';
 import { Subscription } from 'rxjs';
-import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { NumericTextBoxComponent } from './../numerictextbox/numerictextbox.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../numerictextbox/numerictextbox.component";
+import * as i3 from "@angular/common";
 /**
  * @hidden
  */
-let ColorInputComponent = class ColorInputComponent {
+export class ColorInputComponent {
     constructor(host, renderer, localizationService) {
         this.host = host;
         this.renderer = renderer;
@@ -116,60 +117,109 @@ let ColorInputComponent = class ColorInputComponent {
         }
         this.subscriptions.add(this.renderer.listen(this.toggleFormatButton.nativeElement, 'click', () => this.toggleFormatView()));
     }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ColorInputComponent.prototype, "focusableId", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ColorInputComponent.prototype, "formatView", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ColorInputComponent.prototype, "value", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ColorInputComponent.prototype, "opacity", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ColorInputComponent.prototype, "disabled", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ColorInputComponent.prototype, "readonly", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ColorInputComponent.prototype, "valueChange", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-colorgradient-inputs'),
-    HostBinding('class.k-hstack'),
-    tslib_1.__metadata("design:type", Boolean)
-], ColorInputComponent.prototype, "colorInputClass", void 0);
-tslib_1.__decorate([
-    ViewChild('opacityInput', { static: false }),
-    tslib_1.__metadata("design:type", NumericTextBoxComponent)
-], ColorInputComponent.prototype, "opacityInput", void 0);
-tslib_1.__decorate([
-    ViewChild('hexInput', { read: ElementRef, static: false }),
-    tslib_1.__metadata("design:type", ElementRef)
-], ColorInputComponent.prototype, "hexInput", void 0);
-tslib_1.__decorate([
-    ViewChild('blueInput', { read: ElementRef, static: false }),
-    tslib_1.__metadata("design:type", ElementRef)
-], ColorInputComponent.prototype, "blueInput", void 0);
-tslib_1.__decorate([
-    ViewChild('toggleFormatButton', { static: false }),
-    tslib_1.__metadata("design:type", ElementRef)
-], ColorInputComponent.prototype, "toggleFormatButton", void 0);
-ColorInputComponent = tslib_1.__decorate([
-    Component({
-        selector: 'kendo-colorinput',
-        template: `
+}
+ColorInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorInputComponent, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-colorgradient-inputs": "this.colorInputClass", "class.k-hstack": "this.colorInputClass" } }, viewQueries: [{ propertyName: "opacityInput", first: true, predicate: ["opacityInput"], descendants: true }, { propertyName: "hexInput", first: true, predicate: ["hexInput"], descendants: true, read: ElementRef }, { propertyName: "blueInput", first: true, predicate: ["blueInput"], descendants: true, read: ElementRef }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <div class="k-vstack">
+            <button #toggleFormatButton
+                class="k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
+                [attr.aria-label]="formatButtonTitle"
+                [attr.title]="formatButtonTitle"
+                type="button"
+            >
+                <span class="k-button-icon k-icon k-i-arrows-kpi"></span>
+            </button>
+        </div>
+        <div *ngIf="formatView === 'hex'" class="k-vstack">
+            <input
+                #hexInput
+                [id]="focusableId"
+                class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-hex-value"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                [value]="hex || ''"
+                (blur)="handleHexInputBlur()"
+                (input)="handleHexValueChange(hexInput.value)"
+            />
+            <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
+        </div>
+        <ng-container *ngIf="formatView === 'rgba'">
+            <div class="k-vstack">
+                <kendo-numerictextbox
+                    #red
+                    [disabled]="disabled"
+                    [readonly]="readonly"
+                    [min]="0"
+                    [max]="255"
+                    [(value)]="rgba.r"
+                    [autoCorrect]="true"
+                    [spinners]="false"
+                    [format]="'n'"
+                    [decimals]="0"
+                    (blur)="handleRgbaInputBlur()"
+                    (valueChange)="handleRgbaValueChange()">
+                </kendo-numerictextbox>
+                <label [for]="red.focusableId" class="k-colorgradient-input-label">R</label>
+            </div>
+            <div class="k-vstack">
+                <kendo-numerictextbox
+                    #green
+                    [disabled]="disabled"
+                    [readonly]="readonly"
+                    [min]="0"
+                    [max]="255"
+                    [(value)]="rgba.g"
+                    [autoCorrect]="true"
+                    [spinners]="false"
+                    [format]="'n'"
+                    [decimals]="0"
+                    (blur)="handleRgbaInputBlur()"
+                    (valueChange)="handleRgbaValueChange()">
+                </kendo-numerictextbox>
+                <label [for]="green.focusableId" class="k-colorgradient-input-label">G</label>
+            </div>
+            <div class="k-vstack">
+                <kendo-numerictextbox
+                    #blue
+                    [disabled]="disabled"
+                    [readonly]="readonly"
+                    [min]="0"
+                    [max]="255"
+                    [(value)]="rgba.b"
+                    [autoCorrect]="true"
+                    [spinners]="false"
+                    [format]="'n'"
+                    [decimals]="0"
+                    (blur)="handleRgbaInputBlur()"
+                    (valueChange)="handleRgbaValueChange()">
+                </kendo-numerictextbox>
+                <label [for]="blue.focusableId" class="k-colorgradient-input-label">B</label>
+            </div>
+            <div class="k-vstack" *ngIf="opacity">
+                <kendo-numerictextbox  #opacityInput
+                    #alpha
+                    [disabled]="disabled"
+                    [readonly]="readonly"
+                    [min]="0"
+                    [max]="1"
+                    [(value)]="rgba.a"
+                    [autoCorrect]="true"
+                    [spinners]="false"
+                    [step]="0.01"
+                    [format]="'n2'"
+                    [decimals]="2"
+                    (blur)="handleRgbaInputBlur()"
+                    (valueChange)="handleRgbaValueChange()">
+                </kendo-numerictextbox>
+                <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
+            </div>
+        </ng-container>
+    `, isInline: true, components: [{ type: i2.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-colorinput',
+                    template: `
         <div class="k-vstack">
             <button #toggleFormatButton
                 class="k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
@@ -265,9 +315,37 @@ ColorInputComponent = tslib_1.__decorate([
             </div>
         </ng-container>
     `
-    }),
-    tslib_1.__metadata("design:paramtypes", [ElementRef,
-        Renderer2,
-        LocalizationService])
-], ColorInputComponent);
-export { ColorInputComponent };
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { focusableId: [{
+                type: Input
+            }], formatView: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], opacity: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], colorInputClass: [{
+                type: HostBinding,
+                args: ['class.k-colorgradient-inputs']
+            }, {
+                type: HostBinding,
+                args: ['class.k-hstack']
+            }], opacityInput: [{
+                type: ViewChild,
+                args: ['opacityInput', { static: false }]
+            }], hexInput: [{
+                type: ViewChild,
+                args: ['hexInput', { read: ElementRef, static: false }]
+            }], blueInput: [{
+                type: ViewChild,
+                args: ['blueInput', { read: ElementRef, static: false }]
+            }], toggleFormatButton: [{
+                type: ViewChild,
+                args: ['toggleFormatButton', { static: false }]
+            }] } });

package/{dist/es2015 → esm2015}/colorpicker/color-palette.component.js

@@ -2,9 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
-var ColorPaletteComponent_1;
-import { Component, Input, EventEmitter, Output, HostBinding, HostListener, forwardRef, ChangeDetectorRef, Renderer2, ElementRef, NgZone } from '@angular/core';
+import { Component, Input, EventEmitter, Output, HostBinding, HostListener, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Keys, KendoInput, guid } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -16,6 +14,11 @@ import { PALETTEPRESETS } from './models';
 import { parseColor } from './utils';
 import { isPresent } from '../common/utils';
 import { ColorPaletteService } from './services/color-palette.service';
+import * as i0 from "@angular/core";
+import * as i1 from "./services/color-palette.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "./localization/localized-colorpicker-messages.directive";
+import * as i4 from "@angular/common";
 const DEFAULT_TILE_SIZE = 24;
 const DEFAULT_COLUMNS_COUNT = 10;
 const DEFAULT_PRESET = 'office';
@@ -25,7 +28,7 @@ let serial = 0;
  * The ColorPalette component provides a set of predefined palette presets and enables you to implement a custom color palette.
  * The ColorPalette is independently used by `kendo-colorpicker` and can be directly added to the page.
  */
-let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponent {
+export class ColorPaletteComponent {
     constructor(host, service, cdr, renderer, localizationService, ngZone) {
         this.host = host;
         this.service = service;
@@ -347,125 +350,85 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
         const selectedColor = this.service.getColorAt(this.focusedCell);
         this.handleCellSelection(selectedColor, this.focusedCell);
     }
-};
-tslib_1.__decorate([
-    HostBinding('attr.dir'),
-    tslib_1.__metadata("design:type", String)
-], ColorPaletteComponent.prototype, "direction", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.id'),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [])
-], ColorPaletteComponent.prototype, "paletteId", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ColorPaletteComponent.prototype, "id", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ColorPaletteComponent.prototype, "format", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], ColorPaletteComponent.prototype, "value", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number),
-    tslib_1.__metadata("design:paramtypes", [Number])
-], ColorPaletteComponent.prototype, "columns", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], ColorPaletteComponent.prototype, "palette", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number),
-    tslib_1.__metadata("design:paramtypes", [Number])
-], ColorPaletteComponent.prototype, "tabindex", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ColorPaletteComponent.prototype, "disabled", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ColorPaletteComponent.prototype, "readonly", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], ColorPaletteComponent.prototype, "tileSize", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ColorPaletteComponent.prototype, "selectionChange", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ColorPaletteComponent.prototype, "valueChange", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ColorPaletteComponent.prototype, "cellSelection", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.tabindex'),
-    tslib_1.__metadata("design:type", Number),
-    tslib_1.__metadata("design:paramtypes", [])
-], ColorPaletteComponent.prototype, "hostTabindex", null);
-tslib_1.__decorate([
-    HostBinding('class.k-colorpalette'),
-    tslib_1.__metadata("design:type", Boolean)
-], ColorPaletteComponent.prototype, "hostClasses", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.aria-disabled'),
-    HostBinding('class.k-state-disabled'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ColorPaletteComponent.prototype, "disabledClass", null);
-tslib_1.__decorate([
-    HostBinding('attr.aria-readonly'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ColorPaletteComponent.prototype, "readonlyAttribute", null);
-tslib_1.__decorate([
-    HostListener('keydown', ['$event']),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", [Object]),
-    tslib_1.__metadata("design:returntype", void 0)
-], ColorPaletteComponent.prototype, "handleKeydown", null);
-tslib_1.__decorate([
-    HostListener('blur'),
-    tslib_1.__metadata("design:type", Function),
-    tslib_1.__metadata("design:paramtypes", []),
-    tslib_1.__metadata("design:returntype", void 0)
-], ColorPaletteComponent.prototype, "handleHostBlur", null);
-ColorPaletteComponent = ColorPaletteComponent_1 = tslib_1.__decorate([
-    Component({
-        exportAs: 'kendoColorPalette',
-        selector: 'kendo-colorpalette',
-        providers: [
-            {
-                multi: true,
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ColorPaletteComponent_1) // tslint:disable-line:no-forward-ref
-            }, {
-                provide: KendoInput,
-                useExisting: forwardRef(() => ColorPaletteComponent_1)
-            },
-            ColorPaletteService,
-            ColorPaletteLocalizationService,
-            {
-                provide: LocalizationService,
-                useExisting: ColorPaletteLocalizationService
-            },
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.colorpalette'
-            }
-        ],
-        template: `
+}
+ColorPaletteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: i1.ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { listeners: { "keydown": "handleKeydown($event)", "blur": "handleHostBlur()" }, properties: { "attr.dir": "this.direction", "attr.id": "this.paletteId", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-state-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
+        {
+            multi: true,
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ColorPaletteComponent)
+        }, {
+            provide: KendoInput,
+            useExisting: forwardRef(() => ColorPaletteComponent)
+        },
+        ColorPaletteService,
+        ColorPaletteLocalizationService,
+        {
+            provide: LocalizationService,
+            useExisting: ColorPaletteLocalizationService
+        },
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.colorpalette'
+        }
+    ], exportAs: ["kendoColorPalette"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoColorPaletteLocalizedMessages
+            i18n-colorPaletteNoColor="kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
+            colorPaletteNoColor="Colorpalette no color chosen">
+        </ng-container>
+        <div role="listbox" class="k-colorpalette-table-wrap"
+            [attr.aria-activedescendant]="activeCellId">
+            <table class="k-colorpalette-table k-palette">
+                <tbody>
+                    <tr *ngFor="let row of colorRows; let rowIndex = index">
+                        <td *ngFor="let color of row; let colIndex = index"
+                            role="option"
+                            [class.k-state-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
+                            [class.k-state-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
+                            [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
+                            [attr.aria-label]="color"
+                            class="k-colorpalette-tile"
+                            [id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
+                            [attr.value]="color"
+                            (click)="handleCellSelection(color, { row: rowIndex, col: colIndex })"
+                            [ngStyle]="{
+                                backgroundColor: color,
+                                width: tileLayout.width + 'px',
+                                height: tileLayout.height + 'px',
+                                minWidth: tileLayout.width + 'px'
+                            }">
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    `, isInline: true, directives: [{ type: i3.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPaletteComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoColorPalette',
+                    selector: 'kendo-colorpalette',
+                    providers: [
+                        {
+                            multi: true,
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorPaletteComponent)
+                        }, {
+                            provide: KendoInput,
+                            useExisting: forwardRef(() => ColorPaletteComponent)
+                        },
+                        ColorPaletteService,
+                        ColorPaletteLocalizationService,
+                        {
+                            provide: LocalizationService,
+                            useExisting: ColorPaletteLocalizationService
+                        },
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.colorpalette'
+                        }
+                    ],
+                    template: `
         <ng-container kendoColorPaletteLocalizedMessages
             i18n-colorPaletteNoColor="kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
             colorPaletteNoColor="Colorpalette no color chosen">
@@ -497,12 +460,56 @@ ColorPaletteComponent = ColorPaletteComponent_1 = tslib_1.__decorate([
             </table>
         </div>
     `
-    }),
-    tslib_1.__metadata("design:paramtypes", [ElementRef,
-        ColorPaletteService,
-        ChangeDetectorRef,
-        Renderer2,
-        LocalizationService,
-        NgZone])
-], ColorPaletteComponent);
-export { ColorPaletteComponent };
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ColorPaletteService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], paletteId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], id: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], palette: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], tileSize: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], valueChange: [{
+                type: Output
+            }], cellSelection: [{
+                type: Output
+            }], hostTabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-colorpalette']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }, {
+                type: HostBinding,
+                args: ['class.k-state-disabled']
+            }], readonlyAttribute: [{
+                type: HostBinding,
+                args: ['attr.aria-readonly']
+            }], handleKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], handleHostBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });