@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
38 lines • 14.6 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@c8y/ngx-components";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@c8y/ngx-components/assets-navigator";
import * as i5 from "ngx-bootstrap/tooltip";
export class RootNodeConfigComponent {
constructor() {
this.disabled = false;
this.onUpdate = new EventEmitter();
}
/**
* Removes one of the root nodes.
* @param node The node to remove.
*/
removeNavigatorNode(node) {
const index = this.config.rootNodes.indexOf(node);
if (index > -1) {
const newNodes = this.config.rootNodes.filter((_, i) => i !== index);
this.config.rootNodes = newNodes;
this.onUpdate.emit();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RootNodeConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RootNodeConfigComponent, selector: "c8y-root-node-config", inputs: { config: "config", disabled: "disabled" }, outputs: { onUpdate: "onUpdate" }, ngImport: i0, template: "<div class=\"col-sm-6\">\n <label title=\"{{ 'Current top level nodes' | translate }}\" translate>\n Current top level nodes\n </label>\n <c8y-list-group class=\"separator-top\">\n <c8y-li *ngIf=\"config.rootNodes.length === 0\">\n <c8y-ui-empty-state\n [icon]=\"'folder-open'\"\n [title]=\"'No top level nodes set.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </c8y-li>\n <c8y-li *ngFor=\"let node of config.rootNodes; let index = index\">\n <c8y-li-icon icon=\"c8y-group\"></c8y-li-icon>\n <div class=\"content-flex-30\">\n <div class=\"col-6\">\n <div class=\"text-truncate\" title=\"{{ node.name }}\">\n {{ node.name }}\n </div>\n </div>\n <div class=\"col-4\">\n <label class=\"c8y-switch c8y-switch--inline d-flex\" title=\"{{ 'Hide devices' | translate }}\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"node.hideDevices\"\n name=\"node.{{ index }}.hideDevices\"\n (change)=\"onUpdate.emit()\"\n [disabled]=\"disabled\"\n />\n <span></span>\n <small class=\"text-truncate a-s-center l-h-1\">{{ 'Hide devices' | translate }}</small>\n </label>\n </div>\n <div class=\"col-2 text-right\">\n <div class=\"d-flex fit-w\">\n <button\n class=\"btn-dot btn-dot--danger m-l-auto\"\n type=\"button\"\n [attr.aria-label]=\"'Remove' | translate\"\n tooltip=\"{{ 'Remove' | translate }}\"\n [disabled]=\"disabled\"\n [delay]=\"500\"\n (click)=\"removeNavigatorNode(node)\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n </div>\n </div>\n </c8y-li>\n </c8y-list-group>\n</div>\n\n<div class=\"col-sm-6 col-md-5\" style=\"height: calc(100vh - 430px)\">\n <label title=\"{{ 'Select top level nodes' | translate }}\" translate>Select top level nodes</label>\n <c8y-asset-selector\n [config]=\"{ groupsOnly: true, multi: true, groupsSelectable: true }\"\n [(ngModel)]=\"config.rootNodes\"\n [disabled]=\"disabled\"\n (onSelected)=\"onUpdate.emit()\"\n name=\"rootNodes\"\n class=\"border-top d-block\"\n ></c8y-asset-selector>\n</div>\n", dependencies: [{ kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i4.AssetSelectorComponent, selector: "c8y-asset-selector", inputs: ["config", "active", "index", "asset", "selectedDevice", "selected", "rootNode", "selectedItems", "container", "isNodeSelectable", "disabled"], outputs: ["onSelected", "onClearSelected", "onRowSelected", "onLoad"] }, { kind: "directive", type: i5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RootNodeConfigComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-root-node-config', template: "<div class=\"col-sm-6\">\n <label title=\"{{ 'Current top level nodes' | translate }}\" translate>\n Current top level nodes\n </label>\n <c8y-list-group class=\"separator-top\">\n <c8y-li *ngIf=\"config.rootNodes.length === 0\">\n <c8y-ui-empty-state\n [icon]=\"'folder-open'\"\n [title]=\"'No top level nodes set.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </c8y-li>\n <c8y-li *ngFor=\"let node of config.rootNodes; let index = index\">\n <c8y-li-icon icon=\"c8y-group\"></c8y-li-icon>\n <div class=\"content-flex-30\">\n <div class=\"col-6\">\n <div class=\"text-truncate\" title=\"{{ node.name }}\">\n {{ node.name }}\n </div>\n </div>\n <div class=\"col-4\">\n <label class=\"c8y-switch c8y-switch--inline d-flex\" title=\"{{ 'Hide devices' | translate }}\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"node.hideDevices\"\n name=\"node.{{ index }}.hideDevices\"\n (change)=\"onUpdate.emit()\"\n [disabled]=\"disabled\"\n />\n <span></span>\n <small class=\"text-truncate a-s-center l-h-1\">{{ 'Hide devices' | translate }}</small>\n </label>\n </div>\n <div class=\"col-2 text-right\">\n <div class=\"d-flex fit-w\">\n <button\n class=\"btn-dot btn-dot--danger m-l-auto\"\n type=\"button\"\n [attr.aria-label]=\"'Remove' | translate\"\n tooltip=\"{{ 'Remove' | translate }}\"\n [disabled]=\"disabled\"\n [delay]=\"500\"\n (click)=\"removeNavigatorNode(node)\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n </div>\n </div>\n </c8y-li>\n </c8y-list-group>\n</div>\n\n<div class=\"col-sm-6 col-md-5\" style=\"height: calc(100vh - 430px)\">\n <label title=\"{{ 'Select top level nodes' | translate }}\" translate>Select top level nodes</label>\n <c8y-asset-selector\n [config]=\"{ groupsOnly: true, multi: true, groupsSelectable: true }\"\n [(ngModel)]=\"config.rootNodes\"\n [disabled]=\"disabled\"\n (onSelected)=\"onUpdate.emit()\"\n name=\"rootNodes\"\n class=\"border-top d-block\"\n ></c8y-asset-selector>\n</div>\n" }]
}], propDecorators: { config: [{
type: Input
}], disabled: [{
type: Input
}], onUpdate: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm9vdC1ub2RlLWNvbmZpZy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb2NrcGl0LWNvbmZpZy9yb290LW5vZGUtY29uZmlnLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uL2NvY2twaXQtY29uZmlnL3Jvb3Qtbm9kZS1jb25maWcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7OztBQU92RSxNQUFNLE9BQU8sdUJBQXVCO0lBSnBDO1FBUVcsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUcxQixhQUFRLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztLQWNyQztJQVpDOzs7T0FHRztJQUNILG1CQUFtQixDQUFDLElBQTJCO1FBQzdDLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNsRCxJQUFJLEtBQUssR0FBRyxDQUFDLENBQUMsRUFBRSxDQUFDO1lBQ2YsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxLQUFLLEtBQUssQ0FBQyxDQUFDO1lBQ3JFLElBQUksQ0FBQyxNQUFNLENBQUMsU0FBUyxHQUFHLFFBQVEsQ0FBQztZQUNqQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3ZCLENBQUM7SUFDSCxDQUFDOytHQXBCVSx1QkFBdUI7bUdBQXZCLHVCQUF1QixtSkNQcEMsbTJFQWdFQTs7NEZEekRhLHVCQUF1QjtrQkFKbkMsU0FBUzsrQkFDRSxzQkFBc0I7OEJBS2hDLE1BQU07c0JBREwsS0FBSztnQkFHRyxRQUFRO3NCQUFoQixLQUFLO2dCQUdOLFFBQVE7c0JBRFAsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb2NrcGl0Q29uZmlnLCBDb2NrcGl0Q29uZmlnUm9vdE5vZGUgfSBmcm9tICcuL2NvY2twaXQtY29uZmlnLm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYzh5LXJvb3Qtbm9kZS1jb25maWcnLFxuICB0ZW1wbGF0ZVVybDogJy4vcm9vdC1ub2RlLWNvbmZpZy5jb21wb25lbnQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgUm9vdE5vZGVDb25maWdDb21wb25lbnQge1xuICBASW5wdXQoKVxuICBjb25maWc6IENvY2twaXRDb25maWc7XG5cbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcblxuICBAT3V0cHV0KClcbiAgb25VcGRhdGUgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgLyoqXG4gICAqIFJlbW92ZXMgb25lIG9mIHRoZSByb290IG5vZGVzLlxuICAgKiBAcGFyYW0gbm9kZSBUaGUgbm9kZSB0byByZW1vdmUuXG4gICAqL1xuICByZW1vdmVOYXZpZ2F0b3JOb2RlKG5vZGU6IENvY2twaXRDb25maWdSb290Tm9kZSkge1xuICAgIGNvbnN0IGluZGV4ID0gdGhpcy5jb25maWcucm9vdE5vZGVzLmluZGV4T2Yobm9kZSk7XG4gICAgaWYgKGluZGV4ID4gLTEpIHtcbiAgICAgIGNvbnN0IG5ld05vZGVzID0gdGhpcy5jb25maWcucm9vdE5vZGVzLmZpbHRlcigoXywgaSkgPT4gaSAhPT0gaW5kZXgpO1xuICAgICAgdGhpcy5jb25maWcucm9vdE5vZGVzID0gbmV3Tm9kZXM7XG4gICAgICB0aGlzLm9uVXBkYXRlLmVtaXQoKTtcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJjb2wtc20tNlwiPlxuICA8bGFiZWwgdGl0bGU9XCJ7eyAnQ3VycmVudCB0b3AgbGV2ZWwgbm9kZXMnIHwgdHJhbnNsYXRlIH19XCIgdHJhbnNsYXRlPlxuICAgIEN1cnJlbnQgdG9wIGxldmVsIG5vZGVzXG4gIDwvbGFiZWw+XG4gIDxjOHktbGlzdC1ncm91cCBjbGFzcz1cInNlcGFyYXRvci10b3BcIj5cbiAgICA8Yzh5LWxpICpuZ0lmPVwiY29uZmlnLnJvb3ROb2Rlcy5sZW5ndGggPT09IDBcIj5cbiAgICAgIDxjOHktdWktZW1wdHktc3RhdGVcbiAgICAgICAgW2ljb25dPVwiJ2ZvbGRlci1vcGVuJ1wiXG4gICAgICAgIFt0aXRsZV09XCInTm8gdG9wIGxldmVsIG5vZGVzIHNldC4nIHwgdHJhbnNsYXRlXCJcbiAgICAgICAgW2hvcml6b250YWxdPVwidHJ1ZVwiXG4gICAgICA+PC9jOHktdWktZW1wdHktc3RhdGU+XG4gICAgPC9jOHktbGk+XG4gICAgPGM4eS1saSAqbmdGb3I9XCJsZXQgbm9kZSBvZiBjb25maWcucm9vdE5vZGVzOyBsZXQgaW5kZXggPSBpbmRleFwiPlxuICAgICAgPGM4eS1saS1pY29uIGljb249XCJjOHktZ3JvdXBcIj48L2M4eS1saS1pY29uPlxuICAgICAgPGRpdiBjbGFzcz1cImNvbnRlbnQtZmxleC0zMFwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY29sLTZcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwidGV4dC10cnVuY2F0ZVwiIHRpdGxlPVwie3sgbm9kZS5uYW1lIH19XCI+XG4gICAgICAgICAgICB7eyBub2RlLm5hbWUgfX1cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb2wtNFwiPlxuICAgICAgICAgIDxsYWJlbCBjbGFzcz1cImM4eS1zd2l0Y2ggYzh5LXN3aXRjaC0taW5saW5lIGQtZmxleFwiIHRpdGxlPVwie3sgJ0hpZGUgZGV2aWNlcycgfCB0cmFuc2xhdGUgfX1cIj5cbiAgICAgICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAgICAgICBbKG5nTW9kZWwpXT1cIm5vZGUuaGlkZURldmljZXNcIlxuICAgICAgICAgICAgICBuYW1lPVwibm9kZS57eyBpbmRleCB9fS5oaWRlRGV2aWNlc1wiXG4gICAgICAgICAgICAgIChjaGFuZ2UpPVwib25VcGRhdGUuZW1pdCgpXCJcbiAgICAgICAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgICA8c3Bhbj48L3NwYW4+XG4gICAgICAgICAgICA8c21hbGwgY2xhc3M9XCJ0ZXh0LXRydW5jYXRlIGEtcy1jZW50ZXIgbC1oLTFcIj57eyAnSGlkZSBkZXZpY2VzJyB8IHRyYW5zbGF0ZSB9fTwvc21hbGw+XG4gICAgICAgICAgPC9sYWJlbD5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb2wtMiB0ZXh0LXJpZ2h0XCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImQtZmxleCBmaXQtd1wiPlxuICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICBjbGFzcz1cImJ0bi1kb3QgYnRuLWRvdC0tZGFuZ2VyIG0tbC1hdXRvXCJcbiAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiJ1JlbW92ZScgfCB0cmFuc2xhdGVcIlxuICAgICAgICAgICAgICB0b29sdGlwPVwie3sgJ1JlbW92ZScgfCB0cmFuc2xhdGUgfX1cIlxuICAgICAgICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgICAgICAgICBbZGVsYXldPVwiNTAwXCJcbiAgICAgICAgICAgICAgKGNsaWNrKT1cInJlbW92ZU5hdmlnYXRvck5vZGUobm9kZSlcIlxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICA8aSBjOHlJY29uPVwibWludXMtY2lyY2xlXCI+PC9pPlxuICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9jOHktbGk+XG4gIDwvYzh5LWxpc3QtZ3JvdXA+XG48L2Rpdj5cblxuPGRpdiBjbGFzcz1cImNvbC1zbS02IGNvbC1tZC01XCIgc3R5bGU9XCJoZWlnaHQ6IGNhbGMoMTAwdmggLSA0MzBweClcIj5cbiAgPGxhYmVsIHRpdGxlPVwie3sgJ1NlbGVjdCB0b3AgbGV2ZWwgbm9kZXMnIHwgdHJhbnNsYXRlIH19XCIgdHJhbnNsYXRlPlNlbGVjdCB0b3AgbGV2ZWwgbm9kZXM8L2xhYmVsPlxuICA8Yzh5LWFzc2V0LXNlbGVjdG9yXG4gICAgW2NvbmZpZ109XCJ7IGdyb3Vwc09ubHk6IHRydWUsIG11bHRpOiB0cnVlLCBncm91cHNTZWxlY3RhYmxlOiB0cnVlIH1cIlxuICAgIFsobmdNb2RlbCldPVwiY29uZmlnLnJvb3ROb2Rlc1wiXG4gICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAob25TZWxlY3RlZCk9XCJvblVwZGF0ZS5lbWl0KClcIlxuICAgIG5hbWU9XCJyb290Tm9kZXNcIlxuICAgIGNsYXNzPVwiYm9yZGVyLXRvcCBkLWJsb2NrXCJcbiAgPjwvYzh5LWFzc2V0LXNlbGVjdG9yPlxuPC9kaXY+XG4iXX0=