@progress/kendo-angular-scrollview 25.0.0-develop.1 → 25.0.0-develop.12

package/fesm2022/progress-kendo-angular-scrollview.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, Directive, forwardRef, TemplateRef, HostBinding, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { EventEmitter, signal, Output, Input, ChangeDetectionStrategy, Component, Directive, forwardRef, TemplateRef, HostBinding, ViewChild, ContentChild, NgModule } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { replaceMessagePlaceholder, normalizeKeys, Keys, DraggableDirective, KENDO_WEBMCP_HOST } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -31,8 +31,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1783680027,
-    version: '25.0.0-develop.1',
+    publishDate: 1785318057,
+    version: '25.0.0-develop.12',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -131,9 +131,21 @@ class DataCollection {
  */
 class ScrollViewPagerComponent {
     localization;
-    activeIndex;
-    data;
+    set activeIndex(value) {
+        this._activeIndex.set(value);
+    }
+    get activeIndex() {
+        return this._activeIndex();
+    }
+    set data(value) {
+        this._data.set(value);
+    }
+    get data() {
+        return this._data();
+    }
     pagerIndexChange = new EventEmitter();
+    _activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "_activeIndex" }] : []));
+    _data = signal([], ...(ngDevMode ? [{ debugName: "_data" }] : []));
     constructor(localization) {
         this.localization = localization;
     }
@@ -159,11 +171,12 @@ class ScrollViewPagerComponent {
           </span>
         }
       </div>
-      `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+      `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollViewPagerComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-scrollview-pager',
                     template: `
       <div class="k-scrollview-nav">
@@ -194,7 +207,13 @@ class ScrollViewMessages extends ComponentMessages {
      * Sets the label for the buttons in the ScrollView pager. The default label pattern is `'Item {itemIndex}'`.
      * When the current item is 1, the default label is `'Item 1'`.
      */
-    pagerButtonLabel;
+    set pagerButtonLabel(value) {
+        this._pagerButtonLabel.set(value);
+    }
+    get pagerButtonLabel() {
+        return this._pagerButtonLabel();
+    }
+    _pagerButtonLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_pagerButtonLabel" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollViewMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ScrollViewMessages, isStandalone: true, selector: "kendo-scrollview-messages-base", inputs: { pagerButtonLabel: "pagerButtonLabel" }, usesInheritance: true, ngImport: i0 });
 }
@@ -274,52 +293,98 @@ class ScrollViewComponent {
      * Provides the data source for the ScrollView ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/data-sources)).
      * @default []
      */
-    data = [];
+    set data(value) {
+        this._data.set(value);
+        if (value?.length === 0) {
+            const clamped = Math.max(Math.min(this._activeIndex(), this.view.total - 1), 0);
+            this._activeIndex.set(clamped);
+            this.index = clamped;
+        }
+    }
+    get data() {
+        return this._data();
+    }
     /**
      * Sets the current item index ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/active-items)).
      * @default 0
      */
     set activeIndex(value) {
-        this.index = this._activeIndex = value;
+        this.index = value;
+        this._activeIndex.set(value);
     }
     get activeIndex() {
-        return this._activeIndex;
+        return this._activeIndex();
     }
     /**
      * Sets the width of the ScrollView ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/dimensions)).
      * By default, the width is not set and must be explicitly defined.
      */
-    width;
+    set width(value) {
+        this._width.set(value);
+    }
+    get width() {
+        return this._width();
+    }
     /**
      * Sets the height of the ScrollView ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/dimensions)).
      * By default, the height is not set and must be explicitly defined.
      */
-    height;
+    set height(value) {
+        this._height.set(value);
+    }
+    get height() {
+        return this._height();
+    }
     /**
      * Enables or disables endless scrolling mode, where items loop endlessly ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/endless-scrolling)).
      * @default false
      */
-    endless = false;
+    set endless(value) {
+        this._endless.set(value);
+    }
+    get endless() {
+        return this._endless();
+    }
     /**
      * Sets the pager overlay style to `dark`, `light`, or `none`.
      * @default 'none'
      */
-    pagerOverlay = 'none';
+    set pagerOverlay(value) {
+        this._pagerOverlay.set(value);
+    }
+    get pagerOverlay() {
+        return this._pagerOverlay();
+    }
     /**
      * Enables or disables built-in animations ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/animations)).
      * @default true
      */
-    animate = true;
+    set animate(value) {
+        this._animate.set(value);
+    }
+    get animate() {
+        return this._animate();
+    }
     /**
      * Enables or disables the built-in pager ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/paging)).
      * @default false
      */
-    pageable = false;
+    set pageable(value) {
+        this._pageable.set(value);
+    }
+    get pageable() {
+        return this._pageable();
+    }
     /**
      * Enables or disables the built-in navigation arrows ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/arrows)).
      * @default false
      */
-    arrows = false;
+    set arrows(value) {
+        this._arrows.set(value);
+    }
+    get arrows() {
+        return this._arrows();
+    }
     /**
      * Fires after the current item is changed.
      */
@@ -349,7 +414,12 @@ class ScrollViewComponent {
         return this.direction;
     }
     touchAction = 'pan-y pinch-zoom';
-    animationState = null;
+    get animationState() {
+        return this._animationState();
+    }
+    set animationState(value) {
+        this._animationState.set(value);
+    }
     view = new DataCollection(() => new DataResultIterator(this.data, this.activeIndex, this.endless, this.pageIndex, this.isRTL));
     /**
      * @hidden
@@ -357,11 +427,20 @@ class ScrollViewComponent {
     scrollviewId;
     isDataSourceEmpty = false;
     subs = new Subscription();
-    _activeIndex = 0;
     index = 0;
     initialTouchCoordinate;
     pageIndex = null;
     transforms = ['translateX(-100%)', 'translateX(0%)', 'translateX(100%)'];
+    _data = signal([], ...(ngDevMode ? [{ debugName: "_data" }] : []));
+    _activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "_activeIndex" }] : []));
+    _width = signal(undefined, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    _height = signal(undefined, ...(ngDevMode ? [{ debugName: "_height" }] : []));
+    _endless = signal(false, ...(ngDevMode ? [{ debugName: "_endless" }] : []));
+    _pagerOverlay = signal('none', ...(ngDevMode ? [{ debugName: "_pagerOverlay" }] : []));
+    _animate = signal(true, ...(ngDevMode ? [{ debugName: "_animate" }] : []));
+    _pageable = signal(false, ...(ngDevMode ? [{ debugName: "_pageable" }] : []));
+    _arrows = signal(false, ...(ngDevMode ? [{ debugName: "_arrows" }] : []));
+    _animationState = signal(null, ...(ngDevMode ? [{ debugName: "_animationState" }] : []));
     get direction() {
         return this.localization.rtl ? 'rtl' : 'ltr';
     }
@@ -381,11 +460,6 @@ class ScrollViewComponent {
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
-    ngOnChanges(_) {
-        if (this.data && this.data.length === 0) {
-            this.activeIndex = Math.max(Math.min(this.activeIndex, this.view.total - 1), 0);
-        }
-    }
     /**
      * Navigates the ScrollView to the previous item.
      */
@@ -648,11 +722,11 @@ class ScrollViewComponent {
                 useValue: 'kendo.scrollview'
             },
             { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => ScrollViewComponent) }
-        ], queries: [{ propertyName: "itemTemplateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "itemWrapper", first: true, predicate: ["itemWrapper"], descendants: true }, { propertyName: "prevButton", first: true, predicate: ["prevButton"], descendants: true }, { propertyName: "nextButton", first: true, predicate: ["nextButton"], descendants: true }], exportAs: ["kendoScrollView"], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "itemTemplateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "itemWrapper", first: true, predicate: ["itemWrapper"], descendants: true }, { propertyName: "prevButton", first: true, predicate: ["prevButton"], descendants: true }, { propertyName: "nextButton", first: true, predicate: ["nextButton"], descendants: true }], exportAs: ["kendoScrollView"], ngImport: i0, template: `
 
     <ng-container kendoScrollViewLocalizedMessages
     i18n-pagerButtonLabel="kendo.scrollview.pagerButtonLabel|The label for the buttons inside the ScrollView Pager"
-    pagerButtonLabel="{{ 'Item {itemIndex}' }}">
+    pagerButtonLabel="Item [[itemIndex]]">
     <ng-container>
 
     <div class="k-scrollview-wrap k-scrollview-animate"
@@ -740,7 +814,7 @@ class ScrollViewComponent {
                     animate('300ms ease-out')
                 ])
             ])
-        ] });
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollViewComponent, decorators: [{
             type: Component,
@@ -768,12 +842,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         },
                         { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => ScrollViewComponent) }
                     ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-scrollview',
                     template: `
 
     <ng-container kendoScrollViewLocalizedMessages
     i18n-pagerButtonLabel="kendo.scrollview.pagerButtonLabel|The label for the buttons inside the ScrollView Pager"
-    pagerButtonLabel="{{ 'Item {itemIndex}' }}">
+    pagerButtonLabel="Item [[itemIndex]]">
     <ng-container>
 
     <div class="k-scrollview-wrap k-scrollview-animate"

package/index.d.ts

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { OnChanges, OnDestroy, ElementRef, EventEmitter, TemplateRef, NgZone, Renderer2 } from '@angular/core';
+import { OnInit, OnDestroy, ElementRef, EventEmitter, TemplateRef, NgZone, Renderer2 } from '@angular/core';
 import { AnimationEvent } from '@angular/animations';
 import { LocalizationService, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { SVGIcon } from '@progress/kendo-svg-icons';
@@ -88,7 +88,7 @@ type Direction = 'rtl' | 'ltr';
  * @remarks
  * Supported children components are: {@link CustomMessagesComponent}
  */
-declare class ScrollViewComponent implements OnChanges, OnDestroy {
+declare class ScrollViewComponent implements OnInit, OnDestroy {
     protected element: ElementRef;
     private localization;
     private ngZone;
@@ -105,7 +105,8 @@ declare class ScrollViewComponent implements OnChanges, OnDestroy {
      * Provides the data source for the ScrollView ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/data-sources)).
      * @default []
      */
-    data: Array<any>;
+    set data(value: Array<any>);
+    get data(): Array<any>;
     /**
      * Sets the current item index ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/active-items)).
      * @default 0
@@ -116,37 +117,44 @@ declare class ScrollViewComponent implements OnChanges, OnDestroy {
      * Sets the width of the ScrollView ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/dimensions)).
      * By default, the width is not set and must be explicitly defined.
      */
-    width: string;
+    set width(value: string);
+    get width(): string;
     /**
      * Sets the height of the ScrollView ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/dimensions)).
      * By default, the height is not set and must be explicitly defined.
      */
-    height: string;
+    set height(value: string);
+    get height(): string;
     /**
      * Enables or disables endless scrolling mode, where items loop endlessly ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/endless-scrolling)).
      * @default false
      */
-    endless: boolean;
+    set endless(value: boolean);
+    get endless(): boolean;
     /**
      * Sets the pager overlay style to `dark`, `light`, or `none`.
      * @default 'none'
      */
-    pagerOverlay: ScrollViewPagerOverlay;
+    set pagerOverlay(value: ScrollViewPagerOverlay);
+    get pagerOverlay(): ScrollViewPagerOverlay;
     /**
      * Enables or disables built-in animations ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/animations)).
      * @default true
      */
-    animate: boolean;
+    set animate(value: boolean);
+    get animate(): boolean;
     /**
      * Enables or disables the built-in pager ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/paging)).
      * @default false
      */
-    pageable: boolean;
+    set pageable(value: boolean);
+    get pageable(): boolean;
     /**
      * Enables or disables the built-in navigation arrows ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/arrows)).
      * @default false
      */
-    arrows: boolean;
+    set arrows(value: boolean);
+    get arrows(): boolean;
     /**
      * Fires after the current item is changed.
      */
@@ -170,7 +178,8 @@ declare class ScrollViewComponent implements OnChanges, OnDestroy {
     ariaLive: string;
     get dir(): Direction;
     touchAction: string;
-    animationState: AnimationState;
+    get animationState(): AnimationState;
+    set animationState(value: AnimationState);
     view: DataCollection;
     /**
      * @hidden
@@ -178,16 +187,24 @@ declare class ScrollViewComponent implements OnChanges, OnDestroy {
     scrollviewId: string;
     isDataSourceEmpty: boolean;
     private subs;
-    private _activeIndex;
     private index;
     private initialTouchCoordinate;
     private pageIndex;
     private transforms;
+    private _data;
+    private _activeIndex;
+    private _width;
+    private _height;
+    private _endless;
+    private _pagerOverlay;
+    private _animate;
+    private _pageable;
+    private _arrows;
+    private _animationState;
     private get direction();
     constructor(element: ElementRef, localization: LocalizationService, ngZone: NgZone, renderer: Renderer2);
     ngOnInit(): void;
     ngOnDestroy(): void;
-    ngOnChanges(_: any): void;
     /**
      * Navigates the ScrollView to the previous item.
      */
@@ -261,7 +278,9 @@ declare class ScrollViewMessages extends ComponentMessages {
      * Sets the label for the buttons in the ScrollView pager. The default label pattern is `'Item {itemIndex}'`.
      * When the current item is 1, the default label is `'Item 1'`.
      */
-    pagerButtonLabel: string;
+    set pagerButtonLabel(value: string);
+    get pagerButtonLabel(): string;
+    private _pagerButtonLabel;
     static ɵfac: i0.ɵɵFactoryDeclaration<ScrollViewMessages, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ScrollViewMessages, "kendo-scrollview-messages-base", never, { "pagerButtonLabel": { "alias": "pagerButtonLabel"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -318,9 +337,13 @@ declare class ScrollViewModule {
  */
 declare class ScrollViewPagerComponent {
     private localization;
-    activeIndex: number;
-    data: any[];
+    set activeIndex(value: number);
+    get activeIndex(): number;
+    set data(value: any[]);
+    get data(): any[];
     pagerIndexChange: EventEmitter<number>;
+    private _activeIndex;
+    private _data;
     constructor(localization: LocalizationService);
     itemClass(idx: number): any;
     indexChange(selectedIndex: number): void;

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1783680027,
-  "version": "25.0.0-develop.1",
+  "publishDate": 1785318057,
+  "version": "25.0.0-develop.12",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-scrollview",
-  "version": "25.0.0-develop.1",
+  "version": "25.0.0-develop.12",
   "description": "A ScrollView Component for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -19,7 +19,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1783680027,
+      "publishDate": 1785318057,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -29,14 +29,14 @@
     "@angular/core": "20 - 22",
     "@angular/platform-browser": "20 - 22",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-common": "25.0.0-develop.1",
-    "@progress/kendo-angular-l10n": "25.0.0-develop.1",
-    "@progress/kendo-angular-icons": "25.0.0-develop.1",
+    "@progress/kendo-angular-common": "25.0.0-develop.12",
+    "@progress/kendo-angular-l10n": "25.0.0-develop.12",
+    "@progress/kendo-angular-icons": "25.0.0-develop.12",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "25.0.0-develop.1"
+    "@progress/kendo-angular-schematics": "25.0.0-develop.12"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-scrollview.mjs",