diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts index b810439..d855ea6 100644 --- a/src/lib/common-ui.module.ts +++ b/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({ diff --git a/src/lib/shared/index.ts b/src/lib/shared/index.ts index a3723c6..4201eb4 100644 --- a/src/lib/shared/index.ts +++ b/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'; diff --git a/src/lib/shared/logo/logo.component.html b/src/lib/shared/logo/logo.component.html deleted file mode 100644 index 3458d7d..0000000 --- a/src/lib/shared/logo/logo.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/lib/shared/logo/logo.component.scss b/src/lib/shared/logo/logo.component.scss deleted file mode 100644 index b79dcdb..0000000 --- a/src/lib/shared/logo/logo.component.scss +++ /dev/null @@ -1,8 +0,0 @@ -:host { - color: var(--iqser-primary); -} - -mat-icon { - width: 28px; - height: 28px; -} diff --git a/src/lib/shared/logo/logo.component.ts b/src/lib/shared/logo/logo.component.ts index 5fea320..9de965e 100644 --- a/src/lib/shared/logo/logo.component.ts +++ b/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: ` `, + 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; diff --git a/src/lib/shared/shared.module.ts b/src/lib/shared/shared.module.ts deleted file mode 100644 index 91757e9..0000000 --- a/src/lib/shared/shared.module.ts +++ /dev/null @@ -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 {} diff --git a/src/lib/skeleton/skeleton/skeleton.component.html b/src/lib/shared/skeleton/skeleton.component.html similarity index 100% rename from src/lib/skeleton/skeleton/skeleton.component.html rename to src/lib/shared/skeleton/skeleton.component.html diff --git a/src/lib/skeleton/skeleton/skeleton.component.scss b/src/lib/shared/skeleton/skeleton.component.scss similarity index 100% rename from src/lib/skeleton/skeleton/skeleton.component.scss rename to src/lib/shared/skeleton/skeleton.component.scss diff --git a/src/lib/shared/skeleton/skeleton.component.ts b/src/lib/shared/skeleton/skeleton.component.ts new file mode 100644 index 0000000..3f9a950 --- /dev/null +++ b/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>; + @HostBinding('style.display') display = 'none'; + + readonly #currentUser = getCurrentUser(); + readonly type$ = inject(SkeletonService).type$.pipe( + tap(type => { + this.display = type && this.#currentUser ? 'block' : 'none'; + }), + ); +} diff --git a/src/lib/shared/small-chip/small-chip.component.html b/src/lib/shared/small-chip/small-chip.component.html deleted file mode 100644 index 1644077..0000000 --- a/src/lib/shared/small-chip/small-chip.component.html +++ /dev/null @@ -1 +0,0 @@ -
diff --git a/src/lib/shared/small-chip/small-chip.component.scss b/src/lib/shared/small-chip/small-chip.component.scss deleted file mode 100644 index 78bc3fb..0000000 --- a/src/lib/shared/small-chip/small-chip.component.scss +++ /dev/null @@ -1,5 +0,0 @@ -.chip { - width: 12px; - height: 6px; - border-radius: 6px; -} diff --git a/src/lib/shared/small-chip/small-chip.component.ts b/src/lib/shared/small-chip/small-chip.component.ts index 9253263..afc8bbe 100644 --- a/src/lib/shared/small-chip/small-chip.component.ts +++ b/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: `
`, + styles: [ + ` + .chip { + width: 12px; + height: 6px; + border-radius: 6px; + } + `, + ], changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, }) export class SmallChipComponent { @Input() color!: string; diff --git a/src/lib/skeleton/skeleton.module.ts b/src/lib/skeleton/skeleton.module.ts deleted file mode 100644 index d68c94f..0000000 --- a/src/lib/skeleton/skeleton.module.ts +++ /dev/null @@ -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 {} diff --git a/src/lib/skeleton/skeleton/skeleton.component.ts b/src/lib/skeleton/skeleton/skeleton.component.ts deleted file mode 100644 index 3e685bd..0000000 --- a/src/lib/skeleton/skeleton/skeleton.component.ts +++ /dev/null @@ -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> = {}; - @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 { - return this._skeletonService.type$; - } -}