@progress/kendo-angular-treelist 3.1.3-dev.202110041229

package/dist/es2015/dragdrop/drag-and-drop.module.d.ts

@@ -0,0 +1,9 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export declare class DragAndDropModule {
+}

package/dist/es2015/dragdrop/drag-and-drop.module.js

@@ -0,0 +1,24 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { NgModule } from '@angular/core';
+import { DraggableColumnDirective } from './draggable-column.directive';
+import { DropTargetDirective } from './drop-target.directive';
+const exported = [
+    DraggableColumnDirective,
+    DropTargetDirective
+];
+/**
+ * @hidden
+ */
+let DragAndDropModule = class DragAndDropModule {
+};
+DragAndDropModule = tslib_1.__decorate([
+    NgModule({
+        declarations: [exported],
+        exports: [exported]
+    })
+], DragAndDropModule);
+export { DragAndDropModule };

package/dist/es2015/dragdrop/drag-and-drop.service.d.ts

@@ -0,0 +1,20 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EventEmitter } from '@angular/core';
+import { DropTargetDirective } from './drop-target.directive';
+import { DraggableColumnDirective } from './draggable-column.directive';
+/**
+ * @hidden
+ */
+export declare class DragAndDropService {
+    changes: EventEmitter<any>;
+    private register;
+    private lastTarget;
+    add(target: DropTargetDirective): void;
+    remove(target: DropTargetDirective): void;
+    notifyDrag(draggable: DraggableColumnDirective, element: any, mouseEvent: any): void;
+    notifyDrop(draggable: DraggableColumnDirective, mouseEvent: any): void;
+    private targetFor;
+}

package/dist/es2015/dragdrop/drag-and-drop.service.js

@@ -0,0 +1,64 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Injectable, EventEmitter } from '@angular/core';
+import { contains } from './common';
+/**
+ * @hidden
+ */
+let DragAndDropService = class DragAndDropService {
+    /**
+     * @hidden
+     */
+    constructor() {
+        this.changes = new EventEmitter();
+        this.register = [];
+        this.lastTarget = null;
+    }
+    add(target) {
+        this.register.push(target);
+    }
+    remove(target) {
+        this.register = this.register.filter(current => current !== target);
+    }
+    notifyDrag(draggable, element, mouseEvent) {
+        const target = this.targetFor(element);
+        if (this.lastTarget === target) {
+            return;
+        }
+        this.changes.next({
+            draggable,
+            mouseEvent,
+            target: this.lastTarget,
+            type: 'leave'
+        });
+        if (target) {
+            this.changes.next({
+                draggable,
+                mouseEvent,
+                target,
+                type: 'enter'
+            });
+        }
+        this.lastTarget = target;
+    }
+    notifyDrop(draggable, mouseEvent) {
+        this.changes.next({
+            draggable,
+            mouseEvent,
+            target: this.lastTarget,
+            type: 'drop'
+        });
+        this.lastTarget = null;
+    }
+    targetFor(element) {
+        const comparer = contains.bind(null, element);
+        return this.register.find(({ element: { nativeElement } }) => comparer(nativeElement));
+    }
+};
+DragAndDropService = tslib_1.__decorate([
+    Injectable()
+], DragAndDropService);
+export { DragAndDropService };

package/dist/es2015/dragdrop/drag-hint.service.d.ts

@@ -0,0 +1,26 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { DomSanitizer } from '@angular/platform-browser';
+/**
+ * @hidden
+ */
+export declare class DragHintService {
+    private santizer;
+    private dom;
+    private initialTop;
+    private initialLeft;
+    constructor(santizer: DomSanitizer);
+    create(down: any, target: Element, title: string): void;
+    attach(): Function;
+    remove(): void;
+    show(): void;
+    hide(): void;
+    enable(): void;
+    disable(): void;
+    removeLock(): void;
+    toggleLock(locked: boolean): void;
+    move(move: any): void;
+    private initCoords;
+}

package/dist/es2015/dragdrop/drag-hint.service.js

@@ -0,0 +1,98 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Injectable, SecurityContext } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { append, offset } from './common';
+const updateClass = (element, valid) => {
+    const icon = element.querySelector('.k-icon');
+    icon.className = icon.className
+        .replace(/(plus|cancel)/, valid ? 'plus' : 'cancel');
+};
+const ɵ0 = updateClass;
+const updateLock = (element, locked = null) => {
+    const icon = element.querySelectorAll('.k-icon')[1];
+    const value = locked == null ? '' : (locked ? 'k-i-lock' : 'k-i-unlock');
+    icon.className = icon.className
+        .replace(/(k-i-unlock|k-i-lock)/, '') + ` ${value}`;
+};
+const ɵ1 = updateLock;
+const decorate = (element, target) => {
+    const targetStyles = getComputedStyle(target);
+    element.className = 'k-header k-drag-clue';
+    element.style.position = 'absolute';
+    element.style.zIndex = '20000';
+    element.style.paddingLeft = targetStyles.paddingLeft;
+    element.style.paddingTop = targetStyles.paddingTop;
+    element.style.paddingBottom = targetStyles.paddingBottom;
+    element.style.paddingRight = targetStyles.paddingRight;
+    element.style.width = targetStyles.width;
+    element.style.height = targetStyles.height;
+};
+const ɵ2 = decorate;
+/**
+ * @hidden
+ */
+let DragHintService = class DragHintService {
+    constructor(santizer) {
+        this.santizer = santizer;
+    }
+    create(down, target, title) {
+        this.initCoords(down);
+        this.dom = document.createElement("div");
+        decorate(this.dom, target);
+        const safeTitle = this.santizer.sanitize(SecurityContext.HTML, title);
+        this.dom.innerHTML = `
+            <span class="k-icon k-drag-status k-i-cancel k-icon-with-modifier">
+                <span class="k-icon k-icon-modifier"></span>
+            </span>
+            ${safeTitle}
+        `;
+    }
+    attach() {
+        return append(this.dom);
+    }
+    remove() {
+        if (this.dom && this.dom.parentNode) {
+            (function (el) {
+                setTimeout(() => document.body.removeChild(el));
+            })(this.dom); // hack for IE + pointer events!
+            this.dom = null;
+        }
+    }
+    show() {
+        this.dom.style.display = "";
+    }
+    hide() {
+        this.dom.style.display = "none";
+    }
+    enable() {
+        updateClass(this.dom, true);
+    }
+    disable() {
+        updateClass(this.dom, false);
+    }
+    removeLock() {
+        updateLock(this.dom);
+    }
+    toggleLock(locked) {
+        updateLock(this.dom, locked);
+    }
+    move(move) {
+        this.dom.style.top = this.initialTop + move.pageY + 'px';
+        this.dom.style.left = this.initialLeft + move.pageX + 'px';
+    }
+    initCoords(down) {
+        const { top, left } = offset(down.originalEvent.target);
+        this.initialTop = top - down.pageY;
+        this.initialLeft = left - down.pageX;
+    }
+};
+DragHintService = tslib_1.__decorate([
+    Injectable(),
+    tslib_1.__metadata("design:paramtypes", [DomSanitizer])
+], DragHintService);
+export { DragHintService };
+export { ɵ0, ɵ1, ɵ2 };

package/dist/es2015/dragdrop/draggable-column.directive.d.ts

@@ -0,0 +1,37 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { DraggableDirective } from '@progress/kendo-angular-common';
+import { DragAndDropService } from './drag-and-drop.service';
+import { DragHintService } from './drag-hint.service';
+import { DragAndDropContext } from './context-types';
+import { DropCueService } from './drop-cue.service';
+import { NavigationService } from '../navigation/navigation.service';
+/**
+ * @hidden
+ */
+export declare class DraggableColumnDirective implements OnInit, OnDestroy {
+    draggable: DraggableDirective;
+    element: ElementRef;
+    private zone;
+    private service;
+    private hint;
+    private cue;
+    private nav;
+    private renderer;
+    context: DragAndDropContext;
+    enableDrag: boolean;
+    drag: EventEmitter<any>;
+    readonly hostClass: boolean;
+    private subscriptions;
+    private enabled;
+    constructor(draggable: DraggableDirective, element: ElementRef, zone: NgZone, service: DragAndDropService, hint: DragHintService, cue: DropCueService, nav: NavigationService, renderer: Renderer2);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private drop;
+    private performDrag;
+    private elementUnderCursor;
+    private updateTouchAction;
+}

package/dist/es2015/dragdrop/draggable-column.directive.js

@@ -0,0 +1,147 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, ElementRef, EventEmitter, Host, Input, NgZone, Output, Renderer2, HostBinding } from '@angular/core';
+import { Subscription, of } from 'rxjs';
+import { DraggableDirective } from '@progress/kendo-angular-common';
+import { DragAndDropService } from './drag-and-drop.service';
+import { DragHintService } from './drag-hint.service';
+import { DropCueService } from './drop-cue.service';
+import { and, not, or } from '../utils';
+import { NavigationService } from '../navigation/navigation.service';
+import { takeUntil, delay, filter, tap, switchMap, switchMapTo, map } from 'rxjs/operators';
+import { isFocusableWithTabKey, matchesNodeName } from '../rendering/common/dom-queries';
+// TODO
+// tslint:disable:rxjs-no-unsafe-takeuntil
+/**
+ * @hidden
+ */
+const preventOnDblClick = release => mouseDown => of(mouseDown).pipe(delay(150), takeUntil(release));
+const ɵ0 = preventOnDblClick;
+const hasClass = className => el => new RegExp(`(^| )${className}( |$)`).test(el.className);
+const ɵ1 = hasClass;
+const isDeleteButton = or(hasClass("k-i-group-delete"), hasClass("k-button-icon"));
+const isSortIcon = or(hasClass("k-i-sort-asc-sm"), hasClass("k-i-sort-desc-sm"));
+const skipButtons = and(not(isDeleteButton), not(isSortIcon), not(isFocusableWithTabKey), not(matchesNodeName("label")));
+const elementUnderCursor = ({ clientX, clientY }) => document.elementFromPoint(clientX, clientY);
+const ɵ2 = elementUnderCursor;
+const hideThenShow = (element, cont) => {
+    element.style.display = 'none';
+    const result = cont();
+    element.style.display = 'block';
+    return result;
+};
+const ɵ3 = hideThenShow;
+/**
+ * @hidden
+ */
+let DraggableColumnDirective = class DraggableColumnDirective {
+    constructor(draggable, element, zone, service, hint, cue, nav, renderer) {
+        this.draggable = draggable;
+        this.element = element;
+        this.zone = zone;
+        this.service = service;
+        this.hint = hint;
+        this.cue = cue;
+        this.nav = nav;
+        this.renderer = renderer;
+        this.context = {};
+        this.drag = new EventEmitter();
+        this.subscriptions = new Subscription();
+    }
+    set enableDrag(enabled) {
+        this.enabled = enabled;
+        this.updateTouchAction();
+    }
+    get hostClass() {
+        return this.enabled;
+    }
+    ngOnInit() {
+        this.subscriptions.add(this.zone.runOutsideAngular(() => this.draggable.kendoPress.pipe(filter(_ => this.enabled), filter(({ originalEvent: { target } }) => target === this.element.nativeElement || skipButtons(target)), tap((e) => {
+            const originalEvent = e.originalEvent;
+            if (!e.isTouch) {
+                originalEvent.preventDefault();
+            }
+            this.nav.navigateTo(originalEvent.target);
+        }), switchMap(preventOnDblClick(this.draggable.kendoRelease)), tap(down => {
+            this.hint.create(down, this.element.nativeElement, this.context.hint);
+            this.cue.create();
+        }), switchMap(down => this.draggable.kendoDrag.pipe(tap((e) => {
+            if (e.isTouch) {
+                e.originalEvent.preventDefault();
+            }
+        }), tap(this.hint.attach()), tap(this.cue.attach()), takeUntil(this.draggable.kendoRelease), map(move => ({ move, down })))), tap(this.performDrag.bind(this)), switchMapTo(this.draggable.kendoRelease)).subscribe(this.drop.bind(this))));
+    }
+    ngOnDestroy() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+    }
+    drop(upEvent) {
+        this.hint.remove();
+        this.cue.remove();
+        this.service.notifyDrop(this, upEvent);
+    }
+    performDrag({ move }) {
+        this.hint.move(move);
+        const cursorElement = this.elementUnderCursor(move);
+        if (cursorElement) {
+            this.service.notifyDrag(this, cursorElement, move);
+        }
+        this.drag.emit({
+            draggable: this,
+            mouseEvent: move
+        });
+    }
+    elementUnderCursor(mouseEvent) {
+        this.hint.hide();
+        let target = elementUnderCursor(mouseEvent);
+        if (target && /k-grouping-dropclue/.test(target.className)) {
+            target = hideThenShow(target, elementUnderCursor.bind(this, mouseEvent));
+        }
+        this.hint.show();
+        return target;
+    }
+    updateTouchAction() {
+        if (!this.element) {
+            return;
+        }
+        this.renderer.setStyle(this.element.nativeElement, 'touch-action', this.enabled ? 'none' : '');
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], DraggableColumnDirective.prototype, "context", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [Boolean])
+], DraggableColumnDirective.prototype, "enableDrag", null);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], DraggableColumnDirective.prototype, "drag", void 0);
+tslib_1.__decorate([
+    HostBinding('class.k-grid-draggable-header'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], DraggableColumnDirective.prototype, "hostClass", null);
+DraggableColumnDirective = tslib_1.__decorate([
+    Directive({
+        selector: '[kendoDraggableColumn]'
+    }),
+    tslib_1.__param(0, Host()),
+    tslib_1.__metadata("design:paramtypes", [DraggableDirective,
+        ElementRef,
+        NgZone,
+        DragAndDropService,
+        DragHintService,
+        DropCueService,
+        NavigationService,
+        Renderer2])
+], DraggableColumnDirective);
+export { DraggableColumnDirective };
+export { ɵ0, ɵ1, ɵ2, ɵ3 };

package/dist/es2015/dragdrop/drop-cue.service.d.ts

@@ -0,0 +1,15 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export declare class DropCueService {
+    private dom;
+    create(): void;
+    attach(): Function;
+    remove(): void;
+    hide(): void;
+    position({ left, top, height }: any): void;
+}

package/dist/es2015/dragdrop/drop-cue.service.js

@@ -0,0 +1,40 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Injectable } from '@angular/core';
+import { append } from './common';
+/**
+ * @hidden
+ */
+let DropCueService = class DropCueService {
+    create() {
+        this.dom = document.createElement("div");
+        this.dom.className = 'k-grouping-dropclue';
+        this.hide();
+    }
+    attach() {
+        return append(this.dom);
+    }
+    remove() {
+        if (this.dom && this.dom.parentElement) {
+            document.body.removeChild(this.dom);
+            this.dom = null;
+        }
+    }
+    hide() {
+        this.dom.style.display = "none";
+    }
+    position({ left, top, height }) {
+        this.dom.style.display = 'block';
+        this.dom.style.height = height + 'px';
+        this.dom.style.top = top + 'px';
+        const width = this.dom.offsetWidth / 2;
+        this.dom.style.left = left - width + 'px';
+    }
+};
+DropCueService = tslib_1.__decorate([
+    Injectable()
+], DropCueService);
+export { DropCueService };

package/dist/es2015/dragdrop/drop-target.directive.d.ts

@@ -0,0 +1,23 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { DragAndDropService } from './drag-and-drop.service';
+import { DragAndDropContext } from './context-types';
+/**
+ * @hidden
+ */
+export declare class DropTargetDirective implements OnInit, OnDestroy {
+    element: ElementRef;
+    private service;
+    context: DragAndDropContext;
+    enter: EventEmitter<any>;
+    leave: EventEmitter<any>;
+    drop: EventEmitter<any>;
+    private subscriptions;
+    constructor(element: ElementRef, service: DragAndDropService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private eventArgs;
+}

package/dist/es2015/dragdrop/drop-target.directive.js

@@ -0,0 +1,75 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { DragAndDropService } from './drag-and-drop.service';
+import { filter } from 'rxjs/operators';
+/**
+ * @hidden
+ */
+let DropTargetDirective = class DropTargetDirective {
+    constructor(element, service) {
+        this.element = element;
+        this.service = service;
+        this.context = {};
+        this.enter = new EventEmitter();
+        this.leave = new EventEmitter();
+        this.drop = new EventEmitter();
+        this.subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this.service.add(this);
+        const changes = this.service.changes.pipe(filter(({ target }) => target === this));
+        this.subscriptions.add(changes.pipe(filter(({ type }) => type === 'leave'))
+            .subscribe(e => {
+            this.leave.next(this.eventArgs(e));
+        }));
+        this.subscriptions.add(changes.pipe(filter(({ type }) => type === 'enter'))
+            .subscribe(e => {
+            this.enter.next(this.eventArgs(e));
+        }));
+        this.subscriptions.add(changes.pipe(filter(({ type }) => type === 'drop'))
+            .subscribe(e => {
+            this.drop.next(this.eventArgs(e));
+        }));
+    }
+    ngOnDestroy() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+    }
+    eventArgs(e) {
+        return {
+            target: this,
+            mouseEvent: e.mouseEvent,
+            draggable: e.draggable
+        };
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], DropTargetDirective.prototype, "context", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], DropTargetDirective.prototype, "enter", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], DropTargetDirective.prototype, "leave", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], DropTargetDirective.prototype, "drop", void 0);
+DropTargetDirective = tslib_1.__decorate([
+    Directive({
+        selector: '[kendoDropTarget]'
+    }),
+    tslib_1.__metadata("design:paramtypes", [ElementRef,
+        DragAndDropService])
+], DropTargetDirective);
+export { DropTargetDirective };

package/dist/es2015/editing/add-command.directive.d.ts

@@ -0,0 +1,51 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ElementRef, Renderer2, NgZone } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { EditService } from './edit.service';
+import { BaseCommandDirective } from './base-command.directive';
+/**
+ * Represents the command for adding a new item to the TreeList. You can apply this directive to any
+ * `button` element inside a [`ToolbarTemplate`]({% slug api_treelist_commandcolumncomponent %}) or
+ * inside a [`CommandColumnComponent`]({% slug api_treelist_commandcolumncomponent %}).
+ *
+ * When an associated button with the directive is clicked, the
+ * [`add`]({% slug api_treelist_treelistcomponent %}#toc-add) event is triggered
+ * ([see example]({% slug editing_treelist %})).
+ *
+ * > When the row is in the edit mode, the button with `kendoTreeListAddCommand` is automatically hidden.
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-treelist>
+ *    <ng-template kendoTreeListToolbarTemplate>
+ *       <button kendoTreeListAddCommand>Add new</button>
+ *    </ng-template>
+ * </kendo-treelist>
+ * ```
+ *
+ * When added to the command column, the directive takes as input the `cellContext` from the cell template.
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-treelist>
+ *   <kendo-treelist-command-column title="command">
+ *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
+ *       <button [kendoTreeListAddCommand]="cellContext" class="k-primary">Edit</button>
+ *     </ng-template>
+ *   </kendo-treelist-command-column>
+ * </kendo-treelist>
+ * ```
+ */
+export declare class AddCommandDirective extends BaseCommandDirective {
+    /**
+     * The `cellContext` provided to the template.
+     */
+    cellContext: any;
+    commandClass: boolean;
+    protected readVisible: boolean;
+    constructor(editService: EditService, element: ElementRef, renderer: Renderer2, localization: LocalizationService, ngZone: NgZone);
+    protected onClick(): void;
+}