@progress/kendo-angular-scrollview 19.1.2-develop.1 → 19.1.2-develop.3
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.
- package/change-event-args.d.ts +5 -4
- package/directives.d.ts +20 -1
- package/esm2022/directives.mjs +20 -1
- package/esm2022/localization/custom-messages.component.mjs +3 -1
- package/esm2022/localization/messages.mjs +2 -2
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/scrollview.component.mjs +29 -66
- package/esm2022/scrollview.module.mjs +7 -19
- package/fesm2022/progress-kendo-angular-scrollview.mjs +63 -91
- package/localization/custom-messages.component.d.ts +3 -1
- package/localization/messages.d.ts +2 -2
- package/package.json +6 -6
- package/scrollview.component.d.ts +29 -66
- package/scrollview.module.d.ts +7 -19
package/change-event-args.d.ts
CHANGED
|
@@ -3,16 +3,17 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
7
|
-
*
|
|
6
|
+
* Represents the arguments for the `itemChanged` event.
|
|
7
|
+
*
|
|
8
|
+
* The `itemChanged` event fires when the current item in the ScrollView changes.
|
|
8
9
|
*/
|
|
9
10
|
export interface ItemChangedEvent {
|
|
10
11
|
/**
|
|
11
|
-
*
|
|
12
|
+
* Specifies the changed item.
|
|
12
13
|
*/
|
|
13
14
|
item: any;
|
|
14
15
|
/**
|
|
15
|
-
*
|
|
16
|
+
* Specifies the index of the changed item.
|
|
16
17
|
*/
|
|
17
18
|
index: number;
|
|
18
19
|
}
|
package/directives.d.ts
CHANGED
|
@@ -5,6 +5,25 @@
|
|
|
5
5
|
import { CustomMessagesComponent } from "./localization/custom-messages.component";
|
|
6
6
|
import { ScrollViewComponent } from "./scrollview.component";
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* Use the `KENDO_SCROLLVIEW` utility array to add all `@progress/kendo-angular-scrollview` related components and directives to 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
|
+
* ```
|
|
9
28
|
*/
|
|
10
29
|
export declare const KENDO_SCROLLVIEW: readonly [typeof ScrollViewComponent, typeof CustomMessagesComponent];
|
package/esm2022/directives.mjs
CHANGED
|
@@ -5,7 +5,26 @@
|
|
|
5
5
|
import { CustomMessagesComponent } from "./localization/custom-messages.component";
|
|
6
6
|
import { ScrollViewComponent } from "./scrollview.component";
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* Use the `KENDO_SCROLLVIEW` utility array to add all `@progress/kendo-angular-scrollview` related components and directives to 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
|
+
* ```
|
|
9
28
|
*/
|
|
10
29
|
export const KENDO_SCROLLVIEW = [
|
|
11
30
|
ScrollViewComponent,
|
|
@@ -8,7 +8,9 @@ import { ScrollViewMessages } from './messages';
|
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
11
|
+
* Represents the custom messages component of the ScrollView.
|
|
12
|
+
*
|
|
13
|
+
* Use this component to override default messages for the ScrollView
|
|
12
14
|
* ([see example](slug:rtl_scrollview#toc-custom-messages)).
|
|
13
15
|
*/
|
|
14
16
|
export class CustomMessagesComponent extends ScrollViewMessages {
|
|
@@ -10,8 +10,8 @@ import * as i0 from "@angular/core";
|
|
|
10
10
|
*/
|
|
11
11
|
export class ScrollViewMessages extends ComponentMessages {
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
14
|
-
*
|
|
13
|
+
* Sets the label for the buttons in the ScrollView pager. The default label pattern is `'Item {itemIndex}'`.
|
|
14
|
+
* When the current item is 1, the default label is `'Item 1'`.
|
|
15
15
|
*/
|
|
16
16
|
pagerButtonLabel;
|
|
17
17
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollViewMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '19.1.2-develop.
|
|
13
|
+
publishDate: 1750152812,
|
|
14
|
+
version: '19.1.2-develop.3',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
16
16
|
};
|
|
@@ -23,56 +23,18 @@ import * as i0 from "@angular/core";
|
|
|
23
23
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
24
24
|
let idx = 0;
|
|
25
25
|
/**
|
|
26
|
-
* Represents the [Kendo UI ScrollView component for Angular](
|
|
26
|
+
* Represents the [Kendo UI ScrollView component for Angular](slug:overview_scrollview).
|
|
27
27
|
*
|
|
28
|
-
*
|
|
29
|
-
* ```ts
|
|
30
|
-
*
|
|
31
|
-
* _@Component({
|
|
32
|
-
* selector: 'my-app',
|
|
33
|
-
* template: `
|
|
34
|
-
* <kendo-scrollview
|
|
35
|
-
* [data]="items"
|
|
36
|
-
* [width]="width"
|
|
37
|
-
* [height]="height"
|
|
38
|
-
* [endless]="endless"
|
|
39
|
-
* [pageable]="pageable">
|
|
40
|
-
* <ng-template let-item="item">
|
|
41
|
-
* <h2 class="demo-title">{{item.title}}</h2>
|
|
42
|
-
* <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
|
|
43
|
-
* </ng-template>
|
|
44
|
-
* </kendo-scrollview>
|
|
45
|
-
* `,
|
|
46
|
-
* styles: [`
|
|
47
|
-
* .k-scrollview-wrap {
|
|
48
|
-
* margin: 0 auto;
|
|
49
|
-
* }
|
|
50
|
-
* .demo-title {
|
|
51
|
-
* position: absolute;
|
|
52
|
-
* top: 0;
|
|
53
|
-
* left: 0;
|
|
54
|
-
* right: 0;
|
|
55
|
-
* margin: 0;
|
|
56
|
-
* padding: 15px;
|
|
57
|
-
* color: #fff;
|
|
58
|
-
* background-color: rgba(0,0,0,.4);
|
|
59
|
-
* text-align: center;
|
|
60
|
-
* font-size: 24px;
|
|
61
|
-
* }
|
|
62
|
-
* `]
|
|
63
|
-
* })
|
|
28
|
+
* Use the ScrollViewComponent to display a horizontally scrollable list of items. You can customize the content and navigation.
|
|
64
29
|
*
|
|
65
|
-
*
|
|
66
|
-
*
|
|
67
|
-
*
|
|
68
|
-
*
|
|
69
|
-
*
|
|
70
|
-
*
|
|
71
|
-
*
|
|
72
|
-
*
|
|
73
|
-
* { title: 'Sky', url: 'https://bit.ly/2cJl3Cx' }
|
|
74
|
-
* ];
|
|
75
|
-
* }
|
|
30
|
+
* @example
|
|
31
|
+
* ```html
|
|
32
|
+
* <kendo-scrollview [data]="items" [width]="width" [height]="height">
|
|
33
|
+
* <ng-template let-item="item">
|
|
34
|
+
* <h2>{{item.title}}</h2>
|
|
35
|
+
* <img width="100%" [src]="item.url" />
|
|
36
|
+
* </ng-template>
|
|
37
|
+
* </kendo-scrollview>
|
|
76
38
|
* ```
|
|
77
39
|
*/
|
|
78
40
|
export class ScrollViewComponent {
|
|
@@ -89,11 +51,13 @@ export class ScrollViewComponent {
|
|
|
89
51
|
*/
|
|
90
52
|
chevronRightIcon = chevronRightIcon;
|
|
91
53
|
/**
|
|
92
|
-
* Provides the data source for the ScrollView ([see example](
|
|
54
|
+
* Provides the data source for the ScrollView ([see example](slug:datasources_scrollview)).
|
|
55
|
+
* @default []
|
|
93
56
|
*/
|
|
94
57
|
data = [];
|
|
95
58
|
/**
|
|
96
|
-
*
|
|
59
|
+
* Sets the current item index ([see example](slug:activeitems_scrollview)).
|
|
60
|
+
* @default 0
|
|
97
61
|
*/
|
|
98
62
|
set activeIndex(value) {
|
|
99
63
|
this.index = this._activeIndex = value;
|
|
@@ -102,39 +66,38 @@ export class ScrollViewComponent {
|
|
|
102
66
|
return this._activeIndex;
|
|
103
67
|
}
|
|
104
68
|
/**
|
|
105
|
-
* Sets the width of the ScrollView ([see example](
|
|
106
|
-
* By default, the width is not set and
|
|
69
|
+
* Sets the width of the ScrollView ([see example](slug:dimensions_scrollview)).
|
|
70
|
+
* By default, the width is not set and must be explicitly defined.
|
|
107
71
|
*/
|
|
108
72
|
width;
|
|
109
73
|
/**
|
|
110
|
-
* Sets the height of the ScrollView ([see example](
|
|
111
|
-
* By default, the height is not set and
|
|
74
|
+
* Sets the height of the ScrollView ([see example](slug:dimensions_scrollview)).
|
|
75
|
+
* By default, the height is not set and must be explicitly defined.
|
|
112
76
|
*/
|
|
113
77
|
height;
|
|
114
78
|
/**
|
|
115
|
-
* Enables or disables
|
|
116
|
-
*
|
|
117
|
-
* and the endless scrolling mode is disabled.
|
|
79
|
+
* Enables or disables endless scrolling mode, where items loop endlessly ([see example](slug:endlessscrolling_scrollview)).
|
|
80
|
+
* @default false
|
|
118
81
|
*/
|
|
119
82
|
endless = false;
|
|
120
83
|
/**
|
|
121
|
-
* Sets
|
|
122
|
-
*
|
|
84
|
+
* Sets the pager overlay style to `dark`, `light`, or `none`.
|
|
85
|
+
* @default 'none'
|
|
123
86
|
*/
|
|
124
87
|
pagerOverlay = 'none';
|
|
125
88
|
/**
|
|
126
|
-
* Enables or disables
|
|
127
|
-
*
|
|
89
|
+
* Enables or disables built-in animations ([see example](slug:animations_scrollview)).
|
|
90
|
+
* @default true
|
|
128
91
|
*/
|
|
129
92
|
animate = true;
|
|
130
93
|
/**
|
|
131
|
-
* Enables or disables the built-in pager ([see example](
|
|
132
|
-
*
|
|
94
|
+
* Enables or disables the built-in pager ([see example](slug:paging_scrollview)).
|
|
95
|
+
* @default false
|
|
133
96
|
*/
|
|
134
97
|
pageable = false;
|
|
135
98
|
/**
|
|
136
|
-
* Enables or disables the built-in navigation arrows ([see example](
|
|
137
|
-
*
|
|
99
|
+
* Enables or disables the built-in navigation arrows ([see example](slug:arrows_scrollview)).
|
|
100
|
+
* @default false
|
|
138
101
|
*/
|
|
139
102
|
arrows = false;
|
|
140
103
|
/**
|
|
@@ -142,7 +105,7 @@ export class ScrollViewComponent {
|
|
|
142
105
|
*/
|
|
143
106
|
itemChanged = new EventEmitter();
|
|
144
107
|
/**
|
|
145
|
-
* Fires after the activeIndex has changed. Allows for two-way binding of the activeIndex property.
|
|
108
|
+
* Fires after the `activeIndex` has changed. Allows for two-way binding of the `activeIndex` property.
|
|
146
109
|
*/
|
|
147
110
|
activeIndexChange = new EventEmitter();
|
|
148
111
|
itemTemplateRef;
|
|
@@ -14,30 +14,18 @@ import * as i2 from "./localization/custom-messages.component";
|
|
|
14
14
|
* definition for the ScrollView component.
|
|
15
15
|
*
|
|
16
16
|
* @example
|
|
17
|
-
*
|
|
18
|
-
* ```ts-no-run
|
|
19
|
-
* // Import the ScrollView module
|
|
20
|
-
* import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
|
|
21
|
-
*
|
|
22
|
-
* // The browser platform with a compiler
|
|
23
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
24
|
-
*
|
|
17
|
+
* ```typescript
|
|
25
18
|
* import { NgModule } from '@angular/core';
|
|
26
|
-
*
|
|
27
|
-
*
|
|
19
|
+
* import { BrowserModule } from '@angular/platform-browser';
|
|
20
|
+
* import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
|
|
28
21
|
* import { AppComponent } from './app.component';
|
|
29
22
|
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
* bootstrap: [AppComponent]
|
|
23
|
+
* @NgModule({
|
|
24
|
+
* declarations: [AppComponent],
|
|
25
|
+
* imports: [BrowserModule, ScrollViewModule],
|
|
26
|
+
* bootstrap: [AppComponent]
|
|
35
27
|
* })
|
|
36
28
|
* export class AppModule {}
|
|
37
|
-
*
|
|
38
|
-
* // Compile and launch the module
|
|
39
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
40
|
-
*
|
|
41
29
|
* ```
|
|
42
30
|
*/
|
|
43
31
|
export class ScrollViewModule {
|
|
@@ -31,8 +31,8 @@ const packageMetadata = {
|
|
|
31
31
|
productName: 'Kendo UI for Angular',
|
|
32
32
|
productCode: 'KENDOUIANGULAR',
|
|
33
33
|
productCodes: ['KENDOUIANGULAR'],
|
|
34
|
-
publishDate:
|
|
35
|
-
version: '19.1.2-develop.
|
|
34
|
+
publishDate: 1750152812,
|
|
35
|
+
version: '19.1.2-develop.3',
|
|
36
36
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
37
37
|
};
|
|
38
38
|
|
|
@@ -191,8 +191,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
191
191
|
*/
|
|
192
192
|
class ScrollViewMessages extends ComponentMessages {
|
|
193
193
|
/**
|
|
194
|
-
*
|
|
195
|
-
*
|
|
194
|
+
* Sets the label for the buttons in the ScrollView pager. The default label pattern is `'Item {itemIndex}'`.
|
|
195
|
+
* When the current item is 1, the default label is `'Item 1'`.
|
|
196
196
|
*/
|
|
197
197
|
pagerButtonLabel;
|
|
198
198
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollViewMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -244,56 +244,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
244
244
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
245
245
|
let idx = 0;
|
|
246
246
|
/**
|
|
247
|
-
* Represents the [Kendo UI ScrollView component for Angular](
|
|
247
|
+
* Represents the [Kendo UI ScrollView component for Angular](slug:overview_scrollview).
|
|
248
248
|
*
|
|
249
|
-
*
|
|
250
|
-
* ```ts
|
|
251
|
-
*
|
|
252
|
-
* _@Component({
|
|
253
|
-
* selector: 'my-app',
|
|
254
|
-
* template: `
|
|
255
|
-
* <kendo-scrollview
|
|
256
|
-
* [data]="items"
|
|
257
|
-
* [width]="width"
|
|
258
|
-
* [height]="height"
|
|
259
|
-
* [endless]="endless"
|
|
260
|
-
* [pageable]="pageable">
|
|
261
|
-
* <ng-template let-item="item">
|
|
262
|
-
* <h2 class="demo-title">{{item.title}}</h2>
|
|
263
|
-
* <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
|
|
264
|
-
* </ng-template>
|
|
265
|
-
* </kendo-scrollview>
|
|
266
|
-
* `,
|
|
267
|
-
* styles: [`
|
|
268
|
-
* .k-scrollview-wrap {
|
|
269
|
-
* margin: 0 auto;
|
|
270
|
-
* }
|
|
271
|
-
* .demo-title {
|
|
272
|
-
* position: absolute;
|
|
273
|
-
* top: 0;
|
|
274
|
-
* left: 0;
|
|
275
|
-
* right: 0;
|
|
276
|
-
* margin: 0;
|
|
277
|
-
* padding: 15px;
|
|
278
|
-
* color: #fff;
|
|
279
|
-
* background-color: rgba(0,0,0,.4);
|
|
280
|
-
* text-align: center;
|
|
281
|
-
* font-size: 24px;
|
|
282
|
-
* }
|
|
283
|
-
* `]
|
|
284
|
-
* })
|
|
249
|
+
* Use the ScrollViewComponent to display a horizontally scrollable list of items. You can customize the content and navigation.
|
|
285
250
|
*
|
|
286
|
-
*
|
|
287
|
-
*
|
|
288
|
-
*
|
|
289
|
-
*
|
|
290
|
-
*
|
|
291
|
-
*
|
|
292
|
-
*
|
|
293
|
-
*
|
|
294
|
-
* { title: 'Sky', url: 'https://bit.ly/2cJl3Cx' }
|
|
295
|
-
* ];
|
|
296
|
-
* }
|
|
251
|
+
* @example
|
|
252
|
+
* ```html
|
|
253
|
+
* <kendo-scrollview [data]="items" [width]="width" [height]="height">
|
|
254
|
+
* <ng-template let-item="item">
|
|
255
|
+
* <h2>{{item.title}}</h2>
|
|
256
|
+
* <img width="100%" [src]="item.url" />
|
|
257
|
+
* </ng-template>
|
|
258
|
+
* </kendo-scrollview>
|
|
297
259
|
* ```
|
|
298
260
|
*/
|
|
299
261
|
class ScrollViewComponent {
|
|
@@ -310,11 +272,13 @@ class ScrollViewComponent {
|
|
|
310
272
|
*/
|
|
311
273
|
chevronRightIcon = chevronRightIcon;
|
|
312
274
|
/**
|
|
313
|
-
* Provides the data source for the ScrollView ([see example](
|
|
275
|
+
* Provides the data source for the ScrollView ([see example](slug:datasources_scrollview)).
|
|
276
|
+
* @default []
|
|
314
277
|
*/
|
|
315
278
|
data = [];
|
|
316
279
|
/**
|
|
317
|
-
*
|
|
280
|
+
* Sets the current item index ([see example](slug:activeitems_scrollview)).
|
|
281
|
+
* @default 0
|
|
318
282
|
*/
|
|
319
283
|
set activeIndex(value) {
|
|
320
284
|
this.index = this._activeIndex = value;
|
|
@@ -323,39 +287,38 @@ class ScrollViewComponent {
|
|
|
323
287
|
return this._activeIndex;
|
|
324
288
|
}
|
|
325
289
|
/**
|
|
326
|
-
* Sets the width of the ScrollView ([see example](
|
|
327
|
-
* By default, the width is not set and
|
|
290
|
+
* Sets the width of the ScrollView ([see example](slug:dimensions_scrollview)).
|
|
291
|
+
* By default, the width is not set and must be explicitly defined.
|
|
328
292
|
*/
|
|
329
293
|
width;
|
|
330
294
|
/**
|
|
331
|
-
* Sets the height of the ScrollView ([see example](
|
|
332
|
-
* By default, the height is not set and
|
|
295
|
+
* Sets the height of the ScrollView ([see example](slug:dimensions_scrollview)).
|
|
296
|
+
* By default, the height is not set and must be explicitly defined.
|
|
333
297
|
*/
|
|
334
298
|
height;
|
|
335
299
|
/**
|
|
336
|
-
* Enables or disables
|
|
337
|
-
*
|
|
338
|
-
* and the endless scrolling mode is disabled.
|
|
300
|
+
* Enables or disables endless scrolling mode, where items loop endlessly ([see example](slug:endlessscrolling_scrollview)).
|
|
301
|
+
* @default false
|
|
339
302
|
*/
|
|
340
303
|
endless = false;
|
|
341
304
|
/**
|
|
342
|
-
* Sets
|
|
343
|
-
*
|
|
305
|
+
* Sets the pager overlay style to `dark`, `light`, or `none`.
|
|
306
|
+
* @default 'none'
|
|
344
307
|
*/
|
|
345
308
|
pagerOverlay = 'none';
|
|
346
309
|
/**
|
|
347
|
-
* Enables or disables
|
|
348
|
-
*
|
|
310
|
+
* Enables or disables built-in animations ([see example](slug:animations_scrollview)).
|
|
311
|
+
* @default true
|
|
349
312
|
*/
|
|
350
313
|
animate = true;
|
|
351
314
|
/**
|
|
352
|
-
* Enables or disables the built-in pager ([see example](
|
|
353
|
-
*
|
|
315
|
+
* Enables or disables the built-in pager ([see example](slug:paging_scrollview)).
|
|
316
|
+
* @default false
|
|
354
317
|
*/
|
|
355
318
|
pageable = false;
|
|
356
319
|
/**
|
|
357
|
-
* Enables or disables the built-in navigation arrows ([see example](
|
|
358
|
-
*
|
|
320
|
+
* Enables or disables the built-in navigation arrows ([see example](slug:arrows_scrollview)).
|
|
321
|
+
* @default false
|
|
359
322
|
*/
|
|
360
323
|
arrows = false;
|
|
361
324
|
/**
|
|
@@ -363,7 +326,7 @@ class ScrollViewComponent {
|
|
|
363
326
|
*/
|
|
364
327
|
itemChanged = new EventEmitter();
|
|
365
328
|
/**
|
|
366
|
-
* Fires after the activeIndex has changed. Allows for two-way binding of the activeIndex property.
|
|
329
|
+
* Fires after the `activeIndex` has changed. Allows for two-way binding of the `activeIndex` property.
|
|
367
330
|
*/
|
|
368
331
|
activeIndexChange = new EventEmitter();
|
|
369
332
|
itemTemplateRef;
|
|
@@ -948,7 +911,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
948
911
|
}] } });
|
|
949
912
|
|
|
950
913
|
/**
|
|
951
|
-
*
|
|
914
|
+
* Represents the custom messages component of the ScrollView.
|
|
915
|
+
*
|
|
916
|
+
* Use this component to override default messages for the ScrollView
|
|
952
917
|
* ([see example](slug:rtl_scrollview#toc-custom-messages)).
|
|
953
918
|
*/
|
|
954
919
|
class CustomMessagesComponent extends ScrollViewMessages {
|
|
@@ -984,7 +949,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
984
949
|
}], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
|
|
985
950
|
|
|
986
951
|
/**
|
|
987
|
-
*
|
|
952
|
+
* Use the `KENDO_SCROLLVIEW` utility array to add all `@progress/kendo-angular-scrollview` related components and directives to a standalone Angular component.
|
|
953
|
+
*
|
|
954
|
+
* @example
|
|
955
|
+
* ```typescript
|
|
956
|
+
* import { Component } from '@angular/core';
|
|
957
|
+
* import { KENDO_SCROLLVIEW } from '@progress/kendo-angular-scrollview';
|
|
958
|
+
*
|
|
959
|
+
* @Component({
|
|
960
|
+
* standalone: true,
|
|
961
|
+
* imports: [KENDO_SCROLLVIEW],
|
|
962
|
+
* template: `<kendo-scrollview [data]="items"></kendo-scrollview>`
|
|
963
|
+
* })
|
|
964
|
+
* export class AppComponent {
|
|
965
|
+
* public items = [
|
|
966
|
+
* { title: 'Flower' },
|
|
967
|
+
* { title: 'Mountain' },
|
|
968
|
+
* { title: 'Sky' }
|
|
969
|
+
* ];
|
|
970
|
+
* }
|
|
971
|
+
* ```
|
|
988
972
|
*/
|
|
989
973
|
const KENDO_SCROLLVIEW = [
|
|
990
974
|
ScrollViewComponent,
|
|
@@ -997,30 +981,18 @@ const KENDO_SCROLLVIEW = [
|
|
|
997
981
|
* definition for the ScrollView component.
|
|
998
982
|
*
|
|
999
983
|
* @example
|
|
1000
|
-
*
|
|
1001
|
-
* ```ts-no-run
|
|
1002
|
-
* // Import the ScrollView module
|
|
1003
|
-
* import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
|
|
1004
|
-
*
|
|
1005
|
-
* // The browser platform with a compiler
|
|
1006
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
1007
|
-
*
|
|
984
|
+
* ```typescript
|
|
1008
985
|
* import { NgModule } from '@angular/core';
|
|
1009
|
-
*
|
|
1010
|
-
*
|
|
986
|
+
* import { BrowserModule } from '@angular/platform-browser';
|
|
987
|
+
* import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
|
|
1011
988
|
* import { AppComponent } from './app.component';
|
|
1012
989
|
*
|
|
1013
|
-
*
|
|
1014
|
-
*
|
|
1015
|
-
*
|
|
1016
|
-
*
|
|
1017
|
-
* bootstrap: [AppComponent]
|
|
990
|
+
* @NgModule({
|
|
991
|
+
* declarations: [AppComponent],
|
|
992
|
+
* imports: [BrowserModule, ScrollViewModule],
|
|
993
|
+
* bootstrap: [AppComponent]
|
|
1018
994
|
* })
|
|
1019
995
|
* export class AppModule {}
|
|
1020
|
-
*
|
|
1021
|
-
* // Compile and launch the module
|
|
1022
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
1023
|
-
*
|
|
1024
996
|
* ```
|
|
1025
997
|
*/
|
|
1026
998
|
class ScrollViewModule {
|
|
@@ -6,7 +6,9 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
|
6
6
|
import { ScrollViewMessages } from './messages';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Represents the custom messages component of the ScrollView.
|
|
10
|
+
*
|
|
11
|
+
* Use this component to override default messages for the ScrollView
|
|
10
12
|
* ([see example](slug:rtl_scrollview#toc-custom-messages)).
|
|
11
13
|
*/
|
|
12
14
|
export declare class CustomMessagesComponent extends ScrollViewMessages {
|
|
@@ -9,8 +9,8 @@ import * as i0 from "@angular/core";
|
|
|
9
9
|
*/
|
|
10
10
|
export declare class ScrollViewMessages extends ComponentMessages {
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
13
|
-
*
|
|
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
14
|
*/
|
|
15
15
|
pagerButtonLabel: string;
|
|
16
16
|
static ɵfac: i0.ɵɵFactoryDeclaration<ScrollViewMessages, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-scrollview",
|
|
3
|
-
"version": "19.1.2-develop.
|
|
3
|
+
"version": "19.1.2-develop.3",
|
|
4
4
|
"description": "A ScrollView Component for Angular",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"package": {
|
|
20
20
|
"productName": "Kendo UI for Angular",
|
|
21
21
|
"productCode": "KENDOUIANGULAR",
|
|
22
|
-
"publishDate":
|
|
22
|
+
"publishDate": 1750152812,
|
|
23
23
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
|
|
24
24
|
}
|
|
25
25
|
},
|
|
@@ -29,14 +29,14 @@
|
|
|
29
29
|
"@angular/core": "16 - 20",
|
|
30
30
|
"@angular/platform-browser": "16 - 20",
|
|
31
31
|
"@progress/kendo-licensing": "^1.5.0",
|
|
32
|
-
"@progress/kendo-angular-common": "19.1.2-develop.
|
|
33
|
-
"@progress/kendo-angular-l10n": "19.1.2-develop.
|
|
34
|
-
"@progress/kendo-angular-icons": "19.1.2-develop.
|
|
32
|
+
"@progress/kendo-angular-common": "19.1.2-develop.3",
|
|
33
|
+
"@progress/kendo-angular-l10n": "19.1.2-develop.3",
|
|
34
|
+
"@progress/kendo-angular-icons": "19.1.2-develop.3",
|
|
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": "19.1.2-develop.
|
|
39
|
+
"@progress/kendo-angular-schematics": "19.1.2-develop.3"
|
|
40
40
|
},
|
|
41
41
|
"schematics": "./schematics/collection.json",
|
|
42
42
|
"module": "fesm2022/progress-kendo-angular-scrollview.mjs",
|
|
@@ -12,56 +12,18 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
|
12
12
|
import { SVGIcon } from '@progress/kendo-svg-icons';
|
|
13
13
|
import * as i0 from "@angular/core";
|
|
14
14
|
/**
|
|
15
|
-
* Represents the [Kendo UI ScrollView component for Angular](
|
|
15
|
+
* Represents the [Kendo UI ScrollView component for Angular](slug:overview_scrollview).
|
|
16
16
|
*
|
|
17
|
-
*
|
|
18
|
-
* ```ts
|
|
19
|
-
*
|
|
20
|
-
* _@Component({
|
|
21
|
-
* selector: 'my-app',
|
|
22
|
-
* template: `
|
|
23
|
-
* <kendo-scrollview
|
|
24
|
-
* [data]="items"
|
|
25
|
-
* [width]="width"
|
|
26
|
-
* [height]="height"
|
|
27
|
-
* [endless]="endless"
|
|
28
|
-
* [pageable]="pageable">
|
|
29
|
-
* <ng-template let-item="item">
|
|
30
|
-
* <h2 class="demo-title">{{item.title}}</h2>
|
|
31
|
-
* <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
|
|
32
|
-
* </ng-template>
|
|
33
|
-
* </kendo-scrollview>
|
|
34
|
-
* `,
|
|
35
|
-
* styles: [`
|
|
36
|
-
* .k-scrollview-wrap {
|
|
37
|
-
* margin: 0 auto;
|
|
38
|
-
* }
|
|
39
|
-
* .demo-title {
|
|
40
|
-
* position: absolute;
|
|
41
|
-
* top: 0;
|
|
42
|
-
* left: 0;
|
|
43
|
-
* right: 0;
|
|
44
|
-
* margin: 0;
|
|
45
|
-
* padding: 15px;
|
|
46
|
-
* color: #fff;
|
|
47
|
-
* background-color: rgba(0,0,0,.4);
|
|
48
|
-
* text-align: center;
|
|
49
|
-
* font-size: 24px;
|
|
50
|
-
* }
|
|
51
|
-
* `]
|
|
52
|
-
* })
|
|
17
|
+
* Use the ScrollViewComponent to display a horizontally scrollable list of items. You can customize the content and navigation.
|
|
53
18
|
*
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
*
|
|
59
|
-
*
|
|
60
|
-
*
|
|
61
|
-
*
|
|
62
|
-
* { title: 'Sky', url: 'https://bit.ly/2cJl3Cx' }
|
|
63
|
-
* ];
|
|
64
|
-
* }
|
|
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>
|
|
65
27
|
* ```
|
|
66
28
|
*/
|
|
67
29
|
export declare class ScrollViewComponent implements OnChanges, OnDestroy {
|
|
@@ -78,48 +40,49 @@ export declare class ScrollViewComponent implements OnChanges, OnDestroy {
|
|
|
78
40
|
*/
|
|
79
41
|
chevronRightIcon: SVGIcon;
|
|
80
42
|
/**
|
|
81
|
-
* Provides the data source for the ScrollView ([see example](
|
|
43
|
+
* Provides the data source for the ScrollView ([see example](slug:datasources_scrollview)).
|
|
44
|
+
* @default []
|
|
82
45
|
*/
|
|
83
46
|
data: Array<any>;
|
|
84
47
|
/**
|
|
85
|
-
*
|
|
48
|
+
* Sets the current item index ([see example](slug:activeitems_scrollview)).
|
|
49
|
+
* @default 0
|
|
86
50
|
*/
|
|
87
51
|
set activeIndex(value: number);
|
|
88
52
|
get activeIndex(): number;
|
|
89
53
|
/**
|
|
90
|
-
* Sets the width of the ScrollView ([see example](
|
|
91
|
-
* By default, the width is not set and
|
|
54
|
+
* Sets the width of the ScrollView ([see example](slug:dimensions_scrollview)).
|
|
55
|
+
* By default, the width is not set and must be explicitly defined.
|
|
92
56
|
*/
|
|
93
57
|
width: string;
|
|
94
58
|
/**
|
|
95
|
-
* Sets the height of the ScrollView ([see example](
|
|
96
|
-
* By default, the height is not set and
|
|
59
|
+
* Sets the height of the ScrollView ([see example](slug:dimensions_scrollview)).
|
|
60
|
+
* By default, the height is not set and must be explicitly defined.
|
|
97
61
|
*/
|
|
98
62
|
height: string;
|
|
99
63
|
/**
|
|
100
|
-
* Enables or disables
|
|
101
|
-
*
|
|
102
|
-
* and the endless scrolling mode is disabled.
|
|
64
|
+
* Enables or disables endless scrolling mode, where items loop endlessly ([see example](slug:endlessscrolling_scrollview)).
|
|
65
|
+
* @default false
|
|
103
66
|
*/
|
|
104
67
|
endless: boolean;
|
|
105
68
|
/**
|
|
106
|
-
* Sets
|
|
107
|
-
*
|
|
69
|
+
* Sets the pager overlay style to `dark`, `light`, or `none`.
|
|
70
|
+
* @default 'none'
|
|
108
71
|
*/
|
|
109
72
|
pagerOverlay: ScrollViewPagerOverlay;
|
|
110
73
|
/**
|
|
111
|
-
* Enables or disables
|
|
112
|
-
*
|
|
74
|
+
* Enables or disables built-in animations ([see example](slug:animations_scrollview)).
|
|
75
|
+
* @default true
|
|
113
76
|
*/
|
|
114
77
|
animate: boolean;
|
|
115
78
|
/**
|
|
116
|
-
* Enables or disables the built-in pager ([see example](
|
|
117
|
-
*
|
|
79
|
+
* Enables or disables the built-in pager ([see example](slug:paging_scrollview)).
|
|
80
|
+
* @default false
|
|
118
81
|
*/
|
|
119
82
|
pageable: boolean;
|
|
120
83
|
/**
|
|
121
|
-
* Enables or disables the built-in navigation arrows ([see example](
|
|
122
|
-
*
|
|
84
|
+
* Enables or disables the built-in navigation arrows ([see example](slug:arrows_scrollview)).
|
|
85
|
+
* @default false
|
|
123
86
|
*/
|
|
124
87
|
arrows: boolean;
|
|
125
88
|
/**
|
|
@@ -127,7 +90,7 @@ export declare class ScrollViewComponent implements OnChanges, OnDestroy {
|
|
|
127
90
|
*/
|
|
128
91
|
itemChanged: EventEmitter<ItemChangedEvent>;
|
|
129
92
|
/**
|
|
130
|
-
* Fires after the activeIndex has changed. Allows for two-way binding of the activeIndex property.
|
|
93
|
+
* Fires after the `activeIndex` has changed. Allows for two-way binding of the `activeIndex` property.
|
|
131
94
|
*/
|
|
132
95
|
activeIndexChange: EventEmitter<number>;
|
|
133
96
|
itemTemplateRef: TemplateRef<any>;
|
package/scrollview.module.d.ts
CHANGED
|
@@ -10,30 +10,18 @@ import * as i2 from "./localization/custom-messages.component";
|
|
|
10
10
|
* definition for the ScrollView component.
|
|
11
11
|
*
|
|
12
12
|
* @example
|
|
13
|
-
*
|
|
14
|
-
* ```ts-no-run
|
|
15
|
-
* // Import the ScrollView module
|
|
16
|
-
* import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
|
|
17
|
-
*
|
|
18
|
-
* // The browser platform with a compiler
|
|
19
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
20
|
-
*
|
|
13
|
+
* ```typescript
|
|
21
14
|
* import { NgModule } from '@angular/core';
|
|
22
|
-
*
|
|
23
|
-
*
|
|
15
|
+
* import { BrowserModule } from '@angular/platform-browser';
|
|
16
|
+
* import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
|
|
24
17
|
* import { AppComponent } from './app.component';
|
|
25
18
|
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
* bootstrap: [AppComponent]
|
|
19
|
+
* @NgModule({
|
|
20
|
+
* declarations: [AppComponent],
|
|
21
|
+
* imports: [BrowserModule, ScrollViewModule],
|
|
22
|
+
* bootstrap: [AppComponent]
|
|
31
23
|
* })
|
|
32
24
|
* export class AppModule {}
|
|
33
|
-
*
|
|
34
|
-
* // Compile and launch the module
|
|
35
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
36
|
-
*
|
|
37
25
|
* ```
|
|
38
26
|
*/
|
|
39
27
|
export declare class ScrollViewModule {
|