@progress/kendo-angular-progressbar 3.1.1 → 3.1.2-dev.202211071017

package/fesm2015/kendo-angular-progressbar.js

@@ -3,13 +3,13 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { isDevMode, Component, HostBinding, Input, EventEmitter, Output, ViewChild, Directive, ContentChild, NgModule } from '@angular/core';
+import { isDevMode, Component, HostBinding, Input, Directive, forwardRef, EventEmitter, Output, ViewChild, ContentChild, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-l10n';
-import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import * as i2$1 from '@progress/kendo-angular-common';
+import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import * as i2 from '@progress/kendo-angular-common';
 import { hasObservers, isChanged, ResizeSensorModule } from '@progress/kendo-angular-common';
-import * as i2 from '@angular/common';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
@@ -21,7 +21,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-progressbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1659530339,
+    publishDate: 1667816241,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -144,9 +144,11 @@ class ProgressBarBase {
     /**
      * @hidden
      */
-    constructor(localization) {
+    constructor(elem, renderer, localization) {
+        this.elem = elem;
+        this.renderer = renderer;
         this.localization = localization;
-        this.widgetClasses = true;
+        this.hostClasses = true;
         this.roleAttribute = 'progressbar';
         /**
          * The maximum value of the ProgressBar.
@@ -260,6 +262,12 @@ class ProgressBarBase {
     get _progressRatio() {
         return calculateRatio(this.min, this.max, this.displayValue);
     }
+    ngAfterViewInit() {
+        const elem = this.elem.nativeElement;
+        const label = this.localization.get('progressBarLabel');
+        this.renderer.setAttribute(elem, 'title', label);
+        this.renderer.setAttribute(elem, 'aria-label', label);
+    }
     ngOnChanges(changes) {
         const min = extractValueFromChanges(changes, 'min', this.min);
         const max = extractValueFromChanges(changes, 'max', this.max);
@@ -287,17 +295,14 @@ class ProgressBarBase {
         }
     }
 }
-ProgressBarBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarBase, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ProgressBarBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProgressBarBase, selector: "ng-component", inputs: { max: "max", min: "min", value: "value", orientation: "orientation", disabled: "disabled", reverse: "reverse", indeterminate: "indeterminate" }, host: { properties: { "class.k-widget": "this.widgetClasses", "class.k-progressbar": "this.widgetClasses", "class.k-progressbar-horizontal": "this.isHorizontal", "class.k-progressbar-vertical": "this.isVertical", "class.k-disabled": "this.disabledClass", "class.k-progressbar-reverse": "this.reverseClass", "class.k-progressbar-indeterminate": "this.indeterminateClass", "attr.dir": "this.dirAttribute", "attr.role": "this.roleAttribute", "attr.aria-valuemin": "this.ariaMinAttribute", "attr.aria-valuemax": "this.ariaMaxAttribute", "attr.aria-valuenow": "this.ariaValueAttribute" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+ProgressBarBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarBase, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ProgressBarBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProgressBarBase, selector: "ng-component", inputs: { max: "max", min: "min", value: "value", orientation: "orientation", disabled: "disabled", reverse: "reverse", indeterminate: "indeterminate" }, host: { properties: { "class.k-progressbar": "this.hostClasses", "class.k-progressbar-horizontal": "this.isHorizontal", "class.k-progressbar-vertical": "this.isVertical", "class.k-disabled": "this.disabledClass", "class.k-progressbar-reverse": "this.reverseClass", "class.k-progressbar-indeterminate": "this.indeterminateClass", "attr.dir": "this.dirAttribute", "attr.role": "this.roleAttribute", "attr.aria-valuemin": "this.ariaMinAttribute", "attr.aria-valuemax": "this.ariaMaxAttribute", "attr.aria-valuenow": "this.ariaValueAttribute" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarBase, decorators: [{
             type: Component,
             args: [{
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { widgetClasses: [{
-                type: HostBinding,
-                args: ['class.k-widget']
-            }, {
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-progressbar']
             }], isHorizontal: [{
@@ -346,6 +351,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @hidden
+ */
+class ProgressBarMessages extends ComponentMessages {
+}
+ProgressBarMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+ProgressBarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ProgressBarMessages, selector: "kendo-progressbar-messages-base", inputs: { progressBarLabel: "progressBarLabel" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarMessages, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'kendo-progressbar-messages-base'
+                }]
+        }], propDecorators: { progressBarLabel: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class LocalizedProgressBarMessagesDirective extends ProgressBarMessages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+}
+LocalizedProgressBarMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedProgressBarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedProgressBarMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]", providers: [
+        {
+            provide: ProgressBarMessages,
+            useExisting: forwardRef(() => LocalizedProgressBarMessagesDirective)
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedProgressBarMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: ProgressBarMessages,
+                            useExisting: forwardRef(() => LocalizedProgressBarMessagesDirective)
+                        }
+                    ],
+                    selector: `[kendoProgressBarLocalizedMessages]`
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
 /**
  * Represents the [Kendo UI ProgressBar component for Angular]({% slug overview_progressbar %}).
  *
@@ -367,11 +418,12 @@ class ProgressBarComponent extends ProgressBarBase {
     /**
      * @hidden
      */
-    constructor(localization, zone, renderer) {
-        super(localization);
+    constructor(localization, elem, renderer, zone) {
+        super(elem, renderer, localization);
         this.localization = localization;
-        this.zone = zone;
+        this.elem = elem;
         this.renderer = renderer;
+        this.zone = zone;
         /**
          * Determines whether the status label will be visible.
          * Defaults to `true`—the label will be visible and displayed with the default
@@ -552,7 +604,7 @@ class ProgressBarComponent extends ProgressBarBase {
         });
     }
 }
-ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: { label: "label", progressCssStyle: "progressCssStyle", progressCssClass: "progressCssClass", emptyCssStyle: "emptyCssStyle", emptyCssClass: "emptyCssClass", animation: "animation" }, outputs: { animationEnd: "animationEnd" }, providers: [
         LocalizationService,
         {
@@ -560,6 +612,11 @@ ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useValue: 'kendo.progressbar'
         }
     ], viewQueries: [{ propertyName: "progressStatusElement", first: true, predicate: ["progressStatus"], descendants: true }, { propertyName: "progressStatusWrapperElement", first: true, predicate: ["progressStatusWrap"], descendants: true }], exportAs: ["kendoProgressBar"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoProgressBarLocalizedMessages
+            i18n-progressBarLabel="kendo.progressbar.progressBarLabel|The title for the ProgressBar component."
+            progressBarLabel="Progressbar"
+        >
+        </ng-container>
         <span class="k-progress-status-wrap"
             [class.k-progress-start]="isPositionStart"
             [class.k-progress-center]="isPositionCenter"
@@ -589,13 +646,18 @@ ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 <span *ngIf="showLabel" class="k-progress-status">{{formattedLabelValue}}</span>
             </span>
         </div>
-       `, isInline: true, directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+       `, isInline: true, directives: [{ type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoProgressBar',
                     selector: 'kendo-progressbar',
                     template: `
+        <ng-container kendoProgressBarLocalizedMessages
+            i18n-progressBarLabel="kendo.progressbar.progressBarLabel|The title for the ProgressBar component."
+            progressBarLabel="Progressbar"
+        >
+        </ng-container>
         <span class="k-progress-status-wrap"
             [class.k-progress-start]="isPositionStart"
             [class.k-progress-center]="isPositionCenter"
@@ -634,7 +696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { label: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { label: [{
                 type: Input
             }], progressCssStyle: [{
                 type: Input
@@ -677,9 +739,11 @@ class ChunkProgressBarComponent extends ProgressBarBase {
     /**
      * @hidden
      */
-    constructor(localization) {
-        super(localization);
+    constructor(localization, elem, renderer) {
+        super(elem, renderer, localization);
         this.localization = localization;
+        this.elem = elem;
+        this.renderer = renderer;
         /**
          * Sets the number of chunks into which the ChunkProgressBar will be split.
          * Defaults to `5`.
@@ -725,7 +789,7 @@ class ChunkProgressBarComponent extends ProgressBarBase {
         return this._orientationStyles;
     }
 }
-ChunkProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChunkProgressBarComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ChunkProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChunkProgressBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 ChunkProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChunkProgressBarComponent, selector: "kendo-chunkprogressbar", inputs: { chunkCount: "chunkCount", progressCssStyle: "progressCssStyle", progressCssClass: "progressCssClass", emptyCssStyle: "emptyCssStyle", emptyCssClass: "emptyCssClass" }, providers: [
         LocalizationService,
         {
@@ -733,6 +797,11 @@ ChunkProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             useValue: 'kendo.chunkprogressbar'
         }
     ], exportAs: ["kendoChunkProgressBar"], usesInheritance: true, ngImport: i0, template: `
+        <ng-container kendoProgressBarLocalizedMessages
+            i18n-progressBarLabel="kendo.chunkprogressbar.progressBarLabel|The title for the ChunkProgressBar component."
+            progressBarLabel="Chunk progressbar"
+        >
+        </ng-container>
         <ul class="k-reset">
             <li class="k-item" *ngFor="let chunk of chunks; let i = index;"
                 [class.k-first]="i === 0"
@@ -745,13 +814,18 @@ ChunkProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                 >
             </li>
         </ul>
-    `, isInline: true, directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, directives: [{ type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChunkProgressBarComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoChunkProgressBar',
                     selector: 'kendo-chunkprogressbar',
                     template: `
+        <ng-container kendoProgressBarLocalizedMessages
+            i18n-progressBarLabel="kendo.chunkprogressbar.progressBarLabel|The title for the ChunkProgressBar component."
+            progressBarLabel="Chunk progressbar"
+        >
+        </ng-container>
         <ul class="k-reset">
             <li class="k-item" *ngFor="let chunk of chunks; let i = index;"
                 [class.k-first]="i === 0"
@@ -773,7 +847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { chunkCount: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { chunkCount: [{
                 type: Input
             }], progressCssStyle: [{
                 type: Input
@@ -786,7 +860,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 /**
- * A directive that selects a template within the <kendo-circularprogessbar> component which will be used for the center template. ([see example]({% slug  %})).
+ * A directive that selects a template within the <kendo-circularprogessbar> component which will be used for the center template.
+ * ([see example]({% slug center_template_circularprogressbar %})).
  */
 class CircularProgressbarCenterTemplateDirective {
     constructor(templateRef) {
@@ -804,7 +879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
 const DEFAULT_SURFACE_SIZE = 200;
 /**
- * Represents the [Kendo UI Circular ProgressBar component for Angular]({% slug circular_progressbar %}).
+ * Represents the [Kendo UI Circular ProgressBar component for Angular]({% slug overview_circularprogressbar %}).
  *
  * @example
  * ```ts-preview
@@ -820,13 +895,14 @@ const DEFAULT_SURFACE_SIZE = 200;
  * ```
  */
 class CircularProgressBarComponent {
-    constructor(renderer, cdr, localizationService, element, zone) {
+    constructor(renderer, cdr, localization, element, zone) {
         this.renderer = renderer;
         this.cdr = cdr;
-        this.localizationService = localizationService;
+        this.localization = localization;
         this.element = element;
         this.zone = zone;
         this.hostClasses = true;
+        this.roleAttribute = 'progressbar';
         /**
          * Indicates whether an animation will be played on value changes.
          *
@@ -851,7 +927,16 @@ class CircularProgressBarComponent {
         this.internalValue = 0;
         this.subscriptions = new Subscription();
         validatePackage(packageMetadata);
-        this.subscriptions.add(this.localizationService.changes.subscribe(this.rtlChange.bind(this)));
+        this.subscriptions.add(this.localization.changes.subscribe(this.rtlChange.bind(this)));
+    }
+    get ariaMinAttribute() {
+        return String(this.min);
+    }
+    get ariaMaxAttribute() {
+        return String(this.max);
+    }
+    get ariaValueAttribute() {
+        return this.indeterminate ? undefined : String(this.value);
     }
     /**
      * Sets the default value of the Circular Progressbar between `min` and `max`.
@@ -910,6 +995,13 @@ class CircularProgressBarComponent {
         return this._indeterminate;
     }
     ngAfterViewInit() {
+        const elem = this.element.nativeElement;
+        const label = this.localization.get('progressBarLabel');
+        const progressCalculations = [
+            { method: 'setAttribute', el: elem, attr: 'aria-label', attrValue: label },
+            { method: 'setAttribute', el: elem, attr: 'title', attrValue: label }
+        ];
+        setProgressBarStyles(progressCalculations, this.renderer);
         this.initProgressArc();
     }
     ngOnChanges(changes) {
@@ -1135,7 +1227,7 @@ class CircularProgressBarComponent {
         }
     }
     setDirection() {
-        this.rtl = this.localizationService.rtl;
+        this.rtl = this.localization.rtl;
         if (this.element) {
             this.renderer.setAttribute(this.element.nativeElement, 'dir', this.rtl ? 'rtl' : 'ltr');
         }
@@ -1144,19 +1236,24 @@ class CircularProgressBarComponent {
         }
     }
     rtlChange() {
-        if (this.element && this.rtl !== this.localizationService.rtl) {
+        if (this.element && this.rtl !== this.localization.rtl) {
             this.setDirection();
         }
     }
 }
 CircularProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressBarComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-CircularProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CircularProgressBarComponent, selector: "kendo-circularprogressbar", inputs: { value: "value", max: "max", min: "min", animation: "animation", opacity: "opacity", indeterminate: "indeterminate", progressColor: "progressColor" }, outputs: { animationEnd: "animationEnd" }, host: { properties: { "class.k-circular-progressbar": "this.hostClasses" } }, providers: [
+CircularProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CircularProgressBarComponent, selector: "kendo-circularprogressbar", inputs: { value: "value", max: "max", min: "min", animation: "animation", opacity: "opacity", indeterminate: "indeterminate", progressColor: "progressColor" }, outputs: { animationEnd: "animationEnd" }, host: { properties: { "class.k-circular-progressbar": "this.hostClasses", "attr.aria-valuemin": "this.ariaMinAttribute", "attr.aria-valuemax": "this.ariaMaxAttribute", "attr.aria-valuenow": "this.ariaValueAttribute", "attr.role": "this.roleAttribute" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.circularprogressbar'
         }
     ], queries: [{ propertyName: "centerTemplate", first: true, predicate: CircularProgressbarCenterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "progress", first: true, predicate: ["progress"], descendants: true }, { propertyName: "scale", first: true, predicate: ["scale"], descendants: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true }, { propertyName: "surface", first: true, predicate: ["surface"], descendants: true }], exportAs: ["kendoCircularProgressBar"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoProgressBarLocalizedMessages
+            i18n-progressBarLabel="kendo.circularprogressbar.progressBarLabel|The title for the Circular ProgressBar component."
+            progressBarLabel="Circular progressbar"
+        >
+        </ng-container>
         <div #surface class="k-circular-progressbar-surface">
             <div>
                 <svg #svg>
@@ -1171,13 +1268,18 @@ CircularProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             </div>
         </div>
         <kendo-resize-sensor (resize)="onResize($event)"></kendo-resize-sensor>
-    `, isInline: true, components: [{ type: i2$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i2.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CircularProgressBarComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoCircularProgressBar',
                     selector: 'kendo-circularprogressbar',
                     template: `
+        <ng-container kendoProgressBarLocalizedMessages
+            i18n-progressBarLabel="kendo.circularprogressbar.progressBarLabel|The title for the Circular ProgressBar component."
+            progressBarLabel="Circular progressbar"
+        >
+        </ng-container>
         <div #surface class="k-circular-progressbar-surface">
             <div>
                 <svg #svg>
@@ -1203,6 +1305,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-circular-progressbar']
+            }], ariaMinAttribute: [{
+                type: HostBinding,
+                args: ['attr.aria-valuemin']
+            }], ariaMaxAttribute: [{
+                type: HostBinding,
+                args: ['attr.aria-valuemax']
+            }], ariaValueAttribute: [{
+                type: HostBinding,
+                args: ['attr.aria-valuenow']
+            }], roleAttribute: [{
+                type: HostBinding,
+                args: ['attr.role']
             }], value: [{
                 type: Input
             }], max: [{
@@ -1236,10 +1350,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [CircularProgressbarCenterTemplateDirective]
             }] } });
 
-const COMPONENT_DIRECTIVES = [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBarComponent, CircularProgressbarCenterTemplateDirective];
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug rtl_layout %})).
+ */
+class ProgressBarCustomMessagesComponent extends ProgressBarMessages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+}
+ProgressBarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ProgressBarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProgressBarCustomMessagesComponent, selector: "kendo-progressbar-messages", providers: [
+        {
+            provide: ProgressBarMessages,
+            useExisting: forwardRef(() => ProgressBarCustomMessagesComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarCustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: ProgressBarMessages,
+                            useExisting: forwardRef(() => ProgressBarCustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-progressbar-messages',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+const COMPONENT_DIRECTIVES = [
+    ProgressBarComponent,
+    ChunkProgressBarComponent,
+    CircularProgressBarComponent,
+    CircularProgressbarCenterTemplateDirective,
+    LocalizedProgressBarMessagesDirective,
+    ProgressBarCustomMessagesComponent
+];
 const MODULES = [CommonModule, ResizeSensorModule];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmodules'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
  * definition for the ProgressBar components.
  *
  * @example
@@ -1272,7 +1427,17 @@ const MODULES = [CommonModule, ResizeSensorModule];
 class ProgressBarModule {
 }
 ProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBarComponent, CircularProgressbarCenterTemplateDirective], imports: [CommonModule, ResizeSensorModule], exports: [ProgressBarComponent, ChunkProgressBarComponent, CircularProgressBarComponent, CircularProgressbarCenterTemplateDirective] });
+ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent,
+        ChunkProgressBarComponent,
+        CircularProgressBarComponent,
+        CircularProgressbarCenterTemplateDirective,
+        LocalizedProgressBarMessagesDirective,
+        ProgressBarCustomMessagesComponent], imports: [CommonModule, ResizeSensorModule], exports: [ProgressBarComponent,
+        ChunkProgressBarComponent,
+        CircularProgressBarComponent,
+        CircularProgressbarCenterTemplateDirective,
+        LocalizedProgressBarMessagesDirective,
+        ProgressBarCustomMessagesComponent] });
 ProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, imports: [MODULES] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProgressBarModule, decorators: [{
             type: NgModule,
@@ -1287,5 +1452,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ChunkProgressBarComponent, CircularProgressBarComponent, CircularProgressbarCenterTemplateDirective, ProgressBarComponent, ProgressBarModule };
+export { ChunkProgressBarComponent, CircularProgressBarComponent, CircularProgressbarCenterTemplateDirective, LocalizedProgressBarMessagesDirective, ProgressBarComponent, ProgressBarCustomMessagesComponent, ProgressBarModule };
 

package/main.d.ts

@@ -14,3 +14,5 @@ export { ProgressBarAnimation } from './types/progressbar-animation.interface';
 export { ProgressBarModule } from './progressbar.module';
 export { CircularProgressbarCenterTemplateDirective } from './circularprogressbar/center-template.directive';
 export { ProgressColor } from './circularprogressbar/models/circular-progressbar-progress-color-interface';
+export { LocalizedProgressBarMessagesDirective } from './common/localization/localized-messages.directive';
+export { ProgressBarCustomMessagesComponent } from './common/localization/custom-messages.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-progressbar",
-  "version": "3.1.1",
+  "version": "3.1.2-dev.202211071017",
   "description": "Kendo UI Angular component starter template",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",

package/progressbar.component.d.ts

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { AnimationEndEvent } from './types/animation-end-event';
 import { ProgressBarBase } from './common/progressbar-base';
-import { NgZone, Renderer2, EventEmitter, SimpleChanges } from '@angular/core';
+import { NgZone, Renderer2, ElementRef, EventEmitter, SimpleChanges } from '@angular/core';
 import { LabelSettings } from './types/label-settings.interface';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ProgressBarAnimation } from './types/progressbar-animation.interface';
@@ -28,8 +28,9 @@ import * as i0 from "@angular/core";
  */
 export declare class ProgressBarComponent extends ProgressBarBase {
     localization: LocalizationService;
+    elem: ElementRef;
+    renderer: Renderer2;
     private zone;
-    private renderer;
     /**
      * Determines whether the status label will be visible.
      * Defaults to `true`—the label will be visible and displayed with the default
@@ -39,7 +40,7 @@ export declare class ProgressBarComponent extends ProgressBarBase {
     /**
      * The CSS styles that will be rendered on the inner element which represents the full portion of the progress bar
      * ([see example]({% slug progressbar_appearance %})).
-     * Supports the type of values that are supported by [`ngStyle`]({{ site.data.urls.angular['ngstyleapi'] }}).
+     * Supports the type of values that are supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
      */
     progressCssStyle: {
         [key: string]: string;
@@ -47,7 +48,7 @@ export declare class ProgressBarComponent extends ProgressBarBase {
     /**
      * The CSS classes that will be rendered on the inner element which represents the full portion of the progress bar
      * ([see example]({% slug progressbar_appearance %})).
-     * Supports the type of values that are supported by [`ngClass`]({{ site.data.urls.angular['ngclassapi'] }}).
+     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
     progressCssClass: string | string[] | Set<string> | {
         [key: string]: any;
@@ -55,7 +56,7 @@ export declare class ProgressBarComponent extends ProgressBarBase {
     /**
      * The CSS styles that will be rendered on the inner element which represents the empty portion of the progress bar
      * ([see example]({% slug progressbar_appearance %})).
-     * Supports the type of values that are supported by [`ngStyle`]({{ site.data.urls.angular['ngstyleapi'] }}).
+     * Supports the type of values that are supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
      */
     emptyCssStyle: {
         [key: string]: string;
@@ -63,7 +64,7 @@ export declare class ProgressBarComponent extends ProgressBarBase {
     /**
      * The CSS classes that will be rendered on the inner element which represents the empty portion of the progress bar
      * ([see example]({% slug progressbar_appearance %})).
-     * Supports the type of values that are supported by [`ngClass`]({{ site.data.urls.angular['ngclassapi'] }}).
+     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
     emptyCssClass: string | string[] | Set<string> | {
         [key: string]: any;
@@ -109,7 +110,7 @@ export declare class ProgressBarComponent extends ProgressBarBase {
     /**
      * @hidden
      */
-    constructor(localization: LocalizationService, zone: NgZone, renderer: Renderer2);
+    constructor(localization: LocalizationService, elem: ElementRef, renderer: Renderer2, zone: NgZone);
     /**
      * @hidden
      */

package/progressbar.module.d.ts

@@ -7,10 +7,12 @@ import * as i1 from "./progressbar.component";
 import * as i2 from "./chunk/chunk-progressbar.component";
 import * as i3 from "./circularprogressbar/circular-progressbar.component";
 import * as i4 from "./circularprogressbar/center-template.directive";
-import * as i5 from "@angular/common";
-import * as i6 from "@progress/kendo-angular-common";
+import * as i5 from "./common/localization/localized-messages.directive";
+import * as i6 from "./common/localization/custom-messages.component";
+import * as i7 from "@angular/common";
+import * as i8 from "@progress/kendo-angular-common";
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmodules'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
  * definition for the ProgressBar components.
  *
  * @example
@@ -42,6 +44,6 @@ import * as i6 from "@progress/kendo-angular-common";
  */
 export declare class ProgressBarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ProgressBarModule, [typeof i1.ProgressBarComponent, typeof i2.ChunkProgressBarComponent, typeof i3.CircularProgressBarComponent, typeof i4.CircularProgressbarCenterTemplateDirective], [typeof i5.CommonModule, typeof i6.ResizeSensorModule], [typeof i1.ProgressBarComponent, typeof i2.ChunkProgressBarComponent, typeof i3.CircularProgressBarComponent, typeof i4.CircularProgressbarCenterTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ProgressBarModule, [typeof i1.ProgressBarComponent, typeof i2.ChunkProgressBarComponent, typeof i3.CircularProgressBarComponent, typeof i4.CircularProgressbarCenterTemplateDirective, typeof i5.LocalizedProgressBarMessagesDirective, typeof i6.ProgressBarCustomMessagesComponent], [typeof i7.CommonModule, typeof i8.ResizeSensorModule], [typeof i1.ProgressBarComponent, typeof i2.ChunkProgressBarComponent, typeof i3.CircularProgressBarComponent, typeof i4.CircularProgressbarCenterTemplateDirective, typeof i5.LocalizedProgressBarMessagesDirective, typeof i6.ProgressBarCustomMessagesComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ProgressBarModule>;
 }