@progress/kendo-angular-inputs 11.2.0 → 11.3.0-develop.10

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

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

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

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

package/colorpicker/flatcolorpicker.component.d.ts

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

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

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

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

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

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

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

package/esm2020/colorpicker/colorpicker.component.mjs

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

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

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

package/esm2020/colorpicker/flatcolorpicker.component.mjs

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

package/esm2020/package-metadata.mjs

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

package/esm2020/shared/utils.mjs

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

package/esm2020/textbox/textbox.component.mjs

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

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: 1676453652,
-    version: '11.2.0',
+    publishDate: 1677586072,
+    version: '11.3.0-develop.10',
     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"

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: 1676453652,
-    version: '11.2.0',
+    publishDate: 1677586072,
+    version: '11.3.0-develop.10',
     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"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-inputs",
-  "version": "11.2.0",
+  "version": "11.3.0-develop.10",
   "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.2.0",
-    "@progress/kendo-angular-common": "11.2.0",
-    "@progress/kendo-angular-dialog": "11.2.0",
-    "@progress/kendo-angular-intl": "11.2.0",
-    "@progress/kendo-angular-l10n": "11.2.0",
-    "@progress/kendo-angular-popup": "11.2.0",
-    "@progress/kendo-angular-icons": "11.2.0",
+    "@progress/kendo-angular-buttons": "11.3.0-develop.10",
+    "@progress/kendo-angular-common": "11.3.0-develop.10",
+    "@progress/kendo-angular-dialog": "11.3.0-develop.10",
+    "@progress/kendo-angular-intl": "11.3.0-develop.10",
+    "@progress/kendo-angular-l10n": "11.3.0-develop.10",
+    "@progress/kendo-angular-popup": "11.3.0-develop.10",
+    "@progress/kendo-angular-icons": "11.3.0-develop.10",
     "rxjs": "^6.5.3 || ^7.0.0",
-    "@progress/kendo-angular-upload": "11.2.0"
+    "@progress/kendo-angular-upload": "11.3.0-develop.10"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "11.2.0",
+    "@progress/kendo-angular-schematics": "11.3.0-develop.10",
     "@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
  *