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

package/button/button.directive.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { SimpleChanges, ElementRef, EventEmitter, Renderer2 as Renderer, OnDestroy, NgZone, AfterViewInit } from '@angular/core';
+import { SimpleChanges, ElementRef, EventEmitter, Renderer2, OnDestroy, NgZone, AfterViewInit } from '@angular/core';
 import { KendoButtonService } from './button.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor } from '../common/models';
@@ -11,6 +11,7 @@ import * as i0 from "@angular/core";
  * Represents the Kendo UI Button component for Angular.
  */
 export declare class ButtonDirective implements OnDestroy, AfterViewInit {
+    renderer: Renderer2;
     private service;
     private ngZone;
     /**
@@ -133,7 +134,6 @@ export declare class ButtonDirective implements OnDestroy, AfterViewInit {
      */
     click: EventEmitter<any>;
     element: HTMLElement;
-    renderer: Renderer;
     isDisabled: boolean;
     isIcon: boolean;
     isIconClass: boolean;
@@ -173,7 +173,7 @@ export declare class ButtonDirective implements OnDestroy, AfterViewInit {
      * @hidden
      */
     set look(value: 'flat' | 'outline' | 'clear' | 'default');
-    constructor(element: ElementRef, renderer: Renderer, service: KendoButtonService, localization: LocalizationService, ngZone: NgZone);
+    constructor(element: ElementRef, renderer: Renderer2, service: KendoButtonService, localization: LocalizationService, ngZone: NgZone);
     ngOnInit(): void;
     ngOnChanges(change: SimpleChanges): void;
     ngAfterViewInit(): void;

package/buttongroup/buttongroup.component.d.ts

@@ -29,7 +29,8 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
      */
     disabled: boolean;
     /**
-     * By default, the selection mode of the ButtonGroup is set to `multiple`.
+     * The selection mode of the ButtonGroup.
+     * @default 'multiple'
      */
     selection: ButtonGroupSelection;
     /**
@@ -44,6 +45,15 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
      */
     set tabIndex(value: number);
     get tabIndex(): number;
+    /**
+     * When this option is set to `true` (default), the component is a single tab-stop,
+     * and focus is moved through the inner buttons via the arrow keys.
+     *
+     * When the option is set to `false`, the inner buttons are part of the natural tab sequence of the page.
+     *
+     * @default true
+     */
+    navigable: boolean;
     /**
      * Fires every time keyboard navigation occurs.
      */
@@ -56,26 +66,14 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
     get wrapperClass(): boolean;
     get disabledClass(): boolean;
     get stretchedClass(): boolean;
-    get getRole(): string;
+    role: string;
     get dir(): string;
     get ariaDisabled(): boolean;
     get wrapperWidth(): string;
     get wrapperTabIndex(): number;
-    /**
-     * @hidden
-     */
-    keydown(event: any): void;
-    /**
-     * @hidden
-     */
-    onFocus(): void;
-    /**
-     * @hidden
-     */
-    focusout(event: any): void;
     constructor(service: KendoButtonService, localization: LocalizationService, element: ElementRef);
     ngOnInit(): void;
-    ngOnChanges(change: SimpleChanges): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterContentInit(): void;
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
@@ -87,6 +85,9 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
     protected focus(buttons: Array<ButtonDirective>): void;
     private verifySettings;
     private isSelectionSingle;
+    private setButtonsTabIndex;
+    private handleSubs;
+    private focusHandler;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonGroupComponent, "kendo-buttongroup", ["kendoButtonGroup"], { "disabled": "disabled"; "selection": "selection"; "width": "width"; "tabIndex": "tabIndex"; }, { "navigate": "navigate"; }, ["buttons"], ["[kendoButton]"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonGroupComponent, "kendo-buttongroup", ["kendoButtonGroup"], { "disabled": "disabled"; "selection": "selection"; "width": "width"; "tabIndex": "tabIndex"; "navigable": "navigable"; }, { "navigate": "navigate"; }, ["buttons"], ["[kendoButton]"]>;
 }

package/dropdownbutton/dropdownbutton.component.d.ts

@@ -2,18 +2,17 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { TemplateRef, ViewContainerRef, ElementRef, EventEmitter, NgZone, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
+import { TemplateRef, ViewContainerRef, ElementRef, EventEmitter, NgZone, ChangeDetectorRef, AfterViewInit } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { Align, PopupService, PopupRef } from '@progress/kendo-angular-popup';
-import { PopupSettings } from '../listbutton/popup-settings';
+import { PopupService } from '@progress/kendo-angular-popup';
 import { ButtonItemTemplateDirective } from '../listbutton/button-item-template.directive';
 import { Direction } from '../direction';
 import { ListButton } from '../listbutton/list-button';
 import { ListComponent } from '../listbutton/list.component';
 import { FocusService } from '../focusable/focus.service';
 import { NavigationService } from '../navigation/navigation.service';
-import { PreventableEvent } from '../preventable-event';
 import { ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor } from '../common/models';
+import { PopupContainerService } from '../listbutton/container.service';
 import * as i0 from "@angular/core";
 /**
  * Represents the Kendo UI DropDownButton component for Angular.
@@ -43,9 +42,8 @@ import * as i0 from "@angular/core";
  * }
  * ```
  */
-export declare class DropDownButtonComponent extends ListButton implements OnChanges {
-    private popupService;
-    private elRef;
+export declare class DropDownButtonComponent extends ListButton implements AfterViewInit {
+    protected containerService: PopupContainerService;
     /**
      * Defines the name of an existing icon in a Kendo UI theme.
      */
@@ -58,27 +56,11 @@ export declare class DropDownButtonComponent extends ListButton implements OnCha
      * Defines a URL for styling the button with a custom image.
      */
     imageUrl: string;
-    /**
-     * Configures the popup of the DropDownButton.
-     *
-     * The available options are:
-     * - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
-     * - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
-     * - `appendTo: "root" | "component" | ViewContainerRef`—Specifies the component to which the popup will be appended.
-     * - `align: "left" | "center" | "right"`—Specifies the alignment of the popup.
-     */
-    set popupSettings(settings: PopupSettings);
-    get popupSettings(): PopupSettings;
     /**
      * Sets the data item field that represents the item text.
      * If the data contains only primitive values, do not define it.
      */
     textField: string;
-    /**
-     * Sets the disabled state of the DropDownButton.
-     */
-    set disabled(value: boolean);
-    get disabled(): boolean;
     /**
      * Sets or gets the data of the DropDownButton.
      *
@@ -142,42 +124,10 @@ export declare class DropDownButtonComponent extends ListButton implements OnCha
      * * `none` —Removes the default CSS class (no class would be rendered).
      */
     themeColor: ButtonThemeColor;
-    /**
-     * The CSS classes that will be rendered on the main button.
-     * Supports the type of values that are supported by [`ngClass`]({{ site.data.urls.angular['ngclassapi'] }}).
-     */
-    buttonClass: any;
-    /**
-     * @hidden
-     */
-    set openState(open: boolean);
-    /**
-     * @hidden
-     */
-    get openState(): boolean;
-    /**
-     * @hidden
-     */
-    get componentTabIndex(): number;
-    private get appendTo();
-    /**
-     * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
-     */
-    tabIndex: number;
     /**
      * Fires each time the user clicks on a drop-down list item. The event data contains the data item bound to the clicked list item.
      */
     itemClick: EventEmitter<any>;
-    /**
-     * Fires each time the popup is about to open.
-     * This event is preventable. If you cancel the event, the popup will remain closed.
-     */
-    open: EventEmitter<PreventableEvent>;
-    /**
-     * Fires each time the popup is about to close.
-     * This event is preventable. If you cancel the event, the popup will remain open.
-     */
-    close: EventEmitter<PreventableEvent>;
     /**
      * Fires each time the DropDownButton gets focused.
      */
@@ -198,18 +148,13 @@ export declare class DropDownButtonComponent extends ListButton implements OnCha
     buttonList: ListComponent;
     popupTemplate: TemplateRef<any>;
     container: ViewContainerRef;
-    popupRef: PopupRef;
     listId: string;
+    buttonId: string;
     private _fillMode;
-    private popupSubs;
     /**
      * @hidden
      */
     keydown(event: any): void;
-    /**
-     * @hidden
-     */
-    keypress(event: any): void;
     /**
      * @hidden
      */
@@ -230,14 +175,6 @@ export declare class DropDownButtonComponent extends ListButton implements OnCha
      * @hidden
      */
     onButtonBlur(): void;
-    /**
-     * @hidden
-     */
-    get anchorAlign(): Align;
-    /**
-     * @hidden
-     */
-    get popupAlign(): Align;
     /**
      * Focuses the DropDownButton component.
      */
@@ -246,36 +183,16 @@ export declare class DropDownButtonComponent extends ListButton implements OnCha
      * Blurs the DropDownButton component.
      */
     blur(): void;
-    constructor(focusService: FocusService, navigationService: NavigationService, wrapperRef: ElementRef, zone: NgZone, popupService: PopupService, elRef: ElementRef, localization: LocalizationService, cdr: ChangeDetectorRef);
-    ngOnChanges(changes: SimpleChanges): void;
-    ngOnDestroy(): void;
-    /**
-     * 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: boolean): void;
-    /**
-     * Returns the current open state of the popup.
-     */
-    get isOpen(): boolean;
+    constructor(focusService: FocusService, navigationService: NavigationService, wrapperRef: ElementRef, zone: NgZone, popupService: PopupService, elRef: ElementRef, localization: LocalizationService, cdr: ChangeDetectorRef, containerService: PopupContainerService);
+    ngAfterViewInit(): void;
     /**
      * @hidden
      */
-    handleFocus(): void;
+    handleFocus(event: FocusEvent): void;
     /**
      * @hidden
      */
     wrapperContains(element: any): boolean;
-    protected subscribeNavigationEvents(): void;
-    private onNavigationEnterUp;
-    private onNavigationOpen;
-    private onNavigationClose;
-    private onArrowKeyNavigate;
-    private _toggle;
-    private createPopup;
-    private destroyPopup;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropDownButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DropDownButtonComponent, "kendo-dropdownbutton", ["kendoDropDownButton"], { "icon": "icon"; "iconClass": "iconClass"; "imageUrl": "imageUrl"; "popupSettings": "popupSettings"; "textField": "textField"; "disabled": "disabled"; "data": "data"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "themeColor": "themeColor"; "buttonClass": "buttonClass"; "tabIndex": "tabIndex"; }, { "itemClick": "itemClick"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; }, ["itemTemplate"], ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropDownButtonComponent, "kendo-dropdownbutton", ["kendoDropDownButton"], { "icon": "icon"; "iconClass": "iconClass"; "imageUrl": "imageUrl"; "textField": "textField"; "data": "data"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "themeColor": "themeColor"; }, { "itemClick": "itemClick"; "onFocus": "focus"; "onBlur": "blur"; }, ["itemTemplate"], ["*"]>;
 }

package/esm2015/button/button.directive.js

@@ -23,6 +23,7 @@ const DEFAULT_FILL_MODE = 'solid';
  */
 export class ButtonDirective {
     constructor(element, renderer, service, localization, ngZone) {
+        this.renderer = renderer;
         this.service = service;
         this.ngZone = ngZone;
         /**
@@ -57,7 +58,6 @@ export class ButtonDirective {
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
         this.element = element.nativeElement;
-        this.renderer = renderer;
     }
     /**
      * Backwards-compatible alias
@@ -329,7 +329,6 @@ export class ButtonDirective {
         this.imageNode = null;
         this.iconNode = null;
         this.iconSpanNode = null;
-        this.renderer = null;
         this.subs.unsubscribe();
         clearTimeout(this.deferTimeout);
     }

package/esm2015/buttongroup/buttongroup.component.js

@@ -3,11 +3,12 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ButtonDirective } from '../button/button.directive';
-import { Component, EventEmitter, Output, Input, ContentChildren, HostBinding, HostListener, isDevMode } from '@angular/core';
+import { Component, EventEmitter, Output, Input, ContentChildren, HostBinding, isDevMode } from '@angular/core';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { isChanged, Keys } from '@progress/kendo-angular-common';
 import { KendoButtonService } from '../button/button.service';
-import { Subscription } from 'rxjs';
+import { fromEvent, Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
 import { isPresent } from '../util';
 import { PreventableEvent } from '../preventable-event';
 import { packageMetadata } from '../package-metadata';
@@ -27,9 +28,19 @@ export class ButtonGroupComponent {
         this.service = service;
         this.element = element;
         /**
-         * By default, the selection mode of the ButtonGroup is set to `multiple`.
+         * The selection mode of the ButtonGroup.
+         * @default 'multiple'
          */
         this.selection = 'multiple';
+        /**
+         * When this option is set to `true` (default), the component is a single tab-stop,
+         * and focus is moved through the inner buttons via the arrow keys.
+         *
+         * When the option is set to `false`, the inner buttons are part of the natural tab sequence of the page.
+         *
+         * @default true
+         */
+        this.navigable = true;
         /**
          * Fires every time keyboard navigation occurs.
          */
@@ -37,6 +48,15 @@ export class ButtonGroupComponent {
         this._tabIndex = 0;
         this.currentTabIndex = 0;
         this.subs = new Subscription();
+        this.role = 'group';
+        this.focusHandler = () => {
+            this.currentTabIndex = -1;
+            const focusedIndex = this.buttons.toArray().findIndex(current => current.element.tabIndex !== -1);
+            const index = focusedIndex === -1 ? 0 : focusedIndex;
+            this.focus(this.buttons.filter((_current, i) => {
+                return i === index;
+            }));
+        };
         validatePackage(packageMetadata);
         this.subs.add(localization.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
     }
@@ -59,9 +79,6 @@ export class ButtonGroupComponent {
     get stretchedClass() {
         return !!this.width;
     }
-    get getRole() {
-        return this.isSelectionSingle() ? 'radiogroup' : 'group';
-    }
     get dir() {
         return this.direction;
     }
@@ -72,35 +89,7 @@ export class ButtonGroupComponent {
         return this.width;
     }
     get wrapperTabIndex() {
-        return this.disabled ? undefined : this.currentTabIndex;
-    }
-    /**
-     * @hidden
-     */
-    keydown(event) {
-        if (!this.disabled) {
-            this.navigateFocus(event);
-        }
-    }
-    /**
-     * @hidden
-     */
-    onFocus() {
-        this.currentTabIndex = -1;
-        const focusedIndex = this.buttons.toArray().findIndex(current => current.element.tabIndex !== -1);
-        const index = focusedIndex === -1 ? 0 : focusedIndex;
-        this.focus(this.buttons.filter((_current, i) => {
-            return i === index;
-        }));
-    }
-    /**
-     * @hidden
-     */
-    focusout(event) {
-        if (event.relatedTarget && event.relatedTarget.parentNode !== this.element.nativeElement) {
-            this.defocus(this.buttons.toArray());
-            this.currentTabIndex = this.tabIndex;
-        }
+        return this.disabled ? undefined : this.navigable ? this.currentTabIndex : undefined;
     }
     ngOnInit() {
         this.subs.add(this.service.buttonClicked$.subscribe((button) => {
@@ -110,33 +99,55 @@ export class ButtonGroupComponent {
                 this.deactivate(this.buttons.filter(current => current !== button));
             }
             else {
-                this.defocus(this.buttons.toArray());
+                if (this.navigable) {
+                    this.defocus(this.buttons.toArray());
+                }
                 newSelectionValue = !button.selected;
             }
             if (button.togglable) {
                 button.setSelected(newSelectionValue);
             }
-            button.setAttribute(tabindex, '0');
+            if (this.navigable) {
+                button.setAttribute(tabindex, '0');
+            }
+        }));
+        this.handleSubs('focus', () => this.navigable, this.focusHandler);
+        this.handleSubs('keydown', () => this.navigable && !this.disabled, (event) => this.navigateFocus(event));
+        this.handleSubs('focusout', (event) => this.navigable && event.relatedTarget && event.relatedTarget.parentNode !== this.element.nativeElement, () => {
+            this.defocus(this.buttons.toArray());
+            this.currentTabIndex = this.tabIndex;
+        });
+        this.subs.add(fromEvent(this.element.nativeElement, 'focusout')
+            .pipe(filter((event) => this.navigable && event.relatedTarget && event.relatedTarget.parentNode !== this.element.nativeElement))
+            .subscribe(() => {
+            this.defocus(this.buttons.toArray());
+            this.currentTabIndex = this.tabIndex;
         }));
     }
-    ngOnChanges(change) {
-        if (isChanged('disabled', change)) {
+    ngOnChanges(changes) {
+        if (isChanged('disabled', changes)) {
             this.buttons.forEach((button) => {
                 if (isPresent(this.disabled)) {
                     button.disabled = this.disabled;
                 }
             });
         }
-    }
-    ngAfterContentInit() {
-        this.buttons.forEach((button) => {
-            if (button.selected) {
-                button.setAttribute(tabindex, '0');
+        if (isChanged('navigable', changes)) {
+            if (changes.navigable.currentValue) {
+                this.setButtonsTabIndex();
+                this.currentTabIndex = 0;
             }
             else {
-                button.setAttribute(tabindex, '-1');
+                this.currentTabIndex = -1;
+                this.buttons.forEach((button) => button.setAttribute(tabindex, '0'));
             }
-        });
+        }
+    }
+    ngAfterContentInit() {
+        if (!this.navigable) {
+            return;
+        }
+        this.setButtonsTabIndex();
     }
     ngAfterViewChecked() {
         if (this.buttons.length) {
@@ -177,13 +188,17 @@ export class ButtonGroupComponent {
     deactivate(buttons) {
         buttons.forEach((button) => {
             button.setSelected(false);
-            button.setAttribute(tabindex, '-1');
+            if (this.navigable) {
+                button.setAttribute(tabindex, '-1');
+            }
         });
     }
     activate(buttons) {
         buttons.forEach((button) => {
             button.setSelected(true);
-            button.setAttribute(tabindex, '0');
+            if (this.navigable) {
+                button.setAttribute(tabindex, '0');
+            }
             button.focus();
         });
     }
@@ -208,9 +223,24 @@ export class ButtonGroupComponent {
     isSelectionSingle() {
         return this.selection === 'single';
     }
+    setButtonsTabIndex() {
+        this.buttons.forEach((button) => {
+            if (button.selected) {
+                button.setAttribute(tabindex, '0');
+            }
+            else {
+                button.setAttribute(tabindex, '-1');
+            }
+        });
+    }
+    handleSubs(eventName, predicate, handler) {
+        this.subs.add(fromEvent(this.element.nativeElement, eventName)
+            .pipe(filter(predicate))
+            .subscribe(handler));
+    }
 }
 ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i1.KendoButtonService }, { token: i2.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex" }, outputs: { navigate: "navigate" }, host: { listeners: { "keydown": "keydown($event)", "focus": "onFocus()", "focusout": "focusout($event)" }, properties: { "class.k-button-group": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.getRole", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
+ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
         KendoButtonService,
         LocalizationService,
         {
@@ -248,6 +278,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['width']
             }], tabIndex: [{
                 type: Input
+            }], navigable: [{
+                type: Input
             }], navigate: [{
                 type: Output
             }], buttons: [{
@@ -262,7 +294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], stretchedClass: [{
                 type: HostBinding,
                 args: ['class.k-button-group-stretched']
-            }], getRole: [{
+            }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
             }], dir: [{
@@ -277,13 +309,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], wrapperTabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
-            }], keydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], onFocus: [{
-                type: HostListener,
-                args: ['focus']
-            }], focusout: [{
-                type: HostListener,
-                args: ['focusout', ['$event']]
             }] } });