UNPKG

@coreui/angular

Version:

CoreUI Components Library for Angular

113 lines 13.6 kB
import { booleanAttribute, computed, Directive, effect, ElementRef, inject, Input, numberAttribute, Renderer2, signal } from '@angular/core'; import * as i0 from "@angular/core"; export class ProgressBarDirective { constructor() { this.#renderer = inject(Renderer2); this.#hostElement = inject(ElementRef); this.#max = signal(100); this.#min = 0; this.#value = signal(undefined); this.#width = signal(undefined); this.percent = computed(() => { return +((((this.#value() ?? this.#width() ?? 0) - this.#min) / (this.#max() - this.#min)) * 100).toFixed(this.precision); }); this.#valuesEffect = effect(() => { const host = this.#hostElement.nativeElement; if (this.#value() === undefined || this.#width()) { for (const name of ['aria-valuenow', 'aria-valuemax', 'aria-valuemin', 'role']) { this.#renderer.removeAttribute(host, name); } } else { this.#renderer.setAttribute(host, 'aria-valuenow', String(this.#value())); this.#renderer.setAttribute(host, 'aria-valuemin', String(this.#min)); this.#renderer.setAttribute(host, 'aria-valuemax', String(this.#max())); this.#renderer.setAttribute(host, 'role', this.role); } const tagName = host.tagName; if (this.percent() >= 0 && ((this.stacked && tagName === 'C-PROGRESS') || (!this.stacked && tagName !== 'C-PROGRESS'))) { this.#renderer.setStyle(host, 'width', `${this.percent()}%`); } else { this.#renderer.removeStyle(host, 'width'); } }); // TODO: check if this is necessary. this.precision = 0; /** * Stacked ProgressBars. * @type boolean * @default false */ this.stacked = false; /** * Set default html role attribute. * @type string */ this.role = 'progressbar'; } #renderer; #hostElement; #max; #min; #value; #width; #valuesEffect; /** * The percent value the ProgressBar. * @type number * @default 0 */ set value(value) { this.#value.set(value); } get value() { return this.#value(); } set width(value) { this.#width.set(value); } /** * The max value of the ProgressBar. * @type number * @default 100 */ set max(max) { this.#max.set(isNaN(max) || max <= 0 ? 100 : max); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ProgressBarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.12", type: ProgressBarDirective, isStandalone: true, selector: "[cProgressBar]", inputs: { animated: ["animated", "animated", booleanAttribute], color: "color", precision: ["precision", "precision", numberAttribute], value: ["value", "value", numberAttribute], width: ["width", "width", numberAttribute], variant: "variant", max: ["max", "max", numberAttribute], stacked: ["stacked", "stacked", booleanAttribute], role: "role" }, ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ProgressBarDirective, decorators: [{ type: Directive, args: [{ selector: '[cProgressBar]', standalone: true }] }], propDecorators: { animated: [{ type: Input, args: [{ transform: booleanAttribute }] }], color: [{ type: Input }], precision: [{ type: Input, args: [{ transform: numberAttribute }] }], value: [{ type: Input, args: [{ transform: numberAttribute }] }], width: [{ type: Input, args: [{ transform: numberAttribute }] }], variant: [{ type: Input }], max: [{ type: Input, args: [{ transform: numberAttribute }] }], stacked: [{ type: Input, args: [{ transform: booleanAttribute }] }], role: [{ type: Input }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmV1aS1hbmd1bGFyL3NyYy9saWIvcHJvZ3Jlc3MvcHJvZ3Jlc3MtYmFyLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsZ0JBQWdCLEVBQ2hCLFFBQVEsRUFDUixTQUFTLEVBQ1QsTUFBTSxFQUVOLFVBQVUsRUFDVixNQUFNLEVBQ04sS0FBSyxFQUNMLGVBQWUsRUFDZixTQUFTLEVBQ1QsTUFBTSxFQUVQLE1BQU0sZUFBZSxDQUFDOztBQVF2QixNQUFNLE9BQU8sb0JBQW9CO0lBSmpDO1FBS1csY0FBUyxHQUFHLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUM5QixpQkFBWSxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUVsQyxTQUFJLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ25CLFNBQUksR0FBRyxDQUFDLENBQUM7UUFDVCxXQUFNLEdBQXVDLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUMvRCxXQUFNLEdBQXVDLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUUvRCxZQUFPLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUMvQixPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLElBQUksSUFBSSxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxPQUFPLENBQ3ZHLElBQUksQ0FBQyxTQUFTLENBQ2YsQ0FBQztRQUNKLENBQUMsQ0FBQyxDQUFDO1FBRU0sa0JBQWEsR0FBYyxNQUFNLENBQUMsR0FBRyxFQUFFO1lBQzlDLE1BQU0sSUFBSSxHQUFnQixJQUFJLENBQUMsWUFBWSxDQUFDLGFBQWEsQ0FBQztZQUMxRCxJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUUsS0FBSyxTQUFTLElBQUksSUFBSSxDQUFDLE1BQU0sRUFBRSxFQUFFLENBQUM7Z0JBQ2pELEtBQUssTUFBTSxJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUUsZUFBZSxFQUFFLGVBQWUsRUFBRSxNQUFNLENBQUMsRUFBRSxDQUFDO29CQUMvRSxJQUFJLENBQUMsU0FBUyxDQUFDLGVBQWUsQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLENBQUM7Z0JBQzdDLENBQUM7WUFDSCxDQUFDO2lCQUFNLENBQUM7Z0JBQ04sSUFBSSxDQUFDLFNBQVMsQ0FBQyxZQUFZLENBQUMsSUFBSSxFQUFFLGVBQWUsRUFBRSxNQUFNLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUMsQ0FBQztnQkFDMUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxZQUFZLENBQUMsSUFBSSxFQUFFLGVBQWUsRUFBRSxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7Z0JBQ3RFLElBQUksQ0FBQyxTQUFTLENBQUMsWUFBWSxDQUFDLElBQUksRUFBRSxlQUFlLEVBQUUsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUM7Z0JBQ3hFLElBQUksQ0FBQyxTQUFTLENBQUMsWUFBWSxDQUFDLElBQUksRUFBRSxNQUFNLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ3ZELENBQUM7WUFDRCxNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDO1lBQzdCLElBQ0UsSUFBSSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUM7Z0JBQ25CLENBQUMsQ0FBQyxJQUFJLENBQUMsT0FBTyxJQUFJLE9BQU8sS0FBSyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sSUFBSSxPQUFPLEtBQUssWUFBWSxDQUFDLENBQUMsRUFDM0YsQ0FBQztnQkFDRCxJQUFJLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsT0FBTyxFQUFFLEdBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRSxHQUFHLENBQUMsQ0FBQztZQUMvRCxDQUFDO2lCQUFNLENBQUM7Z0JBQ04sSUFBSSxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLE9BQU8sQ0FBQyxDQUFDO1lBQzVDLENBQUM7UUFDSCxDQUFDLENBQUMsQ0FBQztRQWNILG9DQUFvQztRQUNHLGNBQVMsR0FBVyxDQUFDLENBQUM7UUFzQzdEOzs7O1dBSUc7UUFDcUMsWUFBTyxHQUFhLEtBQUssQ0FBQztRQUVsRTs7O1dBR0c7UUFDTSxTQUFJLEdBQVcsYUFBYSxDQUFDO0tBQ3ZDO0lBcEdVLFNBQVMsQ0FBcUI7SUFDOUIsWUFBWSxDQUFzQjtJQUVsQyxJQUFJLENBQWU7SUFDbkIsSUFBSSxDQUFLO0lBQ1QsTUFBTSxDQUF5RDtJQUMvRCxNQUFNLENBQXlEO0lBUS9ELGFBQWEsQ0FxQm5CO0lBaUJIOzs7O09BSUc7SUFDSCxJQUNJLEtBQUssQ0FBQyxLQUF5QjtRQUNqQyxJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN6QixDQUFDO0lBRUQsSUFBSSxLQUFLO1FBQ1AsT0FBTyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7SUFDdkIsQ0FBQztJQUVELElBQ0ksS0FBSyxDQUFDLEtBQXlCO1FBQ2pDLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3pCLENBQUM7SUFTRDs7OztPQUlHO0lBQ0gsSUFDSSxHQUFHLENBQUMsR0FBVztRQUNqQixJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUNwRCxDQUFDOytHQXZGVSxvQkFBb0I7bUdBQXBCLG9CQUFvQiwrRkEwQ1gsZ0JBQWdCLHlEQVNoQixlQUFlLDZCQU9mLGVBQWUsNkJBU2YsZUFBZSwyQ0FpQmYsZUFBZSxtQ0FVZixnQkFBZ0I7OzRGQTlGekIsb0JBQW9CO2tCQUpoQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLFVBQVUsRUFBRSxJQUFJO2lCQUNqQjs4QkEyQ3lDLFFBQVE7c0JBQS9DLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUU7Z0JBTTdCLEtBQUs7c0JBQWIsS0FBSztnQkFHaUMsU0FBUztzQkFBL0MsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxlQUFlLEVBQUU7Z0JBUWpDLEtBQUs7c0JBRFIsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxlQUFlLEVBQUU7Z0JBVWpDLEtBQUs7c0JBRFIsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxlQUFlLEVBQUU7Z0JBVTVCLE9BQU87c0JBQWYsS0FBSztnQkFRRixHQUFHO3NCQUROLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFFO2dCQVVHLE9BQU87c0JBQTlDLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUU7Z0JBTTdCLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIGJvb2xlYW5BdHRyaWJ1dGUsXG4gIGNvbXB1dGVkLFxuICBEaXJlY3RpdmUsXG4gIGVmZmVjdCxcbiAgRWZmZWN0UmVmLFxuICBFbGVtZW50UmVmLFxuICBpbmplY3QsXG4gIElucHV0LFxuICBudW1iZXJBdHRyaWJ1dGUsXG4gIFJlbmRlcmVyMixcbiAgc2lnbmFsLFxuICBXcml0YWJsZVNpZ25hbFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbG9ycyB9IGZyb20gJy4uL2NvcmV1aS50eXBlcyc7XG5pbXBvcnQgeyBJUHJvZ3Jlc3NCYXIgfSBmcm9tICcuL3Byb2dyZXNzLnR5cGUnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbY1Byb2dyZXNzQmFyXScsXG4gIHN0YW5kYWxvbmU6IHRydWVcbn0pXG5leHBvcnQgY2xhc3MgUHJvZ3Jlc3NCYXJEaXJlY3RpdmUgaW1wbGVtZW50cyBJUHJvZ3Jlc3NCYXIge1xuICByZWFkb25seSAjcmVuZGVyZXIgPSBpbmplY3QoUmVuZGVyZXIyKTtcbiAgcmVhZG9ubHkgI2hvc3RFbGVtZW50ID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuXG4gIHJlYWRvbmx5ICNtYXggPSBzaWduYWwoMTAwKTtcbiAgcmVhZG9ubHkgI21pbiA9IDA7XG4gIHJlYWRvbmx5ICN2YWx1ZTogV3JpdGFibGVTaWduYWw8bnVtYmVyIHwgdW5kZWZpbmVkPiA9IHNpZ25hbCh1bmRlZmluZWQpO1xuICByZWFkb25seSAjd2lkdGg6IFdyaXRhYmxlU2lnbmFsPG51bWJlciB8IHVuZGVmaW5lZD4gPSBzaWduYWwodW5kZWZpbmVkKTtcblxuICByZWFkb25seSBwZXJjZW50ID0gY29tcHV0ZWQoKCkgPT4ge1xuICAgIHJldHVybiArKCgoKHRoaXMuI3ZhbHVlKCkgPz8gdGhpcy4jd2lkdGgoKSA/PyAwKSAtIHRoaXMuI21pbikgLyAodGhpcy4jbWF4KCkgLSB0aGlzLiNtaW4pKSAqIDEwMCkudG9GaXhlZChcbiAgICAgIHRoaXMucHJlY2lzaW9uXG4gICAgKTtcbiAgfSk7XG5cbiAgcmVhZG9ubHkgI3ZhbHVlc0VmZmVjdDogRWZmZWN0UmVmID0gZWZmZWN0KCgpID0+IHtcbiAgICBjb25zdCBob3N0OiBIVE1MRWxlbWVudCA9IHRoaXMuI2hvc3RFbGVtZW50Lm5hdGl2ZUVsZW1lbnQ7XG4gICAgaWYgKHRoaXMuI3ZhbHVlKCkgPT09IHVuZGVmaW5lZCB8fCB0aGlzLiN3aWR0aCgpKSB7XG4gICAgICBmb3IgKGNvbnN0IG5hbWUgb2YgWydhcmlhLXZhbHVlbm93JywgJ2FyaWEtdmFsdWVtYXgnLCAnYXJpYS12YWx1ZW1pbicsICdyb2xlJ10pIHtcbiAgICAgICAgdGhpcy4jcmVuZGVyZXIucmVtb3ZlQXR0cmlidXRlKGhvc3QsIG5hbWUpO1xuICAgICAgfVxuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLiNyZW5kZXJlci5zZXRBdHRyaWJ1dGUoaG9zdCwgJ2FyaWEtdmFsdWVub3cnLCBTdHJpbmcodGhpcy4jdmFsdWUoKSkpO1xuICAgICAgdGhpcy4jcmVuZGVyZXIuc2V0QXR0cmlidXRlKGhvc3QsICdhcmlhLXZhbHVlbWluJywgU3RyaW5nKHRoaXMuI21pbikpO1xuICAgICAgdGhpcy4jcmVuZGVyZXIuc2V0QXR0cmlidXRlKGhvc3QsICdhcmlhLXZhbHVlbWF4JywgU3RyaW5nKHRoaXMuI21heCgpKSk7XG4gICAgICB0aGlzLiNyZW5kZXJlci5zZXRBdHRyaWJ1dGUoaG9zdCwgJ3JvbGUnLCB0aGlzLnJvbGUpO1xuICAgIH1cbiAgICBjb25zdCB0YWdOYW1lID0gaG9zdC50YWdOYW1lO1xuICAgIGlmIChcbiAgICAgIHRoaXMucGVyY2VudCgpID49IDAgJiZcbiAgICAgICgodGhpcy5zdGFja2VkICYmIHRhZ05hbWUgPT09ICdDLVBST0dSRVNTJykgfHwgKCF0aGlzLnN0YWNrZWQgJiYgdGFnTmFtZSAhPT0gJ0MtUFJPR1JFU1MnKSlcbiAgICApIHtcbiAgICAgIHRoaXMuI3JlbmRlcmVyLnNldFN0eWxlKGhvc3QsICd3aWR0aCcsIGAke3RoaXMucGVyY2VudCgpfSVgKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy4jcmVuZGVyZXIucmVtb3ZlU3R5bGUoaG9zdCwgJ3dpZHRoJyk7XG4gICAgfVxuICB9KTtcblxuICAvKipcbiAgICogVXNlIHRvIGFuaW1hdGUgdGhlIHN0cmlwZXMgcmlnaHQgdG8gbGVmdCB2aWEgQ1NTMyBhbmltYXRpb25zLlxuICAgKiBAdHlwZSBib29sZWFuXG4gICAqL1xuICBASW5wdXQoeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSkgYW5pbWF0ZWQ/OiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBTZXRzIHRoZSBjb2xvciBjb250ZXh0IG9mIHRoZSBjb21wb25lbnQgdG8gb25lIG9mIENvcmVVSeKAmXMgdGhlbWVkIGNvbG9ycy5cbiAgICogQHZhbHVlcyAncHJpbWFyeScsICdzZWNvbmRhcnknLCAnc3VjY2VzcycsICdkYW5nZXInLCAnd2FybmluZycsICdpbmZvJywgJ2RhcmsnLCAnbGlnaHQnXG4gICAqL1xuICBASW5wdXQoKSBjb2xvcj86IENvbG9ycztcblxuICAvLyBUT0RPOiBjaGVjayBpZiB0aGlzIGlzIG5lY2Vzc2FyeS5cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBudW1iZXJBdHRyaWJ1dGUgfSkgcHJlY2lzaW9uOiBudW1iZXIgPSAwO1xuXG4gIC8qKlxuICAgKiBUaGUgcGVyY2VudCB2YWx1ZSB0aGUgUHJvZ3Jlc3NCYXIuXG4gICAqIEB0eXBlIG51bWJlclxuICAgKiBAZGVmYXVsdCAwXG4gICAqL1xuICBASW5wdXQoeyB0cmFuc2Zvcm06IG51bWJlckF0dHJpYnV0ZSB9KVxuICBzZXQgdmFsdWUodmFsdWU6IG51bWJlciB8IHVuZGVmaW5lZCkge1xuICAgIHRoaXMuI3ZhbHVlLnNldCh2YWx1ZSk7XG4gIH1cblxuICBnZXQgdmFsdWUoKSB7XG4gICAgcmV0dXJuIHRoaXMuI3ZhbHVlKCk7XG4gIH1cblxuICBASW5wdXQoeyB0cmFuc2Zvcm06IG51bWJlckF0dHJpYnV0ZSB9KVxuICBzZXQgd2lkdGgodmFsdWU6IG51bWJlciB8IHVuZGVmaW5lZCkge1xuICAgIHRoaXMuI3dpZHRoLnNldCh2YWx1ZSk7XG4gIH1cblxuICAvKipcbiAgICogU2V0IHRoZSBwcm9ncmVzcyBiYXIgdmFyaWFudCB0byBvcHRpb25hbCBzdHJpcGVkLlxuICAgKiBAdmFsdWVzICdzdHJpcGVkJ1xuICAgKiBAZGVmYXVsdCB1bmRlZmluZWRcbiAgICovXG4gIEBJbnB1dCgpIHZhcmlhbnQ/OiAnc3RyaXBlZCc7XG5cbiAgLyoqXG4gICAqIFRoZSBtYXggdmFsdWUgb2YgdGhlIFByb2dyZXNzQmFyLlxuICAgKiBAdHlwZSBudW1iZXJcbiAgICogQGRlZmF1bHQgMTAwXG4gICAqL1xuICBASW5wdXQoeyB0cmFuc2Zvcm06IG51bWJlckF0dHJpYnV0ZSB9KVxuICBzZXQgbWF4KG1heDogbnVtYmVyKSB7XG4gICAgdGhpcy4jbWF4LnNldChpc05hTihtYXgpIHx8IG1heCA8PSAwID8gMTAwIDogbWF4KTtcbiAgfVxuXG4gIC8qKlxuICAgKiBTdGFja2VkIFByb2dyZXNzQmFycy5cbiAgICogQHR5cGUgYm9vbGVhblxuICAgKiBAZGVmYXVsdCBmYWxzZVxuICAgKi9cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pIHN0YWNrZWQ/OiBib29sZWFuID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIFNldCBkZWZhdWx0IGh0bWwgcm9sZSBhdHRyaWJ1dGUuXG4gICAqIEB0eXBlIHN0cmluZ1xuICAgKi9cbiAgQElucHV0KCkgcm9sZTogc3RyaW5nID0gJ3Byb2dyZXNzYmFyJztcbn1cbiJdfQ==