@progress/kendo-angular-buttons 8.0.1-dev.202208111121 → 8.1.0

package/esm2015/splitbutton/splitbutton.component.js

@@ -10,20 +10,20 @@ import { FocusService } from './../focusable/focus.service';
 import { NavigationService } from './../navigation/navigation.service';
 import { NAVIGATION_CONFIG } from './../navigation/navigation-config';
 import { isDocumentAvailable, guid, isChanged } from '@progress/kendo-angular-common';
-import { isPresent, tick } from './../util';
-import { PreventableEvent } from '../preventable-event';
+import { closest, isPresent } from './../util';
 import { Keys } from '@progress/kendo-angular-common';
 import { replaceMessagePlaceholder, getStylingClasses } from '../util';
-import { Subscription } from 'rxjs';
+import { PopupContainerService } from '../listbutton/container.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./../focusable/focus.service";
 import * as i2 from "./../navigation/navigation.service";
 import * as i3 from "@progress/kendo-angular-popup";
 import * as i4 from "@progress/kendo-angular-l10n";
-import * as i5 from "../listbutton/list.component";
-import * as i6 from "./localization/localized-messages.directive";
-import * as i7 from "../button/button.directive";
-import * as i8 from "@angular/common";
+import * as i5 from "../listbutton/container.service";
+import * as i6 from "../listbutton/list.component";
+import * as i7 from "./localization/localized-messages.directive";
+import * as i8 from "../button/button.directive";
+import * as i9 from "@angular/common";
 const NAVIGATION_SETTINGS = {
     useLeftRightArrows: true
 };
@@ -75,10 +75,8 @@ const DEFAULT_FILL_MODE = 'solid';
  * ```
  */
 export class SplitButtonComponent extends ListButton {
-    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, renderer) {
-        super(focusService, navigationService, wrapperRef, zone, localization, cdr);
-        this.popupService = popupService;
-        this.elRef = elRef;
+    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, renderer, containerService) {
+        super(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService);
         this.localization = localization;
         this.renderer = renderer;
         /**
@@ -218,10 +216,9 @@ export class SplitButtonComponent extends ListButton {
         this.activeArrow = false;
         this.listId = guid();
         this.buttonText = '';
-        this.lockFocus = false;
+        this.arrowButtonClicked = false;
         this._rounded = DEFAULT_ROUNDED;
         this._fillMode = DEFAULT_FILL_MODE;
-        this.popupSubs = new Subscription();
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
@@ -303,31 +300,6 @@ export class SplitButtonComponent extends ListButton {
         }
         return this._data;
     }
-    /**
-     * @hidden
-     */
-    set openState(open) {
-        if (this.disabled) {
-            return;
-        }
-        const eventArgs = new PreventableEvent();
-        if (open) {
-            this.open.emit(eventArgs);
-        }
-        else {
-            this.close.emit(eventArgs);
-        }
-        if (eventArgs.isDefaultPrevented()) {
-            return;
-        }
-        this._toggle(open);
-    }
-    /**
-     * @hidden
-     */
-    get openState() {
-        return this._open;
-    }
     /**
      * @hidden
      */
@@ -344,7 +316,7 @@ export class SplitButtonComponent extends ListButton {
         this._isFocused = value;
     }
     get isFocused() {
-        return this._isFocused && !this._disabled;
+        return this._isFocused && !this._disabled && isDocumentAvailable() && this.wrapperContains(document.activeElement);
     }
     get widgetClasses() {
         return true;
@@ -362,18 +334,24 @@ export class SplitButtonComponent extends ListButton {
     /**
      * @hidden
      */
-    onButtonFocus() {
-        if (!this.isFocused) {
+    onButtonFocus(event) {
+        if (!this._disabled) {
+            // eslint-disable-next-line no-unused-expressions
+            !this._isFocused && this.onFocus.emit();
             this._isFocused = true;
-            this.onFocus.emit();
+            this.focusService.resetFocus();
+            const relatedTargetInList = event.relatedTarget && closest(event.relatedTarget, '.k-popup kendo-button-list');
+            if (this.openState && !relatedTargetInList) {
+                this.focusService.focus(0);
+            }
         }
     }
     /**
      * @hidden
      */
     onArrowButtonClick() {
-        this.lockFocus = true;
         this.togglePopupVisibility();
+        this.arrowButtonClicked = false;
     }
     /**
      * @hidden
@@ -385,23 +363,23 @@ export class SplitButtonComponent extends ListButton {
      * @hidden
      */
     toggleArrowButtonActiveState(enable) {
+        this.arrowButtonClicked = true;
         this.activeArrow = enable;
     }
     /**
      * @hidden
      */
     onButtonClick() {
-        this.lockFocus = true;
+        // this.lockFocus = true;
         this.buttonClick.emit();
     }
     /**
      * @hidden
      */
     onButtonBlur() {
-        if (!this.isOpen && !this.lockFocus) {
+        if (!this.isOpen && !this.arrowButtonClicked) {
             this.blurWrapper();
         }
-        this.lockFocus = false;
     }
     /**
      * @hidden
@@ -412,12 +390,6 @@ export class SplitButtonComponent extends ListButton {
             this._active = true;
         }
     }
-    /**
-     * @hidden
-     */
-    keypress(event) {
-        this.keyPressHandler(event);
-    }
     /**
      * @hidden
      */
@@ -431,6 +403,8 @@ export class SplitButtonComponent extends ListButton {
      * @hidden
      */
     ngAfterViewInit() {
+        this.containerService.container = this.containerRef;
+        this.containerService.template = this.popupTemplate;
         this.updateButtonText();
         this.handleClasses(this.rounded, 'rounded');
     }
@@ -449,14 +423,22 @@ export class SplitButtonComponent extends ListButton {
             popup.popupAlign = this.popupAlign;
         }
     }
+    /**
+     * @hidden
+     */
+    onNavigationEnterUp(args) {
+        if (args.target !== this.button.nativeElement) {
+            super.onNavigationEnterUp();
+        }
+    }
     /**
      * @hidden
      */
     togglePopupVisibility() {
-        super.togglePopupVisibility();
-        if (isDocumentAvailable() && this.lockFocus) {
+        if (isDocumentAvailable() && this.wrapperContains(document.activeElement) && this.arrowButtonClicked) {
             this.button.nativeElement.focus();
         }
+        super.togglePopupVisibility();
     }
     /**
      * @hidden
@@ -501,86 +483,22 @@ export class SplitButtonComponent extends ListButton {
             this.blurWrapper();
         }
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.destroyPopup();
-    }
-    /**
-     * Toggles the visibility of the popup.
-     * If the `toggle` method is used to open or close the popup, the `open` and `close` events will not be fired.
-     *
-     * @param open - The state of the popup.
-     */
-    toggle(open) {
-        if (this.disabled) {
-            return;
-        }
-        tick(() => this._toggle(open === undefined ? !this._open : open));
-    }
     /**
      * Returns the current open state of the popup.
      */
     get isOpen() {
         return this.openState;
     }
-    enterHandler() {
-        if (this.disabled) {
-            return;
-        }
-        if (this.openState) {
-            let focused = this.focusService.focused;
-            if (isPresent(focused) && focused !== -1) {
-                this.emitItemClickHandler(focused);
-            }
-        }
-        else {
-            this.buttonClick.emit();
-        }
-    }
     updateButtonText() {
         if (isDocumentAvailable()) {
             let innerText = this.wrapper.innerText
                 .split('\n')
                 .join('')
                 .trim();
-            //setTimout is needed because of `Expression has changed after it was checked.` error;
+            //setTimeout is needed because of `Expression has changed after it was checked.` error;
             setTimeout(() => (this.buttonText = innerText), 0);
         }
     }
-    get appendTo() {
-        const { appendTo } = this.popupSettings;
-        if (!appendTo || appendTo === 'root') {
-            return undefined;
-        }
-        return appendTo === 'component' ? this.containerRef : appendTo;
-    }
-    _toggle(open) {
-        this._open = open;
-        this.destroyPopup();
-        if (this._open) {
-            this.createPopup();
-        }
-    }
-    createPopup() {
-        this.popupRef = this.popupService.open({
-            anchor: this.elRef,
-            anchorAlign: this.anchorAlign,
-            animate: this.popupSettings.animate,
-            appendTo: this.appendTo,
-            content: this.popupTemplate,
-            popupAlign: this.popupAlign,
-            popupClass: this.popupClasses
-        });
-        this.popupSubs.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => (this.openState = false)));
-        this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this)));
-    }
-    destroyPopup() {
-        if (this.popupRef) {
-            this.popupSubs.unsubscribe();
-            this.popupRef.close();
-            this.popupRef = null;
-        }
-    }
     handleClasses(value, input) {
         const elem = this.wrapperRef.nativeElement;
         const classes = getStylingClasses('button', input, this[input], value);
@@ -592,8 +510,8 @@ export class SplitButtonComponent extends ListButton {
         }
     }
 }
-SplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonComponent, deps: [{ token: i1.FocusService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i4.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "keyup": "keyup($event)" }, properties: { "class.k-focus": "this.isFocused", "class.k-split-button": "this.widgetClasses", "class.k-button-group": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
+SplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonComponent, deps: [{ token: i1.FocusService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i4.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i5.PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
+SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)" }, properties: { "class.k-focus": "this.isFocused", "class.k-split-button": "this.widgetClasses", "class.k-button-group": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
         FocusService,
         NavigationService,
         NAVIGATION_SETTINGS_PROVIDER,
@@ -601,8 +519,9 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.splitbutton'
-        }
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, static: true }, { propertyName: "arrowButton", first: true, predicate: ["arrowButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoSplitButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        },
+        PopupContainerService
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { propertyName: "arrowButton", first: true, predicate: ["arrowButton"], descendants: true, read: ElementRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], exportAs: ["kendoSplitButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoSplitButtonLocalizedMessages
             i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
             splitButtonLabel="{{ '{buttonText} splitbutton' }}">
@@ -623,7 +542,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
-            (focus)="onButtonFocus()"
+            (focus)="onButtonFocus($event)"
             (click)="onButtonClick()"
             (blur)="onButtonBlur()"
             (mousedown)="toggleButtonActiveState(true)"
@@ -661,7 +580,6 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 [itemTemplate]="itemTemplate"
                 (onItemClick)="onItemClick($event)"
                 (keydown)="keyDownHandler($event)"
-                (keypress)="keyPressHandler($event)"
                 (keyup)="keyUpHandler($event)"
                 [attr.dir]="dir"
                 [size]="size"
@@ -669,7 +587,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </kendo-button-list>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i5.ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: i6.LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { type: i7.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i6.ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: i7.LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { type: i8.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -682,7 +600,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.splitbutton'
-                        }
+                        },
+                        PopupContainerService
                     ],
                     selector: 'kendo-splitbutton',
                     template: `
@@ -706,7 +625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
-            (focus)="onButtonFocus()"
+            (focus)="onButtonFocus($event)"
             (click)="onButtonClick()"
             (blur)="onButtonBlur()"
             (mousedown)="toggleButtonActiveState(true)"
@@ -744,7 +663,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [itemTemplate]="itemTemplate"
                 (onItemClick)="onItemClick($event)"
                 (keydown)="keyDownHandler($event)"
-                (keypress)="keyPressHandler($event)"
                 (keyup)="keyUpHandler($event)"
                 [attr.dir]="dir"
                 [size]="size"
@@ -754,7 +672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-container #container></ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.FocusService }, { type: i2.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i4.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { text: [{
+        }], ctorParameters: function () { return [{ type: i1.FocusService }, { type: i2.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i4.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i5.PopupContainerService }]; }, propDecorators: { text: [{
                 type: Input
             }], icon: [{
                 type: Input
@@ -804,19 +722,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], itemTemplate: [{
                 type: ContentChild,
-                args: [ButtonItemTemplateDirective, { static: false }]
+                args: [ButtonItemTemplateDirective]
             }], button: [{
                 type: ViewChild,
-                args: ['button', { static: true }]
+                args: ['button']
             }], arrowButton: [{
                 type: ViewChild,
-                args: ['arrowButton', { static: true, read: ElementRef }]
+                args: ['arrowButton', { read: ElementRef }]
             }], popupTemplate: [{
                 type: ViewChild,
-                args: ['popupTemplate', { static: true }]
+                args: ['popupTemplate']
             }], containerRef: [{
                 type: ViewChild,
-                args: ['container', { read: ViewContainerRef, static: true }]
+                args: ['container', { read: ViewContainerRef }]
             }], isFocused: [{
                 type: HostBinding,
                 args: ['class.k-focus']
@@ -832,9 +750,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], keydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
-            }], keypress: [{
-                type: HostListener,
-                args: ['keypress', ['$event']]
             }], keyup: [{
                 type: HostListener,
                 args: ['keyup', ['$event']]