@progress/kendo-angular-listview 17.0.0-develop.9 → 17.0.1-develop.1

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

@@ -1,1767 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import * as i0 from '@angular/core';
-import { Injectable, Directive, Input, Optional, EventEmitter, Component, ChangeDetectionStrategy, HostBinding, ContentChild, ViewChild, ViewChildren, Output, HostListener, NgModule } from '@angular/core';
-import { isDocumentAvailable, Keys, isChanged, hasObservers, EventsOutsideAngularDirective, ResizeBatchService } from '@progress/kendo-angular-common';
-import { validatePackage } from '@progress/kendo-licensing';
-import * as i2 from '@progress/kendo-angular-l10n';
-import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { Subject, Subscription } from 'rxjs';
-import { FormGroup, FormControl } from '@angular/forms';
-import { switchMap, take } from 'rxjs/operators';
-import { NgIf, NgTemplateOutlet, NgClass, NgStyle, NgFor } from '@angular/common';
-import { PagerComponent, PageSizeChangeEvent as PageSizeChangeEvent$1 } from '@progress/kendo-angular-pager';
-import { Button } from '@progress/kendo-angular-buttons';
-import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
-import { PopupService } from '@progress/kendo-angular-popup';
-
-/**
- * @hidden
- */
-const packageMetadata = {
-    name: '@progress/kendo-angular-listview',
-    productName: 'Kendo UI for Angular',
-    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729174575,
-    version: '17.0.0-develop.9',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
-};
-
-const LISTVIEW_ITEM_SELECTOR = '.k-listview-item';
-/**
- * @hidden
- */
-const isPresent = (item) => item !== null && item !== undefined;
-/**
- * @hidden
- */
-const isObject = (item) => isPresent(item) && typeof item === 'object';
-/**
- * @hidden
- *
- * Polyfill for `Element.matches`.
- * https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
- */
-const match = (element, selector) => {
-    const matcher = element.matches || element.msMatchesSelector || element.webkitMatchesSelector;
-    if (!isPresent(matcher)) {
-        return false;
-    }
-    return matcher.call(element, selector);
-};
-/**
- * @hidden
- *
- * Checks if a target element has the `.k-listview-item` CSS class.
- */
-const isListViewItem = (element) => {
-    if (!isPresent(element)) {
-        return false;
-    }
-    return match(element, LISTVIEW_ITEM_SELECTOR);
-};
-/**
- * @hidden
- *
- * Extracts and parses to a number the `data-kendo-listview-item-index` attribute value from the targeted element.
- */
-const getListItemIndex = (item) => {
-    if (!isPresent(item)) {
-        return null;
-    }
-    return Number(item.getAttribute('data-kendo-listview-item-index'));
-};
-/**
- * @hidden
- *
- * Gets the new focus target from a blur event.
- * Queries both event.relatedTarget and document.activeElement for compatibility with IE.
- */
-const relatedTarget = (event) => {
-    if (!isPresent(event.relatedTarget) || !isDocumentAvailable()) {
-        return null;
-    }
-    return event.relatedTarget || document.activeElement;
-};
-/**
- * @hidden
- *
- * If the given contender number is not defined or lower than the specified min - returns min, if its above the specified max - returns max.
- * If the number is in the given bounds, it is returned.
- */
-const fitIntoRange = (contender, min, max) => {
-    if (!isPresent(contender) || contender <= min) {
-        return min;
-    }
-    else if (contender >= max) {
-        return max;
-    }
-    else {
-        return contender;
-    }
-};
-/**
- * @hidden
- */
-const closestWithMatch = (element, selector) => {
-    let parent = element;
-    while (parent !== null && parent.nodeType === 1) {
-        if (match(parent, selector)) {
-            return parent;
-        }
-        parent = parent.parentElement || parent.parentNode;
-    }
-    return null;
-};
-/**
- * @hidden
- *
- * Extracts and parses to a number the `data-kendo-listview-item-index` attribute value from the targeted element.
- */
-const getClosestListItemIndex = (element) => {
-    if (!isPresent(element)) {
-        return null;
-    }
-    const closestListViewItem = closestWithMatch(element, LISTVIEW_ITEM_SELECTOR);
-    return getListItemIndex(closestListViewItem);
-};
-
-/**
- * @hidden
- *
- * Provided per ListView instance. Keeps the availability, active index and focused state of the current ListView.
- * Emits `changes` when any of the aforementioned states changes.
- */
-class NavigationService {
-    constructor() {
-        /**
-         * Emits every time a change in active index/focus/blur/navigation availability occurs.
-         */
-        this.changes = new Subject();
-        /**
-         * Specifies if a ListView item currently holds focus.
-         */
-        this.isFocused = false;
-        /**
-         * Keeps track of the index of the items that should be the current focus target (tabindex="0").
-         * When set to `null`/`undefined`, the navigation is disabled and the items should not render a tabindex.
-         */
-        this.activeIndex = null;
-    }
-    /**
-     * Sets or gets if the navigation is enabled.
-     * When no activeIndex is present, the navigation is inferred as disabled.
-     * Toggling the service availability clears the current active index or activates the first one.
-     */
-    get isEnabled() {
-        return isPresent(this.activeIndex);
-    }
-    set isEnabled(enabled) {
-        if (enabled) {
-            this.activeIndex = 0;
-        }
-        else {
-            this.activeIndex = null;
-        }
-        this.changes.next();
-    }
-    /**
-     * Shows if the checked index should be the current available focus target (tabindex="0").
-     */
-    isActive(index) {
-        return index === this.activeIndex;
-    }
-    handleKeyDown(event, totalItemsCount) {
-        const { keyCode } = event;
-        switch (keyCode) {
-            case Keys.ArrowLeft:
-            case Keys.ArrowUp:
-                this.navigateToPrevious();
-                break;
-            case Keys.ArrowRight:
-            case Keys.ArrowDown:
-                this.navigateToNext(totalItemsCount);
-                break;
-            case Keys.Home: {
-                const firstIndex = 0;
-                this.navigateTo(firstIndex);
-                break;
-            }
-            case Keys.End: {
-                const lastIndex = totalItemsCount - 1;
-                this.navigateTo(lastIndex);
-                break;
-            }
-            default: return;
-        }
-        // the following line is executed only if the pressed key matches one of the listview hotkeys -
-        // they `break`, while the `default` case `return`s
-        event.preventDefault();
-    }
-    handleFocusIn(event) {
-        const target = event.target;
-        if (!isListViewItem(target)) {
-            const listViewItemSelector = '.k-listview-item';
-            const closestListViewItem = closestWithMatch(target, listViewItemSelector);
-            const isListViewItemChild = isPresent(closestListViewItem);
-            if (isListViewItemChild) {
-                const itemIndex = getListItemIndex(closestListViewItem);
-                this.setActiveIndex(itemIndex);
-            }
-            return;
-        }
-        const targetIndex = getListItemIndex(target);
-        // don't emit if the no change in focused state has occurred and the targeted index is the same as the current activeIndex
-        if (this.isFocused && targetIndex === this.activeIndex) {
-            return;
-        }
-        this.activeIndex = targetIndex;
-        this.isFocused = true;
-        this.changes.next();
-    }
-    handleFocusOut(event) {
-        // don't emit if the blurred item is not a listview item or if the new focus target is another listview item
-        if (!isListViewItem(event.target) || isListViewItem(relatedTarget(event))) {
-            return;
-        }
-        this.isFocused = false;
-        this.changes.next();
-    }
-    /**
-     * Sets the `activeIndex` and triggers changes without focusing the corresponding ListView item.
-     */
-    setActiveIndex(index) {
-        if (!this.isEnabled) {
-            return;
-        }
-        if (index === this.activeIndex) {
-            return;
-        }
-        this.activeIndex = index;
-        this.changes.next();
-    }
-    /**
-     * Focuses item at the targeted index. If no index is passed, the current `activeIndex` is used.
-     * The passed target index is normalized to fit the min/max available indices bounds.
-     */
-    focusIndex(index, totalItemsCount) {
-        if (!this.isEnabled) {
-            return;
-        }
-        const parsed = parseInt(index, 10);
-        const firstIndex = 0;
-        const lastIndex = totalItemsCount - 1;
-        const targetIndex = isNaN(parsed) ? this.activeIndex : fitIntoRange(parsed, firstIndex, lastIndex);
-        this.navigateTo(targetIndex);
-    }
-    navigateTo(index) {
-        if (this.isFocused && this.activeIndex === index) {
-            return;
-        }
-        this.isFocused = true;
-        this.activeIndex = index;
-        this.changes.next();
-    }
-    navigateToPrevious() {
-        const previousIndex = Math.max(this.activeIndex - 1, 0);
-        this.navigateTo(previousIndex);
-    }
-    navigateToNext(totalItemsCount) {
-        const lastAvailableIndex = totalItemsCount - 1;
-        const nextIndex = Math.min(this.activeIndex + 1, lastAvailableIndex);
-        this.navigateTo(nextIndex);
-    }
-}
-NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * @hidden
- */
-class ListViewNavigableItemDirective {
-    constructor(hostElement, renderer, navigationService) {
-        this.hostElement = hostElement;
-        this.renderer = renderer;
-        this.navigationService = navigationService;
-    }
-    ngOnChanges() {
-        this.updateNavigationState();
-    }
-    ngOnInit() {
-        this.navigationSubscription = this.navigationService.changes
-            .subscribe(this.updateNavigationState.bind(this));
-    }
-    ngOnDestroy() {
-        if (isPresent(this.navigationSubscription)) {
-            this.navigationSubscription.unsubscribe();
-        }
-    }
-    updateNavigationState() {
-        this.updateTabIndex();
-        this.updateFocusedState();
-    }
-    updateFocusedState() {
-        const shouldFocus = this.navigationService.isActive(this.index) && this.navigationService.isFocused;
-        const focusedCssClass = 'k-focus';
-        if (shouldFocus) {
-            this.renderer.addClass(this.hostElement.nativeElement, focusedCssClass);
-            this.hostElement.nativeElement.focus();
-        }
-        else {
-            this.renderer.removeClass(this.hostElement.nativeElement, focusedCssClass);
-        }
-    }
-    updateTabIndex() {
-        if (!this.navigationService.isEnabled) {
-            this.renderer.removeAttribute(this.hostElement.nativeElement, 'tabindex');
-        }
-        else if (this.navigationService.isActive(this.index)) {
-            this.renderer.setAttribute(this.hostElement.nativeElement, 'tabindex', '0');
-        }
-        else {
-            this.renderer.setAttribute(this.hostElement.nativeElement, 'tabindex', '-1');
-        }
-    }
-}
-ListViewNavigableItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListViewNavigableItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
-ListViewNavigableItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ListViewNavigableItemDirective, isStandalone: true, selector: "[kendoListViewNavigableItem]", inputs: { index: "index" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListViewNavigableItemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoListViewNavigableItem]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: NavigationService }]; }, propDecorators: { index: [{
-                type: Input
-            }] } });
-
-/**
- * Renders the list item content. To define an item template, nest an `<ng-template>` tag
- * with the `kendoListViewItemTemplate` directive inside the `<kendo-listview>` tag
- * [see example]({% slug templates_listview %}#toc-item-template).
- *
- * The following values are available as context variables:
- * - `let-dataItem="dataItem"` (`any`) - The current data item. Also available as implicit context variable.
- * - `let-index="index"` (`number`) - The current item index.
- * - `let-isFirst="isFirst"` (`boolean`) - Indicates whether the current data item will be rendered as the first item on the list.
- * - `let-isLast="isLast"` (`boolean`)- Indicates whether the current data item will be rendered as the last item on the list.
- */
-class ItemTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-ItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoListViewItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoListViewItemTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
-
-/**
- * Renders the header content of the ListView. To define a header template, nest an `<ng-template>` tag
- * with the `kendoListViewHeaderTemplate` directive inside the `<kendo-listview>` tag
- * [see example]({% slug templates_listview %}#toc-header-template).
- */
-class HeaderTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-HeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-HeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: HeaderTemplateDirective, isStandalone: true, selector: "[kendoListViewHeaderTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoListViewHeaderTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
-
-/**
- * Renders the footer content of the ListView. To define a footer template, nest an `<ng-template>` tag
- * with the `kendoListViewFooterTemplate` directive inside the `<kendo-listview>` tag
- * [see example]({% slug templates_listview %}#toc-footer-template).
- */
-class FooterTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-FooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-FooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FooterTemplateDirective, isStandalone: true, selector: "[kendoListViewFooterTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FooterTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoListViewFooterTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
-
-/**
- * Overrides the default loader content of the ListView. To define a loader template, nest an `<ng-template>` tag
- * with the `kendoListViewLoaderTemplate` directive inside the `<kendo-listview>` tag
- * [see example]({% slug templates_listview %}#toc-loader-template).
- */
-class LoaderTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-LoaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-LoaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LoaderTemplateDirective, isStandalone: true, selector: "[kendoListViewLoaderTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoaderTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoListViewLoaderTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
-
-/**
- * Represents the edit template of the ListView ([see example]({% slug editing_template_forms_listview %})).
- * Helps to customize the content of the edited items. To define the template, nest an `<ng-template>`
- * tag with the `kendoListViewEditTemplate` directive inside a `<kendo-listview>` tag.
- *
- * The template context contains the following fields:
- * - `formGroup`&mdash;The current [`FormGroup`](link:site.data.urls.angular['formgroupapi']).
- * If you use the ListView inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it will be `undefined`.
- * - `itemIndex`&mdash;The current item index. If inside a new item, `itemIndex` is `-1`.
- * - `dataItem`&mdash;The current data item.
- * - `isNew`&mdash;The state of the current item.
- */
-class EditTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-EditTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-EditTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditTemplateDirective, isStandalone: true, selector: "[kendoListViewEditTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoListViewEditTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i0.TemplateRef, decorators: [{
-                        type: Optional
-                    }] }];
-    } });
-
-/**
- * @hidden
- */
-const isEqual = (index) => (item) => item.index === index;
-/**
- * @hidden
- */
-const isNotEqual = (index) => (item) => item.index !== index;
-/**
- * @hidden
- */
-const isNewItem = (index) => index === -1 || index === undefined;
-/**
- * @hidden
- */
-class EditService {
-    constructor(ngZone) {
-        this.ngZone = ngZone;
-        this.changes = new EventEmitter();
-        this.editedIndices = [];
-        this.changedSource = new Subject();
-        this.changed = this.changedSource.asObservable().pipe(switchMap(() => this.ngZone.onStable.asObservable().pipe(take(1))));
-    }
-    editItem(index, group = undefined) {
-        this.editedIndices.push({ index, group });
-        this.onChanged();
-    }
-    addItem(group) {
-        this.newItem = { group };
-        this.onChanged();
-    }
-    isEditing() {
-        return this.editedIndices.length > 0;
-    }
-    get hasNewItem() {
-        return isPresent(this.newItem);
-    }
-    get newDataItem() {
-        if (this.hasNewItem) {
-            return this.newItem.group.value;
-        }
-        return {};
-    }
-    get newItemGroup() {
-        if (this.hasNewItem) {
-            return this.newItem.group;
-        }
-        return new FormGroup({});
-    }
-    editGroup(index) {
-        return this.context(index).group;
-    }
-    close(index) {
-        if (isNewItem(index)) {
-            this.newItem = undefined;
-            return;
-        }
-        this.editedIndices = this.editedIndices.filter(isNotEqual(index));
-        this.onChanged();
-    }
-    context(index) {
-        if (isNewItem(index)) {
-            return this.newItem;
-        }
-        return this.findByIndex(index);
-    }
-    isEdited(index) {
-        if (isNewItem(index) && isPresent(this.newItem)) {
-            return true;
-        }
-        return isPresent(this.findByIndex(index));
-    }
-    hasEdited(index) {
-        return isPresent(this.context(index));
-    }
-    beginEdit(itemIndex) {
-        this.changes.emit({ action: 'edit', itemIndex });
-    }
-    beginAdd() {
-        this.changes.emit({ action: 'add' });
-    }
-    endEdit(itemIndex) {
-        const { group: formGroup } = this.context(itemIndex);
-        this.changes.emit({ action: 'cancel', itemIndex, formGroup, isNew: isNewItem(itemIndex) });
-    }
-    save(itemIndex) {
-        const { group: formGroup } = this.context(itemIndex);
-        this.changes.emit({ action: 'save', itemIndex, formGroup, isNew: isNewItem(itemIndex) });
-    }
-    remove(itemIndex) {
-        this.changes.emit({ action: 'remove', itemIndex });
-    }
-    findByIndex(index) {
-        return this.editedIndices.find(isEqual(index));
-    }
-    onChanged() {
-        this.ngZone.runOutsideAngular(() => {
-            this.changedSource.next();
-        });
-    }
-}
-EditService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-EditService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
-
-const DEFAULT_PAGER_SETTINGS = {
-    position: 'bottom',
-    buttonCount: 5,
-    info: true,
-    previousNext: true,
-    type: 'numeric',
-    pageSizeValues: [5, 10, 20]
-};
-const createControl = (source) => (acc, key) => {
-    acc[key] = new FormControl(source[key]);
-    return acc;
-};
-/**
- * Represents the Kendo UI ListView component for Angular.
- */
-class ListViewComponent {
-    constructor(ngZone, element, renderer, changeDetectorRef, editService, navigationService) {
-        this.ngZone = ngZone;
-        this.element = element;
-        this.renderer = renderer;
-        this.changeDetectorRef = changeDetectorRef;
-        this.editService = editService;
-        this.navigationService = navigationService;
-        /**
-         * @hidden
-         */
-        this.className = true;
-        /**
-         * Specifies if a border should be rendered around the listview element.
-         *
-         * @default false
-         */
-        this.bordered = false;
-        /**
-         * Specifies if the loading indicator of the ListView will be displayed
-         * ([see example]({% slug paging_listview %}#toc-remote-binding)).
-         */
-        this.loading = false;
-        /**
-         * Specifies the content container `role` attribute
-         * ([more details]({% slug accessibility_listview %}#toc-wai-aria-support)).
-         * By default, the container `role` is set to `list`.
-         */
-        this.containerRole = 'list';
-        /**
-         * Specifies the list item `role` attribute
-         * ([more details]({% slug accessibility_listview %}#toc-wai-aria-support)).
-         * By default, the list item `role` is set to `listitem`.
-         */
-        this.listItemRole = 'listitem';
-        /**
-         * Fires when the user scrolls to the last record on the page
-         * ([see endless scrolling example]({% slug scrollmodes_listview %}#toc-endless-scrolling)).
-         */
-        this.scrollBottom = new EventEmitter();
-        /**
-         * Fires when the page or the page size of the ListView is changed
-         * ([see example]({% slug paging_listview %}#toc-remote-binding)).
-         * You have to handle the event yourself and page the data.
-         */
-        this.pageChange = new EventEmitter();
-        /**
-         * Fires when the page size of the ListView is changed. This event can be prevented (`$event.preventDefault()`).
-         * If not prevented, the `pageChange` event will be fired subsequently.
-         */
-        this.pageSizeChange = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Edit** command button to edit an item
-         * ([see example]({% slug editing_template_forms_listview %}#toc-editing-records)).
-         */
-        this.edit = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Cancel** command button to close an item
-         * ([see example]({% slug editing_template_forms_listview %}#toc-cancelling-editing)).
-         */
-        this.cancel = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Save** command button to save changes in an item
-         * ([see example]({% slug editing_template_forms_listview %}#toc-saving-records)).
-         */
-        this.save = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Remove** command button to remove an item
-         * ([see example]({% slug editing_template_forms_listview %}#toc-removing-records)).
-         */
-        this.remove = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Add** command button to add a new item
-         * ([see example]({% slug editing_template_forms_listview %}#toc-adding-records)).
-         */
-        this.add = new EventEmitter();
-        this._skip = 0;
-        this._navigable = false;
-        validatePackage(packageMetadata);
-        this.attachEditHandlers();
-    }
-    /**
-     * Specifies whether the keyboard navigation is enabled
-     * ([see example]({% slug keyboard_navigation_listview %})).
-     * By default, the navigation is disabled.
-     */
-    set navigable(navigable) {
-        if (!navigable && isPresent(this.removeNavigationListeners)) {
-            this.removeNavigationListeners();
-            this.removeNavigationListeners = null;
-            this.navigationService.isEnabled = false;
-        }
-        else if (navigable && !isPresent(this.removeNavigationListeners)) {
-            this.addNavigationListeners();
-            this.navigationService.isEnabled = true;
-        }
-        this._navigable = navigable;
-    }
-    get navigable() {
-        return this._navigable;
-    }
-    /**
-     * Defines the number of records to be skipped by the pager
-     * ([more details]({% slug paging_listview %})).
-     */
-    set skip(skip) {
-        const parsed = parseInt(skip, 10);
-        const defaultSkipValue = 0;
-        this._skip = !isNaN(parsed) ? parsed : defaultSkipValue;
-    }
-    get skip() {
-        return this._skip;
-    }
-    /**
-     * Configures whether the ListView will render a pager
-     * ([more details]({% slug paging_listview %})).
-     * Providing a boolean value will render a pager with the default settings.
-     */
-    set pageable(pageable) {
-        this._pageable = pageable;
-        this.pagerSettings = pageable ? Object.assign({}, DEFAULT_PAGER_SETTINGS, pageable) : null;
-    }
-    get pageable() {
-        return this._pageable;
-    }
-    /**
-     * @hidden
-     *
-     * Gets the data items passed to the ListView.
-     * If a ListViewDataResult is passed, the data value is used. If an array is passed - it's directly used.
-     */
-    get items() {
-        if (!isPresent(this.data)) {
-            return [];
-        }
-        return Array.isArray(this.data) ? this.data : this.data.data;
-    }
-    /**
-     * @hidden
-     *
-     * Gets the total number of records passed to the ListView.
-     * If a ListViewDataResult is passed, the total value is used. If an array is passed - its length is used.
-     */
-    get total() {
-        if (!this.pageable) {
-            return;
-        }
-        if (!isPresent(this.data)) {
-            return 0;
-        }
-        return Array.isArray(this.data) ? this.data.length : this.data.total;
-    }
-    /**
-     * @hidden
-     */
-    get containerTabindex() {
-        // workaround for FF, where a scrollable container is focusable even without a tabindex and creates an unwanted tab stop
-        // https://bugzilla.mozilla.org/show_bug.cgi?id=616594
-        return this.navigable ? -1 : null;
-    }
-    /**
-     * Gets the current active item index
-     * ([see example]({% slug keyboard_navigation_listview %}#toc-controlling-the-focus)).
-     * Returns `null` when the keyboard navigation is disabled.
-     */
-    get activeIndex() {
-        return this.navigationService.activeIndex;
-    }
-    ngOnChanges(changes) {
-        if (isChanged('height', changes, false)) {
-            this.renderer.setStyle(this.element.nativeElement, 'height', `${this.height}px`);
-        }
-    }
-    ngOnDestroy() {
-        if (isPresent(this.editServiceSubscription)) {
-            this.editServiceSubscription.unsubscribe();
-        }
-    }
-    /**
-     * @hidden
-     */
-    templateContext(index) {
-        return {
-            "$implicit": this.items[index],
-            "isLast": index === this.items.length - 1,
-            "isFirst": index === 0,
-            "dataItem": this.items[index],
-            "index": index
-        };
-    }
-    /**
-     * @hidden
-     */
-    editTemplateContext(index) {
-        const isNew = index === -1;
-        const group = isNew ? this.editService.newItemGroup : this.editService.editGroup(index);
-        return {
-            "$implicit": group,
-            "formGroup": group,
-            "dataItem": isNew ? this.editService.newDataItem : this.items[index],
-            "isNew": isNew,
-            "index": index
-        };
-    }
-    /**
-     * Focuses the item at the specified index ([see example]({% slug keyboard_navigation_listview %}#toc-controlling-the-focus)):
-     * - If no index is specified, the current active index will be focused.
-     * - If the passed value is below `0`, the first item receives focus.
-     * - If the passed value is above the last available index, the last item receives focus.
-     *
-     * > The index param is based on the logical structure of the ListView and does not correspond to the data item index -
-     * > i.e. the index `0` corresponds to the first rendered list item. Paging is not taken into account.
-     * > Also, for the focusing to work, the `navigable` prop must first be set to `true`.
-     */
-    focus(index) {
-        const totalRenderedItems = this.listViewItems.length;
-        this.navigationService.focusIndex(index, totalRenderedItems);
-    }
-    /**
-     * Creates a new item editor ([see example]({% slug editing_template_forms_listview %}#toc-adding-records)).
-     *
-     * @param {FormGroup} group - The [`FormGroup`](link:site.data.urls.angular['formgroupapi']) that describes
-     * the edit form. If called with a data item, it will build the `FormGroup` from the data item fields.
-     */
-    addItem(group) {
-        const isFormGroup = group instanceof FormGroup;
-        if (!isFormGroup) {
-            const fields = Object.keys(group).reduce(createControl(group), {});
-            group = new FormGroup(fields);
-        }
-        this.editService.addItem(group);
-    }
-    /**
-     * Switches the specified item to edit mode ([see example]({% slug editing_template_forms_listview %}#toc-editing-records)).
-     *
-     * @param index - The item index that will be switched to edit mode.
-     * @param group - The [`FormGroup`](link:site.data.urls.angular['formgroupapi'])
-     * that describes the edit form.
-     */
-    editItem(index, group) {
-        this.editService.editItem(index, group);
-        this.changeDetectorRef.markForCheck();
-    }
-    /**
-     * Closes the editor for a given item ([see example]({% slug editing_template_forms_listview %}#toc-cancelling-editing)).
-     *
-     * @param {number} index - The item index that will be switched out of the edit mode. If no index is provided, it is assumed
-     * that the new item editor will be closed.
-     */
-    closeItem(index) {
-        this.editService.close(index);
-        this.changeDetectorRef.markForCheck();
-    }
-    /**
-     * @hidden
-     */
-    isEdited(index) {
-        return this.editService.isEdited(index);
-    }
-    /**
-     * @hidden
-     */
-    handlePageChange(event) {
-        this.scrollToContainerTop();
-        const firstIndex = 0;
-        this.navigationService.setActiveIndex(firstIndex);
-        this.pageChange.emit(event);
-    }
-    /**
-     * @hidden
-     */
-    handleContentScroll() {
-        if (!hasObservers(this.scrollBottom)) {
-            return;
-        }
-        const THRESHOLD = 2;
-        const { scrollHeight, scrollTop, clientHeight } = this.contentContainer.nativeElement;
-        const atBottom = scrollHeight - clientHeight - scrollTop <= THRESHOLD;
-        if (atBottom) {
-            this.ngZone.run(() => {
-                const event = { sender: this };
-                this.scrollBottom.emit(event);
-            });
-        }
-    }
-    /**
-     * @hidden
-     */
-    itemPosInSet(index) {
-        if (!this.pageable) {
-            return;
-        }
-        // adds 1 as the aria-posinset is not zero-based and the counting starts from 1
-        return this.skip + index + 1;
-    }
-    scrollToContainerTop() {
-        const container = this.contentContainer.nativeElement;
-        container.scrollTop = 0;
-        container.scrollLeft = 0;
-    }
-    addNavigationListeners() {
-        this.ngZone.runOutsideAngular(() => {
-            const removeKeydownListener = this.renderer.listen(this.contentContainer.nativeElement, 'keydown', event => this.navigationService.handleKeyDown(event, this.listViewItems.length));
-            const removeFocusInListener = this.renderer.listen(this.contentContainer.nativeElement, 'focusin', event => this.navigationService.handleFocusIn(event));
-            const removeFocusOutListener = this.renderer.listen(this.contentContainer.nativeElement, 'focusout', event => this.navigationService.handleFocusOut(event));
-            this.removeNavigationListeners = () => {
-                removeKeydownListener();
-                removeFocusInListener();
-                removeFocusOutListener();
-            };
-        });
-    }
-    attachEditHandlers() {
-        if (!isPresent(this.editService)) {
-            return;
-        }
-        this.editServiceSubscription = this.editService
-            .changes.subscribe(this.emitCRUDEvent.bind(this));
-    }
-    emitCRUDEvent(args) {
-        const { action, itemIndex, formGroup } = args;
-        let dataItem = this.items[itemIndex];
-        if (action !== 'add' && formGroup) {
-            dataItem = formGroup.value;
-        }
-        Object.assign(args, {
-            dataItem: dataItem,
-            sender: this
-        });
-        this[action].emit(args);
-    }
-}
-ListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListViewComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: EditService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ListViewComponent, isStandalone: true, selector: "kendo-listview", inputs: { bordered: "bordered", data: "data", loading: "loading", containerStyle: "containerStyle", itemStyle: "itemStyle", containerClass: "containerClass", itemClass: "itemClass", containerLabel: "containerLabel", containerRole: "containerRole", listItemRole: "listItemRole", navigable: "navigable", pageSize: "pageSize", skip: "skip", pageable: "pageable", height: "height" }, outputs: { scrollBottom: "scrollBottom", pageChange: "pageChange", pageSizeChange: "pageSizeChange", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add" }, host: { properties: { "class.k-listview": "this.className", "class.k-listview-bordered": "this.bordered" } }, providers: [
-        EditService,
-        NavigationService,
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.listview'
-        }
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "loaderTemplate", first: true, predicate: LoaderTemplateDirective, descendants: true }, { propertyName: "editTemplate", first: true, predicate: EditTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, static: true }, { propertyName: "listViewItems", predicate: ListViewNavigableItemDirective, descendants: true }], exportAs: ["kendoListView"], usesOnChanges: true, ngImport: i0, template: `
-        <!-- top pager -->
-        <ng-template
-            *ngIf="pagerSettings?.position !== 'bottom'"
-            [ngTemplateOutlet]="pagerTemplate"
-            [ngTemplateOutletContext]="{ pagerClass: 'k-listview-pager k-listview-pager-top' }"
-        >
-        </ng-template>
-
-        <!-- header -->
-        <div
-            *ngIf="headerTemplate"
-            class="k-listview-header"
-        >
-            <ng-template
-                [ngTemplateOutlet]="headerTemplate?.templateRef"
-            >
-            </ng-template>
-        </div>
-
-        <!-- content -->
-        <div
-            #contentContainer
-            [attr.tabindex]="containerTabindex"
-            class="k-listview-content"
-            [ngClass]="containerClass"
-            [ngStyle]="containerStyle"
-            [kendoEventsOutsideAngular]="{
-                scroll: handleContentScroll
-            }"
-            [scope]="this"
-            [attr.role]="containerRole"
-            [attr.aria-label]="containerLabel"
-        >
-            <!-- new item edit template -->
-            <div
-                *ngIf="editService.hasNewItem"
-                class="k-listview-item"
-                [attr.role]="listItemRole"
-                kendoListViewNavigableItem
-                [index]="-1"
-                [attr.data-kendo-listview-item-index]="-1"
-                [ngClass]="itemClass"
-                [ngStyle]="itemStyle"
-            >
-                <ng-template
-                    *ngIf="editTemplate"
-                    [ngTemplateOutlet]="editTemplate?.templateRef"
-                    [ngTemplateOutletContext]="editTemplateContext(-1)"
-                >
-                </ng-template>
-            </div>
-
-            <!-- items -->
-            <div
-                *ngFor="let dataItem of items; let index = index; let first = first; let last = last;"
-                class="k-listview-item"
-                [attr.role]="listItemRole"
-                [attr.aria-posinset]="itemPosInSet(index)"
-                [attr.aria-setsize]="total"
-                kendoListViewNavigableItem
-                [index]="index"
-                [attr.data-kendo-listview-item-index]="index"
-                [ngClass]="itemClass"
-                [ngStyle]="itemStyle"
-            >
-                <ng-template
-                    [ngTemplateOutlet]="isEdited(index) ? editTemplate?.templateRef : itemTemplate?.templateRef"
-                    [ngTemplateOutletContext]="isEdited(index) ? editTemplateContext(index) : templateContext(index)"
-                >
-                </ng-template>
-            </div>
-
-            <!-- loading indicator -->
-            <div
-                *ngIf="loading && !loaderTemplate"
-                class="k-loading-mask"
-            >
-                <!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case -->
-                <span class="k-loading-text">Loading</span>
-                <div class="k-loading-image"></div>
-                <div class="k-loading-color"></div>
-            </div>
-            <ng-template
-                *ngIf="loading && loaderTemplate"
-                [ngTemplateOutlet]="loaderTemplate.templateRef"
-            >
-            </ng-template>
-        </div>
-
-        <!-- footer -->
-        <div
-            *ngIf="footerTemplate"
-            class="k-listview-footer"
-        >
-            <ng-template
-                [ngTemplateOutlet]="footerTemplate?.templateRef"
-            >
-            </ng-template>
-        </div>
-
-        <!-- bottom pager -->
-        <ng-template
-            *ngIf="pagerSettings?.position !== 'top'"
-            [ngTemplateOutlet]="pagerTemplate"
-            [ngTemplateOutletContext]="{ pagerClass: 'k-listview-pager' }"
-        >
-        </ng-template>
-
-        <!-- pager template -->
-        <ng-template #pagerTemplate let-pagerClass="pagerClass">
-            <kendo-datapager
-                *ngIf="pageable"
-                [class]="pagerClass"
-                [total]="total"
-                [pageSize]="pageSize"
-                [skip]="skip"
-                [buttonCount]="pagerSettings.buttonCount"
-                [info]="pagerSettings.info"
-                [previousNext]="pagerSettings.previousNext"
-                [type]="pagerSettings.type"
-                [pageSizeValues]="pagerSettings.pageSizeValues"
-                (pageChange)="handlePageChange($event)"
-                (pageSizeChange)="pageSizeChange.emit($event)"
-            >
-            </kendo-datapager>
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: ListViewNavigableItemDirective, selector: "[kendoListViewNavigableItem]", inputs: ["index"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PagerComponent, selector: "kendo-datapager", inputs: ["total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListViewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    exportAs: 'kendoListView',
-                    selector: 'kendo-listview',
-                    providers: [
-                        EditService,
-                        NavigationService,
-                        LocalizationService,
-                        {
-                            provide: L10N_PREFIX,
-                            useValue: 'kendo.listview'
-                        }
-                    ],
-                    template: `
-        <!-- top pager -->
-        <ng-template
-            *ngIf="pagerSettings?.position !== 'bottom'"
-            [ngTemplateOutlet]="pagerTemplate"
-            [ngTemplateOutletContext]="{ pagerClass: 'k-listview-pager k-listview-pager-top' }"
-        >
-        </ng-template>
-
-        <!-- header -->
-        <div
-            *ngIf="headerTemplate"
-            class="k-listview-header"
-        >
-            <ng-template
-                [ngTemplateOutlet]="headerTemplate?.templateRef"
-            >
-            </ng-template>
-        </div>
-
-        <!-- content -->
-        <div
-            #contentContainer
-            [attr.tabindex]="containerTabindex"
-            class="k-listview-content"
-            [ngClass]="containerClass"
-            [ngStyle]="containerStyle"
-            [kendoEventsOutsideAngular]="{
-                scroll: handleContentScroll
-            }"
-            [scope]="this"
-            [attr.role]="containerRole"
-            [attr.aria-label]="containerLabel"
-        >
-            <!-- new item edit template -->
-            <div
-                *ngIf="editService.hasNewItem"
-                class="k-listview-item"
-                [attr.role]="listItemRole"
-                kendoListViewNavigableItem
-                [index]="-1"
-                [attr.data-kendo-listview-item-index]="-1"
-                [ngClass]="itemClass"
-                [ngStyle]="itemStyle"
-            >
-                <ng-template
-                    *ngIf="editTemplate"
-                    [ngTemplateOutlet]="editTemplate?.templateRef"
-                    [ngTemplateOutletContext]="editTemplateContext(-1)"
-                >
-                </ng-template>
-            </div>
-
-            <!-- items -->
-            <div
-                *ngFor="let dataItem of items; let index = index; let first = first; let last = last;"
-                class="k-listview-item"
-                [attr.role]="listItemRole"
-                [attr.aria-posinset]="itemPosInSet(index)"
-                [attr.aria-setsize]="total"
-                kendoListViewNavigableItem
-                [index]="index"
-                [attr.data-kendo-listview-item-index]="index"
-                [ngClass]="itemClass"
-                [ngStyle]="itemStyle"
-            >
-                <ng-template
-                    [ngTemplateOutlet]="isEdited(index) ? editTemplate?.templateRef : itemTemplate?.templateRef"
-                    [ngTemplateOutletContext]="isEdited(index) ? editTemplateContext(index) : templateContext(index)"
-                >
-                </ng-template>
-            </div>
-
-            <!-- loading indicator -->
-            <div
-                *ngIf="loading && !loaderTemplate"
-                class="k-loading-mask"
-            >
-                <!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case -->
-                <span class="k-loading-text">Loading</span>
-                <div class="k-loading-image"></div>
-                <div class="k-loading-color"></div>
-            </div>
-            <ng-template
-                *ngIf="loading && loaderTemplate"
-                [ngTemplateOutlet]="loaderTemplate.templateRef"
-            >
-            </ng-template>
-        </div>
-
-        <!-- footer -->
-        <div
-            *ngIf="footerTemplate"
-            class="k-listview-footer"
-        >
-            <ng-template
-                [ngTemplateOutlet]="footerTemplate?.templateRef"
-            >
-            </ng-template>
-        </div>
-
-        <!-- bottom pager -->
-        <ng-template
-            *ngIf="pagerSettings?.position !== 'top'"
-            [ngTemplateOutlet]="pagerTemplate"
-            [ngTemplateOutletContext]="{ pagerClass: 'k-listview-pager' }"
-        >
-        </ng-template>
-
-        <!-- pager template -->
-        <ng-template #pagerTemplate let-pagerClass="pagerClass">
-            <kendo-datapager
-                *ngIf="pageable"
-                [class]="pagerClass"
-                [total]="total"
-                [pageSize]="pageSize"
-                [skip]="skip"
-                [buttonCount]="pagerSettings.buttonCount"
-                [info]="pagerSettings.info"
-                [previousNext]="pagerSettings.previousNext"
-                [type]="pagerSettings.type"
-                [pageSizeValues]="pagerSettings.pageSizeValues"
-                (pageChange)="handlePageChange($event)"
-                (pageSizeChange)="pageSizeChange.emit($event)"
-            >
-            </kendo-datapager>
-        </ng-template>
-    `,
-                    standalone: true,
-                    imports: [NgIf, NgTemplateOutlet, NgClass, NgStyle, EventsOutsideAngularDirective, ListViewNavigableItemDirective, NgFor, PagerComponent]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: EditService }, { type: NavigationService }]; }, propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.k-listview']
-            }], itemTemplate: [{
-                type: ContentChild,
-                args: [ItemTemplateDirective, { static: false }]
-            }], headerTemplate: [{
-                type: ContentChild,
-                args: [HeaderTemplateDirective, { static: false }]
-            }], footerTemplate: [{
-                type: ContentChild,
-                args: [FooterTemplateDirective, { static: false }]
-            }], loaderTemplate: [{
-                type: ContentChild,
-                args: [LoaderTemplateDirective, { static: false }]
-            }], contentContainer: [{
-                type: ViewChild,
-                args: ['contentContainer', { static: true }]
-            }], editTemplate: [{
-                type: ContentChild,
-                args: [EditTemplateDirective, { static: false }]
-            }], listViewItems: [{
-                type: ViewChildren,
-                args: [ListViewNavigableItemDirective]
-            }], bordered: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.k-listview-bordered']
-            }], data: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], containerStyle: [{
-                type: Input
-            }], itemStyle: [{
-                type: Input
-            }], containerClass: [{
-                type: Input
-            }], itemClass: [{
-                type: Input
-            }], containerLabel: [{
-                type: Input
-            }], containerRole: [{
-                type: Input
-            }], listItemRole: [{
-                type: Input
-            }], navigable: [{
-                type: Input
-            }], pageSize: [{
-                type: Input
-            }], skip: [{
-                type: Input
-            }], pageable: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], scrollBottom: [{
-                type: Output
-            }], pageChange: [{
-                type: Output
-            }], pageSizeChange: [{
-                type: Output
-            }], edit: [{
-                type: Output
-            }], cancel: [{
-                type: Output
-            }], save: [{
-                type: Output
-            }], remove: [{
-                type: Output
-            }], add: [{
-                type: Output
-            }] } });
-
-/**
- * A directive that encapsulates the in-memory handling of paging
- * ([see example]({% slug paging_listview %}#toc-binding-directive)).
- */
-class DataBindingDirective {
-    constructor(listView) {
-        this.listView = listView;
-        this.subscriptions = new Subscription();
-    }
-    /**
-     * The array of data which will be used to populate the ListView.
-     */
-    set data(data) {
-        this._data = data || [];
-        this.updateListViewData();
-    }
-    get data() {
-        return this._data;
-    }
-    ngOnInit() {
-        this.subscriptions.add(this.listView.pageChange.subscribe(this.handlePageChange.bind(this)));
-        this.subscriptions.add(this.listView.pageSizeChange.subscribe(this.handlePageSizeChange.bind(this)));
-        this.updateListViewData();
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    handlePageChange(event) {
-        this.listView.skip = event.skip;
-        this.listView.pageSize = event.take;
-        this.updateListViewData();
-    }
-    handlePageSizeChange(event) {
-        this.listView.pageSize = Number(event.newPageSize);
-    }
-    updateListViewData() {
-        const from = this.listView.skip || 0;
-        const to = from + (this.listView.pageSize || this.data.length);
-        this.listView.data = {
-            data: this.data.slice(from, to),
-            total: this.data.length
-        };
-    }
-}
-DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataBindingDirective, deps: [{ token: ListViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
-DataBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DataBindingDirective, isStandalone: true, selector: "[kendoListViewBinding]", inputs: { data: ["kendoListViewBinding", "data"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataBindingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoListViewBinding]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: ListViewComponent }]; }, propDecorators: { data: [{
-                type: Input,
-                args: ['kendoListViewBinding']
-            }] } });
-
-/**
- * The arguments of the [`pageSizeChange`]({% slug api_listview_listviewcomponent %}#toc-pagesizechange) event of the ListView
- * ([more details]({% slug paging_listview %}).
- */
-class PageSizeChangeEvent extends PageSizeChangeEvent$1 {
-}
-
-/**
- * Represents the `edit` command of the ListView. You can apply this directive to any `button`
- * element inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
- * When an associated button with the directive is clicked, the
- * [`edit`]({% slug api_listview_listviewcomponent %}#toc-edit) event
- * is triggered ([see example]({% slug editing_listview %})).
- *
- * @example
- * ```html-no-run
- * <kendo-listview>
- *   <ng-template kendoListViewEditTemplate>
- *     <button kendoListViewEditCommand class="k-primary">Edit</button>
- *   </ng-template>
- * </kendo-listview>
- * ```
- *
- */
-class EditCommandDirective extends Button {
-    constructor(editService, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
-        this.editService = editService;
-        this.elementRef = element;
-    }
-    /**
-     * @hidden
-     */
-    clickHandler(e) {
-        e.preventDefault();
-        const index = getClosestListItemIndex(this.elementRef.nativeElement);
-        this.editService.beginEdit(index);
-    }
-}
-EditCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-EditCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EditCommandDirective, isStandalone: true, selector: "[kendoListViewEditCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
-            innerCssClass="k-button-icon"
-            [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
-            <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
-        <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditCommandDirective, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[kendoListViewEditCommand]',
-                    template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
-            innerCssClass="k-button-icon"
-            [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
-            <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
-        <span class="k-button-text"><ng-content></ng-content></span>
-    `,
-                    standalone: true,
-                    imports: [NgIf, IconWrapperComponent, NgClass]
-                }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { clickHandler: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-/**
- * Represents the command for adding a new item to the ListView. You can apply this directive to any
- * `button` element inside a [`HeaderTemplate`]({% slug api_listview_headertemplatedirective %}).
- * When an associated button with the directive is clicked, the
- * [`add`]({% slug api_listview_listviewcomponent %}#toc-add) event is triggered
- * ([see example]({% slug editing_listview %})).
- *
- * @example
- * ```html-no-run
- * <kendo-listview>
- *    <ng-template kendoListViewHeaderTemplate>
- *       <button kendoListViewAddCommand>Add new</button>
- *    </ng-template>
- * </kendo-listview>
- * ```
- */
-class AddCommandDirective extends Button {
-    constructor(editService, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
-        this.editService = editService;
-    }
-    /**
-     * @hidden
-     */
-    clickHandler(e) {
-        e.preventDefault();
-        this.editService.beginAdd();
-    }
-}
-AddCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AddCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AddCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AddCommandDirective, isStandalone: true, selector: "[kendoListViewAddCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
-            innerCssClass="k-button-icon"
-            [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
-            <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
-        <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AddCommandDirective, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[kendoListViewAddCommand]',
-                    template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
-            innerCssClass="k-button-icon"
-            [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
-            <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
-        <span class="k-button-text"><ng-content></ng-content></span>
-    `,
-                    standalone: true,
-                    imports: [NgIf, IconWrapperComponent, NgClass]
-                }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { clickHandler: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-/**
- * Represents the `save` command of the ListView. You can apply this directive to any `button`
- * element inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
- * When an associated button with the directive is clicked, the
- * [`save`]({% slug api_listview_listviewcomponent %}#toc-save) event
- * is triggered ([see example]({% slug editing_listview %})).
- *
- * @example
- * ```html-no-run
- * <kendo-listview>
- *   <ng-template kendoListViewEditTemplate>
- *     <button kendoListViewSaveCommand>Save changes</button>
- *   </ng-template>
- * </kendo-listview>
- * ```
- *
- * You can control the content of the button based on the state of the item.
- *
- * @example
- * ```html-no-run
- * <kendo-listview>
- *   <ng-template kendoListViewEditTemplate let-isNew="isNew">
- *     <button kendoListViewSaveCommand>{{isNew ? 'Add' : 'Update'}}</button>
- *   </ng-template>
- * </kendo-listview>
- * ```
- */
-class SaveCommandDirective extends Button {
-    constructor(editService, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
-        this.editService = editService;
-        this.elementRef = element;
-    }
-    /**
-     * @hidden
-     */
-    clickHandler(e) {
-        e.preventDefault();
-        const index = getClosestListItemIndex(this.elementRef.nativeElement);
-        if (this.editService.isEdited(index)) {
-            this.editService.save(index);
-        }
-    }
-}
-SaveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SaveCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SaveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SaveCommandDirective, isStandalone: true, selector: "[kendoListViewSaveCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
-            innerCssClass="k-button-icon"
-            [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
-            <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
-        <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SaveCommandDirective, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[kendoListViewSaveCommand]',
-                    template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
-            innerCssClass="k-button-icon"
-            [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
-            <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
-        <span class="k-button-text"><ng-content></ng-content></span>
-    `,
-                    standalone: true,
-                    imports: [NgIf, IconWrapperComponent, NgClass]
-                }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { clickHandler: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-/**
- * Represents the `cancel` command of the ListView. You can apply this directive to any `button`
- * element inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
- * When an associated button with the directive is clicked, the
- * [`cancel`]({% slug api_listview_listviewcomponent %}#toc-cancel) event
- * is triggered ([see example]({% slug editing_listview %})).
- *
- * @example
- * ```html-no-run
- * <kendo-listview>
- *   <ng-template kendoListViewEditTemplate>
- *     <button kendoListViewCancelCommand>Cancel changes</button>
- *   </ng-template>
- * </kendo-listview>
- * ```
- *
- * You can control the content of the button based on the state of the item.
- *
- * @example
- * ```html-no-run
- * <kendo-listview>
- *   <ng-template kendoListViewEditTemplate let-isNew="isNew">
- *     <button kendoListViewCancelCommand>{{isNew ? 'Discard' : 'Cancel changes'}}</button>
- *   </ng-template>
- * </kendo-listview>
- * ```
- */
-class CancelCommandDirective extends Button {
-    constructor(editService, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
-        this.editService = editService;
-        this.elementRef = element;
-    }
-    /**
-     * @hidden
-     */
-    clickHandler(e) {
-        e.preventDefault();
-        const index = getClosestListItemIndex(this.elementRef.nativeElement);
-        if (this.editService.isEdited(index)) {
-            this.editService.endEdit(index);
-        }
-    }
-}
-CancelCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CancelCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-CancelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CancelCommandDirective, isStandalone: true, selector: "[kendoListViewCancelCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
-            innerCssClass="k-button-icon"
-            [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
-            <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
-        <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CancelCommandDirective, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[kendoListViewCancelCommand]',
-                    template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
-            innerCssClass="k-button-icon"
-            [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
-            <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
-        <span class="k-button-text"><ng-content></ng-content></span>
-    `,
-                    standalone: true,
-                    imports: [NgIf, IconWrapperComponent, NgClass]
-                }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { clickHandler: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-/**
- * Represents the `remove` command of the ListView. You can apply this directive to any `button` element
- * inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
- * When an associated button with the directive is clicked, the
- * [`remove` event]({% slug api_listview_listviewcomponent %}#toc-remove)
- * is triggered ([see example]({% slug editing_listview %})).
- *
- * @example
- * ```html-no-run
- * <kendo-listview>
- *   <ng-template kendoListViewEditTemplate>
- *     <button kendoListViewRemoveCommand>Remove item</button>
- *   </ng-template>
- * </kendo-listview>
- * ```
- */
-class RemoveCommandDirective extends Button {
-    constructor(editService, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
-        this.editService = editService;
-        this.elementRef = element;
-    }
-    /**
-     * @hidden
-     */
-    clickHandler(e) {
-        e.preventDefault();
-        const index = getClosestListItemIndex(this.elementRef.nativeElement);
-        this.editService.remove(index);
-    }
-}
-RemoveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RemoveCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-RemoveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RemoveCommandDirective, isStandalone: true, selector: "[kendoListViewRemoveCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
-            innerCssClass="k-button-icon"
-            [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
-            <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
-        <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RemoveCommandDirective, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[kendoListViewRemoveCommand]',
-                    template: `
-        <kendo-icon-wrapper
-            *ngIf="icon || svgIcon"
-            innerCssClass="k-button-icon"
-            [name]="icon"
-            [svgIcon]="svgIcon"></kendo-icon-wrapper>
-        <span *ngIf="imageUrl" class="k-button-icon k-icon">
-            <img [src]="imageUrl" class="k-image" role="presentation" />
-        </span>
-        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
-        <span class="k-button-text"><ng-content></ng-content></span>
-    `,
-                    standalone: true,
-                    imports: [NgIf, IconWrapperComponent, NgClass]
-                }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { clickHandler: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-/**
- * Utility array that contains all `@progress/kendo-angular-listview` related components and directives
- */
-const KENDO_LISTVIEW = [
-    ListViewComponent,
-    ItemTemplateDirective,
-    HeaderTemplateDirective,
-    FooterTemplateDirective,
-    LoaderTemplateDirective,
-    DataBindingDirective,
-    EditTemplateDirective,
-    EditCommandDirective,
-    CancelCommandDirective,
-    SaveCommandDirective,
-    RemoveCommandDirective,
-    AddCommandDirective
-];
-
-//IMPORTANT: NgModule export kept for backwards compatibility
-/**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the ListView component.
- * @example
- *
- * ```ts
- * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
- * import { BrowserModule } from '@angular/platform-browser';
- * import { NgModule } from '@angular/core';
- * import { ListViewModule } from '@progress/kendo-angular-listview';
- * import { AppComponent } from './app.component';
- *
- * @NgModule({
- *     declarations: [AppComponent],
- *     imports:      [BrowserModule, BrowserAnimationsModule, ListViewModule],
- *     bootstrap:    [AppComponent]
- * })
- * export class AppModule {}
- *```
- */
-class ListViewModule {
-}
-ListViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ListViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ListViewModule, imports: [ListViewComponent, ItemTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, LoaderTemplateDirective, DataBindingDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective], exports: [ListViewComponent, ItemTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, LoaderTemplateDirective, DataBindingDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective] });
-ListViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListViewModule, providers: [
-        IconsService,
-        PopupService,
-        ResizeBatchService
-    ], imports: [ListViewComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListViewModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [...KENDO_LISTVIEW],
-                    exports: [...KENDO_LISTVIEW],
-                    providers: [
-                        IconsService,
-                        PopupService,
-                        ResizeBatchService
-                    ]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AddCommandDirective, CancelCommandDirective, DataBindingDirective, EditCommandDirective, EditTemplateDirective, FooterTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, KENDO_LISTVIEW, ListViewComponent, ListViewModule, LoaderTemplateDirective, PageSizeChangeEvent, RemoveCommandDirective, SaveCommandDirective };
-