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, 