@c8y/ngx-components 1021.2.1 → 1021.4.3

package/fesm2022/c8y-ngx-components-cockpit-config.mjs

@@ -13,8 +13,8 @@ import { PopoverModule } from 'ngx-bootstrap/popover';
 import * as i5$1 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import * as i3 from '@c8y/client';
-import { isUndefined, startCase } from 'lodash-es';
-import { map, filter } from 'rxjs/operators';
+import { isUndefined, uniqBy, startCase } from 'lodash-es';
+import { take, map, filter } from 'rxjs/operators';
 import * as i5 from '@angular/forms';
 import * as i2$2 from '@angular/common';
 import * as i2$3 from '@angular/cdk/stepper';
@@ -123,9 +123,11 @@ class CockpitConfigService {
         this.appState.currentApplicationConfig.subscribe(config => {
             if (config) {
                 this.currentConfig = { ...DEFAULT_CONFIG, ...config };
-                this.setRootNodes();
             }
         });
+        this.appState.currentApplicationConfig.pipe(take(1)).subscribe(() => {
+            this.setRootNodes();
+        });
     }
     /**
      * Save and apply new cockpit configuration
@@ -186,6 +188,7 @@ class CockpitConfigService {
                 // do nothing
             }
         }
+        this.nodes = uniqBy(this.nodes, 'path');
         this.refresh();
     }
     getAppDashboardName() {
@@ -290,6 +293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
 
 class RootNodeConfigComponent {
     constructor() {
+        this.disabled = false;
         this.onUpdate = new EventEmitter();
     }
     /**
@@ -299,18 +303,21 @@ class RootNodeConfigComponent {
     removeNavigatorNode(node) {
         const index = this.config.rootNodes.indexOf(node);
         if (index > -1) {
-            this.config.rootNodes.splice(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.9", ngImport: i0, type: RootNodeConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: RootNodeConfigComponent, selector: "c8y-root-node-config", inputs: { config: "config" }, 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            />\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              [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    (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$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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: i2$1.AssetSelectorComponent, selector: "c8y-asset-selector", inputs: ["config", "active", "index", "asset", "selectedDevice", "selected", "rootNode", "selectedItems", "container"], outputs: ["onSelected", "onClearSelected", "onRowSelected", "onLoad"] }, { kind: "directive", type: i5$1.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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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: i2$1.AssetSelectorComponent, selector: "c8y-asset-selector", inputs: ["config", "active", "index", "asset", "selectedDevice", "selected", "rootNode", "selectedItems", "container", "disabled"], outputs: ["onSelected", "onClearSelected", "onRowSelected", "onLoad"] }, { kind: "directive", type: i5$1.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.9", 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            />\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              [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    (onSelected)=\"onUpdate.emit()\"\n    name=\"rootNodes\"\n    class=\"border-top d-block\"\n  ></c8y-asset-selector>\n</div>\n" }]
+            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
             }] } });
@@ -393,6 +400,7 @@ class CockpitConfigurationComponent {
          * The currently used configuration.
          */
         this.config = DEFAULT_CONFIG;
+        this.rootNodeDisabled = false;
     }
     /**
      * @ignore
@@ -433,15 +441,17 @@ class CockpitConfigurationComponent {
      * Updates the root nodes to directly reflect the results of the change.
      */
     async updateRootNodes() {
+        this.rootNodeDisabled = true;
         this.cockpitConfigService.currentConfig = this.config;
         await this.cockpitConfigService.setRootNodes();
+        this.rootNodeDisabled = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CockpitConfigurationComponent, deps: [{ token: CockpitConfigService }, { token: i1.AlertService }, { token: i1.AppStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CockpitConfigurationComponent, selector: "c8y-cockpit-configuration", ngImport: i0, template: "<c8y-title>{{ 'Application configuration' | translate }}</c8y-title>\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Configuration' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Application configuration' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<div class=\"row\">\n  <div class=\"col-lg-12 col-lg-max\">\n    <form #configForm=\"ngForm\">\n      <div class=\"card card--fullpage\">\n        <div class=\"card-header separator\">\n          <div class=\"card-title\">\n            {{ config.appTitle || ('Cockpit' | translate) }} {{ 'configuration' | translate }}\n          </div>\n        </div>\n\n        <div class=\"inner-scroll\">\n          <div class=\"card-block p-t-0 p-b-0\">\n            <fieldset class=\"row separator-bottom p-t-24 p-b-24\">\n              <div class=\"col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm\">\n                <div\n                  class=\"h4 text-medium d-inline-block m-r-4\"\n                  translate\n                >\n                  Title, icon, and navigator collapse\n                </div>\n              </div>\n              <div class=\"col-xs-12 col-sm-9 col-md-8 p-l-16\">\n                <div class=\"d-flex a-i-start gap-16\">\n                  <div class=\"form-group d-inline-block\">\n                    <label>{{ 'Icon' | translate }}</label>\n                    <c8y-icon-selector-wrapper\n                      [selectedIcon]=\"config?.icon?.class || 'c8y-cockpit'\"\n                      [iconSize]=\"24\"\n                      (onSelect)=\"iconSelectionChange($event)\"\n                    ></c8y-icon-selector-wrapper>\n                  </div>\n                  <div class=\"form-group flex-grow\">\n                    <label\n                      for=\"confAppTitle\"\n                      translate\n                    >\n                      Change application title\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"confAppTitle\"\n                      placeholder=\"{{ 'e.g. Cockpit' | translate }} \"\n                      type=\"text\"\n                      maxlength=\"254\"\n                      [(ngModel)]=\"config.appTitle\"\n                      [ngModelOptions]=\"{ standalone: true }\"\n                    />\n                  </div>\n                </div>\n\n                <c8y-misc-config [config]=\"config\"></c8y-misc-config>\n              </div>\n            </fieldset>\n            <fieldset class=\"row separator-bottom p-t-24 p-b-24\">\n              <div class=\"col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm\">\n                <div class=\"d-inline-flex m-b-16\">\n                  <div\n                    class=\"h4 text-medium m-r-4\"\n                    translate\n                  >\n                    Features\n                  </div>\n                  <button\n                    class=\"btn-help btn-help--sm\"\n                    [attr.aria-label]=\"'Help' | translate\"\n                    popover=\"{{\n                      'Define which are the enabled features in the current application.'\n                        | translate\n                    }}\"\n                    placement=\"right\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  ></button>\n                </div>\n              </div>\n              <div class=\"col-xs-12 col-sm-9 col-md-8\">\n                <c8y-feature-config\n                  [config]=\"config\"\n                  (onUpdate)=\"updateFeatures()\"\n                ></c8y-feature-config>\n              </div>\n            </fieldset>\n            <fieldset class=\"row separator-bottom p-t-24 p-b-24\">\n              <div class=\"col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm\">\n                <div class=\"d-inline-flex m-b-16\">\n                  <div\n                    class=\"h4 text-medium m-r-8\"\n                    translate\n                  >\n                    Top level nodes\n                  </div>\n                  <button\n                    class=\"btn-help btn-help--sm\"\n                    [attr.aria-label]=\"'Help' | translate\"\n                    popover=\"{{\n                      'Select which nodes to display in the top level of the navigator menu. By default, only Groups is shown.'\n                        | translate\n                    }}\"\n                    placement=\"right\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  ></button>\n                </div>\n              </div>\n              <div class=\"col-xs-12 col-sm-10 col-md-10\">\n                <div class=\"row\">\n                  <c8y-root-node-config\n                    [config]=\"config\"\n                    (onUpdate)=\"updateRootNodes()\"\n                  ></c8y-root-node-config>\n                </div>\n              </div>\n            </fieldset>\n\n            <fieldset class=\"row p-t-24 p-b-24\">\n              <div class=\"col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm\">\n                <div class=\"d-inline-flex m-b-16\">\n                  <div\n                    class=\"h4 text-medium m-r-8\"\n                    translate\n                  >\n                    Home dashboard\n                  </div>\n                  <button\n                    class=\"btn-help btn-help--sm\"\n                    [attr.aria-label]=\"'Help' | translate\"\n                    popover=\"{{\n                      'The homepage of this application. By default, it is a customizable dashboard displaying the most important alarms and shortcuts to frequently used features.'\n                        | translate\n                    }}\"\n                    placement=\"right\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  ></button>\n                </div>\n              </div>\n              <div class=\"col-xs-12 col-sm-9 col-md-8\">\n                <c8y-home-dashboard-config [config]=\"config\"></c8y-home-dashboard-config>\n              </div>\n            </fieldset>\n          </div>\n        </div>\n        <div class=\"card-footer separator\">\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Save' | translate }}\"\n            type=\"submit\"\n            [disabled]=\"!configForm.form.valid\"\n            (click)=\"save()\"\n            [actionName]=\"'cockpitConfigurationSaved'\"\n            [actionData]=\"{ config: config }\"\n            c8yProductExperience\n          >\n            {{ 'Save' | translate }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i1.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i1.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i1.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: i5$2.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "component", type: FeatureConfigComponent, selector: "c8y-feature-config", inputs: ["config"], outputs: ["onUpdate"] }, { kind: "component", type: RootNodeConfigComponent, selector: "c8y-root-node-config", inputs: ["config"], outputs: ["onUpdate"] }, { kind: "component", type: HomeDashboardConfigComponent, selector: "c8y-home-dashboard-config", inputs: ["config"] }, { kind: "component", type: MiscConfigComponent, selector: "c8y-misc-config", inputs: ["config"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CockpitConfigurationComponent, selector: "c8y-cockpit-configuration", ngImport: i0, template: "<c8y-title>{{ 'Application configuration' | translate }}</c8y-title>\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Configuration' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Application configuration' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<div class=\"row\">\n  <div class=\"col-lg-12 col-lg-max\">\n    <form #configForm=\"ngForm\">\n      <div class=\"card card--fullpage\">\n        <div class=\"card-header separator\">\n          <div class=\"card-title\">\n            {{ config.appTitle || ('Cockpit' | translate) }} {{ 'configuration' | translate }}\n          </div>\n        </div>\n\n        <div class=\"inner-scroll\">\n          <div class=\"card-block p-t-0 p-b-0\">\n            <fieldset class=\"row separator-bottom p-t-24 p-b-24\">\n              <div class=\"col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm\">\n                <div\n                  class=\"h4 text-medium d-inline-block m-r-4\"\n                  translate\n                >\n                  Title, icon, and navigator collapse\n                </div>\n              </div>\n              <div class=\"col-xs-12 col-sm-9 col-md-8 p-l-16\">\n                <div class=\"d-flex a-i-start gap-16\">\n                  <div class=\"form-group d-inline-block\">\n                    <label>{{ 'Icon' | translate }}</label>\n                    <c8y-icon-selector-wrapper\n                      [selectedIcon]=\"config?.icon?.class || 'c8y-cockpit'\"\n                      [iconSize]=\"24\"\n                      (onSelect)=\"iconSelectionChange($event)\"\n                    ></c8y-icon-selector-wrapper>\n                  </div>\n                  <div class=\"form-group flex-grow\">\n                    <label\n                      for=\"confAppTitle\"\n                      translate\n                    >\n                      Change application title\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"confAppTitle\"\n                      placeholder=\"{{ 'e.g. Cockpit' | translate }} \"\n                      type=\"text\"\n                      maxlength=\"254\"\n                      [(ngModel)]=\"config.appTitle\"\n                      [ngModelOptions]=\"{ standalone: true }\"\n                    />\n                  </div>\n                </div>\n\n                <c8y-misc-config [config]=\"config\"></c8y-misc-config>\n              </div>\n            </fieldset>\n            <fieldset class=\"row separator-bottom p-t-24 p-b-24\">\n              <div class=\"col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm\">\n                <div class=\"d-inline-flex m-b-16\">\n                  <div\n                    class=\"h4 text-medium m-r-4\"\n                    translate\n                  >\n                    Features\n                  </div>\n                  <button\n                    class=\"btn-help btn-help--sm\"\n                    [attr.aria-label]=\"'Help' | translate\"\n                    popover=\"{{\n                      'Define which are the enabled features in the current application.'\n                        | translate\n                    }}\"\n                    placement=\"right\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  ></button>\n                </div>\n              </div>\n              <div class=\"col-xs-12 col-sm-9 col-md-8\">\n                <c8y-feature-config\n                  [config]=\"config\"\n                  (onUpdate)=\"updateFeatures()\"\n                ></c8y-feature-config>\n              </div>\n            </fieldset>\n            <fieldset class=\"row separator-bottom p-t-24 p-b-24\">\n              <div class=\"col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm\">\n                <div class=\"d-inline-flex m-b-16\">\n                  <div\n                    class=\"h4 text-medium m-r-8\"\n                    translate\n                  >\n                    Top level nodes\n                  </div>\n                  <button\n                    class=\"btn-help btn-help--sm\"\n                    [attr.aria-label]=\"'Help' | translate\"\n                    popover=\"{{\n                      'Select which nodes to display in the top level of the navigator menu. By default, only Groups is shown.'\n                        | translate\n                    }}\"\n                    placement=\"right\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  ></button>\n                </div>\n              </div>\n              <div class=\"col-xs-12 col-sm-10 col-md-10\">\n                <div class=\"row\">\n                  <c8y-root-node-config\n                    [config]=\"config\"\n                    (onUpdate)=\"updateRootNodes()\"\n                    [disabled]=\"rootNodeDisabled\"\n                  ></c8y-root-node-config>\n                </div>\n              </div>\n            </fieldset>\n\n            <fieldset class=\"row p-t-24 p-b-24\">\n              <div class=\"col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm\">\n                <div class=\"d-inline-flex m-b-16\">\n                  <div\n                    class=\"h4 text-medium m-r-8\"\n                    translate\n                  >\n                    Home dashboard\n                  </div>\n                  <button\n                    class=\"btn-help btn-help--sm\"\n                    [attr.aria-label]=\"'Help' | translate\"\n                    popover=\"{{\n                      'The homepage of this application. By default, it is a customizable dashboard displaying the most important alarms and shortcuts to frequently used features.'\n                        | translate\n                    }}\"\n                    placement=\"right\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  ></button>\n                </div>\n              </div>\n              <div class=\"col-xs-12 col-sm-9 col-md-8\">\n                <c8y-home-dashboard-config [config]=\"config\"></c8y-home-dashboard-config>\n              </div>\n            </fieldset>\n          </div>\n        </div>\n        <div class=\"card-footer separator\">\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Save' | translate }}\"\n            type=\"submit\"\n            [disabled]=\"!configForm.form.valid\"\n            (click)=\"save()\"\n            [actionName]=\"'cockpitConfigurationSaved'\"\n            [actionData]=\"{ config: config }\"\n            c8yProductExperience\n          >\n            {{ 'Save' | translate }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i1.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i1.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i1.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: i5$2.IconSelectorWrapperComponent, selector: "c8y-icon-selector-wrapper", inputs: ["canRemoveIcon", "selectedIcon", "iconSize"], outputs: ["onSelect"] }, { kind: "component", type: FeatureConfigComponent, selector: "c8y-feature-config", inputs: ["config"], outputs: ["onUpdate"] }, { kind: "component", type: RootNodeConfigComponent, selector: "c8y-root-node-config", inputs: ["config", "disabled"], outputs: ["onUpdate"] }, { kind: "component", type: HomeDashboardConfigComponent, selector: "c8y-home-dashboard-config", inputs: ["config"] }, { kind: "component", type: MiscConfigComponent, selector: "c8y-misc-config", inputs: ["config"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CockpitConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-cockpit-configuration', template: "<c8y-title>{{ 'Application configuration' | translate }}</c8y-title>\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Configuration' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Application configuration' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<div class=\"row\">\n  <div class=\"col-lg-12 col-lg-max\">\n    <form #configForm=\"ngForm\">\n      <div class=\"card card--fullpage\">\n        <div class=\"card-header separator\">\n          <div class=\"card-title\">\n            {{ config.appTitle || ('Cockpit' | translate) }} {{ 'configuration' | translate }}\n          </div>\n        </div>\n\n        <div class=\"inner-scroll\">\n          <div class=\"card-block p-t-0 p-b-0\">\n            <fieldset class=\"row separator-bottom p-t-24 p-b-24\">\n              <div class=\"col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm\">\n                <div\n                  class=\"h4 text-medium d-inline-block m-r-4\"\n                  translate\n                >\n                  Title, icon, and navigator collapse\n                </div>\n              </div>\n              <div class=\"col-xs-12 col-sm-9 col-md-8 p-l-16\">\n                <div class=\"d-flex a-i-start gap-16\">\n                  <div class=\"form-group d-inline-block\">\n                    <label>{{ 'Icon' | translate }}</label>\n                    <c8y-icon-selector-wrapper\n                      [selectedIcon]=\"config?.icon?.class || 'c8y-cockpit'\"\n                      [iconSize]=\"24\"\n                      (onSelect)=\"iconSelectionChange($event)\"\n                    ></c8y-icon-selector-wrapper>\n                  </div>\n                  <div class=\"form-group flex-grow\">\n                    <label\n                      for=\"confAppTitle\"\n                      translate\n                    >\n                      Change application title\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"confAppTitle\"\n                      placeholder=\"{{ 'e.g. Cockpit' | translate }} \"\n                      type=\"text\"\n                      maxlength=\"254\"\n                      [(ngModel)]=\"config.appTitle\"\n                      [ngModelOptions]=\"{ standalone: true }\"\n                    />\n                  </div>\n                </div>\n\n                <c8y-misc-config [config]=\"config\"></c8y-misc-config>\n              </div>\n            </fieldset>\n            <fieldset class=\"row separator-bottom p-t-24 p-b-24\">\n              <div class=\"col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm\">\n                <div class=\"d-inline-flex m-b-16\">\n                  <div\n                    class=\"h4 text-medium m-r-4\"\n                    translate\n                  >\n                    Features\n                  </div>\n                  <button\n                    class=\"btn-help btn-help--sm\"\n                    [attr.aria-label]=\"'Help' | translate\"\n                    popover=\"{{\n                      'Define which are the enabled features in the current application.'\n                        | translate\n                    }}\"\n                    placement=\"right\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  ></button>\n                </div>\n              </div>\n              <div class=\"col-xs-12 col-sm-9 col-md-8\">\n                <c8y-feature-config\n                  [config]=\"config\"\n                  (onUpdate)=\"updateFeatures()\"\n                ></c8y-feature-config>\n              </div>\n            </fieldset>\n            <fieldset class=\"row separator-bottom p-t-24 p-b-24\">\n              <div class=\"col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm\">\n                <div class=\"d-inline-flex m-b-16\">\n                  <div\n                    class=\"h4 text-medium m-r-8\"\n                    translate\n                  >\n                    Top level nodes\n                  </div>\n                  <button\n                    class=\"btn-help btn-help--sm\"\n                    [attr.aria-label]=\"'Help' | translate\"\n                    popover=\"{{\n                      'Select which nodes to display in the top level of the navigator menu. By default, only Groups is shown.'\n                        | translate\n                    }}\"\n                    placement=\"right\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  ></button>\n                </div>\n              </div>\n              <div class=\"col-xs-12 col-sm-10 col-md-10\">\n                <div class=\"row\">\n                  <c8y-root-node-config\n                    [config]=\"config\"\n                    (onUpdate)=\"updateRootNodes()\"\n                  ></c8y-root-node-config>\n                </div>\n              </div>\n            </fieldset>\n\n            <fieldset class=\"row p-t-24 p-b-24\">\n              <div class=\"col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm\">\n                <div class=\"d-inline-flex m-b-16\">\n                  <div\n                    class=\"h4 text-medium m-r-8\"\n                    translate\n                  >\n                    Home dashboard\n                  </div>\n                  <button\n                    class=\"btn-help btn-help--sm\"\n                    [attr.aria-label]=\"'Help' | translate\"\n                    popover=\"{{\n                      'The homepage of this application. By default, it is a customizable dashboard displaying the most important alarms and shortcuts to frequently used features.'\n                        | translate\n                    }}\"\n                    placement=\"right\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  ></button>\n                </div>\n              </div>\n              <div class=\"col-xs-12 col-sm-9 col-md-8\">\n                <c8y-home-dashboard-config [config]=\"config\"></c8y-home-dashboard-config>\n              </div>\n            </fieldset>\n          </div>\n        </div>\n        <div class=\"card-footer separator\">\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Save' | translate }}\"\n            type=\"submit\"\n            [disabled]=\"!configForm.form.valid\"\n            (click)=\"save()\"\n            [actionName]=\"'cockpitConfigurationSaved'\"\n            [actionData]=\"{ config: config }\"\n            c8yProductExperience\n          >\n            {{ 'Save' | translate }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-cockpit-configuration', template: "<c8y-title>{{ 'Application configuration' | translate }}</c8y-title>\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Configuration' | translate\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    [icon]=\"'c8y-tools'\"\n    [label]=\"'Application configuration' | translate\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<div class=\"row\">\n  <div class=\"col-lg-12 col-lg-max\">\n    <form #configForm=\"ngForm\">\n      <div class=\"card card--fullpage\">\n        <div class=\"card-header separator\">\n          <div class=\"card-title\">\n            {{ config.appTitle || ('Cockpit' | translate) }} {{ 'configuration' | translate }}\n          </div>\n        </div>\n\n        <div class=\"inner-scroll\">\n          <div class=\"card-block p-t-0 p-b-0\">\n            <fieldset class=\"row separator-bottom p-t-24 p-b-24\">\n              <div class=\"col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm\">\n                <div\n                  class=\"h4 text-medium d-inline-block m-r-4\"\n                  translate\n                >\n                  Title, icon, and navigator collapse\n                </div>\n              </div>\n              <div class=\"col-xs-12 col-sm-9 col-md-8 p-l-16\">\n                <div class=\"d-flex a-i-start gap-16\">\n                  <div class=\"form-group d-inline-block\">\n                    <label>{{ 'Icon' | translate }}</label>\n                    <c8y-icon-selector-wrapper\n                      [selectedIcon]=\"config?.icon?.class || 'c8y-cockpit'\"\n                      [iconSize]=\"24\"\n                      (onSelect)=\"iconSelectionChange($event)\"\n                    ></c8y-icon-selector-wrapper>\n                  </div>\n                  <div class=\"form-group flex-grow\">\n                    <label\n                      for=\"confAppTitle\"\n                      translate\n                    >\n                      Change application title\n                    </label>\n                    <input\n                      class=\"form-control\"\n                      id=\"confAppTitle\"\n                      placeholder=\"{{ 'e.g. Cockpit' | translate }} \"\n                      type=\"text\"\n                      maxlength=\"254\"\n                      [(ngModel)]=\"config.appTitle\"\n                      [ngModelOptions]=\"{ standalone: true }\"\n                    />\n                  </div>\n                </div>\n\n                <c8y-misc-config [config]=\"config\"></c8y-misc-config>\n              </div>\n            </fieldset>\n            <fieldset class=\"row separator-bottom p-t-24 p-b-24\">\n              <div class=\"col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm\">\n                <div class=\"d-inline-flex m-b-16\">\n                  <div\n                    class=\"h4 text-medium m-r-4\"\n                    translate\n                  >\n                    Features\n                  </div>\n                  <button\n                    class=\"btn-help btn-help--sm\"\n                    [attr.aria-label]=\"'Help' | translate\"\n                    popover=\"{{\n                      'Define which are the enabled features in the current application.'\n                        | translate\n                    }}\"\n                    placement=\"right\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  ></button>\n                </div>\n              </div>\n              <div class=\"col-xs-12 col-sm-9 col-md-8\">\n                <c8y-feature-config\n                  [config]=\"config\"\n                  (onUpdate)=\"updateFeatures()\"\n                ></c8y-feature-config>\n              </div>\n            </fieldset>\n            <fieldset class=\"row separator-bottom p-t-24 p-b-24\">\n              <div class=\"col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm\">\n                <div class=\"d-inline-flex m-b-16\">\n                  <div\n                    class=\"h4 text-medium m-r-8\"\n                    translate\n                  >\n                    Top level nodes\n                  </div>\n                  <button\n                    class=\"btn-help btn-help--sm\"\n                    [attr.aria-label]=\"'Help' | translate\"\n                    popover=\"{{\n                      'Select which nodes to display in the top level of the navigator menu. By default, only Groups is shown.'\n                        | translate\n                    }}\"\n                    placement=\"right\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  ></button>\n                </div>\n              </div>\n              <div class=\"col-xs-12 col-sm-10 col-md-10\">\n                <div class=\"row\">\n                  <c8y-root-node-config\n                    [config]=\"config\"\n                    (onUpdate)=\"updateRootNodes()\"\n                    [disabled]=\"rootNodeDisabled\"\n                  ></c8y-root-node-config>\n                </div>\n              </div>\n            </fieldset>\n\n            <fieldset class=\"row p-t-24 p-b-24\">\n              <div class=\"col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm\">\n                <div class=\"d-inline-flex m-b-16\">\n                  <div\n                    class=\"h4 text-medium m-r-8\"\n                    translate\n                  >\n                    Home dashboard\n                  </div>\n                  <button\n                    class=\"btn-help btn-help--sm\"\n                    [attr.aria-label]=\"'Help' | translate\"\n                    popover=\"{{\n                      'The homepage of this application. By default, it is a customizable dashboard displaying the most important alarms and shortcuts to frequently used features.'\n                        | translate\n                    }}\"\n                    placement=\"right\"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                  ></button>\n                </div>\n              </div>\n              <div class=\"col-xs-12 col-sm-9 col-md-8\">\n                <c8y-home-dashboard-config [config]=\"config\"></c8y-home-dashboard-config>\n              </div>\n            </fieldset>\n          </div>\n        </div>\n        <div class=\"card-footer separator\">\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Save' | translate }}\"\n            type=\"submit\"\n            [disabled]=\"!configForm.form.valid\"\n            (click)=\"save()\"\n            [actionName]=\"'cockpitConfigurationSaved'\"\n            [actionData]=\"{ config: config }\"\n            c8yProductExperience\n          >\n            {{ 'Save' | translate }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: CockpitConfigService }, { type: i1.AlertService }, { type: i1.AppStateService }] });
 
 class CockpitSetupStep {
@@ -551,7 +561,7 @@ class CockpitSetupStep3Component extends CockpitSetupStep {
         this.cockpitConfigService = cockpitConfigService;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CockpitSetupStep3Component, deps: [{ token: i1.C8yStepper }, { token: i2$3.CdkStep }, { token: i1.SetupComponent }, { token: i1.AppStateService }, { token: i1.AlertService }, { token: i3.ApplicationService }, { token: CockpitConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CockpitSetupStep3Component, selector: "c8y-cockpit-setup-step3", host: { classAttribute: "d-contents" }, usesInheritance: true, ngImport: i0, template: "<form #stepForm=\"ngForm\" name=\"form\" class=\"d-contents\">\n  <div class=\"container-fluid flex-no-shrink fit-w\">\n    <div class=\"row separator-bottom\">\n      <div class=\"col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 p-t-24 p-l-16 p-r-16\">\n        <h3 translate class=\"text-medium l-h-base\" data-cy=\"c8y-cockpit-setup-step3--step3-header-title\">Top level nodes</h3>\n        <p class=\"lead text-normal\" translate>\n          Select which nodes to display in the top level of the navigator menu. By default, only\n          Groups is shown.\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"inner-scroll flex-grow\">\n    <div class=\"container-fluid fit-w p-t-16\">\n      <div class=\"row\">\n        <div class=\"col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2\">\n          <c8y-root-node-config [config]=\"config\"></c8y-root-node-config>\n        </div>\n      </div>\n    </div>\n  </div>\n  <c8y-cockpit-setup-stepper-buttons\n    [index]=\"stepper.selectedIndex\"\n    (onNext)=\"next()\"\n    (onBack)=\"back()\"\n  >\n  </c8y-cockpit-setup-stepper-buttons>\n</form>\n", dependencies: [{ kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: RootNodeConfigComponent, selector: "c8y-root-node-config", inputs: ["config"], outputs: ["onUpdate"] }, { kind: "component", type: CockpitSetupStepperButtonsComponent, selector: "c8y-cockpit-setup-stepper-buttons", inputs: ["index"], outputs: ["onNext", "onBack"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: CockpitSetupStep3Component, selector: "c8y-cockpit-setup-step3", host: { classAttribute: "d-contents" }, usesInheritance: true, ngImport: i0, template: "<form #stepForm=\"ngForm\" name=\"form\" class=\"d-contents\">\n  <div class=\"container-fluid flex-no-shrink fit-w\">\n    <div class=\"row separator-bottom\">\n      <div class=\"col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 p-t-24 p-l-16 p-r-16\">\n        <h3 translate class=\"text-medium l-h-base\" data-cy=\"c8y-cockpit-setup-step3--step3-header-title\">Top level nodes</h3>\n        <p class=\"lead text-normal\" translate>\n          Select which nodes to display in the top level of the navigator menu. By default, only\n          Groups is shown.\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"inner-scroll flex-grow\">\n    <div class=\"container-fluid fit-w p-t-16\">\n      <div class=\"row\">\n        <div class=\"col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2\">\n          <c8y-root-node-config [config]=\"config\"></c8y-root-node-config>\n        </div>\n      </div>\n    </div>\n  </div>\n  <c8y-cockpit-setup-stepper-buttons\n    [index]=\"stepper.selectedIndex\"\n    (onNext)=\"next()\"\n    (onBack)=\"back()\"\n  >\n  </c8y-cockpit-setup-stepper-buttons>\n</form>\n", dependencies: [{ kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: RootNodeConfigComponent, selector: "c8y-root-node-config", inputs: ["config", "disabled"], outputs: ["onUpdate"] }, { kind: "component", type: CockpitSetupStepperButtonsComponent, selector: "c8y-cockpit-setup-stepper-buttons", inputs: ["index"], outputs: ["onNext", "onBack"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CockpitSetupStep3Component, decorators: [{
             type: Component,