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

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: 1677099834,
-    version: '11.3.0-develop.9',
+    publishDate: 1677750368,
+    version: '11.3.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

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/fesm2015/progress-kendo-angular-inputs.mjs

@@ -539,8 +539,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1677099834,
-    version: '11.3.0-develop.9',
+    publishDate: 1677750368,
+    version: '11.3.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -13985,6 +13985,8 @@ class SignatureOpenEvent extends PreventableEvent {
 }
 
 const noop = () => { };
+let _id = 0;
+const nextId = () => 'k-signature-focusable-' + _id++;
 const FOCUSED_CLASS = 'k-focus';
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_ROUNDED = 'medium';
@@ -14007,6 +14009,10 @@ class SignatureComponent {
         this.cd = cd;
         this.localization = localization;
         this.staticHostClasses = true;
+        /**
+         * @hidden
+         */
+        this.focusableId = nextId();
         /**
          * Sets the read-only state of the Signature.
          *
@@ -14285,13 +14291,22 @@ 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, Object.assign(Object.assign({}, this.options), { onChange: () => this.onValueChange(), onDraw: () => this.onDraw(), onDrawEnd: () => this.onDrawEnd() }));
             if (this.value) {
                 this.instance.loadImage(this.value);
             }
+            if (this.maximized) {
+                this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                    var _a;
+                    (_a = this.minimizeButton) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+                });
+            }
             this.addEventListeners();
         });
     }
@@ -14373,12 +14388,14 @@ class SignatureComponent {
      * @hidden
      */
     onDialogClose() {
-        var _a;
         const args = new SignatureCloseEvent();
         this.close.next(args);
         if (!args.isDefaultPrevented()) {
             this.isOpen = false;
-            (_a = this.maximizeButton) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                var _a, _b;
+                (_b = (_a = (this.maximizeButton || this.element)) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.focus();
+            });
         }
     }
     /**
@@ -14553,11 +14570,11 @@ 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"
@@ -14569,10 +14586,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"
@@ -14584,6 +14610,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"
@@ -14596,13 +14623,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"
@@ -14646,10 +14666,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$1.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: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i1$1.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$1.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: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i1$1.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: [{
@@ -14673,10 +14694,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"
@@ -14688,6 +14718,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"
@@ -14700,13 +14731,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"
@@ -14750,6 +14774,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>
@@ -14761,12 +14786,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']
@@ -14834,6 +14858,12 @@ 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/fesm2020/progress-kendo-angular-inputs.mjs

@@ -538,8 +538,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1677099834,
-    version: '11.3.0-develop.9',
+    publishDate: 1677750368,
+    version: '11.3.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -13953,6 +13953,8 @@ class SignatureOpenEvent extends PreventableEvent {
 }
 
 const noop = () => { };
+let _id = 0;
+const nextId = () => 'k-signature-focusable-' + _id++;
 const FOCUSED_CLASS = 'k-focus';
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_ROUNDED = 'medium';
@@ -13975,6 +13977,10 @@ class SignatureComponent {
         this.cd = cd;
         this.localization = localization;
         this.staticHostClasses = true;
+        /**
+         * @hidden
+         */
+        this.focusableId = nextId();
         /**
          * Sets the read-only state of the Signature.
          *
@@ -14253,7 +14259,10 @@ 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, {
@@ -14265,6 +14274,11 @@ 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();
         });
     }
@@ -14346,7 +14360,9 @@ 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();
+            });
         }
     }
     /**
@@ -14518,11 +14534,11 @@ 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"
@@ -14534,10 +14550,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"
@@ -14549,6 +14574,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"
@@ -14561,13 +14587,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"
@@ -14611,10 +14630,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$1.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: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i1$1.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$1.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: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i1$1.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: [{
@@ -14638,10 +14658,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"
@@ -14653,6 +14682,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"
@@ -14665,13 +14695,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"
@@ -14715,6 +14738,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>
@@ -14726,12 +14750,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']
@@ -14799,6 +14822,12 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-inputs",
-  "version": "11.3.0-develop.9",
+  "version": "11.3.1-develop.1",
   "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",
@@ -33,19 +33,19 @@
     "@angular/platform-browser": "13 - 15",
     "@progress/kendo-drawing": "^1.17.2",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "11.3.0-develop.9",
-    "@progress/kendo-angular-common": "11.3.0-develop.9",
-    "@progress/kendo-angular-dialog": "11.3.0-develop.9",
-    "@progress/kendo-angular-intl": "11.3.0-develop.9",
-    "@progress/kendo-angular-l10n": "11.3.0-develop.9",
-    "@progress/kendo-angular-popup": "11.3.0-develop.9",
-    "@progress/kendo-angular-icons": "11.3.0-develop.9",
+    "@progress/kendo-angular-buttons": "11.3.1-develop.1",
+    "@progress/kendo-angular-common": "11.3.1-develop.1",
+    "@progress/kendo-angular-dialog": "11.3.1-develop.1",
+    "@progress/kendo-angular-intl": "11.3.1-develop.1",
+    "@progress/kendo-angular-l10n": "11.3.1-develop.1",
+    "@progress/kendo-angular-popup": "11.3.1-develop.1",
+    "@progress/kendo-angular-icons": "11.3.1-develop.1",
     "rxjs": "^6.5.3 || ^7.0.0",
-    "@progress/kendo-angular-upload": "11.3.0-develop.9"
+    "@progress/kendo-angular-upload": "11.3.1-develop.1"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "11.3.0-develop.9",
+    "@progress/kendo-angular-schematics": "11.3.1-develop.1",
     "@progress/kendo-common": "^0.2.2",
     "@progress/kendo-draggable": "^3.0.0",
     "@progress/kendo-inputs-common": "^3.1.0"

package/signature/signature.component.d.ts

@@ -21,8 +21,11 @@ export declare class SignatureComponent implements ControlValueAccessor {
     private cd;
     localization: LocalizationService;
     staticHostClasses: boolean;
+    /**
+     * @hidden
+     */
+    focusableId: string;
     direction: string;
-    maximizeButton: ElementRef;
     /**
      * Sets the read-only state of the Signature.
      *
@@ -190,6 +193,8 @@ export declare class SignatureComponent implements ControlValueAccessor {
      */
     minimize: EventEmitter<void>;
     canvas: ElementRef;
+    minimizeButton: ElementRef;
+    maximizeButton: ElementRef;
     /**
      * Indicates whether the Signature wrapper is focused.
      */
@@ -355,5 +360,5 @@ export declare class SignatureComponent implements ControlValueAccessor {
     private addEventListeners;
     private getMessage;
     static ɵfac: i0.ɵɵFactoryDeclaration<SignatureComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SignatureComponent, "kendo-signature", ["kendoSignature"], { "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"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; "minimize": "minimize"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SignatureComponent, "kendo-signature", ["kendoSignature"], { "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"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; "minimize": "minimize"; }, never, never>;
 }