@progress/kendo-angular-inputs 10.0.0 → 10.1.0-dev.202209211545

package/esm2015/colorpicker/colorpicker.component.js

@@ -313,6 +313,7 @@ export class ColorPickerComponent {
             tileSize: this._paletteSettings.tileSize || 24,
             columns: this._paletteSettings.columns || presetColumns || 10
         };
+        this.handleHostId();
     }
     ngAfterViewInit() {
         const stylingInputs = ['size', 'rounded', 'fillMode'];
@@ -320,7 +321,6 @@ export class ColorPickerComponent {
             this.handleClasses(this[input], input);
         });
         this.setHostElementAriaLabel();
-        this.handleHostId();
         this.initDomEvents();
     }
     ngOnChanges(changes) {

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1662989272,
+    publishDate: 1663775032,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2015/signature/signature.component.js

@@ -5,7 +5,7 @@
 import { __awaiter } from "tslib";
 import { ChangeDetectionStrategy, Component, EventEmitter, forwardRef, HostBinding, Input, Output, ViewChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { anyChanged, closest } from '@progress/kendo-angular-common';
+import { anyChanged, closest, isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { SignaturePad } from '@progress/kendo-inputs-common';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -25,6 +25,8 @@ const DEFAULT_ROUNDED = 'medium';
 const DEFAULT_FILL_MODE = 'solid';
 const DEFAULT_POPUP_SCALE = 3;
 const DEFAULT_EXPORT_SCALE = 2;
+const DEFAULT_COLOR = '#000000';
+const DEFAULT_BACKGROUND_COLOR = '#ffffff';
 /**
  * Represents the [Kendo UI Signature component for Angular]({% slug overview_signature %}).
  *
@@ -69,7 +71,7 @@ export class SignatureComponent {
          * * `small`
          * * `medium` (default)
          * * `large`
-         * * `full`
+         * * `full` (not supported by the Signature)
          * * `none`
          */
         this.rounded = DEFAULT_ROUNDED;
@@ -84,22 +86,6 @@ export class SignatureComponent {
          * * `none`
          */
         this.fillMode = DEFAULT_FILL_MODE;
-        /**
-         * The stroke color of the signature.
-         *
-         * Accepts CSS color names and hex values.
-         *
-         * @default '#000000'
-         */
-        this.color = '#000000';
-        /**
-         * The background color of the signature.
-         *
-         * Accepts CSS color names and hex values.
-         *
-         * @default '#ffffff'
-         */
-        this.backgroundColor = '#ffffff';
         /**
          * The stroke width of the signature.
          *
@@ -314,6 +300,7 @@ export class SignatureComponent {
     }
     ngAfterViewInit() {
         this.applyHostClasses();
+        this.readThemeColors();
         this.ngZone.runOutsideAngular(() => {
             const element = this.canvas.nativeElement;
             this.instance = new SignaturePad(element, Object.assign(Object.assign({}, this.options), { onChange: () => this.onValueChange(), onDraw: () => this.onDraw(), onDrawEnd: () => this.onDrawEnd() }));
@@ -384,6 +371,15 @@ export class SignatureComponent {
             this.isOpen = false;
         }
     }
+    /**
+     * @hidden
+     */
+    onDialogKeydown(e) {
+        if (e.keyCode === Keys.Escape) {
+            this.isOpen = false;
+            this.cd.detectChanges();
+        }
+    }
     /**
      * @hidden
      */
@@ -452,6 +448,17 @@ export class SignatureComponent {
         ];
         this.hostClasses.forEach(([name, enabled]) => classList.toggle(name, enabled));
     }
+    readThemeColors() {
+        let defaultColor = DEFAULT_COLOR;
+        let defaultBackgroundColor = DEFAULT_BACKGROUND_COLOR;
+        if (isDocumentAvailable()) {
+            const el = this.element.nativeElement;
+            defaultColor = getComputedStyle(el).color;
+            defaultBackgroundColor = getComputedStyle(el).backgroundColor;
+        }
+        this.color = this.color || defaultColor;
+        this.backgroundColor = this.backgroundColor || defaultBackgroundColor;
+    }
     /**
      * Focuses the wrapper of the Signature.
      */
@@ -584,8 +591,8 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             <button
                 *ngIf="showMinimize"
                 kendoButton
-                class="k-signature-action k-signature-minimize"
-                icon="window-minimize"
+                class="k-signature-action k-signature-minimize k-rotate-180"
+                icon="hyperlink-open"
                 fillMode="flat"
                 [size]="size"
                 (click)="onMinimize()"
@@ -617,7 +624,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             </button>
         </div>
 
-        <kendo-dialog *ngIf="isOpen" (click)="onDialogClick($event)">
+        <kendo-dialog *ngIf="isOpen" (click)="onDialogClick($event)" (keydown)="onDialogKeydown($event)">
             <kendo-signature
                 [readonly]="readonly"
                 [disabled]="disabled"
@@ -677,8 +684,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <button
                 *ngIf="showMinimize"
                 kendoButton
-                class="k-signature-action k-signature-minimize"
-                icon="window-minimize"
+                class="k-signature-action k-signature-minimize k-rotate-180"
+                icon="hyperlink-open"
                 fillMode="flat"
                 [size]="size"
                 (click)="onMinimize()"
@@ -710,7 +717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             </button>
         </div>
 
-        <kendo-dialog *ngIf="isOpen" (click)="onDialogClick($event)">
+        <kendo-dialog *ngIf="isOpen" (click)="onDialogClick($event)" (keydown)="onDialogKeydown($event)">
             <kendo-signature
                 [readonly]="readonly"
                 [disabled]="disabled"

package/fesm2015/kendo-angular-inputs.js

@@ -535,7 +535,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1662989272,
+    publishDate: 1663775032,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -11608,6 +11608,7 @@ class ColorPickerComponent {
             tileSize: this._paletteSettings.tileSize || 24,
             columns: this._paletteSettings.columns || presetColumns || 10
         };
+        this.handleHostId();
     }
     ngAfterViewInit() {
         const stylingInputs = ['size', 'rounded', 'fillMode'];
@@ -11615,7 +11616,6 @@ class ColorPickerComponent {
             this.handleClasses(this[input], input);
         });
         this.setHostElementAriaLabel();
-        this.handleHostId();
         this.initDomEvents();
     }
     ngOnChanges(changes) {
@@ -13140,6 +13140,8 @@ const DEFAULT_ROUNDED = 'medium';
 const DEFAULT_FILL_MODE = 'solid';
 const DEFAULT_POPUP_SCALE = 3;
 const DEFAULT_EXPORT_SCALE = 2;
+const DEFAULT_COLOR = '#000000';
+const DEFAULT_BACKGROUND_COLOR = '#ffffff';
 /**
  * Represents the [Kendo UI Signature component for Angular]({% slug overview_signature %}).
  *
@@ -13184,7 +13186,7 @@ class SignatureComponent {
          * * `small`
          * * `medium` (default)
          * * `large`
-         * * `full`
+         * * `full` (not supported by the Signature)
          * * `none`
          */
         this.rounded = DEFAULT_ROUNDED;
@@ -13199,22 +13201,6 @@ class SignatureComponent {
          * * `none`
          */
         this.fillMode = DEFAULT_FILL_MODE;
-        /**
-         * The stroke color of the signature.
-         *
-         * Accepts CSS color names and hex values.
-         *
-         * @default '#000000'
-         */
-        this.color = '#000000';
-        /**
-         * The background color of the signature.
-         *
-         * Accepts CSS color names and hex values.
-         *
-         * @default '#ffffff'
-         */
-        this.backgroundColor = '#ffffff';
         /**
          * The stroke width of the signature.
          *
@@ -13429,6 +13415,7 @@ class SignatureComponent {
     }
     ngAfterViewInit() {
         this.applyHostClasses();
+        this.readThemeColors();
         this.ngZone.runOutsideAngular(() => {
             const element = this.canvas.nativeElement;
             this.instance = new SignaturePad(element, Object.assign(Object.assign({}, this.options), { onChange: () => this.onValueChange(), onDraw: () => this.onDraw(), onDrawEnd: () => this.onDrawEnd() }));
@@ -13499,6 +13486,15 @@ class SignatureComponent {
             this.isOpen = false;
         }
     }
+    /**
+     * @hidden
+     */
+    onDialogKeydown(e) {
+        if (e.keyCode === Keys.Escape) {
+            this.isOpen = false;
+            this.cd.detectChanges();
+        }
+    }
     /**
      * @hidden
      */
@@ -13567,6 +13563,17 @@ class SignatureComponent {
         ];
         this.hostClasses.forEach(([name, enabled]) => classList.toggle(name, enabled));
     }
+    readThemeColors() {
+        let defaultColor = DEFAULT_COLOR;
+        let defaultBackgroundColor = DEFAULT_BACKGROUND_COLOR;
+        if (isDocumentAvailable()) {
+            const el = this.element.nativeElement;
+            defaultColor = getComputedStyle(el).color;
+            defaultBackgroundColor = getComputedStyle(el).backgroundColor;
+        }
+        this.color = this.color || defaultColor;
+        this.backgroundColor = this.backgroundColor || defaultBackgroundColor;
+    }
     /**
      * Focuses the wrapper of the Signature.
      */
@@ -13699,8 +13706,8 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             <button
                 *ngIf="showMinimize"
                 kendoButton
-                class="k-signature-action k-signature-minimize"
-                icon="window-minimize"
+                class="k-signature-action k-signature-minimize k-rotate-180"
+                icon="hyperlink-open"
                 fillMode="flat"
                 [size]="size"
                 (click)="onMinimize()"
@@ -13732,7 +13739,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             </button>
         </div>
 
-        <kendo-dialog *ngIf="isOpen" (click)="onDialogClick($event)">
+        <kendo-dialog *ngIf="isOpen" (click)="onDialogClick($event)" (keydown)="onDialogKeydown($event)">
             <kendo-signature
                 [readonly]="readonly"
                 [disabled]="disabled"
@@ -13792,8 +13799,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <button
                 *ngIf="showMinimize"
                 kendoButton
-                class="k-signature-action k-signature-minimize"
-                icon="window-minimize"
+                class="k-signature-action k-signature-minimize k-rotate-180"
+                icon="hyperlink-open"
                 fillMode="flat"
                 [size]="size"
                 (click)="onMinimize()"
@@ -13825,7 +13832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             </button>
         </div>
 
-        <kendo-dialog *ngIf="isOpen" (click)="onDialogClick($event)">
+        <kendo-dialog *ngIf="isOpen" (click)="onDialogClick($event)" (keydown)="onDialogKeydown($event)">
             <kendo-signature
                 [readonly]="readonly"
                 [disabled]="disabled"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-inputs",
-  "version": "10.0.0",
+  "version": "10.1.0-dev.202209211545",
   "description": "Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",

package/signature/signature.component.d.ts

@@ -78,7 +78,7 @@ export declare class SignatureComponent implements ControlValueAccessor {
      * * `small`
      * * `medium` (default)
      * * `large`
-     * * `full`
+     * * `full` (not supported by the Signature)
      * * `none`
      */
     rounded: InputRounded;
@@ -98,17 +98,17 @@ export declare class SignatureComponent implements ControlValueAccessor {
      *
      * Accepts CSS color names and hex values.
      *
-     * @default '#000000'
+     * The default value is determined by the theme `$kendo-input-text` variable.
      */
-    color: string;
+    color: any;
     /**
      * The background color of the signature.
      *
      * Accepts CSS color names and hex values.
      *
-     * @default '#ffffff'
+     * The default value is determined by the theme `$kendo-input-bg` variable.
      */
-    backgroundColor: string;
+    backgroundColor: any;
     /**
      * The stroke width of the signature.
      *
@@ -272,6 +272,10 @@ export declare class SignatureComponent implements ControlValueAccessor {
      * @hidden
      */
     onDialogClick(e: any): void;
+    /**
+     * @hidden
+     */
+    onDialogKeydown(e: any): void;
     /**
      * @hidden
      */
@@ -296,6 +300,7 @@ export declare class SignatureComponent implements ControlValueAccessor {
      */
     onMinimize(): void;
     private applyHostClasses;
+    private readThemeColors;
     /**
      * Focuses the wrapper of the Signature.
      */