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

package/fesm2020/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, caretAltExpandIcon, xCircleIcon, dropletSlashIcon, dropletSliderIcon, paletteIcon, 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';
@@ -538,8 +538,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/'
 };
 
@@ -6071,16 +6071,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
  *
@@ -8642,6 +8632,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);
@@ -8682,7 +8677,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
@@ -8710,7 +8705,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>
@@ -8794,7 +8789,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>
@@ -8832,7 +8827,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>
@@ -8916,7 +8911,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>
@@ -8955,7 +8950,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 }]
@@ -9565,7 +9560,6 @@ class ColorGradientComponent {
     reset() {
         this.handleValueChange(undefined);
         this.updateUI();
-        this.host.nativeElement.focus();
     }
     /**
      * @hidden
@@ -10365,6 +10359,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';
@@ -10440,6 +10435,7 @@ class ColorPaletteComponent {
          */
         this.uniqueId = guid();
         this._tabindex = 0;
+        this.subs = new Subscription();
         this.notifyNgTouched = () => { };
         this.notifyNgChanged = () => { };
         validatePackage(packageMetadata);
@@ -10546,6 +10542,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();
@@ -10556,6 +10556,7 @@ class ColorPaletteComponent {
         }
     }
     ngOnDestroy() {
+        this.subs.unsubscribe();
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
         }
@@ -10699,7 +10700,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() {
@@ -10729,7 +10731,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,
@@ -10761,7 +10763,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"
@@ -10817,7 +10819,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"
@@ -10887,15 +10889,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']
             }] } });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -10946,7 +10939,7 @@ class FlatColorPickerHeaderComponent {
     onHeaderTabOut(ev, index) {
         if (index === 0) {
             ev.preventDefault();
-            this.tabOut.emit();
+            this.tabOut.emit(ev);
         }
     }
 }
@@ -10955,7 +10948,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
@@ -11014,7 +11009,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
@@ -11397,15 +11394,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);
@@ -11433,6 +11421,30 @@ 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
      */
@@ -11515,8 +11527,6 @@ class FlatColorPickerComponent {
      */
     onClearButtonClick() {
         this.resetInnerComponentValue();
-        this.internalNavigation = false;
-        this.host.nativeElement.focus();
         this.clearButtonClick.emit();
     }
     /**
@@ -11706,7 +11716,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"
@@ -11718,7 +11728,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"
@@ -11731,6 +11741,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
@@ -11829,7 +11840,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"
@@ -11841,7 +11852,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"
@@ -11854,6 +11865,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
@@ -12434,6 +12446,7 @@ class ColorPickerComponent {
         open = isPresent(open) ? open : !this.isOpen;
         if (open) {
             this.openPopup();
+            this.focusFirstElement();
         }
     }
     /**
@@ -12564,9 +12577,9 @@ 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();
             }
         });
@@ -12760,7 +12773,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"
@@ -12884,7 +12896,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"
@@ -13942,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';
@@ -13964,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.
          *
@@ -14242,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, {
@@ -14254,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();
         });
     }
@@ -14335,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();
+            });
         }
     }
     /**
@@ -14507,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"
@@ -14523,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"
@@ -14538,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"
@@ -14550,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"
@@ -14600,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: [{
@@ -14627,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"
@@ -14642,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"
@@ -14654,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"
@@ -14704,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>
@@ -14715,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']
@@ -14788,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.1",
+  "version": "11.3.0-develop.11",
   "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.1",
-    "@progress/kendo-angular-common": "11.3.0-develop.1",
-    "@progress/kendo-angular-dialog": "11.3.0-develop.1",
-    "@progress/kendo-angular-intl": "11.3.0-develop.1",
-    "@progress/kendo-angular-l10n": "11.3.0-develop.1",
-    "@progress/kendo-angular-popup": "11.3.0-develop.1",
-    "@progress/kendo-angular-icons": "11.3.0-develop.1",
+    "@progress/kendo-angular-buttons": "11.3.0-develop.11",
+    "@progress/kendo-angular-common": "11.3.0-develop.11",
+    "@progress/kendo-angular-dialog": "11.3.0-develop.11",
+    "@progress/kendo-angular-intl": "11.3.0-develop.11",
+    "@progress/kendo-angular-l10n": "11.3.0-develop.11",
+    "@progress/kendo-angular-popup": "11.3.0-develop.11",
+    "@progress/kendo-angular-icons": "11.3.0-develop.11",
     "rxjs": "^6.5.3 || ^7.0.0",
-    "@progress/kendo-angular-upload": "11.3.0-develop.1"
+    "@progress/kendo-angular-upload": "11.3.0-develop.11"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "11.3.0-develop.1",
+    "@progress/kendo-angular-schematics": "11.3.0-develop.11",
     "@progress/kendo-common": "^0.2.2",
     "@progress/kendo-draggable": "^3.0.0",
     "@progress/kendo-inputs-common": "^3.1.0"

package/shared/utils.d.ts

@@ -2,12 +2,6 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-/**
- * @hidden
- *
- * Returns true if the used browser is Safari.
- */
-export declare const isSafari: (userAgent: any) => boolean;
 /**
  * @hidden
  *