@valtimo/dashboard-management 10.7.0 → 11.0.0

package/fesm2020/valtimo-dashboard-management.mjs

@@ -1,940 +0,0 @@
-import * as i6 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, createCarbonTableConfig, ColumnType, CarbonTableModule, ListModule, SpinnerModule, RenderInPageHeaderDirectiveModule, ConfirmationModalModule } 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 { BehaviorSubject, take, tap, 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 {
-    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`;
-    }
-    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);
-            },
-        });
-    }
-    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);
-    }
-}
-DashboardManagementService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardManagementService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
-DashboardManagementService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardManagementService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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 {
-    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);
-    }
-    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);
-    }
-    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;
-            }
-        }));
-    }
-}
-WidgetConfigurationContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WidgetConfigurationContainerComponent, deps: [{ token: i5.WidgetService }], target: i0.ɵɵFactoryTarget.Component });
-WidgetConfigurationContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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: "14.3.0", 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
-            }] } });
-
-class WidgetModalComponent {
-    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);
-    }
-    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');
-    }
-    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();
-    }
-}
-WidgetModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", 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 });
-WidgetModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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: "<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: [".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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WidgetModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-widget-modal', encapsulation: ViewEncapsulation.None, providers: [NotificationService], template: "<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: [".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 {
-    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]),
-        });
-    }
-    get dashboardTitle() {
-        return this.editDashboardForm.get('title');
-    }
-    get dashboardDescription() {
-        return this.editDashboardForm.get('description');
-    }
-    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);
-    }
-}
-EditDashboardModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EditDashboardModalComponent, deps: [{ token: i1$1.FormBuilder }, { token: DashboardManagementService }], target: i0.ɵɵFactoryTarget.Component });
-EditDashboardModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6.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: "14.3.0", 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.setTableConfig();
-    }
-    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 });
-    }
-    setTableConfig() {
-        this.tableConfig = createCarbonTableConfig({
-            fields: [
-                {
-                    columnType: ColumnType.TEXT,
-                    fieldName: 'title',
-                    translationKey: 'Name',
-                },
-                {
-                    columnType: ColumnType.TEMPLATE,
-                    template: this.moveButtonsTemplate,
-                    className: 'dashboard-detail-table__actions',
-                    fieldName: '',
-                    translationKey: '',
-                },
-                {
-                    columnType: ColumnType.ACTION,
-                    className: 'dashboard-detail-table__actions',
-                    fieldName: '',
-                    translationKey: '',
-                    actions: [
-                        {
-                            actionName: 'Edit',
-                            callback: this.editWidget.bind(this),
-                        },
-                        {
-                            actionName: '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;
-    }
-}
-DashboardDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardDetailsComponent, deps: [{ token: DashboardManagementService }, { token: i6.DatePipe }, { token: i3.IconService }, { token: i4.PageTitleService }, { token: i5$1.ActivatedRoute }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-DashboardDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashboardDetailsComponent, selector: "ng-component", viewQueries: [{ propertyName: "moveButtonsTemplate", first: true, predicate: ["moveButtonsTemplate"], descendants: true }], ngImport: i0, template: "<ng-container\n  *ngIf=\"\n    tableConfig && {\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-table\n      [data]=\"obs.widgetData\"\n      [hideTableHeader]=\"true\"\n      [loading]=\"obs.loading\"\n      [tableConfig]=\"tableConfig\"\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-table>\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: [".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: "component", type: i4.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: i4.CarbonTableComponent, selector: "valtimo-carbon-table", inputs: ["tableConfig", "paginationConfig", "hideTableHeader", "data", "loading"], outputs: ["paginationChange", "rowClick", "search"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: 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: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardDetailsComponent, decorators: [{
-            type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, template: "<ng-container\n  *ngIf=\"\n    tableConfig && {\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-table\n      [data]=\"obs.widgetData\"\n      [hideTableHeader]=\"true\"\n      [loading]=\"obs.loading\"\n      [tableConfig]=\"tableConfig\"\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-table>\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: [".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: i6.DatePipe }, { type: i3.IconService }, { type: i4.PageTitleService }, { type: i5$1.ActivatedRoute }, { type: i2$1.TranslateService }]; }, propDecorators: { moveButtonsTemplate: [{
-                type: ViewChild,
-                args: ['moveButtonsTemplate', { static: false }]
-            }] } });
-
-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.tableConfig = createCarbonTableConfig({
-            fields: [
-                {
-                    columnType: ColumnType.TEXT,
-                    fieldName: 'title',
-                    translationKey: 'dashboardManagement.name',
-                },
-                {
-                    columnType: ColumnType.TEXT,
-                    fieldName: 'description',
-                    translationKey: 'dashboardManagement.description',
-                },
-                {
-                    columnType: ColumnType.TEXT,
-                    fieldName: 'key',
-                    translationKey: 'dashboardManagement.key',
-                },
-                {
-                    actions: [
-                        {
-                            actionName: 'Delete',
-                            callback: this.deleteDashboard.bind(this),
-                            type: 'danger',
-                        },
-                    ],
-                    className: 'valtimo-dashboard-management__actions',
-                    columnType: ColumnType.ACTION,
-                    translationKey: '',
-                    fieldName: '',
-                    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);
-    }
-}
-DashboardManagementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardManagementComponent, deps: [{ token: DashboardManagementService }, { token: i1$1.FormBuilder }, { token: i5$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-DashboardManagementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashboardManagementComponent, selector: "ng-component", ngImport: i0, template: "<ng-container *ngIf=\"tableData$ | async as data\">\n  <valtimo-carbon-table\n    [data]=\"data.items\"\n    [loading]=\"data.loading\"\n    [tableConfig]=\"tableConfig\"\n    (rowClick)=\"onRowClick($event)\"\n    class=\"valtimo-dashboard-management__table\"\n  >\n    <ng-container carbonTableTitle> {{ '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-table>\n</ng-container>\n\n<cds-modal\n  valtimoIbmModal\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: [".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: "component", type: i4.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: i4.CarbonTableComponent, selector: "valtimo-carbon-table", inputs: ["tableConfig", "paginationConfig", "hideTableHeader", "data", "loading"], outputs: ["paginationChange", "rowClick", "search"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "pipe", type: i6.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: "14.3.0", ngImport: i0, type: DashboardManagementComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"tableData$ | async as data\">\n  <valtimo-carbon-table\n    [data]=\"data.items\"\n    [loading]=\"data.loading\"\n    [tableConfig]=\"tableConfig\"\n    (rowClick)=\"onRowClick($event)\"\n    class=\"valtimo-dashboard-management__table\"\n  >\n    <ng-container carbonTableTitle> {{ '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-table>\n</ng-container>\n\n<cds-modal\n  valtimoIbmModal\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: [".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 {
-}
-DashboardManagementRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardManagementRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DashboardManagementRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DashboardManagementRoutingModule, imports: [i5$1.RouterModule], exports: [RouterModule] });
-DashboardManagementRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardManagementRoutingModule, imports: [RouterModule.forRoot(routes), RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardManagementRoutingModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [RouterModule.forRoot(routes)],
-                    exports: [RouterModule],
-                    declarations: [],
-                }]
-        }] });
-
-/*
- * Copyright 2015-2020 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 {
-}
-DashboardManagementModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DashboardManagementModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DashboardManagementModule, declarations: [DashboardManagementComponent,
-        DashboardDetailsComponent,
-        WidgetModalComponent,
-        EditDashboardModalComponent,
-        WidgetConfigurationContainerComponent], imports: [ButtonModule,
-        CarbonTableModule,
-        CommonModule,
-        DashboardManagementRoutingModule,
-        DropdownModule,
-        InputModule,
-        ListModule,
-        ModalModule,
-        ReactiveFormsModule,
-        SpinnerModule,
-        TranslateModule,
-        RenderInPageHeaderDirectiveModule,
-        ConfirmationModalModule,
-        NotificationModule,
-        IconModule,
-        WidgetTranslatePipeModule] });
-DashboardManagementModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardManagementModule, imports: [ButtonModule,
-        CarbonTableModule,
-        CommonModule,
-        DashboardManagementRoutingModule,
-        DropdownModule,
-        InputModule,
-        ListModule,
-        ModalModule,
-        ReactiveFormsModule,
-        SpinnerModule,
-        TranslateModule,
-        RenderInPageHeaderDirectiveModule,
-        ConfirmationModalModule,
-        NotificationModule,
-        IconModule,
-        WidgetTranslatePipeModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardManagementModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        DashboardManagementComponent,
-                        DashboardDetailsComponent,
-                        WidgetModalComponent,
-                        EditDashboardModalComponent,
-                        WidgetConfigurationContainerComponent,
-                    ],
-                    imports: [
-                        ButtonModule,
-                        CarbonTableModule,
-                        CommonModule,
-                        DashboardManagementRoutingModule,
-                        DropdownModule,
-                        InputModule,
-                        ListModule,
-                        ModalModule,
-                        ReactiveFormsModule,
-                        SpinnerModule,
-                        TranslateModule,
-                        RenderInPageHeaderDirectiveModule,
-                        ConfirmationModalModule,
-                        NotificationModule,
-                        IconModule,
-                        WidgetTranslatePipeModule,
-                    ],
-                    exports: [],
-                }]
-        }] });
-
-/*
- * Copyright 2015-2020 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.
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { DashboardManagementModule };
-//# sourceMappingURL=valtimo-dashboard-management.mjs.map