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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,7 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as i0 from '@angular/core';
6
- import { EventEmitter, Output, Input, Component, Directive, forwardRef, TemplateRef, HostBinding, ViewChild, ContentChild, NgModule } from '@angular/core';
6
+ import { EventEmitter, signal, Output, Input, ChangeDetectionStrategy, Component, Directive, forwardRef, TemplateRef, HostBinding, ViewChild, ContentChild, NgModule } from '@angular/core';
7
7
  import { trigger, state, style, transition, animate } from '@angular/animations';
8
8
  import { replaceMessagePlaceholder, normalizeKeys, Keys, DraggableDirective, KENDO_WEBMCP_HOST } from '@progress/kendo-angular-common';
9
9
  import { validatePackage } from '@progress/kendo-licensing';
@@ -31,8 +31,8 @@ const packageMetadata = {
31
31
  productName: 'Kendo UI for Angular',
32
32
  productCode: 'KENDOUIANGULAR',
33
33
  productCodes: ['KENDOUIANGULAR'],
34
- publishDate: 1783511670,
35
- version: '24.2.2',
34
+ publishDate: 1785318057,
35
+ version: '25.0.0-develop.12',
36
36
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
37
37
  };
38
38
 
@@ -131,9 +131,21 @@ class DataCollection {
131
131
  */
132
132
  class ScrollViewPagerComponent {
133
133
  localization;
134
- activeIndex;
135
- data;
134
+ set activeIndex(value) {
135
+ this._activeIndex.set(value);
136
+ }
137
+ get activeIndex() {
138
+ return this._activeIndex();
139
+ }
140
+ set data(value) {
141
+ this._data.set(value);
142
+ }
143
+ get data() {
144
+ return this._data();
145
+ }
136
146
  pagerIndexChange = new EventEmitter();
147
+ _activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "_activeIndex" }] : []));
148
+ _data = signal([], ...(ngDevMode ? [{ debugName: "_data" }] : []));
137
149
  constructor(localization) {
138
150
  this.localization = localization;
139
151
  }
@@ -149,8 +161,8 @@ class ScrollViewPagerComponent {
149
161
  const localizationMsg = this.localization.get('pagerButtonLabel') || '';
150
162
  return replaceMessagePlaceholder(localizationMsg, 'itemIndex', itemIndex.toString());
151
163
  }
152
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ScrollViewPagerComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
153
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ScrollViewPagerComponent, isStandalone: true, selector: "kendo-scrollview-pager", inputs: { activeIndex: "activeIndex", data: "data" }, outputs: { pagerIndexChange: "pagerIndexChange" }, ngImport: i0, template: `
164
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollViewPagerComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
165
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ScrollViewPagerComponent, isStandalone: true, selector: "kendo-scrollview-pager", inputs: { activeIndex: "activeIndex", data: "data" }, outputs: { pagerIndexChange: "pagerIndexChange" }, ngImport: i0, template: `
154
166
  <div class="k-scrollview-nav">
155
167
  @for (item of data; track $index; let i = $index) {
156
168
  <span [attr.aria-label]="pagerButtonLabel(i + 1)" role="button" class="k-link"
@@ -159,11 +171,12 @@ class ScrollViewPagerComponent {
159
171
  </span>
160
172
  }
161
173
  </div>
162
- `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
174
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
163
175
  }
164
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ScrollViewPagerComponent, decorators: [{
176
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollViewPagerComponent, decorators: [{
165
177
  type: Component,
166
178
  args: [{
179
+ changeDetection: ChangeDetectionStrategy.OnPush,
167
180
  selector: 'kendo-scrollview-pager',
168
181
  template: `
169
182
  <div class="k-scrollview-nav">
@@ -194,11 +207,17 @@ class ScrollViewMessages extends ComponentMessages {
194
207
  * Sets the label for the buttons in the ScrollView pager. The default label pattern is `'Item {itemIndex}'`.
195
208
  * When the current item is 1, the default label is `'Item 1'`.
196
209
  */
197
- pagerButtonLabel;
198
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ScrollViewMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
199
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: ScrollViewMessages, isStandalone: true, selector: "kendo-scrollview-messages-base", inputs: { pagerButtonLabel: "pagerButtonLabel" }, usesInheritance: true, ngImport: i0 });
210
+ set pagerButtonLabel(value) {
211
+ this._pagerButtonLabel.set(value);
212
+ }
213
+ get pagerButtonLabel() {
214
+ return this._pagerButtonLabel();
215
+ }
216
+ _pagerButtonLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_pagerButtonLabel" }] : []));
217
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollViewMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
218
+ 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 });
200
219
  }
201
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ScrollViewMessages, decorators: [{
220
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollViewMessages, decorators: [{
202
221
  type: Directive,
203
222
  args: [{
204
223
  selector: 'kendo-scrollview-messages-base'
@@ -216,15 +235,15 @@ class LocalizedMessagesDirective extends ScrollViewMessages {
216
235
  super();
217
236
  this.service = service;
218
237
  }
219
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
220
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoScrollViewLocalizedMessages]", providers: [
238
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
239
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoScrollViewLocalizedMessages]", providers: [
221
240
  {
222
241
  provide: ScrollViewMessages,
223
242
  useExisting: forwardRef(() => LocalizedMessagesDirective)
224
243
  }
225
244
  ], usesInheritance: true, ngImport: i0 });
226
245
  }
227
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
246
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
228
247
  type: Directive,
229
248
  args: [{
230
249
  providers: [
@@ -274,52 +293,98 @@ class ScrollViewComponent {
274
293
  * Provides the data source for the ScrollView ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/data-sources)).
275
294
  * @default []
276
295
  */
277
- data = [];
296
+ set data(value) {
297
+ this._data.set(value);
298
+ if (value?.length === 0) {
299
+ const clamped = Math.max(Math.min(this._activeIndex(), this.view.total - 1), 0);
300
+ this._activeIndex.set(clamped);
301
+ this.index = clamped;
302
+ }
303
+ }
304
+ get data() {
305
+ return this._data();
306
+ }
278
307
  /**
279
308
  * Sets the current item index ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/active-items)).
280
309
  * @default 0
281
310
  */
282
311
  set activeIndex(value) {
283
- this.index = this._activeIndex = value;
312
+ this.index = value;
313
+ this._activeIndex.set(value);
284
314
  }
285
315
  get activeIndex() {
286
- return this._activeIndex;
316
+ return this._activeIndex();
287
317
  }
288
318
  /**
289
319
  * Sets the width of the ScrollView ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/dimensions)).
290
320
  * By default, the width is not set and must be explicitly defined.
291
321
  */
292
- width;
322
+ set width(value) {
323
+ this._width.set(value);
324
+ }
325
+ get width() {
326
+ return this._width();
327
+ }
293
328
  /**
294
329
  * Sets the height of the ScrollView ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/dimensions)).
295
330
  * By default, the height is not set and must be explicitly defined.
296
331
  */
297
- height;
332
+ set height(value) {
333
+ this._height.set(value);
334
+ }
335
+ get height() {
336
+ return this._height();
337
+ }
298
338
  /**
299
339
  * Enables or disables endless scrolling mode, where items loop endlessly ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/endless-scrolling)).
300
340
  * @default false
301
341
  */
302
- endless = false;
342
+ set endless(value) {
343
+ this._endless.set(value);
344
+ }
345
+ get endless() {
346
+ return this._endless();
347
+ }
303
348
  /**
304
349
  * Sets the pager overlay style to `dark`, `light`, or `none`.
305
350
  * @default 'none'
306
351
  */
307
- pagerOverlay = 'none';
352
+ set pagerOverlay(value) {
353
+ this._pagerOverlay.set(value);
354
+ }
355
+ get pagerOverlay() {
356
+ return this._pagerOverlay();
357
+ }
308
358
  /**
309
359
  * Enables or disables built-in animations ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/animations)).
310
360
  * @default true
311
361
  */
312
- animate = true;
362
+ set animate(value) {
363
+ this._animate.set(value);
364
+ }
365
+ get animate() {
366
+ return this._animate();
367
+ }
313
368
  /**
314
369
  * Enables or disables the built-in pager ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/paging)).
315
370
  * @default false
316
371
  */
317
- pageable = false;
372
+ set pageable(value) {
373
+ this._pageable.set(value);
374
+ }
375
+ get pageable() {
376
+ return this._pageable();
377
+ }
318
378
  /**
319
379
  * Enables or disables the built-in navigation arrows ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/arrows)).
320
380
  * @default false
321
381
  */
322
- arrows = false;
382
+ set arrows(value) {
383
+ this._arrows.set(value);
384
+ }
385
+ get arrows() {
386
+ return this._arrows();
387
+ }
323
388
  /**
324
389
  * Fires after the current item is changed.
325
390
  */
@@ -349,7 +414,12 @@ class ScrollViewComponent {
349
414
  return this.direction;
350
415
  }
351
416
  touchAction = 'pan-y pinch-zoom';
352
- animationState = null;
417
+ get animationState() {
418
+ return this._animationState();
419
+ }
420
+ set animationState(value) {
421
+ this._animationState.set(value);
422
+ }
353
423
  view = new DataCollection(() => new DataResultIterator(this.data, this.activeIndex, this.endless, this.pageIndex, this.isRTL));
354
424
  /**
355
425
  * @hidden
@@ -357,11 +427,20 @@ class ScrollViewComponent {
357
427
  scrollviewId;
358
428
  isDataSourceEmpty = false;
359
429
  subs = new Subscription();
360
- _activeIndex = 0;
361
430
  index = 0;
362
431
  initialTouchCoordinate;
363
432
  pageIndex = null;
364
433
  transforms = ['translateX(-100%)', 'translateX(0%)', 'translateX(100%)'];
434
+ _data = signal([], ...(ngDevMode ? [{ debugName: "_data" }] : []));
435
+ _activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "_activeIndex" }] : []));
436
+ _width = signal(undefined, ...(ngDevMode ? [{ debugName: "_width" }] : []));
437
+ _height = signal(undefined, ...(ngDevMode ? [{ debugName: "_height" }] : []));
438
+ _endless = signal(false, ...(ngDevMode ? [{ debugName: "_endless" }] : []));
439
+ _pagerOverlay = signal('none', ...(ngDevMode ? [{ debugName: "_pagerOverlay" }] : []));
440
+ _animate = signal(true, ...(ngDevMode ? [{ debugName: "_animate" }] : []));
441
+ _pageable = signal(false, ...(ngDevMode ? [{ debugName: "_pageable" }] : []));
442
+ _arrows = signal(false, ...(ngDevMode ? [{ debugName: "_arrows" }] : []));
443
+ _animationState = signal(null, ...(ngDevMode ? [{ debugName: "_animationState" }] : []));
365
444
  get direction() {
366
445
  return this.localization.rtl ? 'rtl' : 'ltr';
367
446
  }
@@ -381,11 +460,6 @@ class ScrollViewComponent {
381
460
  ngOnDestroy() {
382
461
  this.subs.unsubscribe();
383
462
  }
384
- ngOnChanges(_) {
385
- if (this.data && this.data.length === 0) {
386
- this.activeIndex = Math.max(Math.min(this.activeIndex, this.view.total - 1), 0);
387
- }
388
- }
389
463
  /**
390
464
  * Navigates the ScrollView to the previous item.
391
465
  */
@@ -640,19 +714,19 @@ class ScrollViewComponent {
640
714
  get nextButtonArrowSVGIcon() {
641
715
  return this.direction === 'ltr' ? this.chevronRightIcon : this.chevronLeftIcon;
642
716
  }
643
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ScrollViewComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
644
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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: [
717
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollViewComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
718
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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: [
645
719
  LocalizationService,
646
720
  {
647
721
  provide: L10N_PREFIX,
648
722
  useValue: 'kendo.scrollview'
649
723
  },
650
724
  { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => ScrollViewComponent) }
651
- ], 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: `
725
+ ], 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: `
652
726
 
653
727
  <ng-container kendoScrollViewLocalizedMessages
654
728
  i18n-pagerButtonLabel="kendo.scrollview.pagerButtonLabel|The label for the buttons inside the ScrollView Pager"
655
- pagerButtonLabel="{{ 'Item {itemIndex}' }}">
729
+ pagerButtonLabel="Item [[itemIndex]]">
656
730
  <ng-container>
657
731
 
658
732
  <div class="k-scrollview-wrap k-scrollview-animate"
@@ -740,9 +814,9 @@ class ScrollViewComponent {
740
814
  animate('300ms ease-out')
741
815
  ])
742
816
  ])
743
- ] });
817
+ ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
744
818
  }
745
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ScrollViewComponent, decorators: [{
819
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollViewComponent, decorators: [{
746
820
  type: Component,
747
821
  args: [{
748
822
  animations: [
@@ -768,12 +842,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
768
842
  },
769
843
  { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => ScrollViewComponent) }
770
844
  ],
845
+ changeDetection: ChangeDetectionStrategy.OnPush,
771
846
  selector: 'kendo-scrollview',
772
847
  template: `
773
848
 
774
849
  <ng-container kendoScrollViewLocalizedMessages
775
850
  i18n-pagerButtonLabel="kendo.scrollview.pagerButtonLabel|The label for the buttons inside the ScrollView Pager"
776
- pagerButtonLabel="{{ 'Item {itemIndex}' }}">
851
+ pagerButtonLabel="Item [[itemIndex]]">
777
852
  <ng-container>
778
853
 
779
854
  <div class="k-scrollview-wrap k-scrollview-animate"
@@ -944,15 +1019,15 @@ class CustomMessagesComponent extends ScrollViewMessages {
944
1019
  get override() {
945
1020
  return true;
946
1021
  }
947
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
948
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-scrollview-messages", providers: [
1022
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
1023
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-scrollview-messages", providers: [
949
1024
  {
950
1025
  provide: ScrollViewMessages,
951
1026
  useExisting: forwardRef(() => CustomMessagesComponent)
952
1027
  }
953
1028
  ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
954
1029
  }
955
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CustomMessagesComponent, decorators: [{
1030
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CustomMessagesComponent, decorators: [{
956
1031
  type: Component,
957
1032
  args: [{
958
1033
  providers: [
@@ -1015,11 +1090,11 @@ const KENDO_SCROLLVIEW = [
1015
1090
  * ```
1016
1091
  */
1017
1092
  class ScrollViewModule {
1018
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ScrollViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1019
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: ScrollViewModule, imports: [ScrollViewComponent, CustomMessagesComponent], exports: [ScrollViewComponent, CustomMessagesComponent] });
1020
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ScrollViewModule, providers: [IconsService], imports: [ScrollViewComponent] });
1093
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1094
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ScrollViewModule, imports: [ScrollViewComponent, CustomMessagesComponent], exports: [ScrollViewComponent, CustomMessagesComponent] });
1095
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollViewModule, providers: [IconsService], imports: [ScrollViewComponent] });
1021
1096
  }
1022
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ScrollViewModule, decorators: [{
1097
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollViewModule, decorators: [{
1023
1098
  type: NgModule,
1024
1099
  args: [{
1025
1100
  imports: [...KENDO_SCROLLVIEW],
package/index.d.ts CHANGED
@@ -2,10 +2,379 @@
2
2
  * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- export { ScrollViewComponent } from './scrollview.component';
6
- export { ScrollViewModule } from './scrollview.module';
7
- export { ScrollViewPagerComponent } from './scrollview-pager.component';
8
- export { ItemChangedEvent } from './change-event-args';
9
- export { ScrollViewPagerOverlay } from './enums';
10
- export { CustomMessagesComponent } from './localization/custom-messages.component';
11
- export * from './directives';
5
+ import * as i0 from '@angular/core';
6
+ import { OnInit, OnDestroy, ElementRef, EventEmitter, TemplateRef, NgZone, Renderer2 } from '@angular/core';
7
+ import { AnimationEvent } from '@angular/animations';
8
+ import { LocalizationService, ComponentMessages } from '@progress/kendo-angular-l10n';
9
+ import { SVGIcon } from '@progress/kendo-svg-icons';
10
+
11
+ /**
12
+ * Represents the available pager overlays of the ScrollView.
13
+ */
14
+ type ScrollViewPagerOverlay = 'dark' | 'light' | 'none';
15
+ /**
16
+ * @hidden
17
+ */
18
+ type AnimationState = "left" | "right" | "center";
19
+
20
+ /**
21
+ * Represents the arguments for the `itemChanged` event.
22
+ *
23
+ * The `itemChanged` event fires when the current item in the ScrollView changes.
24
+ */
25
+ interface ItemChangedEvent {
26
+ /**
27
+ * Specifies the changed item.
28
+ */
29
+ item: any;
30
+ /**
31
+ * Specifies the index of the changed item.
32
+ */
33
+ index: number;
34
+ }
35
+
36
+ /** @hidden */
37
+ declare const iterator: any;
38
+ /**
39
+ * @hidden
40
+ */
41
+ declare class DataResultIterator {
42
+ [iterator]: () => any;
43
+ private source;
44
+ private index;
45
+ private endless;
46
+ private pageIndex;
47
+ private rtl;
48
+ constructor(source: any[], index: number, endless: boolean, pageIndex: number, rtl: boolean);
49
+ get data(): any[];
50
+ get total(): number;
51
+ canMoveNext(): boolean;
52
+ canMovePrev(): boolean;
53
+ }
54
+ /**
55
+ * @hidden
56
+ */
57
+ declare class DataCollection {
58
+ private accessor;
59
+ constructor(accessor: () => DataResultIterator);
60
+ get length(): number;
61
+ get total(): number;
62
+ item(index: number): any;
63
+ canMoveNext(): boolean;
64
+ canMovePrev(): boolean;
65
+ [Symbol.iterator](): any;
66
+ }
67
+
68
+ /**
69
+ * @hidden
70
+ */
71
+ type Direction = 'rtl' | 'ltr';
72
+
73
+ /**
74
+ * Represents the [Kendo UI ScrollView component for Angular](https://www.telerik.com/kendo-angular-ui/components/scrollview).
75
+ *
76
+ * Use the ScrollViewComponent to display a horizontally scrollable list of items. You can customize the content and navigation.
77
+ *
78
+ * @example
79
+ * ```html
80
+ * <kendo-scrollview [data]="items" [width]="width" [height]="height">
81
+ * <ng-template let-item="item">
82
+ * <h2>{{item.title}}</h2>
83
+ * <img width="100%" [src]="item.url" />
84
+ * </ng-template>
85
+ * </kendo-scrollview>
86
+ * ```
87
+ *
88
+ * @remarks
89
+ * Supported children components are: {@link CustomMessagesComponent}
90
+ */
91
+ declare class ScrollViewComponent implements OnInit, OnDestroy {
92
+ protected element: ElementRef;
93
+ private localization;
94
+ private ngZone;
95
+ private renderer;
96
+ /**
97
+ * @hidden
98
+ */
99
+ chevronLeftIcon: SVGIcon;
100
+ /**
101
+ * @hidden
102
+ */
103
+ chevronRightIcon: SVGIcon;
104
+ /**
105
+ * Provides the data source for the ScrollView ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/data-sources)).
106
+ * @default []
107
+ */
108
+ set data(value: Array<any>);
109
+ get data(): Array<any>;
110
+ /**
111
+ * Sets the current item index ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/active-items)).
112
+ * @default 0
113
+ */
114
+ set activeIndex(value: number);
115
+ get activeIndex(): number;
116
+ /**
117
+ * Sets the width of the ScrollView ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/dimensions)).
118
+ * By default, the width is not set and must be explicitly defined.
119
+ */
120
+ set width(value: string);
121
+ get width(): string;
122
+ /**
123
+ * Sets the height of the ScrollView ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/dimensions)).
124
+ * By default, the height is not set and must be explicitly defined.
125
+ */
126
+ set height(value: string);
127
+ get height(): string;
128
+ /**
129
+ * Enables or disables endless scrolling mode, where items loop endlessly ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/endless-scrolling)).
130
+ * @default false
131
+ */
132
+ set endless(value: boolean);
133
+ get endless(): boolean;
134
+ /**
135
+ * Sets the pager overlay style to `dark`, `light`, or `none`.
136
+ * @default 'none'
137
+ */
138
+ set pagerOverlay(value: ScrollViewPagerOverlay);
139
+ get pagerOverlay(): ScrollViewPagerOverlay;
140
+ /**
141
+ * Enables or disables built-in animations ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/animations)).
142
+ * @default true
143
+ */
144
+ set animate(value: boolean);
145
+ get animate(): boolean;
146
+ /**
147
+ * Enables or disables the built-in pager ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/paging)).
148
+ * @default false
149
+ */
150
+ set pageable(value: boolean);
151
+ get pageable(): boolean;
152
+ /**
153
+ * Enables or disables the built-in navigation arrows ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/arrows)).
154
+ * @default false
155
+ */
156
+ set arrows(value: boolean);
157
+ get arrows(): boolean;
158
+ /**
159
+ * Fires after the current item is changed.
160
+ */
161
+ itemChanged: EventEmitter<ItemChangedEvent>;
162
+ /**
163
+ * Fires after the `activeIndex` has changed. Allows for two-way binding of the `activeIndex` property.
164
+ */
165
+ activeIndexChange: EventEmitter<number>;
166
+ itemTemplateRef: TemplateRef<any>;
167
+ itemWrapper: ElementRef;
168
+ prevButton: ElementRef;
169
+ nextButton: ElementRef;
170
+ scrollViewClass: boolean;
171
+ scrollViewRole: string;
172
+ scrollViewRoleDescription: string;
173
+ get scrollViewLightOverlayClass(): boolean;
174
+ get scrollViewDarkOverlayClass(): boolean;
175
+ get hostWidth(): string;
176
+ get hostHeight(): string;
177
+ tabIndex: number;
178
+ ariaLive: string;
179
+ get dir(): Direction;
180
+ touchAction: string;
181
+ get animationState(): AnimationState;
182
+ set animationState(value: AnimationState);
183
+ view: DataCollection;
184
+ /**
185
+ * @hidden
186
+ */
187
+ scrollviewId: string;
188
+ isDataSourceEmpty: boolean;
189
+ private subs;
190
+ private index;
191
+ private initialTouchCoordinate;
192
+ private pageIndex;
193
+ private transforms;
194
+ private _data;
195
+ private _activeIndex;
196
+ private _width;
197
+ private _height;
198
+ private _endless;
199
+ private _pagerOverlay;
200
+ private _animate;
201
+ private _pageable;
202
+ private _arrows;
203
+ private _animationState;
204
+ private get direction();
205
+ constructor(element: ElementRef, localization: LocalizationService, ngZone: NgZone, renderer: Renderer2);
206
+ ngOnInit(): void;
207
+ ngOnDestroy(): void;
208
+ /**
209
+ * Navigates the ScrollView to the previous item.
210
+ */
211
+ prev(): void;
212
+ /**
213
+ * Navigates the ScrollView to the next item.
214
+ */
215
+ next(): void;
216
+ /**
217
+ * @hidden
218
+ */
219
+ transitionEndHandler(e: AnimationEvent): void;
220
+ /**
221
+ * @hidden
222
+ */
223
+ handlePress(e: any): void;
224
+ /**
225
+ * @hidden
226
+ */
227
+ handleDrag(e: any): void;
228
+ /**
229
+ * @hidden
230
+ */
231
+ handleRelease(e: any): void;
232
+ /**
233
+ * @hidden
234
+ */
235
+ pageChange(idx: number): void;
236
+ /**
237
+ * @hidden
238
+ */
239
+ inlineListItemStyles(idx: number): {
240
+ [key: string]: string;
241
+ };
242
+ /**
243
+ * @hidden
244
+ */
245
+ displayLeftArrow(): boolean;
246
+ /**
247
+ * @hidden
248
+ */
249
+ leftArrowClick(): void;
250
+ /**
251
+ * @hidden
252
+ */
253
+ displayRightArrow(): boolean;
254
+ /**
255
+ * @hidden
256
+ */
257
+ rightArrowClick(): void;
258
+ protected draggedInsideBounds(deltaX: number): boolean;
259
+ protected draggedEnoughToNavigate(deltaX: number): boolean;
260
+ protected isDragForbidden(deltaX: number): boolean;
261
+ private keyDown;
262
+ private navigate;
263
+ private changeIndex;
264
+ private get isRTL();
265
+ get prevButtonArrowIcon(): string;
266
+ get nextButtonArrowIcon(): string;
267
+ get prevButtonArrowSVGIcon(): SVGIcon;
268
+ get nextButtonArrowSVGIcon(): SVGIcon;
269
+ static ɵfac: i0.ɵɵFactoryDeclaration<ScrollViewComponent, never>;
270
+ static ɵcmp: i0.ɵɵComponentDeclaration<ScrollViewComponent, "kendo-scrollview", ["kendoScrollView"], { "data": { "alias": "data"; "required": false; }; "activeIndex": { "alias": "activeIndex"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "endless": { "alias": "endless"; "required": false; }; "pagerOverlay": { "alias": "pagerOverlay"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "pageable": { "alias": "pageable"; "required": false; }; "arrows": { "alias": "arrows"; "required": false; }; }, { "itemChanged": "itemChanged"; "activeIndexChange": "activeIndexChange"; }, ["itemTemplateRef"], never, true, never>;
271
+ }
272
+
273
+ /**
274
+ * @hidden
275
+ */
276
+ declare class ScrollViewMessages extends ComponentMessages {
277
+ /**
278
+ * Sets the label for the buttons in the ScrollView pager. The default label pattern is `'Item {itemIndex}'`.
279
+ * When the current item is 1, the default label is `'Item 1'`.
280
+ */
281
+ set pagerButtonLabel(value: string);
282
+ get pagerButtonLabel(): string;
283
+ private _pagerButtonLabel;
284
+ static ɵfac: i0.ɵɵFactoryDeclaration<ScrollViewMessages, never>;
285
+ static ɵdir: i0.ɵɵDirectiveDeclaration<ScrollViewMessages, "kendo-scrollview-messages-base", never, { "pagerButtonLabel": { "alias": "pagerButtonLabel"; "required": false; }; }, {}, never, never, true, never>;
286
+ }
287
+
288
+ /**
289
+ * Represents the custom messages component of the ScrollView.
290
+ *
291
+ * Use this component to override default messages for the ScrollView
292
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/globalization#custom-messages)).
293
+ *
294
+ * @example
295
+ * ```html
296
+ * <kendo-scrollview [data]="items" [width]="width" [height]="height">
297
+ * <kendo-scrollview-messages pagerButtonLabel="This is item number {itemIndex}">
298
+ * </kendo-scrollview-messages>
299
+ * </kendo-scrollview>
300
+ * ```
301
+ */
302
+ declare class CustomMessagesComponent extends ScrollViewMessages {
303
+ protected service: LocalizationService;
304
+ constructor(service: LocalizationService);
305
+ protected get override(): boolean;
306
+ static ɵfac: i0.ɵɵFactoryDeclaration<CustomMessagesComponent, never>;
307
+ static ɵcmp: i0.ɵɵComponentDeclaration<CustomMessagesComponent, "kendo-scrollview-messages", never, {}, {}, never, never, true, never>;
308
+ }
309
+
310
+ /**
311
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
312
+ * definition for the ScrollView component.
313
+ *
314
+ * @example
315
+ * ```typescript
316
+ * import { NgModule } from '@angular/core';
317
+ * import { BrowserModule } from '@angular/platform-browser';
318
+ * import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
319
+ * import { AppComponent } from './app.component';
320
+ *
321
+ * @NgModule({
322
+ * declarations: [AppComponent],
323
+ * imports: [BrowserModule, ScrollViewModule],
324
+ * bootstrap: [AppComponent]
325
+ * })
326
+ * export class AppModule {}
327
+ * ```
328
+ */
329
+ declare class ScrollViewModule {
330
+ static ɵfac: i0.ɵɵFactoryDeclaration<ScrollViewModule, never>;
331
+ static ɵmod: i0.ɵɵNgModuleDeclaration<ScrollViewModule, never, [typeof ScrollViewComponent, typeof CustomMessagesComponent], [typeof ScrollViewComponent, typeof CustomMessagesComponent]>;
332
+ static ɵinj: i0.ɵɵInjectorDeclaration<ScrollViewModule>;
333
+ }
334
+
335
+ /**
336
+ * @hidden
337
+ */
338
+ declare class ScrollViewPagerComponent {
339
+ private localization;
340
+ set activeIndex(value: number);
341
+ get activeIndex(): number;
342
+ set data(value: any[]);
343
+ get data(): any[];
344
+ pagerIndexChange: EventEmitter<number>;
345
+ private _activeIndex;
346
+ private _data;
347
+ constructor(localization: LocalizationService);
348
+ itemClass(idx: number): any;
349
+ indexChange(selectedIndex: number): void;
350
+ pagerButtonLabel(itemIndex: number): string;
351
+ static ɵfac: i0.ɵɵFactoryDeclaration<ScrollViewPagerComponent, never>;
352
+ static ɵcmp: i0.ɵɵComponentDeclaration<ScrollViewPagerComponent, "kendo-scrollview-pager", never, { "activeIndex": { "alias": "activeIndex"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, { "pagerIndexChange": "pagerIndexChange"; }, never, never, true, never>;
353
+ }
354
+
355
+ /**
356
+ * Use the `KENDO_SCROLLVIEW` utility array to access all `@progress/kendo-angular-scrollview` related components and directives in a standalone Angular component.
357
+ *
358
+ * @example
359
+ * ```typescript
360
+ * import { Component } from '@angular/core';
361
+ * import { KENDO_SCROLLVIEW } from '@progress/kendo-angular-scrollview';
362
+ *
363
+ * @Component({
364
+ * standalone: true,
365
+ * imports: [KENDO_SCROLLVIEW],
366
+ * template: `<kendo-scrollview [data]="items"></kendo-scrollview>`
367
+ * })
368
+ * export class AppComponent {
369
+ * public items = [
370
+ * { title: 'Flower' },
371
+ * { title: 'Mountain' },
372
+ * { title: 'Sky' }
373
+ * ];
374
+ * }
375
+ * ```
376
+ */
377
+ declare const KENDO_SCROLLVIEW: readonly [typeof ScrollViewComponent, typeof CustomMessagesComponent];
378
+
379
+ export { CustomMessagesComponent, KENDO_SCROLLVIEW, ScrollViewComponent, ScrollViewModule, ScrollViewPagerComponent };
380
+ export type { ItemChangedEvent, ScrollViewPagerOverlay };
@@ -7,7 +7,7 @@ export const packageMetadata = {
7
7
  "productCodes": [
8
8
  "KENDOUIANGULAR"
9
9
  ],
10
- "publishDate": 1783511670,
11
- "version": "24.2.2",
10
+ "publishDate": 1785318057,
11
+ "version": "25.0.0-develop.12",
12
12
  "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
13
13
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-scrollview",
3
- "version": "24.2.2",
3
+ "version": "25.0.0-develop.12",
4
4
  "description": "A ScrollView Component for Angular",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -19,24 +19,24 @@
19
19
  "package": {
20
20
  "productName": "Kendo UI for Angular",
21
21
  "productCode": "KENDOUIANGULAR",
22
- "publishDate": 1783511670,
22
+ "publishDate": 1785318057,
23
23
  "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
24
24
  }
25
25
  },
26
26
  "peerDependencies": {
27
- "@angular/animations": "19 - 22",
28
- "@angular/common": "19 - 22",
29
- "@angular/core": "19 - 22",
30
- "@angular/platform-browser": "19 - 22",
27
+ "@angular/animations": "20 - 22",
28
+ "@angular/common": "20 - 22",
29
+ "@angular/core": "20 - 22",
30
+ "@angular/platform-browser": "20 - 22",
31
31
  "@progress/kendo-licensing": "^1.11.0",
32
- "@progress/kendo-angular-common": "24.2.2",
33
- "@progress/kendo-angular-l10n": "24.2.2",
34
- "@progress/kendo-angular-icons": "24.2.2",
32
+ "@progress/kendo-angular-common": "25.0.0-develop.12",
33
+ "@progress/kendo-angular-l10n": "25.0.0-develop.12",
34
+ "@progress/kendo-angular-icons": "25.0.0-develop.12",
35
35
  "rxjs": "^6.5.3 || ^7.0.0"
36
36
  },
37
37
  "dependencies": {
38
38
  "tslib": "^2.3.1",
39
- "@progress/kendo-angular-schematics": "24.2.2"
39
+ "@progress/kendo-angular-schematics": "25.0.0-develop.12"
40
40
  },
41
41
  "schematics": "./schematics/collection.json",
42
42
  "module": "fesm2022/progress-kendo-angular-scrollview.mjs",
@@ -1,19 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- /**
6
- * Represents the arguments for the `itemChanged` event.
7
- *
8
- * The `itemChanged` event fires when the current item in the ScrollView changes.
9
- */
10
- export interface ItemChangedEvent {
11
- /**
12
- * Specifies the changed item.
13
- */
14
- item: any;
15
- /**
16
- * Specifies the index of the changed item.
17
- */
18
- index: number;
19
- }
@@ -1,32 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- /**
6
- * @hidden
7
- */
8
- export declare class DataResultIterator {
9
- private source;
10
- private index;
11
- private endless;
12
- private pageIndex;
13
- private rtl;
14
- constructor(source: any[], index: number, endless: boolean, pageIndex: number, rtl: boolean);
15
- get data(): any[];
16
- get total(): number;
17
- canMoveNext(): boolean;
18
- canMovePrev(): boolean;
19
- }
20
- /**
21
- * @hidden
22
- */
23
- export declare class DataCollection {
24
- private accessor;
25
- constructor(accessor: () => DataResultIterator);
26
- get length(): number;
27
- get total(): number;
28
- item(index: number): any;
29
- canMoveNext(): boolean;
30
- canMovePrev(): boolean;
31
- [Symbol.iterator](): any;
32
- }
package/direction.d.ts DELETED
@@ -1,8 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- /**
6
- * @hidden
7
- */
8
- export type Direction = 'rtl' | 'ltr';
package/directives.d.ts DELETED
@@ -1,29 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { CustomMessagesComponent } from "./localization/custom-messages.component";
6
- import { ScrollViewComponent } from "./scrollview.component";
7
- /**
8
- * Use the `KENDO_SCROLLVIEW` utility array to access all `@progress/kendo-angular-scrollview` related components and directives in a standalone Angular component.
9
- *
10
- * @example
11
- * ```typescript
12
- * import { Component } from '@angular/core';
13
- * import { KENDO_SCROLLVIEW } from '@progress/kendo-angular-scrollview';
14
- *
15
- * @Component({
16
- * standalone: true,
17
- * imports: [KENDO_SCROLLVIEW],
18
- * template: `<kendo-scrollview [data]="items"></kendo-scrollview>`
19
- * })
20
- * export class AppComponent {
21
- * public items = [
22
- * { title: 'Flower' },
23
- * { title: 'Mountain' },
24
- * { title: 'Sky' }
25
- * ];
26
- * }
27
- * ```
28
- */
29
- export declare const KENDO_SCROLLVIEW: readonly [typeof ScrollViewComponent, typeof CustomMessagesComponent];
package/enums.d.ts DELETED
@@ -1,19 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- /**
6
- * @hidden
7
- */
8
- export declare enum Dir {
9
- Next = 1,
10
- Prev = -1
11
- }
12
- /**
13
- * Represents the available pager overlays of the ScrollView.
14
- */
15
- export type ScrollViewPagerOverlay = 'dark' | 'light' | 'none';
16
- /**
17
- * @hidden
18
- */
19
- export type AnimationState = "left" | "right" | "center";
@@ -1,28 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { LocalizationService } from '@progress/kendo-angular-l10n';
6
- import { ScrollViewMessages } from './messages';
7
- import * as i0 from "@angular/core";
8
- /**
9
- * Represents the custom messages component of the ScrollView.
10
- *
11
- * Use this component to override default messages for the ScrollView
12
- * ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/globalization#custom-messages)).
13
- *
14
- * @example
15
- * ```html
16
- * <kendo-scrollview [data]="items" [width]="width" [height]="height">
17
- * <kendo-scrollview-messages pagerButtonLabel="This is item number {itemIndex}">
18
- * </kendo-scrollview-messages>
19
- * </kendo-scrollview>
20
- * ```
21
- */
22
- export declare class CustomMessagesComponent extends ScrollViewMessages {
23
- protected service: LocalizationService;
24
- constructor(service: LocalizationService);
25
- protected get override(): boolean;
26
- static ɵfac: i0.ɵɵFactoryDeclaration<CustomMessagesComponent, never>;
27
- static ɵcmp: i0.ɵɵComponentDeclaration<CustomMessagesComponent, "kendo-scrollview-messages", never, {}, {}, never, never, true, never>;
28
- }
@@ -1,16 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { LocalizationService } from '@progress/kendo-angular-l10n';
6
- import { ScrollViewMessages } from './messages';
7
- import * as i0 from "@angular/core";
8
- /**
9
- * @hidden
10
- */
11
- export declare class LocalizedMessagesDirective extends ScrollViewMessages {
12
- protected service: LocalizationService;
13
- constructor(service: LocalizationService);
14
- static ɵfac: i0.ɵɵFactoryDeclaration<LocalizedMessagesDirective, never>;
15
- static ɵdir: i0.ɵɵDirectiveDeclaration<LocalizedMessagesDirective, "[kendoScrollViewLocalizedMessages]", never, {}, {}, never, never, true, never>;
16
- }
@@ -1,18 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { ComponentMessages } from '@progress/kendo-angular-l10n';
6
- import * as i0 from "@angular/core";
7
- /**
8
- * @hidden
9
- */
10
- export declare class ScrollViewMessages extends ComponentMessages {
11
- /**
12
- * Sets the label for the buttons in the ScrollView pager. The default label pattern is `'Item {itemIndex}'`.
13
- * When the current item is 1, the default label is `'Item 1'`.
14
- */
15
- pagerButtonLabel: string;
16
- static ɵfac: i0.ɵɵFactoryDeclaration<ScrollViewMessages, never>;
17
- static ɵdir: i0.ɵɵDirectiveDeclaration<ScrollViewMessages, "kendo-scrollview-messages-base", never, { "pagerButtonLabel": { "alias": "pagerButtonLabel"; "required": false; }; }, {}, never, never, true, never>;
18
- }
@@ -1,9 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { type PackageMetadata } from '@progress/kendo-licensing';
6
- /**
7
- * @hidden
8
- */
9
- export declare const packageMetadata: PackageMetadata;
@@ -1,22 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { EventEmitter } from '@angular/core';
6
- import { LocalizationService } from '@progress/kendo-angular-l10n';
7
- import * as i0 from "@angular/core";
8
- /**
9
- * @hidden
10
- */
11
- export declare class ScrollViewPagerComponent {
12
- private localization;
13
- activeIndex: number;
14
- data: any[];
15
- pagerIndexChange: EventEmitter<number>;
16
- constructor(localization: LocalizationService);
17
- itemClass(idx: number): any;
18
- indexChange(selectedIndex: number): void;
19
- pagerButtonLabel(itemIndex: number): string;
20
- static ɵfac: i0.ɵɵFactoryDeclaration<ScrollViewPagerComponent, never>;
21
- static ɵcmp: i0.ɵɵComponentDeclaration<ScrollViewPagerComponent, "kendo-scrollview-pager", never, { "activeIndex": { "alias": "activeIndex"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, { "pagerIndexChange": "pagerIndexChange"; }, never, never, true, never>;
22
- }
@@ -1,195 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { ElementRef, EventEmitter, OnChanges, TemplateRef, NgZone, Renderer2, OnDestroy } from '@angular/core';
6
- import { AnimationEvent } from '@angular/animations';
7
- import { AnimationState, ScrollViewPagerOverlay } from './enums';
8
- import { ItemChangedEvent } from './change-event-args';
9
- import { DataCollection } from './data.collection';
10
- import { Direction } from './direction';
11
- import { LocalizationService } from '@progress/kendo-angular-l10n';
12
- import { SVGIcon } from '@progress/kendo-svg-icons';
13
- import * as i0 from "@angular/core";
14
- /**
15
- * Represents the [Kendo UI ScrollView component for Angular](https://www.telerik.com/kendo-angular-ui/components/scrollview).
16
- *
17
- * Use the ScrollViewComponent to display a horizontally scrollable list of items. You can customize the content and navigation.
18
- *
19
- * @example
20
- * ```html
21
- * <kendo-scrollview [data]="items" [width]="width" [height]="height">
22
- * <ng-template let-item="item">
23
- * <h2>{{item.title}}</h2>
24
- * <img width="100%" [src]="item.url" />
25
- * </ng-template>
26
- * </kendo-scrollview>
27
- * ```
28
- *
29
- * @remarks
30
- * Supported children components are: {@link CustomMessagesComponent}
31
- */
32
- export declare class ScrollViewComponent implements OnChanges, OnDestroy {
33
- protected element: ElementRef;
34
- private localization;
35
- private ngZone;
36
- private renderer;
37
- /**
38
- * @hidden
39
- */
40
- chevronLeftIcon: SVGIcon;
41
- /**
42
- * @hidden
43
- */
44
- chevronRightIcon: SVGIcon;
45
- /**
46
- * Provides the data source for the ScrollView ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/data-sources)).
47
- * @default []
48
- */
49
- data: Array<any>;
50
- /**
51
- * Sets the current item index ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/active-items)).
52
- * @default 0
53
- */
54
- set activeIndex(value: number);
55
- get activeIndex(): number;
56
- /**
57
- * Sets the width of the ScrollView ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/dimensions)).
58
- * By default, the width is not set and must be explicitly defined.
59
- */
60
- width: string;
61
- /**
62
- * Sets the height of the ScrollView ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/dimensions)).
63
- * By default, the height is not set and must be explicitly defined.
64
- */
65
- height: string;
66
- /**
67
- * Enables or disables endless scrolling mode, where items loop endlessly ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/endless-scrolling)).
68
- * @default false
69
- */
70
- endless: boolean;
71
- /**
72
- * Sets the pager overlay style to `dark`, `light`, or `none`.
73
- * @default 'none'
74
- */
75
- pagerOverlay: ScrollViewPagerOverlay;
76
- /**
77
- * Enables or disables built-in animations ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/animations)).
78
- * @default true
79
- */
80
- animate: boolean;
81
- /**
82
- * Enables or disables the built-in pager ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/paging)).
83
- * @default false
84
- */
85
- pageable: boolean;
86
- /**
87
- * Enables or disables the built-in navigation arrows ([see example](https://www.telerik.com/kendo-angular-ui/components/scrollview/arrows)).
88
- * @default false
89
- */
90
- arrows: boolean;
91
- /**
92
- * Fires after the current item is changed.
93
- */
94
- itemChanged: EventEmitter<ItemChangedEvent>;
95
- /**
96
- * Fires after the `activeIndex` has changed. Allows for two-way binding of the `activeIndex` property.
97
- */
98
- activeIndexChange: EventEmitter<number>;
99
- itemTemplateRef: TemplateRef<any>;
100
- itemWrapper: ElementRef;
101
- prevButton: ElementRef;
102
- nextButton: ElementRef;
103
- scrollViewClass: boolean;
104
- scrollViewRole: string;
105
- scrollViewRoleDescription: string;
106
- get scrollViewLightOverlayClass(): boolean;
107
- get scrollViewDarkOverlayClass(): boolean;
108
- get hostWidth(): string;
109
- get hostHeight(): string;
110
- tabIndex: number;
111
- ariaLive: string;
112
- get dir(): Direction;
113
- touchAction: string;
114
- animationState: AnimationState;
115
- view: DataCollection;
116
- /**
117
- * @hidden
118
- */
119
- scrollviewId: string;
120
- isDataSourceEmpty: boolean;
121
- private subs;
122
- private _activeIndex;
123
- private index;
124
- private initialTouchCoordinate;
125
- private pageIndex;
126
- private transforms;
127
- private get direction();
128
- constructor(element: ElementRef, localization: LocalizationService, ngZone: NgZone, renderer: Renderer2);
129
- ngOnInit(): void;
130
- ngOnDestroy(): void;
131
- ngOnChanges(_: any): void;
132
- /**
133
- * Navigates the ScrollView to the previous item.
134
- */
135
- prev(): void;
136
- /**
137
- * Navigates the ScrollView to the next item.
138
- */
139
- next(): void;
140
- /**
141
- * @hidden
142
- */
143
- transitionEndHandler(e: AnimationEvent): void;
144
- /**
145
- * @hidden
146
- */
147
- handlePress(e: any): void;
148
- /**
149
- * @hidden
150
- */
151
- handleDrag(e: any): void;
152
- /**
153
- * @hidden
154
- */
155
- handleRelease(e: any): void;
156
- /**
157
- * @hidden
158
- */
159
- pageChange(idx: number): void;
160
- /**
161
- * @hidden
162
- */
163
- inlineListItemStyles(idx: number): {
164
- [key: string]: string;
165
- };
166
- /**
167
- * @hidden
168
- */
169
- displayLeftArrow(): boolean;
170
- /**
171
- * @hidden
172
- */
173
- leftArrowClick(): void;
174
- /**
175
- * @hidden
176
- */
177
- displayRightArrow(): boolean;
178
- /**
179
- * @hidden
180
- */
181
- rightArrowClick(): void;
182
- protected draggedInsideBounds(deltaX: number): boolean;
183
- protected draggedEnoughToNavigate(deltaX: number): boolean;
184
- protected isDragForbidden(deltaX: number): boolean;
185
- private keyDown;
186
- private navigate;
187
- private changeIndex;
188
- private get isRTL();
189
- get prevButtonArrowIcon(): string;
190
- get nextButtonArrowIcon(): string;
191
- get prevButtonArrowSVGIcon(): SVGIcon;
192
- get nextButtonArrowSVGIcon(): SVGIcon;
193
- static ɵfac: i0.ɵɵFactoryDeclaration<ScrollViewComponent, never>;
194
- static ɵcmp: i0.ɵɵComponentDeclaration<ScrollViewComponent, "kendo-scrollview", ["kendoScrollView"], { "data": { "alias": "data"; "required": false; }; "activeIndex": { "alias": "activeIndex"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "endless": { "alias": "endless"; "required": false; }; "pagerOverlay": { "alias": "pagerOverlay"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "pageable": { "alias": "pageable"; "required": false; }; "arrows": { "alias": "arrows"; "required": false; }; }, { "itemChanged": "itemChanged"; "activeIndexChange": "activeIndexChange"; }, ["itemTemplateRef"], never, true, never>;
195
- }
@@ -1,31 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import * as i0 from "@angular/core";
6
- import * as i1 from "./scrollview.component";
7
- import * as i2 from "./localization/custom-messages.component";
8
- /**
9
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
10
- * definition for the ScrollView component.
11
- *
12
- * @example
13
- * ```typescript
14
- * import { NgModule } from '@angular/core';
15
- * import { BrowserModule } from '@angular/platform-browser';
16
- * import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
17
- * import { AppComponent } from './app.component';
18
- *
19
- * @NgModule({
20
- * declarations: [AppComponent],
21
- * imports: [BrowserModule, ScrollViewModule],
22
- * bootstrap: [AppComponent]
23
- * })
24
- * export class AppModule {}
25
- * ```
26
- */
27
- export declare class ScrollViewModule {
28
- static ɵfac: i0.ɵɵFactoryDeclaration<ScrollViewModule, never>;
29
- static ɵmod: i0.ɵɵNgModuleDeclaration<ScrollViewModule, never, [typeof i1.ScrollViewComponent, typeof i2.CustomMessagesComponent], [typeof i1.ScrollViewComponent, typeof i2.CustomMessagesComponent]>;
30
- static ɵinj: i0.ɵɵInjectorDeclaration<ScrollViewModule>;
31
- }