@progress/kendo-angular-menu 3.0.6-dev.202203091409 → 4.0.0-dev.202204191048

package/dist/es2015/rendering/item.component.js

@@ -1,327 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* 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 { Component, Input, ElementRef, Renderer2, ViewChild, ChangeDetectorRef, HostBinding, TemplateRef } from '@angular/core';
-import { ItemsService } from '../services/items.service';
-import { NavigationService } from '../services/navigation.service';
-import { POPUP_SETTINGS, POPUP_SETTINGS_RTL } from './popup-settings';
-import { PopupService, POPUP_CONTAINER } from '@progress/kendo-angular-popup';
-import { bodyFactory } from '../utils';
-const ɵ0 = bodyFactory;
-/* tslint:disable:component-selector */
-/**
- * @hidden
- */
-let ItemComponent = class ItemComponent {
-    constructor(itemsService, navigation, changeDetector, renderer, popupService, element) {
-        this.itemsService = itemsService;
-        this.navigation = navigation;
-        this.changeDetector = changeDetector;
-        this.renderer = renderer;
-        this.popupService = popupService;
-        this.element = element;
-        this.animate = true;
-        this.openOnClick = false;
-        this.opened = false;
-        this.navigating = false;
-        this.destroyed = false;
-    }
-    set index(index) {
-        if (this._index && this._index !== index) {
-            this.itemsService.remove(this);
-            this._index = index;
-            this.itemsService.add(this);
-        }
-        else {
-            this._index = index;
-        }
-        this.childId = this.itemsService.childId(index);
-    }
-    get index() {
-        return this._index;
-    }
-    get disabled() {
-        return this.item.disabled;
-    }
-    get hasPopup() {
-        return this.hasContent ? true : null;
-    }
-    get expanded() {
-        return this.hasContent ? this.opened : null;
-    }
-    get label() {
-        return this.item.text ? this.item.text : null;
-    }
-    get activeId() {
-        return this.index === this.navigation.activeIndex ? '0' : '-1';
-    }
-    get popupSettings() {
-        const settings = this.rtl ? POPUP_SETTINGS_RTL : POPUP_SETTINGS;
-        return this.horizontal ? settings.horizontal : settings.vertical;
-    }
-    get horizontal() {
-        return this.vertical || this.level > 0;
-    }
-    get hasLink() {
-        return Boolean(this.item.url);
-    }
-    get linkTemplate() {
-        return this.item.linkTemplate || this.itemLinkTemplate;
-    }
-    get hasContent() {
-        const items = this.item.items;
-        return items && items.length || this.item.contentTemplate;
-    }
-    get isContent() {
-        return Boolean(this.item.content);
-    }
-    get iconClass() {
-        return `k-i-${this.item.icon}`;
-    }
-    get children() {
-        const item = this.item;
-        if (item.contentTemplate) {
-            if (!this.contentItems) {
-                this.contentItems = [{
-                        content: item.contentTemplate,
-                        owner: item,
-                        ownerIndex: this.index
-                    }];
-            }
-            return this.contentItems;
-        }
-        return item.items;
-    }
-    get template() {
-        return this.item.template || this.itemTemplate;
-    }
-    hasContentTemplates() {
-        const item = this.item;
-        return this.itemTemplate || item.contentTemplate || this.itemLinkTemplate ||
-            (item.items && item.items.find(current => current.template || current.linkTemplate));
-    }
-    ngOnInit() {
-        this.itemsService.add(this);
-    }
-    ngOnDestroy() {
-        this.itemsService.remove(this);
-        this.destroyed = true;
-        if (this.popupRef) {
-            this.popupRef.close();
-            this.popupRef = null;
-        }
-    }
-    focus() {
-        this.element.nativeElement.focus();
-    }
-    blur() {
-        this.element.nativeElement.blur();
-    }
-    toggleActive(isActive) {
-        if (isActive) {
-            this.setAttribute('tabindex', '0');
-        }
-        else {
-            this.setAttribute('tabindex', '-1');
-        }
-    }
-    open() {
-        if (!this.destroyed && this.hasContent && !this.opened) {
-            const popupSettings = this.popupSettings;
-            const animate = this.animate ? Object.assign({}, this.animate, {
-                direction: popupSettings.animate
-            }) : false;
-            this.opened = true;
-            this.popupRef = this.popupService.open({
-                popupAlign: popupSettings.popup,
-                anchorAlign: popupSettings.anchor,
-                collision: popupSettings.collision,
-                anchor: this.element,
-                positionMode: 'absolute',
-                content: this.popupTemplate,
-                popupClass: {
-                    'k-rtl': this.rtl,
-                    'k-menu-popup': true
-                },
-                animate: animate
-            });
-            this.setAttribute('aria-expanded', 'true');
-            this.setAttribute('aria-owns', this.childId);
-            this.changeDetector.detectChanges();
-        }
-    }
-    close() {
-        if (!this.destroyed && this.opened) {
-            this.opened = false;
-            if (this.popupRef) {
-                this.popupRef.close();
-                this.popupRef = null;
-            }
-            this.changeDetector.detectChanges();
-            this.setAttribute('aria-expanded', 'false');
-            this.renderer.removeAttribute(this.element.nativeElement, 'aria-owns');
-        }
-    }
-    navigate() {
-        let link;
-        if (this.linkTemplate) {
-            link = this.element.nativeElement.querySelector('a.k-menu-link');
-        }
-        else if (this.hasLink) {
-            link = this.link.nativeElement;
-        }
-        if (link) {
-            this.navigating = true;
-            link.click();
-            this.navigating = false;
-        }
-    }
-    setAttribute(name, value) {
-        this.renderer.setAttribute(this.element.nativeElement, name, value);
-    }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], ItemComponent.prototype, "item", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], ItemComponent.prototype, "level", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], ItemComponent.prototype, "index", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], ItemComponent.prototype, "siblingIndex", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], ItemComponent.prototype, "animate", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ItemComponent.prototype, "vertical", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ItemComponent.prototype, "rtl", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ItemComponent.prototype, "openOnClick", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", TemplateRef)
-], ItemComponent.prototype, "itemTemplate", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", TemplateRef)
-], ItemComponent.prototype, "itemLinkTemplate", void 0);
-tslib_1.__decorate([
-    ViewChild('link', { static: false }),
-    tslib_1.__metadata("design:type", ElementRef)
-], ItemComponent.prototype, "link", void 0);
-tslib_1.__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    tslib_1.__metadata("design:type", TemplateRef)
-], ItemComponent.prototype, "popupTemplate", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.aria-disabled'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ItemComponent.prototype, "disabled", null);
-tslib_1.__decorate([
-    HostBinding('attr.aria-haspopup'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ItemComponent.prototype, "hasPopup", null);
-tslib_1.__decorate([
-    HostBinding('attr.aria-expanded'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ItemComponent.prototype, "expanded", null);
-tslib_1.__decorate([
-    HostBinding('attr.aria-label'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ItemComponent.prototype, "label", null);
-tslib_1.__decorate([
-    HostBinding('attr.tabindex'),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [])
-], ItemComponent.prototype, "activeId", null);
-ItemComponent = tslib_1.__decorate([
-    Component({
-        providers: [PopupService, {
-                provide: POPUP_CONTAINER,
-                useFactory: ɵ0
-            }],
-        selector: '[kendoMenuItem]',
-        template: `
-    <span *ngIf="!hasLink && !item.content && !linkTemplate" class="k-link k-menu-link" #link
-        [class.k-state-active]="opened" role="presentation">
-        <ng-template [ngTemplateOutlet]="itemcontent">
-        </ng-template>
-    </span>
-    <a *ngIf="item.url && !linkTemplate" class="k-link k-menu-link" #link [attr.href]="item.url"
-        [class.k-state-active]="opened" tabindex="-1" role="presentation">
-        <ng-template [ngTemplateOutlet]="itemcontent">
-        </ng-template>
-    </a>
-    <ng-template *ngIf="linkTemplate && !item.content" [ngTemplateOutlet]="linkTemplate"
-        [ngTemplateOutletContext]="{ item: item, index: index }">
-    </ng-template>
-
-    <div class="k-content" *ngIf="item.content" role="presentation">
-        <ng-template [ngTemplateOutlet]="item.content" [ngTemplateOutletContext]="{ item: item.owner, index: item.ownerIndex }">
-        </ng-template>
-    </div>
-
-    <ng-template #popupTemplate>
-        <ul kendoMenuList
-            [attr.id]="childId"
-            [animate]="animate"
-            [rtl]="rtl"
-            [vertical]="vertical"
-            [openOnClick]="openOnClick"
-            [items]="children"
-            [level]="level + 1"
-            [index]="index"
-            [itemTemplate]="itemTemplate"
-            [itemLinkTemplate]="itemLinkTemplate"
-            role="menu"
-            class="k-group k-menu-group k-reset">
-        </ul>
-    </ng-template>
-
-    <ng-template #itemcontent>
-        <span *ngIf="item.icon" class="k-icon" [ngClass]="iconClass" role="presentation"></span>
-        <ng-container *ngIf="!template">
-            <span class="k-menu-link-text">{{ item.text }}</span>
-        </ng-container>
-        <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
-        </ng-template>
-        <span class="k-icon k-menu-expand-arrow" *ngIf="hasContent"
-            role="presentation"
-            [class.k-i-arrow-60-down]="!horizontal"
-            [class.k-i-arrow-60-right]="horizontal && !rtl"
-            [class.k-i-arrow-60-left]="horizontal && rtl">
-        </span>
-    </ng-template>
-  `
-    }),
-    tslib_1.__metadata("design:paramtypes", [ItemsService,
-        NavigationService,
-        ChangeDetectorRef,
-        Renderer2,
-        PopupService,
-        ElementRef])
-], ItemComponent);
-export { ItemComponent };
-export { ɵ0 };

package/dist/es2015/rendering/link.directive.js

@@ -1,57 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* 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, Input, HostBinding, isDevMode } from '@angular/core';
-import { ItemsService } from '../services/items.service';
-/**
- * Represents a directive that can be used in the [`linkTemplate`]({% slug api_menu_itemlinktemplatedirective %})
- * of the items to apply the default styling and behavior.
- */
-let LinkDirective = class LinkDirective {
-    constructor(itemsService) {
-        this.itemsService = itemsService;
-        this.hostClasses = true;
-        this.role = 'presentation';
-        this.tabindex = '-1';
-    }
-    get activeClass() {
-        return this.item.opened;
-    }
-    ngOnInit() {
-        if (isDevMode() && !this.index) {
-            throw new Error('The kendoMenuItemLink directive requires the item index to be set.');
-        }
-        this.item = this.itemsService.get(this.index) || {};
-    }
-};
-tslib_1.__decorate([
-    Input('kendoMenuItemLink'),
-    tslib_1.__metadata("design:type", String)
-], LinkDirective.prototype, "index", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-link'),
-    HostBinding('class.k-menu-link'),
-    tslib_1.__metadata("design:type", Boolean)
-], LinkDirective.prototype, "hostClasses", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.role'),
-    tslib_1.__metadata("design:type", String)
-], LinkDirective.prototype, "role", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.tabindex'),
-    tslib_1.__metadata("design:type", String)
-], LinkDirective.prototype, "tabindex", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-state-active'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], LinkDirective.prototype, "activeClass", null);
-LinkDirective = tslib_1.__decorate([
-    Directive({
-        selector: '[kendoMenuItemLink]'
-    }),
-    tslib_1.__metadata("design:paramtypes", [ItemsService])
-], LinkDirective);
-export { LinkDirective };

package/dist/es2015/rendering/list.component.d.ts

@@ -1,41 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { ElementRef, TemplateRef, OnInit, OnDestroy, Renderer2, NgZone } from '@angular/core';
-import { ItemsService } from '../services/items.service';
-import { ActionsService } from '../services/actions.service';
-import { NavigationService } from '../services/navigation.service';
-import { HoverService } from '../services/hover.service';
-import { MenuAnimation } from '../menu-animation.interface';
-/**
- * @hidden
- */
-export declare class ListComponent implements OnInit, OnDestroy {
-    private itemsService;
-    private hover;
-    private actions;
-    private navigation;
-    private renderer;
-    private ngZone;
-    element: ElementRef;
-    items: any[];
-    level: number;
-    index: string;
-    animate: boolean | MenuAnimation;
-    vertical: boolean;
-    rtl: boolean;
-    openOnClick: any;
-    itemTemplate: TemplateRef<any>;
-    itemLinkTemplate: TemplateRef<any>;
-    private domSubscriptions;
-    constructor(itemsService: ItemsService, hover: HoverService, actions: ActionsService, navigation: NavigationService, renderer: Renderer2, ngZone: NgZone, element: ElementRef);
-    hierarchyIndex(index: number): string;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    private initDomEvents;
-    private leavesMenu;
-    private onLeave;
-    private nodeItem;
-    private clickHandler;
-}

package/dist/es2015/rendering/list.component.js

@@ -1,233 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* 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 { Component, Input, ElementRef, TemplateRef, Renderer2, NgZone } from '@angular/core';
-import { ItemsService } from '../services/items.service';
-import { ActionsService } from '../services/actions.service';
-import { NavigationService } from '../services/navigation.service';
-import { HoverService } from '../services/hover.service';
-import { NODE_INDEX } from '../constants';
-import { closestItem, closest, hasClass, isFocusable, nodeIndex, inMenu } from '../dom-queries';
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
-/* tslint:disable:component-selector */
-/**
- * @hidden
- */
-let ListComponent = class ListComponent {
-    constructor(itemsService, hover, actions, navigation, renderer, ngZone, element) {
-        this.itemsService = itemsService;
-        this.hover = hover;
-        this.actions = actions;
-        this.navigation = navigation;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.element = element;
-        this.animate = true;
-    }
-    hierarchyIndex(index) {
-        return this.itemsService.itemIndex(this.index, index);
-    }
-    ngOnInit() {
-        this.itemsService.addList(this);
-        this.initDomEvents();
-    }
-    ngOnDestroy() {
-        this.itemsService.removeList(this);
-        if (this.domSubscriptions) {
-            this.domSubscriptions();
-        }
-    }
-    initDomEvents() {
-        if (!isDocumentAvailable() || !this.element) {
-            return;
-        }
-        this.ngZone.runOutsideAngular(() => {
-            const element = this.element.nativeElement;
-            const container = this.level > 0 ? closest(element, (node) => hasClass(node, 'k-popup')) : element;
-            const overSubscription = this.renderer.listen(element, 'mouseover', (e) => {
-                if (e.target === element && this.level === 0) {
-                    this.onLeave();
-                }
-                else {
-                    const item = this.nodeItem(e.target) || this.itemsService.get(this.index);
-                    if (item && !(this.openOnClick && this.openOnClick.toggle === 'click' && item.level === 0 && !item.hasContent)) {
-                        this.hover.over(item);
-                    }
-                }
-            });
-            const leaveSubscription = this.renderer.listen(container, 'mouseleave', (e) => {
-                if (this.leavesMenu(e)) {
-                    this.onLeave();
-                }
-            });
-            const keydownSubscription = this.renderer.listen(element, 'keydown', (e) => {
-                if (hasClass(e.target, 'k-menu-item')) {
-                    this.navigation.keydown(e);
-                }
-            });
-            const blurSubscription = this.renderer.listen(element, 'focusout', (e) => {
-                if (this.leavesMenu(e)) {
-                    this.navigation.focusLeave();
-                }
-            });
-            /**
-             * Handle focus/blur open/close for iOS devices since it behaves inconsistently with the rest
-             * Refer to: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
-             */
-            const touchSubscription = this.renderer.listen(document, 'touchstart', (e) => {
-                if (inMenu(e.target, this.itemsService)) {
-                    const item = this.nodeItem(e.target);
-                    // Needs to be called because the 'click' handler will be called only on secondary tap and the item will remain unfocused
-                    this.navigation.focus(item);
-                    // This is needed since the 'mouseover' event is not always dispatched
-                    if (!item.opened) {
-                        this.hover.over(item);
-                    }
-                }
-                else if (this.navigation.focusedIdx) {
-                    // If the touch is outside of the menu and the menu is not currently in focus
-                    const activeItem = this.itemsService.get(this.navigation.activeIndex);
-                    this.onLeave(); // needs to be called explicitly since mouseleave event is not triggered
-                    activeItem.blur(); // needs to be called explicitly otherwise the item remains focused => triggers focusout
-                }
-            });
-            const clickSubscription = this.renderer.listen(element, 'click', this.clickHandler.bind(this));
-            this.domSubscriptions = () => {
-                overSubscription();
-                leaveSubscription();
-                keydownSubscription();
-                blurSubscription();
-                clickSubscription();
-                touchSubscription();
-            };
-        });
-    }
-    leavesMenu(e) {
-        if (!e.relatedTarget) {
-            return true;
-        }
-        return !inMenu(e.relatedTarget, this.itemsService);
-    }
-    onLeave() {
-        const openOnClick = this.openOnClick;
-        if (!openOnClick || openOnClick.toggle !== 'click') {
-            this.hover.leave(openOnClick && openOnClick.toggle === 'leave');
-        }
-    }
-    nodeItem(target) {
-        const node = closestItem(target, this.element.nativeElement);
-        if (node) {
-            const index = nodeIndex(node);
-            return this.itemsService.get(index);
-        }
-    }
-    clickHandler(e) {
-        if (isFocusable(e.target) && !hasClass(e.target, 'k-menu-item')) {
-            return;
-        }
-        const item = this.nodeItem(e.target);
-        if (!item || item.isContent || item.navigating) {
-            return;
-        }
-        if (item.disabled) {
-            e.preventDefault();
-            return;
-        }
-        this.actions.select(item, e, () => {
-            e.preventDefault();
-        });
-        this.navigation.focus(item);
-        if (item.level > 0 && !item.hasContent) {
-            this.actions.closeToRoot(item);
-        }
-        if (this.openOnClick) {
-            const hover = this.hover;
-            if (item.opened) {
-                if (item.level === 0) {
-                    hover.openOnOver = false;
-                    this.actions.close(item);
-                }
-            }
-            else if (item.hasContent) {
-                hover.openOnOver = true;
-                this.actions.closeOthers(item);
-                this.actions.open(item);
-            }
-            else {
-                hover.openOnOver = false;
-                if (item.level === 0 && this.openOnClick.toggle === 'click') {
-                    this.hover.closeCurrent();
-                }
-            }
-        }
-        this.actions.execute();
-    }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array)
-], ListComponent.prototype, "items", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], ListComponent.prototype, "level", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ListComponent.prototype, "index", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], ListComponent.prototype, "animate", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ListComponent.prototype, "vertical", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ListComponent.prototype, "rtl", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], ListComponent.prototype, "openOnClick", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", TemplateRef)
-], ListComponent.prototype, "itemTemplate", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", TemplateRef)
-], ListComponent.prototype, "itemLinkTemplate", void 0);
-ListComponent = tslib_1.__decorate([
-    Component({
-        selector: '[kendoMenuList]',
-        template: `
-        <ng-container *ngFor="let item of items; let idx = index">
-            <li *ngIf="!item.separator" kendoMenuItem
-                [item]="item" [level]="level" [vertical]="vertical" [animate]="animate" [rtl]="rtl"
-                [itemTemplate]="itemTemplate" [itemLinkTemplate]="itemLinkTemplate" [openOnClick]="openOnClick"
-                [index]="hierarchyIndex(idx)" [siblingIndex]="idx" [attr.${NODE_INDEX}]="hierarchyIndex(idx)"
-                [ngClass]="item.cssClass" [ngStyle]="item.cssStyle"
-                role="menuitem"
-                class="k-item k-menu-item"
-                [class.k-first]="idx === 0" [class.k-last]="idx === items.length - 1"
-                [class.k-state-disabled]="item.disabled"></li>
-            <li *ngIf="item.separator" class="k-separator k-item"
-                role="separator" [ngClass]="item.cssClass" [ngStyle]="item.cssStyle">
-                &nbsp;
-            </li>
-        </ng-container>
-    `
-    }),
-    tslib_1.__metadata("design:paramtypes", [ItemsService,
-        HoverService,
-        ActionsService,
-        NavigationService,
-        Renderer2,
-        NgZone,
-        ElementRef])
-], ListComponent);
-export { ListComponent };