truly-ui
Version:
Web Components for Desktop Applications.
76 lines (74 loc) • 13.6 kB
JavaScript
/*
MIT License
Copyright (c) 2019 Temainfo Software
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
import { Component, Input, } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class TlProgressBar {
constructor() {
this.min = 0;
this.max = 100;
this.position = 0;
this.unit = '';
this.height = '15px';
this.shape = 'rounded';
this.progressInfo = 'percentage';
this.mode = 'determinate';
this.color = 'primary';
}
ngOnInit() { }
getProgressDescription() {
return Math.round(((this.position - this.min) / (this.max - this.min)) * 100);
}
ngOnChanges(change) {
if (change.progress) {
if (this.position < this.min) {
this.position = this.min;
}
if ((!change.progress.firstChange) && isNaN(change.progress.currentValue)) {
this.position = 0;
}
}
}
}
/** @nocollapse */ TlProgressBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TlProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ TlProgressBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TlProgressBar, selector: "tl-progressbar", inputs: { min: "min", max: "max", position: "position", unit: "unit", height: "height", shape: "shape", progressInfo: "progressInfo", mode: "mode", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"wrapper-content-progress\">\n <div class=\"ui-progressbar-wrapper\" [class.border-rounded]=\"shape === 'rounded'\" [ngClass]=\"color\">\n <div *ngIf=\"mode === 'determinate'\" class=\"ui-progress-description\" [style.lineHeight]=\"height\">\n <span *ngIf=\"progressInfo === 'percentage' || progressInfo === 'detailed'\">{{getProgressDescription()}} %</span>\n <span class=\"ui-progress-detail\" *ngIf=\"progressInfo === 'detailed'\" [style.lineHeight]=\"height\">({{position}} {{unit}} / {{max}} {{unit}})</span>\n </div>\n <div class=\"ui-progressbar\" [style.height]=\"height\">\n <div *ngIf=\"mode === 'determinate'\" [style.transformOrigin]=\"'left'\"\n [style.transform]=\"'scaleX(' + (position - min) / (max - min) + ')'\"\n class=\"determinate-progress\">\n </div>\n <div *ngIf=\"mode === 'indeterminate'\" [style.transform]=\"'translate3d(' + (position - min / 100) + ', 0, 0)'\"\n class=\"indeterminate-progress\">\n </div>\n </div>\n </div>\n</div>\n", styles: [".ui-progressbar-wrapper{overflow:hidden;width:100%;position:relative;box-sizing:border-box}.border-rounded{border-radius:10px}.ui-progressbar{width:100%}.determinate-progress{width:100%;height:inherit;transition:all ease-in-out .2s}.indeterminate-progress{width:50%;height:inherit;animation-duration:2s;animation-name:indeterminate;animation-iteration-count:infinite;animation-direction:normal}.ui-progress-description{-webkit-user-select:none;user-select:none;width:100%;position:absolute;opacity:.5;font-family:Segoe UI,Lato,\"sans-serif\",Arial;font-size:1em;font-weight:700;z-index:1000;text-align:center}.ui-progress-detail{font-size:.7em;font-style:italic;font-weight:400}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(210%)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TlProgressBar, decorators: [{
type: Component,
args: [{ selector: 'tl-progressbar', template: "<div class=\"wrapper-content-progress\">\n <div class=\"ui-progressbar-wrapper\" [class.border-rounded]=\"shape === 'rounded'\" [ngClass]=\"color\">\n <div *ngIf=\"mode === 'determinate'\" class=\"ui-progress-description\" [style.lineHeight]=\"height\">\n <span *ngIf=\"progressInfo === 'percentage' || progressInfo === 'detailed'\">{{getProgressDescription()}} %</span>\n <span class=\"ui-progress-detail\" *ngIf=\"progressInfo === 'detailed'\" [style.lineHeight]=\"height\">({{position}} {{unit}} / {{max}} {{unit}})</span>\n </div>\n <div class=\"ui-progressbar\" [style.height]=\"height\">\n <div *ngIf=\"mode === 'determinate'\" [style.transformOrigin]=\"'left'\"\n [style.transform]=\"'scaleX(' + (position - min) / (max - min) + ')'\"\n class=\"determinate-progress\">\n </div>\n <div *ngIf=\"mode === 'indeterminate'\" [style.transform]=\"'translate3d(' + (position - min / 100) + ', 0, 0)'\"\n class=\"indeterminate-progress\">\n </div>\n </div>\n </div>\n</div>\n", styles: [".ui-progressbar-wrapper{overflow:hidden;width:100%;position:relative;box-sizing:border-box}.border-rounded{border-radius:10px}.ui-progressbar{width:100%}.determinate-progress{width:100%;height:inherit;transition:all ease-in-out .2s}.indeterminate-progress{width:50%;height:inherit;animation-duration:2s;animation-name:indeterminate;animation-iteration-count:infinite;animation-direction:normal}.ui-progress-description{-webkit-user-select:none;user-select:none;width:100%;position:absolute;opacity:.5;font-family:Segoe UI,Lato,\"sans-serif\",Arial;font-size:1em;font-weight:700;z-index:1000;text-align:center}.ui-progress-detail{font-size:.7em;font-style:italic;font-weight:400}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(210%)}}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { min: [{
type: Input
}], max: [{
type: Input
}], position: [{
type: Input
}], unit: [{
type: Input
}], height: [{
type: Input
}], shape: [{
type: Input
}], progressInfo: [{
type: Input
}], mode: [{
type: Input
}], color: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3NiYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy90cnVseS11aS9zcmMvY29tcG9uZW50cy9wcm9ncmVzc2Jhci9wcm9ncmVzc2Jhci50cyIsIi4uLy4uLy4uLy4uL3Byb2plY3RzL3RydWx5LXVpL3NyYy9jb21wb25lbnRzL3Byb2dyZXNzYmFyL3Byb2dyZXNzYmFyLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBb0JHO0FBQ0gsT0FBTyxFQUNMLFNBQVMsRUFBVSxLQUFLLEdBQ3pCLE1BQU0sZUFBZSxDQUFDOzs7QUFPdkIsTUFBTSxPQUFPLGFBQWE7SUFvQnhCO1FBbEJTLFFBQUcsR0FBRyxDQUFDLENBQUM7UUFFUixRQUFHLEdBQUcsR0FBRyxDQUFDO1FBRVYsYUFBUSxHQUFHLENBQUMsQ0FBQztRQUViLFNBQUksR0FBRyxFQUFFLENBQUM7UUFFVixXQUFNLEdBQUcsTUFBTSxDQUFDO1FBRWhCLFVBQUssR0FBMEIsU0FBUyxDQUFDO1FBRXpDLGlCQUFZLEdBQXVDLFlBQVksQ0FBQztRQUVoRSxTQUFJLEdBQW9DLGFBQWEsQ0FBQztRQUV0RCxVQUFLLEdBQTJFLFNBQVMsQ0FBQztJQUVwRixDQUFDO0lBRWhCLFFBQVEsS0FBSSxDQUFDO0lBRWIsc0JBQXNCO1FBQ3BCLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBRSxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsR0FBRyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsQ0FBRSxDQUFDO0lBQ2xGLENBQUM7SUFFRCxXQUFXLENBQUUsTUFBcUI7UUFDaEMsSUFBSyxNQUFNLENBQUMsUUFBUSxFQUFHO1lBQ3JCLElBQUksSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsR0FBRyxFQUFFO2dCQUM1QixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUM7YUFDMUI7WUFDRCxJQUFLLENBQUMsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLEtBQUssQ0FBRSxNQUFNLENBQUMsUUFBUSxDQUFDLFlBQVksQ0FBRSxFQUFHO2dCQUM3RSxJQUFJLENBQUMsUUFBUSxHQUFHLENBQUMsQ0FBQzthQUNuQjtTQUNGO0lBQ0gsQ0FBQzs7OEhBckNVLGFBQWE7a0hBQWIsYUFBYSxpUEM5QjFCLHloQ0FpQkE7NEZEYWEsYUFBYTtrQkFMekIsU0FBUzsrQkFDRSxnQkFBZ0I7MEVBTWpCLEdBQUc7c0JBQVgsS0FBSztnQkFFRyxHQUFHO3NCQUFYLEtBQUs7Z0JBRUcsUUFBUTtzQkFBaEIsS0FBSztnQkFFRyxJQUFJO3NCQUFaLEtBQUs7Z0JBRUcsTUFBTTtzQkFBZCxLQUFLO2dCQUVHLEtBQUs7c0JBQWIsS0FBSztnQkFFRyxZQUFZO3NCQUFwQixLQUFLO2dCQUVHLElBQUk7c0JBQVosS0FBSztnQkFFRyxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuIE1JVCBMaWNlbnNlXG5cbiBDb3B5cmlnaHQgKGMpIDIwMTkgVGVtYWluZm8gU29mdHdhcmVcblxuIFBlcm1pc3Npb24gaXMgaGVyZWJ5IGdyYW50ZWQsIGZyZWUgb2YgY2hhcmdlLCB0byBhbnkgcGVyc29uIG9idGFpbmluZyBhIGNvcHlcbiBvZiB0aGlzIHNvZnR3YXJlIGFuZCBhc3NvY2lhdGVkIGRvY3VtZW50YXRpb24gZmlsZXMgKHRoZSBcIlNvZnR3YXJlXCIpLCB0byBkZWFsXG4gaW4gdGhlIFNvZnR3YXJlIHdpdGhvdXQgcmVzdHJpY3Rpb24sIGluY2x1ZGluZyB3aXRob3V0IGxpbWl0YXRpb24gdGhlIHJpZ2h0c1xuIHRvIHVzZSwgY29weSwgbW9kaWZ5LCBtZXJnZSwgcHVibGlzaCwgZGlzdHJpYnV0ZSwgc3VibGljZW5zZSwgYW5kL29yIHNlbGxcbiBjb3BpZXMgb2YgdGhlIFNvZnR3YXJlLCBhbmQgdG8gcGVybWl0IHBlcnNvbnMgdG8gd2hvbSB0aGUgU29mdHdhcmUgaXNcbiBmdXJuaXNoZWQgdG8gZG8gc28sIHN1YmplY3QgdG8gdGhlIGZvbGxvd2luZyBjb25kaXRpb25zOlxuIFRoZSBhYm92ZSBjb3B5cmlnaHQgbm90aWNlIGFuZCB0aGlzIHBlcm1pc3Npb24gbm90aWNlIHNoYWxsIGJlIGluY2x1ZGVkIGluIGFsbFxuIGNvcGllcyBvciBzdWJzdGFudGlhbCBwb3J0aW9ucyBvZiB0aGUgU29mdHdhcmUuXG4gVEhFIFNPRlRXQVJFIElTIFBST1ZJREVEIFwiQVMgSVNcIiwgV0lUSE9VVCBXQVJSQU5UWSBPRiBBTlkgS0lORCwgRVhQUkVTUyBPUlxuIElNUExJRUQsIElOQ0xVRElORyBCVVQgTk9UIExJTUlURUQgVE8gVEhFIFdBUlJBTlRJRVMgT0YgTUVSQ0hBTlRBQklMSVRZLFxuIEZJVE5FU1MgRk9SIEEgUEFSVElDVUxBUiBQVVJQT1NFIEFORCBOT05JTkZSSU5HRU1FTlQuIElOIE5PIEVWRU5UIFNIQUxMIFRIRVxuIEFVVEhPUlMgT1IgQ09QWVJJR0hUIEhPTERFUlMgQkUgTElBQkxFIEZPUiBBTlkgQ0xBSU0sIERBTUFHRVMgT1IgT1RIRVJcbiBMSUFCSUxJVFksIFdIRVRIRVIgSU4gQU4gQUNUSU9OIE9GIENPTlRSQUNULCBUT1JUIE9SIE9USEVSV0lTRSwgQVJJU0lORyBGUk9NLFxuIE9VVCBPRiBPUiBJTiBDT05ORUNUSU9OIFdJVEggVEhFIFNPRlRXQVJFIE9SIFRIRSBVU0UgT1IgT1RIRVIgREVBTElOR1MgSU4gVEhFXG4gU09GVFdBUkUuXG4gKi9cbmltcG9ydCB7XG4gIENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgU2ltcGxlQ2hhbmdlcywgT25DaGFuZ2VzLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCgge1xuICBzZWxlY3RvcjogJ3RsLXByb2dyZXNzYmFyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3Byb2dyZXNzYmFyLmh0bWwnLFxuICBzdHlsZVVybHM6IFsgJy4vcHJvZ3Jlc3NiYXIuc2NzcycgXSxcbn0gKVxuZXhwb3J0IGNsYXNzIFRsUHJvZ3Jlc3NCYXIgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XG5cbiAgQElucHV0KCkgbWluID0gMDtcblxuICBASW5wdXQoKSBtYXggPSAxMDA7XG5cbiAgQElucHV0KCkgcG9zaXRpb24gPSAwO1xuXG4gIEBJbnB1dCgpIHVuaXQgPSAnJztcblxuICBASW5wdXQoKSBoZWlnaHQgPSAnMTVweCc7XG5cbiAgQElucHV0KCkgc2hhcGU6ICdkZWZhdWx0JyB8ICdyb3VuZGVkJyA9ICdyb3VuZGVkJztcblxuICBASW5wdXQoKSBwcm9ncmVzc0luZm86ICdub25lJyB8ICdwZXJjZW50YWdlJyB8ICdkZXRhaWxlZCcgPSAncGVyY2VudGFnZSc7XG5cbiAgQElucHV0KCkgbW9kZTogJ2RldGVybWluYXRlJyB8ICdpbmRldGVybWluYXRlJyA9ICdkZXRlcm1pbmF0ZSc7XG5cbiAgQElucHV0KCkgY29sb3I6ICdiYXNpYycgfCAncHJpbWFyeScgfCAnc3VjY2VzcycgfCAnZGFuZ2VyJyB8ICd3YXJuaW5nJyB8ICdpbmZvcm1hdGlvbicgPSAncHJpbWFyeSc7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nT25Jbml0KCkge31cblxuICBnZXRQcm9ncmVzc0Rlc2NyaXB0aW9uKCkge1xuICAgIHJldHVybiBNYXRoLnJvdW5kKCAoKHRoaXMucG9zaXRpb24gLSB0aGlzLm1pbikgLyAodGhpcy5tYXggLSB0aGlzLm1pbikpICogMTAwICk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyggY2hhbmdlOiBTaW1wbGVDaGFuZ2VzICkge1xuICAgIGlmICggY2hhbmdlLnByb2dyZXNzICkge1xuICAgICAgaWYgKHRoaXMucG9zaXRpb24gPCB0aGlzLm1pbikge1xuICAgICAgICB0aGlzLnBvc2l0aW9uID0gdGhpcy5taW47XG4gICAgICB9XG4gICAgICBpZiAoICghY2hhbmdlLnByb2dyZXNzLmZpcnN0Q2hhbmdlKSAmJiBpc05hTiggY2hhbmdlLnByb2dyZXNzLmN1cnJlbnRWYWx1ZSApICkge1xuICAgICAgICB0aGlzLnBvc2l0aW9uID0gMDtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxufVxuXG4iLCI8ZGl2IGNsYXNzPVwid3JhcHBlci1jb250ZW50LXByb2dyZXNzXCI+XG4gIDxkaXYgY2xhc3M9XCJ1aS1wcm9ncmVzc2Jhci13cmFwcGVyXCIgW2NsYXNzLmJvcmRlci1yb3VuZGVkXT1cInNoYXBlID09PSAncm91bmRlZCdcIiBbbmdDbGFzc109XCJjb2xvclwiPlxuICAgIDxkaXYgKm5nSWY9XCJtb2RlID09PSAnZGV0ZXJtaW5hdGUnXCIgY2xhc3M9XCJ1aS1wcm9ncmVzcy1kZXNjcmlwdGlvblwiIFtzdHlsZS5saW5lSGVpZ2h0XT1cImhlaWdodFwiPlxuICAgICAgPHNwYW4gKm5nSWY9XCJwcm9ncmVzc0luZm8gPT09ICdwZXJjZW50YWdlJyB8fCBwcm9ncmVzc0luZm8gPT09ICdkZXRhaWxlZCdcIj57e2dldFByb2dyZXNzRGVzY3JpcHRpb24oKX19ICU8L3NwYW4+XG4gICAgICA8c3BhbiBjbGFzcz1cInVpLXByb2dyZXNzLWRldGFpbFwiICpuZ0lmPVwicHJvZ3Jlc3NJbmZvID09PSAnZGV0YWlsZWQnXCIgW3N0eWxlLmxpbmVIZWlnaHRdPVwiaGVpZ2h0XCI+KHt7cG9zaXRpb259fSB7e3VuaXR9fSAvIHt7bWF4fX0ge3t1bml0fX0pPC9zcGFuPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJ1aS1wcm9ncmVzc2JhclwiIFtzdHlsZS5oZWlnaHRdPVwiaGVpZ2h0XCI+XG4gICAgICA8ZGl2ICpuZ0lmPVwibW9kZSA9PT0gJ2RldGVybWluYXRlJ1wiIFtzdHlsZS50cmFuc2Zvcm1PcmlnaW5dPVwiJ2xlZnQnXCJcbiAgICAgICAgICAgW3N0eWxlLnRyYW5zZm9ybV09XCInc2NhbGVYKCcgKyAocG9zaXRpb24gLSBtaW4pIC8gKG1heCAtIG1pbikgKyAnKSdcIlxuICAgICAgICAgICBjbGFzcz1cImRldGVybWluYXRlLXByb2dyZXNzXCI+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgKm5nSWY9XCJtb2RlID09PSAnaW5kZXRlcm1pbmF0ZSdcIiBbc3R5bGUudHJhbnNmb3JtXT1cIid0cmFuc2xhdGUzZCgnICsgKHBvc2l0aW9uIC0gbWluIC8gMTAwKSArICcsIDAsIDApJ1wiXG4gICAgICAgICAgIGNsYXNzPVwiaW5kZXRlcm1pbmF0ZS1wcm9ncmVzc1wiPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=