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

package/fesm2015/progress-kendo-angular-inputs.mjs

@@ -10,14 +10,14 @@ import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, thro
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import * as i3 from '@progress/kendo-angular-common';
-import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1 } from '@progress/kendo-angular-common';
+import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1 } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, checkIcon, exclamationCircleIcon, xIcon, dropletSliderIcon, paletteIcon, dropletSlashIcon, caretAltExpandIcon, xCircleIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
 import * as i2 from '@progress/kendo-angular-buttons';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { browser, mobileOS, detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
+import { browser, mobileOS } from '@progress/kendo-common';
 import * as i1$2 from '@progress/kendo-angular-intl';
 import * as i2$1 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
@@ -539,8 +539,8 @@ 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/'
 };
 
@@ -6080,16 +6080,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
-/**
- * @hidden
- *
- * Returns true if the used browser is Safari.
- */
-const isSafari = (userAgent) => {
-    const desktopBrowser = detectDesktopBrowser(userAgent);
-    const mobileOS = detectMobileOS(userAgent);
-    return (desktopBrowser && desktopBrowser.safari) || (mobileOS && mobileOS.browser === 'mobilesafari');
-};
 /**
  * @hidden
  *
@@ -8556,7 +8546,7 @@ class FlatColorPickerHeaderComponent {
     onHeaderTabOut(ev, index) {
         if (index === 0) {
             ev.preventDefault();
-            this.tabOut.emit();
+            this.tabOut.emit(ev);
         }
     }
 }
@@ -8565,7 +8555,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
@@ -8624,7 +8616,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
@@ -8950,6 +8944,11 @@ 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);
@@ -8991,7 +8990,7 @@ 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
@@ -9019,7 +9018,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>
@@ -9103,7 +9102,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>
@@ -9141,7 +9140,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>
@@ -9225,7 +9224,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>
@@ -9264,7 +9263,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 }]
@@ -9791,7 +9790,6 @@ class ColorGradientComponent {
     reset() {
         this.handleValueChange(undefined);
         this.updateUI();
-        this.host.nativeElement.focus();
     }
     /**
      * @hidden
@@ -10593,6 +10591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type: Injectable
         }] });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const DEFAULT_TILE_SIZE = 24;
 const DEFAULT_COLUMNS_COUNT = 10;
 const DEFAULT_PRESET = 'office';
@@ -10668,6 +10667,7 @@ class ColorPaletteComponent {
          */
         this.uniqueId = guid();
         this._tabindex = 0;
+        this.subs = new Subscription();
         this.notifyNgTouched = () => { };
         this.notifyNgChanged = () => { };
         validatePackage(packageMetadata);
@@ -10774,6 +10774,10 @@ 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();
@@ -10784,6 +10788,7 @@ class ColorPaletteComponent {
         }
     }
     ngOnDestroy() {
+        this.subs.unsubscribe();
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
         }
@@ -10927,7 +10932,8 @@ 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() {
@@ -10957,7 +10963,7 @@ class ColorPaletteComponent {
     }
 }
 ColorPaletteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.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,
@@ -10989,7 +10995,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"
@@ -11045,7 +11051,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"
@@ -11115,15 +11121,6 @@ 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']
             }] } });
 
 /**
@@ -11425,15 +11422,6 @@ 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);
@@ -11461,6 +11449,31 @@ 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) {
+        var _a, _b;
+        if (this.preview) {
+            this.footer.lastButton.nativeElement.focus();
+            return;
+        }
+        event.stopImmediatePropagation();
+        const gradient = (_a = this.gradientElement) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        const palette = (_b = this.palette) === null || _b === void 0 ? void 0 : _b.host.nativeElement;
+        this.activeView === 'gradient' ? gradient.focus() : palette.focus();
+    }
     /**
      * @hidden
      */
@@ -11544,8 +11557,6 @@ class FlatColorPickerComponent {
      */
     onClearButtonClick() {
         this.resetInnerComponentValue();
-        this.internalNavigation = false;
-        this.host.nativeElement.focus();
         this.clearButtonClick.emit();
     }
     /**
@@ -11735,7 +11746,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"
@@ -11747,7 +11758,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"
@@ -11760,6 +11771,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
@@ -11858,7 +11870,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"
@@ -11870,7 +11882,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"
@@ -11883,6 +11895,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
@@ -12464,6 +12477,7 @@ class ColorPickerComponent {
         open = isPresent(open) ? open : !this.isOpen;
         if (open) {
             this.openPopup();
+            this.focusFirstElement();
         }
     }
     /**
@@ -12593,10 +12607,11 @@ class ColorPickerComponent {
     }
     focusFirstElement() {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            var _a, _b;
             if (this.flatColorPicker) {
-                const gradient = this.flatColorPicker.gradient;
-                const elementToFocus = gradient ? gradient.gradientDragHandle :
-                    this.flatColorPicker.palette.host;
+                const gradientDragHandle = (_a = this.flatColorPicker.gradient) === null || _a === void 0 ? void 0 : _a.gradientDragHandle;
+                const palette = (_b = this.flatColorPicker.palette) === null || _b === void 0 ? void 0 : _b.host;
+                const elementToFocus = gradientDragHandle ? gradientDragHandle : palette;
                 elementToFocus.nativeElement.focus();
             }
         });
@@ -12790,7 +12805,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"
@@ -12914,7 +12928,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"
@@ -13972,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';
@@ -13994,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.
          *
@@ -14272,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();
         });
     }
@@ -14360,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();
+            });
         }
     }
     /**
@@ -14540,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"
@@ -14556,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"
@@ -14571,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"
@@ -14583,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"
@@ -14633,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: [{
@@ -14660,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"
@@ -14675,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"
@@ -14687,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"
@@ -14737,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>
@@ -14748,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']
@@ -14821,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 }]
             }] } });
 
 /**