@progress/kendo-angular-inputs 21.1.1-develop.2 → 21.2.0-develop.2

package/esm2022/colorpicker/color-palette.component.mjs

@@ -16,7 +16,7 @@ import { PALETTEPRESETS } from './models';
 import { parseColor } from './utils';
 import { getStylingClasses, isPresent } from '../common/utils';
 import { ColorPaletteService } from './services/color-palette.service';
-import { NgFor, NgStyle } from '@angular/common';
+import { NgStyle } from '@angular/common';
 import { LocalizedColorPickerMessagesDirective } from './localization/localized-colorpicker-messages.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/color-palette.service";
@@ -455,7 +455,7 @@ export class ColorPaletteComponent {
     notifyNgTouched = () => { };
     notifyNgChanged = () => { };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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: "18.2.14", type: ColorPaletteComponent, isStandalone: true, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", size: "size", 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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColorPaletteComponent, isStandalone: true, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", size: "size", 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,
@@ -476,33 +476,37 @@ export class ColorPaletteComponent {
             }
         ], 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">
+          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>
         <table role="presentation" class="k-colorpalette-table">
-            <tbody>
-                <tr *ngFor="let row of colorRows; let rowIndex = index" role="row">
-                    <td *ngFor="let color of row; let colIndex = index"
-                        role="gridcell"
-                        [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
-                        [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
-                        [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
-                        [attr.aria-label]="color"
-                        class="k-colorpalette-tile"
-                        [id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
-                        [attr.value]="color"
-                        (click)="handleCellSelection(color, { row: rowIndex, col: colIndex })"
+          <tbody>
+            @for (row of colorRows; track row; let rowIndex = $index) {
+              <tr role="row">
+                @for (color of row; track color; let colIndex = $index) {
+                  <td
+                    role="gridcell"
+                    [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
+                    [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
+                    [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
+                    [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>
+                  </td>
+                }
+              </tr>
+            }
+          </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"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorPaletteComponent, decorators: [{
             type: Component,
@@ -531,35 +535,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     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">
+          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>
         <table role="presentation" class="k-colorpalette-table">
-            <tbody>
-                <tr *ngFor="let row of colorRows; let rowIndex = index" role="row">
-                    <td *ngFor="let color of row; let colIndex = index"
-                        role="gridcell"
-                        [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
-                        [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
-                        [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
-                        [attr.aria-label]="color"
-                        class="k-colorpalette-tile"
-                        [id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
-                        [attr.value]="color"
-                        (click)="handleCellSelection(color, { row: rowIndex, col: colIndex })"
+          <tbody>
+            @for (row of colorRows; track row; let rowIndex = $index) {
+              <tr role="row">
+                @for (color of row; track color; let colIndex = $index) {
+                  <td
+                    role="gridcell"
+                    [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
+                    [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
+                    [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
+                    [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>
+                  </td>
+                }
+              </tr>
+            }
+          </tbody>
         </table>
-    `,
+        `,
                     standalone: true,
-                    imports: [LocalizedColorPickerMessagesDirective, NgFor, NgStyle]
+                    imports: [LocalizedColorPickerMessagesDirective, NgStyle]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.ColorPaletteService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }], propDecorators: { direction: [{
                 type: HostBinding,