ngx-bootstrap
Version:
Angular Bootstrap
140 lines (133 loc) • 11.9 kB
JavaScript
import * as i0 from '@angular/core';
import { input, effect, ChangeDetectionStrategy, Component, Injectable, computed, NgModule } from '@angular/core';
class BarComponent {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
/** maximum total value of progress element */
this.max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
/** current value of progress bar */
this.value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
/** if `true` changing value of progress bar will be animated */
this.animate = input(false, ...(ngDevMode ? [{ debugName: "animate" }] : []));
/** If `true`, striped classes are applied */
this.striped = input(false, ...(ngDevMode ? [{ debugName: "striped" }] : []));
/** provide one of the four supported contextual classes: `success`, `info`, `warning`, `danger` */
this.type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : []));
this.percent = 100;
// Watch for value and max changes to update percent
effect(() => {
const currentValue = this.value() ?? 0;
const currentMax = this.max() || 100;
this.percent = 100 * (Number(currentValue) / Number(currentMax));
});
// Watch for type changes to update classes
effect(() => {
const currentType = this.type();
this.applyTypeClasses(currentType);
});
}
applyTypeClasses(currentType) {
if (this._prevType) {
const barTypeClass = `progress-bar-${this._prevType}`;
const bgClass = `bg-${this._prevType}`;
this.renderer.removeClass(this.el.nativeElement, barTypeClass);
this.renderer.removeClass(this.el.nativeElement, bgClass);
this._prevType = void 0;
}
if (currentType) {
const barTypeClass = `progress-bar-${currentType}`;
const bgClass = `bg-${currentType}`;
this.renderer.addClass(this.el.nativeElement, barTypeClass);
this.renderer.addClass(this.el.nativeElement, bgClass);
this._prevType = currentType;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: BarComponent, isStandalone: true, selector: "bar", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "aria-valuemin": "0" }, properties: { "class.progress-bar": "true", "class.progress-bar-animated": "animate()", "class.progress-bar-striped": "striped()", "attr.aria-valuenow": "value()", "attr.aria-valuetext": "percent ? percent.toFixed(0) + \"%\" : \"\"", "attr.aria-valuemax": "max()", "style.height.%": "\"100\"", "style.width.%": "percent" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BarComponent, decorators: [{
type: Component,
args: [{ selector: 'bar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
role: 'progressbar',
'aria-valuemin': '0',
'[class.progress-bar]': 'true',
'[class.progress-bar-animated]': 'animate()',
'[class.progress-bar-striped]': 'striped()',
'[attr.aria-valuenow]': 'value()',
'[attr.aria-valuetext]': 'percent ? percent.toFixed(0) + "%" : ""',
'[attr.aria-valuemax]': 'max()',
'[style.height.%]': '"100"',
'[style.width.%]': 'percent'
}, standalone: true, template: "<ng-content></ng-content>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
class ProgressbarConfig {
constructor() {
/** if `true` changing value of progress bar will be animated */
this.animate = false;
/** If `true`, striped classes are applied */
this.striped = false;
/** maximum total value of progress element */
this.max = 100;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProgressbarConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProgressbarConfig, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProgressbarConfig, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class ProgressbarComponent {
constructor(_config) {
this._config = _config;
/** maximum total value of progress element */
this.max = input(this._config.max, ...(ngDevMode ? [{ debugName: "max" }] : []));
/** if `true` changing value of progress bar will be animated */
this.animate = input(this._config.animate, ...(ngDevMode ? [{ debugName: "animate" }] : []));
/** If `true`, striped classes are applied */
this.striped = input(this._config.striped, ...(ngDevMode ? [{ debugName: "striped" }] : []));
/** provide one of the four supported contextual classes: `success`, `info`, `warning`, `danger` */
this.type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : []));
/** current value of progress bar. Could be a number or array of objects
* like {"value":15,"type":"info","label":"15 %"}
*/
this.value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
this.isStacked = computed(() => Array.isArray(this.value()), ...(ngDevMode ? [{ debugName: "isStacked" }] : []));
this._value = computed(() => {
const val = this.value();
return typeof val === 'number' ? val : undefined;
}, ...(ngDevMode ? [{ debugName: "_value" }] : []));
this._values = computed(() => {
const val = this.value();
return Array.isArray(val) ? val : undefined;
}, ...(ngDevMode ? [{ debugName: "_values" }] : []));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProgressbarComponent, deps: [{ token: ProgressbarConfig }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ProgressbarComponent, isStandalone: true, selector: "progressbar", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.progress": "true", "attr.max": "max()" } }, ngImport: i0, template: "@if (!isStacked()) {\n <bar [type]=\"type()\" [value]=\"_value()\" [max]=\"max()\" [animate]=\"animate()\" [striped]=\"striped()\">\n <ng-content></ng-content>\n </bar>\n} @else {\n @for (item of _values(); track item) {\n <bar\n [type]=\"item.type\" [value]=\"item.value\" [max]=\"item.max || max()\" [animate]=\"animate()\" [striped]=\"striped()\">{{ item.label }}</bar>\n }\n}\n", styles: [":host{width:100%;display:flex}\n"], dependencies: [{ kind: "component", type: BarComponent, selector: "bar", inputs: ["max", "value", "animate", "striped", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProgressbarComponent, decorators: [{
type: Component,
args: [{ selector: 'progressbar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[class.progress]': 'true',
'[attr.max]': 'max()'
}, standalone: true, imports: [BarComponent], template: "@if (!isStacked()) {\n <bar [type]=\"type()\" [value]=\"_value()\" [max]=\"max()\" [animate]=\"animate()\" [striped]=\"striped()\">\n <ng-content></ng-content>\n </bar>\n} @else {\n @for (item of _values(); track item) {\n <bar\n [type]=\"item.type\" [value]=\"item.value\" [max]=\"item.max || max()\" [animate]=\"animate()\" [striped]=\"striped()\">{{ item.label }}</bar>\n }\n}\n", styles: [":host{width:100%;display:flex}\n"] }]
}], ctorParameters: () => [{ type: ProgressbarConfig }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
class ProgressbarModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProgressbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: ProgressbarModule, imports: [BarComponent, ProgressbarComponent], exports: [BarComponent, ProgressbarComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProgressbarModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProgressbarModule, decorators: [{
type: NgModule,
args: [{
imports: [BarComponent, ProgressbarComponent],
exports: [BarComponent, ProgressbarComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { BarComponent, ProgressbarComponent, ProgressbarConfig, ProgressbarModule };
//# sourceMappingURL=ngx-bootstrap-progressbar.mjs.map