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

package/{esm2020 → esm2022}/colorpicker/color-palette.component.mjs

@@ -31,81 +31,20 @@ let serial = 0;
  * The ColorPalette is independently used by `kendo-colorpicker` and can be directly added to the page.
  */
 export class ColorPaletteComponent {
-    constructor(host, service, cdr, renderer, localizationService, ngZone) {
-        this.host = host;
-        this.service = service;
-        this.cdr = cdr;
-        this.renderer = renderer;
-        this.localizationService = localizationService;
-        this.ngZone = ngZone;
-        /**
-         * @hidden
-         */
-        this.role = 'grid';
-        /**
-         * @hidden
-         */
-        this.id = `k-colorpalette-${serial++}`;
-        /**
-         * Specifies the output format of the ColorPaletteComponent.
-         * The input value may be in a different format. However, it will be parsed into the output `format`
-         * after the component processes it.
-         *
-         * The supported values are:
-         * * (Default) `hex`
-         * * `rgba`
-         * * `name`
-         */
-        this.format = 'hex';
-        /**
-         * Sets the disabled state of the ColorPalette. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorpalette#toc-managing-the-colorpalette-disabled-state-in-reactive-forms).
-         */
-        this.disabled = false;
-        /**
-         * Sets the read-only state of the ColorPalette.
-         *
-         * @default false
-         */
-        this.readonly = false;
-        /**
-         * Specifies the size of a color cell.
-         *
-         * The possible values are:
-         * * (Default) `tileSize = 24`
-         * * `{ width: number, height: number }`
-         */
-        this.tileSize = { width: DEFAULT_TILE_SIZE, height: DEFAULT_TILE_SIZE };
-        /**
-         * Fires each time the color selection is changed.
-         */
-        this.selectionChange = new EventEmitter();
-        /**
-         * Fires each time the value is changed.
-         */
-        this.valueChange = new EventEmitter();
-        /**
-         * Fires each time the user selects a cell with the mouse or presses `Enter`.
-         *
-         * @hidden
-         */
-        this.cellSelection = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.hostClasses = true;
-        /**
-         * @hidden
-         */
-        this.uniqueId = guid();
-        this._tabindex = 0;
-        this.subs = new Subscription();
-        this.notifyNgTouched = () => { };
-        this.notifyNgChanged = () => { };
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = localizationService.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        });
-    }
+    host;
+    service;
+    cdr;
+    renderer;
+    localizationService;
+    ngZone;
+    /**
+     * @hidden
+     */
+    direction;
+    /**
+     * @hidden
+     */
+    role = 'grid';
     /**
      * @hidden
      */
@@ -118,6 +57,21 @@ export class ColorPaletteComponent {
     get paletteId() {
         return this.id;
     }
+    /**
+     * @hidden
+     */
+    id = `k-colorpalette-${serial++}`;
+    /**
+     * Specifies the output format of the ColorPaletteComponent.
+     * The input value may be in a different format. However, it will be parsed into the output `format`
+     * after the component processes it.
+     *
+     * The supported values are:
+     * * (Default) `hex`
+     * * `rgba`
+     * * `name`
+     */
+    format = 'hex';
     /**
      * Specifies the value of the initially selected color.
      */
@@ -171,6 +125,24 @@ export class ColorPaletteComponent {
     get tabindex() {
         return !this.disabled ? this._tabindex : undefined;
     }
+    /**
+     * Sets the disabled state of the ColorPalette. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorpalette#toc-managing-the-colorpalette-disabled-state-in-reactive-forms).
+     */
+    disabled = false;
+    /**
+     * Sets the read-only state of the ColorPalette.
+     *
+     * @default false
+     */
+    readonly = false;
+    /**
+     * Specifies the size of a color cell.
+     *
+     * The possible values are:
+     * * (Default) `tileSize = 24`
+     * * `{ width: number, height: number }`
+     */
+    tileSize = { width: DEFAULT_TILE_SIZE, height: DEFAULT_TILE_SIZE };
     /**
      * @hidden
      */
@@ -180,6 +152,20 @@ export class ColorPaletteComponent {
         }
         return { width: this.tileSize, height: this.tileSize };
     }
+    /**
+     * Fires each time the color selection is changed.
+     */
+    selectionChange = new EventEmitter();
+    /**
+     * Fires each time the value is changed.
+     */
+    valueChange = new EventEmitter();
+    /**
+     * Fires each time the user selects a cell with the mouse or presses `Enter`.
+     *
+     * @hidden
+     */
+    cellSelection = new EventEmitter();
     /**
      * @hidden
      */
@@ -190,6 +176,10 @@ export class ColorPaletteComponent {
      * @hidden
      */
     get hostTabindex() { return this.tabindex; }
+    /**
+     * @hidden
+     */
+    hostClasses = true;
     /**
      * @hidden
      */
@@ -198,6 +188,45 @@ export class ColorPaletteComponent {
      * @hidden
      */
     get readonlyAttribute() { return this.readonly; }
+    /**
+     * @hidden
+     */
+    activeCellId;
+    /**
+     * @hidden
+     */
+    focusedCell;
+    /**
+     * @hidden
+     */
+    selectedCell;
+    /**
+     * @hidden
+     */
+    focusInComponent;
+    /**
+     * @hidden
+     */
+    uniqueId = guid();
+    selection;
+    _value;
+    _columns;
+    _palette;
+    _tabindex = 0;
+    subs = new Subscription();
+    dynamicRTLSubscription;
+    constructor(host, service, cdr, renderer, localizationService, ngZone) {
+        this.host = host;
+        this.service = service;
+        this.cdr = cdr;
+        this.renderer = renderer;
+        this.localizationService = localizationService;
+        this.ngZone = ngZone;
+        validatePackage(packageMetadata);
+        this.dynamicRTLSubscription = localizationService.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+    }
     ngOnInit() {
         if (this.colorRows.length === 0) {
             const defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
@@ -395,28 +424,29 @@ export class ColorPaletteComponent {
         const selectedColor = this.service.getColorAt(this.focusedCell);
         this.handleCellSelection(selectedColor, this.focusedCell);
     }
-}
-ColorPaletteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: i1.ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColorPaletteComponent, isStandalone: true, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "class.k-readonly": "this.readonly", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
-        {
-            multi: true,
-            provide: NG_VALUE_ACCESSOR,
-            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: `
+    notifyNgTouched = () => { };
+    notifyNgChanged = () => { };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPaletteComponent, isStandalone: true, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "class.k-readonly": "this.readonly", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
+            {
+                multi: true,
+                provide: NG_VALUE_ACCESSOR,
+                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">
@@ -445,7 +475,8 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             </tbody>
         </table>
     `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPaletteComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPaletteComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoColorPalette',