@c8y/ngx-components 1023.14.57 → 1023.14.68

package/fesm2022/c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-BovfVT29.mjs

@@ -0,0 +1,67 @@
+import * as i0 from '@angular/core';
+import { Component } from '@angular/core';
+import { DASHBOARD_THEME_CLASSES, WIDGET_HEADER_CLASSES, ContextDashboardService, DashboardDetailService, AppearanceSettingsComponent } from './c8y-ngx-components-context-dashboard.mjs';
+import * as i5 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@c8y/ngx-components';
+import { CoreModule, C8yTranslatePipe } from '@c8y/ngx-components';
+import { PopoverDirective } from 'ngx-bootstrap/popover';
+
+class DashboardAppearanceSettingsComponent {
+    constructor(contextDashboardService, dashboardDetailService) {
+        this.contextDashboardService = contextDashboardService;
+        this.dashboardDetailService = dashboardDetailService;
+        this.styling = {
+            themeClass: 'dashboard-theme-light',
+            headerClass: 'panel-title-regular'
+        };
+        this.DEFAULT_DASHBOARD_MARGIN = 12;
+    }
+    ngOnInit() {
+        this.dashboard = this.dashboardDetailService.details.dashboard;
+        this.appearanceSettingsForm = this.dashboardDetailService.appearanceSettingsForm;
+        if (this.dashboard) {
+            this.setDashboardStyle();
+        }
+    }
+    changeThemeClass(themeClass) {
+        this.styling.themeClass = themeClass;
+        this.appearanceSettingsForm.get('classes').setValue({ [this.styling.themeClass]: true });
+        this.dashboardDetailService.previewChangedFn({ classes: { [this.styling.themeClass]: true } });
+        this.appearanceSettingsForm.markAsDirty();
+    }
+    changeHeaderClass(headerClass) {
+        this.styling.headerClass = headerClass;
+        this.appearanceSettingsForm.get('widgetClasses').setValue({ [this.styling.headerClass]: true });
+        this.dashboardDetailService.previewChangedFn({
+            widgetClasses: { [this.styling.headerClass]: true }
+        });
+        this.appearanceSettingsForm.markAsDirty();
+    }
+    setDashboardStyle() {
+        const allClasses = {
+            ...this.appearanceSettingsForm.get('classes').value,
+            ...this.appearanceSettingsForm.get('widgetClasses').value
+        };
+        const styles = Object.keys(allClasses).map(c => c.split('-').pop());
+        styles.forEach(styleName => {
+            this.styling.themeClass = this.contextDashboardService.getStyling(DASHBOARD_THEME_CLASSES, styleName, this.styling.themeClass);
+            this.styling.headerClass = this.contextDashboardService.getStyling(WIDGET_HEADER_CLASSES, styleName, this.styling.headerClass);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardAppearanceSettingsComponent, deps: [{ token: ContextDashboardService }, { token: DashboardDetailService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DashboardAppearanceSettingsComponent, isStandalone: true, selector: "c8y-dashboard-appearance-settings", ngImport: i0, template: "<div [formGroup]=\"appearanceSettingsForm\">\n  <c8y-appearance-settings\n    [themeClass]=\"styling.themeClass\"\n    [headerClass]=\"styling.headerClass\"\n    (themeClassChange)=\"changeThemeClass($event)\"\n    (headerClassChange)=\"changeHeaderClass($event)\"\n    [dashboardSettings]=\"true\"\n    [columns]=\"3\"\n  >\n    <div class=\"col-md-4\">\n      <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n        <legend translate>Misc</legend>\n        <c8y-form-group>\n          <label for=\"margin\">{{ 'Widget margin' | translate }}</label>\n          <div class=\"input-group\">\n            <input\n              class=\"form-control\"\n              id=\"margin\"\n              placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\n              name=\"margin\"\n              type=\"number\"\n              formControlName=\"widgetMargin\"\n            />\n            <span class=\"input-group-addon\">px</span>\n          </div>\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label>\n            {{ 'Translate if possible' | translate }}\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                'Translates dashboard or widget titles if they are written in English and their translations are available in the loaded standard or custom translation resources.'\n                  | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              type=\"button\"\n            ></button>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            title=\"{{ 'Translate dashboard title if possible' | translate }}\"\n          >\n            <input\n              name=\"translateDashboardTitle\"\n              type=\"checkbox\"\n              formControlName=\"translateDashboardTitle\"\n            />\n            <span></span>\n            <span>{{ 'Dashboard title' | translate }}</span>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            title=\"{{ 'Translate widget titles if possible' | translate }}\"\n          >\n            <input\n              name=\"translateWidgetTitle\"\n              type=\"checkbox\"\n              formControlName=\"translateWidgetTitle\"\n            />\n            <span></span>\n            <span>{{ 'Widget titles' | translate }}</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n    </div>\n  </c8y-appearance-settings>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "dashboardSettings", "possibleStylingTheme", "possibleStylingHeader", "columns"], outputs: ["themeClassChange", "headerClassChange", "onChange"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardAppearanceSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-dashboard-appearance-settings', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        CoreModule,
+                        AppearanceSettingsComponent,
+                        C8yTranslatePipe,
+                        PopoverDirective
+                    ], template: "<div [formGroup]=\"appearanceSettingsForm\">\n  <c8y-appearance-settings\n    [themeClass]=\"styling.themeClass\"\n    [headerClass]=\"styling.headerClass\"\n    (themeClassChange)=\"changeThemeClass($event)\"\n    (headerClassChange)=\"changeHeaderClass($event)\"\n    [dashboardSettings]=\"true\"\n    [columns]=\"3\"\n  >\n    <div class=\"col-md-4\">\n      <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n        <legend translate>Misc</legend>\n        <c8y-form-group>\n          <label for=\"margin\">{{ 'Widget margin' | translate }}</label>\n          <div class=\"input-group\">\n            <input\n              class=\"form-control\"\n              id=\"margin\"\n              placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\n              name=\"margin\"\n              type=\"number\"\n              formControlName=\"widgetMargin\"\n            />\n            <span class=\"input-group-addon\">px</span>\n          </div>\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label>\n            {{ 'Translate if possible' | translate }}\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                'Translates dashboard or widget titles if they are written in English and their translations are available in the loaded standard or custom translation resources.'\n                  | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              type=\"button\"\n            ></button>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            title=\"{{ 'Translate dashboard title if possible' | translate }}\"\n          >\n            <input\n              name=\"translateDashboardTitle\"\n              type=\"checkbox\"\n              formControlName=\"translateDashboardTitle\"\n            />\n            <span></span>\n            <span>{{ 'Dashboard title' | translate }}</span>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            title=\"{{ 'Translate widget titles if possible' | translate }}\"\n          >\n            <input\n              name=\"translateWidgetTitle\"\n              type=\"checkbox\"\n              formControlName=\"translateWidgetTitle\"\n            />\n            <span></span>\n            <span>{{ 'Widget titles' | translate }}</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n    </div>\n  </c8y-appearance-settings>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: ContextDashboardService }, { type: DashboardDetailService }] });
+
+export { DashboardAppearanceSettingsComponent };
+//# sourceMappingURL=c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-BovfVT29.mjs.map

package/fesm2022/c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-BovfVT29.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-BovfVT29.mjs","sources":["../../context-dashboard/dashboard-settings/dashboard-appearance-settings.component.ts","../../context-dashboard/dashboard-settings/dashboard-appearance-settings.component.html"],"sourcesContent":["import { Component, OnInit } from '@angular/core';\nimport {\n  ContextDashboard,\n  DASHBOARD_THEME_CLASSES,\n  WIDGET_HEADER_CLASSES\n} from '../context-dashboard.model';\nimport { ContextDashboardService } from '../context-dashboard.service';\nimport { DashboardDetailService } from '../dashboard-detail.service';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { C8yTranslatePipe, CoreModule } from '@c8y/ngx-components';\nimport { AppearanceSettingsComponent } from '../widget-config/appearance-settings.component';\nimport { PopoverDirective } from 'ngx-bootstrap/popover';\n\n@Component({\n  selector: 'c8y-dashboard-appearance-settings',\n  templateUrl: './dashboard-appearance-settings.component.html',\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    CoreModule,\n    AppearanceSettingsComponent,\n    C8yTranslatePipe,\n    PopoverDirective\n  ]\n})\nexport class DashboardAppearanceSettingsComponent implements OnInit {\n  dashboard: ContextDashboard;\n  appearanceSettingsForm: DashboardDetailService['appearanceSettingsForm'];\n  styling = {\n    themeClass: 'dashboard-theme-light',\n    headerClass: 'panel-title-regular'\n  };\n\n  readonly DEFAULT_DASHBOARD_MARGIN = 12;\n\n  constructor(\n    private contextDashboardService: ContextDashboardService,\n    private dashboardDetailService: DashboardDetailService\n  ) {}\n\n  ngOnInit() {\n    this.dashboard = this.dashboardDetailService.details.dashboard;\n    this.appearanceSettingsForm = this.dashboardDetailService.appearanceSettingsForm;\n    if (this.dashboard) {\n      this.setDashboardStyle();\n    }\n  }\n\n  changeThemeClass(themeClass: string) {\n    this.styling.themeClass = themeClass;\n    this.appearanceSettingsForm.get('classes').setValue({ [this.styling.themeClass]: true });\n    this.dashboardDetailService.previewChangedFn({ classes: { [this.styling.themeClass]: true } });\n    this.appearanceSettingsForm.markAsDirty();\n  }\n\n  changeHeaderClass(headerClass: string) {\n    this.styling.headerClass = headerClass;\n    this.appearanceSettingsForm.get('widgetClasses').setValue({ [this.styling.headerClass]: true });\n    this.dashboardDetailService.previewChangedFn({\n      widgetClasses: { [this.styling.headerClass]: true }\n    });\n    this.appearanceSettingsForm.markAsDirty();\n  }\n\n  private setDashboardStyle() {\n    const allClasses = {\n      ...this.appearanceSettingsForm.get('classes').value,\n      ...this.appearanceSettingsForm.get('widgetClasses').value\n    };\n\n    const styles = Object.keys(allClasses).map(c => c.split('-').pop());\n    styles.forEach(styleName => {\n      this.styling.themeClass = this.contextDashboardService.getStyling(\n        DASHBOARD_THEME_CLASSES,\n        styleName,\n        this.styling.themeClass\n      );\n      this.styling.headerClass = this.contextDashboardService.getStyling(\n        WIDGET_HEADER_CLASSES,\n        styleName,\n        this.styling.headerClass\n      );\n    });\n  }\n}\n","<div [formGroup]=\"appearanceSettingsForm\">\n  <c8y-appearance-settings\n    [themeClass]=\"styling.themeClass\"\n    [headerClass]=\"styling.headerClass\"\n    (themeClassChange)=\"changeThemeClass($event)\"\n    (headerClassChange)=\"changeHeaderClass($event)\"\n    [dashboardSettings]=\"true\"\n    [columns]=\"3\"\n  >\n    <div class=\"col-md-4\">\n      <fieldset class=\"c8y-fieldset c8y-fieldset--lg\">\n        <legend translate>Misc</legend>\n        <c8y-form-group>\n          <label for=\"margin\">{{ 'Widget margin' | translate }}</label>\n          <div class=\"input-group\">\n            <input\n              class=\"form-control\"\n              id=\"margin\"\n              placeholder=\"{{ DEFAULT_DASHBOARD_MARGIN }}\"\n              name=\"margin\"\n              type=\"number\"\n              formControlName=\"widgetMargin\"\n            />\n            <span class=\"input-group-addon\">px</span>\n          </div>\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label>\n            {{ 'Translate if possible' | translate }}\n            <button\n              class=\"btn-help btn-help--sm\"\n              [attr.aria-label]=\"'Help' | translate\"\n              popover=\"{{\n                'Translates dashboard or widget titles if they are written in English and their translations are available in the loaded standard or custom translation resources.'\n                  | translate\n              }}\"\n              placement=\"right\"\n              triggers=\"focus\"\n              type=\"button\"\n            ></button>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            title=\"{{ 'Translate dashboard title if possible' | translate }}\"\n          >\n            <input\n              name=\"translateDashboardTitle\"\n              type=\"checkbox\"\n              formControlName=\"translateDashboardTitle\"\n            />\n            <span></span>\n            <span>{{ 'Dashboard title' | translate }}</span>\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            title=\"{{ 'Translate widget titles if possible' | translate }}\"\n          >\n            <input\n              name=\"translateWidgetTitle\"\n              type=\"checkbox\"\n              formControlName=\"translateWidgetTitle\"\n            />\n            <span></span>\n            <span>{{ 'Widget titles' | translate }}</span>\n          </label>\n        </c8y-form-group>\n      </fieldset>\n    </div>\n  </c8y-appearance-settings>\n</div>\n"],"names":["i1.ContextDashboardService","i2.DashboardDetailService","i4"],"mappings":"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"}

package/fesm2022/c8y-ngx-components-context-dashboard.mjs

@@ -8,7 +8,7 @@ import { of, Subject, from, combineLatest, map as map$1, BehaviorSubject, tap as
 import { gettext } from '@c8y/ngx-components/gettext';
 import { __decorate, __metadata } from 'tslib';
 import * as i3 from '@angular/common';
-import { NgIf, NgTemplateOutlet, CommonModule, NgClass, AsyncPipe, NgForOf, NgFor } from '@angular/common';
+import { NgTemplateOutlet, CommonModule, NgClass, AsyncPipe, NgIf, NgForOf, NgFor } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i6 from '@c8y/ngx-components/context-dashboard-state';
 import * as i2$1 from '@ngx-translate/core';
@@ -640,6 +640,9 @@ class ContextDashboardService {
         this.navigator.add(node);
     }
     getContextForGS(mo) {
+        if (!mo) {
+            return null;
+        }
         if (this.groupService.isDevice(mo)) {
             return PRODUCT_EXPERIENCE.DASHBOARD.CONTEXT.DEVICE;
         }
@@ -1254,7 +1257,8 @@ class DashboardDetailComponent {
         };
     }
     async cancel() {
-        if (!this.isEdit && !this.isReport) {
+        const isUnsavedDefaultDashboard = this.isNamedDashboard && !this.mo.id;
+        if (!this.isEdit && !this.isReport && !isUnsavedDefaultDashboard) {
             // dashboard creation in it's own tab- confirm and cleanup triggered in canDeactivate during routing
             this.tabsService.items$.pipe(first()).subscribe((tabs) => {
                 const tab = tabs.find(t => t.featureId !== newDashboardTab.featureId);
@@ -1344,11 +1348,17 @@ class DashboardDetailComponent {
         }
     }
     async createNewDashboard() {
+        const isUnsavedDefaultDashboard = this.isNamedDashboard && !this.mo.id;
         const mo = await this.contextDashboardService.create(this.dashboard, this.currentContext, this.isNamedDashboard ? this.dashboard.name : undefined);
         await this.onCreateGSEvent(mo);
         await this.clearNamedOutletPath();
         this.cleanupAfterDetailsClose();
-        await this.contextDashboardService.navigateToDashboard(mo, true);
+        if (!isUnsavedDefaultDashboard) {
+            await this.contextDashboardService.navigateToDashboard(mo, true);
+        }
+        else {
+            this.dashboardSaved.emit(mo);
+        }
     }
     async onCreateGSEvent(mo) {
         const parentName = await this.convertStringToHash(this.context?.name);
@@ -1524,7 +1534,7 @@ class DashboardDetailComponent {
         this.tabs = this.dashboardDetailService.getTabs();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardDetailComponent, deps: [{ token: ContextDashboardService }, { token: i2$1.TranslateService }, { token: i2.ContextRouteService }, { token: i1.ActivatedRoute }, { token: i2.TabsService }, { token: i1.Router }, { token: i1$1.InventoryService }, { token: i1.ActivatedRoute }, { token: DashboardDetailService }, { token: i2.AppStateService }, { token: i2.GroupService }, { token: i2.ModalService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DashboardDetailComponent, isStandalone: true, selector: "c8y-dashboard-detail", inputs: { isReport: "isReport", deviceType: "deviceType", context: "context", mo: "mo", dashboard: "dashboard", isNamedDashboard: "isNamedDashboard", hideAvailability: "hideAvailability" }, outputs: { dashboardSaved: "dashboardSaved", previewChanged: "previewChanged" }, providers: [DashboardDetailService], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"collapse c8y-top-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <span class=\"h4\">{{ 'Dashboard settings' | translate }}</span>\n  </div>\n\n  <div\n    class=\"d-flex\"\n    *ngIf=\"!isCollapsed\"\n  >\n    <c8y-tabs-outlet\n      class=\"c8y-top-drawer--tabs\"\n      [tabs]=\"tabs\"\n      [outletName]=\"TABS_OUTLET_NAME\"\n      [orientation]=\"'vertical'\"\n      [openFirstTab]=\"true\"\n    ></c8y-tabs-outlet>\n\n    <div\n      class=\"inner-scroll c8y-top-drawer__tabs-container flex-grow p-l-24 p-r-lg-32 p-r-xs-24 p-r-sm-24\"\n    >\n      <router-outlet name=\"dashboard-details\"></router-outlet>\n    </div>\n  </div>\n\n  <div class=\"c8y-top-drawer--footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      (click)=\"save()\"\n      [disabled]=\"((dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit) || dashboardDetailService.saveButtonDisabled\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DashboardDetailComponent, isStandalone: true, selector: "c8y-dashboard-detail", inputs: { isReport: "isReport", deviceType: "deviceType", context: "context", mo: "mo", dashboard: "dashboard", isNamedDashboard: "isNamedDashboard", hideAvailability: "hideAvailability" }, outputs: { dashboardSaved: "dashboardSaved", previewChanged: "previewChanged" }, providers: [DashboardDetailService], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"collapse c8y-top-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <span class=\"h4\">{{ 'Dashboard settings' | translate }}</span>\n  </div>\n\n  @if (!isCollapsed) {\n    <div class=\"d-flex\">\n      <c8y-tabs-outlet\n        class=\"c8y-top-drawer--tabs\"\n        [tabs]=\"tabs\"\n        [outletName]=\"TABS_OUTLET_NAME\"\n        [orientation]=\"'vertical'\"\n        [openFirstTab]=\"true\"\n      ></c8y-tabs-outlet>\n\n      <div\n        class=\"inner-scroll c8y-top-drawer__tabs-container flex-grow p-l-24 p-r-lg-32 p-r-xs-24 p-r-sm-24\"\n      >\n        <router-outlet name=\"dashboard-details\"></router-outlet>\n      </div>\n    </div>\n  }\n\n  <div class=\"c8y-top-drawer--footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      (click)=\"save()\"\n      [disabled]=\"\n        ((dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit) ||\n        dashboardDetailService.saveButtonDisabled\n      \"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: TabsOutletComponent, selector: "c8y-tabs-outlet,c8y-ui-tabs", inputs: ["tabs", "orientation", "navigatorOpen", "outletName", "context", "openFirstTab", "hasHeader"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 __decorate([
     memoize(),
@@ -1534,7 +1544,7 @@ __decorate([
 ], DashboardDetailComponent.prototype, "convertStringToHash", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-dashboard-detail', providers: [DashboardDetailService], imports: [CollapseDirective, NgIf, TabsOutletComponent, RouterOutlet, C8yTranslatePipe], template: "<div\n  class=\"collapse c8y-top-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <span class=\"h4\">{{ 'Dashboard settings' | translate }}</span>\n  </div>\n\n  <div\n    class=\"d-flex\"\n    *ngIf=\"!isCollapsed\"\n  >\n    <c8y-tabs-outlet\n      class=\"c8y-top-drawer--tabs\"\n      [tabs]=\"tabs\"\n      [outletName]=\"TABS_OUTLET_NAME\"\n      [orientation]=\"'vertical'\"\n      [openFirstTab]=\"true\"\n    ></c8y-tabs-outlet>\n\n    <div\n      class=\"inner-scroll c8y-top-drawer__tabs-container flex-grow p-l-24 p-r-lg-32 p-r-xs-24 p-r-sm-24\"\n    >\n      <router-outlet name=\"dashboard-details\"></router-outlet>\n    </div>\n  </div>\n\n  <div class=\"c8y-top-drawer--footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      (click)=\"save()\"\n      [disabled]=\"((dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit) || dashboardDetailService.saveButtonDisabled\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'c8y-dashboard-detail', providers: [DashboardDetailService], imports: [CollapseDirective, TabsOutletComponent, RouterOutlet, C8yTranslatePipe], template: "<div\n  class=\"collapse c8y-top-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n>\n  <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n    <span class=\"h4\">{{ 'Dashboard settings' | translate }}</span>\n  </div>\n\n  @if (!isCollapsed) {\n    <div class=\"d-flex\">\n      <c8y-tabs-outlet\n        class=\"c8y-top-drawer--tabs\"\n        [tabs]=\"tabs\"\n        [outletName]=\"TABS_OUTLET_NAME\"\n        [orientation]=\"'vertical'\"\n        [openFirstTab]=\"true\"\n      ></c8y-tabs-outlet>\n\n      <div\n        class=\"inner-scroll c8y-top-drawer__tabs-container flex-grow p-l-24 p-r-lg-32 p-r-xs-24 p-r-sm-24\"\n      >\n        <router-outlet name=\"dashboard-details\"></router-outlet>\n      </div>\n    </div>\n  }\n\n  <div class=\"c8y-top-drawer--footer\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--cancel-dashboard\"\n      (click)=\"cancel()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"button\"\n      data-cy=\"dashboard-detail--save-dashboard\"\n      (click)=\"save()\"\n      [disabled]=\"\n        ((dashboardDetailsForm?.invalid || dashboardDetailsForm?.pristine) && this.isEdit) ||\n        dashboardDetailService.saveButtonDisabled\n      \"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: ContextDashboardService }, { type: i2$1.TranslateService }, { type: i2.ContextRouteService }, { type: i1.ActivatedRoute }, { type: i2.TabsService }, { type: i1.Router }, { type: i1$1.InventoryService }, { type: i1.ActivatedRoute }, { type: DashboardDetailService }, { type: i2.AppStateService }, { type: i2.GroupService }, { type: i2.ModalService }, { type: i2.GainsightService }], propDecorators: { isReport: [{
                 type: Input
             }], deviceType: [{
@@ -3697,7 +3707,7 @@ class ContextDashboardModule {
                 },
                 {
                     path: DashboardDetailsTabId.APPEARANCE,
-                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-DM3hASUP.mjs').then(m => m.DashboardAppearanceSettingsComponent),
+                    loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-BovfVT29.mjs').then(m => m.DashboardAppearanceSettingsComponent),
                     outlet: DASHBOARD_DETAILS_OUTLET,
                     context: ViewContext.Dashboard
                 },
@@ -3770,7 +3780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             },
                             {
                                 path: DashboardDetailsTabId.APPEARANCE,
-                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-DM3hASUP.mjs').then(m => m.DashboardAppearanceSettingsComponent),
+                                loadComponent: () => import('./c8y-ngx-components-context-dashboard-dashboard-appearance-settings.component-BovfVT29.mjs').then(m => m.DashboardAppearanceSettingsComponent),
                                 outlet: DASHBOARD_DETAILS_OUTLET,
                                 context: ViewContext.Dashboard
                             },