ionic-logging-viewer 17.0.0 → 21.0.0

package/README.md

@@ -1,9 +1,11 @@
 # ionic-logging-viewer
 
-**The dependencies used by the latest version are the same as needed for [Ionic 6.1.9](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md). For older versions use:**
+**The dependencies used by the latest version are the same as needed for [Ionic 8.0.0](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md). For older versions use:**
 
 | ionic-logging-viewer | Ionic | Angular
 | ------ | -------- | ------
+| 21.0.0 | >= 8.0.0 | >=21.0.0
+| 18.0.0 | >= 7.0.0 | >=17.0.0
 | 17.0.0 | >= 6.1.9 | ^16.0.0
 | 16.0.0 | >= 6.1.9 | ^15.0.0
 | 15.0.0 | >= 6.1.9 | ^14.0.0
@@ -50,18 +52,18 @@ npm install ionic-logging-viewer --save
 
 ### import module
 
-Import the `LoggingViewerModule` in to your `app.module.ts`:
-
-```typescript
-import { LoggingViewerModule } from "ionic-logging-viewer";
-...
-@NgModule({
-  imports: [
-    IonicModule.forRoot(AppComponent),
-    LoggingViewerModule
-  ],
-  ...
-})
+Call `configure()` in your `app.config.ts`:
+
+```TypeScript
+export const appConfig: ApplicationConfig = {
+  providers: [
+    ...
+    provideAppInitializer(() => {
+      const loggingService = inject(LoggingService);
+      loggingService.configure(environment.logging);
+    }),
+  ]
+};
 ```
 
 ### LoggingViewerComponent directive
@@ -116,4 +118,4 @@ Just fill the `LoggingViewerTranslation` object.
 
 ## API
 
-see [API documentation](https://ritzlgrmft.github.io/ionic-logging-service//viewer/index.html).
+see [API documentation](https://ritzlgrmft.github.io/ionic-logging-service/viewer/index.html).

package/fesm2022/ionic-logging-viewer.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Component, Input, NgModule } from '@angular/core';
-import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i4 from '@angular/forms';
+import { inject, signal, Injectable, input, computed, effect, Component } from '@angular/core';
+import { LoggingService, LogLevelConverter } from 'ionic-logging-service';
+import * as i1 from '@ionic/angular';
+import { IonicModule, Platform, AlertController, ModalController } from '@ionic/angular';
+import { DatePipe } from '@angular/common';
+import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i1$1 from '@ionic/angular';
-import { IonicModule } from '@ionic/angular';
-import * as i1 from 'ionic-logging-service';
-import { LogLevelConverter } from 'ionic-logging-service';
+import { addIcons } from 'ionicons';
+import { trashOutline, closeCircle } from 'ionicons/icons';
 
 /**
  * Service for storing filter settings for logging viewer.
@@ -18,56 +18,30 @@ class LoggingViewerFilterService {
      *
      * @param loggingService needed for internal logging.
      */
-    constructor(loggingService) {
-        this.logger = loggingService.getLogger("Ionic.Logging.Viewer.Filter.Service");
+    constructor() {
+        this.loggingService = inject(LoggingService);
+        /**
+         * Signal for the current log level.
+         */
+        this.level = signal("DEBUG", ...(ngDevMode ? [{ debugName: "level" }] : []));
+        /**
+         * Signal for the current search value.
+         */
+        this.search = signal("", ...(ngDevMode ? [{ debugName: "search" }] : []));
+        this.logger = this.loggingService.getLogger("Ionic.Logging.Viewer.Filter.Service");
         const methodName = "ctor";
         this.logger.entry(methodName);
-        this.levelValue = "DEBUG";
-        this.searchValue = "";
-        this.filterChanged = new EventEmitter();
         this.logger.exit(methodName);
     }
-    /**
-     * Gets the current log level.
-     *
-     * @return log level
-     */
-    get level() {
-        return this.levelValue;
-    }
-    /**
-     * Sets the new log level and emits a filterChanged event.
-     *
-     * @param value new slog level
-     */
-    set level(value) {
-        this.levelValue = value;
-        this.filterChanged.emit();
-    }
-    /**
-     * Gets the current search value.
-     *
-     * @return search value
-     */
-    // eslint-disable-next-line @typescript-eslint/member-ordering
-    get search() {
-        return this.searchValue;
-    }
-    /**
-     * Sets the new search value and emits a filterChanged event.
-     *
-     * @param value new search value
-     */
-    set search(value) {
-        this.searchValue = value;
-        this.filterChanged.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LoggingViewerFilterService, deps: [{ token: i1.LoggingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LoggingViewerFilterService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoggingViewerFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoggingViewerFilterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LoggingViewerFilterService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.LoggingService }]; } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoggingViewerFilterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
 
 /**
  * Component for displaying the current logs.
@@ -80,52 +54,42 @@ class LoggingViewerComponent {
     /**
      * Creates a new instance of the component.
      */
-    constructor(loggingService, loggingViewerFilterService) {
-        this.loggingService = loggingService;
-        this.loggingViewerFilterService = loggingViewerFilterService;
-        this.logger = loggingService.getLogger("Ionic.Logging.Viewer.Component");
+    constructor() {
+        this.loggingService = inject(LoggingService);
+        this.loggingViewerFilterService = inject(LoggingViewerFilterService);
+        /**
+         * Comma-separated list of localStorageKeys. If set, the logs get loaded from localStorage instead of memory.
+         */
+        this.localStorageKeys = input(undefined, ...(ngDevMode ? [{ debugName: "localStorageKeys" }] : []));
+        this.logMessages = computed(() => {
+            if (this.localStorageKeys()) {
+                let messages = [];
+                for (const localStorageKey of this.localStorageKeys().split(",")) {
+                    messages = messages.concat(this.loggingService.getLogMessagesFromLocalStorage(localStorageKey));
+                }
+                return messages.sort((a, b) => a.timeStamp.getTime() - b.timeStamp.getTime());
+            }
+            else {
+                return this.loggingService.getLogMessages()();
+            }
+        }, ...(ngDevMode ? [{ debugName: "logMessages" }] : []));
+        this.logger = this.loggingService.getLogger("Ionic.Logging.Viewer.Component");
         const methodName = "ctor";
         this.logger.entry(methodName);
-        this.logger.exit(methodName);
-    }
-    /**
-     * Initialize the component.
-     *
-     * This is done by reading the filter data from [LoggingViewerFilterService](LoggingViewerFilterService.html)
-     * and the log messages from [LoggingService](../../../ionic-logging-service/typedoc/index.html).
-     * If the localStorageKeys property is set, the messages are read from local storage.
-     */
-    ngOnInit() {
-        const methodName = "ngOnInit";
-        this.logger.entry(methodName);
-        this.loadLogMessages();
-        this.filterLogMessages();
-        // subscribe to loggingService.logMessagesChanged event, to refresh, when new message is logged
-        this.logMessagesChangedSubscription = this.loggingService.logMessagesChanged.subscribe(async () => {
-            this.loadLogMessages();
-            this.filterLogMessages();
+        // refresh the messages, when messages or filter are modified
+        effect(() => {
+            const logMessages = this.logMessages();
+            const level = this.loggingViewerFilterService.level();
+            const search = this.loggingViewerFilterService.search();
+            this.filterLogMessages(logMessages, level, search);
         });
-        // subscribe to loggingViewerFilterService.filterChanged event, to refresh, when filter is modified
-        this.filterChangedSubscription = this.loggingViewerFilterService.filterChanged.subscribe(() => {
-            this.filterLogMessages();
-        });
-        this.logger.exit(methodName);
-    }
-    /**
-     * Clean up.
-     */
-    ngOnDestroy() {
-        const methodName = "ngOnDestroy";
-        this.logger.entry(methodName);
-        this.logMessagesChangedSubscription.unsubscribe();
-        this.filterChangedSubscription.unsubscribe();
         this.logger.exit(methodName);
     }
     /**
      * Filter the log messages.
      */
-    filterLogMessages() {
-        this.logMessagesForDisplay = this.logMessages.filter((message) => this.filterLogMessagesByLevel(message) && this.filterLogMessagesBySearch(message));
+    filterLogMessages(logMessages, level, search) {
+        this.logMessagesForDisplay = logMessages.filter((message) => this.filterLogMessagesByLevel(message, level) && this.filterLogMessagesBySearch(message, search));
     }
     /**
      * Check if the log message's level fulfills the level condition.
@@ -133,9 +97,8 @@ class LoggingViewerComponent {
      * @param message the log message to check
      * @returns true if check was successful
      */
-    filterLogMessagesByLevel(message) {
-        const levelValue = this.loggingViewerFilterService.level;
-        return LogLevelConverter.levelFromString(message.level) >= LogLevelConverter.levelFromString(levelValue);
+    filterLogMessagesByLevel(message, level) {
+        return LogLevelConverter.levelFromString(message.level) >= LogLevelConverter.levelFromString(level);
     }
     /**
      * Check if the log message fulfills the search condition.
@@ -148,37 +111,19 @@ class LoggingViewerComponent {
      * @param message the log message to check
      * @returns true if check was successful
      */
-    filterLogMessagesBySearch(message) {
-        const searchValue = new RegExp(this.loggingViewerFilterService.search, "i");
-        return message.logger.search(searchValue) >= 0 ||
-            message.methodName.search(searchValue) >= 0 ||
-            message.message.join("|").search(searchValue) >= 0;
+    filterLogMessagesBySearch(message, search) {
+        const searchRegex = new RegExp(search, "i");
+        return message.logger.search(searchRegex) >= 0 ||
+            message.methodName.search(searchRegex) >= 0 ||
+            message.message.join("|").search(searchRegex) >= 0;
     }
-    /**
-     * Load the current log messages.
-     * For unit test purposes mainly.
-     */
-    loadLogMessages() {
-        if (this.localStorageKeys) {
-            this.logMessages = [];
-            for (const localStorageKey of this.localStorageKeys.split(",")) {
-                this.logMessages = this.logMessages.concat(this.loggingService.getLogMessagesFromLocalStorage(localStorageKey));
-            }
-            this.logMessages = this.logMessages.sort((a, b) => a.timeStamp.getTime() - b.timeStamp.getTime());
-        }
-        else {
-            this.logMessages = this.loggingService.getLogMessages();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LoggingViewerComponent, deps: [{ token: i1.LoggingService }, { token: LoggingViewerFilterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: LoggingViewerComponent, selector: "ionic-logging-viewer", inputs: { localStorageKeys: "localStorageKeys" }, ngImport: i0, template: "<ion-list>\n\t<ion-item *ngFor=\"let logMessage of logMessagesForDisplay\">\n\t\t<ion-label>\n\t\t\t<p>{{ logMessage.timeStamp | date:'dd.MM.yyyy HH:mm:ss' }} {{ logMessage.level }}</p>\n\t\t\t<p>{{ logMessage.logger }}</p>\n\t\t\t<p>\n\t\t\t\t{{ logMessage.methodName }}\n\t\t\t\t<span *ngFor=\"let messagePart of logMessage.message\"> {{ messagePart }} </span>\n\t\t\t</p>\n\t\t</ion-label>\n\t</ion-item>\n</ion-list>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i1$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoggingViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: LoggingViewerComponent, isStandalone: true, selector: "ionic-logging-viewer", inputs: { localStorageKeys: { classPropertyName: "localStorageKeys", publicName: "localStorageKeys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ion-list>\n  @for (logMessage of logMessagesForDisplay; track logMessage) {\n    <ion-item>\n      <ion-label>\n        <p>{{ logMessage.timeStamp | date:'dd.MM.yyyy HH:mm:ss' }} {{ logMessage.level }}</p>\n        <p>{{ logMessage.logger }}</p>\n        <p>\n          {{ logMessage.methodName }}\n          @for (messagePart of logMessage.message; track messagePart) {\n            <span> {{ messagePart }} </span>\n          }\n        </p>\n      </ion-label>\n    </ion-item>\n  }\n</ion-list>", styles: [""], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LoggingViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoggingViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ionic-logging-viewer", template: "<ion-list>\n\t<ion-item *ngFor=\"let logMessage of logMessagesForDisplay\">\n\t\t<ion-label>\n\t\t\t<p>{{ logMessage.timeStamp | date:'dd.MM.yyyy HH:mm:ss' }} {{ logMessage.level }}</p>\n\t\t\t<p>{{ logMessage.logger }}</p>\n\t\t\t<p>\n\t\t\t\t{{ logMessage.methodName }}\n\t\t\t\t<span *ngFor=\"let messagePart of logMessage.message\"> {{ messagePart }} </span>\n\t\t\t</p>\n\t\t</ion-label>\n\t</ion-item>\n</ion-list>" }]
-        }], ctorParameters: function () { return [{ type: i1.LoggingService }, { type: LoggingViewerFilterService }]; }, propDecorators: { localStorageKeys: [{
-                type: Input
-            }] } });
+            args: [{ selector: "ionic-logging-viewer", imports: [IonicModule, DatePipe], template: "<ion-list>\n  @for (logMessage of logMessagesForDisplay; track logMessage) {\n    <ion-item>\n      <ion-label>\n        <p>{{ logMessage.timeStamp | date:'dd.MM.yyyy HH:mm:ss' }} {{ logMessage.level }}</p>\n        <p>{{ logMessage.logger }}</p>\n        <p>\n          {{ logMessage.methodName }}\n          @for (messagePart of logMessage.message; track messagePart) {\n            <span> {{ messagePart }} </span>\n          }\n        </p>\n      </ion-label>\n    </ion-item>\n  }\n</ion-list>" }]
+        }], ctorParameters: () => [], propDecorators: { localStorageKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "localStorageKeys", required: false }] }] } });
 
 /**
  * Component for displaying the log levels for filtering the current logs.
@@ -191,56 +136,38 @@ class LoggingViewerLevelsComponent {
     /**
      * Creates a new instance of the component.
      */
-    constructor(loggingService, loggingViewerFilterService) {
-        this.loggingViewerFilterService = loggingViewerFilterService;
-        this.logger = loggingService.getLogger("Ionic.Logging.Viewer.Levels.Component");
+    constructor() {
+        this.loggingService = inject(LoggingService);
+        this.loggingViewerFilterService = inject(LoggingViewerFilterService);
+        this.logger = this.loggingService.getLogger("Ionic.Logging.Viewer.Levels.Component");
         const methodName = "ctor";
         this.logger.entry(methodName);
         this.logLevels = [];
         this.logLevels.push("DEBUG", "INFO", "WARN", "ERROR");
-        this.logger.exit(methodName);
-    }
-    /**
-     * Initialize the component.
-     *
-     * This is done by reading the filter data from [LoggingViewerFilterService](LoggingViewerFilterService.html).
-     */
-    ngOnInit() {
-        const methodName = "ngOnInit";
-        this.logger.entry(methodName);
-        this.selectedLevel = this.loggingViewerFilterService.level;
-        // subscribe to loggingViewerFilterService.filterChanged event, to refresh,
+        // handle signals of loggingViewerFilterService, to refresh,
         // when someone else modifies the level
-        this.filterChangedSubscription = this.loggingViewerFilterService.filterChanged.subscribe(() => {
-            this.selectedLevel = this.loggingViewerFilterService.level;
+        effect(() => {
+            const level = this.loggingViewerFilterService.level();
+            this.selectedLevel = level;
         });
         this.logger.exit(methodName);
     }
-    /**
-     * Clean up.
-     */
-    ngOnDestroy() {
-        const methodName = "ngOnDestroy";
-        this.logger.entry(methodName);
-        this.filterChangedSubscription.unsubscribe();
-        this.logger.exit(methodName);
-    }
     /**
      * Callback when the level was changed in the UI.
      */
     onLevelChanged() {
         const methodName = "onLevelChanged";
         this.logger.entry(methodName, this.selectedLevel);
-        this.loggingViewerFilterService.level = this.selectedLevel;
+        this.loggingViewerFilterService.level.set(this.selectedLevel);
         this.logger.exit(methodName);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LoggingViewerLevelsComponent, deps: [{ token: i1.LoggingService }, { token: LoggingViewerFilterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: LoggingViewerLevelsComponent, selector: "ionic-logging-viewer-levels", ngImport: i0, template: "<ion-segment [(ngModel)]=\"selectedLevel\" (ionChange)=\"onLevelChanged()\">\n\t<ion-segment-button *ngFor=\"let logLevel of logLevels\" [value]=\"logLevel\">\n\t\t<ion-label>{{ logLevel }}</ion-label>\n\t</ion-segment-button>\n</ion-segment>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i1$1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { kind: "directive", type: i1$1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoggingViewerLevelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: LoggingViewerLevelsComponent, isStandalone: true, selector: "ionic-logging-viewer-levels", ngImport: i0, template: "<ion-segment [(ngModel)]=\"selectedLevel\" (ionChange)=\"onLevelChanged()\">\n  @for (logLevel of logLevels; track logLevel) {\n    <ion-segment-button [value]=\"logLevel\">\n      <ion-label>{{ logLevel }}</ion-label>\n    </ion-segment-button>\n  }\n</ion-segment>", styles: [""], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: i1.IonSegmentButton, selector: "ion-segment-button", inputs: ["contentId", "disabled", "layout", "mode", "type", "value"] }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LoggingViewerLevelsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoggingViewerLevelsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ionic-logging-viewer-levels", template: "<ion-segment [(ngModel)]=\"selectedLevel\" (ionChange)=\"onLevelChanged()\">\n\t<ion-segment-button *ngFor=\"let logLevel of logLevels\" [value]=\"logLevel\">\n\t\t<ion-label>{{ logLevel }}</ion-label>\n\t</ion-segment-button>\n</ion-segment>" }]
-        }], ctorParameters: function () { return [{ type: i1.LoggingService }, { type: LoggingViewerFilterService }]; } });
+            args: [{ selector: "ionic-logging-viewer-levels", imports: [IonicModule, FormsModule], template: "<ion-segment [(ngModel)]=\"selectedLevel\" (ionChange)=\"onLevelChanged()\">\n  @for (logLevel of logLevels; track logLevel) {\n    <ion-segment-button [value]=\"logLevel\">\n      <ion-label>{{ logLevel }}</ion-label>\n    </ion-segment-button>\n  }\n</ion-segment>" }]
+        }], ctorParameters: () => [] });
 
 /**
  * Component for displaying the search bar for filtering the current logs.
@@ -253,59 +180,40 @@ class LoggingViewerSearchComponent {
     /**
      * Creates a new instance of the component.
      */
-    constructor(loggingService, loggingViewerFilterService) {
-        this.loggingViewerFilterService = loggingViewerFilterService;
-        this.logger = loggingService.getLogger("Ionic.Logging.Viewer.Search.Component");
+    constructor() {
+        this.loggingService = inject(LoggingService);
+        this.loggingViewerFilterService = inject(LoggingViewerFilterService);
+        /**
+         * Placeholder to be shown in the empty search bar.
+         */
+        this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.logger = this.loggingService.getLogger("Ionic.Logging.Viewer.Search.Component");
         const methodName = "ctor";
         this.logger.entry(methodName);
-        this.logger.exit(methodName);
-    }
-    /**
-     * Initialize the component.
-     *
-     * This is done by reading the filter data from [LoggingViewerFilterService](LoggingViewerFilterService.html).
-     */
-    ngOnInit() {
-        const methodName = "ngOnInit";
-        this.logger.entry(methodName);
-        if (!this.placeholder) {
-            this.placeholder = "Search";
-        }
-        this.search = this.loggingViewerFilterService.search;
-        // subscribe to loggingViewerFilterService.filterChanged event, to refresh,
+        // handle signals of loggingViewerFilterService, to refresh,
         // when someone else modifies the search value
-        this.filterChangedSubscription = this.loggingViewerFilterService.filterChanged.subscribe(() => {
-            this.search = this.loggingViewerFilterService.search;
+        effect(() => {
+            const search = this.loggingViewerFilterService.search();
+            this.search = search;
         });
         this.logger.exit(methodName);
     }
-    /**
-     * Clean up.
-     */
-    ngOnDestroy() {
-        const methodName = "ngOnDestroy";
-        this.logger.entry(methodName);
-        this.filterChangedSubscription.unsubscribe();
-        this.logger.exit(methodName);
-    }
     /**
      * Callback when the search value was changed in the UI.
      */
     onSearchChanged() {
         const methodName = "onSearchChanged";
         this.logger.entry(methodName, this.search);
-        this.loggingViewerFilterService.search = this.search;
+        this.loggingViewerFilterService.search.set(this.search);
         this.logger.exit(methodName);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LoggingViewerSearchComponent, deps: [{ token: i1.LoggingService }, { token: LoggingViewerFilterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: LoggingViewerSearchComponent, selector: "ionic-logging-viewer-search", inputs: { placeholder: "placeholder" }, ngImport: i0, template: "<ion-searchbar placeholder=\"{{placeholder}}\" [(ngModel)]=\"search\" (ionChange)=\"onSearchChanged()\"></ion-searchbar>", styles: ["ion-searchbar{padding-top:3px;padding-bottom:0}\n"], dependencies: [{ kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "directive", type: i1$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoggingViewerSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: LoggingViewerSearchComponent, isStandalone: true, selector: "ionic-logging-viewer-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ion-searchbar placeholder=\"{{placeholder() || 'Search'}}\" [(ngModel)]=\"search\" [debounce]=\"1000\"\n    (ionInput)=\"onSearchChanged()\"></ion-searchbar>", styles: ["ion-searchbar{padding-top:3px;padding-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "directive", type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LoggingViewerSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoggingViewerSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ionic-logging-viewer-search", template: "<ion-searchbar placeholder=\"{{placeholder}}\" [(ngModel)]=\"search\" (ionChange)=\"onSearchChanged()\"></ion-searchbar>", styles: ["ion-searchbar{padding-top:3px;padding-bottom:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.LoggingService }, { type: LoggingViewerFilterService }]; }, propDecorators: { placeholder: [{
-                type: Input
-            }] } });
+            args: [{ selector: "ionic-logging-viewer-search", imports: [IonicModule, FormsModule], template: "<ion-searchbar placeholder=\"{{placeholder() || 'Search'}}\" [(ngModel)]=\"search\" [debounce]=\"1000\"\n    (ionInput)=\"onSearchChanged()\"></ion-searchbar>", styles: ["ion-searchbar{padding-top:3px;padding-bottom:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
 
 /**
  * Ionic modal containing [LoggingViewerComponent](LoggingViewerComponent.html),
@@ -318,14 +226,35 @@ class LoggingViewerModalComponent {
     /**
      * Creates a new instance of the component.
      */
-    constructor(platform, alertController, modalController, loggingService) {
-        this.alertController = alertController;
-        this.modalController = modalController;
-        this.loggingService = loggingService;
-        this.logger = loggingService.getLogger("Ionic.Logging.Viewer.Modal.Component");
+    constructor() {
+        this.platform = inject(Platform);
+        this.alertController = inject(AlertController);
+        this.modalController = inject(ModalController);
+        this.loggingService = inject(LoggingService);
+        /**
+         * Language to be used for the modal.
+         * Currently supported: en, de
+         */
+        this.language = input(undefined, ...(ngDevMode ? [{ debugName: "language" }] : []));
+        /**
+         * Translation to be used for the modal.
+         * If specified, the language is ignored.
+         */
+        this.translation = input(undefined, ...(ngDevMode ? [{ debugName: "translation" }] : []));
+        /**
+         * Comma-separated list of localStorageKeys. If set, the logs get loaded from localStorage instead of memory.
+         */
+        this.localStorageKeys = input(undefined, ...(ngDevMode ? [{ debugName: "localStorageKeys" }] : []));
+        /**
+         * Flag showing a delete button, which removes all existing log messages.
+         */
+        this.allowClearLogs = input(true, ...(ngDevMode ? [{ debugName: "allowClearLogs" }] : []));
+        this.logger = this.
+            loggingService.getLogger("Ionic.Logging.Viewer.Modal.Component");
         const methodName = "ctor";
         this.logger.entry(methodName);
-        this.isAndroid = platform.is("android");
+        this.isAndroid = this.platform.is("android");
+        addIcons({ closeCircle, trashOutline });
         this.logger.exit(methodName);
     }
     /**
@@ -396,8 +325,8 @@ class LoggingViewerModalComponent {
      * Clear logs.
      */
     clearLogs() {
-        if (this.localStorageKeys) {
-            for (const localStorageKey of this.localStorageKeys.split(",")) {
+        if (this.localStorageKeys()) {
+            for (const localStorageKey of this.localStorageKeys().split(",")) {
                 this.loggingService.removeLogMessagesFromLocalStorage(localStorageKey);
             }
         }
@@ -412,74 +341,25 @@ class LoggingViewerModalComponent {
      * - English translation, otherwise
      */
     getTranslation() {
-        if (typeof this.translation !== "undefined") {
-            return this.translation;
+        const language = this.language();
+        const translation = this.translation();
+        if (typeof translation !== "undefined") {
+            return translation;
         }
-        else if (typeof this.language !== "undefined" && typeof this.translations[this.language] === "object") {
-            return this.translations[this.language];
+        else if (typeof language !== "undefined" && typeof this.translations[language] === "object") {
+            return this.translations[language];
         }
         else {
             return this.translations[LoggingViewerModalComponent.languageEn];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LoggingViewerModalComponent, deps: [{ token: i1$1.Platform }, { token: i1$1.AlertController }, { token: i1$1.ModalController }, { token: i1.LoggingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.3", type: LoggingViewerModalComponent, selector: "ionic-logging-viewer-modal", inputs: { language: "language", translation: "translation", localStorageKeys: "localStorageKeys", allowClearLogs: "allowClearLogs" }, ngImport: i0, template: "<ion-header>\n\t<ion-toolbar color=primary>\n\t\t<ion-title>{{ getTranslation().title }}</ion-title>\n\t\t<ion-buttons slot=\"start\">\n\t\t\t<ion-button *ngIf=\"!isAndroid\" (click)=\"onClose()\">\n\t\t\t\t{{ getTranslation().cancel }}\n\t\t\t</ion-button>\n\t\t\t<ion-button *ngIf=\"isAndroid\" icon-only (click)=\"onClose()\">\n\t\t\t\t<ion-icon name=\"md-close\"></ion-icon>\n\t\t\t</ion-button>\n\t\t</ion-buttons>\n\t</ion-toolbar>\n\t<ion-toolbar>\n\t\t<ionic-logging-viewer-search [placeholder]=\"getTranslation().searchPlaceholder\"></ionic-logging-viewer-search>\n\t\t<ion-buttons slot=\"end\" *ngIf=\"allowClearLogs !== false\" class=\"clearLogs\">\n\t\t\t<ion-button (click)=\"onClearLogs()\">\n\t\t\t\t<ion-icon name=\"trash-outline\"></ion-icon>\n\t\t\t</ion-button>\n\t\t</ion-buttons>\n\t</ion-toolbar>\n\t<ion-toolbar>\n\t\t<ionic-logging-viewer-levels></ionic-logging-viewer-levels>\n\t</ion-toolbar>\n</ion-header>\n<ion-content>\n\t<ionic-logging-viewer [localStorageKeys]=\"localStorageKeys\"></ionic-logging-viewer>\n</ion-content>", styles: ["ionic-logging-viewer-levels{width:100%;padding-left:12px;padding-right:12px}.clearLogs{padding-top:3px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: LoggingViewerComponent, selector: "ionic-logging-viewer", inputs: ["localStorageKeys"] }, { kind: "component", type: LoggingViewerSearchComponent, selector: "ionic-logging-viewer-search", inputs: ["placeholder"] }, { kind: "component", type: LoggingViewerLevelsComponent, selector: "ionic-logging-viewer-levels" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoggingViewerModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: LoggingViewerModalComponent, isStandalone: true, selector: "ionic-logging-viewer-modal", inputs: { language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, translation: { classPropertyName: "translation", publicName: "translation", isSignal: true, isRequired: false, transformFunction: null }, localStorageKeys: { classPropertyName: "localStorageKeys", publicName: "localStorageKeys", isSignal: true, isRequired: false, transformFunction: null }, allowClearLogs: { classPropertyName: "allowClearLogs", publicName: "allowClearLogs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=primary>\n    <ion-title>{{ getTranslation().title }}</ion-title>\n    <ion-buttons slot=\"start\">\n      @if (!isAndroid) {\n      <ion-button (click)=\"onClose()\">\n        {{ getTranslation().cancel }}\n      </ion-button>\n      } @else {\n      <ion-button icon-only (click)=\"onClose()\">\n        <ion-icon name=\"close-circle\"></ion-icon>\n      </ion-button>\n      }\n    </ion-buttons>\n  </ion-toolbar>\n  <ion-toolbar>\n    <ionic-logging-viewer-search [placeholder]=\"getTranslation().searchPlaceholder\"></ionic-logging-viewer-search>\n    @if (allowClearLogs() !== false) {\n    <ion-buttons slot=\"end\" class=\"clearLogs\">\n      <ion-button (click)=\"onClearLogs()\">\n        <ion-icon name=\"trash-outline\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    }\n  </ion-toolbar>\n  <ion-toolbar>\n    <ionic-logging-viewer-levels></ionic-logging-viewer-levels>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ionic-logging-viewer [localStorageKeys]=\"localStorageKeys()\"></ionic-logging-viewer>\n</ion-content>", styles: ["ionic-logging-viewer-levels{width:100%;padding-left:12px;padding-right:12px}.clearLogs{padding-top:3px}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: LoggingViewerSearchComponent, selector: "ionic-logging-viewer-search", inputs: ["placeholder"] }, { kind: "component", type: LoggingViewerLevelsComponent, selector: "ionic-logging-viewer-levels" }, { kind: "component", type: LoggingViewerComponent, selector: "ionic-logging-viewer", inputs: ["localStorageKeys"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LoggingViewerModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoggingViewerModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ionic-logging-viewer-modal", template: "<ion-header>\n\t<ion-toolbar color=primary>\n\t\t<ion-title>{{ getTranslation().title }}</ion-title>\n\t\t<ion-buttons slot=\"start\">\n\t\t\t<ion-button *ngIf=\"!isAndroid\" (click)=\"onClose()\">\n\t\t\t\t{{ getTranslation().cancel }}\n\t\t\t</ion-button>\n\t\t\t<ion-button *ngIf=\"isAndroid\" icon-only (click)=\"onClose()\">\n\t\t\t\t<ion-icon name=\"md-close\"></ion-icon>\n\t\t\t</ion-button>\n\t\t</ion-buttons>\n\t</ion-toolbar>\n\t<ion-toolbar>\n\t\t<ionic-logging-viewer-search [placeholder]=\"getTranslation().searchPlaceholder\"></ionic-logging-viewer-search>\n\t\t<ion-buttons slot=\"end\" *ngIf=\"allowClearLogs !== false\" class=\"clearLogs\">\n\t\t\t<ion-button (click)=\"onClearLogs()\">\n\t\t\t\t<ion-icon name=\"trash-outline\"></ion-icon>\n\t\t\t</ion-button>\n\t\t</ion-buttons>\n\t</ion-toolbar>\n\t<ion-toolbar>\n\t\t<ionic-logging-viewer-levels></ionic-logging-viewer-levels>\n\t</ion-toolbar>\n</ion-header>\n<ion-content>\n\t<ionic-logging-viewer [localStorageKeys]=\"localStorageKeys\"></ionic-logging-viewer>\n</ion-content>", styles: ["ionic-logging-viewer-levels{width:100%;padding-left:12px;padding-right:12px}.clearLogs{padding-top:3px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.Platform }, { type: i1$1.AlertController }, { type: i1$1.ModalController }, { type: i1.LoggingService }]; }, propDecorators: { language: [{
-                type: Input
-            }], translation: [{
-                type: Input
-            }], localStorageKeys: [{
-                type: Input
-            }], allowClearLogs: [{
-                type: Input
-            }] } });
-
-class LoggingViewerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LoggingViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.3", ngImport: i0, type: LoggingViewerModule, declarations: [LoggingViewerComponent,
-            LoggingViewerSearchComponent,
-            LoggingViewerLevelsComponent,
-            LoggingViewerModalComponent], imports: [CommonModule,
-            FormsModule,
-            IonicModule], exports: [LoggingViewerComponent,
-            LoggingViewerSearchComponent,
-            LoggingViewerLevelsComponent,
-            LoggingViewerModalComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LoggingViewerModule, providers: [
-            LoggingViewerFilterService
-        ], imports: [CommonModule,
-            FormsModule,
-            IonicModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: LoggingViewerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        IonicModule
-                    ],
-                    declarations: [
-                        LoggingViewerComponent,
-                        LoggingViewerSearchComponent,
-                        LoggingViewerLevelsComponent,
-                        LoggingViewerModalComponent
-                    ],
-                    exports: [
-                        LoggingViewerComponent,
-                        LoggingViewerSearchComponent,
-                        LoggingViewerLevelsComponent,
-                        LoggingViewerModalComponent
-                    ],
-                    providers: [
-                        LoggingViewerFilterService
-                    ]
-                }]
-        }] });
+            args: [{ selector: "ionic-logging-viewer-modal", imports: [IonicModule, LoggingViewerSearchComponent, LoggingViewerLevelsComponent, LoggingViewerComponent], template: "<ion-header>\n  <ion-toolbar color=primary>\n    <ion-title>{{ getTranslation().title }}</ion-title>\n    <ion-buttons slot=\"start\">\n      @if (!isAndroid) {\n      <ion-button (click)=\"onClose()\">\n        {{ getTranslation().cancel }}\n      </ion-button>\n      } @else {\n      <ion-button icon-only (click)=\"onClose()\">\n        <ion-icon name=\"close-circle\"></ion-icon>\n      </ion-button>\n      }\n    </ion-buttons>\n  </ion-toolbar>\n  <ion-toolbar>\n    <ionic-logging-viewer-search [placeholder]=\"getTranslation().searchPlaceholder\"></ionic-logging-viewer-search>\n    @if (allowClearLogs() !== false) {\n    <ion-buttons slot=\"end\" class=\"clearLogs\">\n      <ion-button (click)=\"onClearLogs()\">\n        <ion-icon name=\"trash-outline\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    }\n  </ion-toolbar>\n  <ion-toolbar>\n    <ionic-logging-viewer-levels></ionic-logging-viewer-levels>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ionic-logging-viewer [localStorageKeys]=\"localStorageKeys()\"></ionic-logging-viewer>\n</ion-content>", styles: ["ionic-logging-viewer-levels{width:100%;padding-left:12px;padding-right:12px}.clearLogs{padding-top:3px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], translation: [{ type: i0.Input, args: [{ isSignal: true, alias: "translation", required: false }] }], localStorageKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "localStorageKeys", required: false }] }], allowClearLogs: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClearLogs", required: false }] }] } });
 
 /*
  * Public API Surface of ionic-logging-viewer
@@ -489,5 +369,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { LoggingViewerComponent, LoggingViewerLevelsComponent, LoggingViewerModalComponent, LoggingViewerModule, LoggingViewerSearchComponent };
+export { LoggingViewerComponent, LoggingViewerLevelsComponent, LoggingViewerModalComponent, LoggingViewerSearchComponent };
 //# sourceMappingURL=ionic-logging-viewer.mjs.map