feat: standalone components, cleanup

Author: xidedix

projects/coreui-angular/src/lib/accordion/accordion-item/accordion-item.component.spec.ts

@@ -1,7 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
-import { CollapseModule } from '../../collapse';
 import { AccordionButtonDirective } from '../accordion-button/accordion-button.directive';
 import { AccordionService } from '../accordion.service';
 import { AccordionItemComponent } from './accordion-item.component';
@@ -12,9 +10,8 @@ describe('AccordionItemComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [],
       providers: [AccordionService],
-      imports: [NoopAnimationsModule, AccordionButtonDirective, AccordionItemComponent, CollapseModule]
+      imports: [NoopAnimationsModule, AccordionButtonDirective, AccordionItemComponent]
     })
       .compileComponents();
   });

projects/coreui-angular/src/lib/accordion/accordion-item/accordion-item.component.ts

@@ -8,13 +8,13 @@ import {
   OnInit,
   QueryList
 } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
-import { CollapseModule } from '../../collapse';
+import { CollapseDirective } from '../../collapse';
 import { TemplateIdDirective } from '../../shared';
 import { AccordionButtonDirective } from '../accordion-button/accordion-button.directive';
 import { AccordionService } from '../accordion.service';
-import { CommonModule } from '@angular/common';
 
 let nextId = 0;
 
@@ -24,7 +24,7 @@ let nextId = 0;
   styleUrls: ['./accordion-item.component.scss'],
   exportAs: 'cAccordionItem',
   standalone: true,
-  imports: [AccordionButtonDirective, CollapseModule, CommonModule]
+  imports: [AccordionButtonDirective, NgTemplateOutlet, CollapseDirective]
 })
 export class AccordionItemComponent implements OnInit, OnDestroy, AfterContentInit {
 

projects/coreui-angular/src/lib/accordion/accordion.module.ts

@@ -1,21 +1,14 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { AccordionComponent } from './accordion/accordion.component';
 import { AccordionButtonDirective } from './accordion-button/accordion-button.directive';
 import { AccordionItemComponent } from './accordion-item/accordion-item.component';
 import { AccordionService } from './accordion.service';
-import { CollapseModule } from '../collapse';
-import { SharedModule } from '../shared';
 
 @NgModule({
-  declarations: [],
   imports: [
-    CommonModule,
     AccordionButtonDirective,
     AccordionComponent,
-    AccordionItemComponent,
-    CollapseModule,
-    SharedModule
+    AccordionItemComponent
   ],
   exports: [
     AccordionComponent,

projects/coreui-angular/src/lib/accordion/accordion/accordion.component.spec.ts

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

projects/coreui-angular/src/lib/alert/alert.component.html

@@ -2,7 +2,7 @@
   <ng-template [ngIf]="dismissible">
     <ng-container *ngTemplateOutlet="templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate">
     </ng-container>
-  </ng-template>
+  </ng-template>ś
   <ng-content></ng-content>
 </ng-container>
 

projects/coreui-angular/src/lib/alert/alert.component.spec.ts

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

projects/coreui-angular/src/lib/alert/alert.component.ts

@@ -9,12 +9,13 @@ import {
   Output,
   QueryList
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
 import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 import { Colors } from '../coreui.types';
 import { TemplateIdDirective } from '../shared';
+import { ButtonCloseDirective } from '../button';
 
 type AnimateType = ('hide' | 'show');
 
@@ -24,7 +25,7 @@ type AnimateType = ('hide' | 'show');
   styleUrls: ['./alert.component.scss'],
   exportAs: 'cAlert',
   standalone: true,
-  imports: [CommonModule],
+  imports: [NgIf, NgTemplateOutlet, ButtonCloseDirective],
   animations: [
     trigger('fadeInOut', [
       state('show', style({ opacity: 1, height: '*', padding: '*', border: '*', margin: '*' })),

projects/coreui-angular/src/lib/alert/alert.module.ts

@@ -1,24 +1,19 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 
 import { AlertComponent } from './alert.component';
 import { AlertHeadingDirective } from './alert-heading.directive';
 import { AlertLinkDirective } from './alert-link.directive';
-import { ButtonModule } from '../button';
 
 @NgModule({
   imports: [
-    CommonModule,
     AlertComponent,
     AlertHeadingDirective,
-    AlertLinkDirective,
-    ButtonModule
+    AlertLinkDirective
   ],
   exports: [
     AlertComponent,
     AlertHeadingDirective,
     AlertLinkDirective
-  ],
-  declarations: []
+  ]
 })
 export class AlertModule {}

projects/coreui-angular/src/lib/avatar/avatar.component.scss

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

projects/coreui-angular/src/lib/avatar/avatar.component.spec.ts

@@ -1,14 +1,17 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
 
 import { Colors, Shapes, Sizes, TextColors } from '../coreui.types';
 
 @Component({
   selector: 'c-avatar',
   templateUrl: './avatar.component.html',
-  styleUrls: ['./avatar.component.scss'],
   standalone: true,
-  imports: [CommonModule]
+  imports: [
+    NgTemplateOutlet,
+    NgClass,
+    NgIf
+  ]
 })
 export class AvatarComponent {
   /**

projects/coreui-angular/src/lib/avatar/avatar.component.ts

@@ -1,11 +1,8 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { AvatarComponent } from './avatar.component';
 
 @NgModule({
-  declarations: [],
   imports: [
-    CommonModule,
     AvatarComponent
   ],
   exports: [

projects/coreui-angular/src/lib/avatar/avatar.module.ts

@@ -3,8 +3,7 @@ import { BadgePositions, Colors, Shapes } from '../coreui.types';
 
 @Component({
   selector: 'c-badge',
-  templateUrl: './badge.component.html',
-  styleUrls: ['./badge.component.scss'],
+  template: '<ng-content></ng-content>',
   standalone: true
 })
 export class BadgeComponent {
@@ -43,15 +42,15 @@ export class BadgeComponent {
       'top-0': this.position?.includes('top'),
       'top-100': this.position?.includes('bottom'),
       'start-100': this.position?.includes('end'),
-      'start-0': this.position?.includes('start'),
+      'start-0': this.position?.includes('start')
     };
 
     return Object.assign({
         badge: true,
         [`bg-${this.color}`]: !!this.color,
         [`text-${this.textColor}`]: !!this.textColor,
         [`badge-${this.size}`]: !!this.size,
-        [`${this.shape}`]: !!this.shape,
+        [`${this.shape}`]: !!this.shape
       }, !!this.position ? positionClasses : {}
     );
   }

projects/coreui-angular/src/lib/badge/badge.component.html

@@ -1,11 +1,8 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { BadgeComponent } from './badge.component';
 
 @NgModule({
-  declarations: [],
   imports: [
-    CommonModule,
     BadgeComponent
   ],
   exports: [

projects/coreui-angular/src/lib/badge/badge.component.scss

@@ -1,6 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { SharedModule } from '../../shared';
 import { BreadcrumbItemComponent } from './breadcrumb-item.component';
 
 describe('BreadcrumbItemComponent', () => {
@@ -9,7 +8,7 @@ describe('BreadcrumbItemComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SharedModule, RouterTestingModule, BreadcrumbItemComponent]
+      imports: [RouterTestingModule, BreadcrumbItemComponent]
     })
       .compileComponents();
   });

projects/coreui-angular/src/lib/badge/badge.component.ts

@@ -1,16 +1,16 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgIf, NgTemplateOutlet } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '../../shared';
+import { HtmlAttributesDirective, SharedModule } from '../../shared';
 import { INavAttributes, INavLinkProps } from './breadcrumb-item';
 
 @Component({
   selector: 'c-breadcrumb-item',
   templateUrl: './breadcrumb-item.component.html',
   styleUrls: ['./breadcrumb-item.component.scss'],
   standalone: true,
-  imports: [SharedModule, RouterModule, CommonModule]
+  imports: [RouterModule, NgIf, NgTemplateOutlet, HtmlAttributesDirective]
 })
 export class BreadcrumbItemComponent {
 

projects/coreui-angular/src/lib/badge/badge.module.ts

@@ -1,11 +1,9 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { CommonModule } from '@angular/common';
 import { RouterTestingModule } from '@angular/router/testing';
 import { Router } from '@angular/router';
 
 import { BreadcrumbRouterComponent } from './breadcrumb-router.component';
 import { BreadcrumbRouterService } from './breadcrumb-router.service';
-import { BreadcrumbModule } from '../breadcrumb.module';
 
 describe('BreadcrumbComponent', () => {
   let component: BreadcrumbRouterComponent;
@@ -15,12 +13,9 @@ describe('BreadcrumbComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        CommonModule,
         RouterTestingModule.withRoutes([]),
-        BreadcrumbModule,
         BreadcrumbRouterComponent
       ],
-      declarations: [],
       providers: [BreadcrumbRouterService]
     }).compileComponents();
   }));

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

@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { Observable, Observer } from 'rxjs';
-import { CommonModule } from '@angular/common';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
 
 import { IBreadcrumbItem } from '../breadcrumb-item/breadcrumb-item';
 import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
@@ -12,7 +12,7 @@ import { BreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.comp
   templateUrl: './breadcrumb-router.component.html',
   styleUrls: ['./breadcrumb-router.component.scss'],
   standalone: true,
-  imports: [CommonModule, BreadcrumbComponent, BreadcrumbItemComponent]
+  imports: [BreadcrumbComponent, BreadcrumbItemComponent, NgForOf, NgIf, AsyncPipe]
 })
 export class BreadcrumbRouterComponent implements OnChanges, OnDestroy, OnInit {
   constructor(

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

@@ -8,7 +8,7 @@ describe('AppBreadcrumbService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule.withRoutes([])],
+      imports: [RouterTestingModule.withRoutes([])]
     });
     service = TestBed.inject(BreadcrumbRouterService);
   });

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

@@ -1,29 +1,22 @@
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
 
 // CoreUI Breadcrumb Component
 import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
 import { BreadcrumbItemComponent } from './breadcrumb-item/breadcrumb-item.component';
 import { BreadcrumbRouterComponent } from './breadcrumb-router/breadcrumb-router.component';
 import { BreadcrumbRouterService } from './breadcrumb-router/breadcrumb-router.service';
-import { SharedModule } from '../shared';
 
 @NgModule({
   imports: [
-    CommonModule,
-    RouterModule,
     BreadcrumbComponent,
     BreadcrumbItemComponent,
-    BreadcrumbRouterComponent,
-    SharedModule
+    BreadcrumbRouterComponent
   ],
   exports: [
     BreadcrumbComponent,
     BreadcrumbItemComponent,
     BreadcrumbRouterComponent
   ],
-  declarations: [],
   providers: [BreadcrumbRouterService]
 })
 export class BreadcrumbModule {}

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

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

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.service.spec.ts

@@ -2,8 +2,7 @@ import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'c-breadcrumb',
-  templateUrl: './breadcrumb.component.html',
-  styleUrls: ['./breadcrumb.component.scss'],
+  template: '<ng-content></ng-content>',
   standalone: true
 })
 export class BreadcrumbComponent {

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

@@ -1,11 +1,9 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { ButtonGroupComponent } from './button-group/button-group.component';
 import { ButtonToolbarComponent } from './button-toolbar/button-toolbar.component';
 
 @NgModule({
-  declarations: [],
-  imports: [CommonModule, ButtonGroupComponent, ButtonToolbarComponent],
+  imports: [ButtonGroupComponent, ButtonToolbarComponent],
   exports: [ButtonGroupComponent, ButtonToolbarComponent]
 })
 export class ButtonGroupModule {}