refactor: directives, components and pipes are now standalone by default

Author: xidedix

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

@@ -34,7 +34,6 @@ let nextId = 0;
   templateUrl: './chartjs.component.html',
   styleUrls: ['./chartjs.component.scss'],
   exportAs: 'cChart',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush
   // host: { ngSkipHydration: 'true' }
 })

projects/coreui-angular/src/lib/accordion/accordion-button/accordion-button.directive.ts

@@ -2,7 +2,6 @@ import { computed, Directive, input } from '@angular/core';
 
 @Directive({
   selector: '[cAccordionButton]',
-  standalone: true,
   host: { '[class]': 'hostClasses()', '[attr.type]': 'type()', '[attr.aria-expanded]': 'ariaExpanded()' }
 })
 export class AccordionButtonDirective {

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

@@ -19,13 +19,12 @@ import { AccordionService } from '../accordion.service';
 let nextId = 0;
 
 @Component({
-  selector: 'c-accordion-item',
-  templateUrl: './accordion-item.component.html',
-  styleUrls: ['./accordion-item.component.scss'],
-  exportAs: 'cAccordionItem',
-  standalone: true,
-  imports: [AccordionButtonDirective, NgTemplateOutlet, CollapseDirective],
-  host: { class: 'accordion-item' }
+    selector: 'c-accordion-item',
+    templateUrl: './accordion-item.component.html',
+    styleUrls: ['./accordion-item.component.scss'],
+    exportAs: 'cAccordionItem',
+    imports: [AccordionButtonDirective, NgTemplateOutlet, CollapseDirective],
+    host: { class: 'accordion-item' }
 })
 export class AccordionItemComponent implements OnInit, OnDestroy {
   readonly #accordionService = inject(AccordionService);

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

@@ -8,7 +8,6 @@ import { AccordionService } from '../accordion.service';
   styleUrls: ['./accordion.component.scss'],
   exportAs: 'cAccordionItem',
   providers: [AccordionService],
-  standalone: true,
   host: { '[class]': 'hostClasses()' }
 })
 export class AccordionComponent {

projects/coreui-angular/src/lib/alert/alert-heading.directive.ts

@@ -2,7 +2,6 @@ import { Directive } from '@angular/core';
 
 @Directive({
   selector: '[cAlertHeading]',
-  standalone: true,
   host: { class: 'alert-heading' }
 })
 export class AlertHeadingDirective {}

projects/coreui-angular/src/lib/alert/alert-link.directive.ts

@@ -2,7 +2,6 @@ import { Directive } from '@angular/core';
 
 @Directive({
   selector: '[cAlertLink]',
-  standalone: true,
   host: { class: 'alert-link' }
 })
 export class AlertLinkDirective {}

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

@@ -20,31 +20,30 @@ import { ButtonCloseDirective } from '../button';
 type AnimateType = ('hide' | 'show');
 
 @Component({
-  selector: 'c-alert',
-  templateUrl: './alert.component.html',
-  styleUrls: ['./alert.component.scss'],
-  exportAs: 'cAlert',
-  standalone: true,
-  imports: [NgTemplateOutlet, ButtonCloseDirective],
-  animations: [
-    trigger('fadeInOut', [
-      state('show', style({ opacity: 1, height: '*', padding: '*', border: '*', margin: '*' })),
-      state('hide', style({ opacity: 0, height: 0, padding: 0, border: 0, margin: 0 })),
-      state('void', style({ opacity: 0, height: 0, padding: 0, border: 0, margin: 0 })),
-      transition('show => hide', [
-        animate('.3s ease-out')
-      ]),
-      transition('hide => show', [
-        animate('.3s ease-in')
-      ]),
-      transition('show => void', [
-        animate('.3s ease-out')
-      ]),
-      transition('void => show', [
-        animate('.3s ease-in')
-      ])
-    ])
-  ]
+    selector: 'c-alert',
+    templateUrl: './alert.component.html',
+    styleUrls: ['./alert.component.scss'],
+    exportAs: 'cAlert',
+    imports: [NgTemplateOutlet, ButtonCloseDirective],
+    animations: [
+        trigger('fadeInOut', [
+            state('show', style({ opacity: 1, height: '*', padding: '*', border: '*', margin: '*' })),
+            state('hide', style({ opacity: 0, height: 0, padding: 0, border: 0, margin: 0 })),
+            state('void', style({ opacity: 0, height: 0, padding: 0, border: 0, margin: 0 })),
+            transition('show => hide', [
+                animate('.3s ease-out')
+            ]),
+            transition('hide => show', [
+                animate('.3s ease-in')
+            ]),
+            transition('show => void', [
+                animate('.3s ease-out')
+            ]),
+            transition('void => show', [
+                animate('.3s ease-in')
+            ])
+        ])
+    ]
 })
 export class AlertComponent implements AfterContentInit {
 

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

@@ -5,17 +5,16 @@ import { Colors, Shapes, Sizes, TextColors } from '../coreui.types';
 import { TextColorDirective } from '../utilities';
 
 @Component({
-  selector: 'c-avatar',
-  templateUrl: './avatar.component.html',
-  standalone: true,
-  imports: [NgClass, NgOptimizedImage],
-  hostDirectives: [
-    {
-      directive: TextColorDirective,
-      inputs: ['cTextColor: textColor']
-    }
-  ],
-  host: { class: 'avatar', '[class]': 'hostClasses()' }
+    selector: 'c-avatar',
+    templateUrl: './avatar.component.html',
+    imports: [NgClass, NgOptimizedImage],
+    hostDirectives: [
+        {
+            directive: TextColorDirective,
+            inputs: ['cTextColor: textColor']
+        }
+    ],
+    host: { class: 'avatar', '[class]': 'hostClasses()' }
 })
 export class AvatarComponent {
   /**

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

@@ -5,7 +5,6 @@ import { TextBgColorDirective, TextColorDirective } from '../utilities';
 @Component({
   selector: 'c-badge',
   template: '<ng-content />',
-  standalone: true,
   hostDirectives: [
     { directive: TextColorDirective, inputs: ['cTextColor: textColor'] },
     { directive: TextBgColorDirective, inputs: ['cTextBgColor: textBgColor'] }

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

@@ -6,11 +6,10 @@ import { HtmlAttributesDirective } 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: [RouterModule, NgTemplateOutlet, HtmlAttributesDirective]
+    selector: 'c-breadcrumb-item',
+    templateUrl: './breadcrumb-item.component.html',
+    styleUrls: ['./breadcrumb-item.component.scss'],
+    imports: [RouterModule, NgTemplateOutlet, HtmlAttributesDirective]
 })
 export class BreadcrumbItemComponent {
 

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

@@ -8,10 +8,9 @@ import { BreadcrumbRouterService } from './breadcrumb-router.service';
 import { BreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.component';
 
 @Component({
-  selector: 'c-breadcrumb-router, [cBreadcrumbRouter]',
-  templateUrl: './breadcrumb-router.component.html',
-  standalone: true,
-  imports: [BreadcrumbComponent, BreadcrumbItemComponent, AsyncPipe]
+    selector: 'c-breadcrumb-router, [cBreadcrumbRouter]',
+    templateUrl: './breadcrumb-router.component.html',
+    imports: [BreadcrumbComponent, BreadcrumbItemComponent, AsyncPipe]
 })
 export class BreadcrumbRouterComponent implements OnChanges, OnDestroy, OnInit {
   constructor(

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

@@ -3,7 +3,6 @@ import { Component, HostBinding, Input } from '@angular/core';
 @Component({
   selector: 'c-breadcrumb',
   template: '<ng-content />',
-  standalone: true,
   host: { class: 'breadcrumb' }
 })
 export class BreadcrumbComponent {

projects/coreui-angular/src/lib/button-group/button-group/button-group.component.ts

@@ -3,7 +3,6 @@ import { booleanAttribute, Component, computed, input, InputSignal, InputSignalW
 @Component({
   selector: 'c-button-group',
   template: '<ng-content />',
-  standalone: true,
   host: { '[attr.role]': 'role()', '[class]': 'hostClasses()' }
 })
 export class ButtonGroupComponent {

projects/coreui-angular/src/lib/button-group/button-toolbar/button-toolbar.component.ts

@@ -3,7 +3,6 @@ import { Component, input, InputSignal } from '@angular/core';
 @Component({
   selector: 'c-button-toolbar',
   template: '<ng-content />',
-  standalone: true,
   host: { class: 'btn-toolbar', '[attr.role]': 'role()' }
 })
 export class ButtonToolbarComponent {

projects/coreui-angular/src/lib/button/button-close.directive.spec.ts

@@ -6,9 +6,8 @@ import { By } from '@angular/platform-browser';
 class MockElementRef extends ElementRef {}
 
 @Component({
-  template: '<button cButtonClose></button>',
-  standalone: true,
-  imports: [ButtonCloseDirective]
+    template: '<button cButtonClose></button>',
+    imports: [ButtonCloseDirective]
 })
 class TestComponent {}
 

projects/coreui-angular/src/lib/button/button-close.directive.ts

@@ -4,7 +4,6 @@ import { ButtonDirective } from './button.directive';
 
 @Directive({
   selector: '[cButtonClose]',
-  standalone: true,
   hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }],
   host: {
     class: 'btn btn-close',

projects/coreui-angular/src/lib/button/button.directive.spec.ts

@@ -6,9 +6,8 @@ import { By } from '@angular/platform-browser';
 class MockElementRef extends ElementRef {}
 
 @Component({
-  template: '<button cButton color="info" size="lg"></button>',
-  standalone: true,
-  imports: [ButtonDirective]
+    template: '<button cButton color="info" size="lg"></button>',
+    imports: [ButtonDirective]
 })
 class TestComponent {}
 

projects/coreui-angular/src/lib/button/button.directive.ts

@@ -5,7 +5,6 @@ import { ButtonType, Colors, Shapes } from '../coreui.types';
 @Directive({
   selector: '[cButton]',
   exportAs: 'cButton',
-  standalone: true,
   host: {
     class: 'btn',
     '[class]': 'hostClasses()',

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

@@ -5,7 +5,6 @@ import { Colors } from '../coreui.types';
   selector: 'c-callout, [cCallout]',
   template: '<ng-content />',
   styleUrls: ['./callout.component.scss'],
-  standalone: true,
   host: { class: 'callout', '[class]': 'hostClasses()' }
 })
 export class CalloutComponent {

projects/coreui-angular/src/lib/card/card-body.component.ts

@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'c-card-body, [c-card-body]',
   template: '<ng-content />',
-  standalone: true,
   host: { class: 'card-body' }
 })
 export class CardBodyComponent {}

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

@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'c-card-footer, [c-card-footer]',
   template: '<ng-content />',
-  standalone: true,
   host: { class: 'card-footer' }
 })
 export class CardFooterComponent {}

projects/coreui-angular/src/lib/card/card-group.component.ts

@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'c-card-group, [c-card-group]',
   template: '<ng-content />',
-  standalone: true,
   host: { class: 'card-group' }
 })
 export class CardGroupComponent {}

projects/coreui-angular/src/lib/card/card-header-actions.component.ts

@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'c-card-header-actions, [c-card-header-actions]',
   template: '<ng-content />',
-  standalone: true,
   host: { class: 'card-header-actions' }
 })
 export class CardHeaderActionsComponent {}

projects/coreui-angular/src/lib/card/card-header.component.ts

@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'c-card-header, [c-card-header]',
   template: '<ng-content />',
-  standalone: true,
   host: { class: 'card-header' }
 })
 export class CardHeaderComponent {}

projects/coreui-angular/src/lib/card/card-img-overlay/card-img-overlay.component.ts

@@ -4,7 +4,6 @@ import { Component } from '@angular/core';
   selector: 'c-card-img-overlay',
   template: '<ng-content />',
   styleUrls: ['./card-img-overlay.component.scss'],
-  standalone: true,
   host: { class: 'card-img-overlay' }
 })
 export class CardImgOverlayComponent {}

projects/coreui-angular/src/lib/card/card-img.directive.ts

@@ -2,7 +2,6 @@ import { computed, Directive, input } from '@angular/core';
 
 @Directive({
   selector: '[cCardImg]',
-  standalone: true,
   host: { '[class]': 'hostClasses()' }
 })
 export class CardImgDirective {

projects/coreui-angular/src/lib/card/card-link.directive.ts

@@ -2,7 +2,6 @@ import { Directive } from '@angular/core';
 
 @Directive({
   selector: '[cCardLink]',
-  standalone: true,
   host: { class: 'card-link' }
 })
 export class CardLinkDirective {}

projects/coreui-angular/src/lib/card/card-subtitle.directive.ts

@@ -2,7 +2,6 @@ import { Directive } from '@angular/core';
 
 @Directive({
   selector: '[cCardSubtitle]',
-  standalone: true,
   host: { class: 'card-subtitle' }
 })
 export class CardSubtitleDirective {}

projects/coreui-angular/src/lib/card/card-text.directive.ts

@@ -2,7 +2,6 @@ import { Directive } from '@angular/core';
 
 @Directive({
   selector: '[cCardText]',
-  standalone: true,
   host: { class: 'card-text' }
 })
 export class CardTextDirective {}

projects/coreui-angular/src/lib/card/card-title.directive.ts

@@ -2,7 +2,6 @@ import { Directive } from '@angular/core';
 
 @Directive({
   selector: '[cCardTitle]',
-  standalone: true,
   host: { class: 'card-title' }
 })
 export class CardTitleDirective {}

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

@@ -5,7 +5,6 @@ import { TextBgColorDirective, TextColorDirective } from '../utilities';
 @Component({
   selector: 'c-card, [c-card]',
   template: '<ng-content />',
-  standalone: true,
   hostDirectives: [
     { directive: TextColorDirective, inputs: ['cTextColor: textColor'] },
     { directive: TextBgColorDirective, inputs: ['cTextBgColor: textBgColor'] }

projects/coreui-angular/src/lib/carousel/carousel-caption/carousel-caption.component.ts

@@ -3,11 +3,8 @@ import { Component, HostBinding } from '@angular/core';
 @Component({
   selector: 'c-carousel-caption',
   template: '<ng-content />',
-  styleUrls: ['./carousel-caption.component.scss'],
-  standalone: true
+  styleUrls: ['./carousel-caption.component.scss']
 })
 export class CarouselCaptionComponent {
-
   @HostBinding('class.carousel-caption') carouselCaptionClass = true;
-
 }

projects/coreui-angular/src/lib/carousel/carousel-control/carousel-control.component.ts

@@ -13,11 +13,9 @@ import { CarouselState } from '../carousel-state';
 
 @Component({
   selector: 'c-carousel-control',
-  templateUrl: './carousel-control.component.html',
-  standalone: true
+  templateUrl: './carousel-control.component.html'
 })
 export class CarouselControlComponent implements AfterViewInit {
-
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private carouselState: CarouselState

projects/coreui-angular/src/lib/carousel/carousel-indicators/carousel-indicators.component.ts

@@ -6,8 +6,7 @@ import { CarouselService } from '../carousel.service';
 
 @Component({
   selector: 'c-carousel-indicators',
-  templateUrl: './carousel-indicators.component.html',
-  standalone: true
+  templateUrl: './carousel-indicators.component.html'
 })
 export class CarouselIndicatorsComponent implements OnInit, OnDestroy {
   constructor(
@@ -37,7 +36,7 @@ export class CarouselIndicatorsComponent implements OnInit, OnDestroy {
   private carouselStateSubscribe(subscribe: boolean = true): void {
     if (subscribe) {
       this.carouselIndexSubscription = this.carouselService.carouselIndex$.subscribe((nextIndex) => {
-        this.items = this.carouselState?.state?.items?.map(item => item.index) ?? [];
+        this.items = this.carouselState?.state?.items?.map((item) => item.index) ?? [];
         if ('active' in nextIndex) {
           this.active = nextIndex.active ?? 0;
         }