UNPKG

xui

Version:

xUI Components for Angular

57 lines 8.66 kB
import { __decorate, __metadata } from "tslib"; import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; import { InputNumber } from '../utils'; import * as i0 from "@angular/core"; import * as i1 from "@angular/common"; import * as i2 from "../decagram/decagram.component"; export class ProgressComponent { constructor() { this.type = 'line'; this.color = 'primary'; this.status = null; } get style() { const ret = { 'x-progress-indicator-status': true }; ret[`x-progress-${this.getColor()}`] = true; return ret; } getIndicator() { if (this.status === 'error') { return -1; } if (this.progress === 100) { return 1; } return 0; } getColor() { if (this.status === 'error') { return 'error'; } if (this.progress === 100) { return 'success'; } return this.color; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: ProgressComponent, selector: "xui-progress", inputs: { progress: "progress", type: "type", color: "color", status: "status" }, ngImport: i0, template: "<div class=\"x-progress\">\n <ng-container *ngIf=\"type === 'line'\">\n <div class=\"x-progress-indicator\">\n <div [ngClass]=\"style\" [style.width.%]=\"progress\"></div>\n </div>\n\n <ng-container [ngSwitch]=\"getIndicator()\">\n <ng-container *ngSwitchCase=\"1\">\n <xui-decagram color=\"success\" type=\"circle\">check-bold</xui-decagram>\n </ng-container>\n <ng-container *ngSwitchCase=\"0\"> {{ progress }}% </ng-container>\n <ng-container *ngSwitchCase=\"-1\">\n <xui-decagram color=\"error\" type=\"circle\">close-thick</xui-decagram>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"type === 'circle'\">\n <div class=\"x-progress-indicator\">\n <div [ngClass]=\"style\" [style.width.%]=\"progress\"></div>\n </div>\n </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.DecagramComponent, selector: "xui-decagram", inputs: ["iconSize", "type", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); } } __decorate([ InputNumber(), __metadata("design:type", Number) ], ProgressComponent.prototype, "progress", void 0); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ProgressComponent, decorators: [{ type: Component, args: [{ selector: 'xui-progress', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-progress\">\n <ng-container *ngIf=\"type === 'line'\">\n <div class=\"x-progress-indicator\">\n <div [ngClass]=\"style\" [style.width.%]=\"progress\"></div>\n </div>\n\n <ng-container [ngSwitch]=\"getIndicator()\">\n <ng-container *ngSwitchCase=\"1\">\n <xui-decagram color=\"success\" type=\"circle\">check-bold</xui-decagram>\n </ng-container>\n <ng-container *ngSwitchCase=\"0\"> {{ progress }}% </ng-container>\n <ng-container *ngSwitchCase=\"-1\">\n <xui-decagram color=\"error\" type=\"circle\">close-thick</xui-decagram>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"type === 'circle'\">\n <div class=\"x-progress-indicator\">\n <div [ngClass]=\"style\" [style.width.%]=\"progress\"></div>\n </div>\n </ng-container>\n</div>\n" }] }], propDecorators: { progress: [{ type: Input }], type: [{ type: Input }], color: [{ type: Input }], status: [{ type: Input }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy94dWkvc3JjL3Byb2dyZXNzL3Byb2dyZXNzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMveHVpL3NyYy9wcm9ncmVzcy9wcm9ncmVzcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLFVBQVUsQ0FBQzs7OztBQVF2QyxNQUFNLE9BQU8saUJBQWlCO0lBTDlCO1FBT1csU0FBSSxHQUFpQixNQUFNLENBQUM7UUFDNUIsVUFBSyxHQUFrQixTQUFTLENBQUM7UUFDakMsV0FBTSxHQUFtQixJQUFJLENBQUM7S0FrQ3hDO0lBaENDLElBQUksS0FBSztRQUNQLE1BQU0sR0FBRyxHQUFpQztZQUN4Qyw2QkFBNkIsRUFBRSxJQUFJO1NBQ3BDLENBQUM7UUFFRixHQUFHLENBQUMsY0FBYyxJQUFJLENBQUMsUUFBUSxFQUFFLEVBQUUsQ0FBQyxHQUFHLElBQUksQ0FBQztRQUM1QyxPQUFPLEdBQUcsQ0FBQztJQUNiLENBQUM7SUFFRCxZQUFZO1FBQ1YsSUFBSSxJQUFJLENBQUMsTUFBTSxLQUFLLE9BQU8sRUFBRTtZQUMzQixPQUFPLENBQUMsQ0FBQyxDQUFDO1NBQ1g7UUFFRCxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUssR0FBRyxFQUFFO1lBQ3pCLE9BQU8sQ0FBQyxDQUFDO1NBQ1Y7UUFFRCxPQUFPLENBQUMsQ0FBQztJQUNYLENBQUM7SUFFTyxRQUFRO1FBQ2QsSUFBSSxJQUFJLENBQUMsTUFBTSxLQUFLLE9BQU8sRUFBRTtZQUMzQixPQUFPLE9BQU8sQ0FBQztTQUNoQjtRQUVELElBQUksSUFBSSxDQUFDLFFBQVEsS0FBSyxHQUFHLEVBQUU7WUFDekIsT0FBTyxTQUFTLENBQUM7U0FDbEI7UUFFRCxPQUFPLElBQUksQ0FBQyxLQUFLLENBQUM7SUFDcEIsQ0FBQzs4R0FyQ1UsaUJBQWlCO2tHQUFqQixpQkFBaUIsc0lDVDlCLHUxQkF1QkE7O0FEYjBCO0lBQWQsV0FBVyxFQUFFOzttREFBbUI7MkZBRC9CLGlCQUFpQjtrQkFMN0IsU0FBUzsrQkFDRSxjQUFjLG1CQUNQLHVCQUF1QixDQUFDLE1BQU07OEJBSXZCLFFBQVE7c0JBQS9CLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSW5wdXROdW1iZXIgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBQcm9ncmVzc0NvbG9yLCBQcm9ncmVzc1N0YXR1cywgUHJvZ3Jlc3NUeXBlIH0gZnJvbSAnLi9wcm9ncmVzcy50eXBlcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3h1aS1wcm9ncmVzcycsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICB0ZW1wbGF0ZVVybDogJy4vcHJvZ3Jlc3MuY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIFByb2dyZXNzQ29tcG9uZW50IHtcbiAgQElucHV0KCkgQElucHV0TnVtYmVyKCkgcHJvZ3Jlc3MhOiBudW1iZXI7XG4gIEBJbnB1dCgpIHR5cGU6IFByb2dyZXNzVHlwZSA9ICdsaW5lJztcbiAgQElucHV0KCkgY29sb3I6IFByb2dyZXNzQ29sb3IgPSAncHJpbWFyeSc7XG4gIEBJbnB1dCgpIHN0YXR1czogUHJvZ3Jlc3NTdGF0dXMgPSBudWxsO1xuXG4gIGdldCBzdHlsZSgpIHtcbiAgICBjb25zdCByZXQ6IHsgW2tsYXNzOiBzdHJpbmddOiBib29sZWFuIH0gPSB7XG4gICAgICAneC1wcm9ncmVzcy1pbmRpY2F0b3Itc3RhdHVzJzogdHJ1ZVxuICAgIH07XG5cbiAgICByZXRbYHgtcHJvZ3Jlc3MtJHt0aGlzLmdldENvbG9yKCl9YF0gPSB0cnVlO1xuICAgIHJldHVybiByZXQ7XG4gIH1cblxuICBnZXRJbmRpY2F0b3IoKSB7XG4gICAgaWYgKHRoaXMuc3RhdHVzID09PSAnZXJyb3InKSB7XG4gICAgICByZXR1cm4gLTE7XG4gICAgfVxuXG4gICAgaWYgKHRoaXMucHJvZ3Jlc3MgPT09IDEwMCkge1xuICAgICAgcmV0dXJuIDE7XG4gICAgfVxuXG4gICAgcmV0dXJuIDA7XG4gIH1cblxuICBwcml2YXRlIGdldENvbG9yKCkge1xuICAgIGlmICh0aGlzLnN0YXR1cyA9PT0gJ2Vycm9yJykge1xuICAgICAgcmV0dXJuICdlcnJvcic7XG4gICAgfVxuXG4gICAgaWYgKHRoaXMucHJvZ3Jlc3MgPT09IDEwMCkge1xuICAgICAgcmV0dXJuICdzdWNjZXNzJztcbiAgICB9XG5cbiAgICByZXR1cm4gdGhpcy5jb2xvcjtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cIngtcHJvZ3Jlc3NcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInR5cGUgPT09ICdsaW5lJ1wiPlxuICAgIDxkaXYgY2xhc3M9XCJ4LXByb2dyZXNzLWluZGljYXRvclwiPlxuICAgICAgPGRpdiBbbmdDbGFzc109XCJzdHlsZVwiIFtzdHlsZS53aWR0aC4lXT1cInByb2dyZXNzXCI+PC9kaXY+XG4gICAgPC9kaXY+XG5cbiAgICA8bmctY29udGFpbmVyIFtuZ1N3aXRjaF09XCJnZXRJbmRpY2F0b3IoKVwiPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiMVwiPlxuICAgICAgICA8eHVpLWRlY2FncmFtIGNvbG9yPVwic3VjY2Vzc1wiIHR5cGU9XCJjaXJjbGVcIj5jaGVjay1ib2xkPC94dWktZGVjYWdyYW0+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIjBcIj4ge3sgcHJvZ3Jlc3MgfX0lIDwvbmctY29udGFpbmVyPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiLTFcIj5cbiAgICAgICAgPHh1aS1kZWNhZ3JhbSBjb2xvcj1cImVycm9yXCIgdHlwZT1cImNpcmNsZVwiPmNsb3NlLXRoaWNrPC94dWktZGVjYWdyYW0+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgPC9uZy1jb250YWluZXI+XG5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInR5cGUgPT09ICdjaXJjbGUnXCI+XG4gICAgPGRpdiBjbGFzcz1cIngtcHJvZ3Jlc3MtaW5kaWNhdG9yXCI+XG4gICAgICA8ZGl2IFtuZ0NsYXNzXT1cInN0eWxlXCIgW3N0eWxlLndpZHRoLiVdPVwicHJvZ3Jlc3NcIj48L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9uZy1jb250YWluZXI+XG48L2Rpdj5cbiJdfQ==