@progress/kendo-angular-scrollview 12.0.0-develop.9 → 12.0.0

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.
Files changed (15) hide show
  1. package/esm2020/localization/custom-messages.component.mjs +42 -0
  2. package/esm2020/localization/localized-messages.directive.mjs +37 -0
  3. package/esm2020/localization/messages.mjs +23 -0
  4. package/esm2020/package-metadata.mjs +2 -2
  5. package/esm2020/scrollview-pager.component.mjs +24 -13
  6. package/esm2020/scrollview.component.mjs +16 -3
  7. package/esm2020/scrollview.module.mjs +8 -2
  8. package/fesm2015/progress-kendo-angular-scrollview.mjs +126 -21
  9. package/fesm2020/progress-kendo-angular-scrollview.mjs +126 -21
  10. package/localization/custom-messages.component.d.ts +18 -0
  11. package/localization/localized-messages.directive.d.ts +16 -0
  12. package/localization/messages.d.ts +18 -0
  13. package/package.json +5 -5
  14. package/scrollview-pager.component.d.ts +5 -0
  15. package/scrollview.module.d.ts +6 -4
package/esm2020/localization/custom-messages.component.mjs ADDED
@@ -0,0 +1,42 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { Component, forwardRef } from '@angular/core';
6
+ import { LocalizationService } from '@progress/kendo-angular-l10n';
7
+ import { ScrollViewMessages } from './messages';
8
+ import * as i0 from "@angular/core";
9
+ import * as i1 from "@progress/kendo-angular-l10n";
10
+ /**
11
+ * Custom component messages override default component messages
12
+ * ([see example]({% slug globalization_scrollview %}#toc-localization)).
13
+ */
14
+ export class CustomMessagesComponent extends ScrollViewMessages {
15
+ constructor(service) {
16
+ super();
17
+ this.service = service;
18
+ }
19
+ get override() {
20
+ return true;
21
+ }
22
+ }
23
+ CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
24
+ CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CustomMessagesComponent, selector: "kendo-scrollview-messages", providers: [
25
+ {
26
+ provide: ScrollViewMessages,
27
+ useExisting: forwardRef(() => CustomMessagesComponent)
28
+ }
29
+ ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
30
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
31
+ type: Component,
32
+ args: [{
33
+ providers: [
34
+ {
35
+ provide: ScrollViewMessages,
36
+ useExisting: forwardRef(() => CustomMessagesComponent)
37
+ }
38
+ ],
39
+ selector: 'kendo-scrollview-messages',
40
+ template: ``
41
+ }]
42
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
package/esm2020/localization/localized-messages.directive.mjs ADDED
@@ -0,0 +1,37 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { Directive, forwardRef } from '@angular/core';
6
+ import { LocalizationService } from '@progress/kendo-angular-l10n';
7
+ import { ScrollViewMessages } from './messages';
8
+ import * as i0 from "@angular/core";
9
+ import * as i1 from "@progress/kendo-angular-l10n";
10
+ /**
11
+ * @hidden
12
+ */
13
+ export class LocalizedMessagesDirective extends ScrollViewMessages {
14
+ constructor(service) {
15
+ super();
16
+ this.service = service;
17
+ }
18
+ }
19
+ LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
20
+ LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LocalizedMessagesDirective, selector: "[kendoScrollViewLocalizedMessages]", providers: [
21
+ {
22
+ provide: ScrollViewMessages,
23
+ useExisting: forwardRef(() => LocalizedMessagesDirective)
24
+ }
25
+ ], usesInheritance: true, ngImport: i0 });
26
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
27
+ type: Directive,
28
+ args: [{
29
+ providers: [
30
+ {
31
+ provide: ScrollViewMessages,
32
+ useExisting: forwardRef(() => LocalizedMessagesDirective)
33
+ }
34
+ ],
35
+ selector: '[kendoScrollViewLocalizedMessages]'
36
+ }]
37
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
package/esm2020/localization/messages.mjs ADDED
@@ -0,0 +1,23 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { Directive, Input } from '@angular/core';
6
+ import { ComponentMessages } from '@progress/kendo-angular-l10n';
7
+ import * as i0 from "@angular/core";
8
+ /**
9
+ * @hidden
10
+ */
11
+ export class ScrollViewMessages extends ComponentMessages {
12
+ }
13
+ ScrollViewMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
14
+ ScrollViewMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ScrollViewMessages, selector: "kendo-scrollview-messages-base", inputs: { pagerButtonLabel: "pagerButtonLabel" }, usesInheritance: true, ngImport: i0 });
15
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewMessages, decorators: [{
16
+ type: Directive,
17
+ args: [{
18
+ // eslint-disable-next-line @angular-eslint/directive-selector
19
+ selector: 'kendo-scrollview-messages-base'
20
+ }]
21
+ }], propDecorators: { pagerButtonLabel: [{
22
+ type: Input
23
+ }] } });
package/esm2020/package-metadata.mjs CHANGED
@@ -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: 1681884439,
13
- version: '12.0.0-develop.9',
12
+ publishDate: 1682434219,
13
+ version: '12.0.0',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
15
15
  };
package/esm2020/scrollview-pager.component.mjs CHANGED
@@ -2,15 +2,19 @@
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
+ /* eslint-disable @typescript-eslint/no-explicit-any */
5
6
  import { Component, Input, Output } from '@angular/core';
6
7
  import { EventEmitter } from '@angular/core';
8
+ import { LocalizationService } from '@progress/kendo-angular-l10n';
7
9
  import * as i0 from "@angular/core";
8
- import * as i1 from "@angular/common";
10
+ import * as i1 from "@progress/kendo-angular-l10n";
11
+ import * as i2 from "@angular/common";
9
12
  /**
10
13
  * @hidden
11
14
  */
12
15
  export class ScrollViewPagerComponent {
13
- constructor() {
16
+ constructor(localization) {
17
+ this.localization = localization;
14
18
  this.pagerIndexChange = new EventEmitter();
15
19
  }
16
20
  itemClass(idx) {
@@ -21,30 +25,37 @@ export class ScrollViewPagerComponent {
21
25
  indexChange(selectedIndex) {
22
26
  this.pagerIndexChange.emit(selectedIndex);
23
27
  }
28
+ pagerButtonLabel(itemIndex) {
29
+ const localizationMsg = this.localization.get('pagerButtonLabel') || '';
30
+ return this.replaceMessagePlaceholder(localizationMsg, 'itemIndex', itemIndex.toString());
31
+ }
32
+ replaceMessagePlaceholder(message, name, value) {
33
+ return message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
34
+ }
24
35
  }
25
- ScrollViewPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
36
+ ScrollViewPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewPagerComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
26
37
  ScrollViewPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ScrollViewPagerComponent, selector: "kendo-scrollview-pager", inputs: { activeIndex: "activeIndex", data: "data" }, outputs: { pagerIndexChange: "pagerIndexChange" }, ngImport: i0, template: `
27
- <ul class="k-scrollview-pageable k-scrollview-nav">
28
- <li class="k-button" *ngFor="let item of data; let i = index"
38
+ <div class="k-scrollview-pageable k-scrollview-nav">
39
+ <span [attr.aria-label]="pagerButtonLabel(i + 1)" role="button" class="k-button" *ngFor="let item of data; let i = index"
29
40
  [ngClass]="itemClass(i)"
30
41
  (click)="indexChange(i)">
31
- </li>
32
- </ul>
33
- `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
42
+ </span>
43
+ </div>
44
+ `, isInline: true, directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
34
45
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewPagerComponent, decorators: [{
35
46
  type: Component,
36
47
  args: [{
37
48
  selector: 'kendo-scrollview-pager',
38
49
  template: `
39
- <ul class="k-scrollview-pageable k-scrollview-nav">
40
- <li class="k-button" *ngFor="let item of data; let i = index"
50
+ <div class="k-scrollview-pageable k-scrollview-nav">
51
+ <span [attr.aria-label]="pagerButtonLabel(i + 1)" role="button" class="k-button" *ngFor="let item of data; let i = index"
41
52
  [ngClass]="itemClass(i)"
42
53
  (click)="indexChange(i)">
43
- </li>
44
- </ul>
54
+ </span>
55
+ </div>
45
56
  `
46
57
  }]
47
- }], propDecorators: { activeIndex: [{
58
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { activeIndex: [{
48
59
  type: Input
49
60
  }], data: [{
50
61
  type: Input
package/esm2020/scrollview.component.mjs CHANGED
@@ -19,8 +19,9 @@ import * as i0 from "@angular/core";
19
19
  import * as i1 from "@progress/kendo-angular-l10n";
20
20
  import * as i2 from "@progress/kendo-angular-icons";
21
21
  import * as i3 from "./scrollview-pager.component";
22
- import * as i4 from "@progress/kendo-angular-common";
23
- import * as i5 from "@angular/common";
22
+ import * as i4 from "./localization/localized-messages.directive";
23
+ import * as i5 from "@progress/kendo-angular-common";
24
+ import * as i6 from "@angular/common";
24
25
  let idx = 0;
25
26
  /**
26
27
  * Represents the [Kendo UI ScrollView component for Angular]({% slug overview_scrollview %}).
@@ -428,6 +429,12 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
428
429
  useValue: 'kendo.scrollview'
429
430
  }
430
431
  ], 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: `
432
+
433
+ <ng-container kendoScrollViewLocalizedMessages
434
+ i18n-pagerButtonLabel="kendo.scrollview.pagerButtonLabel|The label for the buttons inside the ScrollView Pager"
435
+ pagerButtonLabel="{{ 'Item {itemIndex}' }}">
436
+ <ng-container>
437
+
431
438
  <ul class='k-scrollview-wrap'
432
439
  #itemWrapper
433
440
  role="list"
@@ -493,7 +500,7 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
493
500
  </kendo-scrollview-pager>
494
501
  </div>
495
502
  <div class="k-sr-only" aria-live="polite"></div>
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: [
503
+ `, 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.LocalizedMessagesDirective, selector: "[kendoScrollViewLocalizedMessages]" }, { type: i5.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
497
504
  trigger('animateTo', [
498
505
  state('center, left, right', style({ transform: 'translateX(0)' })),
499
506
  transition('* => right', [
@@ -534,6 +541,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
534
541
  ],
535
542
  selector: 'kendo-scrollview',
536
543
  template: `
544
+
545
+ <ng-container kendoScrollViewLocalizedMessages
546
+ i18n-pagerButtonLabel="kendo.scrollview.pagerButtonLabel|The label for the buttons inside the ScrollView Pager"
547
+ pagerButtonLabel="{{ 'Item {itemIndex}' }}">
548
+ <ng-container>
549
+
537
550
  <ul class='k-scrollview-wrap'
538
551
  #itemWrapper
539
552
  role="list"
package/esm2020/scrollview.module.mjs CHANGED
@@ -8,10 +8,14 @@ import { ScrollViewComponent } from './scrollview.component';
8
8
  import { ScrollViewPagerComponent } from "./scrollview-pager.component";
9
9
  import { DraggableModule } from '@progress/kendo-angular-common';
10
10
  import { IconsModule } from '@progress/kendo-angular-icons';
11
+ import { CustomMessagesComponent } from './localization/custom-messages.component';
12
+ import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
11
13
  import * as i0 from "@angular/core";
12
14
  const DECLARATIONS = [
13
15
  ScrollViewComponent,
14
- ScrollViewPagerComponent
16
+ ScrollViewPagerComponent,
17
+ CustomMessagesComponent,
18
+ LocalizedMessagesDirective
15
19
  ];
16
20
  const EXPORTS = [
17
21
  ScrollViewComponent
@@ -51,7 +55,9 @@ export class ScrollViewModule {
51
55
  }
52
56
  ScrollViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
53
57
  ScrollViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewModule, declarations: [ScrollViewComponent,
54
- ScrollViewPagerComponent], imports: [CommonModule, DraggableModule, IconsModule], exports: [ScrollViewComponent] });
58
+ ScrollViewPagerComponent,
59
+ CustomMessagesComponent,
60
+ LocalizedMessagesDirective], imports: [CommonModule, DraggableModule, IconsModule], exports: [ScrollViewComponent] });
55
61
  ScrollViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewModule, imports: [[CommonModule, DraggableModule, IconsModule]] });
56
62
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewModule, decorators: [{
57
63
  type: NgModule,
package/fesm2015/progress-kendo-angular-scrollview.mjs CHANGED
@@ -3,18 +3,18 @@
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, NgModule } from '@angular/core';
6
+ import { EventEmitter, Component, Input, Output, Directive, forwardRef, TemplateRef, ContentChild, ViewChild, HostBinding, NgModule } from '@angular/core';
7
7
  import { trigger, state, style, transition, animate } from '@angular/animations';
8
- import * as i4 from '@progress/kendo-angular-common';
8
+ import * as i5 from '@progress/kendo-angular-common';
9
9
  import { Keys, DraggableModule } from '@progress/kendo-angular-common';
10
10
  import { validatePackage } from '@progress/kendo-licensing';
11
11
  import * as i1 from '@progress/kendo-angular-l10n';
12
- import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
12
+ import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
13
13
  import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
14
14
  import { Subscription } from 'rxjs';
15
15
  import * as i2 from '@progress/kendo-angular-icons';
16
16
  import { IconsModule } from '@progress/kendo-angular-icons';
17
- import * as i5 from '@angular/common';
17
+ import * as i6 from '@angular/common';
18
18
  import { CommonModule } from '@angular/common';
19
19
 
20
20
  /**
@@ -33,8 +33,8 @@ const packageMetadata = {
33
33
  name: '@progress/kendo-angular-scrollview',
34
34
  productName: 'Kendo UI for Angular',
35
35
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
36
- publishDate: 1681884439,
37
- version: '12.0.0-develop.9',
36
+ publishDate: 1682434219,
37
+ version: '12.0.0',
38
38
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
39
39
  };
40
40
 
@@ -123,11 +123,13 @@ class DataCollection {
123
123
  }
124
124
  }
125
125
 
126
+ /* eslint-disable @typescript-eslint/no-explicit-any */
126
127
  /**
127
128
  * @hidden
128
129
  */
129
130
  class ScrollViewPagerComponent {
130
- constructor() {
131
+ constructor(localization) {
132
+ this.localization = localization;
131
133
  this.pagerIndexChange = new EventEmitter();
132
134
  }
133
135
  itemClass(idx) {
@@ -138,30 +140,37 @@ class ScrollViewPagerComponent {
138
140
  indexChange(selectedIndex) {
139
141
  this.pagerIndexChange.emit(selectedIndex);
140
142
  }
143
+ pagerButtonLabel(itemIndex) {
144
+ const localizationMsg = this.localization.get('pagerButtonLabel') || '';
145
+ return this.replaceMessagePlaceholder(localizationMsg, 'itemIndex', itemIndex.toString());
146
+ }
147
+ replaceMessagePlaceholder(message, name, value) {
148
+ return message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
149
+ }
141
150
  }
142
- ScrollViewPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
151
+ ScrollViewPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewPagerComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
143
152
  ScrollViewPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ScrollViewPagerComponent, selector: "kendo-scrollview-pager", inputs: { activeIndex: "activeIndex", data: "data" }, outputs: { pagerIndexChange: "pagerIndexChange" }, ngImport: i0, template: `
144
- <ul class="k-scrollview-pageable k-scrollview-nav">
145
- <li class="k-button" *ngFor="let item of data; let i = index"
153
+ <div class="k-scrollview-pageable k-scrollview-nav">
154
+ <span [attr.aria-label]="pagerButtonLabel(i + 1)" role="button" class="k-button" *ngFor="let item of data; let i = index"
146
155
  [ngClass]="itemClass(i)"
147
156
  (click)="indexChange(i)">
148
- </li>
149
- </ul>
150
- `, isInline: true, directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
157
+ </span>
158
+ </div>
159
+ `, isInline: true, directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
151
160
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewPagerComponent, decorators: [{
152
161
  type: Component,
153
162
  args: [{
154
163
  selector: 'kendo-scrollview-pager',
155
164
  template: `
156
- <ul class="k-scrollview-pageable k-scrollview-nav">
157
- <li class="k-button" *ngFor="let item of data; let i = index"
165
+ <div class="k-scrollview-pageable k-scrollview-nav">
166
+ <span [attr.aria-label]="pagerButtonLabel(i + 1)" role="button" class="k-button" *ngFor="let item of data; let i = index"
158
167
  [ngClass]="itemClass(i)"
159
168
  (click)="indexChange(i)">
160
- </li>
161
- </ul>
169
+ </span>
170
+ </div>
162
171
  `
163
172
  }]
164
- }], propDecorators: { activeIndex: [{
173
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { activeIndex: [{
165
174
  type: Input
166
175
  }], data: [{
167
176
  type: Input
@@ -169,6 +178,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
169
178
  type: Output
170
179
  }] } });
171
180
 
181
+ /**
182
+ * @hidden
183
+ */
184
+ class ScrollViewMessages extends ComponentMessages {
185
+ }
186
+ ScrollViewMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
187
+ ScrollViewMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ScrollViewMessages, selector: "kendo-scrollview-messages-base", inputs: { pagerButtonLabel: "pagerButtonLabel" }, usesInheritance: true, ngImport: i0 });
188
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewMessages, decorators: [{
189
+ type: Directive,
190
+ args: [{
191
+ // eslint-disable-next-line @angular-eslint/directive-selector
192
+ selector: 'kendo-scrollview-messages-base'
193
+ }]
194
+ }], propDecorators: { pagerButtonLabel: [{
195
+ type: Input
196
+ }] } });
197
+
198
+ /**
199
+ * @hidden
200
+ */
201
+ class LocalizedMessagesDirective extends ScrollViewMessages {
202
+ constructor(service) {
203
+ super();
204
+ this.service = service;
205
+ }
206
+ }
207
+ LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
208
+ LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LocalizedMessagesDirective, selector: "[kendoScrollViewLocalizedMessages]", providers: [
209
+ {
210
+ provide: ScrollViewMessages,
211
+ useExisting: forwardRef(() => LocalizedMessagesDirective)
212
+ }
213
+ ], usesInheritance: true, ngImport: i0 });
214
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
215
+ type: Directive,
216
+ args: [{
217
+ providers: [
218
+ {
219
+ provide: ScrollViewMessages,
220
+ useExisting: forwardRef(() => LocalizedMessagesDirective)
221
+ }
222
+ ],
223
+ selector: '[kendoScrollViewLocalizedMessages]'
224
+ }]
225
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
226
+
172
227
  /* eslint-disable @typescript-eslint/no-inferrable-types */
173
228
  let idx = 0;
174
229
  /**
@@ -578,6 +633,12 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
578
633
  useValue: 'kendo.scrollview'
579
634
  }
580
635
  ], 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: `
636
+
637
+ <ng-container kendoScrollViewLocalizedMessages
638
+ i18n-pagerButtonLabel="kendo.scrollview.pagerButtonLabel|The label for the buttons inside the ScrollView Pager"
639
+ pagerButtonLabel="{{ 'Item {itemIndex}' }}">
640
+ <ng-container>
641
+
581
642
  <ul class='k-scrollview-wrap'
582
643
  #itemWrapper
583
644
  role="list"
@@ -643,7 +704,7 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
643
704
  </kendo-scrollview-pager>
644
705
  </div>
645
706
  <div class="k-sr-only" aria-live="polite"></div>
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: [
707
+ `, 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: LocalizedMessagesDirective, selector: "[kendoScrollViewLocalizedMessages]" }, { type: i5.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
647
708
  trigger('animateTo', [
648
709
  state('center, left, right', style({ transform: 'translateX(0)' })),
649
710
  transition('* => right', [
@@ -684,6 +745,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
684
745
  ],
685
746
  selector: 'kendo-scrollview',
686
747
  template: `
748
+
749
+ <ng-container kendoScrollViewLocalizedMessages
750
+ i18n-pagerButtonLabel="kendo.scrollview.pagerButtonLabel|The label for the buttons inside the ScrollView Pager"
751
+ pagerButtonLabel="{{ 'Item {itemIndex}' }}">
752
+ <ng-container>
753
+
687
754
  <ul class='k-scrollview-wrap'
688
755
  #itemWrapper
689
756
  role="list"
@@ -820,9 +887,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
820
887
  args: ['style.touch-action']
821
888
  }] } });
822
889
 
890
+ /**
891
+ * Custom component messages override default component messages
892
+ * ([see example]({% slug globalization_scrollview %}#toc-localization)).
893
+ */
894
+ class CustomMessagesComponent extends ScrollViewMessages {
895
+ constructor(service) {
896
+ super();
897
+ this.service = service;
898
+ }
899
+ get override() {
900
+ return true;
901
+ }
902
+ }
903
+ CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
904
+ CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CustomMessagesComponent, selector: "kendo-scrollview-messages", providers: [
905
+ {
906
+ provide: ScrollViewMessages,
907
+ useExisting: forwardRef(() => CustomMessagesComponent)
908
+ }
909
+ ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
910
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
911
+ type: Component,
912
+ args: [{
913
+ providers: [
914
+ {
915
+ provide: ScrollViewMessages,
916
+ useExisting: forwardRef(() => CustomMessagesComponent)
917
+ }
918
+ ],
919
+ selector: 'kendo-scrollview-messages',
920
+ template: ``
921
+ }]
922
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
923
+
823
924
  const DECLARATIONS = [
824
925
  ScrollViewComponent,
825
- ScrollViewPagerComponent
926
+ ScrollViewPagerComponent,
927
+ CustomMessagesComponent,
928
+ LocalizedMessagesDirective
826
929
  ];
827
930
  const EXPORTS = [
828
931
  ScrollViewComponent
@@ -862,7 +965,9 @@ class ScrollViewModule {
862
965
  }
863
966
  ScrollViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
864
967
  ScrollViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewModule, declarations: [ScrollViewComponent,
865
- ScrollViewPagerComponent], imports: [CommonModule, DraggableModule, IconsModule], exports: [ScrollViewComponent] });
968
+ ScrollViewPagerComponent,
969
+ CustomMessagesComponent,
970
+ LocalizedMessagesDirective], imports: [CommonModule, DraggableModule, IconsModule], exports: [ScrollViewComponent] });
866
971
  ScrollViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewModule, imports: [[CommonModule, DraggableModule, IconsModule]] });
867
972
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewModule, decorators: [{
868
973
  type: NgModule,
package/fesm2020/progress-kendo-angular-scrollview.mjs CHANGED
@@ -3,18 +3,18 @@
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, NgModule } from '@angular/core';
6
+ import { EventEmitter, Component, Input, Output, Directive, forwardRef, TemplateRef, ContentChild, ViewChild, HostBinding, NgModule } from '@angular/core';
7
7
  import { trigger, state, style, transition, animate } from '@angular/animations';
8
- import * as i4 from '@progress/kendo-angular-common';
8
+ import * as i5 from '@progress/kendo-angular-common';
9
9
  import { Keys, DraggableModule } from '@progress/kendo-angular-common';
10
10
  import { validatePackage } from '@progress/kendo-licensing';
11
11
  import * as i1 from '@progress/kendo-angular-l10n';
12
- import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
12
+ import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
13
13
  import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
14
14
  import { Subscription } from 'rxjs';
15
15
  import * as i2 from '@progress/kendo-angular-icons';
16
16
  import { IconsModule } from '@progress/kendo-angular-icons';
17
- import * as i5 from '@angular/common';
17
+ import * as i6 from '@angular/common';
18
18
  import { CommonModule } from '@angular/common';
19
19
 
20
20
  /**
@@ -33,8 +33,8 @@ const packageMetadata = {
33
33
  name: '@progress/kendo-angular-scrollview',
34
34
  productName: 'Kendo UI for Angular',
35
35
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
36
- publishDate: 1681884439,
37
- version: '12.0.0-develop.9',
36
+ publishDate: 1682434219,
37
+ version: '12.0.0',
38
38
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
39
39
  };
40
40
 
@@ -123,11 +123,13 @@ class DataCollection {
123
123
  }
124
124
  }
125
125
 
126
+ /* eslint-disable @typescript-eslint/no-explicit-any */
126
127
  /**
127
128
  * @hidden
128
129
  */
129
130
  class ScrollViewPagerComponent {
130
- constructor() {
131
+ constructor(localization) {
132
+ this.localization = localization;
131
133
  this.pagerIndexChange = new EventEmitter();
132
134
  }
133
135
  itemClass(idx) {
@@ -138,30 +140,37 @@ class ScrollViewPagerComponent {
138
140
  indexChange(selectedIndex) {
139
141
  this.pagerIndexChange.emit(selectedIndex);
140
142
  }
143
+ pagerButtonLabel(itemIndex) {
144
+ const localizationMsg = this.localization.get('pagerButtonLabel') || '';
145
+ return this.replaceMessagePlaceholder(localizationMsg, 'itemIndex', itemIndex.toString());
146
+ }
147
+ replaceMessagePlaceholder(message, name, value) {
148
+ return message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
149
+ }
141
150
  }
142
- ScrollViewPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
151
+ ScrollViewPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewPagerComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
143
152
  ScrollViewPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ScrollViewPagerComponent, selector: "kendo-scrollview-pager", inputs: { activeIndex: "activeIndex", data: "data" }, outputs: { pagerIndexChange: "pagerIndexChange" }, ngImport: i0, template: `
144
- <ul class="k-scrollview-pageable k-scrollview-nav">
145
- <li class="k-button" *ngFor="let item of data; let i = index"
153
+ <div class="k-scrollview-pageable k-scrollview-nav">
154
+ <span [attr.aria-label]="pagerButtonLabel(i + 1)" role="button" class="k-button" *ngFor="let item of data; let i = index"
146
155
  [ngClass]="itemClass(i)"
147
156
  (click)="indexChange(i)">
148
- </li>
149
- </ul>
150
- `, isInline: true, directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
157
+ </span>
158
+ </div>
159
+ `, isInline: true, directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
151
160
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewPagerComponent, decorators: [{
152
161
  type: Component,
153
162
  args: [{
154
163
  selector: 'kendo-scrollview-pager',
155
164
  template: `
156
- <ul class="k-scrollview-pageable k-scrollview-nav">
157
- <li class="k-button" *ngFor="let item of data; let i = index"
165
+ <div class="k-scrollview-pageable k-scrollview-nav">
166
+ <span [attr.aria-label]="pagerButtonLabel(i + 1)" role="button" class="k-button" *ngFor="let item of data; let i = index"
158
167
  [ngClass]="itemClass(i)"
159
168
  (click)="indexChange(i)">
160
- </li>
161
- </ul>
169
+ </span>
170
+ </div>
162
171
  `
163
172
  }]
164
- }], propDecorators: { activeIndex: [{
173
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { activeIndex: [{
165
174
  type: Input
166
175
  }], data: [{
167
176
  type: Input
@@ -169,6 +178,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
169
178
  type: Output
170
179
  }] } });
171
180
 
181
+ /**
182
+ * @hidden
183
+ */
184
+ class ScrollViewMessages extends ComponentMessages {
185
+ }
186
+ ScrollViewMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
187
+ ScrollViewMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ScrollViewMessages, selector: "kendo-scrollview-messages-base", inputs: { pagerButtonLabel: "pagerButtonLabel" }, usesInheritance: true, ngImport: i0 });
188
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewMessages, decorators: [{
189
+ type: Directive,
190
+ args: [{
191
+ // eslint-disable-next-line @angular-eslint/directive-selector
192
+ selector: 'kendo-scrollview-messages-base'
193
+ }]
194
+ }], propDecorators: { pagerButtonLabel: [{
195
+ type: Input
196
+ }] } });
197
+
198
+ /**
199
+ * @hidden
200
+ */
201
+ class LocalizedMessagesDirective extends ScrollViewMessages {
202
+ constructor(service) {
203
+ super();
204
+ this.service = service;
205
+ }
206
+ }
207
+ LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
208
+ LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LocalizedMessagesDirective, selector: "[kendoScrollViewLocalizedMessages]", providers: [
209
+ {
210
+ provide: ScrollViewMessages,
211
+ useExisting: forwardRef(() => LocalizedMessagesDirective)
212
+ }
213
+ ], usesInheritance: true, ngImport: i0 });
214
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
215
+ type: Directive,
216
+ args: [{
217
+ providers: [
218
+ {
219
+ provide: ScrollViewMessages,
220
+ useExisting: forwardRef(() => LocalizedMessagesDirective)
221
+ }
222
+ ],
223
+ selector: '[kendoScrollViewLocalizedMessages]'
224
+ }]
225
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
226
+
172
227
  /* eslint-disable @typescript-eslint/no-inferrable-types */
173
228
  let idx = 0;
174
229
  /**
@@ -577,6 +632,12 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
577
632
  useValue: 'kendo.scrollview'
578
633
  }
579
634
  ], 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: `
635
+
636
+ <ng-container kendoScrollViewLocalizedMessages
637
+ i18n-pagerButtonLabel="kendo.scrollview.pagerButtonLabel|The label for the buttons inside the ScrollView Pager"
638
+ pagerButtonLabel="{{ 'Item {itemIndex}' }}">
639
+ <ng-container>
640
+
580
641
  <ul class='k-scrollview-wrap'
581
642
  #itemWrapper
582
643
  role="list"
@@ -642,7 +703,7 @@ ScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
642
703
  </kendo-scrollview-pager>
643
704
  </div>
644
705
  <div class="k-sr-only" aria-live="polite"></div>
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: [
706
+ `, 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: LocalizedMessagesDirective, selector: "[kendoScrollViewLocalizedMessages]" }, { type: i5.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
646
707
  trigger('animateTo', [
647
708
  state('center, left, right', style({ transform: 'translateX(0)' })),
648
709
  transition('* => right', [
@@ -683,6 +744,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
683
744
  ],
684
745
  selector: 'kendo-scrollview',
685
746
  template: `
747
+
748
+ <ng-container kendoScrollViewLocalizedMessages
749
+ i18n-pagerButtonLabel="kendo.scrollview.pagerButtonLabel|The label for the buttons inside the ScrollView Pager"
750
+ pagerButtonLabel="{{ 'Item {itemIndex}' }}">
751
+ <ng-container>
752
+
686
753
  <ul class='k-scrollview-wrap'
687
754
  #itemWrapper
688
755
  role="list"
@@ -819,9 +886,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
819
886
  args: ['style.touch-action']
820
887
  }] } });
821
888
 
889
+ /**
890
+ * Custom component messages override default component messages
891
+ * ([see example]({% slug globalization_scrollview %}#toc-localization)).
892
+ */
893
+ class CustomMessagesComponent extends ScrollViewMessages {
894
+ constructor(service) {
895
+ super();
896
+ this.service = service;
897
+ }
898
+ get override() {
899
+ return true;
900
+ }
901
+ }
902
+ CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
903
+ CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CustomMessagesComponent, selector: "kendo-scrollview-messages", providers: [
904
+ {
905
+ provide: ScrollViewMessages,
906
+ useExisting: forwardRef(() => CustomMessagesComponent)
907
+ }
908
+ ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
909
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
910
+ type: Component,
911
+ args: [{
912
+ providers: [
913
+ {
914
+ provide: ScrollViewMessages,
915
+ useExisting: forwardRef(() => CustomMessagesComponent)
916
+ }
917
+ ],
918
+ selector: 'kendo-scrollview-messages',
919
+ template: ``
920
+ }]
921
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
922
+
822
923
  const DECLARATIONS = [
823
924
  ScrollViewComponent,
824
- ScrollViewPagerComponent
925
+ ScrollViewPagerComponent,
926
+ CustomMessagesComponent,
927
+ LocalizedMessagesDirective
825
928
  ];
826
929
  const EXPORTS = [
827
930
  ScrollViewComponent
@@ -861,7 +964,9 @@ class ScrollViewModule {
861
964
  }
862
965
  ScrollViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
863
966
  ScrollViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewModule, declarations: [ScrollViewComponent,
864
- ScrollViewPagerComponent], imports: [CommonModule, DraggableModule, IconsModule], exports: [ScrollViewComponent] });
967
+ ScrollViewPagerComponent,
968
+ CustomMessagesComponent,
969
+ LocalizedMessagesDirective], imports: [CommonModule, DraggableModule, IconsModule], exports: [ScrollViewComponent] });
865
970
  ScrollViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewModule, imports: [[CommonModule, DraggableModule, IconsModule]] });
866
971
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollViewModule, decorators: [{
867
972
  type: NgModule,
package/localization/custom-messages.component.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 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
+ * Custom component messages override default component messages
10
+ * ([see example]({% slug globalization_scrollview %}#toc-localization)).
11
+ */
12
+ export declare class CustomMessagesComponent extends ScrollViewMessages {
13
+ protected service: LocalizationService;
14
+ constructor(service: LocalizationService);
15
+ protected get override(): boolean;
16
+ static ɵfac: i0.ɵɵFactoryDeclaration<CustomMessagesComponent, never>;
17
+ static ɵcmp: i0.ɵɵComponentDeclaration<CustomMessagesComponent, "kendo-scrollview-messages", never, {}, {}, never, never>;
18
+ }
package/localization/localized-messages.directive.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 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>;
16
+ }
package/localization/messages.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 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
+ * The label of the buttons in the ScrollView pager. By default they follow the pattern 'Item {itemIndex}'.
13
+ * The default label text when the current item is 1 will be '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": "pagerButtonLabel"; }, {}, never>;
18
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-scrollview",
3
- "version": "12.0.0-develop.9",
3
+ "version": "12.0.0",
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": "12.0.0-develop.9",
27
- "@progress/kendo-angular-l10n": "12.0.0-develop.9",
28
- "@progress/kendo-angular-icons": "12.0.0-develop.9",
26
+ "@progress/kendo-angular-common": "12.0.0",
27
+ "@progress/kendo-angular-l10n": "12.0.0",
28
+ "@progress/kendo-angular-icons": "12.0.0",
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": "12.0.0-develop.9"
33
+ "@progress/kendo-angular-schematics": "12.0.0"
34
34
  },
35
35
  "schematics": "./schematics/collection.json",
36
36
  "module": "fesm2015/progress-kendo-angular-scrollview.mjs",
package/scrollview-pager.component.d.ts CHANGED
@@ -3,16 +3,21 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { EventEmitter } from '@angular/core';
6
+ import { LocalizationService } from '@progress/kendo-angular-l10n';
6
7
  import * as i0 from "@angular/core";
7
8
  /**
8
9
  * @hidden
9
10
  */
10
11
  export declare class ScrollViewPagerComponent {
12
+ private localization;
11
13
  activeIndex: number;
12
14
  data: any[];
13
15
  pagerIndexChange: EventEmitter<number>;
16
+ constructor(localization: LocalizationService);
14
17
  itemClass(idx: number): any;
15
18
  indexChange(selectedIndex: number): void;
19
+ pagerButtonLabel(itemIndex: number): string;
20
+ private replaceMessagePlaceholder;
16
21
  static ɵfac: i0.ɵɵFactoryDeclaration<ScrollViewPagerComponent, never>;
17
22
  static ɵcmp: i0.ɵɵComponentDeclaration<ScrollViewPagerComponent, "kendo-scrollview-pager", never, { "activeIndex": "activeIndex"; "data": "data"; }, { "pagerIndexChange": "pagerIndexChange"; }, never, never>;
18
23
  }
package/scrollview.module.d.ts CHANGED
@@ -5,9 +5,11 @@
5
5
  import * as i0 from "@angular/core";
6
6
  import * as i1 from "./scrollview.component";
7
7
  import * as i2 from "./scrollview-pager.component";
8
- import * as i3 from "@angular/common";
9
- import * as i4 from "@progress/kendo-angular-common";
10
- import * as i5 from "@progress/kendo-angular-icons";
8
+ import * as i3 from "./localization/custom-messages.component";
9
+ import * as i4 from "./localization/localized-messages.directive";
10
+ import * as i5 from "@angular/common";
11
+ import * as i6 from "@progress/kendo-angular-common";
12
+ import * as i7 from "@progress/kendo-angular-icons";
11
13
  /**
12
14
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
13
15
  * definition for the ScrollView component.
@@ -41,6 +43,6 @@ import * as i5 from "@progress/kendo-angular-icons";
41
43
  */
42
44
  export declare class ScrollViewModule {
43
45
  static ɵfac: i0.ɵɵFactoryDeclaration<ScrollViewModule, never>;
44
- static ɵmod: i0.ɵɵNgModuleDeclaration<ScrollViewModule, [typeof i1.ScrollViewComponent, typeof i2.ScrollViewPagerComponent], [typeof i3.CommonModule, typeof i4.DraggableModule, typeof i5.IconsModule], [typeof i1.ScrollViewComponent]>;
46
+ static ɵmod: i0.ɵɵNgModuleDeclaration<ScrollViewModule, [typeof i1.ScrollViewComponent, typeof i2.ScrollViewPagerComponent, typeof i3.CustomMessagesComponent, typeof i4.LocalizedMessagesDirective], [typeof i5.CommonModule, typeof i6.DraggableModule, typeof i7.IconsModule], [typeof i1.ScrollViewComponent]>;
45
47
  static ɵinj: i0.ɵɵInjectorDeclaration<ScrollViewModule>;
46
48
  }