feat: standalone components

Author: xidedix

projects/coreui-angular/src/lib/aside/app-aside.component.spec.ts

@@ -8,9 +8,9 @@ describe('AppAsideComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ AppAsideComponent ]
+      imports: [AppAsideComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

projects/coreui-angular/src/lib/aside/app-aside.component.ts

@@ -1,11 +1,12 @@
-import {Component, Input, OnInit, OnDestroy, Inject, Renderer2, HostBinding} from '@angular/core';
-import {DOCUMENT} from '@angular/common';
+import { Component, Input, OnInit, OnDestroy, Inject, Renderer2, HostBinding } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 
 import { asideMenuCssClasses } from '../shared';
 
 @Component({
   selector: 'app-aside, cui-aside',
-  template: `<ng-content></ng-content>`
+  template: `<ng-content></ng-content>`,
+  standalone: true
 })
 export class AppAsideComponent implements OnInit, OnDestroy {
   @Input() display: any;
@@ -17,7 +18,7 @@ export class AppAsideComponent implements OnInit, OnDestroy {
   @HostBinding('class.aside-menu') asideMenuClass = true;
 
   constructor(
-    @Inject(DOCUMENT) private document: any,
+    @Inject(DOCUMENT) private document: Document,
     private renderer: Renderer2,
   ) { }
 
@@ -44,7 +45,7 @@ export class AppAsideComponent implements OnInit, OnDestroy {
   }
 
   displayBreakpoint(display: any = this.display): void {
-    if (display !== false ) {
+    if (display !== false) {
       const cssClass = this.display ? `aside-menu-${this.display}-show` : asideMenuCssClasses[0];
       this.renderer.addClass(this.document.body, cssClass);
     }

projects/coreui-angular/src/lib/aside/app-aside.module.ts

@@ -1,19 +1,13 @@
-import { CommonModule} from '@angular/common';
 import { NgModule } from '@angular/core';
-import { LayoutModule } from '../shared/layout/layout.module';
 
 import { AppAsideComponent } from './app-aside.component';
 
 @NgModule({
   imports: [
-    CommonModule,
-    LayoutModule
+    AppAsideComponent
   ],
   exports: [
     AppAsideComponent
   ],
-  declarations: [
-    AppAsideComponent
-  ]
 })
-export class AppAsideModule {}
+export class AppAsideModule { }

projects/coreui-angular/src/lib/breadcrumb/app-breadcrumb.component.ts

@@ -1,9 +1,10 @@
-import {Component, ElementRef, Inject, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
-import {DOCUMENT} from '@angular/common';
+import { Component, ElementRef, Inject, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { DOCUMENT, NgClass, NgIf } from '@angular/common';
 
-import {AppBreadcrumbService} from './app-breadcrumb.service';
-import {Replace} from '../shared';
+import { AppBreadcrumbService } from './app-breadcrumb.service';
+import { Replace } from '../shared';
 import { Observable } from 'rxjs';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-breadcrumb',
@@ -16,15 +17,17 @@ import { Observable } from 'rxjs';
         <span *ngIf="last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</span>
       </li>
     </ng-template>
-  `
+  `,
+  standalone: true,
+  imports: [NgIf, NgClass, RouterLink]
 })
 export class AppBreadcrumbComponent implements OnInit, OnDestroy {
   @Input() fixed?: boolean;
   public breadcrumbs?: Observable<any>;
   private readonly fixedClass = 'breadcrumb-fixed';
 
   constructor(
-    @Inject(DOCUMENT) private document: any,
+    @Inject(DOCUMENT) private document: Document,
     private renderer: Renderer2,
     public service: AppBreadcrumbService,
     public el: ElementRef

projects/coreui-angular/src/lib/breadcrumb/app-breadcrumb.module.ts

@@ -1,5 +1,5 @@
-import { CommonModule} from '@angular/common';
-import { NgModule, ModuleWithProviders} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgModule, ModuleWithProviders } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 // App Breadcrumb Component
@@ -9,9 +9,8 @@ import { CuiBreadcrumbComponent } from './cui-breadcrumb.component';
 
 // @dynamic
 @NgModule({
-  imports: [ CommonModule, RouterModule ],
-  exports: [ AppBreadcrumbComponent, CuiBreadcrumbComponent ],
-  declarations: [ AppBreadcrumbComponent, CuiBreadcrumbComponent ]
+  imports: [AppBreadcrumbComponent, CuiBreadcrumbComponent],
+  exports: [AppBreadcrumbComponent, CuiBreadcrumbComponent],
 })
 export class AppBreadcrumbModule {
   static forRoot(config?: any): ModuleWithProviders<AppBreadcrumbModule> {

projects/coreui-angular/src/lib/breadcrumb/app-breadcrumb.service.ts

@@ -4,9 +4,8 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';
 
 @Injectable({
-    providedIn: 'root'
-  }
-)
+  providedIn: 'root'
+})
 export class AppBreadcrumbService {
 
   breadcrumbs: Observable<Array<any>>;

projects/coreui-angular/src/lib/breadcrumb/cui-breadcrumb.component.spec.ts

@@ -9,10 +9,9 @@ describe('CuiBreadcrumbComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule.withRoutes([])],
-      declarations: [ CuiBreadcrumbComponent ]
+      imports: [RouterTestingModule.withRoutes([]), CuiBreadcrumbComponent],
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

projects/coreui-angular/src/lib/breadcrumb/cui-breadcrumb.component.ts

@@ -1,13 +1,16 @@
-import {Component, ElementRef, Inject, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
-import {DOCUMENT} from '@angular/common';
-
-import {AppBreadcrumbService} from './app-breadcrumb.service';
+import { Component, Inject, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { DOCUMENT, NgIf, NgClass, AsyncPipe, NgForOf } from '@angular/common';
+import { RouterLink } from '@angular/router';
 import { Observable } from 'rxjs';
 
+import { AppBreadcrumbService } from './app-breadcrumb.service';
+
 @Component({
   // tslint:disable-next-line:component-selector
   selector: 'cui-breadcrumb',
-  templateUrl: './cui-breadcrumb.component.html'
+  templateUrl: './cui-breadcrumb.component.html',
+  standalone: true,
+  imports: [NgIf, NgClass, RouterLink, AsyncPipe, NgForOf]
 })
 export class CuiBreadcrumbComponent implements OnInit, OnDestroy {
   @Input() fixed?: boolean;
@@ -16,7 +19,7 @@ export class CuiBreadcrumbComponent implements OnInit, OnDestroy {
   private readonly fixedClass = 'breadcrumb-fixed';
 
   constructor(
-    @Inject(DOCUMENT) private document: any,
+    @Inject(DOCUMENT) private document: Document,
     private renderer: Renderer2,
     public service: AppBreadcrumbService,
   ) { }

projects/coreui-angular/src/lib/footer/app-footer.component.spec.ts

@@ -8,9 +8,9 @@ describe('AppAsideComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ AppFooterComponent ]
+      imports: [AppFooterComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

projects/coreui-angular/src/lib/footer/app-footer.component.ts

@@ -1,9 +1,10 @@
-import {Component, HostBinding, Inject, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
-import {DOCUMENT} from '@angular/common';
+import { Component, HostBinding, Inject, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 
 @Component({
   selector: 'app-footer, cui-footer',
-  template: `<ng-content></ng-content>`
+  template: `<ng-content></ng-content>`,
+  standalone: true
 })
 export class AppFooterComponent implements OnInit, OnDestroy {
   @Input() fixed?: boolean;
@@ -13,7 +14,7 @@ export class AppFooterComponent implements OnInit, OnDestroy {
   @HostBinding('class.app-footer') appFooterClass = true;
 
   constructor(
-    @Inject(DOCUMENT) private document: any,
+    @Inject(DOCUMENT) private document: Document,
     private renderer: Renderer2,
   ) { }