feat(*): initial migration to standalone component

Author: Konstantin Dinev

.eslintrc.json

@@ -10,8 +10,7 @@
       ],
       "parserOptions": {
         "project": [
-          "tsconfig.json",
-          "e2e/tsconfig.json"
+          "tsconfig.json"
         ],
         "createDefaultProgram": true
       },

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

@@ -21,14 +21,13 @@ describe('Rendering Tests', () => {
     beforeAll(
         waitForAsync(() => {
             TestBed.configureTestingModule({
-                declarations: [
-                    IgxAccordionSampleTestComponent,],
-                imports: [
-                    NoopAnimationsModule,
-                    IgxAccordionModule,
-                    IgxExpansionPanelModule
-                ]
-            }).compileComponents();
+    imports: [
+        NoopAnimationsModule,
+        IgxAccordionModule,
+        IgxExpansionPanelModule,
+        IgxAccordionSampleTestComponent
+    ]
+}).compileComponents();
         })
     );
     beforeEach(() => {
@@ -407,7 +406,10 @@ describe('Rendering Tests', () => {
     <div *ngIf="divChild"></div>
 </igx-accordion>
 
-`
+`,
+    standalone: true,
+    imports: [IgxAccordionModule,
+        IgxExpansionPanelModule]
 })
 export class IgxAccordionSampleTestComponent {
     @ViewChild(IgxAccordionComponent) public accordion: IgxAccordionComponent;

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

@@ -47,7 +47,8 @@ let NEXT_ID = 0;
  */
 @Component({
     selector: 'igx-accordion',
-    templateUrl: 'accordion.component.html'
+    templateUrl: 'accordion.component.html',
+    standalone: true
 })
 export class IgxAccordionComponent implements AfterContentInit, AfterViewInit, OnDestroy {
     /**

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

@@ -1,2 +1 @@
-export * from './accordion.module';
 export * from './accordion.component';

projects/igniteui-angular/src/lib/accordion/public_api.ts

@@ -21,19 +21,17 @@ describe('igxActionStrip', () => {
 
     configureTestSuite(() => {
         return TestBed.configureTestingModule({
-            declarations: [
-                IgxActionStripComponent,
-                IgxActionStripTestingComponent,
-                IgxActionStripMenuTestingComponent,
-                IgxActionStripCombinedMenuTestingComponent
-            ],
-            imports: [
-                NoopAnimationsModule,
-                IgxActionStripModule,
-                IgxIconModule,
-                IgxToggleModule
-            ]
-        });
+    imports: [
+        NoopAnimationsModule,
+        IgxActionStripModule,
+        IgxIconModule,
+        IgxToggleModule,
+        IgxActionStripComponent,
+        IgxActionStripTestingComponent,
+        IgxActionStripMenuTestingComponent,
+        IgxActionStripCombinedMenuTestingComponent
+    ]
+});
     });
 
     describe('Unit tests: ', () => {
@@ -174,7 +172,11 @@ describe('igxActionStrip', () => {
         <igx-icon class="asIcon" (click)="onIconClick()">alarm</igx-icon>
     </igx-action-strip>
 </div>
-`
+`,
+    standalone: true,
+    imports: [IgxActionStripModule,
+        IgxIconModule,
+        IgxToggleModule]
 })
 class IgxActionStripTestingComponent {
     @ViewChild('actionStrip', { read: IgxActionStripComponent, static: true })
@@ -210,7 +212,11 @@ class IgxActionStripTestingComponent {
             <span *igxActionStripMenuItem>Download</span>
         </igx-action-strip>
     </div>
-    `
+    `,
+    standalone: true,
+    imports: [IgxActionStripModule,
+        IgxIconModule,
+        IgxToggleModule]
 })
 class IgxActionStripMenuTestingComponent {
     @ViewChild('actionStrip', { read: IgxActionStripComponent, static: true })
@@ -231,7 +237,11 @@ class IgxActionStripMenuTestingComponent {
             <span *igxActionStripMenuItem>Download</span>
         </igx-action-strip>
     </div>
-    `
+    `,
+    standalone: true,
+    imports: [IgxActionStripModule,
+        IgxIconModule,
+        IgxToggleModule]
 })
 class IgxActionStripCombinedMenuTestingComponent {
     @ViewChild('actionStrip', { read: IgxActionStripComponent, static: true })

projects/igniteui-angular/src/lib/action-strip/action-strip.component.spec.ts

@@ -21,9 +21,18 @@ import { CurrentResourceStrings } from '../core/i18n/resources';
 import { IgxDropDownComponent } from '../drop-down/public_api';
 import { CloseScrollStrategy, OverlaySettings } from '../services/public_api';
 import { IgxGridActionsBaseDirective } from './grid-actions/grid-actions-base.directive';
+import { IgxDropDownItemComponent } from '../drop-down/drop-down-item.component';
+import { IgxDropDownComponent as IgxDropDownComponent_1 } from '../drop-down/drop-down.component';
+import { IgxIconComponent } from '../icon/icon.component';
+import { IgxDropDownItemNavigationDirective } from '../drop-down/drop-down-navigation.directive';
+import { IgxToggleActionDirective } from '../directives/toggle/toggle.directive';
+import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
+import { IgxButtonDirective } from '../directives/button/button.directive';
+import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
 
 @Directive({
-    selector: '[igxActionStripMenuItem]'
+    selector: '[igxActionStripMenuItem]',
+    standalone: true
 })
 export class IgxActionStripMenuItemDirective {
     constructor(
@@ -54,7 +63,9 @@ export class IgxActionStripMenuItemDirective {
  */
 @Component({
     selector: 'igx-action-strip',
-    templateUrl: 'action-strip.component.html'
+    templateUrl: 'action-strip.component.html',
+    standalone: true,
+    imports: [NgIf, IgxButtonDirective, IgxRippleDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent_1, NgFor, IgxDropDownItemComponent, NgTemplateOutlet]
 })
 
 export class IgxActionStripComponent extends DisplayDensityBase implements AfterContentInit, AfterViewInit {

projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts

@@ -6,23 +6,15 @@ import { IgxGridActionsBaseDirective } from './grid-actions/grid-actions-base.di
 import { CommonModule } from '@angular/common';
 import { IgxDropDownModule } from '../drop-down/public_api';
 import { IgxToggleModule } from '../directives/toggle/toggle.directive';
-import { IgxButtonModule } from '../directives/button/button.directive';
-import { IgxIconModule } from '../icon/public_api';
-import { IgxRippleModule } from '../directives/ripple/ripple.directive';
+
+
+
 import { IgxGridActionButtonComponent } from './grid-actions/grid-action-button.component';
 
 /**
  * @hidden
  */
 @NgModule({
-    declarations: [
-        IgxActionStripComponent,
-        IgxActionStripMenuItemDirective,
-        IgxGridPinningActionsComponent,
-        IgxGridEditingActionsComponent,
-        IgxGridActionsBaseDirective,
-        IgxGridActionButtonComponent
-    ],
     exports: [
         IgxActionStripComponent,
         IgxActionStripMenuItemDirective,
@@ -31,6 +23,11 @@ import { IgxGridActionButtonComponent } from './grid-actions/grid-action-button.
         IgxGridActionsBaseDirective,
         IgxGridActionButtonComponent
     ],
-    imports: [CommonModule, IgxDropDownModule, IgxToggleModule, IgxButtonModule, IgxIconModule, IgxRippleModule]
+    imports: [CommonModule, IgxDropDownModule, IgxToggleModule, IgxActionStripComponent,
+    IgxActionStripMenuItemDirective,
+    IgxGridPinningActionsComponent,
+    IgxGridEditingActionsComponent,
+    IgxGridActionsBaseDirective,
+    IgxGridActionButtonComponent]
 })
 export class IgxActionStripModule { }

projects/igniteui-angular/src/lib/action-strip/action-strip.module.ts

@@ -1,7 +1,13 @@
 import { Component, Input, TemplateRef, ViewChild, Output, EventEmitter, ElementRef } from '@angular/core';
+import { IgxIconComponent } from '../../icon/icon.component';
+import { IgxRippleDirective } from '../../directives/ripple/ripple.directive';
+import { IgxButtonDirective } from '../../directives/button/button.directive';
+import { NgIf } from '@angular/common';
 @Component({
     selector: 'igx-grid-action-button',
-    templateUrl: 'grid-action-button.component.html'
+    templateUrl: 'grid-action-button.component.html',
+    standalone: true,
+    imports: [NgIf, IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
 })
 
 export class IgxGridActionButtonComponent {

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.ts

@@ -5,7 +5,8 @@ import { IgxRowDirective } from '../../grids/row.directive';
 import { IgxIconService } from '../../icon/icon.service';
 
 @Directive({
-    selector: '[igxGridActionsBase]'
+    selector: '[igxGridActionsBase]',
+    standalone: true
 })
 export class IgxGridActionsBaseDirective implements AfterViewInit {
     @ViewChildren(IgxGridActionButtonComponent)