@progress/kendo-angular-inputs 18.1.0-develop.2 → 18.1.0-develop.21

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, Input, Output, EventEmitter, ElementRef, HostBinding, ViewChild, Renderer2 } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ElementRef, HostBinding, ViewChild, Renderer2, ChangeDetectorRef } from '@angular/core';
 import { getRGBA, parseColor, getColorFromRGBA } from './utils';
 import { isPresent } from '../common/utils';
 import { guid, isDocumentAvailable } from '@progress/kendo-angular-common';
@@ -14,14 +14,18 @@ import { caretAltExpandIcon } from '@progress/kendo-svg-icons';
 import { NumericLabelDirective } from './color-gradient-numeric-label.directive';
 import { NgIf } from '@angular/common';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
+import { TextBoxComponent } from '../textbox/textbox.component';
+import { TextLabelDirective } from './color-gradient-text-label.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
+const DEFAULT_SIZE = 'medium';
 /**
  * @hidden
  */
 export class ColorInputComponent {
     host;
     renderer;
+    cdr;
     localizationService;
     /**
      * The id of the hex input.
@@ -31,6 +35,16 @@ export class ColorInputComponent {
      * The color format view.
      */
     formatView;
+    /**
+     * The size property specifies the padding of the ColorInput.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    size = DEFAULT_SIZE;
     /**
      * The inputs tabindex.
      */
@@ -96,9 +110,10 @@ export class ColorInputComponent {
      */
     caretAltExpandIcon = caretAltExpandIcon;
     subscriptions = new Subscription();
-    constructor(host, renderer, localizationService) {
+    constructor(host, renderer, cdr, localizationService) {
         this.host = host;
         this.renderer = renderer;
+        this.cdr = cdr;
         this.localizationService = localizationService;
     }
     ngAfterViewInit() {
@@ -162,6 +177,8 @@ export class ColorInputComponent {
     }
     toggleFormatView() {
         this.formatView = this.formatView === 'hex' ? 'rgba' : 'hex';
+        // needed to update the view when ChangeDetectionStrategy.OnPush
+        this.cdr.markForCheck();
     }
     initDomEvents() {
         if (!this.host) {
@@ -172,8 +189,8 @@ export class ColorInputComponent {
     lastInput() {
         return this.hexInput?.nativeElement || this.opacityInput || this.blueInput;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorInputComponent, isStandalone: true, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", tabindex: "tabindex", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", tabOut: "tabOut" }, 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 }, { propertyName: "blueInput", first: true, predicate: ["blue"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorInputComponent, isStandalone: true, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", size: "size", tabindex: "tabindex", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", tabOut: "tabOut" }, 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 }, { propertyName: "blueInput", first: true, predicate: ["blue"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <div class="k-vstack">
             <button 
                 kendoButton
@@ -182,6 +199,7 @@ export class ColorInputComponent {
                 #toggleFormatButton
                 icon="caret-alt-expand"
                 [svgIcon]="caretAltExpandIcon"
+                [size]="size"
                 class="k-colorgradient-toggle-mode"
                 [attr.aria-label]="formatButtonTitle"
                 [attr.title]="formatButtonTitle"
@@ -190,20 +208,22 @@ export class ColorInputComponent {
             >
             </button>
         </div>
-        <div *ngIf="formatView === 'hex'" class="k-vstack">
-            <input
+        <div *ngIf="formatView === 'hex'" class="k-vstack k-flex-1">
+            <kendo-textbox
                 #hexInput
-                [id]="focusableId"
-                class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-hex-value"
+                kendoTextLabel
+                [focusableId]="focusableId"
+                class="k-hex-value"
+                [size]="size"
                 [class.k-readonly]="readonly"
                 [disabled]="disabled"
                 [readonly]="readonly"
                 [value]="hex || ''"
                 (blur)="handleHexInputBlur()"
                 (input)="handleHexValueChange(hexInput.value)"
-                [tabindex]="tabindex.toString()"
-                (keydown.tab)="focusDragHandle($event)"
-            />
+                [tabindex]="tabindex"
+                (keydown.tab)="focusDragHandle($event)">
+            </kendo-textbox>
             <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
         </div>
         <ng-container *ngIf="formatView === 'rgba'">
@@ -213,6 +233,7 @@ export class ColorInputComponent {
                     kendoAdditionalNumericLabel="red"
                     [localizationService]="localizationService"
                     [disabled]="disabled"
+                    [size]="size"
                     [readonly]="readonly"
                     [tabindex]="tabindex"
                     [min]="0"
@@ -235,6 +256,7 @@ export class ColorInputComponent {
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [tabindex]="tabindex"
+                    [size]="size"
                     [min]="0"
                     [max]="255"
                     [(value)]="rgba.g"
@@ -255,6 +277,7 @@ export class ColorInputComponent {
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [tabindex]="tabindex"
+                    [size]="size"
                     [min]="0"
                     [max]="255"
                     [(value)]="rgba.b"
@@ -269,13 +292,14 @@ export class ColorInputComponent {
                 <label [for]="blue.focusableId" class="k-colorgradient-input-label">B</label>
             </div>
             <div class="k-vstack" *ngIf="opacity">
-                <kendo-numerictextbox  #opacityInput
+                <kendo-numerictextbox #opacityInput
                     #alpha
                     kendoAdditionalNumericLabel="alpha"
                     [localizationService]="localizationService"
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [tabindex]="tabindex"
+                    [size]="size"
                     [min]="0"
                     [max]="1"
                     [(value)]="rgba.a"
@@ -291,7 +315,7 @@ export class ColorInputComponent {
                 <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
             </div>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextLabelDirective, selector: "[kendoTextLabel]", inputs: ["focusableId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
@@ -306,6 +330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 #toggleFormatButton
                 icon="caret-alt-expand"
                 [svgIcon]="caretAltExpandIcon"
+                [size]="size"
                 class="k-colorgradient-toggle-mode"
                 [attr.aria-label]="formatButtonTitle"
                 [attr.title]="formatButtonTitle"
@@ -314,20 +339,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             >
             </button>
         </div>
-        <div *ngIf="formatView === 'hex'" class="k-vstack">
-            <input
+        <div *ngIf="formatView === 'hex'" class="k-vstack k-flex-1">
+            <kendo-textbox
                 #hexInput
-                [id]="focusableId"
-                class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-hex-value"
+                kendoTextLabel
+                [focusableId]="focusableId"
+                class="k-hex-value"
+                [size]="size"
                 [class.k-readonly]="readonly"
                 [disabled]="disabled"
                 [readonly]="readonly"
                 [value]="hex || ''"
                 (blur)="handleHexInputBlur()"
                 (input)="handleHexValueChange(hexInput.value)"
-                [tabindex]="tabindex.toString()"
-                (keydown.tab)="focusDragHandle($event)"
-            />
+                [tabindex]="tabindex"
+                (keydown.tab)="focusDragHandle($event)">
+            </kendo-textbox>
             <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
         </div>
         <ng-container *ngIf="formatView === 'rgba'">
@@ -337,6 +364,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     kendoAdditionalNumericLabel="red"
                     [localizationService]="localizationService"
                     [disabled]="disabled"
+                    [size]="size"
                     [readonly]="readonly"
                     [tabindex]="tabindex"
                     [min]="0"
@@ -359,6 +387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [tabindex]="tabindex"
+                    [size]="size"
                     [min]="0"
                     [max]="255"
                     [(value)]="rgba.g"
@@ -379,6 +408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [tabindex]="tabindex"
+                    [size]="size"
                     [min]="0"
                     [max]="255"
                     [(value)]="rgba.b"
@@ -393,13 +423,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 <label [for]="blue.focusableId" class="k-colorgradient-input-label">B</label>
             </div>
             <div class="k-vstack" *ngIf="opacity">
-                <kendo-numerictextbox  #opacityInput
+                <kendo-numerictextbox #opacityInput
                     #alpha
                     kendoAdditionalNumericLabel="alpha"
                     [localizationService]="localizationService"
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [tabindex]="tabindex"
+                    [size]="size"
                     [min]="0"
                     [max]="1"
                     [(value)]="rgba.a"
@@ -417,12 +448,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </ng-container>
     `,
                     standalone: true,
-                    imports: [ButtonComponent, NgIf, NumericTextBoxComponent, NumericLabelDirective]
+                    imports: [ButtonComponent, NgIf, NumericTextBoxComponent, NumericLabelDirective, TextBoxComponent, TextLabelDirective]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { focusableId: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }]; }, propDecorators: { focusableId: [{
                 type: Input
             }], formatView: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], tabindex: [{
                 type: Input
             }], value: [{

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

@@ -14,17 +14,17 @@ import { ColorPaletteLocalizationService } from './localization/colorpalette-loc
 import { packageMetadata } from '../package-metadata';
 import { PALETTEPRESETS } from './models';
 import { parseColor } from './utils';
-import { isPresent } from '../common/utils';
+import { getStylingClasses, isPresent } from '../common/utils';
 import { ColorPaletteService } from './services/color-palette.service';
 import { NgFor, 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";
 import * as i2 from "@progress/kendo-angular-l10n";
-const DEFAULT_TILE_SIZE = 24;
 const DEFAULT_COLUMNS_COUNT = 10;
 const DEFAULT_PRESET = 'office';
 const DEFAULT_ACCESSIBLE_PRESET = 'accessible';
+const DEFAULT_SIZE = 'medium';
 let serial = 0;
 /**
  * The ColorPalette component provides a set of predefined palette presets and enables you to implement a custom color palette.
@@ -114,6 +114,23 @@ export class ColorPaletteComponent {
     get palette() {
         return this._palette;
     }
+    /**
+     * The size property specifies the padding of the ColorPalette internal elements.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set size(size) {
+        const newSize = size || DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
+    }
+    get size() {
+        return this._size;
+    }
     /**
      * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      */
@@ -136,13 +153,9 @@ export class ColorPaletteComponent {
      */
     readonly = false;
     /**
-     * Specifies the size of a color cell.
-     *
-     * The possible values are:
-     * * (Default) `tileSize = 24`
-     * * `{ width: number, height: number }`
+     * Specifies the size of a color cell. The default tile size depends on the `size` of the component.
      */
-    tileSize = { width: DEFAULT_TILE_SIZE, height: DEFAULT_TILE_SIZE };
+    tileSize;
     /**
      * @hidden
      */
@@ -209,6 +222,7 @@ export class ColorPaletteComponent {
      */
     uniqueId = guid();
     selection;
+    _size = 'medium';
     _value;
     _columns;
     _palette;
@@ -239,6 +253,10 @@ export class ColorPaletteComponent {
         this.subs.add(this.renderer.listen(elem, 'blur', () => this.handleHostBlur()));
     }
     ngAfterViewInit() {
+        const stylingInputs = ['size'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
         this.setHostElementAriaLabel();
         if (this.value) {
             this.ngZone.onStable.pipe(take(1)).subscribe(() => {
@@ -424,10 +442,20 @@ export class ColorPaletteComponent {
         const selectedColor = this.service.getColorAt(this.focusedCell);
         this.handleCellSelection(selectedColor, this.focusedCell);
     }
+    handleClasses(value, input) {
+        const elem = this.host.nativeElement;
+        const classes = getStylingClasses('colorpalette', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
     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: [
+    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", 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,
@@ -466,9 +494,9 @@ export class ColorPaletteComponent {
                         (click)="handleCellSelection(color, { row: rowIndex, col: colIndex })"
                         [ngStyle]="{
                             backgroundColor: color,
-                            width: tileLayout.width + 'px',
-                            height: tileLayout.height + 'px',
-                            minWidth: tileLayout.width + 'px'
+                            width: tileLayout?.width + 'px',
+                            height: tileLayout?.height + 'px',
+                            minWidth: tileLayout?.width + 'px'
                         }">
                     </td>
                 </tr>
@@ -521,9 +549,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         (click)="handleCellSelection(color, { row: rowIndex, col: colIndex })"
                         [ngStyle]="{
                             backgroundColor: color,
-                            width: tileLayout.width + 'px',
-                            height: tileLayout.height + 'px',
-                            minWidth: tileLayout.width + 'px'
+                            width: tileLayout?.width + 'px',
+                            height: tileLayout?.height + 'px',
+                            minWidth: tileLayout?.width + 'px'
                         }">
                     </td>
                 </tr>
@@ -555,6 +583,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], palette: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], tabindex: [{
                 type: Input
             }], disabled: [{