@ifsworld/granite-components 12.3.3 → 12.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -10,6 +10,7 @@ import * as i7 from "./progress-bar-legend-trigger-for.directive";
|
|
|
10
10
|
export class GraniteProgressBarComponent {
|
|
11
11
|
constructor() {
|
|
12
12
|
this.progressBarData = [];
|
|
13
|
+
this.legendData = [];
|
|
13
14
|
this.showLabel = false;
|
|
14
15
|
this.showLegend = false;
|
|
15
16
|
this.DEFAULT_TOTAL = 100;
|
|
@@ -51,30 +52,41 @@ export class GraniteProgressBarComponent {
|
|
|
51
52
|
return this.progressBarData.reduce((acc, curr) => acc + curr.value, 0);
|
|
52
53
|
}
|
|
53
54
|
setLegendItems() {
|
|
54
|
-
this.legendItems =
|
|
55
|
+
this.legendItems =
|
|
56
|
+
this.legendData.length > 0
|
|
57
|
+
? this.getLegendItems(this.legendData)
|
|
58
|
+
: this.getLegendItems(this.progressBarData);
|
|
59
|
+
}
|
|
60
|
+
getLegendItems(data) {
|
|
61
|
+
return data.map(({ label, backgroundColor, }) => {
|
|
55
62
|
const legendItemColor = this.getStackColor(backgroundColor);
|
|
56
63
|
return { label, backgroundColor: legendItemColor };
|
|
57
64
|
});
|
|
58
65
|
}
|
|
59
66
|
ngOnChanges(changes) {
|
|
60
|
-
if (changes.progressBarData
|
|
61
|
-
JSON.stringify(changes.progressBarData.currentValue) !==
|
|
62
|
-
JSON.stringify(changes.progressBarData.previousValue)) {
|
|
67
|
+
if (changes.progressBarData) {
|
|
63
68
|
this.checkStackTotal();
|
|
64
69
|
this.setLegendItems();
|
|
65
70
|
}
|
|
71
|
+
if (changes.legendData) {
|
|
72
|
+
this.setLegendItems();
|
|
73
|
+
}
|
|
66
74
|
}
|
|
67
75
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
68
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteProgressBarComponent, selector: "granite-progress-bar", inputs: { progressBarData: "progressBarData", showLabel: "showLabel", showLegend: "showLegend" }, exportAs: ["graniteProgressBar"], usesOnChanges: true, ngImport: i0, template: "<div\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"progress\"\n [style.background-color]=\"getBackgroundColor()\"\n>\n <div\n *ngFor=\"let bar of progressBarData; let i = index\"\n [style.background-color]=\"getStackColor(bar.backgroundColor)\"\n [style.width]=\"getStringOfWidth(getWidth(bar.value))\"\n [style.color]=\"getFontColor(bar.foregroundColor)\"\n [graniteTooltipTriggerFor]=\"tooltip\"\n class=\"progress-bar\"\n >\n <label *ngIf=\"showLabel\" graniteHideOnOverflow>{{ bar.valueLabel }}</label>\n <granite-tooltip #tooltip> {{ bar.valueLabel }} </granite-tooltip>\n </div>\n</div>\n\n<ng-container *ngIf=\"showLegend\">\n <button\n graniteFlatButton\n [graniteProgressBarLegendTriggerFor]=\"legend\"\n class=\"legend-btn\"\n >\n <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n </button>\n</ng-container>\n\n<granite-progress-bar-legend\n #legend\n [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;
|
|
76
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteProgressBarComponent, selector: "granite-progress-bar", inputs: { progressBarData: "progressBarData", legendData: "legendData", showLabel: "showLabel", showLegend: "showLegend" }, host: { properties: { "class.label-present": "showLabel" } }, exportAs: ["graniteProgressBar"], usesOnChanges: true, ngImport: i0, template: "<div\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"progress\"\n [style.background-color]=\"getBackgroundColor()\"\n>\n <div\n *ngFor=\"let bar of progressBarData; let i = index\"\n [style.background-color]=\"getStackColor(bar.backgroundColor)\"\n [style.width]=\"getStringOfWidth(getWidth(bar.value))\"\n [style.color]=\"getFontColor(bar.foregroundColor)\"\n [graniteTooltipTriggerFor]=\"tooltip\"\n class=\"progress-bar\"\n >\n <label *ngIf=\"showLabel\" graniteHideOnOverflow>{{ bar.valueLabel }}</label>\n <granite-tooltip #tooltip> {{ bar.valueLabel }} </granite-tooltip>\n </div>\n</div>\n\n<ng-container *ngIf=\"showLegend\">\n <button\n graniteFlatButton\n [graniteProgressBarLegendTriggerFor]=\"legend\"\n class=\"legend-btn\"\n >\n <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n </button>\n</ng-container>\n\n<granite-progress-bar-legend\n #legend\n [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;box-sizing:border-box;height:.5rem;border-radius:var(--granite-radius-m);font-size:var(--granite-font-size-body-small);line-height:var(--granite-font-size-body-small)}:host(.label-present){height:auto!important}.progress{display:flex;width:inherit;height:inherit;overflow:hidden;border-radius:inherit;background-color:var(--granite-color-background-selected)}.progress-bar{display:flex;align-items:center;box-sizing:border-box;width:inherit;height:inherit;line-height:inherit;font-size:inherit;vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;color:var(--granite-color-text);overflow:hidden;text-align:center;justify-content:center}.progress-bar label{width:100%;padding:var(--granite-spacing-4) 0}.legend-btn{width:16px;height:16px;margin-inline-start:var(--granite-spacing-16)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.GraniteHideOnOverflowDirective, selector: "[graniteHideOnOverflow]", exportAs: ["graniteHideOnOverflow"] }, { kind: "component", type: i3.GraniteTooltipComponent, selector: "granite-tooltip" }, { kind: "directive", type: i3.GraniteTooltipTriggerForDirective, selector: "[graniteTooltipTriggerFor]", inputs: ["graniteTooltipTriggerFor", "hideDelay", "showDelay", "showOnKeyboardFocus", "showOnClick"] }, { kind: "component", type: i4.GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "component", type: i5.GraniteButtonComponent, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: i6.GraniteProgressBarLegendComponent, selector: "granite-progress-bar-legend", inputs: ["legendItems"] }, { kind: "directive", type: i7.GraniteProgressBarLegendTriggerForDirective, selector: "[graniteProgressBarLegendTriggerFor]", inputs: ["graniteProgressBarLegendTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
69
77
|
}
|
|
70
78
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarComponent, decorators: [{
|
|
71
79
|
type: Component,
|
|
72
|
-
args: [{ selector: 'granite-progress-bar', exportAs: 'graniteProgressBar',
|
|
80
|
+
args: [{ selector: 'granite-progress-bar', exportAs: 'graniteProgressBar', host: {
|
|
81
|
+
'[class.label-present]': 'showLabel',
|
|
82
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"progress\"\n [style.background-color]=\"getBackgroundColor()\"\n>\n <div\n *ngFor=\"let bar of progressBarData; let i = index\"\n [style.background-color]=\"getStackColor(bar.backgroundColor)\"\n [style.width]=\"getStringOfWidth(getWidth(bar.value))\"\n [style.color]=\"getFontColor(bar.foregroundColor)\"\n [graniteTooltipTriggerFor]=\"tooltip\"\n class=\"progress-bar\"\n >\n <label *ngIf=\"showLabel\" graniteHideOnOverflow>{{ bar.valueLabel }}</label>\n <granite-tooltip #tooltip> {{ bar.valueLabel }} </granite-tooltip>\n </div>\n</div>\n\n<ng-container *ngIf=\"showLegend\">\n <button\n graniteFlatButton\n [graniteProgressBarLegendTriggerFor]=\"legend\"\n class=\"legend-btn\"\n >\n <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n </button>\n</ng-container>\n\n<granite-progress-bar-legend\n #legend\n [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;box-sizing:border-box;height:.5rem;border-radius:var(--granite-radius-m);font-size:var(--granite-font-size-body-small);line-height:var(--granite-font-size-body-small)}:host(.label-present){height:auto!important}.progress{display:flex;width:inherit;height:inherit;overflow:hidden;border-radius:inherit;background-color:var(--granite-color-background-selected)}.progress-bar{display:flex;align-items:center;box-sizing:border-box;width:inherit;height:inherit;line-height:inherit;font-size:inherit;vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;color:var(--granite-color-text);overflow:hidden;text-align:center;justify-content:center}.progress-bar label{width:100%;padding:var(--granite-spacing-4) 0}.legend-btn{width:16px;height:16px;margin-inline-start:var(--granite-spacing-16)}\n"] }]
|
|
73
83
|
}], propDecorators: { progressBarData: [{
|
|
74
84
|
type: Input
|
|
85
|
+
}], legendData: [{
|
|
86
|
+
type: Input
|
|
75
87
|
}], showLabel: [{
|
|
76
88
|
type: Input
|
|
77
89
|
}], showLegend: [{
|
|
78
90
|
type: Input
|
|
79
91
|
}] } });
|
|
80
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
92
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZ3Jhbml0ZS1jb21wb25lbnRzL3NyYy9saWIvcHJvZ3Jlc3MtYmFyL3Byb2dyZXNzLWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2dyYW5pdGUtY29tcG9uZW50cy9zcmMvbGliL3Byb2dyZXNzLWJhci9wcm9ncmVzcy1iYXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsS0FBSyxHQUdOLE1BQU0sZUFBZSxDQUFDOzs7Ozs7Ozs7QUFnQnZCLE1BQU0sT0FBTywyQkFBMkI7SUFWeEM7UUFZRSxvQkFBZSxHQUErQixFQUFFLENBQUM7UUFHakQsZUFBVSxHQUFxQyxFQUFFLENBQUM7UUFHbEQsY0FBUyxHQUFZLEtBQUssQ0FBQztRQUczQixlQUFVLEdBQVksS0FBSyxDQUFDO1FBRTVCLGtCQUFhLEdBQUcsR0FBRyxDQUFDO1FBQ3BCLHVCQUFrQixHQUFHLHFDQUFxQyxDQUFDO1FBQzNELHdCQUFtQixHQUFHLCtCQUErQixDQUFDO1FBQ3RELGtCQUFhLEdBQUcsc0JBQXNCLENBQUM7UUFFdkMsVUFBSyxHQUFXLElBQUksQ0FBQyxhQUFhLENBQUM7UUFDbkMsZ0JBQVcsR0FBcUMsRUFBRSxDQUFDO0tBMkVwRDtJQXpFQyxrQkFBa0I7UUFDaEIsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO0lBQ25ELENBQUM7SUFFRCxZQUFZLENBQUMsS0FBYTtRQUN4QixPQUFPLEtBQUs7WUFDVixDQUFDLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUM7WUFDekIsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQzNDLENBQUM7SUFFRCxhQUFhLENBQUMsS0FBYTtRQUN6QixPQUFPLEtBQUs7WUFDVixDQUFDLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUM7WUFDekIsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLENBQUM7SUFDakQsQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFhO1FBQ3ZCLE9BQU8sS0FBSyxFQUFFLFVBQVUsQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLENBQUMsT0FBTyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO0lBQ2xFLENBQUM7SUFFRCxRQUFRLENBQUMsS0FBYTtRQUNwQixPQUFPLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxHQUFHLENBQUM7SUFDcEMsQ0FBQztJQUVELGdCQUFnQixDQUFDLEtBQWE7UUFDNUIsT0FBTyxNQUFNLENBQUMsS0FBSyxDQUFDLEdBQUcsR0FBRyxDQUFDO0lBQzdCLENBQUM7SUFFRCxlQUFlO1FBQ2IsTUFBTSxvQkFBb0IsR0FBRyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDbEQsSUFBSSxvQkFBb0IsR0FBRyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDdEMsSUFBSSxDQUFDLEtBQUssR0FBRyxvQkFBb0IsQ0FBQztRQUNwQyxDQUFDO0lBQ0gsQ0FBQztJQUVELGFBQWE7UUFDWCxPQUFPLElBQUksQ0FBQyxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUMsR0FBRyxFQUFFLElBQUksRUFBRSxFQUFFLENBQUMsR0FBRyxHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDekUsQ0FBQztJQUVELGNBQWM7UUFDWixJQUFJLENBQUMsV0FBVztZQUNkLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxHQUFHLENBQUM7Z0JBQ3hCLENBQUMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUM7Z0JBQ3RDLENBQUMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsQ0FBQztJQUNsRCxDQUFDO0lBRUQsY0FBYyxDQUNaLElBQW1FO1FBRW5FLE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FDYixDQUFDLEVBQ0MsS0FBSyxFQUNMLGVBQWUsR0FJaEIsRUFBRSxFQUFFO1lBQ0gsTUFBTSxlQUFlLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxlQUFlLENBQUMsQ0FBQztZQUM1RCxPQUFPLEVBQUUsS0FBSyxFQUFFLGVBQWUsRUFBRSxlQUFlLEVBQUUsQ0FBQztRQUNyRCxDQUFDLENBQ0YsQ0FBQztJQUNKLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsZUFBZSxFQUFFLENBQUM7WUFDNUIsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1lBQ3ZCLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN4QixDQUFDO1FBRUQsSUFBSSxPQUFPLENBQUMsVUFBVSxFQUFFLENBQUM7WUFDdkIsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3hCLENBQUM7SUFDSCxDQUFDOzhHQTdGVSwyQkFBMkI7a0dBQTNCLDJCQUEyQiw2U0N0QnhDLDYvQkFrQ0E7OzJGRFphLDJCQUEyQjtrQkFWdkMsU0FBUzsrQkFDRSxzQkFBc0IsWUFDdEIsb0JBQW9CLFFBR3hCO3dCQUNKLHVCQUF1QixFQUFFLFdBQVc7cUJBQ3JDLG1CQUNnQix1QkFBdUIsQ0FBQyxNQUFNOzhCQUkvQyxlQUFlO3NCQURkLEtBQUs7Z0JBSU4sVUFBVTtzQkFEVCxLQUFLO2dCQUlOLFNBQVM7c0JBRFIsS0FBSztnQkFJTixVQUFVO3NCQURULEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBTaW1wbGVDaGFuZ2VzLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gIEdyYW5pdGVQcm9ncmVzc0ludGVyZmFjZSxcbiAgR3Jhbml0ZVByb2dyZXNzTGVnZW5kSW50ZXJmYWNlLFxufSBmcm9tICcuL3Byb2dyZXNzLWJhci5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2dyYW5pdGUtcHJvZ3Jlc3MtYmFyJyxcbiAgZXhwb3J0QXM6ICdncmFuaXRlUHJvZ3Jlc3NCYXInLFxuICB0ZW1wbGF0ZVVybDogJy4vcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGhvc3Q6IHtcbiAgICAnW2NsYXNzLmxhYmVsLXByZXNlbnRdJzogJ3Nob3dMYWJlbCcsXG4gIH0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBHcmFuaXRlUHJvZ3Jlc3NCYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBASW5wdXQoKVxuICBwcm9ncmVzc0JhckRhdGE6IEdyYW5pdGVQcm9ncmVzc0ludGVyZmFjZVtdID0gW107XG5cbiAgQElucHV0KClcbiAgbGVnZW5kRGF0YTogR3Jhbml0ZVByb2dyZXNzTGVnZW5kSW50ZXJmYWNlW10gPSBbXTtcblxuICBASW5wdXQoKVxuICBzaG93TGFiZWw6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBzaG93TGVnZW5kOiBib29sZWFuID0gZmFsc2U7XG5cbiAgREVGQVVMVF9UT1RBTCA9IDEwMDtcbiAgREVGQVVMVF9CQUNLR1JPVU5EID0gJy0tZ3Jhbml0ZS1jb2xvci1iYWNrZ3JvdW5kLXNlbGVjdGVkJztcbiAgREVGQVVMVF9TVEFDS19DT0xPUiA9ICctLWdyYW5pdGUtY29sb3ItY2F0ZWdvcmljYWwtMyc7XG4gIERFRkFVTFRfQ09MT1IgPSAnLS1ncmFuaXRlLWNvbG9yLXRleHQnO1xuXG4gIHRvdGFsOiBudW1iZXIgPSB0aGlzLkRFRkFVTFRfVE9UQUw7XG4gIGxlZ2VuZEl0ZW1zOiBHcmFuaXRlUHJvZ3Jlc3NMZWdlbmRJbnRlcmZhY2VbXSA9IFtdO1xuXG4gIGdldEJhY2tncm91bmRDb2xvcigpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmdldENvbG9yVmFyKHRoaXMuREVGQVVMVF9CQUNLR1JPVU5EKTtcbiAgfVxuXG4gIGdldEZvbnRDb2xvcihjb2xvcjogc3RyaW5nKTogc3RyaW5nIHtcbiAgICByZXR1cm4gY29sb3JcbiAgICAgID8gdGhpcy5nZXRDb2xvclZhcihjb2xvcilcbiAgICAgIDogdGhpcy5nZXRDb2xvclZhcih0aGlzLkRFRkFVTFRfQ09MT1IpO1xuICB9XG5cbiAgZ2V0U3RhY2tDb2xvcihjb2xvcjogc3RyaW5nKTogc3RyaW5nIHtcbiAgICByZXR1cm4gY29sb3JcbiAgICAgID8gdGhpcy5nZXRDb2xvclZhcihjb2xvcilcbiAgICAgIDogdGhpcy5nZXRDb2xvclZhcih0aGlzLkRFRkFVTFRfU1RBQ0tfQ09MT1IpO1xuICB9XG5cbiAgZ2V0Q29sb3JWYXIoY29sb3I6IHN0cmluZyk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGNvbG9yPy5zdGFydHNXaXRoKCctLWdyYW5pdGUnKSA/IGB2YXIoJHtjb2xvcn0pYCA6IGNvbG9yO1xuICB9XG5cbiAgZ2V0V2lkdGgodmFsdWU6IG51bWJlcik6IG51bWJlciB7XG4gICAgcmV0dXJuICh2YWx1ZSAvIHRoaXMudG90YWwpICogMTAwO1xuICB9XG5cbiAgZ2V0U3RyaW5nT2ZXaWR0aCh3aWR0aDogbnVtYmVyKTogc3RyaW5nIHtcbiAgICByZXR1cm4gU3RyaW5nKHdpZHRoKSArICclJztcbiAgfVxuXG4gIGNoZWNrU3RhY2tUb3RhbCgpOiB2b2lkIHtcbiAgICBjb25zdCB0b3RhbE9mU3RhY2tlZFZhbHVlcyA9IHRoaXMuZ2V0U3RhY2tUb3RhbCgpO1xuICAgIGlmICh0b3RhbE9mU3RhY2tlZFZhbHVlcyA+IHRoaXMudG90YWwpIHtcbiAgICAgIHRoaXMudG90YWwgPSB0b3RhbE9mU3RhY2tlZFZhbHVlcztcbiAgICB9XG4gIH1cblxuICBnZXRTdGFja1RvdGFsKCk6IG51bWJlciB7XG4gICAgcmV0dXJuIHRoaXMucHJvZ3Jlc3NCYXJEYXRhLnJlZHVjZSgoYWNjLCBjdXJyKSA9PiBhY2MgKyBjdXJyLnZhbHVlLCAwKTtcbiAgfVxuXG4gIHNldExlZ2VuZEl0ZW1zKCk6IHZvaWQge1xuICAgIHRoaXMubGVnZW5kSXRlbXMgPVxuICAgICAgdGhpcy5sZWdlbmREYXRhLmxlbmd0aCA+IDBcbiAgICAgICAgPyB0aGlzLmdldExlZ2VuZEl0ZW1zKHRoaXMubGVnZW5kRGF0YSlcbiAgICAgICAgOiB0aGlzLmdldExlZ2VuZEl0ZW1zKHRoaXMucHJvZ3Jlc3NCYXJEYXRhKTtcbiAgfVxuXG4gIGdldExlZ2VuZEl0ZW1zKFxuICAgIGRhdGE6IEdyYW5pdGVQcm9ncmVzc0ludGVyZmFjZVtdIHwgR3Jhbml0ZVByb2dyZXNzTGVnZW5kSW50ZXJmYWNlW11cbiAgKTogR3Jhbml0ZVByb2dyZXNzTGVnZW5kSW50ZXJmYWNlW10ge1xuICAgIHJldHVybiBkYXRhLm1hcChcbiAgICAgICh7XG4gICAgICAgIGxhYmVsLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3IsXG4gICAgICB9OiB7XG4gICAgICAgIGxhYmVsPzogc3RyaW5nO1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I/OiBzdHJpbmc7XG4gICAgICB9KSA9PiB7XG4gICAgICAgIGNvbnN0IGxlZ2VuZEl0ZW1Db2xvciA9IHRoaXMuZ2V0U3RhY2tDb2xvcihiYWNrZ3JvdW5kQ29sb3IpO1xuICAgICAgICByZXR1cm4geyBsYWJlbCwgYmFja2dyb3VuZENvbG9yOiBsZWdlbmRJdGVtQ29sb3IgfTtcbiAgICAgIH1cbiAgICApO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzLnByb2dyZXNzQmFyRGF0YSkge1xuICAgICAgdGhpcy5jaGVja1N0YWNrVG90YWwoKTtcbiAgICAgIHRoaXMuc2V0TGVnZW5kSXRlbXMoKTtcbiAgICB9XG5cbiAgICBpZiAoY2hhbmdlcy5sZWdlbmREYXRhKSB7XG4gICAgICB0aGlzLnNldExlZ2VuZEl0ZW1zKCk7XG4gICAgfVxuICB9XG59XG4iLCI8ZGl2XG4gIHJvbGU9XCJwcm9ncmVzc2JhclwiXG4gIGFyaWEtdmFsdWVtaW49XCIwXCJcbiAgYXJpYS12YWx1ZW1heD1cIjEwMFwiXG4gIGNsYXNzPVwicHJvZ3Jlc3NcIlxuICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJnZXRCYWNrZ3JvdW5kQ29sb3IoKVwiXG4+XG4gIDxkaXZcbiAgICAqbmdGb3I9XCJsZXQgYmFyIG9mIHByb2dyZXNzQmFyRGF0YTsgbGV0IGkgPSBpbmRleFwiXG4gICAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwiZ2V0U3RhY2tDb2xvcihiYXIuYmFja2dyb3VuZENvbG9yKVwiXG4gICAgW3N0eWxlLndpZHRoXT1cImdldFN0cmluZ09mV2lkdGgoZ2V0V2lkdGgoYmFyLnZhbHVlKSlcIlxuICAgIFtzdHlsZS5jb2xvcl09XCJnZXRGb250Q29sb3IoYmFyLmZvcmVncm91bmRDb2xvcilcIlxuICAgIFtncmFuaXRlVG9vbHRpcFRyaWdnZXJGb3JdPVwidG9vbHRpcFwiXG4gICAgY2xhc3M9XCJwcm9ncmVzcy1iYXJcIlxuICA+XG4gICAgPGxhYmVsICpuZ0lmPVwic2hvd0xhYmVsXCIgZ3Jhbml0ZUhpZGVPbk92ZXJmbG93Pnt7IGJhci52YWx1ZUxhYmVsIH19PC9sYWJlbD5cbiAgICA8Z3Jhbml0ZS10b29sdGlwICN0b29sdGlwPiB7eyBiYXIudmFsdWVMYWJlbCB9fSA8L2dyYW5pdGUtdG9vbHRpcD5cbiAgPC9kaXY+XG48L2Rpdj5cblxuPG5nLWNvbnRhaW5lciAqbmdJZj1cInNob3dMZWdlbmRcIj5cbiAgPGJ1dHRvblxuICAgIGdyYW5pdGVGbGF0QnV0dG9uXG4gICAgW2dyYW5pdGVQcm9ncmVzc0JhckxlZ2VuZFRyaWdnZXJGb3JdPVwibGVnZW5kXCJcbiAgICBjbGFzcz1cImxlZ2VuZC1idG5cIlxuICA+XG4gICAgPGdyYW5pdGUtaWNvbiBmb250SWNvbj1cImljb24tY2FyZXQtZG93blwiPjwvZ3Jhbml0ZS1pY29uPlxuICA8L2J1dHRvbj5cbjwvbmctY29udGFpbmVyPlxuXG48Z3Jhbml0ZS1wcm9ncmVzcy1iYXItbGVnZW5kXG4gICNsZWdlbmRcbiAgW2xlZ2VuZEl0ZW1zXT1cImxlZ2VuZEl0ZW1zXCJcbj48L2dyYW5pdGUtcHJvZ3Jlc3MtYmFyLWxlZ2VuZD5cbiJdfQ==
|
|
@@ -4680,6 +4680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4680
4680
|
class GraniteProgressBarComponent {
|
|
4681
4681
|
constructor() {
|
|
4682
4682
|
this.progressBarData = [];
|
|
4683
|
+
this.legendData = [];
|
|
4683
4684
|
this.showLabel = false;
|
|
4684
4685
|
this.showLegend = false;
|
|
4685
4686
|
this.DEFAULT_TOTAL = 100;
|
|
@@ -4721,27 +4722,38 @@ class GraniteProgressBarComponent {
|
|
|
4721
4722
|
return this.progressBarData.reduce((acc, curr) => acc + curr.value, 0);
|
|
4722
4723
|
}
|
|
4723
4724
|
setLegendItems() {
|
|
4724
|
-
this.legendItems =
|
|
4725
|
+
this.legendItems =
|
|
4726
|
+
this.legendData.length > 0
|
|
4727
|
+
? this.getLegendItems(this.legendData)
|
|
4728
|
+
: this.getLegendItems(this.progressBarData);
|
|
4729
|
+
}
|
|
4730
|
+
getLegendItems(data) {
|
|
4731
|
+
return data.map(({ label, backgroundColor, }) => {
|
|
4725
4732
|
const legendItemColor = this.getStackColor(backgroundColor);
|
|
4726
4733
|
return { label, backgroundColor: legendItemColor };
|
|
4727
4734
|
});
|
|
4728
4735
|
}
|
|
4729
4736
|
ngOnChanges(changes) {
|
|
4730
|
-
if (changes.progressBarData
|
|
4731
|
-
JSON.stringify(changes.progressBarData.currentValue) !==
|
|
4732
|
-
JSON.stringify(changes.progressBarData.previousValue)) {
|
|
4737
|
+
if (changes.progressBarData) {
|
|
4733
4738
|
this.checkStackTotal();
|
|
4734
4739
|
this.setLegendItems();
|
|
4735
4740
|
}
|
|
4741
|
+
if (changes.legendData) {
|
|
4742
|
+
this.setLegendItems();
|
|
4743
|
+
}
|
|
4736
4744
|
}
|
|
4737
4745
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4738
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteProgressBarComponent, selector: "granite-progress-bar", inputs: { progressBarData: "progressBarData", showLabel: "showLabel", showLegend: "showLegend" }, exportAs: ["graniteProgressBar"], usesOnChanges: true, ngImport: i0, template: "<div\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"progress\"\n [style.background-color]=\"getBackgroundColor()\"\n>\n <div\n *ngFor=\"let bar of progressBarData; let i = index\"\n [style.background-color]=\"getStackColor(bar.backgroundColor)\"\n [style.width]=\"getStringOfWidth(getWidth(bar.value))\"\n [style.color]=\"getFontColor(bar.foregroundColor)\"\n [graniteTooltipTriggerFor]=\"tooltip\"\n class=\"progress-bar\"\n >\n <label *ngIf=\"showLabel\" graniteHideOnOverflow>{{ bar.valueLabel }}</label>\n <granite-tooltip #tooltip> {{ bar.valueLabel }} </granite-tooltip>\n </div>\n</div>\n\n<ng-container *ngIf=\"showLegend\">\n <button\n graniteFlatButton\n [graniteProgressBarLegendTriggerFor]=\"legend\"\n class=\"legend-btn\"\n >\n <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n </button>\n</ng-container>\n\n<granite-progress-bar-legend\n #legend\n [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;
|
|
4746
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteProgressBarComponent, selector: "granite-progress-bar", inputs: { progressBarData: "progressBarData", legendData: "legendData", showLabel: "showLabel", showLegend: "showLegend" }, host: { properties: { "class.label-present": "showLabel" } }, exportAs: ["graniteProgressBar"], usesOnChanges: true, ngImport: i0, template: "<div\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"progress\"\n [style.background-color]=\"getBackgroundColor()\"\n>\n <div\n *ngFor=\"let bar of progressBarData; let i = index\"\n [style.background-color]=\"getStackColor(bar.backgroundColor)\"\n [style.width]=\"getStringOfWidth(getWidth(bar.value))\"\n [style.color]=\"getFontColor(bar.foregroundColor)\"\n [graniteTooltipTriggerFor]=\"tooltip\"\n class=\"progress-bar\"\n >\n <label *ngIf=\"showLabel\" graniteHideOnOverflow>{{ bar.valueLabel }}</label>\n <granite-tooltip #tooltip> {{ bar.valueLabel }} </granite-tooltip>\n </div>\n</div>\n\n<ng-container *ngIf=\"showLegend\">\n <button\n graniteFlatButton\n [graniteProgressBarLegendTriggerFor]=\"legend\"\n class=\"legend-btn\"\n >\n <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n </button>\n</ng-container>\n\n<granite-progress-bar-legend\n #legend\n [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;box-sizing:border-box;height:.5rem;border-radius:var(--granite-radius-m);font-size:var(--granite-font-size-body-small);line-height:var(--granite-font-size-body-small)}:host(.label-present){height:auto!important}.progress{display:flex;width:inherit;height:inherit;overflow:hidden;border-radius:inherit;background-color:var(--granite-color-background-selected)}.progress-bar{display:flex;align-items:center;box-sizing:border-box;width:inherit;height:inherit;line-height:inherit;font-size:inherit;vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;color:var(--granite-color-text);overflow:hidden;text-align:center;justify-content:center}.progress-bar label{width:100%;padding:var(--granite-spacing-4) 0}.legend-btn{width:16px;height:16px;margin-inline-start:var(--granite-spacing-16)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: GraniteHideOnOverflowDirective, selector: "[graniteHideOnOverflow]", exportAs: ["graniteHideOnOverflow"] }, { kind: "component", type: i3.GraniteTooltipComponent, selector: "granite-tooltip" }, { kind: "directive", type: i3.GraniteTooltipTriggerForDirective, selector: "[graniteTooltipTriggerFor]", inputs: ["graniteTooltipTriggerFor", "hideDelay", "showDelay", "showOnKeyboardFocus", "showOnClick"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "component", type: GraniteButtonComponent, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: GraniteProgressBarLegendComponent, selector: "granite-progress-bar-legend", inputs: ["legendItems"] }, { kind: "directive", type: GraniteProgressBarLegendTriggerForDirective, selector: "[graniteProgressBarLegendTriggerFor]", inputs: ["graniteProgressBarLegendTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4739
4747
|
}
|
|
4740
4748
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarComponent, decorators: [{
|
|
4741
4749
|
type: Component,
|
|
4742
|
-
args: [{ selector: 'granite-progress-bar', exportAs: 'graniteProgressBar',
|
|
4750
|
+
args: [{ selector: 'granite-progress-bar', exportAs: 'graniteProgressBar', host: {
|
|
4751
|
+
'[class.label-present]': 'showLabel',
|
|
4752
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"progress\"\n [style.background-color]=\"getBackgroundColor()\"\n>\n <div\n *ngFor=\"let bar of progressBarData; let i = index\"\n [style.background-color]=\"getStackColor(bar.backgroundColor)\"\n [style.width]=\"getStringOfWidth(getWidth(bar.value))\"\n [style.color]=\"getFontColor(bar.foregroundColor)\"\n [graniteTooltipTriggerFor]=\"tooltip\"\n class=\"progress-bar\"\n >\n <label *ngIf=\"showLabel\" graniteHideOnOverflow>{{ bar.valueLabel }}</label>\n <granite-tooltip #tooltip> {{ bar.valueLabel }} </granite-tooltip>\n </div>\n</div>\n\n<ng-container *ngIf=\"showLegend\">\n <button\n graniteFlatButton\n [graniteProgressBarLegendTriggerFor]=\"legend\"\n class=\"legend-btn\"\n >\n <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n </button>\n</ng-container>\n\n<granite-progress-bar-legend\n #legend\n [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;box-sizing:border-box;height:.5rem;border-radius:var(--granite-radius-m);font-size:var(--granite-font-size-body-small);line-height:var(--granite-font-size-body-small)}:host(.label-present){height:auto!important}.progress{display:flex;width:inherit;height:inherit;overflow:hidden;border-radius:inherit;background-color:var(--granite-color-background-selected)}.progress-bar{display:flex;align-items:center;box-sizing:border-box;width:inherit;height:inherit;line-height:inherit;font-size:inherit;vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;color:var(--granite-color-text);overflow:hidden;text-align:center;justify-content:center}.progress-bar label{width:100%;padding:var(--granite-spacing-4) 0}.legend-btn{width:16px;height:16px;margin-inline-start:var(--granite-spacing-16)}\n"] }]
|
|
4743
4753
|
}], propDecorators: { progressBarData: [{
|
|
4744
4754
|
type: Input
|
|
4755
|
+
}], legendData: [{
|
|
4756
|
+
type: Input
|
|
4745
4757
|
}], showLabel: [{
|
|
4746
4758
|
type: Input
|
|
4747
4759
|
}], showLegend: [{
|