@progress/kendo-angular-scrollview 17.0.0-develop.4 → 17.0.0-develop.41

package/README.md

@@ -4,30 +4,49 @@
 
 ## Kendo UI for Angular ScrollView Component
 
-> **Important**
-> * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-scrollview)—a commercial library.
-> * You will need to install a license key when adding the package to your project. For more information, please refer to the [Kendo UI for Angular My License page](https://www.telerik.com/kendo-angular-ui/my-license?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-scrollview).
-> * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-scrollview) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-scrollview). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-scrollview).
+> * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui)—a commercial library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
+> * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
 > * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
 >
-> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-scrollview) and speed up your development process!
+> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui) and speed up your development process!
 
-Kendo UI for Angular is a commercial UI library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
+## Angular ScrollView Component
+
+The [Kendo UI for Angular ScrollView](https://www.telerik.com/kendo-angular-ui/components/scrollview) component represents a horizontal collection of content or image views with built-in navigation tools, automatic scrolling and visual indicators to help users keep track of their location in the collection at any time.
+
+## Key Features
+
+Among the many features which the Kendo UI for Angular ScrollView delivers are:
+
+* [Animations](https://www.telerik.com/kendo-angular-ui/components/scrollview/animations)—The ScrollView allows you to enable or disable its built-in animations, which are enabled by default.
+* [Arrows](https://www.telerik.com/kendo-angular-ui/components/scrollview/arrows)—Allows controlling the behavior of the built-in navigation arrows of the ScrollView, which are disabled by default.
+* [Paging](https://www.telerik.com/kendo-angular-ui/components/scrollview/paging)—Provides options for enabling or disabling its built-in paging functionality as well as for adding a pager overlay.
+* [Endless Scrolling](https://www.telerik.com/kendo-angular-ui/components/scrollview/endless-scrolling)—You can enable the endless scrolling mode which loops through its views in an endless fashion and is disabled by default. 
+* [Dimensions](https://www.telerik.com/kendo-angular-ui/components/scrollview/dimensions)—Enables customizing the dimensions of the ScrollView by defining its width and height.
+* [Data Sources](https://www.telerik.com/kendo-angular-ui/components/scrollview/data-sources)—You can set a data source for the ScrollView to provide it with data.
+* [Active Items](https://www.telerik.com/kendo-angular-ui/components/scrollview/active-items)—Allows rendering an active item in the ScrollView by using the available configuration of the component.
+* [Globalization](https://www.telerik.com/kendo-angular-ui/components/scrollview/globalization)—By using the available globalization options in Kendo UI for Angular, you can translate the ScrollView messages by adapting them to specific culture locales. Additionally, the ScrollView supports rendering in a right-to-left (RTL) direction.
+* [Accessibility](https://www.telerik.com/kendo-angular-ui/components/scrollview/accessibility)—The ScrollView is accessible for screen readers and supports WAI-ARIA attributes.
+* [Keyboard Navigation](https://www.telerik.com/kendo-angular-ui/components/scrollview/keyboard-navigation)—The ScrollView supports a number of keyboard shortcuts which allow users to accomplish various commands.
+
+## Support Options
+
+For any issues you might encounter while working with the Kendo UI for Angular ScrollView, you have the following support channels available:
+
+* Industry-leading technical support—Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-tickets).
+* Product forums—The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
+* Feedback portal—The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
 
 ## Resources
 
-* [Get Started with Kendo UI for Angular (requires trial registration)](https://www.telerik.com/kendo-angular-ui/getting-started)
-* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
+* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
+* [Getting Started with the Kendo UI for Angular ScrollView](https://www.telerik.com/kendo-angular-ui/components/scrollview/installation/getting-started)
+* [ScrollView Overview page](https://www.telerik.com/kendo-angular-ui/components/scrollview) and [ScrollView API reference](https://www.telerik.com/kendo-angular-ui/components/scrollview/api)
+* [Kendo UI for Angular roadmap](https://www.telerik.com/kendo-angular-ui/roadmap)
 * [Blogs](http://www.telerik.com/blogs/kendo-ui)
+* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
 * [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
 
-## Questions and Feedback
-
-* [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
-* [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
-* [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
-* [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
-
 *Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
 
 *Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*

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: 1728985426,
-    version: '17.0.0-develop.4',
+    publishDate: 1730818504,
+    version: '17.0.0-develop.41',
     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],