@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
35 lines • 8.99 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@c8y/ngx-components";
import * as i3 from "./configuration-filter.pipe";
export class DeviceConfigurationListComponent {
constructor() {
this.configSelected = new EventEmitter();
this.filterTerm = '';
}
showConfigurationTypePreview(config) {
this.selectedConfig = config;
this.configSelected.emit(config);
}
updatePipe(filterTerm) {
this.filterTerm = filterTerm;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeviceConfigurationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DeviceConfigurationListComponent, selector: "c8y-device-configuration-list", inputs: { items: "items", itemIcon: "itemIcon", emptyState: "emptyState", isFilterEnabled: "isFilterEnabled" }, outputs: { configSelected: "configSelected" }, ngImport: i0, template: "<div class=\"p-l-16 m-b-8\" *ngIf=\"isFilterEnabled\">\n <c8y-filter [icon]=\"'search'\" (onSearch)=\"updatePipe($event)\"></c8y-filter>\n</div>\n\n<!-- EMPTY STATE -->\n<div class=\"c8y-empty-state text-left\" *ngIf=\"items?.length === 0\">\n <h1 [c8yIcon]=\"emptyState.icon\"></h1>\n <p>\n <strong>{{ emptyState.title | translate }}</strong>\n <br />\n <small>{{ emptyState.text | translate }}</small>\n </p>\n</div>\n\n<!-- CONFIGURATIONS AVAILABLE -->\n<div class=\"c8y-nav-stacked\">\n <button\n type=\"button\"\n class=\"c8y-stacked-item d-flex\"\n [class.active]=\"config === selectedConfig\"\n *ngFor=\"let config of items | configurationFilterPipe: filterTerm\"\n (click)=\"showConfigurationTypePreview(config)\"\n >\n <div class=\"list-item-icon\">\n <i [c8yIcon]=\"itemIcon\"></i>\n </div>\n <div class=\"list-item-body text-truncate\">\n <div class=\"d-flex\">\n <span class=\"text-truncate\" title=\"{{ config.name }}\">{{ config.name }}</span>\n <span class=\"text-label-small m-l-auto m-t-auto m-b-auto\">{{ config.deviceType }}</span>\n </div>\n </div>\n </button>\n</div>\n\n<!-- for Carlos: config.configurationType to differentiate whether a config matches configuration type. -->\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.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: i2.FilterInputComponent, selector: "c8y-filter", inputs: ["icon", "filterTerm"], outputs: ["onSearch"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.ConfigurationFilterPipe, name: "configurationFilterPipe" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeviceConfigurationListComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-device-configuration-list', template: "<div class=\"p-l-16 m-b-8\" *ngIf=\"isFilterEnabled\">\n <c8y-filter [icon]=\"'search'\" (onSearch)=\"updatePipe($event)\"></c8y-filter>\n</div>\n\n<!-- EMPTY STATE -->\n<div class=\"c8y-empty-state text-left\" *ngIf=\"items?.length === 0\">\n <h1 [c8yIcon]=\"emptyState.icon\"></h1>\n <p>\n <strong>{{ emptyState.title | translate }}</strong>\n <br />\n <small>{{ emptyState.text | translate }}</small>\n </p>\n</div>\n\n<!-- CONFIGURATIONS AVAILABLE -->\n<div class=\"c8y-nav-stacked\">\n <button\n type=\"button\"\n class=\"c8y-stacked-item d-flex\"\n [class.active]=\"config === selectedConfig\"\n *ngFor=\"let config of items | configurationFilterPipe: filterTerm\"\n (click)=\"showConfigurationTypePreview(config)\"\n >\n <div class=\"list-item-icon\">\n <i [c8yIcon]=\"itemIcon\"></i>\n </div>\n <div class=\"list-item-body text-truncate\">\n <div class=\"d-flex\">\n <span class=\"text-truncate\" title=\"{{ config.name }}\">{{ config.name }}</span>\n <span class=\"text-label-small m-l-auto m-t-auto m-b-auto\">{{ config.deviceType }}</span>\n </div>\n </div>\n </button>\n</div>\n\n<!-- for Carlos: config.configurationType to differentiate whether a config matches configuration type. -->\n" }]
}], propDecorators: { items: [{
type: Input
}], itemIcon: [{
type: Input
}], emptyState: [{
type: Input
}], isFilterEnabled: [{
type: Input
}], configSelected: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGV2aWNlLWNvbmZpZ3VyYXRpb24tbGlzdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9yZXBvc2l0b3J5L2NvbmZpZ3VyYXRpb24vZGV2aWNlLXRhYi9kZXZpY2UtY29uZmlndXJhdGlvbi1saXN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3JlcG9zaXRvcnkvY29uZmlndXJhdGlvbi9kZXZpY2UtdGFiL2RldmljZS1jb25maWd1cmF0aW9uLWxpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFVdkUsTUFBTSxPQUFPLGdDQUFnQztJQUo3QztRQVNZLG1CQUFjLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUV0RCxlQUFVLEdBQUcsRUFBRSxDQUFDO0tBVWpCO0lBUkMsNEJBQTRCLENBQUMsTUFBTTtRQUNqQyxJQUFJLENBQUMsY0FBYyxHQUFHLE1BQU0sQ0FBQztRQUM3QixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNuQyxDQUFDO0lBRUQsVUFBVSxDQUFDLFVBQWtCO1FBQzNCLElBQUksQ0FBQyxVQUFVLEdBQUcsVUFBVSxDQUFDO0lBQy9CLENBQUM7K0dBaEJVLGdDQUFnQzttR0FBaEMsZ0NBQWdDLG9PQ1Y3QywydkNBb0NBOzs0RkQxQmEsZ0NBQWdDO2tCQUo1QyxTQUFTOytCQUNFLCtCQUErQjs4QkFJaEMsS0FBSztzQkFBYixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxlQUFlO3NCQUF2QixLQUFLO2dCQUNJLGNBQWM7c0JBQXZCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgRGV2aWNlQ29uZmlndXJhdGlvbkxpc3RFbXB0eVN0YXRlLFxuICBTdXBwb3J0ZWRDb25maWd1cmF0aW9uSXRlbVxufSBmcm9tICdAYzh5L25neC1jb21wb25lbnRzL3JlcG9zaXRvcnkvc2hhcmVkJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYzh5LWRldmljZS1jb25maWd1cmF0aW9uLWxpc3QnLFxuICB0ZW1wbGF0ZVVybDogJy4vZGV2aWNlLWNvbmZpZ3VyYXRpb24tbGlzdC5jb21wb25lbnQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgRGV2aWNlQ29uZmlndXJhdGlvbkxpc3RDb21wb25lbnQge1xuICBASW5wdXQoKSBpdGVtczogU3VwcG9ydGVkQ29uZmlndXJhdGlvbkl0ZW1bXTtcbiAgQElucHV0KCkgaXRlbUljb246IHN0cmluZztcbiAgQElucHV0KCkgZW1wdHlTdGF0ZTogRGV2aWNlQ29uZmlndXJhdGlvbkxpc3RFbXB0eVN0YXRlO1xuICBASW5wdXQoKSBpc0ZpbHRlckVuYWJsZWQ6IGJvb2xlYW47XG4gIEBPdXRwdXQoKSBjb25maWdTZWxlY3RlZCA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuICBzZWxlY3RlZENvbmZpZztcbiAgZmlsdGVyVGVybSA9ICcnO1xuXG4gIHNob3dDb25maWd1cmF0aW9uVHlwZVByZXZpZXcoY29uZmlnKTogdm9pZCB7XG4gICAgdGhpcy5zZWxlY3RlZENvbmZpZyA9IGNvbmZpZztcbiAgICB0aGlzLmNvbmZpZ1NlbGVjdGVkLmVtaXQoY29uZmlnKTtcbiAgfVxuXG4gIHVwZGF0ZVBpcGUoZmlsdGVyVGVybTogc3RyaW5nKSB7XG4gICAgdGhpcy5maWx0ZXJUZXJtID0gZmlsdGVyVGVybTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInAtbC0xNiBtLWItOFwiICpuZ0lmPVwiaXNGaWx0ZXJFbmFibGVkXCI+XG4gIDxjOHktZmlsdGVyIFtpY29uXT1cIidzZWFyY2gnXCIgKG9uU2VhcmNoKT1cInVwZGF0ZVBpcGUoJGV2ZW50KVwiPjwvYzh5LWZpbHRlcj5cbjwvZGl2PlxuXG48IS0tIEVNUFRZIFNUQVRFIC0tPlxuPGRpdiBjbGFzcz1cImM4eS1lbXB0eS1zdGF0ZSB0ZXh0LWxlZnRcIiAqbmdJZj1cIml0ZW1zPy5sZW5ndGggPT09IDBcIj5cbiAgPGgxIFtjOHlJY29uXT1cImVtcHR5U3RhdGUuaWNvblwiPjwvaDE+XG4gIDxwPlxuICAgIDxzdHJvbmc+e3sgZW1wdHlTdGF0ZS50aXRsZSB8IHRyYW5zbGF0ZSB9fTwvc3Ryb25nPlxuICAgIDxiciAvPlxuICAgIDxzbWFsbD57eyBlbXB0eVN0YXRlLnRleHQgfCB0cmFuc2xhdGUgfX08L3NtYWxsPlxuICA8L3A+XG48L2Rpdj5cblxuPCEtLSBDT05GSUdVUkFUSU9OUyBBVkFJTEFCTEUgLS0+XG48ZGl2IGNsYXNzPVwiYzh5LW5hdi1zdGFja2VkXCI+XG4gIDxidXR0b25cbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICBjbGFzcz1cImM4eS1zdGFja2VkLWl0ZW0gZC1mbGV4XCJcbiAgICBbY2xhc3MuYWN0aXZlXT1cImNvbmZpZyA9PT0gc2VsZWN0ZWRDb25maWdcIlxuICAgICpuZ0Zvcj1cImxldCBjb25maWcgb2YgaXRlbXMgfCBjb25maWd1cmF0aW9uRmlsdGVyUGlwZTogZmlsdGVyVGVybVwiXG4gICAgKGNsaWNrKT1cInNob3dDb25maWd1cmF0aW9uVHlwZVByZXZpZXcoY29uZmlnKVwiXG4gID5cbiAgICA8ZGl2IGNsYXNzPVwibGlzdC1pdGVtLWljb25cIj5cbiAgICAgIDxpIFtjOHlJY29uXT1cIml0ZW1JY29uXCI+PC9pPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJsaXN0LWl0ZW0tYm9keSB0ZXh0LXRydW5jYXRlXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiZC1mbGV4XCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwidGV4dC10cnVuY2F0ZVwiIHRpdGxlPVwie3sgY29uZmlnLm5hbWUgfX1cIj57eyBjb25maWcubmFtZSB9fTwvc3Bhbj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJ0ZXh0LWxhYmVsLXNtYWxsIG0tbC1hdXRvIG0tdC1hdXRvIG0tYi1hdXRvXCI+e3sgY29uZmlnLmRldmljZVR5cGUgfX08L3NwYW4+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9idXR0b24+XG48L2Rpdj5cblxuPCEtLSBmb3IgQ2FybG9zOiBjb25maWcuY29uZmlndXJhdGlvblR5cGUgdG8gZGlmZmVyZW50aWF0ZSB3aGV0aGVyIGEgY29uZmlnIG1hdGNoZXMgY29uZmlndXJhdGlvbiB0eXBlLiAtLT5cbiJdfQ==