primeng/fesm2022/primeng-progressbar.mjs

PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,

export * from 'primeng/types/progressbar';
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, numberAttribute, booleanAttribute, contentChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { SharedModule } from 'primeng/api';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { style } from '@primeuix/styles/progressbar';
import { BaseStyle } from 'primeng/base';

const classes = {
    root: ({ instance }) => {
        const mode = instance.mode();
        return [
            'p-progressbar p-component',
            {
                'p-progressbar-determinate': mode === 'determinate',
                'p-progressbar-indeterminate': mode === 'indeterminate'
            }
        ];
    },
    value: 'p-progressbar-value',
    label: 'p-progressbar-label'
};
class ProgressBarStyle extends BaseStyle {
    name = 'progressbar';
    style = style;
    classes = classes;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBarStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBarStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBarStyle, decorators: [{
            type: Injectable
        }] });
/**
 *
 * ProgressBar is a process status indicator.
 *
 * [Live Demo](https://www.primeng.org/progressbar)
 *
 * @module progressbarstyle
 *
 */
var ProgressBarClasses;
(function (ProgressBarClasses) {
    /**
     * Class name of the root element
     */
    ProgressBarClasses["root"] = "p-progressbar";
    /**
     * Class name of the value element
     */
    ProgressBarClasses["value"] = "p-progressbar-value";
    /**
     * Class name of the label element
     */
    ProgressBarClasses["label"] = "p-progressbar-label";
})(ProgressBarClasses || (ProgressBarClasses = {}));

const PROGRESSBAR_INSTANCE = new InjectionToken('PROGRESSBAR_INSTANCE');
/**
 * ProgressBar is a process status indicator.
 * @group Components
 */
class ProgressBar extends BaseComponent {
    componentName = 'ProgressBar';
    $pcProgressBar = inject(PROGRESSBAR_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
    bindDirectiveInstance = inject(Bind, { self: true });
    /**
     * Current value of the progress.
     * @group Props
     */
    value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    /**
     * Whether to display the progress bar value.
     * @group Props
     */
    showValue = input(true, { ...(ngDevMode ? { debugName: "showValue" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /**
     * Style class of the value element.
     * @group Props
     */
    valueStyleClass = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "valueStyleClass" }] : /* istanbul ignore next */ []));
    /**
     * Unit sign appended to the value.
     * @group Props
     */
    unit = input('%', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
    /**
     * Defines the mode of the progress
     * @defaultValue 'determinate'
     * @group Props
     */
    mode = input('determinate', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
    /**
     * Color for the background of the progress.
     * @group Props
     */
    color = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
    /**
     * Template of the content.
     * @param {ProgressBarContentTemplateContext} context - content context.
     * @see {@link ProgressBarContentTemplateContext}
     * @group Templates
     */
    contentTemplate = contentChild('content', { ...(ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    _componentStyle = inject(ProgressBarStyle);
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
    }
    dataP = computed(() => this.cn({
        determinate: this.mode() === 'determinate',
        indeterminate: this.mode() === 'indeterminate'
    }), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "dataP" }] : /* istanbul ignore next */ []));
    ariaLevel = computed(() => this.value() + this.unit(), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "ariaLevel" }] : /* istanbul ignore next */ []));
    contentTemplateContext = computed(() => ({ $implicit: this.value() }), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "contentTemplateContext" }] : /* istanbul ignore next */ []));
    showLabel = computed(() => this.showValue() && !this.contentTemplate(), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
    labelDisplay = computed(() => (this.value() != null && this.value() !== 0 ? 'flex' : 'none'), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "labelDisplay" }] : /* istanbul ignore next */ []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBar, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ProgressBar, isStandalone: true, selector: "p-progressbar, p-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, valueStyleClass: { classPropertyName: "valueStyleClass", publicName: "valueStyleClass", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.aria-valuemin": "0", "attr.aria-valuenow": "value()", "attr.aria-valuemax": "100", "attr.aria-level": "ariaLevel()", "class": "cx('root')", "attr.data-p": "dataP()" } }, providers: [ProgressBarStyle, { provide: PROGRESSBAR_INSTANCE, useExisting: ProgressBar }, { provide: PARENT_INSTANCE, useExisting: ProgressBar }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
        @if (mode() === 'determinate') {
            <div [class]="cn(cx('value'), valueStyleClass())" [pBind]="ptm('value')" [style.width]="value() + '%'" [style.display]="'flex'" [style.background]="color()" [attr.data-p]="dataP()">
                <div [class]="cx('label')" [pBind]="ptm('label')" [attr.data-p]="dataP()">
                    @if (showLabel()) {
                        <div [style.display]="labelDisplay()">{{ value() }}{{ unit() }}</div>
                    }
                    <ng-container [ngTemplateOutlet]="contentTemplate()!" [ngTemplateOutletContext]="contentTemplateContext()"></ng-container>
                </div>
            </div>
        }
        @if (mode() === 'indeterminate') {
            <div [class]="cn(cx('value'), valueStyleClass())" [pBind]="ptm('value')" [style.background]="color()" [attr.data-p]="dataP()"></div>
        }
    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBar, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-progressbar, p-progress-bar',
                    standalone: true,
                    imports: [NgTemplateOutlet, SharedModule, Bind],
                    template: `
        @if (mode() === 'determinate') {
            <div [class]="cn(cx('value'), valueStyleClass())" [pBind]="ptm('value')" [style.width]="value() + '%'" [style.display]="'flex'" [style.background]="color()" [attr.data-p]="dataP()">
                <div [class]="cx('label')" [pBind]="ptm('label')" [attr.data-p]="dataP()">
                    @if (showLabel()) {
                        <div [style.display]="labelDisplay()">{{ value() }}{{ unit() }}</div>
                    }
                    <ng-container [ngTemplateOutlet]="contentTemplate()!" [ngTemplateOutletContext]="contentTemplateContext()"></ng-container>
                </div>
            </div>
        }
        @if (mode() === 'indeterminate') {
            <div [class]="cn(cx('value'), valueStyleClass())" [pBind]="ptm('value')" [style.background]="color()" [attr.data-p]="dataP()"></div>
        }
    `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    providers: [ProgressBarStyle, { provide: PROGRESSBAR_INSTANCE, useExisting: ProgressBar }, { provide: PARENT_INSTANCE, useExisting: ProgressBar }],
                    host: {
                        role: 'progressbar',
                        '[attr.aria-valuemin]': '0',
                        '[attr.aria-valuenow]': 'value()',
                        '[attr.aria-valuemax]': '100',
                        '[attr.aria-level]': 'ariaLevel()',
                        '[class]': "cx('root')",
                        '[attr.data-p]': 'dataP()'
                    },
                    hostDirectives: [Bind]
                }]
        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], valueStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueStyleClass", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], contentTemplate: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }] } });
class ProgressBarModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: ProgressBarModule, imports: [ProgressBar, SharedModule], exports: [ProgressBar, SharedModule] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBarModule, imports: [ProgressBar, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProgressBarModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [ProgressBar, SharedModule],
                    exports: [ProgressBar, SharedModule]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { ProgressBar, ProgressBarClasses, ProgressBarModule, ProgressBarStyle };
//# sourceMappingURL=primeng-progressbar.mjs.map