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

package/button/button.component.d.ts

@@ -178,6 +178,13 @@ export declare class ButtonComponent implements OnDestroy, AfterViewInit {
      * @hidden
      */
     set look(value: 'flat' | 'outline' | 'clear' | 'default');
+    /**
+     * Alias for ElementRef.nativeElement to workaround
+     * ViewChild() selectors that used to return the host element before v11.
+     *
+     * @hidden
+     */
+    get nativeElement(): any;
     constructor(element: ElementRef, renderer: Renderer2, service: KendoButtonService, localization: LocalizationService, ngZone: NgZone);
     ngOnInit(): void;
     ngOnChanges(change: SimpleChanges): void;

package/esm2020/button/button.component.mjs

@@ -4,18 +4,19 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, Renderer2, Output, Optional, NgZone, isDevMode } from '@angular/core';
 import { KendoButtonService } from './button.service';
-import { isDocumentAvailable, isChanged, hasObservers, Keys } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isChanged, hasObservers, Keys, isSafari, isFirefox } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { Subscription } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
-import { getStylingClasses, getThemeColorClasses, isFirefox } from '../util';
+import { getStylingClasses, getThemeColorClasses } from '../util';
 import * as i0 from "@angular/core";
 import * as i1 from "./button.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 import * as i3 from "@progress/kendo-angular-icons";
 import * as i4 from "@angular/common";
 const SPAN_TAG_NAME = 'SPAN';
+const BUTTON_TAG_NAME = 'BUTTON';
 const KENDO_BUTTON_TAG_NAME = 'KENDO-BUTTON';
 const DEFAULT_ROUNDED = 'medium';
 const DEFAULT_SIZE = 'medium';
@@ -288,6 +289,15 @@ export class ButtonComponent {
                 break;
         }
     }
+    /**
+     * Alias for ElementRef.nativeElement to workaround
+     * ViewChild() selectors that used to return the host element before v11.
+     *
+     * @hidden
+     */
+    get nativeElement() {
+        return this.element;
+    }
     ngOnInit() {
         const elementTagName = this.element.tagName;
         const isSpanOrKendoButton = elementTagName === SPAN_TAG_NAME || elementTagName === KENDO_BUTTON_TAG_NAME;
@@ -311,6 +321,15 @@ export class ButtonComponent {
                     this._onButtonClick();
                 }
             }));
+            this.subs.add(this.renderer.listen(this.element, 'mousedown', (event) => {
+                const elementTagName = this.element.tagName;
+                const isButton = elementTagName === BUTTON_TAG_NAME;
+                const isBrowserSafari = isDocumentAvailable() && isSafari(navigator.userAgent);
+                if (!this.isDisabled && isButton && isBrowserSafari) {
+                    event.preventDefault();
+                    this.element.focus();
+                }
+            }));
         });
     }
     ngOnChanges(change) {

package/esm2020/listbutton/list-button.mjs

@@ -167,7 +167,7 @@ export class ListButton {
         if (this._disabled) {
             return;
         }
-        this._toggle(!this.openState);
+        this._toggle(!this.openState, true);
         if (!this.isClosePrevented) {
             this.focusService.focus(this.openState ? 0 : -1);
         }
@@ -229,7 +229,8 @@ export class ListButton {
         if (this.disabled) {
             return;
         }
-        this._toggle((open === undefined) ? !this.openState : open);
+        const value = open === undefined ? !this.openState : open;
+        this._toggle(value, false);
     }
     /**
      * @hidden
@@ -343,20 +344,22 @@ export class ListButton {
     onArrowKeyNavigate({ index }) {
         this.focusService.focus(index);
     }
-    _toggle(open) {
+    _toggle(open, emitEvent) {
         if (this.openState === open) {
             return;
         }
         const eventArgs = new PreventableEvent();
-        if (open && !this.openState) {
-            this.open.emit(eventArgs);
-        }
-        else if (!open && this.openState) {
-            this.close.emit(eventArgs);
-        }
-        if (eventArgs.isDefaultPrevented()) {
-            this.isClosePrevented = true;
-            return;
+        if (emitEvent) {
+            if (open && !this.openState) {
+                this.open.emit(eventArgs);
+            }
+            else if (!open && this.openState) {
+                this.close.emit(eventArgs);
+            }
+            if (eventArgs.isDefaultPrevented()) {
+                this.isClosePrevented = true;
+                return;
+            }
         }
         this.openState = open;
         this.destroyPopup();

package/esm2020/package-metadata.mjs

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

package/esm2020/util.mjs

@@ -2,7 +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
  */
@@ -94,13 +93,3 @@ export const getThemeColorClasses = (componentType, prevFillMode, fillMode, prev
         toAdd: newValue !== 'none' ? `k-${componentType}-${fillMode}-${newValue}` : ''
     };
 };
-/**
- * @hidden
- *
- * Returns true if the used browser is Firefox.
- */
-export const isFirefox = (userAgent) => {
-    const desktopBrowser = detectDesktopBrowser(userAgent);
-    const mobileOS = detectMobileOS(userAgent);
-    return (desktopBrowser && desktopBrowser.mozilla) || (mobileOS && mobileOS.browser === 'firefox');
-};

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

@@ -5,12 +5,11 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, isDevMode, Component, Optional, Input, Output, HostBinding, HostListener, ContentChildren, NgModule, Directive, InjectionToken, Inject, forwardRef, ElementRef, ViewContainerRef, ContentChild, ViewChild } from '@angular/core';
 import * as i9 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, Keys, isChanged, hasObservers, guid, anyChanged, EventsModule } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isFirefox, Keys, isSafari, isChanged, hasObservers, guid, anyChanged, EventsModule } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { Subject, Subscription, fromEvent, merge } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
-import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import * as i2 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i3 from '@angular/common';
@@ -29,8 +28,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1676463576,
-    version: '11.3.0-develop.1',
+    publishDate: 1677599157,
+    version: '11.3.0-develop.11',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -125,16 +124,6 @@ const getThemeColorClasses = (componentType, prevFillMode, fillMode, previousVal
         toAdd: newValue !== 'none' ? `k-${componentType}-${fillMode}-${newValue}` : ''
     };
 };
-/**
- * @hidden
- *
- * Returns true if the used browser is Firefox.
- */
-const isFirefox = (userAgent) => {
-    const desktopBrowser = detectDesktopBrowser(userAgent);
-    const mobileOS = detectMobileOS(userAgent);
-    return (desktopBrowser && desktopBrowser.mozilla) || (mobileOS && mobileOS.browser === 'firefox');
-};
 
 /**
  * @hidden
@@ -155,6 +144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }] });
 
 const SPAN_TAG_NAME = 'SPAN';
+const BUTTON_TAG_NAME = 'BUTTON';
 const KENDO_BUTTON_TAG_NAME = 'KENDO-BUTTON';
 const DEFAULT_ROUNDED$3 = 'medium';
 const DEFAULT_SIZE$2 = 'medium';
@@ -427,6 +417,15 @@ class ButtonComponent {
                 break;
         }
     }
+    /**
+     * Alias for ElementRef.nativeElement to workaround
+     * ViewChild() selectors that used to return the host element before v11.
+     *
+     * @hidden
+     */
+    get nativeElement() {
+        return this.element;
+    }
     ngOnInit() {
         const elementTagName = this.element.tagName;
         const isSpanOrKendoButton = elementTagName === SPAN_TAG_NAME || elementTagName === KENDO_BUTTON_TAG_NAME;
@@ -450,6 +449,15 @@ class ButtonComponent {
                     this._onButtonClick();
                 }
             }));
+            this.subs.add(this.renderer.listen(this.element, 'mousedown', (event) => {
+                const elementTagName = this.element.tagName;
+                const isButton = elementTagName === BUTTON_TAG_NAME;
+                const isBrowserSafari = isDocumentAvailable() && isSafari(navigator.userAgent);
+                if (!this.isDisabled && isButton && isBrowserSafari) {
+                    event.preventDefault();
+                    this.element.focus();
+                }
+            }));
         });
     }
     ngOnChanges(change) {
@@ -1708,7 +1716,7 @@ class ListButton {
         if (this._disabled) {
             return;
         }
-        this._toggle(!this.openState);
+        this._toggle(!this.openState, true);
         if (!this.isClosePrevented) {
             this.focusService.focus(this.openState ? 0 : -1);
         }
@@ -1770,7 +1778,8 @@ class ListButton {
         if (this.disabled) {
             return;
         }
-        this._toggle((open === undefined) ? !this.openState : open);
+        const value = open === undefined ? !this.openState : open;
+        this._toggle(value, false);
     }
     /**
      * @hidden
@@ -1884,20 +1893,22 @@ class ListButton {
     onArrowKeyNavigate({ index }) {
         this.focusService.focus(index);
     }
-    _toggle(open) {
+    _toggle(open, emitEvent) {
         if (this.openState === open) {
             return;
         }
         const eventArgs = new PreventableEvent();
-        if (open && !this.openState) {
-            this.open.emit(eventArgs);
-        }
-        else if (!open && this.openState) {
-            this.close.emit(eventArgs);
-        }
-        if (eventArgs.isDefaultPrevented()) {
-            this.isClosePrevented = true;
-            return;
+        if (emitEvent) {
+            if (open && !this.openState) {
+                this.open.emit(eventArgs);
+            }
+            else if (!open && this.openState) {
+                this.close.emit(eventArgs);
+            }
+            if (eventArgs.isDefaultPrevented()) {
+                this.isClosePrevented = true;
+                return;
+            }
         }
         this.openState = open;
         this.destroyPopup();

package/fesm2020/progress-kendo-angular-buttons.mjs

@@ -6,11 +6,10 @@ import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, isDevMode, Component, Optional, Input, Output, HostBinding, HostListener, ContentChildren, NgModule, Directive, InjectionToken, Inject, forwardRef, ElementRef, ViewContainerRef, ContentChild, ViewChild } from '@angular/core';
 import { Subject, Subscription, fromEvent, merge } from 'rxjs';
 import * as i9 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, Keys, isChanged, hasObservers, guid, anyChanged, EventsModule } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isFirefox, Keys, isSafari, isChanged, hasObservers, guid, anyChanged, EventsModule } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
-import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import * as i2 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i3 from '@angular/common';
@@ -47,8 +46,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1676463576,
-    version: '11.3.0-develop.1',
+    publishDate: 1677599157,
+    version: '11.3.0-develop.11',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -143,18 +142,9 @@ const getThemeColorClasses = (componentType, prevFillMode, fillMode, previousVal
         toAdd: newValue !== 'none' ? `k-${componentType}-${fillMode}-${newValue}` : ''
     };
 };
-/**
- * @hidden
- *
- * Returns true if the used browser is Firefox.
- */
-const isFirefox = (userAgent) => {
-    const desktopBrowser = detectDesktopBrowser(userAgent);
-    const mobileOS = detectMobileOS(userAgent);
-    return (desktopBrowser && desktopBrowser.mozilla) || (mobileOS && mobileOS.browser === 'firefox');
-};
 
 const SPAN_TAG_NAME = 'SPAN';
+const BUTTON_TAG_NAME = 'BUTTON';
 const KENDO_BUTTON_TAG_NAME = 'KENDO-BUTTON';
 const DEFAULT_ROUNDED$3 = 'medium';
 const DEFAULT_SIZE$2 = 'medium';
@@ -427,6 +417,15 @@ class ButtonComponent {
                 break;
         }
     }
+    /**
+     * Alias for ElementRef.nativeElement to workaround
+     * ViewChild() selectors that used to return the host element before v11.
+     *
+     * @hidden
+     */
+    get nativeElement() {
+        return this.element;
+    }
     ngOnInit() {
         const elementTagName = this.element.tagName;
         const isSpanOrKendoButton = elementTagName === SPAN_TAG_NAME || elementTagName === KENDO_BUTTON_TAG_NAME;
@@ -450,6 +449,15 @@ class ButtonComponent {
                     this._onButtonClick();
                 }
             }));
+            this.subs.add(this.renderer.listen(this.element, 'mousedown', (event) => {
+                const elementTagName = this.element.tagName;
+                const isButton = elementTagName === BUTTON_TAG_NAME;
+                const isBrowserSafari = isDocumentAvailable() && isSafari(navigator.userAgent);
+                if (!this.isDisabled && isButton && isBrowserSafari) {
+                    event.preventDefault();
+                    this.element.focus();
+                }
+            }));
         });
     }
     ngOnChanges(change) {
@@ -1704,7 +1712,7 @@ class ListButton {
         if (this._disabled) {
             return;
         }
-        this._toggle(!this.openState);
+        this._toggle(!this.openState, true);
         if (!this.isClosePrevented) {
             this.focusService.focus(this.openState ? 0 : -1);
         }
@@ -1766,7 +1774,8 @@ class ListButton {
         if (this.disabled) {
             return;
         }
-        this._toggle((open === undefined) ? !this.openState : open);
+        const value = open === undefined ? !this.openState : open;
+        this._toggle(value, false);
     }
     /**
      * @hidden
@@ -1880,20 +1889,22 @@ class ListButton {
     onArrowKeyNavigate({ index }) {
         this.focusService.focus(index);
     }
-    _toggle(open) {
+    _toggle(open, emitEvent) {
         if (this.openState === open) {
             return;
         }
         const eventArgs = new PreventableEvent();
-        if (open && !this.openState) {
-            this.open.emit(eventArgs);
-        }
-        else if (!open && this.openState) {
-            this.close.emit(eventArgs);
-        }
-        if (eventArgs.isDefaultPrevented()) {
-            this.isClosePrevented = true;
-            return;
+        if (emitEvent) {
+            if (open && !this.openState) {
+                this.open.emit(eventArgs);
+            }
+            else if (!open && this.openState) {
+                this.close.emit(eventArgs);
+            }
+            if (eventArgs.isDefaultPrevented()) {
+                this.isClosePrevented = true;
+                return;
+            }
         }
         this.openState = open;
         this.destroyPopup();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-buttons",
-  "version": "11.3.0-develop.1",
+  "version": "11.3.0-develop.11",
   "description": "Buttons Package for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -25,15 +25,15 @@
     "@angular/core": "13 - 15",
     "@angular/platform-browser": "13 - 15",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "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-common": "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"
   },
   "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.1"
   },
   "schematics": "./schematics/collection.json",

package/util.d.ts

@@ -39,9 +39,3 @@ export declare const getStylingClasses: (componentType: any, stylingOption: stri
  * Returns the themeColor classes to be added and removed
  */
 export declare const getThemeColorClasses: (componentType: any, prevFillMode: any, fillMode: any, previousValue: any, newValue: any) => ButtonStylingClasses;
-/**
- * @hidden
- *
- * Returns true if the used browser is Firefox.
- */
-export declare const isFirefox: (userAgent: any) => boolean;