@nova-ui/dashboards
Version:
Nova Dashboards is a framework designed to provide feature developers with a common solution for presenting data coming from various sources within a single view, as well as a set of predefined widget visualizations that are 100% configuration-driven and
62 lines • 13.8 kB
JavaScript
// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// 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 { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@nova-ui/bits";
const MEDIUM_WIDTH = 600;
const SMALL_WIDTH = 480;
export class ListGroupItemComponent {
static { this.lateLoadKey = "ListGroupItemComponent"; }
set widgetWidth(res) {
this.isMedium = res <= MEDIUM_WIDTH && res > SMALL_WIDTH;
this.isSmall = res <= SMALL_WIDTH;
}
constructor(changeDetector) {
this.changeDetector = changeDetector;
this.navigated = new EventEmitter();
}
onButtonClick() {
if (this.canNavigate) {
this.navigated.emit(this);
}
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListGroupItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ListGroupItemComponent, selector: "nui-list-group-item", inputs: { id: "id", label: "label", statuses: "statuses", canNavigate: "canNavigate", widgetWidth: "widgetWidth" }, outputs: { navigated: "navigated" }, host: { classAttribute: "w-100" }, ngImport: i0, template: "<div\n class=\"list-group-item\"\n [ngClass]=\"{ 'widget-medium': isMedium, 'widget-small': isSmall }\"\n (click)=\"onButtonClick()\"\n>\n <div class=\"list-group-item__label\" [title]=\"label\">{{ label }}</div>\n <div class=\"list-group-item__statuses\">\n <div class=\"statuses\">\n <div class=\"status-column\" *ngFor=\"let status of statuses\">\n <nui-icon [icon]=\"status.key\" class=\"mr-2\"></nui-icon>\n <span class=\"status-column__label\" [title]=\"status.value\">{{\n status.value\n }}</span>\n </div>\n </div>\n <nui-icon *ngIf=\"canNavigate\" icon=\"caret-right\"></nui-icon>\n </div>\n</div>\n", styles: [".list-group-item{width:100%;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.list-group-item__label{width:25%;max-width:100%;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis}.list-group-item__statuses{width:75%;display:flex;align-items:center}.list-group-item .status-column{display:flex;width:75px;min-width:75px;max-width:100%;justify-content:flex-start;align-items:center;padding-right:10px}.list-group-item .status-column__label{margin-left:5px;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis}.list-group-item .statuses{display:flex;flex-grow:1;justify-content:flex-end}.widget-medium{justify-content:flex-end}.widget-medium .list-group-item__label,.widget-medium .list-group-item__statuses{width:100%!important}.widget-small{justify-content:flex-end}.widget-small .list-group-item__label,.widget-small .list-group-item__statuses{width:100%!important}.widget-small .statuses{justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "nui-icon", inputs: ["iconColor", "brushType", "iconHoverColor", "iconSize", "cssClass", "fillContainer", "status", "childStatus", "icon", "counter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListGroupItemComponent, decorators: [{
type: Component,
args: [{ selector: "nui-list-group-item", changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: "w-100",
}, template: "<div\n class=\"list-group-item\"\n [ngClass]=\"{ 'widget-medium': isMedium, 'widget-small': isSmall }\"\n (click)=\"onButtonClick()\"\n>\n <div class=\"list-group-item__label\" [title]=\"label\">{{ label }}</div>\n <div class=\"list-group-item__statuses\">\n <div class=\"statuses\">\n <div class=\"status-column\" *ngFor=\"let status of statuses\">\n <nui-icon [icon]=\"status.key\" class=\"mr-2\"></nui-icon>\n <span class=\"status-column__label\" [title]=\"status.value\">{{\n status.value\n }}</span>\n </div>\n </div>\n <nui-icon *ngIf=\"canNavigate\" icon=\"caret-right\"></nui-icon>\n </div>\n</div>\n", styles: [".list-group-item{width:100%;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.list-group-item__label{width:25%;max-width:100%;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis}.list-group-item__statuses{width:75%;display:flex;align-items:center}.list-group-item .status-column{display:flex;width:75px;min-width:75px;max-width:100%;justify-content:flex-start;align-items:center;padding-right:10px}.list-group-item .status-column__label{margin-left:5px;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis}.list-group-item .statuses{display:flex;flex-grow:1;justify-content:flex-end}.widget-medium{justify-content:flex-end}.widget-medium .list-group-item__label,.widget-medium .list-group-item__statuses{width:100%!important}.widget-small{justify-content:flex-end}.widget-small .list-group-item__label,.widget-small .list-group-item__statuses{width:100%!important}.widget-small .statuses{justify-content:space-between}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { id: [{
type: Input
}], label: [{
type: Input
}], statuses: [{
type: Input
}], canNavigate: [{
type: Input
}], widgetWidth: [{
type: Input
}], navigated: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC1ncm91cC1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9saXN0LXdpZGdldC9saXN0LWVsZW1lbnRzL2xpc3QtZ3JvdXAtaXRlbS9saXN0LWdyb3VwLWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL2xpc3Qtd2lkZ2V0L2xpc3QtZWxlbWVudHMvbGlzdC1ncm91cC1pdGVtL2xpc3QtZ3JvdXAtaXRlbS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx5REFBeUQ7QUFDekQsRUFBRTtBQUNGLCtFQUErRTtBQUMvRSw0RUFBNEU7QUFDNUUsOEVBQThFO0FBQzlFLCtFQUErRTtBQUMvRSw4RUFBOEU7QUFDOUUsNERBQTREO0FBQzVELEVBQUU7QUFDRiw2RUFBNkU7QUFDN0UsdURBQXVEO0FBQ3ZELEVBQUU7QUFDRiw2RUFBNkU7QUFDN0UsNEVBQTRFO0FBQzVFLCtFQUErRTtBQUMvRSwwRUFBMEU7QUFDMUUsaUZBQWlGO0FBQ2pGLDZFQUE2RTtBQUM3RSxpQkFBaUI7QUFFakIsT0FBTyxFQUNILHVCQUF1QixFQUN2QixpQkFBaUIsRUFDakIsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxHQUNULE1BQU0sZUFBZSxDQUFDOzs7O0FBSXZCLE1BQU0sWUFBWSxHQUFHLEdBQUcsQ0FBQztBQUN6QixNQUFNLFdBQVcsR0FBRyxHQUFHLENBQUM7QUFXeEIsTUFBTSxPQUFPLHNCQUFzQjthQUN4QixnQkFBVyxHQUFHLHdCQUF3QixBQUEzQixDQUE0QjtJQU85QyxJQUFhLFdBQVcsQ0FBQyxHQUFXO1FBQ2hDLElBQUksQ0FBQyxRQUFRLEdBQUcsR0FBRyxJQUFJLFlBQVksSUFBSSxHQUFHLEdBQUcsV0FBVyxDQUFDO1FBQ3pELElBQUksQ0FBQyxPQUFPLEdBQUcsR0FBRyxJQUFJLFdBQVcsQ0FBQztJQUN0QyxDQUFDO0lBT0QsWUFBbUIsY0FBaUM7UUFBakMsbUJBQWMsR0FBZCxjQUFjLENBQW1CO1FBTG5DLGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBMEIsQ0FBQztJQUtqQixDQUFDO0lBRWpELGFBQWE7UUFDaEIsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ2xCLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1NBQzdCO0lBQ0wsQ0FBQztrSUF4QlEsc0JBQXNCO3NIQUF0QixzQkFBc0IsdVBDM0NuQywrdEJBa0JBOzs0RkR5QmEsc0JBQXNCO2tCQVRsQyxTQUFTOytCQUNJLHFCQUFxQixtQkFHZCx1QkFBdUIsQ0FBQyxNQUFNLFFBQ3pDO3dCQUNGLEtBQUssRUFBRSxPQUFPO3FCQUNqQjtzRkFLZSxFQUFFO3NCQUFqQixLQUFLO2dCQUNVLEtBQUs7c0JBQXBCLEtBQUs7Z0JBQ1UsUUFBUTtzQkFBdkIsS0FBSztnQkFFVSxXQUFXO3NCQUExQixLQUFLO2dCQUNPLFdBQVc7c0JBQXZCLEtBQUs7Z0JBS1csU0FBUztzQkFBekIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbIi8vIMKpIDIwMjIgU29sYXJXaW5kcyBXb3JsZHdpZGUsIExMQy4gQWxsIHJpZ2h0cyByZXNlcnZlZC5cbi8vXG4vLyBQZXJtaXNzaW9uIGlzIGhlcmVieSBncmFudGVkLCBmcmVlIG9mIGNoYXJnZSwgdG8gYW55IHBlcnNvbiBvYnRhaW5pbmcgYSBjb3B5XG4vLyAgb2YgdGhpcyBzb2Z0d2FyZSBhbmQgYXNzb2NpYXRlZCBkb2N1bWVudGF0aW9uIGZpbGVzICh0aGUgXCJTb2Z0d2FyZVwiKSwgdG9cbi8vICBkZWFsIGluIHRoZSBTb2Z0d2FyZSB3aXRob3V0IHJlc3RyaWN0aW9uLCBpbmNsdWRpbmcgd2l0aG91dCBsaW1pdGF0aW9uIHRoZVxuLy8gIHJpZ2h0cyB0byB1c2UsIGNvcHksIG1vZGlmeSwgbWVyZ2UsIHB1Ymxpc2gsIGRpc3RyaWJ1dGUsIHN1YmxpY2Vuc2UsIGFuZC9vclxuLy8gIHNlbGwgY29waWVzIG9mIHRoZSBTb2Z0d2FyZSwgYW5kIHRvIHBlcm1pdCBwZXJzb25zIHRvIHdob20gdGhlIFNvZnR3YXJlIGlzXG4vLyAgZnVybmlzaGVkIHRvIGRvIHNvLCBzdWJqZWN0IHRvIHRoZSBmb2xsb3dpbmcgY29uZGl0aW9uczpcbi8vXG4vLyBUaGUgYWJvdmUgY29weXJpZ2h0IG5vdGljZSBhbmQgdGhpcyBwZXJtaXNzaW9uIG5vdGljZSBzaGFsbCBiZSBpbmNsdWRlZCBpblxuLy8gIGFsbCBjb3BpZXMgb3Igc3Vic3RhbnRpYWwgcG9ydGlvbnMgb2YgdGhlIFNvZnR3YXJlLlxuLy9cbi8vIFRIRSBTT0ZUV0FSRSBJUyBQUk9WSURFRCBcIkFTIElTXCIsIFdJVEhPVVQgV0FSUkFOVFkgT0YgQU5ZIEtJTkQsIEVYUFJFU1MgT1Jcbi8vICBJTVBMSUVELCBJTkNMVURJTkcgQlVUIE5PVCBMSU1JVEVEIFRPIFRIRSBXQVJSQU5USUVTIE9GIE1FUkNIQU5UQUJJTElUWSxcbi8vICBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRSBBTkQgTk9OSU5GUklOR0VNRU5ULiBJTiBOTyBFVkVOVCBTSEFMTCBUSEVcbi8vICBBVVRIT1JTIE9SIENPUFlSSUdIVCBIT0xERVJTIEJFIExJQUJMRSBGT1IgQU5ZIENMQUlNLCBEQU1BR0VTIE9SIE9USEVSXG4vLyAgTElBQklMSVRZLCBXSEVUSEVSIElOIEFOIEFDVElPTiBPRiBDT05UUkFDVCwgVE9SVCBPUiBPVEhFUldJU0UsIEFSSVNJTkcgRlJPTSxcbi8vICBPVVQgT0YgT1IgSU4gQ09OTkVDVElPTiBXSVRIIFRIRSBTT0ZUV0FSRSBPUiBUSEUgVVNFIE9SIE9USEVSIERFQUxJTkdTIElOXG4vLyAgVEhFIFNPRlRXQVJFLlxuXG5pbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENoYW5nZURldGVjdG9yUmVmLFxuICAgIENvbXBvbmVudCxcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgSW5wdXQsXG4gICAgT3V0cHV0LFxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5pbXBvcnQgeyBJSGFzQ2hhbmdlRGV0ZWN0b3IgfSBmcm9tIFwiLi4vLi4vLi4vLi4vdHlwZXNcIjtcblxuY29uc3QgTUVESVVNX1dJRFRIID0gNjAwO1xuY29uc3QgU01BTExfV0lEVEggPSA0ODA7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiBcIm51aS1saXN0LWdyb3VwLWl0ZW1cIixcbiAgICB0ZW1wbGF0ZVVybDogXCIuL2xpc3QtZ3JvdXAtaXRlbS5jb21wb25lbnQuaHRtbFwiLFxuICAgIHN0eWxlVXJsczogW1wibGlzdC1ncm91cC1pdGVtLmNvbXBvbmVudC5sZXNzXCJdLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6IFwidy0xMDBcIixcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBMaXN0R3JvdXBJdGVtQ29tcG9uZW50IGltcGxlbWVudHMgSUhhc0NoYW5nZURldGVjdG9yIHtcbiAgICBzdGF0aWMgbGF0ZUxvYWRLZXkgPSBcIkxpc3RHcm91cEl0ZW1Db21wb25lbnRcIjtcblxuICAgIEBJbnB1dCgpIHB1YmxpYyBpZDogc3RyaW5nO1xuICAgIEBJbnB1dCgpIHB1YmxpYyBsYWJlbDogc3RyaW5nO1xuICAgIEBJbnB1dCgpIHB1YmxpYyBzdGF0dXNlczogQXJyYXk8eyBba2V5OiBzdHJpbmddOiBhbnkgfT47XG5cbiAgICBASW5wdXQoKSBwdWJsaWMgY2FuTmF2aWdhdGU6IGJvb2xlYW47XG4gICAgQElucHV0KCkgc2V0IHdpZGdldFdpZHRoKHJlczogbnVtYmVyKSB7XG4gICAgICAgIHRoaXMuaXNNZWRpdW0gPSByZXMgPD0gTUVESVVNX1dJRFRIICYmIHJlcyA+IFNNQUxMX1dJRFRIO1xuICAgICAgICB0aGlzLmlzU21hbGwgPSByZXMgPD0gU01BTExfV0lEVEg7XG4gICAgfVxuXG4gICAgQE91dHB1dCgpIHB1YmxpYyBuYXZpZ2F0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyPExpc3RHcm91cEl0ZW1Db21wb25lbnQ+KCk7XG5cbiAgICBwdWJsaWMgaXNNZWRpdW06IGJvb2xlYW47XG4gICAgcHVibGljIGlzU21hbGw6IGJvb2xlYW47XG5cbiAgICBjb25zdHJ1Y3RvcihwdWJsaWMgY2hhbmdlRGV0ZWN0b3I6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gICAgcHVibGljIG9uQnV0dG9uQ2xpY2soKTogdm9pZCB7XG4gICAgICAgIGlmICh0aGlzLmNhbk5hdmlnYXRlKSB7XG4gICAgICAgICAgICB0aGlzLm5hdmlnYXRlZC5lbWl0KHRoaXMpO1xuICAgICAgICB9XG4gICAgfVxufVxuIiwiPGRpdlxuICAgIGNsYXNzPVwibGlzdC1ncm91cC1pdGVtXCJcbiAgICBbbmdDbGFzc109XCJ7ICd3aWRnZXQtbWVkaXVtJzogaXNNZWRpdW0sICd3aWRnZXQtc21hbGwnOiBpc1NtYWxsIH1cIlxuICAgIChjbGljayk9XCJvbkJ1dHRvbkNsaWNrKClcIlxuPlxuICAgIDxkaXYgY2xhc3M9XCJsaXN0LWdyb3VwLWl0ZW1fX2xhYmVsXCIgW3RpdGxlXT1cImxhYmVsXCI+e3sgbGFiZWwgfX08L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwibGlzdC1ncm91cC1pdGVtX19zdGF0dXNlc1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwic3RhdHVzZXNcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzdGF0dXMtY29sdW1uXCIgKm5nRm9yPVwibGV0IHN0YXR1cyBvZiBzdGF0dXNlc1wiPlxuICAgICAgICAgICAgICAgIDxudWktaWNvbiBbaWNvbl09XCJzdGF0dXMua2V5XCIgY2xhc3M9XCJtci0yXCI+PC9udWktaWNvbj5cbiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cInN0YXR1cy1jb2x1bW5fX2xhYmVsXCIgW3RpdGxlXT1cInN0YXR1cy52YWx1ZVwiPnt7XG4gICAgICAgICAgICAgICAgICAgIHN0YXR1cy52YWx1ZVxuICAgICAgICAgICAgICAgIH19PC9zcGFuPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8bnVpLWljb24gKm5nSWY9XCJjYW5OYXZpZ2F0ZVwiIGljb249XCJjYXJldC1yaWdodFwiPjwvbnVpLWljb24+XG4gICAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==