@progress/kendo-angular-scrollview 11.4.0-develop.7 → 11.4.0-develop.9
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.
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-scrollview',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
13
|
-
version: '11.4.0-develop.
|
|
12
|
+
publishDate: 1678800085,
|
|
13
|
+
version: '11.4.0-develop.9',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
15
15
|
};
|
|
@@ -2,7 +2,10 @@
|
|
|
2
2
|
* Copyright © 2023 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
|
-
|
|
5
|
+
/* eslint-disable @typescript-eslint/no-inferrable-types */
|
|
6
|
+
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
7
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
8
|
+
import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, Output, TemplateRef, NgZone, ViewChild, Renderer2 } from '@angular/core';
|
|
6
9
|
import { animate, state, style, transition, trigger } from '@angular/animations';
|
|
7
10
|
import { Dir } from './enums';
|
|
8
11
|
import { Keys } from '@progress/kendo-angular-common';
|
|
@@ -11,12 +14,14 @@ import { packageMetadata } from './package-metadata';
|
|
|
11
14
|
import { DataCollection, DataResultIterator } from './data.collection';
|
|
12
15
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
13
16
|
import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
|
|
17
|
+
import { Subscription } from 'rxjs';
|
|
14
18
|
import * as i0 from "@angular/core";
|
|
15
19
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
16
20
|
import * as i2 from "@progress/kendo-angular-icons";
|
|
17
21
|
import * as i3 from "./scrollview-pager.component";
|
|
18
22
|
import * as i4 from "@progress/kendo-angular-common";
|
|
19
23
|
import * as i5 from "@angular/common";
|
|
24
|
+
let idx = 0;
|
|
20
25
|
/**
|
|
21
26
|
* Represents the [Kendo UI ScrollView component for Angular]({% slug overview_scrollview %}).
|
|
22
27
|
*
|
|
@@ -123,12 +128,15 @@ export class ScrollViewComponent {
|
|
|
123
128
|
*/
|
|
124
129
|
this.activeIndexChange = new EventEmitter();
|
|
125
130
|
this.scrollViewClass = true;
|
|
126
|
-
this.
|
|
131
|
+
this.scrollViewRole = 'application';
|
|
132
|
+
this.scrollViewRoleDescription = 'carousel';
|
|
133
|
+
this.tabIndex = 0;
|
|
127
134
|
this.ariaLive = 'assertive';
|
|
128
135
|
this.touchAction = 'pan-y pinch-zoom';
|
|
129
136
|
this.animationState = null;
|
|
130
137
|
this.view = new DataCollection(() => new DataResultIterator(this.data, this.activeIndex, this.endless, this.pageIndex, this.isRTL));
|
|
131
138
|
this.isDataSourceEmpty = false;
|
|
139
|
+
this.subs = new Subscription();
|
|
132
140
|
this._activeIndex = 0;
|
|
133
141
|
this.index = 0;
|
|
134
142
|
this.pageIndex = null;
|
|
@@ -158,29 +166,19 @@ export class ScrollViewComponent {
|
|
|
158
166
|
get direction() {
|
|
159
167
|
return this.localization.rtl ? 'rtl' : 'ltr';
|
|
160
168
|
}
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
if (e.keyCode === Keys.ArrowLeft) {
|
|
166
|
-
if (this.isRTL) {
|
|
167
|
-
this.next();
|
|
168
|
-
}
|
|
169
|
-
else {
|
|
170
|
-
this.prev();
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
if (e.keyCode === Keys.ArrowRight) {
|
|
174
|
-
if (this.isRTL) {
|
|
175
|
-
this.prev();
|
|
176
|
-
}
|
|
177
|
-
else {
|
|
178
|
-
this.next();
|
|
179
|
-
}
|
|
169
|
+
ngOnInit() {
|
|
170
|
+
this.subs.add(this.renderer.listen(this.element.nativeElement, 'keydown', event => this.keyDown(event)));
|
|
171
|
+
if (this.arrows) {
|
|
172
|
+
this.scrollviewId = `k-scrollview-wrap-${++idx}`;
|
|
180
173
|
}
|
|
181
174
|
}
|
|
175
|
+
ngOnDestroy() {
|
|
176
|
+
this.subs.unsubscribe();
|
|
177
|
+
}
|
|
182
178
|
ngOnChanges(_) {
|
|
183
|
-
|
|
179
|
+
if (this.data && this.data.length === 0) {
|
|
180
|
+
this.activeIndex = Math.max(Math.min(this.activeIndex, this.view.total - 1), 0);
|
|
181
|
+
}
|
|
184
182
|
}
|
|
185
183
|
/**
|
|
186
184
|
* Navigates the ScrollView to the previous item.
|
|
@@ -350,6 +348,44 @@ export class ScrollViewComponent {
|
|
|
350
348
|
const isEndReached = ((this.activeIndex === 0 && pastEnd) || (this.activeIndex === this.view.total - 1 && !pastEnd));
|
|
351
349
|
return !this.endless && isEndReached;
|
|
352
350
|
}
|
|
351
|
+
keyDown(e) {
|
|
352
|
+
const keyCode = e.keyCode;
|
|
353
|
+
if (keyCode === Keys.ArrowLeft) {
|
|
354
|
+
if (this.isRTL) {
|
|
355
|
+
this.next();
|
|
356
|
+
return;
|
|
357
|
+
}
|
|
358
|
+
this.prev();
|
|
359
|
+
}
|
|
360
|
+
else if (keyCode === Keys.ArrowRight) {
|
|
361
|
+
if (this.isRTL) {
|
|
362
|
+
this.prev();
|
|
363
|
+
return;
|
|
364
|
+
}
|
|
365
|
+
this.next();
|
|
366
|
+
}
|
|
367
|
+
if (this.arrows && keyCode === Keys.Space || keyCode === Keys.Enter) {
|
|
368
|
+
const prevButton = this.prevButton?.nativeElement;
|
|
369
|
+
const nextButton = this.nextButton?.nativeElement;
|
|
370
|
+
const activeElement = document.activeElement;
|
|
371
|
+
const isPrevButtonFocused = activeElement === prevButton;
|
|
372
|
+
const isNextButtonFocused = activeElement === nextButton;
|
|
373
|
+
if (isPrevButtonFocused) {
|
|
374
|
+
if (this.isRTL) {
|
|
375
|
+
this.next();
|
|
376
|
+
return;
|
|
377
|
+
}
|
|
378
|
+
this.prev();
|
|
379
|
+
}
|
|
380
|
+
else if (isNextButtonFocused) {
|
|
381
|
+
if (this.isRTL) {
|
|
382
|
+
this.prev();
|
|
383
|
+
return;
|
|
384
|
+
}
|
|
385
|
+
this.next();
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
}
|
|
353
389
|
navigate(direction) {
|
|
354
390
|
if (this.isDataSourceEmpty || this.animationState) {
|
|
355
391
|
return;
|
|
@@ -385,15 +421,17 @@ export class ScrollViewComponent {
|
|
|
385
421
|
}
|
|
386
422
|
}
|
|
387
423
|
ScrollViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
388
|
-
ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ScrollViewComponent, 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: {
|
|
424
|
+
ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ScrollViewComponent, 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: [
|
|
389
425
|
LocalizationService,
|
|
390
426
|
{
|
|
391
427
|
provide: L10N_PREFIX,
|
|
392
428
|
useValue: 'kendo.scrollview'
|
|
393
429
|
}
|
|
394
|
-
], queries: [{ propertyName: "itemTemplateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "itemWrapper", first: true, predicate: ["itemWrapper"], descendants: true }], exportAs: ["kendoScrollView"], usesOnChanges: true, ngImport: i0, template: `
|
|
430
|
+
], 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: `
|
|
395
431
|
<ul class='k-scrollview-wrap'
|
|
396
432
|
#itemWrapper
|
|
433
|
+
role="list"
|
|
434
|
+
[id]="scrollviewId"
|
|
397
435
|
[@animateTo]="animationState"
|
|
398
436
|
(@animateTo.done)="transitionEndHandler($event)"
|
|
399
437
|
kendoDraggable
|
|
@@ -403,6 +441,8 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
403
441
|
>
|
|
404
442
|
<li
|
|
405
443
|
*ngFor="let item of view;let i=index"
|
|
444
|
+
role="listitem"
|
|
445
|
+
aria-roledescription="slide"
|
|
406
446
|
[ngStyle]="inlineListItemStyles(i)"
|
|
407
447
|
[attr.aria-hidden]="i !== 1"
|
|
408
448
|
>
|
|
@@ -416,7 +456,11 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
416
456
|
[ngStyle]="{'height': height}"
|
|
417
457
|
*ngIf="!isDataSourceEmpty && (pageable||arrows)">
|
|
418
458
|
|
|
419
|
-
<
|
|
459
|
+
<span
|
|
460
|
+
#prevButton
|
|
461
|
+
class="k-scrollview-prev"
|
|
462
|
+
role="button"
|
|
463
|
+
[attr.aria-controls]="scrollviewId"
|
|
420
464
|
aria-label="previous"
|
|
421
465
|
*ngIf="arrows && displayLeftArrow()"
|
|
422
466
|
(click)="leftArrowClick()">
|
|
@@ -425,8 +469,12 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
425
469
|
[svgIcon]="chevronLeftIcon"
|
|
426
470
|
>
|
|
427
471
|
</kendo-icon-wrapper>
|
|
428
|
-
</
|
|
429
|
-
<
|
|
472
|
+
</span>
|
|
473
|
+
<span
|
|
474
|
+
#nextButton
|
|
475
|
+
class="k-scrollview-next"
|
|
476
|
+
role="button"
|
|
477
|
+
[attr.aria-controls]="scrollviewId"
|
|
430
478
|
aria-label="next"
|
|
431
479
|
*ngIf="arrows && displayRightArrow()"
|
|
432
480
|
(click)="rightArrowClick()">
|
|
@@ -435,7 +483,7 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
435
483
|
[svgIcon]="chevronRightIcon"
|
|
436
484
|
>
|
|
437
485
|
</kendo-icon-wrapper>
|
|
438
|
-
</
|
|
486
|
+
</span>
|
|
439
487
|
<kendo-scrollview-pager
|
|
440
488
|
class='k-scrollview-nav-wrap'
|
|
441
489
|
*ngIf="pageable"
|
|
@@ -444,6 +492,7 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
444
492
|
[activeIndex]="activeIndex">
|
|
445
493
|
</kendo-scrollview-pager>
|
|
446
494
|
</div>
|
|
495
|
+
<div class="k-sr-only" aria-live="polite"></div>
|
|
447
496
|
`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i3.ScrollViewPagerComponent, selector: "kendo-scrollview-pager", inputs: ["activeIndex", "data"], outputs: ["pagerIndexChange"] }], directives: [{ type: i4.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
448
497
|
trigger('animateTo', [
|
|
449
498
|
state('center, left, right', style({ transform: 'translateX(0)' })),
|
|
@@ -487,6 +536,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
487
536
|
template: `
|
|
488
537
|
<ul class='k-scrollview-wrap'
|
|
489
538
|
#itemWrapper
|
|
539
|
+
role="list"
|
|
540
|
+
[id]="scrollviewId"
|
|
490
541
|
[@animateTo]="animationState"
|
|
491
542
|
(@animateTo.done)="transitionEndHandler($event)"
|
|
492
543
|
kendoDraggable
|
|
@@ -496,6 +547,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
496
547
|
>
|
|
497
548
|
<li
|
|
498
549
|
*ngFor="let item of view;let i=index"
|
|
550
|
+
role="listitem"
|
|
551
|
+
aria-roledescription="slide"
|
|
499
552
|
[ngStyle]="inlineListItemStyles(i)"
|
|
500
553
|
[attr.aria-hidden]="i !== 1"
|
|
501
554
|
>
|
|
@@ -509,7 +562,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
509
562
|
[ngStyle]="{'height': height}"
|
|
510
563
|
*ngIf="!isDataSourceEmpty && (pageable||arrows)">
|
|
511
564
|
|
|
512
|
-
<
|
|
565
|
+
<span
|
|
566
|
+
#prevButton
|
|
567
|
+
class="k-scrollview-prev"
|
|
568
|
+
role="button"
|
|
569
|
+
[attr.aria-controls]="scrollviewId"
|
|
513
570
|
aria-label="previous"
|
|
514
571
|
*ngIf="arrows && displayLeftArrow()"
|
|
515
572
|
(click)="leftArrowClick()">
|
|
@@ -518,8 +575,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
518
575
|
[svgIcon]="chevronLeftIcon"
|
|
519
576
|
>
|
|
520
577
|
</kendo-icon-wrapper>
|
|
521
|
-
</
|
|
522
|
-
<
|
|
578
|
+
</span>
|
|
579
|
+
<span
|
|
580
|
+
#nextButton
|
|
581
|
+
class="k-scrollview-next"
|
|
582
|
+
role="button"
|
|
583
|
+
[attr.aria-controls]="scrollviewId"
|
|
523
584
|
aria-label="next"
|
|
524
585
|
*ngIf="arrows && displayRightArrow()"
|
|
525
586
|
(click)="rightArrowClick()">
|
|
@@ -528,7 +589,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
528
589
|
[svgIcon]="chevronRightIcon"
|
|
529
590
|
>
|
|
530
591
|
</kendo-icon-wrapper>
|
|
531
|
-
</
|
|
592
|
+
</span>
|
|
532
593
|
<kendo-scrollview-pager
|
|
533
594
|
class='k-scrollview-nav-wrap'
|
|
534
595
|
*ngIf="pageable"
|
|
@@ -537,6 +598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
537
598
|
[activeIndex]="activeIndex">
|
|
538
599
|
</kendo-scrollview-pager>
|
|
539
600
|
</div>
|
|
601
|
+
<div class="k-sr-only" aria-live="polite"></div>
|
|
540
602
|
`
|
|
541
603
|
}]
|
|
542
604
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
|
|
@@ -563,13 +625,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
563
625
|
type: Output
|
|
564
626
|
}], itemTemplateRef: [{
|
|
565
627
|
type: ContentChild,
|
|
566
|
-
args: [TemplateRef
|
|
628
|
+
args: [TemplateRef]
|
|
567
629
|
}], itemWrapper: [{
|
|
568
630
|
type: ViewChild,
|
|
569
|
-
args: ['itemWrapper'
|
|
631
|
+
args: ['itemWrapper']
|
|
632
|
+
}], prevButton: [{
|
|
633
|
+
type: ViewChild,
|
|
634
|
+
args: ['prevButton']
|
|
635
|
+
}], nextButton: [{
|
|
636
|
+
type: ViewChild,
|
|
637
|
+
args: ['nextButton']
|
|
570
638
|
}], scrollViewClass: [{
|
|
571
639
|
type: HostBinding,
|
|
572
640
|
args: ['class.k-scrollview']
|
|
641
|
+
}], scrollViewRole: [{
|
|
642
|
+
type: HostBinding,
|
|
643
|
+
args: ['attr.role']
|
|
644
|
+
}], scrollViewRoleDescription: [{
|
|
645
|
+
type: HostBinding,
|
|
646
|
+
args: ['attr.aria-roledescription']
|
|
573
647
|
}], scrollViewLightOverlayClass: [{
|
|
574
648
|
type: HostBinding,
|
|
575
649
|
args: ['class.k-scrollview-light']
|
|
@@ -594,7 +668,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
594
668
|
}], touchAction: [{
|
|
595
669
|
type: HostBinding,
|
|
596
670
|
args: ['style.touch-action']
|
|
597
|
-
}], keyDown: [{
|
|
598
|
-
type: HostListener,
|
|
599
|
-
args: ['keydown', ['$event']]
|
|
600
671
|
}] } });
|
|
@@ -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, Component, Input, Output, TemplateRef, ContentChild, ViewChild, HostBinding,
|
|
6
|
+
import { EventEmitter, Component, Input, Output, TemplateRef, ContentChild, ViewChild, HostBinding, NgModule } from '@angular/core';
|
|
7
7
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
8
8
|
import * as i4 from '@progress/kendo-angular-common';
|
|
9
9
|
import { Keys, DraggableModule } from '@progress/kendo-angular-common';
|
|
@@ -11,6 +11,7 @@ import { validatePackage } from '@progress/kendo-licensing';
|
|
|
11
11
|
import * as i1 from '@progress/kendo-angular-l10n';
|
|
12
12
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
13
13
|
import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
|
|
14
|
+
import { Subscription } from 'rxjs';
|
|
14
15
|
import * as i2 from '@progress/kendo-angular-icons';
|
|
15
16
|
import { IconsModule } from '@progress/kendo-angular-icons';
|
|
16
17
|
import * as i5 from '@angular/common';
|
|
@@ -32,8 +33,8 @@ const packageMetadata = {
|
|
|
32
33
|
name: '@progress/kendo-angular-scrollview',
|
|
33
34
|
productName: 'Kendo UI for Angular',
|
|
34
35
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
35
|
-
publishDate:
|
|
36
|
-
version: '11.4.0-develop.
|
|
36
|
+
publishDate: 1678800085,
|
|
37
|
+
version: '11.4.0-develop.9',
|
|
37
38
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
38
39
|
};
|
|
39
40
|
|
|
@@ -168,6 +169,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
168
169
|
type: Output
|
|
169
170
|
}] } });
|
|
170
171
|
|
|
172
|
+
/* eslint-disable @typescript-eslint/no-inferrable-types */
|
|
173
|
+
let idx = 0;
|
|
171
174
|
/**
|
|
172
175
|
* Represents the [Kendo UI ScrollView component for Angular]({% slug overview_scrollview %}).
|
|
173
176
|
*
|
|
@@ -274,12 +277,15 @@ class ScrollViewComponent {
|
|
|
274
277
|
*/
|
|
275
278
|
this.activeIndexChange = new EventEmitter();
|
|
276
279
|
this.scrollViewClass = true;
|
|
277
|
-
this.
|
|
280
|
+
this.scrollViewRole = 'application';
|
|
281
|
+
this.scrollViewRoleDescription = 'carousel';
|
|
282
|
+
this.tabIndex = 0;
|
|
278
283
|
this.ariaLive = 'assertive';
|
|
279
284
|
this.touchAction = 'pan-y pinch-zoom';
|
|
280
285
|
this.animationState = null;
|
|
281
286
|
this.view = new DataCollection(() => new DataResultIterator(this.data, this.activeIndex, this.endless, this.pageIndex, this.isRTL));
|
|
282
287
|
this.isDataSourceEmpty = false;
|
|
288
|
+
this.subs = new Subscription();
|
|
283
289
|
this._activeIndex = 0;
|
|
284
290
|
this.index = 0;
|
|
285
291
|
this.pageIndex = null;
|
|
@@ -309,29 +315,19 @@ class ScrollViewComponent {
|
|
|
309
315
|
get direction() {
|
|
310
316
|
return this.localization.rtl ? 'rtl' : 'ltr';
|
|
311
317
|
}
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
if (e.keyCode === Keys.ArrowLeft) {
|
|
317
|
-
if (this.isRTL) {
|
|
318
|
-
this.next();
|
|
319
|
-
}
|
|
320
|
-
else {
|
|
321
|
-
this.prev();
|
|
322
|
-
}
|
|
323
|
-
}
|
|
324
|
-
if (e.keyCode === Keys.ArrowRight) {
|
|
325
|
-
if (this.isRTL) {
|
|
326
|
-
this.prev();
|
|
327
|
-
}
|
|
328
|
-
else {
|
|
329
|
-
this.next();
|
|
330
|
-
}
|
|
318
|
+
ngOnInit() {
|
|
319
|
+
this.subs.add(this.renderer.listen(this.element.nativeElement, 'keydown', event => this.keyDown(event)));
|
|
320
|
+
if (this.arrows) {
|
|
321
|
+
this.scrollviewId = `k-scrollview-wrap-${++idx}`;
|
|
331
322
|
}
|
|
332
323
|
}
|
|
324
|
+
ngOnDestroy() {
|
|
325
|
+
this.subs.unsubscribe();
|
|
326
|
+
}
|
|
333
327
|
ngOnChanges(_) {
|
|
334
|
-
|
|
328
|
+
if (this.data && this.data.length === 0) {
|
|
329
|
+
this.activeIndex = Math.max(Math.min(this.activeIndex, this.view.total - 1), 0);
|
|
330
|
+
}
|
|
335
331
|
}
|
|
336
332
|
/**
|
|
337
333
|
* Navigates the ScrollView to the previous item.
|
|
@@ -501,6 +497,45 @@ class ScrollViewComponent {
|
|
|
501
497
|
const isEndReached = ((this.activeIndex === 0 && pastEnd) || (this.activeIndex === this.view.total - 1 && !pastEnd));
|
|
502
498
|
return !this.endless && isEndReached;
|
|
503
499
|
}
|
|
500
|
+
keyDown(e) {
|
|
501
|
+
var _a, _b;
|
|
502
|
+
const keyCode = e.keyCode;
|
|
503
|
+
if (keyCode === Keys.ArrowLeft) {
|
|
504
|
+
if (this.isRTL) {
|
|
505
|
+
this.next();
|
|
506
|
+
return;
|
|
507
|
+
}
|
|
508
|
+
this.prev();
|
|
509
|
+
}
|
|
510
|
+
else if (keyCode === Keys.ArrowRight) {
|
|
511
|
+
if (this.isRTL) {
|
|
512
|
+
this.prev();
|
|
513
|
+
return;
|
|
514
|
+
}
|
|
515
|
+
this.next();
|
|
516
|
+
}
|
|
517
|
+
if (this.arrows && keyCode === Keys.Space || keyCode === Keys.Enter) {
|
|
518
|
+
const prevButton = (_a = this.prevButton) === null || _a === void 0 ? void 0 : _a.nativeElement;
|
|
519
|
+
const nextButton = (_b = this.nextButton) === null || _b === void 0 ? void 0 : _b.nativeElement;
|
|
520
|
+
const activeElement = document.activeElement;
|
|
521
|
+
const isPrevButtonFocused = activeElement === prevButton;
|
|
522
|
+
const isNextButtonFocused = activeElement === nextButton;
|
|
523
|
+
if (isPrevButtonFocused) {
|
|
524
|
+
if (this.isRTL) {
|
|
525
|
+
this.next();
|
|
526
|
+
return;
|
|
527
|
+
}
|
|
528
|
+
this.prev();
|
|
529
|
+
}
|
|
530
|
+
else if (isNextButtonFocused) {
|
|
531
|
+
if (this.isRTL) {
|
|
532
|
+
this.prev();
|
|
533
|
+
return;
|
|
534
|
+
}
|
|
535
|
+
this.next();
|
|
536
|
+
}
|
|
537
|
+
}
|
|
538
|
+
}
|
|
504
539
|
navigate(direction) {
|
|
505
540
|
if (this.isDataSourceEmpty || this.animationState) {
|
|
506
541
|
return;
|
|
@@ -536,15 +571,17 @@ class ScrollViewComponent {
|
|
|
536
571
|
}
|
|
537
572
|
}
|
|
538
573
|
ScrollViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
539
|
-
ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ScrollViewComponent, 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: {
|
|
574
|
+
ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ScrollViewComponent, 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: [
|
|
540
575
|
LocalizationService,
|
|
541
576
|
{
|
|
542
577
|
provide: L10N_PREFIX,
|
|
543
578
|
useValue: 'kendo.scrollview'
|
|
544
579
|
}
|
|
545
|
-
], queries: [{ propertyName: "itemTemplateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "itemWrapper", first: true, predicate: ["itemWrapper"], descendants: true }], exportAs: ["kendoScrollView"], usesOnChanges: true, ngImport: i0, template: `
|
|
580
|
+
], 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: `
|
|
546
581
|
<ul class='k-scrollview-wrap'
|
|
547
582
|
#itemWrapper
|
|
583
|
+
role="list"
|
|
584
|
+
[id]="scrollviewId"
|
|
548
585
|
[@animateTo]="animationState"
|
|
549
586
|
(@animateTo.done)="transitionEndHandler($event)"
|
|
550
587
|
kendoDraggable
|
|
@@ -554,6 +591,8 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
554
591
|
>
|
|
555
592
|
<li
|
|
556
593
|
*ngFor="let item of view;let i=index"
|
|
594
|
+
role="listitem"
|
|
595
|
+
aria-roledescription="slide"
|
|
557
596
|
[ngStyle]="inlineListItemStyles(i)"
|
|
558
597
|
[attr.aria-hidden]="i !== 1"
|
|
559
598
|
>
|
|
@@ -567,7 +606,11 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
567
606
|
[ngStyle]="{'height': height}"
|
|
568
607
|
*ngIf="!isDataSourceEmpty && (pageable||arrows)">
|
|
569
608
|
|
|
570
|
-
<
|
|
609
|
+
<span
|
|
610
|
+
#prevButton
|
|
611
|
+
class="k-scrollview-prev"
|
|
612
|
+
role="button"
|
|
613
|
+
[attr.aria-controls]="scrollviewId"
|
|
571
614
|
aria-label="previous"
|
|
572
615
|
*ngIf="arrows && displayLeftArrow()"
|
|
573
616
|
(click)="leftArrowClick()">
|
|
@@ -576,8 +619,12 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
576
619
|
[svgIcon]="chevronLeftIcon"
|
|
577
620
|
>
|
|
578
621
|
</kendo-icon-wrapper>
|
|
579
|
-
</
|
|
580
|
-
<
|
|
622
|
+
</span>
|
|
623
|
+
<span
|
|
624
|
+
#nextButton
|
|
625
|
+
class="k-scrollview-next"
|
|
626
|
+
role="button"
|
|
627
|
+
[attr.aria-controls]="scrollviewId"
|
|
581
628
|
aria-label="next"
|
|
582
629
|
*ngIf="arrows && displayRightArrow()"
|
|
583
630
|
(click)="rightArrowClick()">
|
|
@@ -586,7 +633,7 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
586
633
|
[svgIcon]="chevronRightIcon"
|
|
587
634
|
>
|
|
588
635
|
</kendo-icon-wrapper>
|
|
589
|
-
</
|
|
636
|
+
</span>
|
|
590
637
|
<kendo-scrollview-pager
|
|
591
638
|
class='k-scrollview-nav-wrap'
|
|
592
639
|
*ngIf="pageable"
|
|
@@ -595,6 +642,7 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
595
642
|
[activeIndex]="activeIndex">
|
|
596
643
|
</kendo-scrollview-pager>
|
|
597
644
|
</div>
|
|
645
|
+
<div class="k-sr-only" aria-live="polite"></div>
|
|
598
646
|
`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ScrollViewPagerComponent, selector: "kendo-scrollview-pager", inputs: ["activeIndex", "data"], outputs: ["pagerIndexChange"] }], directives: [{ type: i4.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
599
647
|
trigger('animateTo', [
|
|
600
648
|
state('center, left, right', style({ transform: 'translateX(0)' })),
|
|
@@ -638,6 +686,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
638
686
|
template: `
|
|
639
687
|
<ul class='k-scrollview-wrap'
|
|
640
688
|
#itemWrapper
|
|
689
|
+
role="list"
|
|
690
|
+
[id]="scrollviewId"
|
|
641
691
|
[@animateTo]="animationState"
|
|
642
692
|
(@animateTo.done)="transitionEndHandler($event)"
|
|
643
693
|
kendoDraggable
|
|
@@ -647,6 +697,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
647
697
|
>
|
|
648
698
|
<li
|
|
649
699
|
*ngFor="let item of view;let i=index"
|
|
700
|
+
role="listitem"
|
|
701
|
+
aria-roledescription="slide"
|
|
650
702
|
[ngStyle]="inlineListItemStyles(i)"
|
|
651
703
|
[attr.aria-hidden]="i !== 1"
|
|
652
704
|
>
|
|
@@ -660,7 +712,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
660
712
|
[ngStyle]="{'height': height}"
|
|
661
713
|
*ngIf="!isDataSourceEmpty && (pageable||arrows)">
|
|
662
714
|
|
|
663
|
-
<
|
|
715
|
+
<span
|
|
716
|
+
#prevButton
|
|
717
|
+
class="k-scrollview-prev"
|
|
718
|
+
role="button"
|
|
719
|
+
[attr.aria-controls]="scrollviewId"
|
|
664
720
|
aria-label="previous"
|
|
665
721
|
*ngIf="arrows && displayLeftArrow()"
|
|
666
722
|
(click)="leftArrowClick()">
|
|
@@ -669,8 +725,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
669
725
|
[svgIcon]="chevronLeftIcon"
|
|
670
726
|
>
|
|
671
727
|
</kendo-icon-wrapper>
|
|
672
|
-
</
|
|
673
|
-
<
|
|
728
|
+
</span>
|
|
729
|
+
<span
|
|
730
|
+
#nextButton
|
|
731
|
+
class="k-scrollview-next"
|
|
732
|
+
role="button"
|
|
733
|
+
[attr.aria-controls]="scrollviewId"
|
|
674
734
|
aria-label="next"
|
|
675
735
|
*ngIf="arrows && displayRightArrow()"
|
|
676
736
|
(click)="rightArrowClick()">
|
|
@@ -679,7 +739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
679
739
|
[svgIcon]="chevronRightIcon"
|
|
680
740
|
>
|
|
681
741
|
</kendo-icon-wrapper>
|
|
682
|
-
</
|
|
742
|
+
</span>
|
|
683
743
|
<kendo-scrollview-pager
|
|
684
744
|
class='k-scrollview-nav-wrap'
|
|
685
745
|
*ngIf="pageable"
|
|
@@ -688,6 +748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
688
748
|
[activeIndex]="activeIndex">
|
|
689
749
|
</kendo-scrollview-pager>
|
|
690
750
|
</div>
|
|
751
|
+
<div class="k-sr-only" aria-live="polite"></div>
|
|
691
752
|
`
|
|
692
753
|
}]
|
|
693
754
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
|
|
@@ -714,13 +775,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
714
775
|
type: Output
|
|
715
776
|
}], itemTemplateRef: [{
|
|
716
777
|
type: ContentChild,
|
|
717
|
-
args: [TemplateRef
|
|
778
|
+
args: [TemplateRef]
|
|
718
779
|
}], itemWrapper: [{
|
|
719
780
|
type: ViewChild,
|
|
720
|
-
args: ['itemWrapper'
|
|
781
|
+
args: ['itemWrapper']
|
|
782
|
+
}], prevButton: [{
|
|
783
|
+
type: ViewChild,
|
|
784
|
+
args: ['prevButton']
|
|
785
|
+
}], nextButton: [{
|
|
786
|
+
type: ViewChild,
|
|
787
|
+
args: ['nextButton']
|
|
721
788
|
}], scrollViewClass: [{
|
|
722
789
|
type: HostBinding,
|
|
723
790
|
args: ['class.k-scrollview']
|
|
791
|
+
}], scrollViewRole: [{
|
|
792
|
+
type: HostBinding,
|
|
793
|
+
args: ['attr.role']
|
|
794
|
+
}], scrollViewRoleDescription: [{
|
|
795
|
+
type: HostBinding,
|
|
796
|
+
args: ['attr.aria-roledescription']
|
|
724
797
|
}], scrollViewLightOverlayClass: [{
|
|
725
798
|
type: HostBinding,
|
|
726
799
|
args: ['class.k-scrollview-light']
|
|
@@ -745,9 +818,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
745
818
|
}], touchAction: [{
|
|
746
819
|
type: HostBinding,
|
|
747
820
|
args: ['style.touch-action']
|
|
748
|
-
}], keyDown: [{
|
|
749
|
-
type: HostListener,
|
|
750
|
-
args: ['keydown', ['$event']]
|
|
751
821
|
}] } });
|
|
752
822
|
|
|
753
823
|
const DECLARATIONS = [
|
|
@@ -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, Component, Input, Output, TemplateRef, ContentChild, ViewChild, HostBinding,
|
|
6
|
+
import { EventEmitter, Component, Input, Output, TemplateRef, ContentChild, ViewChild, HostBinding, NgModule } from '@angular/core';
|
|
7
7
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
8
8
|
import * as i4 from '@progress/kendo-angular-common';
|
|
9
9
|
import { Keys, DraggableModule } from '@progress/kendo-angular-common';
|
|
@@ -11,6 +11,7 @@ import { validatePackage } from '@progress/kendo-licensing';
|
|
|
11
11
|
import * as i1 from '@progress/kendo-angular-l10n';
|
|
12
12
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
13
13
|
import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
|
|
14
|
+
import { Subscription } from 'rxjs';
|
|
14
15
|
import * as i2 from '@progress/kendo-angular-icons';
|
|
15
16
|
import { IconsModule } from '@progress/kendo-angular-icons';
|
|
16
17
|
import * as i5 from '@angular/common';
|
|
@@ -32,8 +33,8 @@ const packageMetadata = {
|
|
|
32
33
|
name: '@progress/kendo-angular-scrollview',
|
|
33
34
|
productName: 'Kendo UI for Angular',
|
|
34
35
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
35
|
-
publishDate:
|
|
36
|
-
version: '11.4.0-develop.
|
|
36
|
+
publishDate: 1678800085,
|
|
37
|
+
version: '11.4.0-develop.9',
|
|
37
38
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
38
39
|
};
|
|
39
40
|
|
|
@@ -168,6 +169,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
168
169
|
type: Output
|
|
169
170
|
}] } });
|
|
170
171
|
|
|
172
|
+
/* eslint-disable @typescript-eslint/no-inferrable-types */
|
|
173
|
+
let idx = 0;
|
|
171
174
|
/**
|
|
172
175
|
* Represents the [Kendo UI ScrollView component for Angular]({% slug overview_scrollview %}).
|
|
173
176
|
*
|
|
@@ -274,12 +277,15 @@ class ScrollViewComponent {
|
|
|
274
277
|
*/
|
|
275
278
|
this.activeIndexChange = new EventEmitter();
|
|
276
279
|
this.scrollViewClass = true;
|
|
277
|
-
this.
|
|
280
|
+
this.scrollViewRole = 'application';
|
|
281
|
+
this.scrollViewRoleDescription = 'carousel';
|
|
282
|
+
this.tabIndex = 0;
|
|
278
283
|
this.ariaLive = 'assertive';
|
|
279
284
|
this.touchAction = 'pan-y pinch-zoom';
|
|
280
285
|
this.animationState = null;
|
|
281
286
|
this.view = new DataCollection(() => new DataResultIterator(this.data, this.activeIndex, this.endless, this.pageIndex, this.isRTL));
|
|
282
287
|
this.isDataSourceEmpty = false;
|
|
288
|
+
this.subs = new Subscription();
|
|
283
289
|
this._activeIndex = 0;
|
|
284
290
|
this.index = 0;
|
|
285
291
|
this.pageIndex = null;
|
|
@@ -309,29 +315,19 @@ class ScrollViewComponent {
|
|
|
309
315
|
get direction() {
|
|
310
316
|
return this.localization.rtl ? 'rtl' : 'ltr';
|
|
311
317
|
}
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
if (e.keyCode === Keys.ArrowLeft) {
|
|
317
|
-
if (this.isRTL) {
|
|
318
|
-
this.next();
|
|
319
|
-
}
|
|
320
|
-
else {
|
|
321
|
-
this.prev();
|
|
322
|
-
}
|
|
323
|
-
}
|
|
324
|
-
if (e.keyCode === Keys.ArrowRight) {
|
|
325
|
-
if (this.isRTL) {
|
|
326
|
-
this.prev();
|
|
327
|
-
}
|
|
328
|
-
else {
|
|
329
|
-
this.next();
|
|
330
|
-
}
|
|
318
|
+
ngOnInit() {
|
|
319
|
+
this.subs.add(this.renderer.listen(this.element.nativeElement, 'keydown', event => this.keyDown(event)));
|
|
320
|
+
if (this.arrows) {
|
|
321
|
+
this.scrollviewId = `k-scrollview-wrap-${++idx}`;
|
|
331
322
|
}
|
|
332
323
|
}
|
|
324
|
+
ngOnDestroy() {
|
|
325
|
+
this.subs.unsubscribe();
|
|
326
|
+
}
|
|
333
327
|
ngOnChanges(_) {
|
|
334
|
-
|
|
328
|
+
if (this.data && this.data.length === 0) {
|
|
329
|
+
this.activeIndex = Math.max(Math.min(this.activeIndex, this.view.total - 1), 0);
|
|
330
|
+
}
|
|
335
331
|
}
|
|
336
332
|
/**
|
|
337
333
|
* Navigates the ScrollView to the previous item.
|
|
@@ -501,6 +497,44 @@ class ScrollViewComponent {
|
|
|
501
497
|
const isEndReached = ((this.activeIndex === 0 && pastEnd) || (this.activeIndex === this.view.total - 1 && !pastEnd));
|
|
502
498
|
return !this.endless && isEndReached;
|
|
503
499
|
}
|
|
500
|
+
keyDown(e) {
|
|
501
|
+
const keyCode = e.keyCode;
|
|
502
|
+
if (keyCode === Keys.ArrowLeft) {
|
|
503
|
+
if (this.isRTL) {
|
|
504
|
+
this.next();
|
|
505
|
+
return;
|
|
506
|
+
}
|
|
507
|
+
this.prev();
|
|
508
|
+
}
|
|
509
|
+
else if (keyCode === Keys.ArrowRight) {
|
|
510
|
+
if (this.isRTL) {
|
|
511
|
+
this.prev();
|
|
512
|
+
return;
|
|
513
|
+
}
|
|
514
|
+
this.next();
|
|
515
|
+
}
|
|
516
|
+
if (this.arrows && keyCode === Keys.Space || keyCode === Keys.Enter) {
|
|
517
|
+
const prevButton = this.prevButton?.nativeElement;
|
|
518
|
+
const nextButton = this.nextButton?.nativeElement;
|
|
519
|
+
const activeElement = document.activeElement;
|
|
520
|
+
const isPrevButtonFocused = activeElement === prevButton;
|
|
521
|
+
const isNextButtonFocused = activeElement === nextButton;
|
|
522
|
+
if (isPrevButtonFocused) {
|
|
523
|
+
if (this.isRTL) {
|
|
524
|
+
this.next();
|
|
525
|
+
return;
|
|
526
|
+
}
|
|
527
|
+
this.prev();
|
|
528
|
+
}
|
|
529
|
+
else if (isNextButtonFocused) {
|
|
530
|
+
if (this.isRTL) {
|
|
531
|
+
this.prev();
|
|
532
|
+
return;
|
|
533
|
+
}
|
|
534
|
+
this.next();
|
|
535
|
+
}
|
|
536
|
+
}
|
|
537
|
+
}
|
|
504
538
|
navigate(direction) {
|
|
505
539
|
if (this.isDataSourceEmpty || this.animationState) {
|
|
506
540
|
return;
|
|
@@ -536,15 +570,17 @@ class ScrollViewComponent {
|
|
|
536
570
|
}
|
|
537
571
|
}
|
|
538
572
|
ScrollViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
539
|
-
ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ScrollViewComponent, 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: {
|
|
573
|
+
ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ScrollViewComponent, 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: [
|
|
540
574
|
LocalizationService,
|
|
541
575
|
{
|
|
542
576
|
provide: L10N_PREFIX,
|
|
543
577
|
useValue: 'kendo.scrollview'
|
|
544
578
|
}
|
|
545
|
-
], queries: [{ propertyName: "itemTemplateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "itemWrapper", first: true, predicate: ["itemWrapper"], descendants: true }], exportAs: ["kendoScrollView"], usesOnChanges: true, ngImport: i0, template: `
|
|
579
|
+
], 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: `
|
|
546
580
|
<ul class='k-scrollview-wrap'
|
|
547
581
|
#itemWrapper
|
|
582
|
+
role="list"
|
|
583
|
+
[id]="scrollviewId"
|
|
548
584
|
[@animateTo]="animationState"
|
|
549
585
|
(@animateTo.done)="transitionEndHandler($event)"
|
|
550
586
|
kendoDraggable
|
|
@@ -554,6 +590,8 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
554
590
|
>
|
|
555
591
|
<li
|
|
556
592
|
*ngFor="let item of view;let i=index"
|
|
593
|
+
role="listitem"
|
|
594
|
+
aria-roledescription="slide"
|
|
557
595
|
[ngStyle]="inlineListItemStyles(i)"
|
|
558
596
|
[attr.aria-hidden]="i !== 1"
|
|
559
597
|
>
|
|
@@ -567,7 +605,11 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
567
605
|
[ngStyle]="{'height': height}"
|
|
568
606
|
*ngIf="!isDataSourceEmpty && (pageable||arrows)">
|
|
569
607
|
|
|
570
|
-
<
|
|
608
|
+
<span
|
|
609
|
+
#prevButton
|
|
610
|
+
class="k-scrollview-prev"
|
|
611
|
+
role="button"
|
|
612
|
+
[attr.aria-controls]="scrollviewId"
|
|
571
613
|
aria-label="previous"
|
|
572
614
|
*ngIf="arrows && displayLeftArrow()"
|
|
573
615
|
(click)="leftArrowClick()">
|
|
@@ -576,8 +618,12 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
576
618
|
[svgIcon]="chevronLeftIcon"
|
|
577
619
|
>
|
|
578
620
|
</kendo-icon-wrapper>
|
|
579
|
-
</
|
|
580
|
-
<
|
|
621
|
+
</span>
|
|
622
|
+
<span
|
|
623
|
+
#nextButton
|
|
624
|
+
class="k-scrollview-next"
|
|
625
|
+
role="button"
|
|
626
|
+
[attr.aria-controls]="scrollviewId"
|
|
581
627
|
aria-label="next"
|
|
582
628
|
*ngIf="arrows && displayRightArrow()"
|
|
583
629
|
(click)="rightArrowClick()">
|
|
@@ -586,7 +632,7 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
586
632
|
[svgIcon]="chevronRightIcon"
|
|
587
633
|
>
|
|
588
634
|
</kendo-icon-wrapper>
|
|
589
|
-
</
|
|
635
|
+
</span>
|
|
590
636
|
<kendo-scrollview-pager
|
|
591
637
|
class='k-scrollview-nav-wrap'
|
|
592
638
|
*ngIf="pageable"
|
|
@@ -595,6 +641,7 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
595
641
|
[activeIndex]="activeIndex">
|
|
596
642
|
</kendo-scrollview-pager>
|
|
597
643
|
</div>
|
|
644
|
+
<div class="k-sr-only" aria-live="polite"></div>
|
|
598
645
|
`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ScrollViewPagerComponent, selector: "kendo-scrollview-pager", inputs: ["activeIndex", "data"], outputs: ["pagerIndexChange"] }], directives: [{ type: i4.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
599
646
|
trigger('animateTo', [
|
|
600
647
|
state('center, left, right', style({ transform: 'translateX(0)' })),
|
|
@@ -638,6 +685,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
638
685
|
template: `
|
|
639
686
|
<ul class='k-scrollview-wrap'
|
|
640
687
|
#itemWrapper
|
|
688
|
+
role="list"
|
|
689
|
+
[id]="scrollviewId"
|
|
641
690
|
[@animateTo]="animationState"
|
|
642
691
|
(@animateTo.done)="transitionEndHandler($event)"
|
|
643
692
|
kendoDraggable
|
|
@@ -647,6 +696,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
647
696
|
>
|
|
648
697
|
<li
|
|
649
698
|
*ngFor="let item of view;let i=index"
|
|
699
|
+
role="listitem"
|
|
700
|
+
aria-roledescription="slide"
|
|
650
701
|
[ngStyle]="inlineListItemStyles(i)"
|
|
651
702
|
[attr.aria-hidden]="i !== 1"
|
|
652
703
|
>
|
|
@@ -660,7 +711,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
660
711
|
[ngStyle]="{'height': height}"
|
|
661
712
|
*ngIf="!isDataSourceEmpty && (pageable||arrows)">
|
|
662
713
|
|
|
663
|
-
<
|
|
714
|
+
<span
|
|
715
|
+
#prevButton
|
|
716
|
+
class="k-scrollview-prev"
|
|
717
|
+
role="button"
|
|
718
|
+
[attr.aria-controls]="scrollviewId"
|
|
664
719
|
aria-label="previous"
|
|
665
720
|
*ngIf="arrows && displayLeftArrow()"
|
|
666
721
|
(click)="leftArrowClick()">
|
|
@@ -669,8 +724,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
669
724
|
[svgIcon]="chevronLeftIcon"
|
|
670
725
|
>
|
|
671
726
|
</kendo-icon-wrapper>
|
|
672
|
-
</
|
|
673
|
-
<
|
|
727
|
+
</span>
|
|
728
|
+
<span
|
|
729
|
+
#nextButton
|
|
730
|
+
class="k-scrollview-next"
|
|
731
|
+
role="button"
|
|
732
|
+
[attr.aria-controls]="scrollviewId"
|
|
674
733
|
aria-label="next"
|
|
675
734
|
*ngIf="arrows && displayRightArrow()"
|
|
676
735
|
(click)="rightArrowClick()">
|
|
@@ -679,7 +738,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
679
738
|
[svgIcon]="chevronRightIcon"
|
|
680
739
|
>
|
|
681
740
|
</kendo-icon-wrapper>
|
|
682
|
-
</
|
|
741
|
+
</span>
|
|
683
742
|
<kendo-scrollview-pager
|
|
684
743
|
class='k-scrollview-nav-wrap'
|
|
685
744
|
*ngIf="pageable"
|
|
@@ -688,6 +747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
688
747
|
[activeIndex]="activeIndex">
|
|
689
748
|
</kendo-scrollview-pager>
|
|
690
749
|
</div>
|
|
750
|
+
<div class="k-sr-only" aria-live="polite"></div>
|
|
691
751
|
`
|
|
692
752
|
}]
|
|
693
753
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
|
|
@@ -714,13 +774,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
714
774
|
type: Output
|
|
715
775
|
}], itemTemplateRef: [{
|
|
716
776
|
type: ContentChild,
|
|
717
|
-
args: [TemplateRef
|
|
777
|
+
args: [TemplateRef]
|
|
718
778
|
}], itemWrapper: [{
|
|
719
779
|
type: ViewChild,
|
|
720
|
-
args: ['itemWrapper'
|
|
780
|
+
args: ['itemWrapper']
|
|
781
|
+
}], prevButton: [{
|
|
782
|
+
type: ViewChild,
|
|
783
|
+
args: ['prevButton']
|
|
784
|
+
}], nextButton: [{
|
|
785
|
+
type: ViewChild,
|
|
786
|
+
args: ['nextButton']
|
|
721
787
|
}], scrollViewClass: [{
|
|
722
788
|
type: HostBinding,
|
|
723
789
|
args: ['class.k-scrollview']
|
|
790
|
+
}], scrollViewRole: [{
|
|
791
|
+
type: HostBinding,
|
|
792
|
+
args: ['attr.role']
|
|
793
|
+
}], scrollViewRoleDescription: [{
|
|
794
|
+
type: HostBinding,
|
|
795
|
+
args: ['attr.aria-roledescription']
|
|
724
796
|
}], scrollViewLightOverlayClass: [{
|
|
725
797
|
type: HostBinding,
|
|
726
798
|
args: ['class.k-scrollview-light']
|
|
@@ -745,9 +817,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
745
817
|
}], touchAction: [{
|
|
746
818
|
type: HostBinding,
|
|
747
819
|
args: ['style.touch-action']
|
|
748
|
-
}], keyDown: [{
|
|
749
|
-
type: HostListener,
|
|
750
|
-
args: ['keydown', ['$event']]
|
|
751
820
|
}] } });
|
|
752
821
|
|
|
753
822
|
const DECLARATIONS = [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-scrollview",
|
|
3
|
-
"version": "11.4.0-develop.
|
|
3
|
+
"version": "11.4.0-develop.9",
|
|
4
4
|
"description": "A ScrollView Component for Angular",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -23,14 +23,14 @@
|
|
|
23
23
|
"@angular/core": "13 - 15",
|
|
24
24
|
"@angular/platform-browser": "13 - 15",
|
|
25
25
|
"@progress/kendo-licensing": "^1.0.2",
|
|
26
|
-
"@progress/kendo-angular-common": "11.4.0-develop.
|
|
27
|
-
"@progress/kendo-angular-l10n": "11.4.0-develop.
|
|
28
|
-
"@progress/kendo-angular-icons": "11.4.0-develop.
|
|
26
|
+
"@progress/kendo-angular-common": "11.4.0-develop.9",
|
|
27
|
+
"@progress/kendo-angular-l10n": "11.4.0-develop.9",
|
|
28
|
+
"@progress/kendo-angular-icons": "11.4.0-develop.9",
|
|
29
29
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"tslib": "^2.3.1",
|
|
33
|
-
"@progress/kendo-angular-schematics": "11.4.0-develop.
|
|
33
|
+
"@progress/kendo-angular-schematics": "11.4.0-develop.9"
|
|
34
34
|
},
|
|
35
35
|
"schematics": "./schematics/collection.json",
|
|
36
36
|
"module": "fesm2015/progress-kendo-angular-scrollview.mjs",
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Copyright © 2023 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
|
-
import { ElementRef, EventEmitter, OnChanges, TemplateRef, NgZone, Renderer2 } from '@angular/core';
|
|
5
|
+
import { ElementRef, EventEmitter, OnChanges, TemplateRef, NgZone, Renderer2, OnDestroy } from '@angular/core';
|
|
6
6
|
import { AnimationEvent } from '@angular/animations';
|
|
7
7
|
import { AnimationState, ScrollViewPagerOverlay } from './enums';
|
|
8
8
|
import { ItemChangedEvent } from './change-event-args';
|
|
@@ -64,7 +64,7 @@ import * as i0 from "@angular/core";
|
|
|
64
64
|
* }
|
|
65
65
|
* ```
|
|
66
66
|
*/
|
|
67
|
-
export declare class ScrollViewComponent implements OnChanges {
|
|
67
|
+
export declare class ScrollViewComponent implements OnChanges, OnDestroy {
|
|
68
68
|
protected element: ElementRef;
|
|
69
69
|
private localization;
|
|
70
70
|
private ngZone;
|
|
@@ -132,7 +132,11 @@ export declare class ScrollViewComponent implements OnChanges {
|
|
|
132
132
|
activeIndexChange: EventEmitter<number>;
|
|
133
133
|
itemTemplateRef: TemplateRef<any>;
|
|
134
134
|
itemWrapper: ElementRef;
|
|
135
|
+
prevButton: ElementRef;
|
|
136
|
+
nextButton: ElementRef;
|
|
135
137
|
scrollViewClass: boolean;
|
|
138
|
+
scrollViewRole: string;
|
|
139
|
+
scrollViewRoleDescription: string;
|
|
136
140
|
get scrollViewLightOverlayClass(): boolean;
|
|
137
141
|
get scrollViewDarkOverlayClass(): boolean;
|
|
138
142
|
get hostWidth(): string;
|
|
@@ -143,7 +147,12 @@ export declare class ScrollViewComponent implements OnChanges {
|
|
|
143
147
|
touchAction: string;
|
|
144
148
|
animationState: AnimationState;
|
|
145
149
|
view: DataCollection;
|
|
150
|
+
/**
|
|
151
|
+
* @hidden
|
|
152
|
+
*/
|
|
153
|
+
scrollviewId: string;
|
|
146
154
|
isDataSourceEmpty: boolean;
|
|
155
|
+
private subs;
|
|
147
156
|
private _activeIndex;
|
|
148
157
|
private index;
|
|
149
158
|
private initialTouchCoordinate;
|
|
@@ -151,10 +160,8 @@ export declare class ScrollViewComponent implements OnChanges {
|
|
|
151
160
|
private transforms;
|
|
152
161
|
private get direction();
|
|
153
162
|
constructor(element: ElementRef, localization: LocalizationService, ngZone: NgZone, renderer: Renderer2);
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
*/
|
|
157
|
-
keyDown(e: any): void;
|
|
163
|
+
ngOnInit(): void;
|
|
164
|
+
ngOnDestroy(): void;
|
|
158
165
|
ngOnChanges(_: any): void;
|
|
159
166
|
/**
|
|
160
167
|
* Navigates the ScrollView to the previous item.
|
|
@@ -209,6 +216,7 @@ export declare class ScrollViewComponent implements OnChanges {
|
|
|
209
216
|
protected draggedInsideBounds(deltaX: number): boolean;
|
|
210
217
|
protected draggedEnoughToNavigate(deltaX: number): boolean;
|
|
211
218
|
protected isDragForbidden(deltaX: number): boolean;
|
|
219
|
+
private keyDown;
|
|
212
220
|
private navigate;
|
|
213
221
|
private changeIndex;
|
|
214
222
|
private get isRTL();
|