@progress/kendo-angular-progressbar
Version:
Kendo UI Angular component starter template
229 lines (228 loc) • 8.64 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 { LocalizationService } from '@progress/kendo-angular-l10n';
import { HostBinding, Input, Component, ElementRef, Renderer2 } from '@angular/core';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from '../package-metadata';
import { validateRange, adjustValueToRange, calculateRatio, extractValueFromChanges } from './util';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
/**
* @hidden
*/
export class ProgressBarBase {
elem;
renderer;
localization;
hostClasses = true;
get isHorizontal() {
return this.orientation === 'horizontal';
}
get isVertical() {
return this.orientation === 'vertical';
}
get disabledClass() {
return this.disabled;
}
get reverseClass() {
return this.reverse;
}
get indeterminateClass() {
return this.indeterminate;
}
get dirAttribute() {
return this.direction;
}
roleAttribute = 'progressbar';
get ariaMinAttribute() {
return String(this.min);
}
get ariaMaxAttribute() {
return String(this.max);
}
get ariaValueAttribute() {
return this.indeterminate ? undefined : String(this.displayValue);
}
/**
* The maximum value of the ProgressBar.
* Defaults to `100`.
*/
max = 100;
/**
* The minimum value of the ProgressBar.
* Defaults to `0`.
*/
min = 0;
/**
* The value of the ProgressBar.
* Has to be between `min` and `max`.
* By default, the value is equal to the `min` value.
*/
/**
* The value of the ProgressBar.
* Has to be between `min` and `max`.
* Defaults to `0`.
*/
value = 0;
/**
* @hidden
*/
get isCompleted() {
return this.value === this.max;
}
/**
* @hidden
*/
get statusWidth() {
return this.orientation === 'horizontal' ? this._progressRatio * 100 : 100;
}
/**
* @hidden
*/
get statusHeight() {
return this.orientation === 'vertical' ? this._progressRatio * 100 : 100;
}
/**
* @hidden
*/
get statusWrapperWidth() {
return this.orientation === 'horizontal' ? 100 / this._progressRatio : 100;
}
/**
* @hidden
*/
get statusWrapperHeight() {
return this.orientation === 'vertical' ? 100 / this._progressRatio : 100;
}
get _progressRatio() {
return calculateRatio(this.min, this.max, this.displayValue);
}
/**
* Defines the orientation of the ProgressBar
* ([see example]({% slug progressbar_orientation %})).
* Defaults to `horizontal`.
*/
orientation = 'horizontal';
/**
* If set to `true`, the ProgressBar will be disabled
* ([see example]({% slug progressbar_disabled %})).
* It will still allow you to change its value.
* Defaults to `false`.
*/
disabled = false;
/**
* If set to `true`, the ProgressBar will be reversed
* ([see example]({% slug progressbar_direction %})).
* Defaults to `false`.
*/
reverse = false;
/**
* Sets the `indeterminate` state of the ProgressBar.
* Defaults to `false`.
*/
indeterminate = false;
direction;
localizationChangeSubscription;
displayValue = 0;
previousValue = 0;
/**
* @hidden
*/
constructor(elem, renderer, localization) {
this.elem = elem;
this.renderer = renderer;
this.localization = localization;
validatePackage(packageMetadata);
this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
this.direction = rtl ? 'rtl' : 'ltr';
});
}
ngAfterViewInit() {
const elem = this.elem.nativeElement;
const label = this.localization.get('progressBarLabel');
this.renderer.setAttribute(elem, 'aria-label', label);
}
ngOnChanges(changes) {
const min = extractValueFromChanges(changes, 'min', this.min);
const max = extractValueFromChanges(changes, 'max', this.max);
const value = extractValueFromChanges(changes, 'value', this.value);
if (changes['min'] || changes['max'] || changes['value']) {
if (changes['min'] || changes['max']) {
validateRange(min, max);
}
if (changes['value']) {
if (value == null || Number.isNaN(value)) {
this.value = min;
}
const previousValue = this.displayValue;
this.displayValue = adjustValueToRange(this.min, this.max, value);
this.previousValue = previousValue;
}
this.min = min;
this.max = max;
this.displayValue = adjustValueToRange(this.min, this.max, value);
}
}
ngOnDestroy() {
if (this.localizationChangeSubscription) {
this.localizationChangeSubscription.unsubscribe();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarBase, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: ProgressBarBase, decorators: [{
type: Component,
args: [{
template: ''
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
type: HostBinding,
args: ['class.k-progressbar']
}], isHorizontal: [{
type: HostBinding,
args: ['class.k-progressbar-horizontal']
}], isVertical: [{
type: HostBinding,
args: ['class.k-progressbar-vertical']
}], disabledClass: [{
type: HostBinding,
args: ['class.k-disabled']
}], reverseClass: [{
type: HostBinding,
args: ['class.k-progressbar-reverse']
}], indeterminateClass: [{
type: HostBinding,
args: ['class.k-progressbar-indeterminate']
}], dirAttribute: [{
type: HostBinding,
args: ['attr.dir']
}], roleAttribute: [{
type: HostBinding,
args: ['attr.role']
}], ariaMinAttribute: [{
type: HostBinding,
args: ['attr.aria-valuemin']
}], ariaMaxAttribute: [{
type: HostBinding,
args: ['attr.aria-valuemax']
}], ariaValueAttribute: [{
type: HostBinding,
args: ['attr.aria-valuenow']
}], max: [{
type: Input
}], min: [{
type: Input
}], value: [{
type: Input
}], orientation: [{
type: Input
}], disabled: [{
type: Input
}], reverse: [{
type: Input
}], indeterminate: [{
type: Input
}] } });