standalone shared components

src/lib/common-ui.module.ts

@@ -18,7 +18,6 @@ import { ConfirmationDialogComponent } from './dialog';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ApiPathInterceptor, DefaultUserPreferenceService, IqserConfigService, IqserUserPreferenceService } from './services';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
-import { IqserSkeletonModule } from './skeleton/skeleton.module';
 import { MatDialogModule } from '@angular/material/dialog';
 import { CircleButtonComponent, IconButtonComponent } from './buttons';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -33,7 +32,7 @@ const matModules = [
     MatTooltipModule,
     MatProgressBarModule,
 ];
-const modules = [IqserListingModule, IqserFiltersModule, IqserInputsModule, IqserScrollbarModule, IqserSkeletonModule, HttpClientModule];
+const modules = [IqserListingModule, IqserFiltersModule, IqserInputsModule, IqserScrollbarModule, HttpClientModule];
 const components = [ConnectionStatusComponent, FullPageErrorComponent, HiddenActionComponent, ConfirmationDialogComponent, ToastComponent];
 
 @NgModule({

src/lib/shared/index.ts

@@ -5,4 +5,4 @@ export * from './status-bar/status-bar.component';
 export * from './status-bar/status-bar-config.model';
 export * from './toast/toast.component';
 export * from './small-chip/small-chip.component';
-export * from './shared.module';
+export * from './skeleton/skeleton.component';

src/lib/shared/logo/logo.component.html

@@ -1 +0,0 @@
-<mat-icon [svgIcon]="icon"></mat-icon>

src/lib/shared/logo/logo.component.scss

@@ -1,8 +0,0 @@
-:host {
-    color: var(--iqser-primary);
-}
-
-mat-icon {
-    width: 28px;
-    height: 28px;
-}

src/lib/shared/logo/logo.component.ts

@@ -1,10 +1,24 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
     selector: 'iqser-logo [icon]',
-    templateUrl: './logo.component.html',
-    styleUrls: ['./logo.component.scss'],
+    template: ` <mat-icon [svgIcon]="icon"></mat-icon>`,
+    styles: [
+        `
+            :host {
+                color: var(--iqser-primary);
+            }
+
+            mat-icon {
+                width: 28px;
+                height: 28px;
+            }
+        `,
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [MatIconModule],
 })
 export class LogoComponent {
     @Input() icon!: string;

src/lib/shared/shared.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { LogoComponent, SideNavComponent, SmallChipComponent, StatusBarComponent } from './index';
-import { CommonModule } from '@angular/common';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatIconModule } from '@angular/material/icon';
-
-const components = [SmallChipComponent, LogoComponent];
-
-const deleteThisWhenAllComponentsAreStandalone = [SideNavComponent, StatusBarComponent];
-
-@NgModule({
-    declarations: [...components],
-    exports: [...components, ...deleteThisWhenAllComponentsAreStandalone],
-    imports: [CommonModule, MatTooltipModule, MatIconModule, ...deleteThisWhenAllComponentsAreStandalone],
-})
-export class IqserSharedModule {}

src/lib/shared/skeleton/skeleton.component.ts

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, HostBinding, inject, Input, TemplateRef } from '@angular/core';
+import { SkeletonService } from '../../services';
+import { getCurrentUser } from '../../users';
+import { AsyncPipe, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
+import { tap } from 'rxjs/operators';
+
+@Component({
+    selector: 'iqser-skeleton [templates]',
+    templateUrl: './skeleton.component.html',
+    styleUrls: ['./skeleton.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [NgTemplateOutlet, NgIf, AsyncPipe, NgForOf],
+})
+export class SkeletonComponent {
+    @Input() templates!: Record<string, TemplateRef<unknown>>;
+    @HostBinding('style.display') display = 'none';
+
+    readonly #currentUser = getCurrentUser();
+    readonly type$ = inject(SkeletonService).type$.pipe(
+        tap(type => {
+            this.display = type && this.#currentUser ? 'block' : 'none';
+        }),
+    );
+}

src/lib/shared/small-chip/small-chip.component.html

@@ -1 +0,0 @@
-<div [style.background-color]="color" class="chip"></div>

src/lib/shared/small-chip/small-chip.component.scss

@@ -1,5 +0,0 @@
-.chip {
-    width: 12px;
-    height: 6px;
-    border-radius: 6px;
-}

src/lib/shared/small-chip/small-chip.component.ts

@@ -2,9 +2,18 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 @Component({
     selector: 'iqser-small-chip [color]',
-    templateUrl: './small-chip.component.html',
-    styleUrls: ['./small-chip.component.scss'],
+    template: ` <div [style.background-color]="color" class="chip"></div>`,
+    styles: [
+        `
+            .chip {
+                width: 12px;
+                height: 6px;
+                border-radius: 6px;
+            }
+        `,
+    ],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
 })
 export class SmallChipComponent {
     @Input() color!: string;

src/lib/skeleton/skeleton.module.ts

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SkeletonComponent } from './skeleton/skeleton.component';
-import { IqserSharedModule } from '../shared';
-import { IqserUsersModule } from '../users';
-
-@NgModule({
-    declarations: [SkeletonComponent],
-    exports: [SkeletonComponent],
-    imports: [CommonModule, IqserSharedModule, IqserUsersModule],
-})
-export class IqserSkeletonModule {}

src/lib/skeleton/skeleton/skeleton.component.ts

@@ -1,26 +0,0 @@
-import { ChangeDetectionStrategy, Component, HostBinding, Input, TemplateRef } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import { SkeletonService } from '../../services';
-import { IqserUserService } from '../../users';
-
-@Component({
-    selector: 'iqser-skeleton [templates]',
-    templateUrl: './skeleton.component.html',
-    styleUrls: ['./skeleton.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SkeletonComponent {
-    @Input() templates: Record<string, TemplateRef<unknown>> = {};
-    @HostBinding('style.display') display = 'none';
-
-    constructor(private readonly _skeletonService: SkeletonService, private readonly _userService: IqserUserService) {
-        this._skeletonService.type$.subscribe(type => {
-            const user = _userService.currentUser;
-            this.display = type && user ? 'block' : 'none';
-        });
-    }
-
-    get type$(): BehaviorSubject<string | null> {
-        return this._skeletonService.type$;
-    }
-}