igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
729 lines (722 loc) • 32.7 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, TemplateRef, Directive, EventEmitter, ChangeDetectorRef, NgZone, booleanAttribute, HostBinding, Input, Output, Component, Renderer2, ViewChild, ContentChild, NgModule } from '@angular/core';
import { NgClass, NgTemplateOutlet } from '@angular/common';
class IgxProgressBarTextTemplateDirective {
constructor() {
this.template = inject(TemplateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxProgressBarTextTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxProgressBarTextTemplateDirective, isStandalone: true, selector: "[igxProgressBarText]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxProgressBarTextTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxProgressBarText]',
standalone: true
}]
}] });
class IgxProgressBarGradientDirective {
constructor() {
this.template = inject(TemplateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxProgressBarGradientDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxProgressBarGradientDirective, isStandalone: true, selector: "[igxProgressBarGradient]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxProgressBarGradientDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxProgressBarGradient]',
standalone: true
}]
}] });
const ONE_PERCENT = 0.01;
const MIN_VALUE = 0;
const IgxTextAlign = {
START: 'start',
CENTER: 'center',
END: 'end'
};
const IgxProgressType = {
ERROR: 'error',
INFO: 'info',
WARNING: 'warning',
SUCCESS: 'success'
};
const valueInRange = (value, max, min = 0) => Math.max(Math.min(value, max), min);
/**
* @hidden
*/
class BaseProgressDirective {
constructor() {
/**
* An event, which is triggered after progress is changed.
* ```typescript
* public progressChange(event) {
* alert("Progress made!");
* }
* //...
* ```
* ```html
* <igx-circular-bar (progressChanged)="progressChange($event)"></igx-circular-bar>
* <igx-linear-bar (progressChanged)="progressChange($event)"></igx-linear-bar>
* ```
*/
this.progressChanged = new EventEmitter();
/**
* Sets/Gets progressbar animation duration. By default, it is 2000ms.
* ```html
* <igx-linear-bar [animationDuration]="3000"></igx-linear-bar>
* <igx-circular-bar [animationDuration]="3000"></igx-linear-bar>
* ```
*/
this.animationDuration = 2000;
this._contentInit = false;
this._indeterminate = false;
this._max = 100;
this._value = MIN_VALUE;
this._animate = true;
this._fraction = 0;
this._integer = 0;
this._cdr = inject(ChangeDetectorRef);
this._zone = inject(NgZone);
}
/**
* Sets progressbar in indeterminate. By default, it is set to false.
* ```html
* <igx-linear-bar [indeterminate]="true"></igx-linear-bar>
* <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
* ```
*/
set indeterminate(isIndeterminate) {
this._indeterminate = isIndeterminate;
this._resetCounterValues(this._indeterminate); // Use the helper for indeterminate condition
}
/**
* Gets the current state of the progress bar:
* - `true` if in the indeterminate state (no progress value displayed),
* - `false` if the progress bar shows the actual progress.
*
* ```typescript
* const isIndeterminate = progressBar.indeterminate;
* ```
*/
get indeterminate() {
return this._indeterminate;
}
/**
* Returns the value which update the progress indicator of the `progress bar`.
* ```typescript
* @ViewChild("MyProgressBar")
* public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent;
* public stepValue(event) {
* let step = this.progressBar.step;
* alert(step);
* }
* ```
*/
get step() {
if (this._step) {
return this._step;
}
return this._max * ONE_PERCENT;
}
/**
* Sets the value by which progress indicator is updated. By default, it is 1.
* ```html
* <igx-linear-bar [step]="1"></igx-linear-bar>
* <igx-circular-bar [step]="1"></igx-circular-bar>
* ```
*/
set step(val) {
const step = Number(val);
if (step > this.max) {
return;
}
this._step = step;
}
/**
* Set a custom text. This will hide the counter value.
* ```html
* <igx-circular-bar text="my text"></igx-circular-bar>
* ```
*/
set text(value) {
this._text = value;
this._resetCounterValues(!!this._text); // Use the helper for text condition
}
/**
* Gets a custom text.
* ```typescript
* let text = this.circularBar.text;
* ```
*/
get text() {
return this._text;
}
/**
* Animating the progress. By default, it is set to true.
* ```html
* <igx-linear-bar [animate]="false"></igx-linear-bar>
* <igx-circular-bar [animate]="false"></igx-circular-bar>
* ```
*/
set animate(animate) {
this._animate = animate;
}
/**
* Returns whether the `progress bar` has animation true/false.
* ```typescript
* @ViewChild("MyProgressBar")
* public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent;
* public animationStatus(event) {
* let animationStatus = this.progressBar.animate;
* alert(animationStatus);
* }
* ```
*/
get animate() {
return this._animate;
}
/**
* Set maximum value that can be passed. By default it is set to 100.
* ```html
* <igx-linear-bar [max]="200"></igx-linear-bar>
* <igx-circular-bar [max]="200"></igx-circular-bar>
* ```
*/
set max(maxNum) {
// Ignore invalid or unchanged max
if (maxNum < MIN_VALUE || this._max === maxNum) {
return;
}
this._max = maxNum;
// Revalidate current value
this._value = valueInRange(this._value, this._max);
// Refresh CSS variables
this._updateProgressValues();
}
/**
* Returns the maximum progress value of the `progress bar`.
* ```typescript
* @ViewChild("MyProgressBar")
* public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent;
* public maxValue(event) {
* let max = this.progressBar.max;
* alert(max);
* }
* ```
*/
get max() {
return this._max;
}
get progressInteger() {
return this._integer.toString();
}
get progressFraction() {
return this._fraction.toString();
}
get progressWhole() {
return this.valueInPercent.toFixed(2);
}
get transitionDuration() {
return `${this.animationDuration}ms`;
}
/**
* @hidden
*/
get hasFraction() {
const percentage = this.valueInPercent;
const integerPart = Math.floor(percentage);
const fractionalPart = percentage - integerPart;
return fractionalPart > 0;
}
/**
* Returns the `IgxLinearProgressBarComponent`/`IgxCircularProgressBarComponent` value in percentage.
* ```typescript
* @ViewChild("MyProgressBar")
* public progressBar: IgxLinearProgressBarComponent / IgxCircularProgressBarComponent
* public valuePercent(event){
* let percentValue = this.progressBar.valueInPercent;
* alert(percentValue);
* }
* ```
*/
get valueInPercent() {
const result = this.max > 0 ? (this._value / this.max) * 100 : 0;
return Math.round(result * 100) / 100; // Round to two decimal places
}
/**
* Returns value that indicates the current `IgxLinearProgressBarComponent`/`IgxCircularProgressBarComponent` position.
* ```typescript
* @ViewChild("MyProgressBar")
* public progressBar: IgxLinearProgressBarComponent / IgxCircularProgressBarComponent;
* public getValue(event) {
* let value = this.progressBar.value;
* alert(value);
* }
* ```
*/
get value() {
return this._value;
}
/**
* @hidden
*/
_updateProgressValues() {
const percentage = this.valueInPercent;
const integerPart = Math.floor(percentage);
const fractionalPart = Math.round((percentage % 1) * 100);
this._integer = integerPart;
this._fraction = fractionalPart;
}
_resetCounterValues(condition) {
if (condition) {
this._integer = 0;
this._fraction = 0;
}
else {
this._zone.runOutsideAngular(() => {
setTimeout(() => {
this._updateProgressValues();
this._cdr.markForCheck();
});
});
}
}
/**
* Set value that indicates the current `IgxLinearProgressBarComponent / IgxCircularProgressBarComponent` position.
* ```html
* <igx-linear-bar [value]="50"></igx-linear-bar>
* <igx-circular-bar [value]="50"></igx-circular-bar>
* ```
*/
set value(val) {
const valInRange = valueInRange(val, this.max); // Ensure value is in range
// Avoid redundant updates
if (isNaN(valInRange) || this._value === valInRange) {
return;
}
const previousValue = this._value;
// Update internal value
this._value = valInRange;
this._zone.runOutsideAngular(() => {
setTimeout(() => {
this._updateProgressValues();
this._cdr.markForCheck();
});
});
// Emit the progressChanged event
this.progressChanged.emit({
previousValue,
currentValue: this._value,
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseProgressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.2", type: BaseProgressDirective, isStandalone: true, inputs: { animationDuration: "animationDuration", indeterminate: ["indeterminate", "indeterminate", booleanAttribute], step: "step", text: "text", animate: ["animate", "animate", booleanAttribute], max: "max", value: "value" }, outputs: { progressChanged: "progressChanged" }, host: { properties: { "attr.aria-valuemax": "this.max", "style.--_progress-integer": "this.progressInteger", "style.--_progress-fraction": "this.progressFraction", "style.--_progress-whole": "this.progressWhole", "style.--_transition-duration": "this.transitionDuration", "attr.aria-valuenow": "this.value" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: BaseProgressDirective, decorators: [{
type: Directive
}], propDecorators: { progressChanged: [{
type: Output
}], animationDuration: [{
type: Input
}], indeterminate: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], step: [{
type: Input
}], text: [{
type: Input
}], animate: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], max: [{
type: HostBinding,
args: ['attr.aria-valuemax']
}, {
type: Input
}], progressInteger: [{
type: HostBinding,
args: ['style.--_progress-integer']
}], progressFraction: [{
type: HostBinding,
args: ['style.--_progress-fraction']
}], progressWhole: [{
type: HostBinding,
args: ['style.--_progress-whole']
}], transitionDuration: [{
type: HostBinding,
args: ['style.--_transition-duration']
}], value: [{
type: HostBinding,
args: ['attr.aria-valuenow']
}, {
type: Input
}] } });
let NEXT_LINEAR_ID = 0;
let NEXT_CIRCULAR_ID = 0;
let NEXT_GRADIENT_ID = 0;
class IgxLinearProgressBarComponent extends BaseProgressDirective {
constructor() {
super(...arguments);
this.valueMin = 0;
this.cssClass = 'igx-linear-bar';
/**
* Set `IgxLinearProgressBarComponent` to have striped style. By default it is set to false.
* ```html
* <igx-linear-bar [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
* ```
*/
this.striped = false;
/**
* Sets the value of the `role` attribute. If not provided it will be automatically set to `progressbar`.
* ```html
* <igx-linear-bar role="progressbar"></igx-linear-bar>
* ```
*/
this.role = 'progressbar';
/**
* Sets the value of `id` attribute. If not provided it will be automatically generated.
* ```html
* <igx-linear-bar [id]="'igx-linear-bar-55'" [striped]="true" [max]="200" [value]="50"></igx-linear-bar>
* ```
*/
this.id = `igx-linear-bar-${NEXT_LINEAR_ID++}`;
/**
* Set the position that defines where the text is aligned.
* Possible options - `IgxTextAlign.START` (default), `IgxTextAlign.CENTER`, `IgxTextAlign.END`.
* ```typescript
* public positionCenter: IgxTextAlign;
* public ngOnInit() {
* this.positionCenter = IgxTextAlign.CENTER;
* }
* //...
* ```
* ```html
* <igx-linear-bar [textAlign]="positionCenter"></igx-linear-bar>
* ```
*/
this.textAlign = IgxTextAlign.START;
/**
* Set the text to be visible. By default, it is set to true.
* ```html
* <igx-linear-bar [textVisibility]="false"></igx-linear-bar>
* ```
*/
this.textVisibility = true;
/**
* Set the position that defines if the text should be aligned above the progress line. By default, is set to false.
* ```html
* <igx-linear-bar [textTop]="true"></igx-linear-bar>
* ```
*/
this.textTop = false;
/**
* Set type of the `IgxLinearProgressBarComponent`. Possible options - `default`, `success`, `info`, `warning`, and `error`.
* ```html
* <igx-linear-bar [type]="'error'"></igx-linear-bar>
* ```
*/
this.type = 'default';
}
/**
* @hidden
* ```
*/
get isIndeterminate() {
return this.indeterminate;
}
/**
* @hidden
*/
get disableAnimationClass() {
return !this._animate;
}
/**
* @hidden
*/
get hasText() {
return !!this.text;
}
/**
* @hidden
*/
get error() {
return this.type === IgxProgressType.ERROR;
}
/**
* @hidden
*/
get info() {
return this.type === IgxProgressType.INFO;
}
/**
* @hidden
*/
get warning() {
return this.type === IgxProgressType.WARNING;
}
/**
* @hidden
*/
get success() {
return this.type === IgxProgressType.SUCCESS;
}
ngAfterContentInit() {
this._contentInit = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxLinearProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.2", type: IgxLinearProgressBarComponent, isStandalone: true, selector: "igx-linear-bar", inputs: { striped: ["striped", "striped", booleanAttribute], role: "role", id: "id", textAlign: "textAlign", textVisibility: ["textVisibility", "textVisibility", booleanAttribute], textTop: ["textTop", "textTop", booleanAttribute], type: "type" }, host: { properties: { "attr.aria-valuemin": "this.valueMin", "class.igx-linear-bar": "this.cssClass", "class.igx-linear-bar--striped": "this.striped", "class.igx-linear-bar--indeterminate": "this.isIndeterminate", "attr.role": "this.role", "attr.id": "this.id", "class.igx-linear-bar--animation-none": "this.disableAnimationClass", "class.igx-linear-bar--hide-counter": "this.hasText", "class.igx-linear-bar--danger": "this.error", "class.igx-linear-bar--info": "this.info", "class.igx-linear-bar--warning": "this.warning", "class.igx-linear-bar--success": "this.success" } }, usesInheritance: true, ngImport: i0, template: "\n <div class=\"igx-linear-bar__base\">\n <div class=\"igx-linear-bar__indicator\"></div>\n <div class=\"igx-linear-bar__indicator-secondary\"></div>\n </div>\n\n <span\n class=\"igx-linear-bar__value\"\n [ngClass]=\"{\n 'igx-linear-bar__value--start': textAlign === 'start',\n 'igx-linear-bar__value--center': textAlign === 'center',\n 'igx-linear-bar__value--end': textAlign === 'end',\n 'igx-linear-bar__value--top': textTop,\n 'igx-linear-bar__value--hidden': !textVisibility,\n 'igx-linear-bar__value--fraction': hasFraction\n }\">\n {{text}}\n </span>\n\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxLinearProgressBarComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-linear-bar', imports: [NgClass], template: "\n <div class=\"igx-linear-bar__base\">\n <div class=\"igx-linear-bar__indicator\"></div>\n <div class=\"igx-linear-bar__indicator-secondary\"></div>\n </div>\n\n <span\n class=\"igx-linear-bar__value\"\n [ngClass]=\"{\n 'igx-linear-bar__value--start': textAlign === 'start',\n 'igx-linear-bar__value--center': textAlign === 'center',\n 'igx-linear-bar__value--end': textAlign === 'end',\n 'igx-linear-bar__value--top': textTop,\n 'igx-linear-bar__value--hidden': !textVisibility,\n 'igx-linear-bar__value--fraction': hasFraction\n }\">\n {{text}}\n </span>\n\n" }]
}], propDecorators: { valueMin: [{
type: HostBinding,
args: ['attr.aria-valuemin']
}], cssClass: [{
type: HostBinding,
args: ['class.igx-linear-bar']
}], striped: [{
type: HostBinding,
args: ['class.igx-linear-bar--striped']
}, {
type: Input,
args: [{ transform: booleanAttribute }]
}], isIndeterminate: [{
type: HostBinding,
args: ['class.igx-linear-bar--indeterminate']
}], role: [{
type: HostBinding,
args: ['attr.role']
}, {
type: Input
}], id: [{
type: HostBinding,
args: ['attr.id']
}, {
type: Input
}], disableAnimationClass: [{
type: HostBinding,
args: ['class.igx-linear-bar--animation-none']
}], hasText: [{
type: HostBinding,
args: ['class.igx-linear-bar--hide-counter']
}], textAlign: [{
type: Input
}], textVisibility: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], textTop: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], type: [{
type: Input
}], error: [{
type: HostBinding,
args: ['class.igx-linear-bar--danger']
}], info: [{
type: HostBinding,
args: ['class.igx-linear-bar--info']
}], warning: [{
type: HostBinding,
args: ['class.igx-linear-bar--warning']
}], success: [{
type: HostBinding,
args: ['class.igx-linear-bar--success']
}] } });
class IgxCircularProgressBarComponent extends BaseProgressDirective {
constructor() {
super(...arguments);
this.renderer = inject(Renderer2);
/**
* @hidden
*/
this.cssClass = 'igx-circular-bar';
/**
* Sets the value of `id` attribute. If not provided it will be automatically generated.
* ```html
* <igx-circular-bar [id]="'igx-circular-bar-55'"></igx-circular-bar>
* ```
*/
this.id = `igx-circular-bar-${NEXT_CIRCULAR_ID++}`;
/**
* Sets the text visibility. By default, it is set to true.
* ```html
* <igx-circular-bar [textVisibility]="false"></igx-circular-bar>
* ```
*/
this.textVisibility = true;
/**
* @hidden
*/
this.gradientId = `igx-circular-gradient-${NEXT_GRADIENT_ID++}`;
/**
* Set type of the `IgxCircularProgressBarComponent`. Possible options - `default`, `success`, `info`, `warning`, and `error`.
* ```html
* <igx-circular-bar [type]="'error'"></igx-circular-bar>
* ```
*/
this.type = 'default';
}
/**
* @hidden
*/
get isIndeterminate() {
return this.indeterminate;
}
/**
* @hidden
*/
get disableAnimationClass() {
return !this._animate;
}
/**
* @hidden
*/
get hasText() {
return !!this.text;
}
/**
* @hidden
*/
get context() {
return {
$implicit: { value: this.value, valueInPercent: this.valueInPercent, max: this.max }
};
}
/**
* @hidden
*/
get textContent() {
return this.text;
}
/**
* @hidden
*/
get error() {
return this.type === IgxProgressType.ERROR;
}
/**
* @hidden
*/
get info() {
return this.type === IgxProgressType.INFO;
}
/**
* @hidden
*/
get warning() {
return this.type === IgxProgressType.WARNING;
}
/**
* @hidden
*/
get success() {
return this.type === IgxProgressType.SUCCESS;
}
/**
* @hidden
*/
get strokeStyle() {
return this.type === 'default' ? `url(#${this.gradientId})` : 'none';
}
ngAfterContentInit() {
this._contentInit = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCircularProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxCircularProgressBarComponent, isStandalone: true, selector: "igx-circular-bar", inputs: { id: "id", textVisibility: ["textVisibility", "textVisibility", booleanAttribute], type: "type" }, host: { properties: { "class.igx-circular-bar": "this.cssClass", "attr.id": "this.id", "class.igx-circular-bar--indeterminate": "this.isIndeterminate", "class.igx-circular-bar--animation-none": "this.disableAnimationClass", "class.igx-circular-bar--hide-counter": "this.hasText", "class.igx-circular-bar--danger": "this.error", "class.igx-circular-bar--info": "this.info", "class.igx-circular-bar--warning": "this.warning", "class.igx-circular-bar--success": "this.success", "style.stroke": "this.strokeStyle" } }, queries: [{ propertyName: "textTemplate", first: true, predicate: IgxProgressBarTextTemplateDirective, descendants: true, read: IgxProgressBarTextTemplateDirective }, { propertyName: "gradientTemplate", first: true, predicate: IgxProgressBarGradientDirective, descendants: true, read: IgxProgressBarGradientDirective }], viewQueries: [{ propertyName: "_svgCircle", first: true, predicate: ["circle"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<svg #svg\n role=\"progressbar\"\n aria-valuemin=\"0\"\n [attr.aria-valuemax]=\"max\"\n [attr.aria-valuenow]=\"value\">\n <svg:circle class=\"igx-circular-bar__inner\" />\n <svg:circle #circle class=\"igx-circular-bar__outer\"/>\n\n <svg:defs>\n <ng-container\n *ngTemplateOutlet=\"gradientTemplate ? gradientTemplate.template : defaultGradientTemplate;\n context: { $implicit: gradientId }\">\n </ng-container>\n </svg:defs>\n\n <ng-template #defaultGradientTemplate>\n <svg:linearGradient [id]=\"gradientId\" gradientTransform=\"rotate(90)\">\n <stop offset=\"0%\" class=\"igx-circular-bar__gradient-start\" />\n <stop offset=\"100%\" class=\"igx-circular-bar__gradient-end\" />\n </svg:linearGradient>\n </ng-template>\n</svg>\n\n@if (textVisibility) {\n <span class=\"igx-circular-bar__text\" [ngClass]=\"hasFraction ? 'igx-circular-bar__value--fraction' : ''\">\n <ng-container *ngTemplateOutlet=\"textTemplate ? textTemplate.template : defaultTextTemplate;\n context: context\">\n </ng-container>\n </span>\n}\n\n<ng-template #defaultTextTemplate>\n {{textContent}}\n</ng-template>\n\n\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCircularProgressBarComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-circular-bar', imports: [NgTemplateOutlet, NgClass], template: "<svg #svg\n role=\"progressbar\"\n aria-valuemin=\"0\"\n [attr.aria-valuemax]=\"max\"\n [attr.aria-valuenow]=\"value\">\n <svg:circle class=\"igx-circular-bar__inner\" />\n <svg:circle #circle class=\"igx-circular-bar__outer\"/>\n\n <svg:defs>\n <ng-container\n *ngTemplateOutlet=\"gradientTemplate ? gradientTemplate.template : defaultGradientTemplate;\n context: { $implicit: gradientId }\">\n </ng-container>\n </svg:defs>\n\n <ng-template #defaultGradientTemplate>\n <svg:linearGradient [id]=\"gradientId\" gradientTransform=\"rotate(90)\">\n <stop offset=\"0%\" class=\"igx-circular-bar__gradient-start\" />\n <stop offset=\"100%\" class=\"igx-circular-bar__gradient-end\" />\n </svg:linearGradient>\n </ng-template>\n</svg>\n\n@if (textVisibility) {\n <span class=\"igx-circular-bar__text\" [ngClass]=\"hasFraction ? 'igx-circular-bar__value--fraction' : ''\">\n <ng-container *ngTemplateOutlet=\"textTemplate ? textTemplate.template : defaultTextTemplate;\n context: context\">\n </ng-container>\n </span>\n}\n\n<ng-template #defaultTextTemplate>\n {{textContent}}\n</ng-template>\n\n\n" }]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.igx-circular-bar']
}], id: [{
type: HostBinding,
args: ['attr.id']
}, {
type: Input
}], isIndeterminate: [{
type: HostBinding,
args: ['class.igx-circular-bar--indeterminate']
}], disableAnimationClass: [{
type: HostBinding,
args: ['class.igx-circular-bar--animation-none']
}], hasText: [{
type: HostBinding,
args: ['class.igx-circular-bar--hide-counter']
}], textVisibility: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], textTemplate: [{
type: ContentChild,
args: [IgxProgressBarTextTemplateDirective, { read: IgxProgressBarTextTemplateDirective }]
}], gradientTemplate: [{
type: ContentChild,
args: [IgxProgressBarGradientDirective, { read: IgxProgressBarGradientDirective }]
}], _svgCircle: [{
type: ViewChild,
args: ['circle', { static: true }]
}], type: [{
type: Input
}], error: [{
type: HostBinding,
args: ['class.igx-circular-bar--danger']
}], info: [{
type: HostBinding,
args: ['class.igx-circular-bar--info']
}], warning: [{
type: HostBinding,
args: ['class.igx-circular-bar--warning']
}], success: [{
type: HostBinding,
args: ['class.igx-circular-bar--success']
}], strokeStyle: [{
type: HostBinding,
args: ['style.stroke']
}] } });
/* NOTE: Progress bar (linear and circular) directives collection for ease-of-use import in standalone components scenario */
const IGX_PROGRESS_BAR_DIRECTIVES = [
IgxLinearProgressBarComponent,
IgxCircularProgressBarComponent,
IgxProgressBarTextTemplateDirective,
IgxProgressBarGradientDirective
];
/* NOTE: Linear progress bar directives collection for ease-of-use import in standalone components scenario */
const IGX_LINEAR_PROGRESS_BAR_DIRECTIVES = [
IgxLinearProgressBarComponent,
IgxProgressBarGradientDirective
];
/* NOTE: Circular progress bar directives collection for ease-of-use import in standalone components scenario */
const IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES = [
IgxCircularProgressBarComponent,
IgxProgressBarTextTemplateDirective,
IgxProgressBarGradientDirective
];
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
class IgxProgressBarModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxProgressBarModule, imports: [IgxLinearProgressBarComponent, IgxCircularProgressBarComponent, IgxProgressBarTextTemplateDirective, IgxProgressBarGradientDirective], exports: [IgxLinearProgressBarComponent, IgxCircularProgressBarComponent, IgxProgressBarTextTemplateDirective, IgxProgressBarGradientDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxProgressBarModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxProgressBarModule, decorators: [{
type: NgModule,
args: [{
imports: [
...IGX_PROGRESS_BAR_DIRECTIVES
],
exports: [
...IGX_PROGRESS_BAR_DIRECTIVES
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES, IGX_LINEAR_PROGRESS_BAR_DIRECTIVES, IGX_PROGRESS_BAR_DIRECTIVES, IgxCircularProgressBarComponent, IgxLinearProgressBarComponent, IgxProgressBarGradientDirective, IgxProgressBarModule, IgxProgressBarTextTemplateDirective, IgxProgressType, IgxTextAlign };
//# sourceMappingURL=igniteui-angular-progressbar.mjs.map