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

Author: xidedix

src/app/app.component.ts

@@ -9,10 +9,9 @@ import { IconSetService } from '@coreui/icons-angular';
 import { iconSubset } from './icons/icon-subset';
 
 @Component({
-  selector: 'app-root',
-  template: '<router-outlet />',
-  standalone: true,
-  imports: [RouterOutlet]
+    selector: 'app-root',
+    template: '<router-outlet />',
+    imports: [RouterOutlet]
 })
 export class AppComponent implements OnInit {
   title = 'CoreUI Angular Admin Template';

src/app/layout/default-layout/default-footer/default-footer.component.ts

@@ -4,8 +4,7 @@ import { FooterComponent } from '@coreui/angular';
 @Component({
     selector: 'app-default-footer',
     templateUrl: './default-footer.component.html',
-    styleUrls: ['./default-footer.component.scss'],
-    standalone: true,
+    styleUrls: ['./default-footer.component.scss']
 })
 export class DefaultFooterComponent extends FooterComponent {
   constructor() {

src/app/layout/default-layout/default-header/default-header.component.ts

@@ -1,4 +1,4 @@
-import { NgStyle, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { Component, computed, inject, input } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
@@ -19,20 +19,15 @@ import {
   HeaderTogglerDirective,
   NavItemComponent,
   NavLinkDirective,
-  ProgressBarDirective,
-  ProgressComponent,
-  SidebarToggleDirective,
-  TextColorDirective,
-  ThemeDirective
+  SidebarToggleDirective
 } from '@coreui/angular';
 
 import { IconDirective } from '@coreui/icons-angular';
 
 @Component({
-  selector: 'app-default-header',
-  templateUrl: './default-header.component.html',
-  standalone: true,
-  imports: [ContainerComponent, HeaderTogglerDirective, SidebarToggleDirective, IconDirective, HeaderNavComponent, NavItemComponent, NavLinkDirective, RouterLink, RouterLinkActive, NgTemplateOutlet, BreadcrumbRouterComponent, ThemeDirective, DropdownComponent, DropdownToggleDirective, TextColorDirective, AvatarComponent, DropdownMenuDirective, DropdownHeaderDirective, DropdownItemDirective, BadgeComponent, DropdownDividerDirective, ProgressBarDirective, ProgressComponent, NgStyle]
+    selector: 'app-default-header',
+    templateUrl: './default-header.component.html',
+  imports: [ContainerComponent, HeaderTogglerDirective, SidebarToggleDirective, IconDirective, HeaderNavComponent, NavItemComponent, NavLinkDirective, RouterLink, RouterLinkActive, NgTemplateOutlet, BreadcrumbRouterComponent, DropdownComponent, DropdownToggleDirective, AvatarComponent, DropdownMenuDirective, DropdownHeaderDirective, DropdownItemDirective, BadgeComponent, DropdownDividerDirective]
 })
 export class DefaultHeaderComponent extends HeaderComponent {
 

src/app/layout/default-layout/default-layout.component.ts

@@ -26,27 +26,26 @@ function isOverflown(element: HTMLElement) {
 }
 
 @Component({
-  selector: 'app-dashboard',
-  templateUrl: './default-layout.component.html',
-  styleUrls: ['./default-layout.component.scss'],
-  standalone: true,
-  imports: [
-    SidebarComponent,
-    SidebarHeaderComponent,
-    SidebarBrandComponent,
-    RouterLink,
-    IconDirective,
-    NgScrollbar,
-    SidebarNavComponent,
-    SidebarFooterComponent,
-    SidebarToggleDirective,
-    SidebarTogglerDirective,
-    DefaultHeaderComponent,
-    ShadowOnScrollDirective,
-    ContainerComponent,
-    RouterOutlet,
-    DefaultFooterComponent
-  ]
+    selector: 'app-dashboard',
+    templateUrl: './default-layout.component.html',
+    styleUrls: ['./default-layout.component.scss'],
+    imports: [
+        SidebarComponent,
+        SidebarHeaderComponent,
+        SidebarBrandComponent,
+        RouterLink,
+        IconDirective,
+        NgScrollbar,
+        SidebarNavComponent,
+        SidebarFooterComponent,
+        SidebarToggleDirective,
+        SidebarTogglerDirective,
+        DefaultHeaderComponent,
+        ShadowOnScrollDirective,
+        ContainerComponent,
+        RouterOutlet,
+        DefaultFooterComponent
+    ]
 })
 export class DefaultLayoutComponent {
   public navItems = navItems;

src/app/views/base/accordion/accordions.component.ts

@@ -7,7 +7,6 @@ import { DocsExampleComponent } from '@docs-components/public-api';
     selector: 'app-accordions',
     templateUrl: './accordions.component.html',
     styleUrls: ['./accordions.component.scss'],
-    standalone: true,
     imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, AccordionComponent, AccordionItemComponent, TemplateIdDirective, AccordionButtonDirective, BgColorDirective]
 })
 export class AccordionsComponent {

src/app/views/base/breadcrumbs/breadcrumbs.component.ts

@@ -14,10 +14,9 @@ import {
 } from '@coreui/angular';
 
 @Component({
-  templateUrl: './breadcrumbs.component.html',
-  styleUrls: ['./breadcrumbs.component.scss'],
-  standalone: true,
-  imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, BreadcrumbComponent, BreadcrumbItemComponent, NgClass, BreadcrumbRouterComponent]
+    templateUrl: './breadcrumbs.component.html',
+    styleUrls: ['./breadcrumbs.component.scss'],
+    imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, BreadcrumbComponent, BreadcrumbItemComponent, NgClass, BreadcrumbRouterComponent]
 })
 export class BreadcrumbsComponent implements OnInit {
   public items = <any>[];

src/app/views/base/cards/cards.component.ts

@@ -24,22 +24,19 @@ import {
   TabPanelComponent,
   TabsComponent,
   TabsContentComponent,
-  TabsListComponent,
-  TextColorDirective
+  TabsListComponent
 } from '@coreui/angular';
-import { IconDirective } from '@coreui/icons-angular';
 
 type CardColor = {
   color: string
   textColor?: string
 }
 
 @Component({
-  selector: 'app-cards',
-  templateUrl: './cards.component.html',
-  styleUrls: ['./cards.component.scss'],
-  standalone: true,
-  imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, NgTemplateOutlet, CardTitleDirective, CardTextDirective, ButtonDirective, CardSubtitleDirective, CardLinkDirective, RouterLink, ListGroupDirective, ListGroupItemDirective, CardFooterComponent, BorderDirective, CardGroupComponent, GutterDirective, CardImgDirective, TabsComponent, TabsListComponent, IconDirective, TabDirective, TabsContentComponent, TabPanelComponent]
+    selector: 'app-cards',
+    templateUrl: './cards.component.html',
+    styleUrls: ['./cards.component.scss'],
+  imports: [RowComponent, ColComponent, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, NgTemplateOutlet, CardTitleDirective, CardTextDirective, ButtonDirective, CardSubtitleDirective, CardLinkDirective, RouterLink, ListGroupDirective, ListGroupItemDirective, CardFooterComponent, BorderDirective, CardGroupComponent, GutterDirective, CardImgDirective, TabsComponent, TabsListComponent, TabDirective, TabsContentComponent, TabPanelComponent]
 })
 export class CardsComponent {
 

src/app/views/base/carousels/carousels.component.ts

@@ -8,7 +8,6 @@ import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHead
     selector: 'app-carousels',
     templateUrl: './carousels.component.html',
     styleUrls: ['./carousels.component.scss'],
-    standalone: true,
     imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, ThemeDirective, CarouselComponent, CarouselInnerComponent, CarouselItemComponent, CarouselControlComponent, IconDirective, CarouselIndicatorsComponent, CarouselCaptionComponent]
 })
 export class CarouselsComponent {

src/app/views/base/collapses/collapses.component.ts

@@ -6,7 +6,6 @@ import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHead
     selector: 'app-collapses',
     templateUrl: './collapses.component.html',
     styleUrls: ['./collapses.component.scss'],
-    standalone: true,
     imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, ButtonDirective, CollapseDirective]
 })
 export class CollapsesComponent {

src/app/views/base/list-groups/list-groups.component.ts

@@ -7,7 +7,6 @@ import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHead
     selector: 'app-list-groups',
     templateUrl: './list-groups.component.html',
     styleUrls: ['./list-groups.component.scss'],
-    standalone: true,
     imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, ListGroupDirective, ListGroupItemDirective, BadgeComponent, ReactiveFormsModule, FormDirective, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, ButtonDirective]
 })
 export class ListGroupsComponent {

src/app/views/base/navs/navs.component.ts

@@ -7,7 +7,6 @@ import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHead
     selector: 'app-navs',
     templateUrl: './navs.component.html',
     styleUrls: ['./navs.component.scss'],
-    standalone: true,
     imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, NavComponent, NavItemComponent, NavLinkDirective, RouterLink, ThemeDirective, DropdownComponent, DropdownToggleDirective, DropdownMenuDirective, DropdownItemDirective]
 })
 export class NavsComponent {

src/app/views/base/paginations/paginations.component.ts

@@ -7,7 +7,6 @@ import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHead
     selector: 'app-paginations',
     templateUrl: './paginations.component.html',
     styleUrls: ['./paginations.component.scss'],
-    standalone: true,
     imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, PaginationComponent, PageItemComponent, PageLinkDirective, RouterLink]
 })
 export class PaginationsComponent {

src/app/views/base/placeholders/placeholders.component.ts

@@ -7,7 +7,6 @@ import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHead
     selector: 'app-placeholders',
     templateUrl: './placeholders.component.html',
     styleUrls: ['./placeholders.component.scss'],
-    standalone: true,
     imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, CardImgDirective, CardTitleDirective, CardTextDirective, ButtonDirective, ColDirective, RouterLink, PlaceholderAnimationDirective, PlaceholderDirective, BgColorDirective]
 })
 export class PlaceholdersComponent implements OnInit {

src/app/views/base/popovers/popovers.component.ts

@@ -6,7 +6,6 @@ import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHead
     selector: 'app-popovers',
     templateUrl: './popovers.component.html',
     styleUrls: ['./popovers.component.scss'],
-    standalone: true,
     imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, ButtonDirective, PopoverDirective]
 })
 export class PopoversComponent implements OnInit {

src/app/views/base/progress/progress.component.ts

@@ -5,7 +5,6 @@ import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHead
 @Component({
     selector: 'app-progress',
     templateUrl: './progress.component.html',
-    standalone: true,
     imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, ProgressBarDirective, ProgressComponent_1, ProgressBarComponent, ProgressStackedComponent]
 })
 export class ProgressComponent {

src/app/views/base/spinners/spinners.component.ts

@@ -6,7 +6,6 @@ import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHead
     selector: 'app-spinners',
     templateUrl: './spinners.component.html',
     styleUrls: ['./spinners.component.scss'],
-    standalone: true,
     imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, SpinnerComponent, ButtonDirective]
 })
 export class SpinnersComponent {

src/app/views/base/tables/tables.component.ts

@@ -6,7 +6,6 @@ import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHead
     selector: 'app-tables',
     templateUrl: './tables.component.html',
     styleUrls: ['./tables.component.scss'],
-    standalone: true,
     imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, TableDirective, TableColorDirective, TableActiveDirective, BorderDirective, AlignDirective]
 })
 export class TablesComponent {

src/app/views/base/tabs/tabs.component.ts

@@ -15,24 +15,23 @@ import {
 import { IconDirective } from '@coreui/icons-angular';
 
 @Component({
-  selector: 'app-tabs',
-  templateUrl: './tabs.component.html',
-  styleUrls: ['./tabs.component.scss'],
-  standalone: true,
-  imports: [
-    CardBodyComponent,
-    CardComponent,
-    CardHeaderComponent,
-    ColComponent,
-    RoundedDirective,
-    RowComponent,
-    TabDirective,
-    TabPanelComponent,
-    TabsComponent,
-    TabsContentComponent,
-    TabsListComponent,
-    IconDirective
-  ]
+    selector: 'app-tabs',
+    templateUrl: './tabs.component.html',
+    styleUrls: ['./tabs.component.scss'],
+    imports: [
+        CardBodyComponent,
+        CardComponent,
+        CardHeaderComponent,
+        ColComponent,
+        RoundedDirective,
+        RowComponent,
+        TabDirective,
+        TabPanelComponent,
+        TabsComponent,
+        TabsContentComponent,
+        TabsListComponent,
+        IconDirective
+    ]
 })
 export class AppTabsComponent {
 
@@ -42,7 +41,7 @@ export class AppTabsComponent {
     { name: 'Contact 03', id: 'tab-03', icon: 'cilCode' }
   ];
 
-  activeItem = signal(0);
+  readonly activeItem = signal(0);
 
   handleActiveItemChange(value: string | number | undefined) {
     this.activeItem.set(<number>value);

src/app/views/base/tooltips/tooltips.component.ts

@@ -7,7 +7,6 @@ import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHead
     selector: 'app-tooltips',
     templateUrl: './tooltips.component.html',
     styleUrls: ['./tooltips.component.scss'],
-    standalone: true,
     imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, TooltipDirective, RouterLink, ButtonDirective]
 })
 export class TooltipsComponent {

src/app/views/buttons/button-groups/button-groups.component.ts

@@ -8,7 +8,6 @@ import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHead
     selector: 'app-button-groups',
     templateUrl: './button-groups.component.html',
     styleUrls: ['./button-groups.component.scss'],
-    standalone: true,
     imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, ButtonGroupComponent, ButtonDirective, RouterLink, ReactiveFormsModule, FormCheckLabelDirective, ButtonToolbarComponent, InputGroupComponent, InputGroupTextDirective, FormControlDirective, ThemeDirective, DropdownComponent, DropdownToggleDirective, DropdownMenuDirective, DropdownItemDirective, DropdownDividerDirective]
 })
 export class ButtonGroupsComponent {

src/app/views/buttons/buttons/buttons.component.ts

@@ -13,10 +13,9 @@ import {
 } from '@coreui/angular';
 
 @Component({
-  selector: 'app-buttons',
-  templateUrl: './buttons.component.html',
-  standalone: true,
-  imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, ButtonDirective, IconDirective, RouterLink]
+    selector: 'app-buttons',
+    templateUrl: './buttons.component.html',
+    imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, ButtonDirective, IconDirective, RouterLink]
 })
 export class ButtonsComponent {
 

src/app/views/buttons/dropdowns/dropdowns.component.ts

@@ -31,39 +31,38 @@ import {
 } from '@coreui/angular';
 
 @Component({
-  selector: 'app-dropdowns',
-  templateUrl: './dropdowns.component.html',
-  standalone: true,
-  imports: [
-    RowComponent,
-    ColComponent,
-    TextColorDirective,
-    CardComponent,
-    CardHeaderComponent,
-    CardBodyComponent,
-    DocsExampleComponent,
-    ThemeDirective,
-    DropdownComponent,
-    ButtonDirective,
-    DropdownToggleDirective,
-    DropdownMenuDirective,
-    DropdownHeaderDirective,
-    DropdownItemDirective,
-    RouterLink,
-    DropdownDividerDirective,
-    NavbarComponent,
-    ContainerComponent,
-    NavbarBrandDirective,
-    NavbarTogglerDirective,
-    CollapseDirective,
-    NavbarNavComponent,
-    NavItemComponent,
-    NavLinkDirective,
-    ReactiveFormsModule,
-    FormDirective,
-    FormControlDirective,
-    ButtonGroupComponent
-  ]
+    selector: 'app-dropdowns',
+    templateUrl: './dropdowns.component.html',
+    imports: [
+        RowComponent,
+        ColComponent,
+        TextColorDirective,
+        CardComponent,
+        CardHeaderComponent,
+        CardBodyComponent,
+        DocsExampleComponent,
+        ThemeDirective,
+        DropdownComponent,
+        ButtonDirective,
+        DropdownToggleDirective,
+        DropdownMenuDirective,
+        DropdownHeaderDirective,
+        DropdownItemDirective,
+        RouterLink,
+        DropdownDividerDirective,
+        NavbarComponent,
+        ContainerComponent,
+        NavbarBrandDirective,
+        NavbarTogglerDirective,
+        CollapseDirective,
+        NavbarNavComponent,
+        NavItemComponent,
+        NavLinkDirective,
+        ReactiveFormsModule,
+        FormDirective,
+        FormControlDirective,
+        ButtonGroupComponent
+    ]
 })
 export class DropdownsComponent {
 

src/app/views/charts/charts.component.ts

@@ -8,7 +8,6 @@ import { DocsCalloutComponent } from '@docs-components/public-api';
     selector: 'app-charts',
     templateUrl: './charts.component.html',
     styleUrls: ['./charts.component.scss'],
-    standalone: true,
     imports: [RowComponent, ColComponent, DocsCalloutComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, ChartjsComponent]
 })
 export class ChartsComponent {