remove common ui declaration components

src/lib/common-ui.module.ts

@@ -1,39 +1,13 @@
-import { inject, ModuleWithProviders, NgModule, Optional, Provider, SkipSelf } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
-import { TranslateModule } from '@ngx-translate/core';
-import { CommonUiOptions, IqserAppConfig, ModuleOptions } from './utils';
-import { ConnectionStatusComponent, FullPageErrorComponent } from './error';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { ApiPathInterceptor, DefaultUserPreferenceService, IqserConfigService, IqserUserPreferenceService } from './services';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
-import { MatDialogModule } from '@angular/material/dialog';
-import { CircleButtonComponent, IconButtonComponent } from './buttons';
-import { DomSanitizer } from '@angular/platform-browser';
-import { ICONS } from './utils/constants';
-import { StopPropagationDirective } from './directives';
+import { inject, ModuleWithProviders, NgModule, Optional, Provider, SkipSelf } from '@angular/core';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-
-const matModules = [MatIconModule, MatButtonModule, MatDialogModule, MatCheckboxModule, MatTooltipModule, MatProgressBarModule];
-const components = [ConnectionStatusComponent, FullPageErrorComponent];
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+import { ApiPathInterceptor, DefaultUserPreferenceService, IqserConfigService, IqserUserPreferenceService } from './services';
+import { CommonUiOptions, IqserAppConfig, ModuleOptions } from './utils';
+import { ICONS } from './utils/constants';
 
 @NgModule({
-    declarations: [...components],
-    imports: [
-        CommonModule,
-        ...matModules,
-        FormsModule,
-        ReactiveFormsModule,
-        TranslateModule,
-        IconButtonComponent,
-        CircleButtonComponent,
-        StopPropagationDirective,
-    ],
-    exports: [...components],
     providers: [
         {
             provide: HTTP_INTERCEPTORS,

src/lib/error/connection-status/connection-status.component.ts

@@ -1,5 +1,6 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { Component, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { connectionStatusTranslations } from '../../translations';
 import { ErrorService } from '../error.service';
@@ -16,8 +17,7 @@ import { ErrorService } from '../error.service';
             transition('* => online', animate('3s ease-in')),
         ]),
     ],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: false,
+    imports: [NgClass],
 })
 export class ConnectionStatusComponent {
     protected readonly connectionStatusTranslations = connectionStatusTranslations;

src/lib/error/error.service.ts

@@ -1,11 +1,11 @@
-import { inject, Injectable } from '@angular/core';
-import { fromEvent, merge, Observable, Subject } from 'rxjs';
 import { HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
-import { LoadingService } from '../loading';
-import { distinctUntilChanged, filter, map, tap } from 'rxjs/operators';
-import { NavigationStart, Router } from '@angular/router';
-import { shareLast } from '../utils';
+import { inject, Injectable } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NavigationStart, Router } from '@angular/router';
+import { fromEvent, merge, Observable, Subject } from 'rxjs';
+import { distinctUntilChanged, filter, map, tap } from 'rxjs/operators';
+import { LoadingService } from '../loading';
+import { shareLast } from '../utils';
 
 export class CustomError {
     readonly label: string;
@@ -39,17 +39,17 @@ const isSameEventType = (previous: Event | string | undefined, current: Event |
 
 @Injectable({ providedIn: 'root' })
 export class ErrorService {
-    readonly offline$: Observable<Event>;
-    readonly online$: Observable<Event>;
-    readonly connectionStatus$: Observable<string | undefined>;
-    readonly #error$ = new Subject<ErrorType>();
-    readonly error$ = this.#error$.pipe(filter(error => !error || !isOffline(error)));
+    readonly #error$ = new Subject<ErrorType | undefined>();
     readonly #online$ = new Subject();
     readonly #loadingService = inject(LoadingService);
     readonly #router = inject(Router);
     readonly #displayNotification$ = new Subject<string | undefined>();
     #notificationTimeout: Record<string, NodeJS.Timeout | undefined> = {};
     #displayedNotificationType: string | undefined;
+    readonly offline$: Observable<Event>;
+    readonly online$: Observable<Event>;
+    readonly connectionStatus$: Observable<string | undefined>;
+    readonly error$ = this.#error$.pipe(filter(error => !error || !isOffline(error)));
 
     constructor() {
         this.#router.events

src/lib/error/full-page-error/full-page-error.component.html

@@ -1,15 +1,18 @@
-@if (errorService.error$ | async; as error) {
+@if (normalizedError(); as normalizedError) {
     <section class="full-page-section"></section>
     <section class="full-page-content flex-align-items-center">
         <mat-icon svgIcon="iqser:failure"></mat-icon>
-        <div [translate]="errorTitle(error)" class="heading-l mt-24"></div>
-        @if (error.message) {
-            <div class="mt-16 error">{{ error.message }}</div>
+
+        <div [translate]="normalizedError.title" class="heading-l mt-24"></div>
+
+        @if (normalizedError.error.message) {
+            <div class="mt-16 error">{{ normalizedError.error.message }}</div>
         }
+
         <iqser-icon-button
-            (action)="action(error)"
-            [icon]="actionIcon(error)"
-            [label]="actionLabel(error) | translate"
+            (action)="action(normalizedError.error)"
+            [icon]="normalizedError.actionIcon"
+            [label]="normalizedError.actionLabel | translate"
             [type]="iconButtonTypes.primary"
             class="mt-20"
         ></iqser-icon-button>

src/lib/error/full-page-error/full-page-error.component.ts

@@ -1,30 +1,33 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { MatIcon } from '@angular/material/icon';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { IconButtonTypes } from '../../buttons';
+import { TranslatePipe } from '@ngx-translate/core';
+import { IconButtonComponent, IconButtonTypes } from '../../buttons';
 import { CustomError, ErrorService, ErrorType } from '../error.service';
 
 @Component({
     selector: 'iqser-full-page-error',
     templateUrl: './full-page-error.component.html',
     styleUrls: ['./full-page-error.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: false,
+    imports: [MatIcon, IconButtonComponent, TranslatePipe],
 })
 export class FullPageErrorComponent {
+    readonly #error = toSignal(inject(ErrorService).error$);
+    protected readonly normalizedError = computed(() => {
+        const error = this.#error();
+        if (!error) {
+            return undefined;
+        }
+
+        return {
+            error: error,
+            title: error instanceof CustomError ? error.label : _('error.title'),
+            actionLabel: error instanceof CustomError ? error.actionLabel : _('error.reload'),
+            actionIcon: error instanceof CustomError ? error.actionIcon : 'iqser:refresh',
+        };
+    });
     protected readonly iconButtonTypes = IconButtonTypes;
-    protected readonly errorService = inject(ErrorService);
-
-    errorTitle(error: ErrorType): string {
-        return error instanceof CustomError ? error.label : _('error.title');
-    }
-
-    actionLabel(error: ErrorType): string {
-        return error instanceof CustomError ? error.actionLabel : _('error.reload');
-    }
-
-    actionIcon(error: ErrorType): string {
-        return error instanceof CustomError ? error.actionIcon : 'iqser:refresh';
-    }
 
     action(error: ErrorType): void {
         if (error instanceof CustomError && error.action) {

src/lib/utils/tokens.ts

@@ -6,7 +6,7 @@ export const UI_ROOT_PATH_FN = new InjectionToken<(path: string) => string>('App
         const root = inject(UI_ROOT);
 
         return (path: string) => {
-            if (path[0] === '/') {
+            if (path.startsWith('/')) {
                 return root + path;
             }