@progress/kendo-angular-inputs 10.0.1-dev.202209201334 → 10.1.0-dev.202209260825

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: 1663680768,
+    publishDate: 1664180652,
     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/rangeslider/rangeslider.component.js

@@ -44,7 +44,6 @@ export class RangeSliderComponent extends SliderBase {
          * @hidden
          */
         this.focusableId = this.startHandleId;
-        this.handleZIndex = 0;
         this.activeHandle = 'startHandle';
         this.focusChangedProgrammatically = false;
         /**
@@ -90,8 +89,10 @@ export class RangeSliderComponent extends SliderBase {
             if (this.isDisabled || !handler) {
                 return;
             }
-            this.renderer.setStyle(e.target, 'zIndex', ++this.handleZIndex);
             const startHandleIsActive = isStartHandle(e.target);
+            const nonDraggedHandle = startHandleIsActive ? this.draghandleEnd.nativeElement : this.draghandleStart.nativeElement;
+            this.renderer.removeStyle(nonDraggedHandle, 'zIndex');
+            this.renderer.setStyle(e.target, 'zIndex', 1);
             const value = handler(Object.assign(Object.assign({}, options), { value: startHandleIsActive ? this.value[0] : this.value[1] }));
             if (startHandleIsActive) {
                 if (value > this.value[1]) {
@@ -210,7 +211,9 @@ export class RangeSliderComponent extends SliderBase {
         }
         const target = args.originalEvent.target;
         this.draggedHandle = target;
-        this.renderer.setStyle(target, 'zIndex', ++this.handleZIndex);
+        const nonDraggedHandle = this.draghandleStart.nativeElement === this.draggedHandle ? this.draghandleEnd.nativeElement : this.draghandleStart.nativeElement;
+        this.renderer.removeStyle(nonDraggedHandle, 'zIndex');
+        this.renderer.setStyle(target, 'zIndex', 1);
     }
     /**
      * @hidden

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: 1663680768,
+    publishDate: 1664180652,
     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'
 };
@@ -1669,7 +1669,6 @@ class RangeSliderComponent extends SliderBase {
          * @hidden
          */
         this.focusableId = this.startHandleId;
-        this.handleZIndex = 0;
         this.activeHandle = 'startHandle';
         this.focusChangedProgrammatically = false;
         /**
@@ -1715,8 +1714,10 @@ class RangeSliderComponent extends SliderBase {
             if (this.isDisabled || !handler) {
                 return;
             }
-            this.renderer.setStyle(e.target, 'zIndex', ++this.handleZIndex);
             const startHandleIsActive = isStartHandle(e.target);
+            const nonDraggedHandle = startHandleIsActive ? this.draghandleEnd.nativeElement : this.draghandleStart.nativeElement;
+            this.renderer.removeStyle(nonDraggedHandle, 'zIndex');
+            this.renderer.setStyle(e.target, 'zIndex', 1);
             const value = handler(Object.assign(Object.assign({}, options), { value: startHandleIsActive ? this.value[0] : this.value[1] }));
             if (startHandleIsActive) {
                 if (value > this.value[1]) {
@@ -1835,7 +1836,9 @@ class RangeSliderComponent extends SliderBase {
         }
         const target = args.originalEvent.target;
         this.draggedHandle = target;
-        this.renderer.setStyle(target, 'zIndex', ++this.handleZIndex);
+        const nonDraggedHandle = this.draghandleStart.nativeElement === this.draggedHandle ? this.draghandleEnd.nativeElement : this.draghandleStart.nativeElement;
+        this.renderer.removeStyle(nonDraggedHandle, 'zIndex');
+        this.renderer.setStyle(target, 'zIndex', 1);
     }
     /**
      * @hidden
@@ -13140,6 +13143,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 +13189,7 @@ class SignatureComponent {
          * * `small`
          * * `medium` (default)
          * * `large`
-         * * `full`
+         * * `full` (not supported by the Signature)
          * * `none`
          */
         this.rounded = DEFAULT_ROUNDED;
@@ -13199,22 +13204,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 +13418,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 +13489,15 @@ class SignatureComponent {
             this.isOpen = false;
         }
     }
+    /**
+     * @hidden
+     */
+    onDialogKeydown(e) {
+        if (e.keyCode === Keys.Escape) {
+            this.isOpen = false;
+            this.cd.detectChanges();
+        }
+    }
     /**
      * @hidden
      */
@@ -13567,6 +13566,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 +13709,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 +13742,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 +13802,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 +13835,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.1-dev.202209201334",
+  "version": "10.1.0-dev.202209260825",
   "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/rangeslider/rangeslider.component.d.ts

@@ -38,7 +38,6 @@ export declare class RangeSliderComponent extends SliderBase implements AfterVie
      */
     focusableId: string;
     private draggedHandle;
-    private handleZIndex;
     private lastHandlePosition;
     private activeHandle;
     private focusChangedProgrammatically;

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.
      */