@progress/kendo-angular-treelist 13.4.0-develop.3 → 13.4.0-develop.4

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1692370860,
-    version: '13.4.0-develop.3',
+    publishDate: 1692620959,
+    version: '13.4.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/pager/pager-numeric-buttons.component.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @typescript-eslint/no-inferrable-types */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, ViewChild } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PagerContextService } from './pager-context.service';
 import { PagerElementComponent } from './pager-element.component';
@@ -20,7 +20,6 @@ export class PagerNumericButtonsComponent extends PagerElementComponent {
     constructor(localization, cd, pagerContext) {
         super(localization, pagerContext, cd);
         this.pagerContext = pagerContext;
-        this.numbersWrapClass = true;
     }
     /**
      * @hidden
@@ -90,10 +89,12 @@ export class PagerNumericButtonsComponent extends PagerElementComponent {
     }
 }
 PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNumericButtonsComponent, selector: "kendo-treelist-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
+PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNumericButtonsComponent, selector: "kendo-treelist-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }, { propertyName: "numbersElement", first: true, predicate: ["numbers"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
         <select
             class="k-dropdown-list k-dropdown k-picker k-picker-solid k-picker-md k-rounded-md"
             kendoTreeListFocusable
+            [style.display]="'none'"
+            #select
             [attr.title]="textFor('selectPage')"
             [attr.aria-label]="textFor('selectPage')"
             (change)="onSelectChange($event)">
@@ -116,7 +117,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 [attr.aria-label]="pageLabel(end + 1)">...
             </option>
         </select>
-        <div class="k-pager-numbers">
+        <div class="k-pager-numbers" #numbers>
             <button *ngIf="start > 1"
                 type="button"
                 kendoTreeListFocusable
@@ -165,6 +166,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <select
             class="k-dropdown-list k-dropdown k-picker k-picker-solid k-picker-md k-rounded-md"
             kendoTreeListFocusable
+            [style.display]="'none'"
+            #select
             [attr.title]="textFor('selectPage')"
             [attr.aria-label]="textFor('selectPage')"
             (change)="onSelectChange($event)">
@@ -187,7 +190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [attr.aria-label]="pageLabel(end + 1)">...
             </option>
         </select>
-        <div class="k-pager-numbers">
+        <div class="k-pager-numbers" #numbers>
             <button *ngIf="start > 1"
                 type="button"
                 kendoTreeListFocusable
@@ -228,9 +231,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }]; }, propDecorators: { numbersWrapClass: [{
-                type: HostBinding,
-                args: ['class.k-pager-numbers-wrap']
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }]; }, propDecorators: { selectElement: [{
+                type: ViewChild,
+                args: ['select', { read: ElementRef }]
+            }], numbersElement: [{
+                type: ViewChild,
+                args: ['numbers', { read: ElementRef }]
             }], buttonCount: [{
                 type: Input
             }] } });

package/esm2020/pager/pager.component.mjs

@@ -16,6 +16,9 @@ import { FOCUS_ROOT_ACTIVE, FocusRoot } from '../navigation/focus-root';
 import { NavigationService } from '../navigation/navigation.service';
 import { FocusGroup } from '../navigation/focus-group';
 import { findFocusableChild, findLastFocusableChild } from '../rendering/common/dom-queries';
+import { PagerInfoComponent } from './pager-info.component';
+import { PagerPageSizesComponent } from './pager-page-sizes.component';
+import { PagerNumericButtonsComponent } from './pager-numeric-buttons.component';
 import * as i0 from "@angular/core";
 import * as i1 from "../navigation/navigation.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -61,18 +64,33 @@ export class PagerComponent {
             if (this.template || !element) {
                 return;
             }
-            const width = element.offsetWidth;
-            if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                this.renderer.removeClass(element, 'k-pager-mobile-md');
-                this.renderer.addClass(element, 'k-pager-mobile-sm');
-            }
-            else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
-                this.renderer.addClass(element, 'k-pager-mobile-md');
-                this.renderer.removeClass(element, 'k-pager-mobile-sm');
-            }
-            else {
-                this.clearResponsiveClasses();
-            }
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    const width = element.offsetWidth;
+                    if (this.numericButtons) {
+                        const selectElement = this.numericButtons.selectElement.nativeElement;
+                        const numbersElement = this.numericButtons.numbersElement.nativeElement;
+                        this.renderer.removeStyle(numbersElement, 'display');
+                        this.renderer.setStyle(selectElement, 'display', 'none');
+                        if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
+                            this.renderer.removeStyle(selectElement, 'display');
+                            this.renderer.setStyle(numbersElement, 'display', 'none');
+                        }
+                    }
+                    if (this.pagerInfo) {
+                        this.renderer.removeStyle(this.pagerInfo.nativeElement, 'display');
+                        if (width < RESPONSIVE_BREAKPOINT_LARGE) {
+                            this.renderer.setStyle(this.pagerInfo.nativeElement, 'display', 'none');
+                        }
+                    }
+                    if (this.pagerPageSizes) {
+                        this.renderer.removeStyle(this.pagerPageSizes.nativeElement, 'display');
+                        if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
+                            this.renderer.setStyle(this.pagerPageSizes.nativeElement, 'display', 'none');
+                        }
+                    }
+                });
+            });
         };
     }
     set options(value) {
@@ -118,14 +136,12 @@ export class PagerComponent {
                 allCount: this.allCount || this.total
             });
         }
-        const templateChanges = changes['template'];
-        if (templateChanges) {
-            // eslint-disable-next-line no-unused-expressions
-            templateChanges.currentValue ? this.clearResponsiveClasses() : this.resizeHandler();
+        const changesInTemplate = changes['template'];
+        if (changesInTemplate) {
+            changesInTemplate.currentValue ? this.clearResponsiveStyling() : this.resizeHandler();
         }
         if (changes['options']) {
-            // eslint-disable-next-line no-unused-expressions
-            this.settings.responsive ? this.resizeHandler() : this.clearResponsiveClasses();
+            this.settings.responsive ? this.resizeHandler() : this.clearResponsiveStyling();
         }
     }
     ngOnDestroy() {
@@ -235,10 +251,17 @@ export class PagerComponent {
     shouldTriggerPageChange(target, condition) {
         return this.navigationService.enabled && target === this.element.nativeElement && condition;
     }
-    clearResponsiveClasses() {
-        const element = this.element.nativeElement;
-        this.renderer.removeClass(element, 'k-pager-mobile-sm');
-        this.renderer.removeClass(element, 'k-pager-mobile-md');
+    clearResponsiveStyling() {
+        this.zone.runOutsideAngular(() => {
+            setTimeout(() => {
+                if (this.numericButtons) {
+                    this.renderer.removeStyle(this.numericButtons.numbersElement.nativeElement, 'display');
+                    this.renderer.setStyle(this.numericButtons.selectElement.nativeElement, 'display', 'none');
+                }
+                this.pagerInfo && this.renderer.removeStyle(this.pagerInfo.nativeElement, 'display');
+                this.pagerPageSizes && this.renderer.removeStyle(this.pagerPageSizes.nativeElement, 'display');
+            });
+        });
     }
 }
 PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerComponent, deps: [{ token: i1.NavigationService }, { token: i2.LocalizationService }, { token: i3.PagerContextService }, { token: i4.FocusGroup }, { token: i5.FocusRoot }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
@@ -253,7 +276,7 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             provide: FocusGroup,
             deps: [FocusRoot],
             useClass: FocusGroup
-        }], viewQueries: [{ propertyName: "prevButtons", first: true, predicate: ["prevButtons"], descendants: true }, { propertyName: "nextButtons", first: true, predicate: ["nextButtons"], descendants: true }, { propertyName: "numericButtons", first: true, predicate: ["numericButtons"], descendants: true }, { propertyName: "pagerInput", first: true, predicate: ["pagerInput"], descendants: true }, { propertyName: "pageSizes", first: true, predicate: ["pageSizes"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        }], viewQueries: [{ propertyName: "pagerInfo", first: true, predicate: PagerInfoComponent, descendants: true, read: ElementRef }, { propertyName: "pagerPageSizes", first: true, predicate: PagerPageSizesComponent, descendants: true, read: ElementRef }, { propertyName: "numericButtons", first: true, predicate: PagerNumericButtonsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div
             *ngIf="navigationService.enabled"
             class="k-sr-only"
@@ -267,16 +290,20 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-treelist-pager-prev-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-prev-buttons>
-            <kendo-treelist-pager-numeric-buttons
-                *ngIf="settings.type === 'numeric'"
-                [buttonCount]="settings.buttonCount"
-            >
-            </kendo-treelist-pager-numeric-buttons>
-            <kendo-treelist-pager-input *ngIf="settings.type === 'input'"></kendo-treelist-pager-input>
-            <kendo-treelist-pager-next-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-next-buttons>
+            <div class="k-pager-numbers-wrap">
+                <kendo-treelist-pager-prev-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-prev-buttons>
+                <kendo-treelist-pager-numeric-buttons
+                    *ngIf="settings.type === 'numeric'"
+                    [buttonCount]="settings.buttonCount">
+                </kendo-treelist-pager-numeric-buttons>
+                <kendo-treelist-pager-input *ngIf="settings.type === 'input'"></kendo-treelist-pager-input>
+                <kendo-treelist-pager-next-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-next-buttons>
+            </div>
             <kendo-treelist-pager-info *ngIf='settings.info'></kendo-treelist-pager-info>
-            <kendo-treelist-pager-page-sizes *ngIf="settings.pageSizes" [pageSizes]="$any(settings.pageSizes)"></kendo-treelist-pager-page-sizes>
+            <kendo-treelist-pager-page-sizes 
+                *ngIf="settings.pageSizes"
+                [pageSizes]="$any(settings.pageSizes)">
+            </kendo-treelist-pager-page-sizes>
         </ng-container>
          <div
             *ngIf="navigationService.enabled"
@@ -317,16 +344,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-treelist-pager-prev-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-prev-buttons>
-            <kendo-treelist-pager-numeric-buttons
-                *ngIf="settings.type === 'numeric'"
-                [buttonCount]="settings.buttonCount"
-            >
-            </kendo-treelist-pager-numeric-buttons>
-            <kendo-treelist-pager-input *ngIf="settings.type === 'input'"></kendo-treelist-pager-input>
-            <kendo-treelist-pager-next-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-next-buttons>
+            <div class="k-pager-numbers-wrap">
+                <kendo-treelist-pager-prev-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-prev-buttons>
+                <kendo-treelist-pager-numeric-buttons
+                    *ngIf="settings.type === 'numeric'"
+                    [buttonCount]="settings.buttonCount">
+                </kendo-treelist-pager-numeric-buttons>
+                <kendo-treelist-pager-input *ngIf="settings.type === 'input'"></kendo-treelist-pager-input>
+                <kendo-treelist-pager-next-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-next-buttons>
+            </div>
             <kendo-treelist-pager-info *ngIf='settings.info'></kendo-treelist-pager-info>
-            <kendo-treelist-pager-page-sizes *ngIf="settings.pageSizes" [pageSizes]="$any(settings.pageSizes)"></kendo-treelist-pager-page-sizes>
+            <kendo-treelist-pager-page-sizes 
+                *ngIf="settings.pageSizes"
+                [pageSizes]="$any(settings.pageSizes)">
+            </kendo-treelist-pager-page-sizes>
         </ng-container>
          <div
             *ngIf="navigationService.enabled"
@@ -338,21 +369,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <kendo-resize-sensor *ngIf="settings.responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.NavigationService }, { type: i2.LocalizationService }, { type: i3.PagerContextService }, { type: i4.FocusGroup }, { type: i5.FocusRoot }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { prevButtons: [{
+        }], ctorParameters: function () { return [{ type: i1.NavigationService }, { type: i2.LocalizationService }, { type: i3.PagerContextService }, { type: i4.FocusGroup }, { type: i5.FocusRoot }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { pagerInfo: [{
                 type: ViewChild,
-                args: ['prevButtons']
-            }], nextButtons: [{
+                args: [PagerInfoComponent, { read: ElementRef }]
+            }], pagerPageSizes: [{
                 type: ViewChild,
-                args: ['nextButtons']
+                args: [PagerPageSizesComponent, { read: ElementRef }]
             }], numericButtons: [{
                 type: ViewChild,
-                args: ['numericButtons']
-            }], pagerInput: [{
-                type: ViewChild,
-                args: ['pagerInput']
-            }], pageSizes: [{
-                type: ViewChild,
-                args: ['pageSizes']
+                args: [PagerNumericButtonsComponent]
             }], allCount: [{
                 type: Input
             }], total: [{

package/esm2020/treelist.component.mjs

@@ -851,6 +851,7 @@ export class TreeListComponent {
         this.attachElementEventHandlers();
         this.updateNavigationMetadata();
         this.applyAutoSize();
+        this.subscriptions.add(this.pagerTemplateChildren.changes.subscribe(() => this.changeDetectorRef.markForCheck()));
     }
     ngAfterContentChecked() {
         if (this.dataChanged) {