feat: migrate all components and directives to standalone

ng-bootstrap · Nov 24, 2022 · 5e6d11c · 5e6d11c
1 parent ad9b362
commit 5e6d11c
Show file tree

Hide file tree

Showing 72 changed files with 480 additions and 568 deletions.
diff --git a/src/accordion/accordion.module.ts b/src/accordion/accordion.module.ts
@@ -1,15 +1,6 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 
-import {
-	NgbAccordion,
-	NgbPanel,
-	NgbPanelTitle,
-	NgbPanelContent,
-	NgbPanelHeader,
-	NgbPanelToggle,
-	NgbRefDirective,
-} from './accordion';
+import { NgbAccordion, NgbPanel, NgbPanelContent, NgbPanelHeader, NgbPanelTitle, NgbPanelToggle } from './accordion';
 
 export {
 	NgbAccordion,
@@ -33,8 +24,7 @@ const NGB_ACCORDION_DIRECTIVES = [
 ];
 
 @NgModule({
-	declarations: [NgbRefDirective, ...NGB_ACCORDION_DIRECTIVES],
+	imports: NGB_ACCORDION_DIRECTIVES,
 	exports: NGB_ACCORDION_DIRECTIVES,
-	imports: [CommonModule],
 })
 export class NgbAccordionModule {}
diff --git a/src/accordion/accordion.spec.ts b/src/accordion/accordion.spec.ts
@@ -1,10 +1,17 @@
 import { TestBed, ComponentFixture, inject } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NgFor } from '@angular/common';
 import { createGenericTestComponent, isBrowserVisible } from '../test/common';
 
 import { Component } from '@angular/core';
 
-import { NgbAccordionModule, NgbPanelChangeEvent, NgbAccordionConfig, NgbAccordion } from './accordion.module';
+import {
+	NgbAccordionModule,
+	NgbPanelChangeEvent,
+	NgbAccordionConfig,
+	NgbAccordion,
+	NgbPanel,
+} from './accordion.module';
 import { NgbConfig } from '../ngb-config';
 import { NgbConfigAnimation } from '../test/ngb-config-animation';
 
@@ -68,7 +75,6 @@ describe('ngb-accordion', () => {
   `;
 
 	beforeEach(() => {
-		TestBed.configureTestingModule({ declarations: [TestComponent], imports: [NgbAccordionModule] });
 		TestBed.overrideComponent(TestComponent, { set: { template: html } });
 	});
 
@@ -678,10 +684,6 @@ describe('ngb-accordion', () => {
 	describe('Custom config', () => {
 		let config: NgbAccordionConfig;
 
-		beforeEach(() => {
-			TestBed.configureTestingModule({ imports: [NgbAccordionModule] });
-		});
-
 		beforeEach(inject([NgbAccordionConfig], (c: NgbAccordionConfig) => {
 			config = c;
 			config.closeOthers = true;
@@ -705,7 +707,6 @@ describe('ngb-accordion', () => {
 
 		beforeEach(() => {
 			TestBed.configureTestingModule({
-				imports: [NgbAccordionModule],
 				providers: [{ provide: NgbAccordionConfig, useValue: config }],
 			});
 		});
@@ -897,6 +898,8 @@ describe('ngb-accordion', () => {
 if (isBrowserVisible('ngb-accordion animations')) {
 	describe('ngb-accordion animations', () => {
 		@Component({
+			standalone: true,
+			imports: [NgbAccordion, NgbPanel],
 			template: `
 				<ngb-accordion
 					activeIds="first"
@@ -921,8 +924,6 @@ if (isBrowserVisible('ngb-accordion animations')) {
 
 		beforeEach(() => {
 			TestBed.configureTestingModule({
-				declarations: [TestAnimationComponent],
-				imports: [NgbAccordionModule],
 				providers: [{ provide: NgbConfig, useClass: NgbConfigAnimation }],
 			});
 		});
@@ -1074,7 +1075,7 @@ if (isBrowserVisible('ngb-accordion animations')) {
 	});
 }
 
-@Component({ selector: 'test-cmp', template: '' })
+@Component({ selector: 'test-cmp', standalone: true, imports: [NgbAccordionModule, NgFor], template: '' })
 class TestComponent {
 	activeIds: string | string[] = [];
 	classType;

diff --git a/src/accordion/accordion.ts b/src/accordion/accordion.ts
@@ -24,6 +24,7 @@ import { NgbAccordionConfig } from './accordion-config';
 import { ngbRunTransition } from '../util/transition/ngbTransition';
 import { ngbCollapsingTransition } from '../util/transition/ngbCollapseTransition';
 import { take } from 'rxjs/operators';
+import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
 
 let nextId = 0;
 
@@ -48,7 +49,7 @@ export interface NgbPanelHeaderContext {
  *
  * @since 4.1.0
  */
-@Directive({ selector: 'ng-template[ngbPanelHeader]' })
+@Directive({ selector: 'ng-template[ngbPanelHeader]', standalone: true })
 export class NgbPanelHeader {
 	constructor(public templateRef: TemplateRef<any>) {}
 }
@@ -58,23 +59,23 @@ export class NgbPanelHeader {
  *
  * You can also use [`NgbPanelHeader`](#/components/accordion/api#NgbPanelHeader) to customize the full panel header.
  */
-@Directive({ selector: 'ng-template[ngbPanelTitle]' })
+@Directive({ selector: 'ng-template[ngbPanelTitle]', standalone: true })
 export class NgbPanelTitle {
 	constructor(public templateRef: TemplateRef<any>) {}
 }
 
 /**
  * A directive that wraps the accordion panel content.
  */
-@Directive({ selector: 'ng-template[ngbPanelContent]' })
+@Directive({ selector: 'ng-template[ngbPanelContent]', standalone: true })
 export class NgbPanelContent {
 	constructor(public templateRef: TemplateRef<any>) {}
 }
 
 /**
  * A directive that wraps an individual accordion panel with title and collapsible content.
  */
-@Directive({ selector: 'ngb-panel' })
+@Directive({ selector: 'ngb-panel', standalone: true })
 export class NgbPanel implements AfterContentChecked {
 	/**
 	 *  If `true`, the panel is disabled an can't be toggled.
@@ -174,7 +175,7 @@ export interface NgbPanelChangeEvent {
 	preventDefault: () => void;
 }
 
-@Directive({ selector: '[ngbRef]' })
+@Directive({ selector: '[ngbRef]', standalone: true })
 export class NgbRefDirective implements OnInit, OnDestroy {
 	@Output() ngbRef = new EventEmitter<HTMLElement | null>();
 	constructor(private _El: ElementRef) {}
@@ -188,6 +189,38 @@ export class NgbRefDirective implements OnInit, OnDestroy {
 	}
 }
 
+/**
+ * A directive to put on a button that toggles panel opening and closing.
+ *
+ * To be used inside the [`NgbPanelHeader`](#/components/accordion/api#NgbPanelHeader)
+ *
+ * @since 4.1.0
+ */
+@Directive({
+	selector: 'button[ngbPanelToggle]',
+	standalone: true,
+	host: {
+		type: 'button',
+		'[disabled]': 'panel.disabled',
+		'[class.collapsed]': '!panel.isOpen',
+		'[attr.aria-expanded]': 'panel.isOpen',
+		'[attr.aria-controls]': 'panel.id',
+		'(click)': 'accordion.toggle(panel.id)',
+	},
+})
+export class NgbPanelToggle {
+	static ngAcceptInputType_ngbPanelToggle: NgbPanel | '';
+
+	@Input()
+	set ngbPanelToggle(panel: NgbPanel) {
+		if (panel) {
+			this.panel = panel;
+		}
+	}
+
+	constructor(public accordion: NgbAccordion, @Optional() @Host() public panel: NgbPanel) {}
+}
+
 /**
  * Accordion is a collection of collapsible panels (bootstrap cards).
  *
@@ -197,12 +230,15 @@ export class NgbRefDirective implements OnInit, OnDestroy {
 @Component({
 	selector: 'ngb-accordion',
 	exportAs: 'ngbAccordion',
+	standalone: true,
+	imports: [NgFor, NgTemplateOutlet, NgbPanelToggle, NgbRefDirective, NgbPanelHeader, NgIf],
 	encapsulation: ViewEncapsulation.None,
 	host: { class: 'accordion', role: 'tablist', '[attr.aria-multiselectable]': '!closeOtherPanels' },
 	template: `
 		<ng-template #t ngbPanelHeader let-panel>
 			<button class="accordion-button" [ngbPanelToggle]="panel">
-				{{ panel.title }}<ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></ng-template>
+				{{ panel.title }}
+				<ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></ng-template>
 			</button>
 		</ng-template>
 		<ng-template ngFor let-panel [ngForOf]="panels">
@@ -468,34 +504,3 @@ export class NgbAccordion implements AfterContentChecked {
 		});
 	}
 }
-
-/**
- * A directive to put on a button that toggles panel opening and closing.
- *
- * To be used inside the [`NgbPanelHeader`](#/components/accordion/api#NgbPanelHeader)
- *
- * @since 4.1.0
- */
-@Directive({
-	selector: 'button[ngbPanelToggle]',
-	host: {
-		type: 'button',
-		'[disabled]': 'panel.disabled',
-		'[class.collapsed]': '!panel.isOpen',
-		'[attr.aria-expanded]': 'panel.isOpen',
-		'[attr.aria-controls]': 'panel.id',
-		'(click)': 'accordion.toggle(panel.id)',
-	},
-})
-export class NgbPanelToggle {
-	static ngAcceptInputType_ngbPanelToggle: NgbPanel | '';
-
-	@Input()
-	set ngbPanelToggle(panel: NgbPanel) {
-		if (panel) {
-			this.panel = panel;
-		}
-	}
-
-	constructor(public accordion: NgbAccordion, @Optional() @Host() public panel: NgbPanel) {}
-}
diff --git a/src/alert/alert.module.ts b/src/alert/alert.module.ts
@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 
 import { NgbAlert } from './alert';
 
 export { NgbAlert } from './alert';
 export { NgbAlertConfig } from './alert-config';
 
-@NgModule({ declarations: [NgbAlert], exports: [NgbAlert], imports: [CommonModule] })
+@NgModule({
+	imports: [NgbAlert],
+	exports: [NgbAlert],
+})
 export class NgbAlertModule {}
diff --git a/src/alert/alert.spec.ts b/src/alert/alert.spec.ts
@@ -5,7 +5,6 @@ import { By } from '@angular/platform-browser';
 
 import { Component } from '@angular/core';
 
-import { NgbAlertModule } from './alert.module';
 import { NgbAlert } from './alert';
 import { NgbAlertConfig } from './alert-config';
 
@@ -24,10 +23,6 @@ function getCloseButton(element: HTMLElement): HTMLButtonElement {
 }
 
 describe('ngb-alert', () => {
-	beforeEach(() => {
-		TestBed.configureTestingModule({ declarations: [TestComponent], imports: [NgbAlertModule] });
-	});
-
 	it('should initialize inputs with default values', () => {
 		const defaultConfig = new NgbAlertConfig(new NgbConfig());
 		const alertCmp = TestBed.createComponent(NgbAlert).componentInstance;
@@ -145,10 +140,6 @@ describe('ngb-alert', () => {
 	describe('Custom config', () => {
 		let config: NgbAlertConfig;
 
-		beforeEach(() => {
-			TestBed.configureTestingModule({ imports: [NgbAlertModule] });
-		});
-
 		beforeEach(inject([NgbAlertConfig], (c: NgbAlertConfig) => {
 			config = c;
 			config.dismissible = false;
@@ -172,7 +163,6 @@ describe('ngb-alert', () => {
 
 		beforeEach(() => {
 			TestBed.configureTestingModule({
-				imports: [NgbAlertModule],
 				providers: [{ provide: NgbAlertConfig, useValue: config }],
 			});
 		});
@@ -191,6 +181,8 @@ describe('ngb-alert', () => {
 if (isBrowserVisible('ngb-alert animations')) {
 	describe('ngb-alert animations', () => {
 		@Component({
+			standalone: true,
+			imports: [NgbAlert],
 			template: ` <ngb-alert type="success" (close)="onClose()">Cool!</ngb-alert>`,
 			host: { '[class.ngb-reduce-motion]': 'reduceMotion' },
 		})
@@ -201,8 +193,6 @@ if (isBrowserVisible('ngb-alert animations')) {
 
 		beforeEach(() => {
 			TestBed.configureTestingModule({
-				declarations: [TestAnimationComponent],
-				imports: [NgbAlertModule],
 				providers: [{ provide: NgbConfig, useClass: NgbConfigAnimation }],
 			});
 		});
@@ -231,7 +221,7 @@ if (isBrowserVisible('ngb-alert animations')) {
 	});
 }
 
-@Component({ selector: 'test-cmp', template: '' })
+@Component({ selector: 'test-cmp', standalone: true, imports: [NgbAlert], template: '' })
 class TestComponent {
 	name = 'World';
 	closed = false;

diff --git a/src/alert/alert.ts b/src/alert/alert.ts
@@ -18,6 +18,7 @@ import { Observable } from 'rxjs';
 import { NgbAlertConfig } from './alert-config';
 import { ngbRunTransition } from '../util/transition/ngbTransition';
 import { ngbAlertFadingTransition } from './alert-transition';
+import { NgIf } from '@angular/common';
 
 /**
  * Alert is a component to provide contextual feedback messages for user.
@@ -27,6 +28,8 @@ import { ngbAlertFadingTransition } from './alert-transition';
 @Component({
 	selector: 'ngb-alert',
 	exportAs: 'ngbAlert',
+	standalone: true,
+	imports: [NgIf],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	encapsulation: ViewEncapsulation.None,
 	host: { role: 'alert', class: 'alert show', '[class.fade]': 'animation', '[class.alert-dismissible]': 'dismissible' },

diff --git a/src/carousel/carousel.module.ts b/src/carousel/carousel.module.ts
@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { NGB_CAROUSEL_DIRECTIVES } from './carousel';
+import { NgbCarousel, NgbSlide } from './carousel';
 
 export { NgbCarousel, NgbSlide, NgbSlideEvent, NgbSlideEventSource } from './carousel';
 export { NgbSlideEventDirection } from './carousel-transition';
 export { NgbCarouselConfig } from './carousel-config';
 
-@NgModule({ declarations: NGB_CAROUSEL_DIRECTIVES, exports: NGB_CAROUSEL_DIRECTIVES, imports: [CommonModule] })
+@NgModule({
+	imports: [NgbCarousel, NgbSlide],
+	exports: [NgbCarousel, NgbSlide],
+})
 export class NgbCarouselModule {}