@mobilelivenpm/fds-angular-qa
Version:
This library was generated with [Nx](https://nx.dev).
46 lines • 4.94 kB
JavaScript
import { Component, Input } from '@angular/core';
export class ProgressComponent {
constructor() {
this.min = 0;
this.max = 100;
this.value = 0;
this.showLabel = false;
}
ngOnInit() { }
_getWidth() {
const widthPercent = Math.floor(((this.value - this.min) / (this.max - this.min)) * 100);
return Math.min(100, Math.max(0, widthPercent));
}
_getLabelStyle() {
// Label should not go out of boundaries, add compensation for min/max values
if (this.value == this.min) {
return { transform: 'none' };
}
else if (this.value == this.max) {
return { transform: 'translateX(-100%)' };
}
return {};
}
formatValue(value) {
if (this.displayWith) {
return this.displayWith(value);
}
return value || 0;
}
}
ProgressComponent.decorators = [
{ type: Component, args: [{
selector: 'fds-progress',
template: "<div class=\"progress mb--5\">\n <div\n class=\"progress-bar progress-primary\"\n [style.width.%]=\"_getWidth()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"value\"\n [attr.aria-valuemin]=\"min\"\n [attr.aria-valuemax]=\"max\"\n >\n <span\n role=\"alert\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"pt--2 px--2\"\n *ngIf=\"showLabel\"\n [ngStyle]=\"_getLabelStyle()\"\n >{{ formatValue(value) }}</span\n >\n </div>\n</div>",
styles: [""]
},] }
];
ProgressComponent.ctorParameters = () => [];
ProgressComponent.propDecorators = {
min: [{ type: Input }],
max: [{ type: Input }],
value: [{ type: Input }],
showLabel: [{ type: Input }],
displayWith: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hbmd1bGFyL3NyYy9saWIvcHJvZ3Jlc3MvcHJvZ3Jlc3MuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBT3pELE1BQU0sT0FBTyxpQkFBaUI7SUFXNUI7UUFWUyxRQUFHLEdBQUcsQ0FBQyxDQUFDO1FBRVIsUUFBRyxHQUFHLEdBQUcsQ0FBQztRQUVWLFVBQUssR0FBRyxDQUFDLENBQUM7UUFFVixjQUFTLEdBQUcsS0FBSyxDQUFDO0lBSVosQ0FBQztJQUVoQixRQUFRLEtBQVUsQ0FBQztJQUVuQixTQUFTO1FBQ1AsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FDN0IsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQ3hELENBQUM7UUFDRixPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLFlBQVksQ0FBQyxDQUFDLENBQUM7SUFDbEQsQ0FBQztJQUVELGNBQWM7UUFDWiw2RUFBNkU7UUFDN0UsSUFBSSxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxHQUFHLEVBQUU7WUFDMUIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsQ0FBQztTQUM5QjthQUFNLElBQUksSUFBSSxDQUFDLEtBQUssSUFBSSxJQUFJLENBQUMsR0FBRyxFQUFFO1lBQ2pDLE9BQU8sRUFBRSxTQUFTLEVBQUUsbUJBQW1CLEVBQUUsQ0FBQztTQUMzQztRQUNELE9BQU8sRUFBRSxDQUFDO0lBQ1osQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFLO1FBQ2YsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ3BCLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUNoQztRQUNELE9BQU8sS0FBSyxJQUFJLENBQUMsQ0FBQztJQUNwQixDQUFDOzs7WUExQ0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxjQUFjO2dCQUN4QixvaUJBQXdDOzthQUV6Qzs7OztrQkFFRSxLQUFLO2tCQUVMLEtBQUs7b0JBRUwsS0FBSzt3QkFFTCxLQUFLOzBCQUVMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZmRzLXByb2dyZXNzJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3Byb2dyZXNzLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcHJvZ3Jlc3MuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBQcm9ncmVzc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIG1pbiA9IDA7XG5cbiAgQElucHV0KCkgbWF4ID0gMTAwO1xuXG4gIEBJbnB1dCgpIHZhbHVlID0gMDtcblxuICBASW5wdXQoKSBzaG93TGFiZWwgPSBmYWxzZTtcblxuICBASW5wdXQoKSBkaXNwbGF5V2l0aDogKHZhbHVlOiBudW1iZXIpID0+IHN0cmluZyB8IG51bWJlcjtcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7fVxuXG4gIF9nZXRXaWR0aCgpIHtcbiAgICBjb25zdCB3aWR0aFBlcmNlbnQgPSBNYXRoLmZsb29yKFxuICAgICAgKCh0aGlzLnZhbHVlIC0gdGhpcy5taW4pIC8gKHRoaXMubWF4IC0gdGhpcy5taW4pKSAqIDEwMFxuICAgICk7XG4gICAgcmV0dXJuIE1hdGgubWluKDEwMCwgTWF0aC5tYXgoMCwgd2lkdGhQZXJjZW50KSk7XG4gIH1cblxuICBfZ2V0TGFiZWxTdHlsZSgpIHtcbiAgICAvLyBMYWJlbCBzaG91bGQgbm90IGdvIG91dCBvZiBib3VuZGFyaWVzLCBhZGQgY29tcGVuc2F0aW9uIGZvciBtaW4vbWF4IHZhbHVlc1xuICAgIGlmICh0aGlzLnZhbHVlID09IHRoaXMubWluKSB7XG4gICAgICByZXR1cm4geyB0cmFuc2Zvcm06ICdub25lJyB9O1xuICAgIH0gZWxzZSBpZiAodGhpcy52YWx1ZSA9PSB0aGlzLm1heCkge1xuICAgICAgcmV0dXJuIHsgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgtMTAwJSknIH07XG4gICAgfVxuICAgIHJldHVybiB7fTtcbiAgfVxuXG4gIGZvcm1hdFZhbHVlKHZhbHVlKSB7XG4gICAgaWYgKHRoaXMuZGlzcGxheVdpdGgpIHtcbiAgICAgIHJldHVybiB0aGlzLmRpc3BsYXlXaXRoKHZhbHVlKTtcbiAgICB9XG4gICAgcmV0dXJuIHZhbHVlIHx8IDA7XG4gIH1cbn1cbiJdfQ==