@progress/kendo-angular-progressbar
Version:
Kendo UI Angular component starter template
181 lines (180 loc) • 8.42 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ProgressBarBase } from '../common/progressbar-base';
import { Component, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
import { NgFor, NgClass, NgStyle } from '@angular/common';
import { LocalizedProgressBarMessagesDirective } from '../common/localization/localized-messages.directive';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
/**
* Represents the [Kendo UI ChunkProgressBar component for Angular]({% slug overview_chunkprogressbar %}).
*
* @example
* ```ts-preview
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-chunkprogressbar [value]="value">
* </kendo-chunkprogressbar>
* `
* })
* class AppComponent {
* public value = 40;
* }
* ```
*/
export class ChunkProgressBarComponent extends ProgressBarBase {
localization;
elem;
renderer;
chunkClass = true;
/**
* Sets the number of chunks into which the ChunkProgressBar will be split.
* Defaults to `5`.
*/
chunkCount = 5;
/**
* @hidden
*/
get chunks() {
const count = this.chunkCount;
const chunks = Array(count).fill(false);
const completedChunks = Math.floor(this._progressRatio * count);
for (let i = 0; i < completedChunks; i++) {
chunks[i] = true;
}
return chunks;
}
/**
* The CSS styles that will be rendered on the full chunk elements ([see example]({% slug chunkprogressbar_appearance %})).
* Supports the type of values that are supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
progressCssStyle;
/**
* The CSS classes that will be rendered on the full chunk elements ([see example]({% slug chunkprogressbar_appearance %})).
* Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
*/
progressCssClass;
/**
* The CSS styles that will be rendered on the empty chunk elements ([see example]({% slug chunkprogressbar_appearance %})).
* Supports the type of values that are supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
*/
emptyCssStyle;
/**
* The CSS classes that will be rendered on the empty chunk elements ([see example]({% slug chunkprogressbar_appearance %})).
* Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
emptyCssClass;
/**
* @hidden
*/
get chunkSizePercentage() {
return 100 / this.chunkCount;
}
/**
* @hidden
*/
get orientationStyles() {
if (this.orientation === 'horizontal') {
this._orientationStyles.width = `${this.chunkSizePercentage}%`;
this._orientationStyles.height = null;
}
else {
this._orientationStyles.height = `${this.chunkSizePercentage}%`;
this._orientationStyles.width = null;
}
return this._orientationStyles;
}
_orientationStyles = {
width: `${this.chunkSizePercentage}%`,
height: null
};
/**
* @hidden
*/
constructor(localization, elem, renderer) {
super(elem, renderer, localization);
this.localization = localization;
this.elem = elem;
this.renderer = renderer;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChunkProgressBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChunkProgressBarComponent, isStandalone: true, selector: "kendo-chunkprogressbar", inputs: { chunkCount: "chunkCount", progressCssStyle: "progressCssStyle", progressCssClass: "progressCssClass", emptyCssStyle: "emptyCssStyle", emptyCssClass: "emptyCssClass" }, host: { properties: { "class.k-chunk-progressbar": "this.chunkClass" } }, providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.chunkprogressbar'
}
], exportAs: ["kendoChunkProgressBar"], usesInheritance: true, ngImport: i0, template: `
<ng-container kendoProgressBarLocalizedMessages
i18n-progressBarLabel="kendo.chunkprogressbar.progressBarLabel|The aria-label attribute for the ChunkProgressBar component."
progressBarLabel="Chunk progressbar"
>
</ng-container>
<ul class="k-reset k-progressbar-chunks">
<li class="k-progressbar-chunk" *ngFor="let chunk of chunks; let i = index;"
[class.k-first]="i === 0"
[class.k-last]="i === chunkCount - 1"
[class.k-selected]="chunk"
[ngClass]="chunk ? progressCssClass : emptyCssClass"
[ngStyle]="chunk ? progressCssStyle : emptyCssStyle"
[style.width]="orientationStyles.width"
[style.height]="orientationStyles.height"
>
</li>
</ul>
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChunkProgressBarComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoChunkProgressBar',
selector: 'kendo-chunkprogressbar',
template: `
<ng-container kendoProgressBarLocalizedMessages
i18n-progressBarLabel="kendo.chunkprogressbar.progressBarLabel|The aria-label attribute for the ChunkProgressBar component."
progressBarLabel="Chunk progressbar"
>
</ng-container>
<ul class="k-reset k-progressbar-chunks">
<li class="k-progressbar-chunk" *ngFor="let chunk of chunks; let i = index;"
[class.k-first]="i === 0"
[class.k-last]="i === chunkCount - 1"
[class.k-selected]="chunk"
[ngClass]="chunk ? progressCssClass : emptyCssClass"
[ngStyle]="chunk ? progressCssStyle : emptyCssStyle"
[style.width]="orientationStyles.width"
[style.height]="orientationStyles.height"
>
</li>
</ul>
`,
providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.chunkprogressbar'
}
],
standalone: true,
imports: [LocalizedProgressBarMessagesDirective, NgFor, NgClass, NgStyle]
}]
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { chunkClass: [{
type: HostBinding,
args: ['class.k-chunk-progressbar']
}], chunkCount: [{
type: Input
}], progressCssStyle: [{
type: Input
}], progressCssClass: [{
type: Input
}], emptyCssStyle: [{
type: Input
}], emptyCssClass: [{
type: Input
}] } });