@progress/kendo-angular-inputs 11.3.0-develop.1 → 11.3.0-develop.11

package/colorpicker/color-input.component.d.ts

@@ -81,6 +81,7 @@ export declare class ColorInputComponent implements AfterViewInit, OnChanges {
     ngOnChanges(changes: SimpleChanges): void;
     get formatButtonTitle(): string;
     handleRgbaValueChange(): void;
+    focusDragHandle(event: any): void;
     handleHexValueChange(hex: string): void;
     handleRgbaInputBlur(): void;
     handleHexInputBlur(): void;

package/colorpicker/color-palette.component.d.ts

@@ -155,6 +155,7 @@ export declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnD
     private _columns;
     private _palette;
     private _tabindex;
+    private subs;
     private dynamicRTLSubscription;
     constructor(host: ElementRef, service: ColorPaletteService, cdr: ChangeDetectorRef, renderer: Renderer2, localizationService: LocalizationService, ngZone: NgZone);
     ngOnInit(): void;

package/colorpicker/flatcolorpicker.component.d.ts

@@ -178,15 +178,19 @@ export declare class FlatColorPickerComponent implements OnInit, AfterViewInit,
      * @hidden
      */
     get firstFocusable(): any;
-    /**
-     * @hidden
-     */
-    get lastFocusable(): any;
     constructor(host: ElementRef, service: FlatColorPickerService, localizationService: LocalizationService, cdr: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone, injector: Injector);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
+    /**
+     * @hidden
+     */
+    focusFirstHeaderButton(): void;
+    /**
+     * @hidden
+     */
+    lastFocusable(event: any): any;
     /**
      * @hidden
      */

package/esm2020/colorpicker/color-gradient.component.mjs

@@ -300,7 +300,6 @@ export class ColorGradientComponent {
     reset() {
         this.handleValueChange(undefined);
         this.updateUI();
-        this.host.nativeElement.focus();
     }
     /**
      * @hidden

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

@@ -108,6 +108,11 @@ export class ColorInputComponent {
         this.hex = parseColor(color, 'hex', this.opacity);
         this.valueChange.emit(color);
     }
+    focusDragHandle(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        this.tabOut.emit();
+    }
     handleHexValueChange(hex) {
         this.hex = hex;
         const color = parseColor(hex, 'rgba', this.opacity);
@@ -148,7 +153,7 @@ export class ColorInputComponent {
     }
 }
 ColorInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColorInputComponent, 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: ["blueInput"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
+ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColorInputComponent, 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: `
         <div class="k-vstack">
             <button 
                 kendoButton
@@ -176,7 +181,7 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 (blur)="handleHexInputBlur()"
                 (input)="handleHexValueChange(hexInput.value)"
                 [tabindex]="tabindex.toString()"
-                (keydown.tab)="$event.preventDefault(); tabOut.emit();"
+                (keydown.tab)="focusDragHandle($event)"
             />
             <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
         </div>
@@ -260,7 +265,7 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                     [decimals]="2"
                     (blur)="handleRgbaInputBlur()"
                     (valueChange)="handleRgbaValueChange()"
-                    (keydown.tab)="$event.preventDefault(); tabOut.emit();">
+                    (keydown.tab)="focusDragHandle($event)">
                 </kendo-numerictextbox>
                 <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
             </div>
@@ -298,7 +303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 (blur)="handleHexInputBlur()"
                 (input)="handleHexValueChange(hexInput.value)"
                 [tabindex]="tabindex.toString()"
-                (keydown.tab)="$event.preventDefault(); tabOut.emit();"
+                (keydown.tab)="focusDragHandle($event)"
             />
             <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
         </div>
@@ -382,7 +387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [decimals]="2"
                     (blur)="handleRgbaInputBlur()"
                     (valueChange)="handleRgbaValueChange()"
-                    (keydown.tab)="$event.preventDefault(); tabOut.emit();">
+                    (keydown.tab)="focusDragHandle($event)">
                 </kendo-numerictextbox>
                 <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
             </div>
@@ -421,7 +426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['hexInput']
             }], blueInput: [{
                 type: ViewChild,
-                args: ['blueInput']
+                args: ['blue']
             }], toggleFormatButton: [{
                 type: ViewChild,
                 args: ['toggleFormatButton', { static: false, read: ElementRef }]

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

@@ -2,11 +2,13 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, EventEmitter, Output, HostBinding, HostListener, forwardRef, ChangeDetectorRef, Renderer2, ElementRef, NgZone } from '@angular/core';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, Input, EventEmitter, Output, HostBinding, forwardRef, ChangeDetectorRef, Renderer2, ElementRef, NgZone } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Keys, KendoInput, guid } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
+import { Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { ColorPaletteLocalizationService } from './localization/colorpalette-localization.service';
 import { packageMetadata } from '../package-metadata';
@@ -94,6 +96,7 @@ export class ColorPaletteComponent {
          */
         this.uniqueId = guid();
         this._tabindex = 0;
+        this.subs = new Subscription();
         this.notifyNgTouched = () => { };
         this.notifyNgChanged = () => { };
         validatePackage(packageMetadata);
@@ -200,6 +203,10 @@ export class ColorPaletteComponent {
             this.palette = this.palette || defaultPreset;
             this.setRows();
         }
+        const elem = this.host.nativeElement;
+        this.subs.add(this.renderer.listen(elem, 'keydown', event => this.handleKeydown(event)));
+        this.subs.add(this.renderer.listen(elem, 'focus', () => this.handleFocus()));
+        this.subs.add(this.renderer.listen(elem, 'blur', () => this.handleHostBlur()));
     }
     ngAfterViewInit() {
         this.setHostElementAriaLabel();
@@ -210,6 +217,7 @@ export class ColorPaletteComponent {
         }
     }
     ngOnDestroy() {
+        this.subs.unsubscribe();
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
         }
@@ -353,7 +361,8 @@ export class ColorPaletteComponent {
         this.focusedCell = this.selectedCell;
     }
     selectCell(value) {
-        this.selectedCell = this.service.getCellCoordsFor(value);
+        const parsedColor = parseColor(value, 'hex');
+        this.selectedCell = this.service.getCellCoordsFor(parsedColor);
         this.focusedCell = this.selectedCell;
     }
     setRows() {
@@ -383,7 +392,7 @@ export class ColorPaletteComponent {
     }
 }
 ColorPaletteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.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 });
-ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColorPaletteComponent, 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: { listeners: { "keydown": "handleKeydown($event)", "focus": "handleFocus($event)", "blur": "handleHostBlur()" }, properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "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: [
+ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColorPaletteComponent, 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", "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,
@@ -415,7 +424,7 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                             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"
+                            [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
                             [attr.aria-label]="color"
                             class="k-colorpalette-tile"
                             [id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
@@ -471,7 +480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             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"
+                            [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
                             [attr.aria-label]="color"
                             class="k-colorpalette-tile"
                             [id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
@@ -541,13 +550,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], readonlyAttribute: [{
                 type: HostBinding,
                 args: ['attr.aria-readonly']
-            }], handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], handleFocus: [{
-                type: HostListener,
-                args: ['focus', ['$event']]
-            }], handleHostBlur: [{
-                type: HostListener,
-                args: ['blur']
             }] } });

package/esm2020/colorpicker/colorpicker.component.mjs

@@ -492,6 +492,7 @@ export class ColorPickerComponent {
         open = isPresent(open) ? open : !this.isOpen;
         if (open) {
             this.openPopup();
+            this.focusFirstElement();
         }
     }
     /**
@@ -622,9 +623,9 @@ export class ColorPickerComponent {
     focusFirstElement() {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
             if (this.flatColorPicker) {
-                const gradient = this.flatColorPicker.gradient;
-                const elementToFocus = gradient ? gradient.gradientDragHandle :
-                    this.flatColorPicker.palette.host;
+                const gradientDragHandle = this.flatColorPicker.gradient?.gradientDragHandle;
+                const palette = this.flatColorPicker.palette?.host;
+                const elementToFocus = gradientDragHandle ? gradientDragHandle : palette;
                 elementToFocus.nativeElement.focus();
             }
         });
@@ -818,7 +819,6 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             kendoButton
             tabindex="-1"
             type="button"
-            role="none"
             icon="caret-alt-down"
             [svgIcon]="arrowDownIcon"
             aria-hidden="true"
@@ -942,7 +942,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             kendoButton
             tabindex="-1"
             type="button"
-            role="none"
             icon="caret-alt-down"
             [svgIcon]="arrowDownIcon"
             aria-hidden="true"

package/esm2020/colorpicker/flatcolorpicker-header.component.mjs

@@ -57,7 +57,7 @@ export class FlatColorPickerHeaderComponent {
     onHeaderTabOut(ev, index) {
         if (index === 0) {
             ev.preventDefault();
-            this.tabOut.emit();
+            this.tabOut.emit(ev);
         }
     }
 }
@@ -66,7 +66,9 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
         <div class="k-coloreditor-header-actions k-hstack">
             <div 
                 *ngIf="viewButtons" 
-                class="k-button-group k-button-group-flat">
+                class="k-button-group k-button-group-flat"
+                role="group"
+            >
                 <button 
                     *ngFor="let view of views; let i = index;"
                     kendoButton
@@ -125,7 +127,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <div class="k-coloreditor-header-actions k-hstack">
             <div 
                 *ngIf="viewButtons" 
-                class="k-button-group k-button-group-flat">
+                class="k-button-group k-button-group-flat"
+                role="group"
+            >
                 <button 
                     *ngFor="let view of views; let i = index;"
                     kendoButton

package/esm2020/colorpicker/flatcolorpicker.component.mjs

@@ -240,15 +240,6 @@ export class FlatColorPickerComponent {
         }
         return this.activeView === 'gradient' ? this.gradient : this.palette;
     }
-    /**
-     * @hidden
-     */
-    get lastFocusable() {
-        if (this.preview) {
-            return this.footer.lastButton.nativeElement;
-        }
-        return this.activeView === 'gradient' ? this.gradient : this.palette;
-    }
     ngOnInit() {
         this.selection = this.value;
         this.control = this.injector.get(NgControl, null);
@@ -276,6 +267,30 @@ export class FlatColorPickerComponent {
         }
         this.subscriptions.unsubscribe();
     }
+    /**
+     * @hidden
+     */
+    focusFirstHeaderButton() {
+        if (this.gradientElement.nativeElement === document.activeElement) {
+            if (this.headerHasContent && !this.preview) {
+                const firstHeaderButton = this.headerElement.nativeElement.querySelector('.k-button');
+                firstHeaderButton.focus();
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    lastFocusable(event) {
+        if (this.preview) {
+            this.footer.lastButton.nativeElement.focus();
+            return;
+        }
+        event.stopImmediatePropagation();
+        const gradient = this.gradientElement?.nativeElement;
+        const palette = this.palette?.host.nativeElement;
+        this.activeView === 'gradient' ? gradient.focus() : palette.focus();
+    }
     /**
      * @hidden
      */
@@ -358,8 +373,6 @@ export class FlatColorPickerComponent {
      */
     onClearButtonClick() {
         this.resetInnerComponentValue();
-        this.internalNavigation = false;
-        this.host.nativeElement.focus();
         this.clearButtonClick.emit();
     }
     /**
@@ -549,7 +562,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             hexInputPlaceholder="HEX">
         </ng-container>
         <div kendoFlatColorPickerHeader
-            [innerTabIndex]="this.innerTabIndex"
+            [innerTabIndex]="innerTabIndex"
             *ngIf="headerHasContent"
             #header
             [clearButton]="clearButton"
@@ -561,7 +574,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             (clearButtonClick)="onClearButtonClick()"
             (viewChange)="onViewChange($event)"
             (valuePaneClick)="resetSelection($event)"
-            (tabOut)="lastFocusable.focus()"></div>
+            (tabOut)="lastFocusable($event)"></div>
         <div class="k-coloreditor-views k-vstack">
             <kendo-colorgradient #gradient
                 [tabindex]="innerTabIndex"
@@ -574,6 +587,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                 [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
                 [gradientSliderStep]="gradientSettings.gradientSliderStep"
                 [readonly]="readonly"
+                (keydown.tab)="focusFirstHeaderButton()"
                 (valueChange)="handleValueChange($event)"
             ></kendo-colorgradient>
             <kendo-colorpalette #palette
@@ -672,7 +686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             hexInputPlaceholder="HEX">
         </ng-container>
         <div kendoFlatColorPickerHeader
-            [innerTabIndex]="this.innerTabIndex"
+            [innerTabIndex]="innerTabIndex"
             *ngIf="headerHasContent"
             #header
             [clearButton]="clearButton"
@@ -684,7 +698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             (clearButtonClick)="onClearButtonClick()"
             (viewChange)="onViewChange($event)"
             (valuePaneClick)="resetSelection($event)"
-            (tabOut)="lastFocusable.focus()"></div>
+            (tabOut)="lastFocusable($event)"></div>
         <div class="k-coloreditor-views k-vstack">
             <kendo-colorgradient #gradient
                 [tabindex]="innerTabIndex"
@@ -697,6 +711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
                 [gradientSliderStep]="gradientSettings.gradientSliderStep"
                 [readonly]="readonly"
+                (keydown.tab)="focusFirstHeaderButton()"
                 (valueChange)="handleValueChange($event)"
             ></kendo-colorgradient>
             <kendo-colorpalette #palette

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1676463662,
-    version: '11.3.0-develop.1',
+    publishDate: 1677599249,
+    version: '11.3.0-develop.11',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/shared/utils.mjs

@@ -2,17 +2,6 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { detectDesktopBrowser, detectMobileOS } from "@progress/kendo-common";
-/**
- * @hidden
- *
- * Returns true if the used browser is Safari.
- */
-export const isSafari = (userAgent) => {
-    const desktopBrowser = detectDesktopBrowser(userAgent);
-    const mobileOS = detectMobileOS(userAgent);
-    return (desktopBrowser && desktopBrowser.safari) || (mobileOS && mobileOS.browser === 'mobilesafari');
-};
 /**
  * @hidden
  *

package/esm2020/signature/signature.component.mjs

@@ -12,6 +12,7 @@ import { isNone, isPresent, ROUNDED_MAP, SIZE_MAP } from '../common/utils';
 import { packageMetadata } from '../package-metadata';
 import { SignatureCloseEvent, SignatureOpenEvent } from './events';
 import { xIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
+import { take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-buttons";
@@ -19,6 +20,8 @@ import * as i3 from "@progress/kendo-angular-dialog";
 import * as i4 from "./localization/localized-signature-messages.directive";
 import * as i5 from "@angular/common";
 const noop = () => { };
+let _id = 0;
+const nextId = () => 'k-signature-focusable-' + _id++;
 const FOCUSED_CLASS = 'k-focus';
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_ROUNDED = 'medium';
@@ -41,6 +44,10 @@ export class SignatureComponent {
         this.cd = cd;
         this.localization = localization;
         this.staticHostClasses = true;
+        /**
+         * @hidden
+         */
+        this.focusableId = nextId();
         /**
          * Sets the read-only state of the Signature.
          *
@@ -319,7 +326,10 @@ export class SignatureComponent {
             return;
         }
         this.applyHostClasses();
-        this.readThemeColors();
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            this.readThemeColors();
+            this.instance.setOptions(this.options);
+        });
         this.ngZone.runOutsideAngular(() => {
             const element = this.canvas.nativeElement;
             this.instance = new SignaturePad(element, {
@@ -331,6 +341,11 @@ export class SignatureComponent {
             if (this.value) {
                 this.instance.loadImage(this.value);
             }
+            if (this.maximized) {
+                this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                    this.minimizeButton?.nativeElement.focus();
+                });
+            }
             this.addEventListeners();
         });
     }
@@ -412,7 +427,9 @@ export class SignatureComponent {
         this.close.next(args);
         if (!args.isDefaultPrevented()) {
             this.isOpen = false;
-            this.maximizeButton?.nativeElement.focus();
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                (this.maximizeButton || this.element)?.nativeElement?.focus();
+            });
         }
     }
     /**
@@ -584,11 +601,11 @@ export class SignatureComponent {
     }
 }
 SignatureComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SignatureComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SignatureComponent, selector: "kendo-signature", inputs: { readonly: "readonly", disabled: "disabled", width: "width", height: "height", value: "value", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", color: "color", backgroundColor: "backgroundColor", strokeWidth: "strokeWidth", smooth: "smooth", maximizable: "maximizable", maximized: "maximized", popupScale: "popupScale", exportScale: "exportScale", parentLocalization: "parentLocalization", hideLine: "hideLine" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", minimize: "minimize" }, host: { properties: { "class.k-signature": "this.staticHostClasses", "class.k-input": "this.staticHostClasses", "attr.dir": "this.direction", "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabled", "style.width.px": "this.width", "style.height.px": "this.height" } }, providers: [
+SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SignatureComponent, selector: "kendo-signature", inputs: { focusableId: "focusableId", readonly: "readonly", disabled: "disabled", width: "width", height: "height", value: "value", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", color: "color", backgroundColor: "backgroundColor", strokeWidth: "strokeWidth", smooth: "smooth", maximizable: "maximizable", maximized: "maximized", popupScale: "popupScale", exportScale: "exportScale", parentLocalization: "parentLocalization", hideLine: "hideLine" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", minimize: "minimize" }, host: { properties: { "class.k-signature": "this.staticHostClasses", "class.k-input": "this.staticHostClasses", "attr.dir": "this.direction", "class.k-readonly": "this.readonly", "class.k-disabled": "this.disabled", "style.width.px": "this.width", "style.height.px": "this.height" } }, providers: [
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.signature' },
         { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SignatureComponent) }
-    ], viewQueries: [{ propertyName: "maximizeButton", first: true, predicate: ["maximizeButton"], descendants: true, read: ElementRef }, { propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], exportAs: ["kendoSignature"], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "minimizeButton", first: true, predicate: ["minimize"], descendants: true, read: ElementRef }, { propertyName: "maximizeButton", first: true, predicate: ["maximize"], descendants: true, read: ElementRef }], exportAs: ["kendoSignature"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoSignatureLocalizedMessages
             i18n-clear="kendo.signature.clear|The message for the Clear button."
             clear="Clear"
@@ -600,10 +617,19 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             canvasLabel="Signature canvas">
         </ng-container>
 
+        <div
+            #canvas
+            class="k-signature-canvas"
+            [attr.tabindex]="tabindex"
+            [id]="focusableId"
+            role="img"
+            [attr.aria-label]="canvasLabel"
+        ></div>
+
         <div class="k-signature-actions k-signature-actions-top">
             <button
+                #maximize
                 *ngIf="showMaximize"
-                #maximizeButton
                 kendoButton
                 class="k-signature-action k-signature-maximize"
                 icon="hyperlink-open"
@@ -615,6 +641,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [title]="maximizeTitle">
             </button>
             <button
+                #minimize
                 *ngIf="showMinimize"
                 kendoButton
                 class="k-signature-action k-signature-minimize k-rotate-180"
@@ -627,13 +654,6 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [title]="minimizeTitle">
             </button>
         </div>
-        <div
-            #canvas
-            class="k-signature-canvas"
-            [attr.tabindex]="tabindex"
-            role="img"
-            [attr.aria-label]="canvasLabel"
-        ></div>
         <div
             *ngIf="!hideLine"
             class="k-signature-line"
@@ -677,10 +697,11 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [width]="popupWidth"
                 [height]="popupHeight"
                 [popupScale]="popupScale"
+                [exportScale]="(1 / popupScale) * exportScale"
                 [parentLocalization]="localization">
             </kendo-signature>
         </kendo-dialog>
-    `, isInline: true, components: [{ type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SignatureComponent, selector: "kendo-signature", inputs: ["readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "exportScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }], directives: [{ type: i4.LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SignatureComponent, selector: "kendo-signature", inputs: ["focusableId", "readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "exportScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }], directives: [{ type: i4.LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SignatureComponent, decorators: [{
             type: Component,
             args: [{
@@ -704,10 +725,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             canvasLabel="Signature canvas">
         </ng-container>
 
+        <div
+            #canvas
+            class="k-signature-canvas"
+            [attr.tabindex]="tabindex"
+            [id]="focusableId"
+            role="img"
+            [attr.aria-label]="canvasLabel"
+        ></div>
+
         <div class="k-signature-actions k-signature-actions-top">
             <button
+                #maximize
                 *ngIf="showMaximize"
-                #maximizeButton
                 kendoButton
                 class="k-signature-action k-signature-maximize"
                 icon="hyperlink-open"
@@ -719,6 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [title]="maximizeTitle">
             </button>
             <button
+                #minimize
                 *ngIf="showMinimize"
                 kendoButton
                 class="k-signature-action k-signature-minimize k-rotate-180"
@@ -731,13 +762,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [title]="minimizeTitle">
             </button>
         </div>
-        <div
-            #canvas
-            class="k-signature-canvas"
-            [attr.tabindex]="tabindex"
-            role="img"
-            [attr.aria-label]="canvasLabel"
-        ></div>
         <div
             *ngIf="!hideLine"
             class="k-signature-line"
@@ -781,6 +805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [width]="popupWidth"
                 [height]="popupHeight"
                 [popupScale]="popupScale"
+                [exportScale]="(1 / popupScale) * exportScale"
                 [parentLocalization]="localization">
             </kendo-signature>
         </kendo-dialog>
@@ -792,12 +817,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.k-input']
+            }], focusableId: [{
+                type: Input
             }], direction: [{
                 type: HostBinding,
                 args: ['attr.dir']
-            }], maximizeButton: [{
-                type: ViewChild,
-                args: ['maximizeButton', { read: ElementRef }]
             }], readonly: [{
                 type: HostBinding,
                 args: ['class.k-readonly']
@@ -865,4 +889,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], canvas: [{
                 type: ViewChild,
                 args: ['canvas']
+            }], minimizeButton: [{
+                type: ViewChild,
+                args: ['minimize', { read: ElementRef }]
+            }], maximizeButton: [{
+                type: ViewChild,
+                args: ['maximize', { read: ElementRef }]
             }] } });

package/esm2020/textbox/textbox.component.mjs

@@ -11,11 +11,10 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { invokeElementMethod } from '../common/dom-utils';
 import { areSame, requiresZoneOnBlur, getStylingClasses } from '../common/utils';
-import { guid, hasObservers, KendoInput, Keys } from '@progress/kendo-angular-common';
+import { guid, hasObservers, KendoInput, Keys, isSafari } from '@progress/kendo-angular-common';
 import { TextBoxSuffixTemplateDirective } from './textbox-suffix.directive';
 import { TextBoxPrefixTemplateDirective } from './textbox-prefix.directive';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { isSafari } from '../shared/utils';
 import { checkIcon, exclamationCircleIcon, xIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";