@valtimo/logging 12.4.0 → 12.5.0

package/fesm2022/valtimo-logging.mjs

@@ -1,14 +1,343 @@
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
+import * as i2 from '@angular/common/http';
+import { HttpParams, HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import * as i1$1 from '@ngx-translate/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, NgModule } from '@angular/core';
+import * as i5 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import { ROLE_ADMIN, HttpLoaderFactory } from '@valtimo/config';
-import * as i1 from '@angular/router';
+import * as i1 from '@valtimo/config';
+import { BaseApiService, ROLE_ADMIN, HttpLoaderFactory } from '@valtimo/config';
+import { TrashCan16, Filter16 } from '@carbon/icons';
+import * as i1$1 from '@valtimo/components';
+import { CurrentCarbonTheme, CARBON_THEME, DEFAULT_PAGINATION, ViewType, CARBON_CONSTANTS, CarbonListModule } from '@valtimo/components';
+import * as i3 from 'carbon-components-angular';
+import { ModalModule, ButtonModule, DropdownModule, IconModule, InputModule, DatePickerModule, DialogModule } from 'carbon-components-angular';
+import { map, Subscription, debounceTime, BehaviorSubject, tap, switchMap, startWith, combineLatest, take } from 'rxjs';
+import * as i4$1 from 'ngx-json-viewer';
+import { NgxJsonViewerModule } from 'ngx-json-viewer';
+import * as i2$1 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import flatpickr from 'flatpickr';
+import * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { AuthGuardService } from '@valtimo/security';
 
+/*
+ * Copyright 2015-2024 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.
+ */
+var LogLevel;
+(function (LogLevel) {
+    LogLevel["DEBUG"] = "DEBUG";
+    LogLevel["ERROR"] = "ERROR";
+    LogLevel["INFO"] = "INFO";
+    LogLevel["TRACE"] = "TRACE";
+    LogLevel["WARN"] = "WARN";
+})(LogLevel || (LogLevel = {}));
+const LOG_LEVEL_TAG = {
+    [LogLevel.DEBUG]: 'teal',
+    [LogLevel.ERROR]: 'red',
+    [LogLevel.INFO]: 'blue',
+    [LogLevel.TRACE]: 'grey',
+    [LogLevel.WARN]: 'purple',
+};
+const LOG_ELLIPSIS_LIMIT = 128;
+
+/*
+ * Copyright 2015-2024 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.
+ */
+
+/*
+ * Copyright 2015-2024 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 LoggingApiService extends BaseApiService {
+    constructor(configService, httpClient) {
+        super(httpClient, configService);
+        this.configService = configService;
+        this.httpClient = httpClient;
+    }
+    getTechnicalLogs(searchRequest) {
+        const { size, page, ...searchBody } = searchRequest;
+        const params = new HttpParams({
+            fromObject: { size, page },
+        });
+        return this.httpClient.post(this.getApiUrl('management/v1/logging'), searchBody, {
+            params,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoggingApiService, deps: [{ token: i1.ConfigService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoggingApiService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoggingApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.ConfigService }, { type: i2.HttpClient }] });
+
+/*
+ * Copyright 2015-2024 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.
+ */
+
+/*
+ * Copyright 2015-2024 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 LogDetailsComponent {
+    constructor() {
+        this.open = false;
+        this.closeModalEvent = new EventEmitter();
+    }
+    onCloseSelect() {
+        this.closeModalEvent.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LogDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LogDetailsComponent, isStandalone: true, selector: "valtimo-log-details", inputs: { open: "open", logEvent: "logEvent" }, outputs: { closeModalEvent: "closeModalEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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 [open]=\"open\" size=\"lg\">\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseSelect()\">\n    {{ 'logging.detailsTitle' | translate }}\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"valtimo-log-details__content\">\n    <ngx-json-viewer *ngIf=\"logEvent\" [json]=\"logEvent\"></ngx-json-viewer>\n  </section>\n</cds-modal>\n", styles: [".valtimo-log-details__content{padding:32px}.valtimo-log-details__content ::ng-deep .ngx-json-viewer{overflow:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ModalModule }, { 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: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "ngmodule", type: NgxJsonViewerModule }, { kind: "component", type: i4$1.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LogDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-log-details', standalone: true, imports: [CommonModule, TranslateModule, ModalModule, NgxJsonViewerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 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 [open]=\"open\" size=\"lg\">\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseSelect()\">\n    {{ 'logging.detailsTitle' | translate }}\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"valtimo-log-details__content\">\n    <ngx-json-viewer *ngIf=\"logEvent\" [json]=\"logEvent\"></ngx-json-viewer>\n  </section>\n</cds-modal>\n", styles: [".valtimo-log-details__content{padding:32px}.valtimo-log-details__content ::ng-deep .ngx-json-viewer{overflow:auto!important}\n"] }]
+        }], propDecorators: { open: [{
+                type: Input
+            }], logEvent: [{
+                type: Input
+            }], closeModalEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2024 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 LogSearchComponent {
+    get propertiesArray() {
+        return this.formGroup.get('properties');
+    }
+    constructor(cdsThemeService, fb, iconService) {
+        this.cdsThemeService = cdsThemeService;
+        this.fb = fb;
+        this.iconService = iconService;
+        this.searchSubmitEvent = new EventEmitter();
+        this.theme$ = this.cdsThemeService.currentTheme$.pipe(map((theme) => theme === CurrentCarbonTheme.G10 ? CARBON_THEME.WHITE : CARBON_THEME.G100));
+        this.formGroup = this.fb.group({
+            likeFormattedMessage: this.fb.control(''),
+            level: this.fb.control({ content: '', selected: false }),
+            beforeTimestamp: this.fb.control(''),
+            afterTimestamp: this.fb.control(''),
+            properties: this.fb.array([
+                this.fb.group({
+                    key: this.fb.control(''),
+                    value: this.fb.control(''),
+                }),
+            ]),
+        });
+        this.logLevelItems = [
+            {
+                content: LogLevel.ERROR,
+            },
+            {
+                content: LogLevel.WARN,
+            },
+            {
+                content: LogLevel.INFO,
+            },
+            {
+                content: LogLevel.DEBUG,
+            },
+            {
+                content: LogLevel.TRACE,
+            },
+        ];
+        this._subscriptions = new Subscription();
+        this.iconService.register(TrashCan16);
+    }
+    ngOnInit() {
+        this.setInitialForm();
+        this._subscriptions.add(this.formGroup.valueChanges.pipe(debounceTime(500)).subscribe(() => {
+            this.searchSubmitEvent.emit(this.mapFormValueToLogSearch());
+        }));
+    }
+    ngAfterViewInit() {
+        const afterTimestampControlValue = this.formGroup.get('afterTimestamp')?.value;
+        const beforeTimestampControlValue = this.formGroup.get('beforeTimestamp')?.value;
+        if (!!afterTimestampControlValue) {
+            this._afterTimestampDatePicker.writeValue([
+                flatpickr.formatDate(new Date(afterTimestampControlValue), 'd-m-Y'),
+            ]);
+        }
+        if (!!beforeTimestampControlValue) {
+            this._beforeTimestampDatePicker.writeValue([
+                flatpickr.formatDate(new Date(beforeTimestampControlValue), 'd-m-Y'),
+            ]);
+        }
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    onClearFilter() {
+        this.formGroup.reset();
+        this._afterTimestampDatePicker.writeValue([]);
+        this._beforeTimestampDatePicker.writeValue([]);
+    }
+    onDateSelected(control, event) {
+        this.formGroup.get(control)?.patchValue(flatpickr.formatDate(event[0], 'Z'));
+    }
+    addPropertySearchField() {
+        this.propertiesArray.push(this.fb.group({
+            key: this.fb.control(''),
+            value: this.fb.control(''),
+        }));
+    }
+    removePropertySearchField(index) {
+        this.propertiesArray.removeAt(index);
+    }
+    initLogItems(formValue) {
+        if (!formValue.level)
+            return;
+        this.logLevelItems = this.logLevelItems.map((levelItem) => ({
+            ...levelItem,
+            selected: formValue.level?.content === levelItem.content,
+        }));
+    }
+    initPropertiesForm(formValue) {
+        if (!formValue.properties)
+            return;
+        for (let i = 1; i < formValue.properties.length; i++) {
+            this.addPropertySearchField();
+        }
+    }
+    mapFormValueToLogSearch() {
+        const formValue = this.formGroup.getRawValue();
+        const properties = formValue.properties.filter((property) => !!property.key && !!property.value);
+        return {
+            ...(!!formValue.likeFormattedMessage && {
+                likeFormattedMessage: formValue.likeFormattedMessage,
+            }),
+            ...(!!formValue.level?.content && { level: formValue.level.content }),
+            ...(!!formValue.afterTimestamp && { afterTimestamp: formValue.afterTimestamp }),
+            ...(!!formValue.beforeTimestamp && { beforeTimestamp: formValue.beforeTimestamp }),
+            ...(!!properties.length && { properties }),
+        };
+    }
+    mapSearchRequestToFormValue(searchRequest) {
+        return {
+            ...(searchRequest.likeFormattedMessage && {
+                likeFormattedMessage: searchRequest.likeFormattedMessage,
+            }),
+            ...(searchRequest.level && {
+                level: {
+                    content: searchRequest.level,
+                    selected: true,
+                },
+            }),
+            ...(searchRequest.afterTimestamp && { afterTimestamp: searchRequest.afterTimestamp }),
+            ...(searchRequest.beforeTimestamp && { beforeTimestamp: searchRequest.beforeTimestamp }),
+            ...(searchRequest.properties && { properties: searchRequest.properties }),
+        };
+    }
+    setInitialForm() {
+        const mappedFormValue = this.mapSearchRequestToFormValue(this.initSearchRequest);
+        this.initLogItems(mappedFormValue);
+        this.initPropertiesForm(mappedFormValue);
+        this.formGroup.patchValue(mappedFormValue, { emitEvent: false });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LogSearchComponent, deps: [{ token: i1$1.CdsThemeService }, { token: i2$1.FormBuilder }, { token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LogSearchComponent, isStandalone: true, selector: "valtimo-log-search", inputs: { initSearchRequest: "initSearchRequest" }, outputs: { searchSubmitEvent: "searchSubmitEvent" }, viewQueries: [{ propertyName: "_afterTimestampDatePicker", first: true, predicate: ["afterTimestamp"], descendants: true }, { propertyName: "_beforeTimestampDatePicker", first: true, predicate: ["beforeTimestamp"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<form\n  *ngIf=\"theme$ | async as theme\"\n  class=\"valtimo-log-search\"\n  [formGroup]=\"formGroup\"\n  (click)=\"$event.stopImmediatePropagation()\"\n>\n  <section class=\"valtimo-log-search__fields\">\n    <cds-text-label>\n      {{ 'logging.columns.formattedMessage' | translate }}\n\n      <input\n        cdsText\n        [attr.data-carbon-theme]=\"theme\"\n        formControlName=\"likeFormattedMessage\"\n        [placeholder]=\"'logging.columns.formattedMessage' | translate\"\n      />\n    </cds-text-label>\n\n    <cds-dropdown\n      formControlName=\"level\"\n      [attr.data-carbon-theme]=\"theme\"\n      [appendInline]=\"true\"\n      [label]=\"'logging.columns.level' | translate\"\n      [placeholder]=\"'logging.columns.level' | translate\"\n    >\n      <cds-dropdown-list [items]=\"logLevelItems\"></cds-dropdown-list>\n    </cds-dropdown>\n\n    <div class=\"valtimo-log-search__timestamp\">\n      <cds-date-picker\n        #afterTimestamp\n        [attr.data-carbon-theme]=\"theme\"\n        [label]=\"'logging.search.afterTimestamp' | translate\"\n        placeholder=\"DD-MM-YYYY\"\n        [dateFormat]=\"'d-m-Y'\"\n        (valueChange)=\"onDateSelected('afterTimestamp', $event)\"\n      ></cds-date-picker>\n\n      <cds-date-picker\n        #beforeTimestamp\n        [attr.data-carbon-theme]=\"theme\"\n        [label]=\"'logging.search.beforeTimestamp' | translate\"\n        placeholder=\"DD-MM-YYYY\"\n        [dateFormat]=\"'d-m-Y'\"\n        (valueChange)=\"onDateSelected('beforeTimestamp', $event)\"\n      ></cds-date-picker>\n    </div>\n  </section>\n\n  <section formArrayName=\"properties\" class=\"valtimo-log-search__properties\">\n    <span class=\"valtimo-log-search__label\"> {{ 'logging.search.properties' | translate }} </span>\n\n    @for (propertyGroup of propertiesArray.controls; track $index) {\n      <form [formGroup]=\"propertyGroup\" class=\"valtimo-log-search__property\">\n        <cds-text-label>\n          <input\n            cdsText\n            [attr.data-carbon-theme]=\"theme\"\n            formControlName=\"key\"\n            [placeholder]=\"'interface.key' | translate\"\n          />\n        </cds-text-label>\n\n        <cds-text-label>\n          <input\n            cdsText\n            [attr.data-carbon-theme]=\"theme\"\n            formControlName=\"value\"\n            [placeholder]=\"'interface.value' | translate\"\n          />\n        </cds-text-label>\n\n        <button\n          cdsButton=\"danger--ghost\"\n          [disabled]=\"$count === 1\"\n          iconOnly=\"true\"\n          type=\"button\"\n          (click)=\"removePropertySearchField($index)\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n        </button>\n      </form>\n    }\n\n    <button cdsButton=\"primary\" size=\"sm\" type=\"button\" (click)=\"addPropertySearchField()\">\n      {{ 'logging.search.addProperty' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n    </button>\n  </section>\n\n  <button cdsButton=\"tertiary\" type=\"button\" (click)=\"onClearFilter()\">\n    {{ 'interface.clear' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</form>\n", styles: [".valtimo-log-search{flex-direction:column;padding:16px;max-width:880px}.valtimo-log-search,.valtimo-log-search__property,.valtimo-log-search__timestamp{display:flex;gap:16px}.valtimo-log-search__fields{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-log-search__properties{display:flex;flex-direction:column;max-width:50%}.valtimo-log-search__properties>*:not(:last-child):not(.valtimo-log-search__label){margin-bottom:16px}.valtimo-log-search__property{align-items:flex-end}.valtimo-log-search__label{font-size:var(--cds-label-01-font-size);color:var(--cds-text-secondary)}.valtimo-log-search ::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:unset!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "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: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i3.DatePicker, selector: "cds-date-picker, ibm-date-picker", inputs: ["range", "dateFormat", "language", "label", "helperText", "rangeHelperText", "rangeLabel", "placeholder", "ariaLabel", "inputPattern", "id", "value", "theme", "disabled", "invalid", "invalidText", "warn", "warnText", "size", "rangeInvalid", "rangeInvalidText", "rangeWarn", "rangeWarnText", "skeleton", "plugins", "flatpickrOptions"], outputs: ["valueChange", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LogSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-log-search', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        ButtonModule,
+                        DropdownModule,
+                        IconModule,
+                        InputModule,
+                        ReactiveFormsModule,
+                        DatePickerModule,
+                    ], template: "<!--\n  ~ Copyright 2015-2024 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<form\n  *ngIf=\"theme$ | async as theme\"\n  class=\"valtimo-log-search\"\n  [formGroup]=\"formGroup\"\n  (click)=\"$event.stopImmediatePropagation()\"\n>\n  <section class=\"valtimo-log-search__fields\">\n    <cds-text-label>\n      {{ 'logging.columns.formattedMessage' | translate }}\n\n      <input\n        cdsText\n        [attr.data-carbon-theme]=\"theme\"\n        formControlName=\"likeFormattedMessage\"\n        [placeholder]=\"'logging.columns.formattedMessage' | translate\"\n      />\n    </cds-text-label>\n\n    <cds-dropdown\n      formControlName=\"level\"\n      [attr.data-carbon-theme]=\"theme\"\n      [appendInline]=\"true\"\n      [label]=\"'logging.columns.level' | translate\"\n      [placeholder]=\"'logging.columns.level' | translate\"\n    >\n      <cds-dropdown-list [items]=\"logLevelItems\"></cds-dropdown-list>\n    </cds-dropdown>\n\n    <div class=\"valtimo-log-search__timestamp\">\n      <cds-date-picker\n        #afterTimestamp\n        [attr.data-carbon-theme]=\"theme\"\n        [label]=\"'logging.search.afterTimestamp' | translate\"\n        placeholder=\"DD-MM-YYYY\"\n        [dateFormat]=\"'d-m-Y'\"\n        (valueChange)=\"onDateSelected('afterTimestamp', $event)\"\n      ></cds-date-picker>\n\n      <cds-date-picker\n        #beforeTimestamp\n        [attr.data-carbon-theme]=\"theme\"\n        [label]=\"'logging.search.beforeTimestamp' | translate\"\n        placeholder=\"DD-MM-YYYY\"\n        [dateFormat]=\"'d-m-Y'\"\n        (valueChange)=\"onDateSelected('beforeTimestamp', $event)\"\n      ></cds-date-picker>\n    </div>\n  </section>\n\n  <section formArrayName=\"properties\" class=\"valtimo-log-search__properties\">\n    <span class=\"valtimo-log-search__label\"> {{ 'logging.search.properties' | translate }} </span>\n\n    @for (propertyGroup of propertiesArray.controls; track $index) {\n      <form [formGroup]=\"propertyGroup\" class=\"valtimo-log-search__property\">\n        <cds-text-label>\n          <input\n            cdsText\n            [attr.data-carbon-theme]=\"theme\"\n            formControlName=\"key\"\n            [placeholder]=\"'interface.key' | translate\"\n          />\n        </cds-text-label>\n\n        <cds-text-label>\n          <input\n            cdsText\n            [attr.data-carbon-theme]=\"theme\"\n            formControlName=\"value\"\n            [placeholder]=\"'interface.value' | translate\"\n          />\n        </cds-text-label>\n\n        <button\n          cdsButton=\"danger--ghost\"\n          [disabled]=\"$count === 1\"\n          iconOnly=\"true\"\n          type=\"button\"\n          (click)=\"removePropertySearchField($index)\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n        </button>\n      </form>\n    }\n\n    <button cdsButton=\"primary\" size=\"sm\" type=\"button\" (click)=\"addPropertySearchField()\">\n      {{ 'logging.search.addProperty' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n    </button>\n  </section>\n\n  <button cdsButton=\"tertiary\" type=\"button\" (click)=\"onClearFilter()\">\n    {{ 'interface.clear' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</form>\n", styles: [".valtimo-log-search{flex-direction:column;padding:16px;max-width:880px}.valtimo-log-search,.valtimo-log-search__property,.valtimo-log-search__timestamp{display:flex;gap:16px}.valtimo-log-search__fields{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-log-search__properties{display:flex;flex-direction:column;max-width:50%}.valtimo-log-search__properties>*:not(:last-child):not(.valtimo-log-search__label){margin-bottom:16px}.valtimo-log-search__property{align-items:flex-end}.valtimo-log-search__label{font-size:var(--cds-label-01-font-size);color:var(--cds-text-secondary)}.valtimo-log-search ::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:unset!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.CdsThemeService }, { type: i2$1.FormBuilder }, { type: i3.IconService }], propDecorators: { _afterTimestampDatePicker: [{
+                type: ViewChild,
+                args: ['afterTimestamp']
+            }], _beforeTimestampDatePicker: [{
+                type: ViewChild,
+                args: ['beforeTimestamp']
+            }], initSearchRequest: [{
+                type: Input
+            }], searchSubmitEvent: [{
+                type: Output
+            }] } });
+
 /*
  * Copyright 2015-2023 Ritense BV, the Netherlands.
  *
@@ -25,13 +354,163 @@ import { AuthGuardService } from '@valtimo/security';
  * limitations under the License.
  */
 class LoggingListComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoggingListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LoggingListComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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\nLogging works!\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    constructor(activatedRoute, iconService, loggingApiService, router) {
+        this.activatedRoute = activatedRoute;
+        this.iconService = iconService;
+        this.loggingApiService = loggingApiService;
+        this.router = router;
+        this.loading$ = new BehaviorSubject(true);
+        this.logItems$ = this.activatedRoute.queryParamMap.pipe(tap(() => this.loading$.next(true)), switchMap(queryParams => this.loggingApiService.getTechnicalLogs({
+            ...queryParams['params'],
+            ...(!!queryParams['params']?.properties && {
+                properties: this.base64ToObject(queryParams['params'].properties),
+            }),
+        })), map((loggingPage) => {
+            this.pagination$.next({
+                ...this.pagination$.getValue(),
+                collectionSize: loggingPage.totalElements,
+            });
+            return loggingPage.content.map((logEvent) => ({
+                ...logEvent,
+                tags: [
+                    {
+                        content: logEvent.level,
+                        type: LOG_LEVEL_TAG[logEvent.level],
+                    },
+                ],
+            }));
+        }), startWith([]), tap(() => {
+            this.loading$.next(false);
+        }));
+        this.searchRequest$ = new BehaviorSubject({});
+        this.pagination$ = new BehaviorSubject(DEFAULT_PAGINATION);
+        this.logDetailsOpen$ = new BehaviorSubject(false);
+        this.selectedLogEvent$ = new BehaviorSubject(null);
+        this.FIELDS = [
+            {
+                key: 'timestamp',
+                label: 'logging.columns.timestamp',
+                viewType: ViewType.DATE_TIME,
+            },
+            {
+                key: 'level',
+                label: 'logging.columns.level',
+                viewType: ViewType.TAGS,
+            },
+            {
+                key: 'formattedMessage',
+                label: 'logging.columns.formattedMessage',
+                viewType: ViewType.TEXT,
+                tooltipCharLimit: LOG_ELLIPSIS_LIMIT,
+            },
+        ];
+        this._subscriptions = new Subscription();
+        this.iconService.registerAll([Filter16, TrashCan16]);
+    }
+    ngOnInit() {
+        this.setInitialParams();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    onCloseModalEvent() {
+        this.logDetailsOpen$.next(false);
+        setTimeout(() => {
+            this.selectedLogEvent$.next(null);
+        }, CARBON_CONSTANTS.modalAnimationMs);
+    }
+    onPaginationClicked(page, logItems) {
+        const activePagination = this.pagination$.getValue();
+        const searchRequest = this.searchRequest$.getValue();
+        if (!searchRequest.beforeTimestamp && activePagination.page === 1)
+            this.searchRequest$.next({ ...searchRequest, beforeTimestamp: logItems[0].timestamp });
+        this.pagination$.next({ ...activePagination, page });
+    }
+    onPaginationSet(size) {
+        const { collectionSize, page } = this.pagination$.getValue();
+        const resetPage = Math.ceil(+collectionSize / size) <= +page && +collectionSize > 0;
+        this.pagination$.next({ ...this.pagination$.getValue(), size, ...(resetPage && { page: 1 }) });
+    }
+    onRowClickedEvent(rowClickEvent) {
+        const { ctrlClick: _, ...logEvent } = rowClickEvent;
+        this.logDetailsOpen$.next(true);
+        this.selectedLogEvent$.next(logEvent);
+    }
+    onSearchSubmitEvent(searchRequest) {
+        this.searchRequest$.next(searchRequest);
+    }
+    onClearFilter() {
+        this.onSearchSubmitEvent({});
+    }
+    base64ToObject(base64string) {
+        return JSON.parse(atob(base64string));
+    }
+    objectToBase64(jsObject) {
+        return btoa(JSON.stringify(jsObject));
+    }
+    openQueryParamsSubscription() {
+        this._subscriptions.add(combineLatest([this.pagination$, this.searchRequest$]).subscribe(([pagination, searchRequest]) => {
+            const { size, page } = pagination;
+            this.router.navigate(['/logging'], {
+                queryParams: {
+                    size,
+                    page: page - 1,
+                    ...{
+                        ...searchRequest,
+                        ...(!!searchRequest.properties?.length && {
+                            properties: this.objectToBase64(searchRequest.properties),
+                        }),
+                    },
+                },
+            });
+        }));
+    }
+    mapQueryParamsToSearchRequest(queryParams) {
+        return {
+            ...(!!queryParams.likeFormattedMessage && {
+                likeFormattedMessage: queryParams.likeFormattedMessage,
+            }),
+            ...(!!queryParams.level && { level: queryParams.level }),
+            ...(!!queryParams.afterTimestamp && { afterTimestamp: queryParams.afterTimestamp }),
+            ...(!!queryParams.beforeTimestamp && { beforeTimestamp: queryParams.beforeTimestamp }),
+            ...(!!queryParams.properties && {
+                properties: this.base64ToObject(queryParams.properties),
+            }),
+        };
+    }
+    setInitialParams() {
+        this.activatedRoute.queryParamMap
+            .pipe(take(1), map(queryParams => {
+            const { size, page, ...searchRequest } = queryParams['params'];
+            return { size, page, searchRequest };
+        }))
+            .subscribe(({ size, page, searchRequest }) => {
+            this.searchRequest$.next(this.mapQueryParamsToSearchRequest(searchRequest));
+            this.pagination$.next({
+                ...this.pagination$.getValue(),
+                size: +size,
+                page: +(page ?? 0) + 1,
+            });
+            this.openQueryParamsSubscription();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoggingListComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i3.IconService }, { token: LoggingApiService }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LoggingListComponent, isStandalone: true, selector: "ng-component", providers: [LoggingApiService], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<valtimo-carbon-list\n  *ngIf=\"logItems$ | async as logItems\"\n  [items]=\"logItems\"\n  [fields]=\"FIELDS\"\n  [loading]=\"loading$ | async\"\n  [pagination]=\"pagination$ | async\"\n  paginationIdentifier=\"logging\"\n  (paginationClicked)=\"onPaginationClicked($event, logItems)\"\n  (paginationSet)=\"onPaginationSet($event)\"\n  (rowClicked)=\"onRowClickedEvent($event)\"\n>\n  <valtimo-no-results\n    [action]=\"clearSearchButton\"\n    [description]=\"'logging.noResults.description' | translate\"\n    [title]=\"'logging.noResults.title' | translate\"\n  ></valtimo-no-results>\n\n  <button\n    carbonToolbarContent\n    [cdsOverflowMenu]=\"logSearch\"\n    [customPane]=\"true\"\n    [iconOnly]=\"true\"\n    [flip]=\"true\"\n    [offset]=\"{x: 0, y: 47}\"\n    cdsButton=\"ghost\"\n    placement=\"bottom\"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"filter\" size=\"16\"></svg>\n  </button>\n</valtimo-carbon-list>\n\n<valtimo-log-details\n  [open]=\"logDetailsOpen$ | async\"\n  [logEvent]=\"selectedLogEvent$ | async\"\n  (closeModalEvent)=\"onCloseModalEvent()\"\n></valtimo-log-details>\n\n<ng-template #logSearch>\n  <valtimo-log-search\n    [initSearchRequest]=\"searchRequest$ | async\"\n    (searchSubmitEvent)=\"onSearchSubmitEvent($event)\"\n  ></valtimo-log-search>\n</ng-template>\n\n<ng-template #clearSearchButton>\n  <button cdsButton=\"primary\" (click)=\"onClearFilter()\">\n    {{ 'interface.clear' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1$1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: DialogModule }, { kind: "directive", type: i3.OverflowMenuDirective, selector: "[cdsOverflowMenu], [ibmOverflowMenu]", inputs: ["ibmOverflowMenu", "cdsOverflowMenu", "flip", "offset", "wrapperClass", "customPane"], exportAs: ["overflowMenu"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: LogDetailsComponent, selector: "valtimo-log-details", inputs: ["open", "logEvent"], outputs: ["closeModalEvent"] }, { kind: "component", type: LogSearchComponent, selector: "valtimo-log-search", inputs: ["initSearchRequest"], outputs: ["searchSubmitEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoggingListComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TranslateModule], template: "<!--\n  ~ Copyright 2015-2024 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\nLogging works!\n" }]
-        }] });
+            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        ButtonModule,
+                        CarbonListModule,
+                        DialogModule,
+                        DropdownModule,
+                        IconModule,
+                        LogDetailsComponent,
+                        LogSearchComponent,
+                    ], providers: [LoggingApiService], template: "<!--\n  ~ Copyright 2015-2024 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<valtimo-carbon-list\n  *ngIf=\"logItems$ | async as logItems\"\n  [items]=\"logItems\"\n  [fields]=\"FIELDS\"\n  [loading]=\"loading$ | async\"\n  [pagination]=\"pagination$ | async\"\n  paginationIdentifier=\"logging\"\n  (paginationClicked)=\"onPaginationClicked($event, logItems)\"\n  (paginationSet)=\"onPaginationSet($event)\"\n  (rowClicked)=\"onRowClickedEvent($event)\"\n>\n  <valtimo-no-results\n    [action]=\"clearSearchButton\"\n    [description]=\"'logging.noResults.description' | translate\"\n    [title]=\"'logging.noResults.title' | translate\"\n  ></valtimo-no-results>\n\n  <button\n    carbonToolbarContent\n    [cdsOverflowMenu]=\"logSearch\"\n    [customPane]=\"true\"\n    [iconOnly]=\"true\"\n    [flip]=\"true\"\n    [offset]=\"{x: 0, y: 47}\"\n    cdsButton=\"ghost\"\n    placement=\"bottom\"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"filter\" size=\"16\"></svg>\n  </button>\n</valtimo-carbon-list>\n\n<valtimo-log-details\n  [open]=\"logDetailsOpen$ | async\"\n  [logEvent]=\"selectedLogEvent$ | async\"\n  (closeModalEvent)=\"onCloseModalEvent()\"\n></valtimo-log-details>\n\n<ng-template #logSearch>\n  <valtimo-log-search\n    [initSearchRequest]=\"searchRequest$ | async\"\n    (searchSubmitEvent)=\"onSearchSubmitEvent($event)\"\n  ></valtimo-log-search>\n</ng-template>\n\n<ng-template #clearSearchButton>\n  <button cdsButton=\"primary\" (click)=\"onClearFilter()\">\n    {{ 'interface.clear' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i3.IconService }, { type: LoggingApiService }, { type: i1$2.Router }] });
 
 /*
  * Copyright 2015-2023 Ritense BV, the Netherlands.
@@ -58,7 +537,7 @@ const routes = [
 ];
 class LoggingRoutingModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoggingRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: LoggingRoutingModule, imports: [i1.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: LoggingRoutingModule, imports: [i1$2.RouterModule], exports: [RouterModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoggingRoutingModule, imports: [RouterModule.forRoot(routes), RouterModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoggingRoutingModule, decorators: [{
@@ -87,7 +566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 class LoggingModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoggingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: LoggingModule, imports: [CommonModule,
-            LoggingRoutingModule, i1$1.TranslateModule, LoggingListComponent] }); }
+            LoggingRoutingModule, i5.TranslateModule, LoggingListComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoggingModule, imports: [CommonModule,
             LoggingRoutingModule,
             TranslateModule.forRoot({