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

package/direction.d.ts

@@ -5,4 +5,4 @@
 /**
  * @hidden
  */
-export declare type Direction = 'rtl' | 'ltr';
+export type Direction = 'rtl' | 'ltr';

package/enums.d.ts

@@ -12,8 +12,8 @@ export declare enum Dir {
 /**
  * Represents the available pager overlays of the ScrollView.
  */
-export declare type ScrollViewPagerOverlay = 'dark' | 'light' | 'none';
+export type ScrollViewPagerOverlay = 'dark' | 'light' | 'none';
 /**
  * @hidden
  */
-export declare type AnimationState = "left" | "right" | "center";
+export type AnimationState = "left" | "right" | "center";

package/{esm2020 → esm2022}/data.collection.mjs

@@ -23,8 +23,12 @@ const EMPTY_OBJ = {};
  * @hidden
  */
 export class DataResultIterator {
+    source;
+    index;
+    endless;
+    pageIndex;
+    rtl = false;
     constructor(source, index, endless, pageIndex, rtl) {
-        this.rtl = false;
         this.source = source ? source : [];
         this.index = index ? index : 0;
         this.endless = endless;
@@ -68,6 +72,7 @@ export class DataResultIterator {
  * @hidden
  */
 export class DataCollection {
+    accessor;
     constructor(accessor) {
         this.accessor = accessor;
     }

package/{esm2020 → esm2022}/localization/custom-messages.component.mjs

@@ -12,6 +12,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * ([see example](slug:rtl_scrollview#toc-custom-messages)).
  */
 export class CustomMessagesComponent extends ScrollViewMessages {
+    service;
     constructor(service) {
         super();
         this.service = service;
@@ -19,15 +20,15 @@ export class CustomMessagesComponent extends ScrollViewMessages {
     get override() {
         return true;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-scrollview-messages", providers: [
+            {
+                provide: ScrollViewMessages,
+                useExisting: forwardRef(() => CustomMessagesComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-scrollview-messages", providers: [
-        {
-            provide: ScrollViewMessages,
-            useExisting: forwardRef(() => CustomMessagesComponent)
-        }
-    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [

package/{esm2020 → esm2022}/localization/localized-messages.directive.mjs

@@ -11,19 +11,20 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class LocalizedMessagesDirective extends ScrollViewMessages {
+    service;
     constructor(service) {
         super();
         this.service = service;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoScrollViewLocalizedMessages]", providers: [
+            {
+                provide: ScrollViewMessages,
+                useExisting: forwardRef(() => LocalizedMessagesDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 });
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoScrollViewLocalizedMessages]", providers: [
-        {
-            provide: ScrollViewMessages,
-            useExisting: forwardRef(() => LocalizedMessagesDirective)
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [

package/{esm2020 → esm2022}/localization/messages.mjs

@@ -9,10 +9,15 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class ScrollViewMessages extends ComponentMessages {
+    /**
+     * The label of the buttons in the ScrollView pager. By default they follow the pattern 'Item {itemIndex}'.
+     * The default label text when the current item is 1 will be 'Item 1'.
+     */
+    pagerButtonLabel;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollViewMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ScrollViewMessages, selector: "kendo-scrollview-messages-base", inputs: { pagerButtonLabel: "pagerButtonLabel" }, usesInheritance: true, ngImport: i0 });
 }
-ScrollViewMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollViewMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-ScrollViewMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ScrollViewMessages, selector: "kendo-scrollview-messages-base", inputs: { pagerButtonLabel: "pagerButtonLabel" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollViewMessages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollViewMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector

package/{esm2020 → esm2022}/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-scrollview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729174771,
-    version: '17.0.0-develop.9',
+    publishDate: 1731429934,
+    version: '17.0.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/{esm2020 → esm2022}/scrollview-pager.component.mjs

@@ -13,9 +13,12 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class ScrollViewPagerComponent {
+    localization;
+    activeIndex;
+    data;
+    pagerIndexChange = new EventEmitter();
     constructor(localization) {
         this.localization = localization;
-        this.pagerIndexChange = new EventEmitter();
     }
     itemClass(idx) {
         return {
@@ -32,9 +35,8 @@ export class ScrollViewPagerComponent {
     replaceMessagePlaceholder(message, name, value) {
         return message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
     }
-}
-ScrollViewPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollViewPagerComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ScrollViewPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ScrollViewPagerComponent, isStandalone: true, selector: "kendo-scrollview-pager", inputs: { activeIndex: "activeIndex", data: "data" }, outputs: { pagerIndexChange: "pagerIndexChange" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollViewPagerComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ScrollViewPagerComponent, isStandalone: true, selector: "kendo-scrollview-pager", inputs: { activeIndex: "activeIndex", data: "data" }, outputs: { pagerIndexChange: "pagerIndexChange" }, ngImport: i0, template: `
       <div class="k-scrollview-nav">
         <span [attr.aria-label]="pagerButtonLabel(i + 1)" role="button" class="k-link" *ngFor="let item of data; let i = index"
             [ngClass]="itemClass(i)"
@@ -42,7 +44,8 @@ ScrollViewPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
         </span>
       </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollViewPagerComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollViewPagerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-scrollview-pager',

package/{esm2020 → esm2022}/scrollview.component.mjs

@@ -76,73 +76,22 @@ let idx = 0;
  * ```
  */
 export class ScrollViewComponent {
-    constructor(element, localization, ngZone, renderer) {
-        this.element = element;
-        this.localization = localization;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        /**
-         * @hidden
-         */
-        this.chevronLeftIcon = chevronLeftIcon;
-        /**
-         * @hidden
-         */
-        this.chevronRightIcon = chevronRightIcon;
-        /**
-         * Provides the data source for the ScrollView ([see example]({% slug datasources_scrollview %})).
-         */
-        this.data = [];
-        /**
-         * Enables or disables the endless scrolling mode in which the data source items are endlessly looped
-         * ([see example]({% slug endlessscrolling_scrollview %})). By default, `endless` is set to `false`
-         * and the endless scrolling mode is disabled.
-         */
-        this.endless = false;
-        /**
-         * Sets `pagerOverlay` to one of three possible values: `dark`, `light` or `none`.
-         * By default, the pager overlay is set to `none`.
-         */
-        this.pagerOverlay = 'none';
-        /**
-         * Enables or disables the built-in animations ([see example]({% slug animations_scrollview %})).
-         * By default, `animate` is set to `true` and animations are enabled.
-         */
-        this.animate = true;
-        /**
-         * Enables or disables the built-in pager ([see example]({% slug paging_scrollview %})).
-         * By default, `pageable` is set to `false` and paging is disabled.
-         */
-        this.pageable = false;
-        /**
-         * Enables or disables the built-in navigation arrows ([see example]({% slug arrows_scrollview %})).
-         * By default, `arrows` is set to `false` and arrows are disabled.
-         */
-        this.arrows = false;
-        /**
-         * Fires after the current item is changed.
-         */
-        this.itemChanged = new EventEmitter();
-        /**
-         * Fires after the activeIndex has changed. Allows for two-way binding of the activeIndex property.
-         */
-        this.activeIndexChange = new EventEmitter();
-        this.scrollViewClass = true;
-        this.scrollViewRole = 'application';
-        this.scrollViewRoleDescription = 'carousel';
-        this.tabIndex = 0;
-        this.ariaLive = 'assertive';
-        this.touchAction = 'pan-y pinch-zoom';
-        this.animationState = null;
-        this.view = new DataCollection(() => new DataResultIterator(this.data, this.activeIndex, this.endless, this.pageIndex, this.isRTL));
-        this.isDataSourceEmpty = false;
-        this.subs = new Subscription();
-        this._activeIndex = 0;
-        this.index = 0;
-        this.pageIndex = null;
-        this.transforms = ['translateX(-100%)', 'translateX(0%)', 'translateX(100%)'];
-        validatePackage(packageMetadata);
-    }
+    element;
+    localization;
+    ngZone;
+    renderer;
+    /**
+     * @hidden
+     */
+    chevronLeftIcon = chevronLeftIcon;
+    /**
+     * @hidden
+     */
+    chevronRightIcon = chevronRightIcon;
+    /**
+     * Provides the data source for the ScrollView ([see example]({% slug datasources_scrollview %})).
+     */
+    data = [];
     /**
      * Represents the current item index ([see example]({% slug activeitems_scrollview %})).
      */
@@ -152,6 +101,57 @@ export class ScrollViewComponent {
     get activeIndex() {
         return this._activeIndex;
     }
+    /**
+     * Sets the width of the ScrollView ([see example]({% slug dimensions_scrollview %})).
+     * By default, the width is not set and you have to explicitly define the `width` value.
+     */
+    width;
+    /**
+     * Sets the height of the ScrollView ([see example]({% slug dimensions_scrollview %})).
+     * By default, the height is not set and you have to explicitly define the `height` value.
+     */
+    height;
+    /**
+     * Enables or disables the endless scrolling mode in which the data source items are endlessly looped
+     * ([see example]({% slug endlessscrolling_scrollview %})). By default, `endless` is set to `false`
+     * and the endless scrolling mode is disabled.
+     */
+    endless = false;
+    /**
+     * Sets `pagerOverlay` to one of three possible values: `dark`, `light` or `none`.
+     * By default, the pager overlay is set to `none`.
+     */
+    pagerOverlay = 'none';
+    /**
+     * Enables or disables the built-in animations ([see example]({% slug animations_scrollview %})).
+     * By default, `animate` is set to `true` and animations are enabled.
+     */
+    animate = true;
+    /**
+     * Enables or disables the built-in pager ([see example]({% slug paging_scrollview %})).
+     * By default, `pageable` is set to `false` and paging is disabled.
+     */
+    pageable = false;
+    /**
+     * Enables or disables the built-in navigation arrows ([see example]({% slug arrows_scrollview %})).
+     * By default, `arrows` is set to `false` and arrows are disabled.
+     */
+    arrows = false;
+    /**
+     * Fires after the current item is changed.
+     */
+    itemChanged = new EventEmitter();
+    /**
+     * Fires after the activeIndex has changed. Allows for two-way binding of the activeIndex property.
+     */
+    activeIndexChange = new EventEmitter();
+    itemTemplateRef;
+    itemWrapper;
+    prevButton;
+    nextButton;
+    scrollViewClass = true;
+    scrollViewRole = 'application';
+    scrollViewRoleDescription = 'carousel';
     get scrollViewLightOverlayClass() {
         return this.pagerOverlay === 'light';
     }
@@ -160,12 +160,35 @@ export class ScrollViewComponent {
     }
     get hostWidth() { return this.width; }
     get hostHeight() { return this.height; }
+    tabIndex = 0;
+    ariaLive = 'assertive';
     get dir() {
         return this.direction;
     }
+    touchAction = 'pan-y pinch-zoom';
+    animationState = null;
+    view = new DataCollection(() => new DataResultIterator(this.data, this.activeIndex, this.endless, this.pageIndex, this.isRTL));
+    /**
+     * @hidden
+     */
+    scrollviewId;
+    isDataSourceEmpty = false;
+    subs = new Subscription();
+    _activeIndex = 0;
+    index = 0;
+    initialTouchCoordinate;
+    pageIndex = null;
+    transforms = ['translateX(-100%)', 'translateX(0%)', 'translateX(100%)'];
     get direction() {
         return this.localization.rtl ? 'rtl' : 'ltr';
     }
+    constructor(element, localization, ngZone, renderer) {
+        this.element = element;
+        this.localization = localization;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        validatePackage(packageMetadata);
+    }
     ngOnInit() {
         this.subs.add(this.renderer.listen(this.element.nativeElement, 'keydown', event => this.keyDown(event)));
         if (this.arrows) {
@@ -434,15 +457,14 @@ export class ScrollViewComponent {
     get nextButtonArrowSVGIcon() {
         return this.direction === 'ltr' ? this.chevronRightIcon : this.chevronLeftIcon;
     }
-}
-ScrollViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollViewComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ScrollViewComponent, isStandalone: true, selector: "kendo-scrollview", inputs: { data: "data", activeIndex: "activeIndex", width: "width", height: "height", endless: "endless", pagerOverlay: "pagerOverlay", animate: "animate", pageable: "pageable", arrows: "arrows" }, outputs: { itemChanged: "itemChanged", activeIndexChange: "activeIndexChange" }, host: { properties: { "class.k-scrollview": "this.scrollViewClass", "attr.role": "this.scrollViewRole", "attr.aria-roledescription": "this.scrollViewRoleDescription", "class.k-scrollview-light": "this.scrollViewLightOverlayClass", "class.k-scrollview-dark": "this.scrollViewDarkOverlayClass", "style.width": "this.hostWidth", "style.height": "this.hostHeight", "attr.tabindex": "this.tabIndex", "attr.aria-live": "this.ariaLive", "attr.dir": "this.dir", "style.touch-action": "this.touchAction" } }, providers: [
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.scrollview'
-        }
-    ], 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollViewComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ScrollViewComponent, isStandalone: true, selector: "kendo-scrollview", inputs: { data: "data", activeIndex: "activeIndex", width: "width", height: "height", endless: "endless", pagerOverlay: "pagerOverlay", animate: "animate", pageable: "pageable", arrows: "arrows" }, outputs: { itemChanged: "itemChanged", activeIndexChange: "activeIndexChange" }, host: { properties: { "class.k-scrollview": "this.scrollViewClass", "attr.role": "this.scrollViewRole", "attr.aria-roledescription": "this.scrollViewRoleDescription", "class.k-scrollview-light": "this.scrollViewLightOverlayClass", "class.k-scrollview-dark": "this.scrollViewDarkOverlayClass", "style.width": "this.hostWidth", "style.height": "this.hostHeight", "attr.tabindex": "this.tabIndex", "attr.aria-live": "this.ariaLive", "attr.dir": "this.dir", "style.touch-action": "this.touchAction" } }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.scrollview'
+            }
+        ], 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: `
 
         <ng-container kendoScrollViewLocalizedMessages
             i18n-pagerButtonLabel="kendo.scrollview.pagerButtonLabel|The label for the buttons inside the ScrollView Pager"
@@ -517,20 +539,21 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         </div>
         <div class="k-sr-only" aria-live="polite"></div>
     `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoScrollViewLocalizedMessages]" }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: ScrollViewPagerComponent, selector: "kendo-scrollview-pager", inputs: ["activeIndex", "data"], outputs: ["pagerIndexChange"] }], animations: [
-        trigger('animateTo', [
-            state('center, left, right', style({ transform: 'translateX(0)' })),
-            transition('* => right', [
-                animate('300ms ease-out', style({ transform: 'translateX(100%)' }))
-            ]),
-            transition('* => left', [
-                animate('300ms ease-out', style({ transform: 'translateX(-100%)' }))
-            ]),
-            transition('* => center', [
-                animate('300ms ease-out')
+            trigger('animateTo', [
+                state('center, left, right', style({ transform: 'translateX(0)' })),
+                transition('* => right', [
+                    animate('300ms ease-out', style({ transform: 'translateX(100%)' }))
+                ]),
+                transition('* => left', [
+                    animate('300ms ease-out', style({ transform: 'translateX(-100%)' }))
+                ]),
+                transition('* => center', [
+                    animate('300ms ease-out')
+                ])
             ])
-        ])
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollViewComponent, decorators: [{
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollViewComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [

package/{esm2020 → esm2022}/scrollview.module.mjs

@@ -41,11 +41,11 @@ import * as i2 from "./localization/custom-messages.component";
  * ```
  */
 export class ScrollViewModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ScrollViewModule, imports: [i1.ScrollViewComponent, i2.CustomMessagesComponent], exports: [i1.ScrollViewComponent, i2.CustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollViewModule, providers: [IconsService], imports: [i1.ScrollViewComponent] });
 }
-ScrollViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ScrollViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ScrollViewModule, imports: [i1.ScrollViewComponent, i2.CustomMessagesComponent], exports: [i1.ScrollViewComponent, i2.CustomMessagesComponent] });
-ScrollViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollViewModule, providers: [IconsService], imports: [KENDO_SCROLLVIEW] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollViewModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollViewModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_SCROLLVIEW],