kwikui
Version:
KwikID's UI Component Library in Angular
87 lines • 13.1 kB
JavaScript
import { Component, Input } from "@angular/core";
import { throwErrorMessage } from "../../../../helpers/kwikui.common.helpers";
import { DEFAULT_VALUES, VALIDATE_KEY_VALUES } from "./progress-bar.constants";
import { isValidKeyValue } from "./progress-bar.validation";
import * as i0 from "@angular/core";
import * as i1 from "@taiga-ui/kit";
import * as i2 from "@angular/common";
export class KwikUIProgressBarComponent {
constructor() {
this.color = DEFAULT_VALUES.color;
this.id = DEFAULT_VALUES.id;
this.isShowLabel = DEFAULT_VALUES.isShowLabel;
this.max = DEFAULT_VALUES.max;
this.size = DEFAULT_VALUES.size;
this.value = DEFAULT_VALUES.value;
}
ngOnInit() {
this.color = this.isColorEmpty() ? "var(--tui-primary)" : this.color;
}
ngOnChanges(changes) {
for (const change of Object.entries(changes)) {
const key = change[0];
const value = change[1].currentValue;
this.validateInputProperty(key, value);
}
if (changes.hasOwnProperty("value") && !changes.value.firstChange) {
this.value = changes.value.currentValue;
}
if (changes.hasOwnProperty("max") && !changes.max.firstChange) {
this.max = changes.max.currentValue;
}
if (changes.hasOwnProperty("size") && !changes.size.firstChange) {
this.size = changes.size.currentValue;
}
if (changes.hasOwnProperty("color") && !changes.color.firstChange) {
this.color = changes.color.currentValue;
}
if (changes.hasOwnProperty("isShowLabel") &&
!changes.isShowLabel.firstChange) {
this.isShowLabel = changes.isShowLabel.currentValue;
}
}
/**
* @description Handles setting up of error and focus on the input field is it invalid
*/
validateInputProperty(key, value) {
if (VALIDATE_KEY_VALUES[key] && !isValidKeyValue(key, value)) {
this[key] = DEFAULT_VALUES[key];
throwErrorMessage("kwikui-progress-bar", this.id, key, value, DEFAULT_VALUES[key]);
}
}
isColorEmpty() {
if (Array.isArray(this.color)) {
if (this.color.length < 1) {
return true;
}
return false;
}
if (this.color === "") {
return true;
}
return false;
}
}
/** @nocollapse */ KwikUIProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUIProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikUIProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikUIProgressBarComponent, selector: "kwikui-progress-bar", inputs: { color: "color", id: "id", isShowLabel: "isShowLabel", max: "max", size: "size", value: "value" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"value as value\">\n <label\n *ngIf=\"isShowLabel\"\n tuiProgressLabel\n class=\"progress-label\"\n >\n {{ value }}%\n <progress\n tuiProgressBar\n new\n [value]=\"value\"\n [max]=\"max\"\n [size]=\"size\"\n [color]=\"color\"\n >\n </progress>\n </label>\n\n <progress\n *ngIf=\"!isShowLabel\"\n tuiProgressBar\n new\n [value]=\"value\"\n [max]=\"max\"\n [size]=\"size\"\n [color]=\"color\"\n >\n </progress>\n</ng-container>\n", styles: [".text{font:var(--tui-font-text-s)}.progress-label{width:100%;text-shadow:0 0 .25rem #000;color:var(--tui-primary-text)}.progress-bar{width:100%;height:16px;border-radius:8px;appearance:none}.progress-bar::-webkit-progress-bar{background-color:#eee;border-radius:8px}.progress-bar::-webkit-progress-value{background:var(--progress-fill, #3880ff);border-radius:8px}.progress-bar::-moz-progress-bar{background:var(--progress-fill, #3880ff);border-radius:8px}\n"], components: [{ type: i1.TuiProgressLabelComponent, selector: "label[tuiProgressLabel]" }, { type: i1.TuiProgressBarComponent, selector: "progress[tuiProgressBar]", inputs: ["color", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikUIProgressBarComponent, decorators: [{
type: Component,
args: [{
selector: "kwikui-progress-bar",
templateUrl: "./progress-bar.component.html",
styleUrls: ["./progress-bar.component.scss"]
}]
}], ctorParameters: function () { return []; }, propDecorators: { color: [{
type: Input
}], id: [{
type: Input
}], isShowLabel: [{
type: Input
}], max: [{
type: Input
}], size: [{
type: Input
}], value: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2t3aWt1aS9zcmMvbGliL2NvbXBvbmVudHMvY29yZS9wcm9ncmVzcy9wcm9ncmVzcy1iYXIvcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2t3aWt1aS9zcmMvbGliL2NvbXBvbmVudHMvY29yZS9wcm9ncmVzcy9wcm9ncmVzcy1iYXIvcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUlOLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBQzlFLE9BQU8sRUFBRSxjQUFjLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUMvRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7Ozs7QUFRNUQsTUFBTSxPQUFPLDBCQUEwQjtJQWFyQztRQVpTLFVBQUssR0FBVyxjQUFjLENBQUMsS0FBSyxDQUFDO1FBRXJDLE9BQUUsR0FBVyxjQUFjLENBQUMsRUFBRSxDQUFDO1FBRS9CLGdCQUFXLEdBQVksY0FBYyxDQUFDLFdBQVcsQ0FBQztRQUVsRCxRQUFHLEdBQVcsY0FBYyxDQUFDLEdBQUcsQ0FBQztRQUVqQyxTQUFJLEdBQTJCLGNBQWMsQ0FBQyxJQUFJLENBQUM7UUFFbkQsVUFBSyxHQUFXLGNBQWMsQ0FBQyxLQUFLLENBQUM7SUFFL0IsQ0FBQztJQUVoQixRQUFRO1FBQ04sSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUMsQ0FBQyxDQUFDLG9CQUFvQixDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3ZF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QUs7Z0JBRUcsS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPbkluaXQsXG4gIFNpbXBsZUNoYW5nZXNcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IHRocm93RXJyb3JNZXNzYWdlIH0gZnJvbSBcIi4uLy4uLy4uLy4uL2hlbHBlcnMva3dpa3VpLmNvbW1vbi5oZWxwZXJzXCI7XG5pbXBvcnQgeyBERUZBVUxUX1ZBTFVFUywgVkFMSURBVEVfS0VZX1ZBTFVFUyB9IGZyb20gXCIuL3Byb2dyZXNzLWJhci5jb25zdGFudHNcIjtcbmltcG9ydCB7IGlzVmFsaWRLZXlWYWx1ZSB9IGZyb20gXCIuL3Byb2dyZXNzLWJhci52YWxpZGF0aW9uXCI7XG5pbXBvcnQgeyBUS3dpa1VJUHJvZ3Jlc3NCYXJTaXplIH0gZnJvbSBcIi4vcHJvZ3Jlc3MtYmFyLmRlZmluaXRpb25zXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJrd2lrdWktcHJvZ3Jlc3MtYmFyXCIsXG4gIHRlbXBsYXRlVXJsOiBcIi4vcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlVXJsczogW1wiLi9wcm9ncmVzcy1iYXIuY29tcG9uZW50LnNjc3NcIl1cbn0pXG5leHBvcnQgY2xhc3MgS3dpa1VJUHJvZ3Jlc3NCYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGNvbG9yOiBzdHJpbmcgPSBERUZBVUxUX1ZBTFVFUy5jb2xvcjtcblxuICBASW5wdXQoKSBpZDogc3RyaW5nID0gREVGQVVMVF9WQUxVRVMuaWQ7XG5cbiAgQElucHV0KCkgaXNTaG93TGFiZWw6IGJvb2xlYW4gPSBERUZBVUxUX1ZBTFVFUy5pc1Nob3dMYWJlbDtcblxuICBASW5wdXQoKSBtYXg6IG51bWJlciA9IERFRkFVTFRfVkFMVUVTLm1heDtcblxuICBASW5wdXQoKSBzaXplOiBUS3dpa1VJUHJvZ3Jlc3NCYXJTaXplID0gREVGQVVMVF9WQUxVRVMuc2l6ZTtcblxuICBASW5wdXQoKSB2YWx1ZTogbnVtYmVyID0gREVGQVVMVF9WQUxVRVMudmFsdWU7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuY29sb3IgPSB0aGlzLmlzQ29sb3JFbXB0eSgpID8gXCJ2YXIoLS10dWktcHJpbWFyeSlcIiA6IHRoaXMuY29sb3I7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gICAgZm9yIChjb25zdCBjaGFuZ2Ugb2YgT2JqZWN0LmVudHJpZXMoY2hhbmdlcykpIHtcbiAgICAgIGNvbnN0IGtleTogc3RyaW5nID0gY2hhbmdlWzBdO1xuICAgICAgY29uc3QgdmFsdWU6IGFueSA9IGNoYW5nZVsxXS5jdXJyZW50VmFsdWU7XG4gICAgICB0aGlzLnZhbGlkYXRlSW5wdXRQcm9wZXJ0eShrZXksIHZhbHVlKTtcbiAgICB9XG5cbiAgICBpZiAoY2hhbmdlcy5oYXNPd25Qcm9wZXJ0eShcInZhbHVlXCIpICYmICFjaGFuZ2VzLnZhbHVlLmZpcnN0Q2hhbmdlKSB7XG4gICAgICB0aGlzLnZhbHVlID0gY2hhbmdlcy52YWx1ZS5jdXJyZW50VmFsdWU7XG4gICAgfVxuICAgIGlmIChjaGFuZ2VzLmhhc093blByb3BlcnR5KFwibWF4XCIpICYmICFjaGFuZ2VzLm1heC5maXJzdENoYW5nZSkge1xuICAgICAgdGhpcy5tYXggPSBjaGFuZ2VzLm1heC5jdXJyZW50VmFsdWU7XG4gICAgfVxuICAgIGlmIChjaGFuZ2VzLmhhc093blByb3BlcnR5KFwic2l6ZVwiKSAmJiAhY2hhbmdlcy5zaXplLmZpcnN0Q2hhbmdlKSB7XG4gICAgICB0aGlzLnNpemUgPSBjaGFuZ2VzLnNpemUuY3VycmVudFZhbHVlO1xuICAgIH1cbiAgICBpZiAoY2hhbmdlcy5oYXNPd25Qcm9wZXJ0eShcImNvbG9yXCIpICYmICFjaGFuZ2VzLmNvbG9yLmZpcnN0Q2hhbmdlKSB7XG4gICAgICB0aGlzLmNvbG9yID0gY2hhbmdlcy5jb2xvci5jdXJyZW50VmFsdWU7XG4gICAgfVxuICAgIGlmIChcbiAgICAgIGNoYW5nZXMuaGFzT3duUHJvcGVydHkoXCJpc1Nob3dMYWJlbFwiKSAmJlxuICAgICAgIWNoYW5nZXMuaXNTaG93TGFiZWwuZmlyc3RDaGFuZ2VcbiAgICApIHtcbiAgICAgIHRoaXMuaXNTaG93TGFiZWwgPSBjaGFuZ2VzLmlzU2hvd0xhYmVsLmN1cnJlbnRWYWx1ZTtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogQGRlc2NyaXB0aW9uIEhhbmRsZXMgc2V0dGluZyB1cCBvZiBlcnJvciBhbmQgZm9jdXMgb24gdGhlIGlucHV0IGZpZWxkIGlzIGl0IGludmFsaWRcbiAgICovXG4gIHByaXZhdGUgdmFsaWRhdGVJbnB1dFByb3BlcnR5KGtleTogc3RyaW5nLCB2YWx1ZTogYW55KTogdm9pZCB7XG4gICAgaWYgKFZBTElEQVRFX0tFWV9WQUxVRVNba2V5XSAmJiAhaXNWYWxpZEtleVZhbHVlKGtleSwgdmFsdWUpKSB7XG4gICAgICB0aGlzW2tleV0gPSBERUZBVUxUX1ZBTFVFU1trZXldO1xuICAgICAgdGhyb3dFcnJvck1lc3NhZ2UoXG4gICAgICAgIFwia3dpa3VpLXByb2dyZXNzLWJhclwiLFxuICAgICAgICB0aGlzLmlkLFxuICAgICAgICBrZXksXG4gICAgICAgIHZhbHVlLFxuICAgICAgICBERUZBVUxUX1ZBTFVFU1trZXldXG4gICAgICApO1xuICAgIH1cbiAgfVxuXG4gIGlzQ29sb3JFbXB0eSgpOiBib29sZWFuIHtcbiAgICBpZiAoQXJyYXkuaXNBcnJheSh0aGlzLmNvbG9yKSkge1xuICAgICAgaWYgKHRoaXMuY29sb3IubGVuZ3RoIDwgMSkge1xuICAgICAgICByZXR1cm4gdHJ1ZTtcbiAgICAgIH1cbiAgICAgIHJldHVybiBmYWxzZTtcbiAgICB9XG4gICAgaWYgKHRoaXMuY29sb3IgPT09IFwiXCIpIHtcbiAgICAgIHJldHVybiB0cnVlO1xuICAgIH1cbiAgICByZXR1cm4gZmFsc2U7XG4gIH1cbn1cbiIsIjxuZy1jb250YWluZXIgKm5nSWY9XCJ2YWx1ZSBhcyB2YWx1ZVwiPlxuICA8bGFiZWxcbiAgICAqbmdJZj1cImlzU2hvd0xhYmVsXCJcbiAgICB0dWlQcm9ncmVzc0xhYmVsXG4gICAgY2xhc3M9XCJwcm9ncmVzcy1sYWJlbFwiXG4gID5cbiAgICB7eyB2YWx1ZSB9fSVcbiAgICA8cHJvZ3Jlc3NcbiAgICAgIHR1aVByb2dyZXNzQmFyXG4gICAgICBuZXdcbiAgICAgIFt2YWx1ZV09XCJ2YWx1ZVwiXG4gICAgICBbbWF4XT1cIm1heFwiXG4gICAgICBbc2l6ZV09XCJzaXplXCJcbiAgICAgIFtjb2xvcl09XCJjb2xvclwiXG4gICAgPlxuICAgIDwvcHJvZ3Jlc3M+XG4gIDwvbGFiZWw+XG5cbiAgPHByb2dyZXNzXG4gICAgKm5nSWY9XCIhaXNTaG93TGFiZWxcIlxuICAgIHR1aVByb2dyZXNzQmFyXG4gICAgbmV3XG4gICAgW3ZhbHVlXT1cInZhbHVlXCJcbiAgICBbbWF4XT1cIm1heFwiXG4gICAgW3NpemVdPVwic2l6ZVwiXG4gICAgW2NvbG9yXT1cImNvbG9yXCJcbiAgPlxuICA8L3Byb2dyZXNzPlxuPC9uZy1jb250YWluZXI+XG4iXX0=