@valtimo/dashboard-management 10.8.0 → 11.1.0

package/fesm2022/valtimo-dashboard-management.mjs

@@ -0,0 +1,969 @@
+import * as i2$2 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, ViewContainerRef, Component, ViewChild, Input, Output, ViewEncapsulation, Inject, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/forms';
+import { Validators, ReactiveFormsModule } from '@angular/forms';
+import * as i2$1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i4 from '@valtimo/components';
+import { CARBON_CONSTANTS, ViewType, ListModule, SpinnerModule, RenderInPageHeaderDirectiveModule, ConfirmationModalModule, CarbonListModule } from '@valtimo/components';
+import * as i3 from 'carbon-components-angular';
+import { NotificationService, ButtonModule, DropdownModule, InputModule, ModalModule, NotificationModule, IconModule } from 'carbon-components-angular';
+import { ArrowDown16, ArrowUp16, Edit16 } from '@carbon/icons';
+import { take, tap, BehaviorSubject, switchMap, catchError, of, Subscription, combineLatest, filter, map, finalize } from 'rxjs';
+import * as i1 from '@angular/common/http';
+import * as i2 from '@valtimo/config';
+import { ROLE_ADMIN } from '@valtimo/config';
+import * as i5$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i5 from '@valtimo/dashboard';
+import { WidgetTranslatePipeModule } from '@valtimo/dashboard';
+import { tap as tap$1 } from 'rxjs/operators';
+import { AuthGuardService } from '@valtimo/security';
+
+class DashboardManagementService {
+    loadData() {
+        this.http
+            .get(this.valtimoEndpointUri)
+            .pipe(take(1), tap(() => {
+            this.dashboards$.next({ items: null, loading: true });
+        }))
+            .subscribe({
+            next: (items) => {
+                this.dashboards$.next({ items, loading: false });
+            },
+            error: error => {
+                console.error(error);
+            },
+        });
+    }
+    constructor(http, configService) {
+        this.http = http;
+        this.configService = configService;
+        this.dashboards$ = new BehaviorSubject({
+            items: null,
+            loading: true,
+        });
+        this.valtimoEndpointUri = `${this.configService.config.valtimoApi.endpointUri}management/v1/dashboard`;
+    }
+    createDashboard(dashboard) {
+        return this.http.post(this.valtimoEndpointUri, dashboard);
+    }
+    updateDashboards(dashboards) {
+        return this.http.put(this.valtimoEndpointUri, dashboards);
+    }
+    updateDashboard(dashboard) {
+        return this.http.put(`${this.valtimoEndpointUri}/${dashboard.key}`, dashboard);
+    }
+    deleteDashboard(dashboardKey) {
+        return this.http.delete(`${this.valtimoEndpointUri}/${dashboardKey}`);
+    }
+    dispatchAction(actionResult) {
+        actionResult
+            .pipe(switchMap(() => this.getDashboards()), tap(() => {
+            this.dashboards$.next({ items: null, loading: true });
+        }), take(1), catchError(error => of(error)))
+            .subscribe({
+            next: (items) => this.dashboards$.next({ items, loading: false }),
+            error: error => {
+                console.error(error);
+            },
+        });
+    }
+    getDashboard(dashboardKey) {
+        return this.http.get(`${this.valtimoEndpointUri}/${dashboardKey}`);
+    }
+    getDashboardWidgetConfiguration(dashboardKey) {
+        return this.http.get(`${this.valtimoEndpointUri}/${dashboardKey}/widget-configuration`);
+    }
+    createDashboardWidgetConfiguration(dashboardKey, widgetConfiguration) {
+        return this.http.post(`${this.valtimoEndpointUri}/${dashboardKey}/widget-configuration`, widgetConfiguration);
+    }
+    updateDashboardWidgetConfigurations(dashboardKey, widgetConfigurations) {
+        return this.http.put(`${this.valtimoEndpointUri}/${dashboardKey}/widget-configuration`, widgetConfigurations);
+    }
+    updateDashboardWidgetConfiguration(dashboardKey, widgetConfiguration) {
+        return this.http.put(`${this.valtimoEndpointUri}/${dashboardKey}/widget-configuration/${widgetConfiguration.key}`, widgetConfiguration);
+    }
+    deleteDashboardWidgetConfiguration(dashboardKey, widgetKey) {
+        return this.http.delete(`${this.valtimoEndpointUri}/${dashboardKey}/widget-configuration/${widgetKey}`);
+    }
+    getDataSources() {
+        return this.http.get(`${this.valtimoEndpointUri}/widget-data-sources`);
+    }
+    getDashboards() {
+        return this.http.get(this.valtimoEndpointUri);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardManagementService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardManagementService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardManagementService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2.ConfigService }]; } });
+
+/*
+ * Copyright 2015-2023 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetConfigurationContainerComponent {
+    set dataSourceKey(value) {
+        this._dataSourceKey$.next(value);
+    }
+    set displayTypeKey(value) {
+        this._displayTypeKey$.next(value);
+    }
+    set disabled(disabledValue) {
+        this._disabled$.next(disabledValue);
+    }
+    set prefillConfiguration(prefillConfigurationValue) {
+        this._prefillConfiguration$.next(prefillConfigurationValue);
+    }
+    constructor(widgetService) {
+        this.widgetService = widgetService;
+        this.configurationEvent = new EventEmitter();
+        this._subscriptions = new Subscription();
+        this._componentRef$ = new BehaviorSubject(undefined);
+        this._dataSourceKey$ = new BehaviorSubject('');
+        this._displayTypeKey$ = new BehaviorSubject('');
+        this._disabled$ = new BehaviorSubject(false);
+        this._prefillConfiguration$ = new BehaviorSubject(null);
+    }
+    ngOnInit() {
+        this.openConfigurationComponentSubscription();
+        this.openComponentInstanceSubscription();
+        this.openDisabledSubscription();
+        this.openPrefillConfigurationSubscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    openConfigurationComponentSubscription() {
+        this._subscriptions.add(combineLatest([
+            this._displayTypeKey$,
+            this._dataSourceKey$,
+            this.widgetService.supportedDisplayTypes$,
+            this.widgetService.supportedDataSources$,
+        ])
+            .pipe(tap$1(([displayTypeKey, dataSourceKey, supportedDisplayTypes, supportedDataSources]) => {
+            let configurationComponent;
+            this._dynamicContainer.clear();
+            const displayTypeSpecification = displayTypeKey &&
+                supportedDisplayTypes.find(type => type.displayTypeKey === displayTypeKey);
+            const dataSourceSpecification = dataSourceKey &&
+                supportedDataSources.find(source => source.dataSourceKey === dataSourceKey);
+            if (displayTypeSpecification && displayTypeSpecification.configurationComponent) {
+                configurationComponent = displayTypeSpecification.configurationComponent;
+            }
+            else if (dataSourceSpecification && dataSourceSpecification.configurationComponent) {
+                configurationComponent = dataSourceSpecification.configurationComponent;
+            }
+            if (configurationComponent) {
+                const componentRef = this._dynamicContainer.createComponent(configurationComponent);
+                this.configurationEvent.emit({ valid: false, data: {} });
+                this._componentRef$.next(componentRef);
+            }
+            else {
+                this.configurationEvent.emit({ valid: true, data: {} });
+            }
+        }))
+            .subscribe());
+    }
+    openComponentInstanceSubscription() {
+        this._subscriptions.add(combineLatest([this._componentRef$, this._dataSourceKey$, this._displayTypeKey$]).subscribe(([ref, dataSourceKey, displayTypeKey]) => {
+            const instance = ref?.instance;
+            this._configurationSubscription?.unsubscribe();
+            if (instance) {
+                if (displayTypeKey) {
+                    instance.displayTypeKey = displayTypeKey;
+                }
+                else if (dataSourceKey) {
+                    instance.dataSourceKey = dataSourceKey;
+                }
+                this._configurationSubscription = instance.configurationEvent.subscribe(configuration => {
+                    this.configurationEvent.emit(configuration);
+                });
+            }
+        }));
+    }
+    openDisabledSubscription() {
+        this._subscriptions.add(combineLatest([this._componentRef$, this._disabled$]).subscribe(([ref, disabled]) => {
+            const instance = ref?.instance;
+            if (instance) {
+                instance.disabled = disabled;
+            }
+        }));
+    }
+    openPrefillConfigurationSubscription() {
+        this._subscriptions.add(combineLatest([this._componentRef$, this._prefillConfiguration$]).subscribe(([ref, prefillConfiguration]) => {
+            const instance = ref?.instance;
+            if (instance && prefillConfiguration) {
+                instance.prefillConfiguration = prefillConfiguration;
+            }
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetConfigurationContainerComponent, deps: [{ token: i5.WidgetService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WidgetConfigurationContainerComponent, selector: "valtimo-widget-configuration-container", inputs: { dataSourceKey: "dataSourceKey", displayTypeKey: "displayTypeKey", disabled: "disabled", prefillConfiguration: "prefillConfiguration" }, outputs: { configurationEvent: "configurationEvent" }, viewQueries: [{ propertyName: "_dynamicContainer", first: true, predicate: ["widgetConfigurationComponent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-template #widgetConfigurationComponent></ng-template>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetConfigurationContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-configuration-container', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-template #widgetConfigurationComponent></ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i5.WidgetService }]; }, propDecorators: { _dynamicContainer: [{
+                type: ViewChild,
+                args: ['widgetConfigurationComponent', { static: true, read: ViewContainerRef }]
+            }], dataSourceKey: [{
+                type: Input
+            }], displayTypeKey: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], prefillConfiguration: [{
+                type: Input
+            }], configurationEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2023 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetModalComponent {
+    set editWidgetConfiguration(configuration) {
+        if (configuration) {
+            this.title.setValue(configuration.title);
+            this.dataSourceSelected({ item: { key: configuration.dataSourceKey } });
+            this.displayTypeSelected({ item: { key: configuration.displayType } });
+            this.dataSourcePrefillConfig$.next(configuration.dataSourceProperties);
+            this.displayTypePrefillConfig$.next(configuration.displayTypeProperties);
+        }
+        else {
+            this.dataSourcePrefillConfig$.next(null);
+            this.displayTypePrefillConfig$.next(null);
+        }
+    }
+    get title() {
+        return this.form.get('title');
+    }
+    get key() {
+        return this.form.get('key');
+    }
+    get dataSource() {
+        return this.form.get('dataSource');
+    }
+    get displayType() {
+        return this.form.get('displayType');
+    }
+    constructor(document, fb, translateService, notificationService, dashboardManagementService, widgetService, widgetTranslationService) {
+        this.document = document;
+        this.fb = fb;
+        this.translateService = translateService;
+        this.notificationService = notificationService;
+        this.dashboardManagementService = dashboardManagementService;
+        this.widgetService = widgetService;
+        this.widgetTranslationService = widgetTranslationService;
+        this.saveEvent = new EventEmitter();
+        this.form = this.fb.group({
+            title: this.fb.control('', [Validators.required]),
+            dataSource: this.fb.control(null, [Validators.required]),
+            displayType: this.fb.control(null, [Validators.required]),
+        });
+        this.open$ = new BehaviorSubject(false);
+        this.selectedDataSourceKey$ = new BehaviorSubject('');
+        this.selectedDisplayTypeKey$ = new BehaviorSubject('');
+        this.dataSourceItems$ = combineLatest([
+            this.dashboardManagementService.getDataSources(),
+            this.selectedDataSourceKey$,
+            this.widgetService.supportedDataSources$,
+            this.translateService.stream('key'),
+        ]).pipe(filter(([dataSources]) => !!dataSources), tap(([dataSources, selectedDataSourceKey]) => {
+            if (selectedDataSourceKey) {
+                this.setCompatibleDisplayTypes(dataSources, selectedDataSourceKey);
+            }
+            else {
+                this.resetCompatibleDisplayTypes();
+            }
+        }), map(([dataSources, selectedDataSourceKey, supportedDataSources]) => dataSources
+            .filter(dataSource => supportedDataSources.find(supportedDataSource => supportedDataSource.dataSourceKey === dataSource.key))
+            .map(dataSource => ({
+            content: this.widgetTranslationService.instant('title', dataSource.key),
+            selected: selectedDataSourceKey === dataSource.key,
+            key: dataSource.key,
+        }))));
+        this.dataSourcePrefillConfig$ = new BehaviorSubject(null);
+        this.displayTypePrefillConfig$ = new BehaviorSubject(null);
+        this._compatibleDisplayTypes$ = new BehaviorSubject([]);
+        this.displayTypeItems$ = combineLatest([
+            this._compatibleDisplayTypes$,
+            this.selectedDisplayTypeKey$,
+            this.translateService.stream('key'),
+        ]).pipe(map(([compatibleDisplayTypes, selectedDisplayTypeKey]) => compatibleDisplayTypes.map(displayType => ({
+            content: this.widgetTranslationService.instant('title', displayType.displayTypeKey),
+            selected: displayType.displayTypeKey === selectedDisplayTypeKey,
+            key: displayType.displayTypeKey,
+        }))));
+        this.displayTypeDropdownDisabled$ = combineLatest([
+            this._compatibleDisplayTypes$,
+            this.selectedDataSourceKey$,
+        ]).pipe(map(([compatibleDisplayTypes, selectedDataSourceKey]) => compatibleDisplayTypes?.length === 0 || !selectedDataSourceKey), tap(displayTypeDropdownDisabled => {
+            if (displayTypeDropdownDisabled) {
+                this.displayType?.disable();
+            }
+            else {
+                this.displayType?.enable();
+            }
+        }));
+        this.dataSourceConfiguration$ = new BehaviorSubject({
+            valid: false,
+            data: {},
+        });
+        this.displayTypeConfiguration$ = new BehaviorSubject({
+            valid: false,
+            data: {},
+        });
+        this.disabled$ = new BehaviorSubject(false);
+    }
+    ngOnInit() {
+        this.openOpenSubscription();
+    }
+    ngOnDestroy() {
+        this._openSubscription?.unsubscribe();
+    }
+    closeModal() {
+        this.open$.next(false);
+        setTimeout(() => {
+            this.enable();
+            this.form.reset();
+            this.selectedDataSourceKey$.next('');
+            this.selectedDisplayTypeKey$.next('');
+        }, CARBON_CONSTANTS.modalAnimationMs);
+    }
+    save() {
+        this.disable();
+        combineLatest([
+            this.selectedDataSourceKey$,
+            this.selectedDisplayTypeKey$,
+            this.displayTypeConfiguration$,
+            this.dataSourceConfiguration$,
+        ])
+            .pipe(take(1), map(([selectedDataSourceKey, selectedDisplayTypeKey, displayTypeConfiguration, dataSourceConfiguration,]) => ({
+            title: this.title.value,
+            displayType: selectedDisplayTypeKey,
+            dataSourceKey: selectedDataSourceKey,
+            dataSourceProperties: { ...dataSourceConfiguration.data },
+            displayTypeProperties: { ...displayTypeConfiguration.data },
+        })), switchMap(widgetUpdateObject => this.type === 'create'
+            ? this.dashboardManagementService.createDashboardWidgetConfiguration(this.dashboard.key, widgetUpdateObject)
+            : this.dashboardManagementService.updateDashboardWidgetConfiguration(this.dashboard.key, { ...widgetUpdateObject, key: this.widgetKey })))
+            .subscribe({
+            complete: () => {
+                this.saveEvent.emit();
+                this.closeModal();
+            },
+            error: () => {
+                this.enable();
+            },
+        });
+    }
+    delete() {
+        this.disable();
+        this.dashboardManagementService
+            .deleteDashboardWidgetConfiguration(this.dashboard.key, this.widgetKey)
+            .subscribe({
+            complete: () => {
+                this.saveEvent.emit();
+                this.closeModal();
+            },
+            error: () => {
+                this.enable();
+            },
+        });
+    }
+    dataSourceSelected(dataSource) {
+        if (!dataSource) {
+            return;
+        }
+        this.selectedDataSourceKey$.next(dataSource?.item?.key);
+        this.dataSource.setValue(dataSource?.item?.key);
+    }
+    displayTypeSelected(displayType) {
+        if (!displayType) {
+            return;
+        }
+        this.selectedDisplayTypeKey$.next(displayType?.item?.key);
+        this.displayType.setValue(displayType?.item?.key);
+    }
+    dataSourceConfiguration(configuration) {
+        this.dataSourceConfiguration$.next(configuration);
+    }
+    displayTypeConfiguration(configuration) {
+        this.displayTypeConfiguration$.next(configuration);
+    }
+    openOpenSubscription() {
+        this._openSubscription = this.showModal$.subscribe(show => {
+            this.open$.next(show);
+        });
+    }
+    resetCompatibleDisplayTypes() {
+        this._compatibleDisplayTypes$.next([]);
+    }
+    setCompatibleDisplayTypes(dataSources, selectedDataSourceKey) {
+        this.widgetService.supportedDisplayTypes$.pipe(take(1)).subscribe(supportedDisplayTypes => {
+            const selectedDataSource = dataSources.find(source => source.key === selectedDataSourceKey);
+            const availableDataFeatures = selectedDataSource?.dataFeatures;
+            const compatibleDisplayTypes = supportedDisplayTypes.filter(displayType => {
+                const supportedDataFeatures = displayType.requiredDataFeatures.filter(feature => availableDataFeatures?.includes(feature));
+                return supportedDataFeatures.length === displayType.requiredDataFeatures.length;
+            });
+            this._compatibleDisplayTypes$.next(compatibleDisplayTypes);
+        });
+    }
+    disable() {
+        this.disabled$.next(true);
+        this.form.disable();
+    }
+    enable() {
+        this.disabled$.next(false);
+        this.form.enable();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetModalComponent, deps: [{ token: DOCUMENT }, { token: i1$1.FormBuilder }, { token: i2$1.TranslateService }, { token: i3.NotificationService }, { token: DashboardManagementService }, { token: i5.WidgetService }, { token: i5.WidgetTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WidgetModalComponent, selector: "valtimo-widget-modal", inputs: { showModal$: "showModal$", type: "type", dashboard: "dashboard", widgetKey: "widgetKey", editWidgetConfiguration: "editWidgetConfiguration" }, outputs: { saveEvent: "saveEvent" }, providers: [NotificationService], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    isCreate: type === 'create',\n    isDelete: type === 'delete',\n    isEdit: type === 'edit',\n    open: open$ | async\n  } as vars\"\n>\n  <ng-container\n    *ngIf=\"{\n      create: vars.isCreate && ('dashboardManagement.widgets.add' | translate),\n      delete: vars.isDelete && ('dashboardManagement.widgets.delete' | translate),\n      edit: vars.isEdit && ('dashboardManagement.widgets.edit' | translate)\n    } as titles\"\n  >\n    <cds-modal\n      *ngIf=\"{\n        title: titles.edit || titles.create || titles.delete\n      } as translations\"\n      valtimoCdsModal\n      [open]=\"vars.open\"\n      showFooter=\"true\"\n      size=\"md\"\n      title=\"{{ translations.title }}\"\n      class=\"widget-modal\"\n    >\n      <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n        <h3 cdsModalHeaderHeading>\n          {{ translations.title }}\n        </h3>\n      </cds-modal-header>\n\n      <section cdsModalContent>\n        <ng-container *ngIf=\"vars.isDelete\">\n          {{ 'dashboardManagement.widgets.deleteDescription' | translate }}</ng-container\n        >\n\n        <ng-container *ngIf=\"vars.isEdit || vars.isCreate\">\n          <ng-container *ngTemplateOutlet=\"widgetForm; context: {vars: vars}\"></ng-container>\n        </ng-container>\n      </section>\n\n      <cds-modal-footer>\n        <ng-container *ngIf=\"vars.isEdit || vars.isCreate\">\n          <ng-container *ngTemplateOutlet=\"editButtons; context: {vars: vars}\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"vars.isDelete\">\n          <ng-container *ngTemplateOutlet=\"deleteButtons; context: {vars: vars}\"></ng-container>\n        </ng-container>\n      </cds-modal-footer>\n    </cds-modal>\n  </ng-container>\n</ng-container>\n\n<ng-template #widgetForm let-vars=\"vars\">\n  <form\n    *ngIf=\"\n      form && {\n        dataSourceItems: dataSourceItems$ | async,\n        displayTypeDropdownDisabled: displayTypeDropdownDisabled$ | async,\n        displayTypeItems: displayTypeItems$ | async,\n        selectedDataSourceKey: selectedDataSourceKey$ | async,\n        selectedDisplayTypeKey: selectedDisplayTypeKey$ | async\n      } as obs\n    \"\n    [formGroup]=\"form\"\n    class=\"dashboard-modal__form\"\n  >\n    <div class=\"form__element\">\n      <cds-label\n        [helperText]=\"'dashboardManagement.widgets.form.titleHelperText' | translate\"\n        [invalidText]=\"'dashboardManagement.widgets.form.titleHelperText' | translate\"\n        [invalid]=\"title.dirty && title.invalid\"\n      >\n        {{ 'dashboardManagement.widgets.form.title' | translate }}\n\n        <input\n          cdsText\n          formControlName=\"title\"\n          [invalid]=\"title.dirty && title.invalid\"\n          [attr.modal-primary-focus]=\"true\"\n        />\n      </cds-label>\n    </div>\n\n    <div class=\"form__element\" *ngIf=\"obs.dataSourceItems\">\n      <cds-dropdown\n        formControlName=\"dataSource\"\n        [helperText]=\"'dashboardManagement.widgets.form.dataSourceHelperText' | translate\"\n        [invalidText]=\"'dashboardManagement.widgets.form.dateSourceHelperText' | translate\"\n        [invalid]=\"dataSource.dirty && dataSource.invalid\"\n        [label]=\"'dashboardManagement.widgets.form.dataSource' | translate\"\n        (selected)=\"dataSourceSelected($event)\"\n      >\n        <cds-dropdown-list [items]=\"obs.dataSourceItems\" type=\"multi\"></cds-dropdown-list>\n      </cds-dropdown>\n    </div>\n\n    <valtimo-widget-configuration-container\n      *ngIf=\"obs.selectedDataSourceKey\"\n      [dataSourceKey]=\"obs.selectedDataSourceKey\"\n      [disabled]=\"vars.disabled\"\n      [prefillConfiguration]=\"dataSourcePrefillConfig$ | async\"\n      (configurationEvent)=\"dataSourceConfiguration($event)\"\n    ></valtimo-widget-configuration-container>\n\n    <div class=\"form__element\" *ngIf=\"obs.displayTypeItems\">\n      <cds-dropdown\n        formControlName=\"displayType\"\n        [helperText]=\"'dashboardManagement.widgets.form.displayTypeHelperText' | translate\"\n        [invalid]=\"displayType.dirty && displayType.invalid\"\n        [invalidText]=\"'dashboardManagement.widgets.form.displayTypeHelperText' | translate\"\n        [label]=\"'dashboardManagement.widgets.form.displayType' | translate\"\n        (selected)=\"displayTypeSelected($event)\"\n      >\n        <cds-dropdown-list [items]=\"obs.displayTypeItems\" type=\"multi\"></cds-dropdown-list>\n      </cds-dropdown>\n    </div>\n\n    <valtimo-widget-configuration-container\n      *ngIf=\"obs.selectedDisplayTypeKey\"\n      [disabled]=\"vars.disabled\"\n      [displayTypeKey]=\"obs.selectedDisplayTypeKey\"\n      [prefillConfiguration]=\"displayTypePrefillConfig$ | async\"\n      (configurationEvent)=\"displayTypeConfiguration($event)\"\n    ></valtimo-widget-configuration-container>\n  </form>\n</ng-template>\n\n<ng-template #editButtons let-vars=\"vars\">\n  <ng-container\n    *ngIf=\"{\n      dataSourceConfiguration: dataSourceConfiguration$ | async,\n      displayTypeConfiguration: displayTypeConfiguration$ | async\n    } as obs\"\n  >\n    <button cdsButton=\"ghost\" [disabled]=\"vars.disabled\" (click)=\"closeModal()\">\n      {{ 'dashboardManagement.widgets.cancel' | translate }}\n    </button>\n\n    <button\n      cdsButton=\"primary\"\n      [disabled]=\"\n        form.invalid ||\n        !obs.dataSourceConfiguration.valid ||\n        !obs.displayTypeConfiguration.valid ||\n        vars.disabled\n      \"\n      (click)=\"save()\"\n    >\n      {{ 'dashboardManagement.widgets.save' | translate }}\n    </button>\n  </ng-container>\n</ng-template>\n\n<ng-template #deleteButtons let-vars=\"vars\">\n  <button cdsButton=\"secondary\" [disabled]=\"vars.disabled\" (click)=\"closeModal()\">\n    {{ 'dashboardManagement.widgets.cancel' | translate }}\n  </button>\n\n  <button cdsButton=\"danger\" [disabled]=\"vars.disabled\" (click)=\"delete()\">\n    {{ 'dashboardManagement.widgets.delete' | translate }}\n  </button>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.widget-modal .form__row{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.widget-modal .form__spacer{width:32px}.widget-modal .form__element{width:100%;margin-bottom:32px}.widget-modal .form__element.--with-button{display:flex;align-items:flex-end;flex-direction:row}.widget-modal .form__element.--with-button button{margin-left:16px}.widget-modal .form__element.--readonly input{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: WidgetConfigurationContainerComponent, selector: "valtimo-widget-configuration-container", inputs: ["dataSourceKey", "displayTypeKey", "disabled", "prefillConfiguration"], outputs: ["configurationEvent"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-modal', encapsulation: ViewEncapsulation.None, providers: [NotificationService], template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    isCreate: type === 'create',\n    isDelete: type === 'delete',\n    isEdit: type === 'edit',\n    open: open$ | async\n  } as vars\"\n>\n  <ng-container\n    *ngIf=\"{\n      create: vars.isCreate && ('dashboardManagement.widgets.add' | translate),\n      delete: vars.isDelete && ('dashboardManagement.widgets.delete' | translate),\n      edit: vars.isEdit && ('dashboardManagement.widgets.edit' | translate)\n    } as titles\"\n  >\n    <cds-modal\n      *ngIf=\"{\n        title: titles.edit || titles.create || titles.delete\n      } as translations\"\n      valtimoCdsModal\n      [open]=\"vars.open\"\n      showFooter=\"true\"\n      size=\"md\"\n      title=\"{{ translations.title }}\"\n      class=\"widget-modal\"\n    >\n      <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n        <h3 cdsModalHeaderHeading>\n          {{ translations.title }}\n        </h3>\n      </cds-modal-header>\n\n      <section cdsModalContent>\n        <ng-container *ngIf=\"vars.isDelete\">\n          {{ 'dashboardManagement.widgets.deleteDescription' | translate }}</ng-container\n        >\n\n        <ng-container *ngIf=\"vars.isEdit || vars.isCreate\">\n          <ng-container *ngTemplateOutlet=\"widgetForm; context: {vars: vars}\"></ng-container>\n        </ng-container>\n      </section>\n\n      <cds-modal-footer>\n        <ng-container *ngIf=\"vars.isEdit || vars.isCreate\">\n          <ng-container *ngTemplateOutlet=\"editButtons; context: {vars: vars}\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"vars.isDelete\">\n          <ng-container *ngTemplateOutlet=\"deleteButtons; context: {vars: vars}\"></ng-container>\n        </ng-container>\n      </cds-modal-footer>\n    </cds-modal>\n  </ng-container>\n</ng-container>\n\n<ng-template #widgetForm let-vars=\"vars\">\n  <form\n    *ngIf=\"\n      form && {\n        dataSourceItems: dataSourceItems$ | async,\n        displayTypeDropdownDisabled: displayTypeDropdownDisabled$ | async,\n        displayTypeItems: displayTypeItems$ | async,\n        selectedDataSourceKey: selectedDataSourceKey$ | async,\n        selectedDisplayTypeKey: selectedDisplayTypeKey$ | async\n      } as obs\n    \"\n    [formGroup]=\"form\"\n    class=\"dashboard-modal__form\"\n  >\n    <div class=\"form__element\">\n      <cds-label\n        [helperText]=\"'dashboardManagement.widgets.form.titleHelperText' | translate\"\n        [invalidText]=\"'dashboardManagement.widgets.form.titleHelperText' | translate\"\n        [invalid]=\"title.dirty && title.invalid\"\n      >\n        {{ 'dashboardManagement.widgets.form.title' | translate }}\n\n        <input\n          cdsText\n          formControlName=\"title\"\n          [invalid]=\"title.dirty && title.invalid\"\n          [attr.modal-primary-focus]=\"true\"\n        />\n      </cds-label>\n    </div>\n\n    <div class=\"form__element\" *ngIf=\"obs.dataSourceItems\">\n      <cds-dropdown\n        formControlName=\"dataSource\"\n        [helperText]=\"'dashboardManagement.widgets.form.dataSourceHelperText' | translate\"\n        [invalidText]=\"'dashboardManagement.widgets.form.dateSourceHelperText' | translate\"\n        [invalid]=\"dataSource.dirty && dataSource.invalid\"\n        [label]=\"'dashboardManagement.widgets.form.dataSource' | translate\"\n        (selected)=\"dataSourceSelected($event)\"\n      >\n        <cds-dropdown-list [items]=\"obs.dataSourceItems\" type=\"multi\"></cds-dropdown-list>\n      </cds-dropdown>\n    </div>\n\n    <valtimo-widget-configuration-container\n      *ngIf=\"obs.selectedDataSourceKey\"\n      [dataSourceKey]=\"obs.selectedDataSourceKey\"\n      [disabled]=\"vars.disabled\"\n      [prefillConfiguration]=\"dataSourcePrefillConfig$ | async\"\n      (configurationEvent)=\"dataSourceConfiguration($event)\"\n    ></valtimo-widget-configuration-container>\n\n    <div class=\"form__element\" *ngIf=\"obs.displayTypeItems\">\n      <cds-dropdown\n        formControlName=\"displayType\"\n        [helperText]=\"'dashboardManagement.widgets.form.displayTypeHelperText' | translate\"\n        [invalid]=\"displayType.dirty && displayType.invalid\"\n        [invalidText]=\"'dashboardManagement.widgets.form.displayTypeHelperText' | translate\"\n        [label]=\"'dashboardManagement.widgets.form.displayType' | translate\"\n        (selected)=\"displayTypeSelected($event)\"\n      >\n        <cds-dropdown-list [items]=\"obs.displayTypeItems\" type=\"multi\"></cds-dropdown-list>\n      </cds-dropdown>\n    </div>\n\n    <valtimo-widget-configuration-container\n      *ngIf=\"obs.selectedDisplayTypeKey\"\n      [disabled]=\"vars.disabled\"\n      [displayTypeKey]=\"obs.selectedDisplayTypeKey\"\n      [prefillConfiguration]=\"displayTypePrefillConfig$ | async\"\n      (configurationEvent)=\"displayTypeConfiguration($event)\"\n    ></valtimo-widget-configuration-container>\n  </form>\n</ng-template>\n\n<ng-template #editButtons let-vars=\"vars\">\n  <ng-container\n    *ngIf=\"{\n      dataSourceConfiguration: dataSourceConfiguration$ | async,\n      displayTypeConfiguration: displayTypeConfiguration$ | async\n    } as obs\"\n  >\n    <button cdsButton=\"ghost\" [disabled]=\"vars.disabled\" (click)=\"closeModal()\">\n      {{ 'dashboardManagement.widgets.cancel' | translate }}\n    </button>\n\n    <button\n      cdsButton=\"primary\"\n      [disabled]=\"\n        form.invalid ||\n        !obs.dataSourceConfiguration.valid ||\n        !obs.displayTypeConfiguration.valid ||\n        vars.disabled\n      \"\n      (click)=\"save()\"\n    >\n      {{ 'dashboardManagement.widgets.save' | translate }}\n    </button>\n  </ng-container>\n</ng-template>\n\n<ng-template #deleteButtons let-vars=\"vars\">\n  <button cdsButton=\"secondary\" [disabled]=\"vars.disabled\" (click)=\"closeModal()\">\n    {{ 'dashboardManagement.widgets.cancel' | translate }}\n  </button>\n\n  <button cdsButton=\"danger\" [disabled]=\"vars.disabled\" (click)=\"delete()\">\n    {{ 'dashboardManagement.widgets.delete' | translate }}\n  </button>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.widget-modal .form__row{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.widget-modal .form__spacer{width:32px}.widget-modal .form__element{width:100%;margin-bottom:32px}.widget-modal .form__element.--with-button{display:flex;align-items:flex-end;flex-direction:row}.widget-modal .form__element.--with-button button{margin-left:16px}.widget-modal .form__element.--readonly input{background-color:transparent}\n"] }]
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i1$1.FormBuilder }, { type: i2$1.TranslateService }, { type: i3.NotificationService }, { type: DashboardManagementService }, { type: i5.WidgetService }, { type: i5.WidgetTranslationService }]; }, propDecorators: { showModal$: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], dashboard: [{
+                type: Input
+            }], widgetKey: [{
+                type: Input
+            }], editWidgetConfiguration: [{
+                type: Input
+            }], saveEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2023 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class EditDashboardModalComponent {
+    get dashboardTitle() {
+        return this.editDashboardForm.get('title');
+    }
+    get dashboardDescription() {
+        return this.editDashboardForm.get('description');
+    }
+    constructor(fb, dashboardManagementService) {
+        this.fb = fb;
+        this.dashboardManagementService = dashboardManagementService;
+        this.saveEvent = new EventEmitter();
+        this.open$ = new BehaviorSubject(false);
+        this.disabled$ = new BehaviorSubject(false);
+        this.editDashboardForm = this.fb.group({
+            title: this.fb.control('', [Validators.required]),
+            description: this.fb.control('', [Validators.required]),
+        });
+    }
+    ngOnInit() {
+        this.openOpenSubscription();
+    }
+    closeModal() {
+        this.open$.next(false);
+        setTimeout(() => {
+            this.editDashboardForm.reset();
+        }, CARBON_CONSTANTS.modalAnimationMs);
+    }
+    saveDashboard() {
+        this.disable();
+        this.dashboardManagementService
+            .updateDashboard({
+            description: this.dashboardDescription.value,
+            title: this.dashboardTitle.value,
+            key: this.dashboard.key,
+        })
+            .subscribe(() => {
+            this.saveEvent.emit();
+            this.closeModal();
+        });
+    }
+    setEditDashboardForm() {
+        if (this.dashboard) {
+            this.dashboardTitle?.setValue(this.dashboard.title);
+            this.dashboardDescription?.setValue(this.dashboard.description);
+        }
+        this.enable();
+    }
+    openOpenSubscription() {
+        this._openSubscription = this.showModal$.subscribe(show => {
+            this.setEditDashboardForm();
+            this.open$.next(show);
+        });
+    }
+    disable() {
+        this.disabled$.next(true);
+    }
+    enable() {
+        this.disabled$.next(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditDashboardModalComponent, deps: [{ token: i1$1.FormBuilder }, { token: DashboardManagementService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditDashboardModalComponent, selector: "valtimo-edit-dashboard-modal", inputs: { showModal$: "showModal$", dashboard: "dashboard" }, outputs: { saveEvent: "saveEvent" }, providers: [NotificationService], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  *ngIf=\"{disabled: disabled$ | async} as obs\"\n  valtimoCdsModal\n  [open]=\"open$ | async\"\n  showFooter=\"true\"\n  title=\"{{ 'dashboardManagement.widgets.editDashboard' | translate }}\"\n  class=\"edit-dashboard-modal\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'dashboardManagement.widgets.editDashboard' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <ng-container *ngTemplateOutlet=\"editDashboardFormTemplate;context:{obs: obs}\"></ng-container>\n  </section>\n\n  <cds-modal-footer>\n    <ng-container *ngTemplateOutlet=\"editDashboardButtons;context:{obs: obs}\"></ng-container>\n  </cds-modal-footer>\n</cds-modal>\n\n<ng-template #editDashboardFormTemplate let-obs=\"obs\">\n  <form *ngIf=\"editDashboardForm\" [formGroup]=\"editDashboardForm\" class=\"dashboard-modal__form\">\n    <div class=\"form__element\">\n      <cds-label\n        [disabled]=\"obs.disabled\"\n        [invalid]=\"dashboardTitle.dirty && dashboardTitle.invalid\"\n      >\n        {{ 'dashboardManagement.widgets.form.dashboardTitle' | translate }}\n\n        <input\n          cdsText\n          [disabled]=\"obs.disabled\"\n          [invalid]=\"dashboardTitle.dirty && dashboardTitle.invalid\"\n          formControlName=\"title\"\n          [attr.modal-primary-focus]=\"true\"\n        />\n      </cds-label>\n    </div>\n\n    <div class=\"form__element\">\n      <cds-label\n        [disabled]=\"obs.disabled\"\n        [helperText]=\"'dashboardManagement.widgets.form.dashboardDescriptionHelperText' | translate\"\n        [invalid]=\"dashboardDescription.dirty && dashboardDescription.invalid\"\n        [invalidText]=\"\n          'dashboardManagement.widgets.form.dashboardDescriptionHelperText' | translate\n        \"\n      >\n        {{ 'dashboardManagement.widgets.form.dashboardDescription' | translate }}\n\n        <input\n          cdsText\n          [disabled]=\"obs.disabled\"\n          [invalid]=\"dashboardDescription.dirty && dashboardDescription.invalid\"\n          formControlName=\"description\"\n        />\n      </cds-label>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #editDashboardButtons let-obs=\"obs\">\n  <button cdsButton=\"ghost\" [disabled]=\"obs.disabled\" (click)=\"closeModal()\">\n    {{ 'dashboardManagement.widgets.cancel' | translate }}\n  </button>\n\n  <button\n    cdsButton=\"primary\"\n    [disabled]=\"editDashboardForm.invalid || obs.disabled\"\n    (click)=\"saveDashboard()\"\n  >\n    {{ 'dashboardManagement.widgets.complete' | translate }}\n  </button>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.edit-dashboard-modal .form__row{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end}.edit-dashboard-modal .form__element{width:100%;margin-bottom:32px}\n"], dependencies: [{ kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditDashboardModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-edit-dashboard-modal', encapsulation: ViewEncapsulation.None, providers: [NotificationService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  *ngIf=\"{disabled: disabled$ | async} as obs\"\n  valtimoCdsModal\n  [open]=\"open$ | async\"\n  showFooter=\"true\"\n  title=\"{{ 'dashboardManagement.widgets.editDashboard' | translate }}\"\n  class=\"edit-dashboard-modal\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'dashboardManagement.widgets.editDashboard' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <ng-container *ngTemplateOutlet=\"editDashboardFormTemplate;context:{obs: obs}\"></ng-container>\n  </section>\n\n  <cds-modal-footer>\n    <ng-container *ngTemplateOutlet=\"editDashboardButtons;context:{obs: obs}\"></ng-container>\n  </cds-modal-footer>\n</cds-modal>\n\n<ng-template #editDashboardFormTemplate let-obs=\"obs\">\n  <form *ngIf=\"editDashboardForm\" [formGroup]=\"editDashboardForm\" class=\"dashboard-modal__form\">\n    <div class=\"form__element\">\n      <cds-label\n        [disabled]=\"obs.disabled\"\n        [invalid]=\"dashboardTitle.dirty && dashboardTitle.invalid\"\n      >\n        {{ 'dashboardManagement.widgets.form.dashboardTitle' | translate }}\n\n        <input\n          cdsText\n          [disabled]=\"obs.disabled\"\n          [invalid]=\"dashboardTitle.dirty && dashboardTitle.invalid\"\n          formControlName=\"title\"\n          [attr.modal-primary-focus]=\"true\"\n        />\n      </cds-label>\n    </div>\n\n    <div class=\"form__element\">\n      <cds-label\n        [disabled]=\"obs.disabled\"\n        [helperText]=\"'dashboardManagement.widgets.form.dashboardDescriptionHelperText' | translate\"\n        [invalid]=\"dashboardDescription.dirty && dashboardDescription.invalid\"\n        [invalidText]=\"\n          'dashboardManagement.widgets.form.dashboardDescriptionHelperText' | translate\n        \"\n      >\n        {{ 'dashboardManagement.widgets.form.dashboardDescription' | translate }}\n\n        <input\n          cdsText\n          [disabled]=\"obs.disabled\"\n          [invalid]=\"dashboardDescription.dirty && dashboardDescription.invalid\"\n          formControlName=\"description\"\n        />\n      </cds-label>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #editDashboardButtons let-obs=\"obs\">\n  <button cdsButton=\"ghost\" [disabled]=\"obs.disabled\" (click)=\"closeModal()\">\n    {{ 'dashboardManagement.widgets.cancel' | translate }}\n  </button>\n\n  <button\n    cdsButton=\"primary\"\n    [disabled]=\"editDashboardForm.invalid || obs.disabled\"\n    (click)=\"saveDashboard()\"\n  >\n    {{ 'dashboardManagement.widgets.complete' | translate }}\n  </button>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.edit-dashboard-modal .form__row{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end}.edit-dashboard-modal .form__element{width:100%;margin-bottom:32px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: DashboardManagementService }]; }, propDecorators: { showModal$: [{
+                type: Input
+            }], dashboard: [{
+                type: Input
+            }], saveEvent: [{
+                type: Output
+            }] } });
+
+class DashboardDetailsComponent {
+    constructor(dashboardManagementService, datePipe, iconService, pageTitleService, route, translateService) {
+        this.dashboardManagementService = dashboardManagementService;
+        this.datePipe = datePipe;
+        this.iconService = iconService;
+        this.pageTitleService = pageTitleService;
+        this.route = route;
+        this.translateService = translateService;
+        this.modalType = 'create';
+        this._dashboardKey$ = this.route.params.pipe(map(params => params.id));
+        this._refreshDashboardSubject$ = new BehaviorSubject(null);
+        this.currentDashboard$ = combineLatest([
+            this._dashboardKey$,
+            this.translateService.stream('key'),
+            this._refreshDashboardSubject$,
+        ]).pipe(switchMap(([dashboardKey]) => this.dashboardManagementService.getDashboard(dashboardKey)), tap((currentDashboard) => {
+            if (!currentDashboard) {
+                return;
+            }
+            this.pageTitleService.setCustomPageTitle(currentDashboard.title);
+            this.pageTitleService.setCustomPageSubtitle(this.translateService.instant('dashboardManagement.widgets.metadata', {
+                createdBy: currentDashboard.createdBy,
+                createdOn: this.datePipe.transform(currentDashboard.createdOn ?? '', 'd/M/yy, H:mm'),
+                key: currentDashboard.key,
+            }));
+        }));
+        this.lastItemIndex$ = new BehaviorSubject(0);
+        this.loading$ = new BehaviorSubject(true);
+        this._refreshWidgetsSubject$ = new BehaviorSubject(null);
+        this._widgetData = null;
+        this.widgetData$ = combineLatest([
+            this._dashboardKey$,
+            this._refreshWidgetsSubject$,
+        ]).pipe(switchMap(([dashboardKey, refreshWidgets]) => {
+            this.loading$.next(true);
+            if (!this._widgetData || !refreshWidgets) {
+                return this.dashboardManagementService.getDashboardWidgetConfiguration(dashboardKey);
+            }
+            const { direction, index } = refreshWidgets;
+            return this.dashboardManagementService.updateDashboardWidgetConfigurations(dashboardKey, direction === 'UP'
+                ? this.swapWidgets(this._widgetData, index - 1, index)
+                : this.swapWidgets(this._widgetData, index, index + 1));
+        }), tap((data) => {
+            this._widgetData = data;
+            this.lastItemIndex$.next(data.length - 1);
+            this.loading$.next(false);
+        }));
+        this.showModal$ = new BehaviorSubject(false);
+        this.showEditDashboardModal$ = new BehaviorSubject(false);
+        this.editWidgetConfiguration$ = new BehaviorSubject(null);
+    }
+    ngAfterViewInit() {
+        this.iconService.registerAll([ArrowDown16, ArrowUp16, Edit16]);
+        this.setFields();
+    }
+    addWidget() {
+        this.editWidgetConfiguration$.next(null);
+        this.modalType = 'create';
+        this.showModal();
+    }
+    editDashboard() {
+        this.showEditDashboardModal();
+    }
+    refreshWidgets() {
+        this._refreshWidgetsSubject$.next(null);
+    }
+    refreshDashboard() {
+        this._refreshDashboardSubject$.next(null);
+    }
+    onArrowDownClick(data) {
+        this._refreshWidgetsSubject$.next({ direction: 'DOWN', index: data.index });
+    }
+    onArrowUpClick(data) {
+        this._refreshWidgetsSubject$.next({ direction: 'UP', index: data.index });
+    }
+    setFields() {
+        this.fields = [
+            {
+                viewType: ViewType.TEXT,
+                key: 'title',
+                label: 'Name',
+            },
+            {
+                viewType: ViewType.TEMPLATE,
+                template: this.moveButtonsTemplate,
+                className: 'dashboard-detail-table__actions',
+                key: '',
+                label: '',
+            },
+            {
+                viewType: ViewType.ACTION,
+                className: 'dashboard-detail-table__actions',
+                key: '',
+                label: '',
+                actions: [
+                    {
+                        label: 'Edit',
+                        callback: this.editWidget.bind(this),
+                    },
+                    {
+                        label: 'Delete',
+                        callback: this.deleteWidget.bind(this),
+                        type: 'danger',
+                    },
+                ],
+            },
+        ];
+    }
+    editWidget(event) {
+        this.editWidgetConfiguration$.next({ ...event });
+        this.modalType = 'edit';
+        this.showModal();
+    }
+    deleteWidget(event) {
+        this.editWidgetConfiguration$.next({ ...event });
+        this.modalType = 'delete';
+        this.showModal();
+    }
+    showModal() {
+        this.showModal$.next(true);
+    }
+    showEditDashboardModal() {
+        this.showEditDashboardModal$.next(true);
+    }
+    swapWidgets(dashboardWidgets, index1, index2) {
+        const temp = [...dashboardWidgets];
+        temp[index1] = temp.splice(index2, 1, temp[index1])[0];
+        return temp;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardDetailsComponent, deps: [{ token: DashboardManagementService }, { token: i2$2.DatePipe }, { token: i3.IconService }, { token: i4.PageTitleService }, { token: i5$1.ActivatedRoute }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DashboardDetailsComponent, selector: "ng-component", viewQueries: [{ propertyName: "moveButtonsTemplate", first: true, predicate: ["moveButtonsTemplate"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"\n    fields && {\n      currentDashboard: currentDashboard$ | async,\n      editWidgetConfiguration: editWidgetConfiguration$ | async,\n      loading: loading$ | async,\n      widgetData: widgetData$ | async\n    } as obs\n  \"\n>\n  <div class=\"dashboard-detail-table\">\n    <valtimo-carbon-list\n      [items]=\"obs.widgetData\"\n      [fields]=\"fields\"\n      [header]=\"false\"\n      [loading]=\"obs.loading\"\n    >\n      <div carbonToolbarContent>\n        <ng-container [ngTemplateOutlet]=\"addWidgetButton\"></ng-container>\n      </div>\n\n      <valtimo-no-results\n        [action]=\"addWidgetButton\"\n        description=\"{{ 'dashboardManagement.widgets.noResults.description' | translate }}\"\n        title=\"{{ 'dashboardManagement.widgets.noResults.title' | translate }}\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  </div>\n\n  <valtimo-widget-modal\n    [dashboard]=\"obs.currentDashboard\"\n    [editWidgetConfiguration]=\"obs.editWidgetConfiguration\"\n    [showModal$]=\"showModal$\"\n    [type]=\"modalType\"\n    [widgetKey]=\"obs.editWidgetConfiguration?.key\"\n    (saveEvent)=\"refreshWidgets()\"\n  ></valtimo-widget-modal>\n\n  <valtimo-edit-dashboard-modal\n    [dashboard]=\"obs.currentDashboard\"\n    [showModal$]=\"showEditDashboardModal$\"\n    (saveEvent)=\"refreshDashboard()\"\n  >\n  </valtimo-edit-dashboard-modal>\n</ng-container>\n\n<ng-template #moveButtonsTemplate let-data=\"data\">\n  <div class=\"move-buttons-container\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      (click)=\"onArrowUpClick(data)\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"(lastItemIndex$ | async) === data.index\"\n      [iconOnly]=\"true\"\n      (click)=\"onArrowDownClick(data)\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-container renderInPageHeader>\n  <ng-template>\n    <button cdsButton=\"tertiary\" size=\"md\" (click)=\"editDashboard()\">\n      {{ 'dashboardManagement.widgets.editButton' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n\n<ng-template #addWidgetButton>\n  <button cdsButton=\"primary\" [disabled]=\"loading$ | async\" (click)=\"addWidget()\">\n    {{ 'dashboardManagement.widgets.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.dashboard-detail-table .move-buttons-container{width:100%;justify-content:flex-end;display:flex;flex-direction:row;right:-1rem;position:relative}.dashboard-detail-table .move-buttons-container button:not(:last-child){margin-right:8px}.dashboard-detail-table__actions{width:1px}.dashboard-detail-table-no-results{display:flex;justify-content:space-around;padding:6.25rem 0;gap:4rem}.dashboard-detail-table-no-results__title{font-size:1.75rem}.dashboard-detail-table-no-results__content{display:flex;flex-direction:column;justify-content:space-around}\n"], dependencies: [{ kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.RenderInPageHeaderDirective, selector: "[renderInPageHeader]" }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i4.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "header", "initialSortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "component", type: i4.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: WidgetModalComponent, selector: "valtimo-widget-modal", inputs: ["showModal$", "type", "dashboard", "widgetKey", "editWidgetConfiguration"], outputs: ["saveEvent"] }, { kind: "component", type: EditDashboardModalComponent, selector: "valtimo-edit-dashboard-modal", inputs: ["showModal$", "dashboard"], outputs: ["saveEvent"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"\n    fields && {\n      currentDashboard: currentDashboard$ | async,\n      editWidgetConfiguration: editWidgetConfiguration$ | async,\n      loading: loading$ | async,\n      widgetData: widgetData$ | async\n    } as obs\n  \"\n>\n  <div class=\"dashboard-detail-table\">\n    <valtimo-carbon-list\n      [items]=\"obs.widgetData\"\n      [fields]=\"fields\"\n      [header]=\"false\"\n      [loading]=\"obs.loading\"\n    >\n      <div carbonToolbarContent>\n        <ng-container [ngTemplateOutlet]=\"addWidgetButton\"></ng-container>\n      </div>\n\n      <valtimo-no-results\n        [action]=\"addWidgetButton\"\n        description=\"{{ 'dashboardManagement.widgets.noResults.description' | translate }}\"\n        title=\"{{ 'dashboardManagement.widgets.noResults.title' | translate }}\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  </div>\n\n  <valtimo-widget-modal\n    [dashboard]=\"obs.currentDashboard\"\n    [editWidgetConfiguration]=\"obs.editWidgetConfiguration\"\n    [showModal$]=\"showModal$\"\n    [type]=\"modalType\"\n    [widgetKey]=\"obs.editWidgetConfiguration?.key\"\n    (saveEvent)=\"refreshWidgets()\"\n  ></valtimo-widget-modal>\n\n  <valtimo-edit-dashboard-modal\n    [dashboard]=\"obs.currentDashboard\"\n    [showModal$]=\"showEditDashboardModal$\"\n    (saveEvent)=\"refreshDashboard()\"\n  >\n  </valtimo-edit-dashboard-modal>\n</ng-container>\n\n<ng-template #moveButtonsTemplate let-data=\"data\">\n  <div class=\"move-buttons-container\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      (click)=\"onArrowUpClick(data)\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"(lastItemIndex$ | async) === data.index\"\n      [iconOnly]=\"true\"\n      (click)=\"onArrowDownClick(data)\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-container renderInPageHeader>\n  <ng-template>\n    <button cdsButton=\"tertiary\" size=\"md\" (click)=\"editDashboard()\">\n      {{ 'dashboardManagement.widgets.editButton' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n\n<ng-template #addWidgetButton>\n  <button cdsButton=\"primary\" [disabled]=\"loading$ | async\" (click)=\"addWidget()\">\n    {{ 'dashboardManagement.widgets.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.dashboard-detail-table .move-buttons-container{width:100%;justify-content:flex-end;display:flex;flex-direction:row;right:-1rem;position:relative}.dashboard-detail-table .move-buttons-container button:not(:last-child){margin-right:8px}.dashboard-detail-table__actions{width:1px}.dashboard-detail-table-no-results{display:flex;justify-content:space-around;padding:6.25rem 0;gap:4rem}.dashboard-detail-table-no-results__title{font-size:1.75rem}.dashboard-detail-table-no-results__content{display:flex;flex-direction:column;justify-content:space-around}\n"] }]
+        }], ctorParameters: function () { return [{ type: DashboardManagementService }, { type: i2$2.DatePipe }, { type: i3.IconService }, { type: i4.PageTitleService }, { type: i5$1.ActivatedRoute }, { type: i2$1.TranslateService }]; }, propDecorators: { moveButtonsTemplate: [{
+                type: ViewChild,
+                args: ['moveButtonsTemplate']
+            }] } });
+
+/*
+ * Copyright 2015-2023 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class DashboardManagementComponent {
+    constructor(dashboardManagementService, fb, router) {
+        this.dashboardManagementService = dashboardManagementService;
+        this.fb = fb;
+        this.router = router;
+        this.deleteRowKey$ = new BehaviorSubject('');
+        this.openModal$ = new BehaviorSubject(false);
+        this.showDeleteModal$ = new BehaviorSubject(false);
+        this.tableData$ = this.dashboardManagementService.dashboards$;
+        this.fields = [
+            {
+                viewType: ViewType.TEXT,
+                key: 'title',
+                label: 'dashboardManagement.name',
+            },
+            {
+                viewType: ViewType.TEXT,
+                key: 'description',
+                label: 'dashboardManagement.description',
+            },
+            {
+                viewType: ViewType.TEXT,
+                key: 'key',
+                label: 'dashboardManagement.key',
+            },
+            {
+                actions: [
+                    {
+                        label: 'interface.delete',
+                        callback: this.deleteDashboard.bind(this),
+                        type: 'danger',
+                    },
+                ],
+                className: 'valtimo-dashboard-management__actions',
+                viewType: ViewType.ACTION,
+                label: '',
+                key: '',
+                sortable: false,
+            },
+        ];
+    }
+    ngOnInit() {
+        this.dashboardManagementService.loadData();
+        this.form = this.fb.group({
+            description: this.fb.control('', [Validators.required]),
+            title: this.fb.control('', [Validators.required]),
+        });
+    }
+    closeModal() {
+        this.openModal$.next(false);
+        this.form.reset();
+    }
+    createDashboard() {
+        const control = this.form.get('title');
+        if (!control || !control.valid) {
+            return;
+        }
+        const newDashboard = this.form.getRawValue();
+        this.dashboardManagementService.dispatchAction(this.dashboardManagementService.createDashboard(newDashboard).pipe(finalize(() => {
+            this.closeModal();
+        })));
+    }
+    onConfirmEvent(dashboardKey) {
+        this.dashboardManagementService.dispatchAction(this.dashboardManagementService.deleteDashboard(dashboardKey).pipe(finalize(() => {
+            this.closeModal();
+        })));
+    }
+    getControlInvalid(controlKey) {
+        const control = this.form.get(controlKey);
+        if (!control) {
+            return true;
+        }
+        return !control.valid && !control.pristine;
+    }
+    openModal() {
+        this.openModal$.next(true);
+    }
+    onRowClick(item) {
+        this.router.navigate([`/dashboard-management/${item.key}`]);
+    }
+    deleteDashboard(dashboard) {
+        this.deleteRowKey$.next(dashboard.key);
+        this.showDeleteModal$.next(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardManagementComponent, deps: [{ token: DashboardManagementService }, { token: i1$1.FormBuilder }, { token: i5$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DashboardManagementComponent, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"tableData$ | async as data\">\n  <valtimo-carbon-list\n    [header]=\"true\"\n    [items]=\"data.items\"\n    [loading]=\"data.loading\"\n    [fields]=\"fields\"\n    (rowClicked)=\"onRowClick($event)\"\n    class=\"valtimo-dashboard-management__table\"\n  >\n    <ng-container header> {{ 'dashboardManagement.title' | translate }} </ng-container>\n\n    <div carbonToolbarContent>\n      <ng-container [ngTemplateOutlet]=\"addDashboardButton\"></ng-container>\n    </div>\n\n    <valtimo-no-results\n      [action]=\"addDashboardButton\"\n      description=\"{{ 'dashboardManagement.noResults.description' | translate }}\"\n      title=\"{{ 'dashboardManagement.noResults.title' | translate }}\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-container>\n\n<cds-modal\n  valtimoCdsModal\n  [open]=\"openModal$ | async\"\n  showFooter=\"true\"\n  title=\"{{ 'dashboardManagement.addDashboard' | translate }}\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'dashboardManagement.addDashboard' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form [formGroup]=\"form\" class=\"valtimo-dashboard-management__form\">\n      <cds-label [invalid]=\"getControlInvalid('title')\">\n        {{ 'dashboardManagement.addModal.name' | translate }}\n\n        <input\n          [attr.modal-primary-focus]=\"true\"\n          [invalid]=\"getControlInvalid('title')\"\n          formControlName=\"title\"\n          cdsText\n          placeholder=\"{{ 'dashboardManagement.addModal.namePlaceholder' | translate }}\"\n        />\n      </cds-label>\n\n      <cds-label\n        [helperText]=\"'dashboardManagement.addModal.descriptionHelperText' | translate\"\n        [invalid]=\"getControlInvalid('description')\"\n      >\n        {{ 'dashboardManagement.description' | translate }}\n\n        <input\n          [invalid]=\"getControlInvalid('description')\"\n          formControlName=\"description\"\n          cdsText\n          placeholder=\"{{ 'dashboardManagement.addModal.descriptionPlaceholder' | translate }}\"\n        />\n      </cds-label>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\">\n      {{ 'dashboardManagement.cancel' | translate }}\n    </button>\n\n    <button [disabled]=\"this.form.invalid\" cdsButton=\"primary\" (click)=\"createDashboard()\">\n      {{ 'dashboardManagement.create' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"dashboardManagement.deleteModal.confirm\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dashboardManagement.deleteModalContent\"\n  [outputOnConfirm]=\"deleteRowKey$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"dashboardManagement.delete\"\n  (confirmEvent)=\"onConfirmEvent($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #addDashboardButton>\n  <button cdsButton=\"primary\" (click)=\"openModal()\">\n    {{ 'dashboardManagement.addDashboard' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.valtimo-dashboard-management__actions{width:1px}.valtimo-dashboard-management__form>*:not(:last-child){margin-bottom:32px}\n"], dependencies: [{ kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm"], outputs: ["confirmEvent", "cancelEvent"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i4.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "header", "initialSortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "component", type: i4.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardManagementComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"tableData$ | async as data\">\n  <valtimo-carbon-list\n    [header]=\"true\"\n    [items]=\"data.items\"\n    [loading]=\"data.loading\"\n    [fields]=\"fields\"\n    (rowClicked)=\"onRowClick($event)\"\n    class=\"valtimo-dashboard-management__table\"\n  >\n    <ng-container header> {{ 'dashboardManagement.title' | translate }} </ng-container>\n\n    <div carbonToolbarContent>\n      <ng-container [ngTemplateOutlet]=\"addDashboardButton\"></ng-container>\n    </div>\n\n    <valtimo-no-results\n      [action]=\"addDashboardButton\"\n      description=\"{{ 'dashboardManagement.noResults.description' | translate }}\"\n      title=\"{{ 'dashboardManagement.noResults.title' | translate }}\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-container>\n\n<cds-modal\n  valtimoCdsModal\n  [open]=\"openModal$ | async\"\n  showFooter=\"true\"\n  title=\"{{ 'dashboardManagement.addDashboard' | translate }}\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'dashboardManagement.addDashboard' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form [formGroup]=\"form\" class=\"valtimo-dashboard-management__form\">\n      <cds-label [invalid]=\"getControlInvalid('title')\">\n        {{ 'dashboardManagement.addModal.name' | translate }}\n\n        <input\n          [attr.modal-primary-focus]=\"true\"\n          [invalid]=\"getControlInvalid('title')\"\n          formControlName=\"title\"\n          cdsText\n          placeholder=\"{{ 'dashboardManagement.addModal.namePlaceholder' | translate }}\"\n        />\n      </cds-label>\n\n      <cds-label\n        [helperText]=\"'dashboardManagement.addModal.descriptionHelperText' | translate\"\n        [invalid]=\"getControlInvalid('description')\"\n      >\n        {{ 'dashboardManagement.description' | translate }}\n\n        <input\n          [invalid]=\"getControlInvalid('description')\"\n          formControlName=\"description\"\n          cdsText\n          placeholder=\"{{ 'dashboardManagement.addModal.descriptionPlaceholder' | translate }}\"\n        />\n      </cds-label>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\">\n      {{ 'dashboardManagement.cancel' | translate }}\n    </button>\n\n    <button [disabled]=\"this.form.invalid\" cdsButton=\"primary\" (click)=\"createDashboard()\">\n      {{ 'dashboardManagement.create' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"dashboardManagement.deleteModal.confirm\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dashboardManagement.deleteModalContent\"\n  [outputOnConfirm]=\"deleteRowKey$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"dashboardManagement.delete\"\n  (confirmEvent)=\"onConfirmEvent($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #addDashboardButton>\n  <button cdsButton=\"primary\" (click)=\"openModal()\">\n    {{ 'dashboardManagement.addDashboard' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.valtimo-dashboard-management__actions{width:1px}.valtimo-dashboard-management__form>*:not(:last-child){margin-bottom:32px}\n"] }]
+        }], ctorParameters: function () { return [{ type: DashboardManagementService }, { type: i1$1.FormBuilder }, { type: i5$1.Router }]; } });
+
+/*
+ * Copyright 2015-2023 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const routes = [
+    {
+        path: 'dashboard-management',
+        component: DashboardManagementComponent,
+        canActivate: [AuthGuardService],
+        data: { title: 'Dashboard configuration', roles: [ROLE_ADMIN] },
+    },
+    {
+        path: 'dashboard-management/:id',
+        component: DashboardDetailsComponent,
+        canActivate: [AuthGuardService],
+        data: {
+            title: 'Dashboard details',
+            roles: [ROLE_ADMIN],
+            customPageTitle: true,
+            customPageSubtitle: true,
+        },
+    },
+];
+class DashboardManagementRoutingModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardManagementRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DashboardManagementRoutingModule, imports: [i5$1.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardManagementRoutingModule, imports: [RouterModule.forRoot(routes), RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardManagementRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forRoot(routes)],
+                    exports: [RouterModule],
+                    declarations: [],
+                }]
+        }] });
+
+/*
+ * Copyright 2015-2023 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class DashboardManagementModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DashboardManagementModule, declarations: [DashboardManagementComponent,
+            DashboardDetailsComponent,
+            WidgetModalComponent,
+            EditDashboardModalComponent,
+            WidgetConfigurationContainerComponent], imports: [ButtonModule,
+            CommonModule,
+            DashboardManagementRoutingModule,
+            DropdownModule,
+            InputModule,
+            ListModule,
+            ModalModule,
+            ReactiveFormsModule,
+            SpinnerModule,
+            TranslateModule,
+            RenderInPageHeaderDirectiveModule,
+            ConfirmationModalModule,
+            NotificationModule,
+            IconModule,
+            WidgetTranslatePipeModule,
+            CarbonListModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardManagementModule, imports: [ButtonModule,
+            CommonModule,
+            DashboardManagementRoutingModule,
+            DropdownModule,
+            InputModule,
+            ListModule,
+            ModalModule,
+            ReactiveFormsModule,
+            SpinnerModule,
+            TranslateModule,
+            RenderInPageHeaderDirectiveModule,
+            ConfirmationModalModule,
+            NotificationModule,
+            IconModule,
+            WidgetTranslatePipeModule,
+            CarbonListModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardManagementModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DashboardManagementComponent,
+                        DashboardDetailsComponent,
+                        WidgetModalComponent,
+                        EditDashboardModalComponent,
+                        WidgetConfigurationContainerComponent,
+                    ],
+                    imports: [
+                        ButtonModule,
+                        CommonModule,
+                        DashboardManagementRoutingModule,
+                        DropdownModule,
+                        InputModule,
+                        ListModule,
+                        ModalModule,
+                        ReactiveFormsModule,
+                        SpinnerModule,
+                        TranslateModule,
+                        RenderInPageHeaderDirectiveModule,
+                        ConfirmationModalModule,
+                        NotificationModule,
+                        IconModule,
+                        WidgetTranslatePipeModule,
+                        CarbonListModule,
+                    ],
+                    exports: [],
+                }]
+        }] });
+
+/*
+ * Copyright 2015-2023 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*
+ * Public API Surface of dashboard-management
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DashboardManagementModule };
+//# sourceMappingURL=valtimo-dashboard-management.mjs.map