@progress/kendo-angular-listview 21.1.1-develop.2 → 21.2.0-develop.1

package/esm2022/listview.component.mjs

@@ -17,7 +17,7 @@ import { EditTemplateDirective } from './editing/edit-template.directive';
 import { EditService } from './editing/edit.service';
 import { isPresent } from './utils';
 import { FormGroup, FormControl } from '@angular/forms';
-import { NgIf, NgTemplateOutlet, NgClass, NgStyle, NgFor } from '@angular/common';
+import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
 import { PagerComponent } from '@progress/kendo-angular-pager';
 import * as i0 from "@angular/core";
 import * as i1 from "./editing/edit.service";
@@ -501,7 +501,7 @@ export class ListViewComponent {
         this[action].emit(args);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListViewComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.EditService }, { token: i2.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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,
@@ -511,132 +511,142 @@ export class ListViewComponent {
             }
         ], 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'"
+        @if (pagerSettings?.position !== 'bottom') {
+          <ng-template
             [ngTemplateOutlet]="pagerTemplate"
             [ngTemplateOutletContext]="{ pagerClass: 'k-listview-pager k-listview-pager-top' }"
-        >
-        </ng-template>
-
+            >
+          </ng-template>
+        }
+        
         <!-- header -->
-        <div
-            *ngIf="headerTemplate"
+        @if (headerTemplate) {
+          <div
             class="k-listview-header"
-        >
-            <ng-template
-                [ngTemplateOutlet]="headerTemplate?.templateRef"
             >
+            <ng-template
+              [ngTemplateOutlet]="headerTemplate?.templateRef"
+              >
             </ng-template>
-        </div>
-
+          </div>
+        }
+        
         <!-- content -->
         <div
-            #contentContainer
-            [attr.tabindex]="containerTabindex"
-            class="k-listview-content"
-            [ngClass]="containerClass"
-            [ngStyle]="containerStyle"
+          #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 -->
+          [scope]="this"
+          [attr.role]="containerRole"
+          [attr.aria-label]="containerLabel"
+          >
+          <!-- new item edit template -->
+          @if (editService.hasNewItem) {
             <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"
-            >
+              class="k-listview-item"
+              [attr.role]="listItemRole"
+              kendoListViewNavigableItem
+              [index]="-1"
+              [attr.data-kendo-listview-item-index]="-1"
+              [ngClass]="itemClass"
+              [ngStyle]="itemStyle"
+              >
+              @if (editTemplate) {
                 <ng-template
-                    *ngIf="editTemplate"
-                    [ngTemplateOutlet]="editTemplate?.templateRef"
-                    [ngTemplateOutletContext]="editTemplateContext(-1)"
-                >
+                  [ngTemplateOutlet]="editTemplate?.templateRef"
+                  [ngTemplateOutletContext]="editTemplateContext(-1)"
+                  >
                 </ng-template>
+              }
             </div>
-
-            <!-- items -->
+          }
+        
+          <!-- items -->
+          @for (dataItem of items; track dataItem; let index = $index; let first = $first; let last = $last) {
             <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)"
+              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>
+              </ng-template>
             </div>
+          }
         </div>
-
+        
         <!-- loading indicator -->
-        <div
-            *ngIf="loading && !loaderTemplate"
+        @if (loading && !loaderTemplate) {
+          <div
             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"
+          </div>
+        }
+        @if (loading && loaderTemplate) {
+          <ng-template
             [ngTemplateOutlet]="loaderTemplate.templateRef"
-        >
-        </ng-template>
-
+            >
+          </ng-template>
+        }
+        
         <!-- footer -->
-        <div
-            *ngIf="footerTemplate"
+        @if (footerTemplate) {
+          <div
             class="k-listview-footer"
-        >
-            <ng-template
-                [ngTemplateOutlet]="footerTemplate?.templateRef"
             >
+            <ng-template
+              [ngTemplateOutlet]="footerTemplate?.templateRef"
+              >
             </ng-template>
-        </div>
-
+          </div>
+        }
+        
         <!-- bottom pager -->
-        <ng-template
-            *ngIf="pagerSettings?.position !== 'top'"
+        @if (pagerSettings?.position !== 'top') {
+          <ng-template
             [ngTemplateOutlet]="pagerTemplate"
             [ngTemplateOutletContext]="{ pagerClass: 'k-listview-pager' }"
-        >
-        </ng-template>
-
+            >
+          </ng-template>
+        }
+        
         <!-- pager template -->
         <ng-template #pagerTemplate let-pagerClass="pagerClass">
+          @if (pageable) {
             <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)"
-            >
+              [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, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive", "adaptiveMode"], outputs: ["pageChange", "pageSizeChange", "pagerInputVisibilityChange", "pageTextVisibilityChange", "itemsTextVisibilityChange"], exportAs: ["kendoDataPager", "kendoPager"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        `, isInline: true, dependencies: [{ 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: "component", type: PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive", "adaptiveMode"], outputs: ["pageChange", "pageSizeChange", "pagerInputVisibilityChange", "pageTextVisibilityChange", "itemsTextVisibilityChange"], exportAs: ["kendoDataPager", "kendoPager"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -655,134 +665,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     template: `
         <!-- top pager -->
-        <ng-template
-            *ngIf="pagerSettings?.position !== 'bottom'"
+        @if (pagerSettings?.position !== 'bottom') {
+          <ng-template
             [ngTemplateOutlet]="pagerTemplate"
             [ngTemplateOutletContext]="{ pagerClass: 'k-listview-pager k-listview-pager-top' }"
-        >
-        </ng-template>
-
+            >
+          </ng-template>
+        }
+        
         <!-- header -->
-        <div
-            *ngIf="headerTemplate"
+        @if (headerTemplate) {
+          <div
             class="k-listview-header"
-        >
-            <ng-template
-                [ngTemplateOutlet]="headerTemplate?.templateRef"
             >
+            <ng-template
+              [ngTemplateOutlet]="headerTemplate?.templateRef"
+              >
             </ng-template>
-        </div>
-
+          </div>
+        }
+        
         <!-- content -->
         <div
-            #contentContainer
-            [attr.tabindex]="containerTabindex"
-            class="k-listview-content"
-            [ngClass]="containerClass"
-            [ngStyle]="containerStyle"
+          #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 -->
+          [scope]="this"
+          [attr.role]="containerRole"
+          [attr.aria-label]="containerLabel"
+          >
+          <!-- new item edit template -->
+          @if (editService.hasNewItem) {
             <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"
-            >
+              class="k-listview-item"
+              [attr.role]="listItemRole"
+              kendoListViewNavigableItem
+              [index]="-1"
+              [attr.data-kendo-listview-item-index]="-1"
+              [ngClass]="itemClass"
+              [ngStyle]="itemStyle"
+              >
+              @if (editTemplate) {
                 <ng-template
-                    *ngIf="editTemplate"
-                    [ngTemplateOutlet]="editTemplate?.templateRef"
-                    [ngTemplateOutletContext]="editTemplateContext(-1)"
-                >
+                  [ngTemplateOutlet]="editTemplate?.templateRef"
+                  [ngTemplateOutletContext]="editTemplateContext(-1)"
+                  >
                 </ng-template>
+              }
             </div>
-
-            <!-- items -->
+          }
+        
+          <!-- items -->
+          @for (dataItem of items; track dataItem; let index = $index; let first = $first; let last = $last) {
             <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)"
+              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>
+              </ng-template>
             </div>
+          }
         </div>
-
+        
         <!-- loading indicator -->
-        <div
-            *ngIf="loading && !loaderTemplate"
+        @if (loading && !loaderTemplate) {
+          <div
             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"
+          </div>
+        }
+        @if (loading && loaderTemplate) {
+          <ng-template
             [ngTemplateOutlet]="loaderTemplate.templateRef"
-        >
-        </ng-template>
-
+            >
+          </ng-template>
+        }
+        
         <!-- footer -->
-        <div
-            *ngIf="footerTemplate"
+        @if (footerTemplate) {
+          <div
             class="k-listview-footer"
-        >
-            <ng-template
-                [ngTemplateOutlet]="footerTemplate?.templateRef"
             >
+            <ng-template
+              [ngTemplateOutlet]="footerTemplate?.templateRef"
+              >
             </ng-template>
-        </div>
-
+          </div>
+        }
+        
         <!-- bottom pager -->
-        <ng-template
-            *ngIf="pagerSettings?.position !== 'top'"
+        @if (pagerSettings?.position !== 'top') {
+          <ng-template
             [ngTemplateOutlet]="pagerTemplate"
             [ngTemplateOutletContext]="{ pagerClass: 'k-listview-pager' }"
-        >
-        </ng-template>
-
+            >
+          </ng-template>
+        }
+        
         <!-- pager template -->
         <ng-template #pagerTemplate let-pagerClass="pagerClass">
+          @if (pageable) {
             <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)"
-            >
+              [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]
+                    imports: [NgTemplateOutlet, NgClass, NgStyle, EventsOutsideAngularDirective, ListViewNavigableItemDirective, PagerComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.EditService }, { type: i2.NavigationService }], propDecorators: { className: [{
                 type: HostBinding,

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1763729389,
-    version: '21.1.1-develop.2',
+    publishDate: 1763998515,
+    version: '21.2.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };