feat: move all components to standalone components

Author: tom-wegener

src/accordion/accordion-item.component.ts

@@ -7,6 +7,9 @@ import {
 	EventEmitter,
 	ChangeDetectionStrategy
 } from "@angular/core";
+import { NgTemplateOutlet, NgClass } from "@angular/common";
+import { IconDirective, IconService, ICON_SERVICE_PROVIDER } from "carbon-components-angular/icon";
+import ChevronDown16 from "@carbon/icons/es/chevron--down/16";
 
 @Component({
 	selector: "cds-accordion-item, ibm-accordion-item",
@@ -48,7 +51,10 @@ import {
 			display: list-item;
 		}
 	`],
-	changeDetection: ChangeDetectionStrategy.OnPush
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	standalone: true,
+	providers: [ICON_SERVICE_PROVIDER],
+	imports: [IconDirective, NgTemplateOutlet, NgClass]
 })
 export class AccordionItem {
 	static accordionItemCount = 0;
@@ -63,6 +69,10 @@ export class AccordionItem {
 	@HostBinding("class.cds--accordion__item--disabled") @Input() disabled = false;
 	@HostBinding("attr.role") role = "listitem";
 
+	constructor(private iconService: IconService) {
+		this.iconService.registerAll([ChevronDown16]);
+	}
+
 	public toggleExpanded() {
 		if (!this.skeleton) {
 			this.expanded = !this.expanded;

src/accordion/accordion.component.spec.ts

@@ -2,7 +2,7 @@ import { TestBed } from "@angular/core/testing";
 import { FormsModule } from "@angular/forms";
 import { By } from "@angular/platform-browser";
 import { Component } from "@angular/core";
-import { IconModule } from "../icon/index";
+import { IconDirective } from "../icon/index";
 import { AccordionItem } from "./accordion-item.component";
 import { Accordion } from "./accordion.component";
 
@@ -15,7 +15,12 @@ import { Accordion } from "./accordion.component";
 		[skeleton]="skeleton">
 			test-content
 		</cds-accordion-item>
-	<cds-accordion>`
+	<cds-accordion>`,
+	standalone: true,
+	imports: [
+		Accordion,
+		AccordionItem
+	]
 })
 class AccordionTest {
 	disabled = false;
@@ -28,14 +33,8 @@ describe("Accordion", () => {
 	let fixture, wrapper, debugElement;
 	beforeEach(() => {
 		TestBed.configureTestingModule({
-			declarations: [
-				Accordion,
-				AccordionItem,
-				AccordionTest
-			],
 			imports: [
-				FormsModule,
-				IconModule
+				AccordionTest
 			]
 		});
 	});

src/accordion/accordion.component.ts

@@ -7,12 +7,13 @@ import {
 	ChangeDetectionStrategy
 } from "@angular/core";
 import { AccordionItem } from "./accordion-item.component";
+import { NgClass } from "@angular/common";
 
 /**
  * Get started with importing the module:
  *
  * ```typescript
- * import { AccordionModule } from 'carbon-components-angular';
+ * import { Accordion, AccordionItem } from 'carbon-components-angular';
  * ```
  *
  * [See demo](../../?path=/story/components-accordion--basic)
@@ -35,7 +36,9 @@ import { AccordionItem } from "./accordion-item.component";
 			<ng-content />
 		</div>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	standalone: true,
+	imports: [NgClass]
 })
 export class Accordion implements AfterContentInit {
 	/**

src/accordion/accordion.module.ts

@@ -6,17 +6,15 @@ import { AccordionItem } from "./accordion-item.component";
 import { IconModule } from "carbon-components-angular/icon";
 
 @NgModule({
-	declarations: [
-		Accordion,
-		AccordionItem
-	],
 	exports: [
 		Accordion,
 		AccordionItem
 	],
 	imports: [
 		CommonModule,
-		IconModule
+		IconModule,
+		Accordion,
+		AccordionItem
 	]
 })
 export class AccordionModule { }

src/accordion/accordion.stories.ts

@@ -1,12 +1,12 @@
 import { moduleMetadata, Meta } from "@storybook/angular";
-import { DocumentationModule } from "../documentation-component/documentation.module";
-import { AccordionModule, Accordion } from "./";
+import { Documentation } from "../documentation-component/documentation.component";
+import { Accordion, AccordionItem } from "./";
 
 export default {
 	title: "Components/Accordion",
 	decorators: [
 		moduleMetadata({
-			imports: [AccordionModule, DocumentationModule]
+			imports: [Accordion, Documentation, AccordionItem]
 		})
 	],
 	component: Accordion

src/breadcrumb/breadcrumb-item.component.ts

@@ -9,12 +9,14 @@ import {
 } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
 import { Router } from "@angular/router";
+import { PlaceholderService } from "carbon-components-angular/placeholder";
+import { NgTemplateOutlet } from "@angular/common";
 
 @Component({
 	selector: "cds-breadcrumb-item, ibm-breadcrumb-item",
 	template: `
 		<ng-template #content>
-  			<ng-content />
+			<ng-content />
 		</ng-template>
 
 		@if (useTemplate()) {
@@ -29,7 +31,10 @@ import { Router } from "@angular/router";
 			<ng-container *ngTemplateOutlet="content" />
 		}
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	standalone: true,
+	imports: [NgTemplateOutlet],
+	providers: [PlaceholderService]
 })
 export class BreadcrumbItemComponent {
 	@Input() set href(v: string) {

src/breadcrumb/breadcrumb.component.spec.ts

@@ -1,15 +1,12 @@
 import { Component } from "@angular/core";
 import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
-import { FormsModule } from "@angular/forms";
-import { I18nModule } from "../i18n/index";
 import { By } from "@angular/platform-browser";
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing";
 
 import { Breadcrumb } from "./breadcrumb.component";
 import { BreadcrumbItemComponent } from "./breadcrumb-item.component";
-import { BreadcrumbItem } from "./breadcrumb-item.interface";
-import { OverflowMenu } from "carbon-components-angular/dialog";
+import { OverflowMenu } from "../dialog";
 
 @Component({
 	selector: "test-breadcrumb",
@@ -30,7 +27,12 @@ import { OverflowMenu } from "carbon-components-angular/dialog";
 		<cds-breadcrumb-item href="#">
 			Breadcrumb 5
 		</cds-breadcrumb-item>
-	</cds-breadcrumb>`
+	</cds-breadcrumb>`,
+	standalone: true,
+	imports: [
+		Breadcrumb,
+		BreadcrumbItemComponent
+	]
 })
 class TestBreadcrumb {
 	noTrailingSlash = true;
@@ -43,7 +45,11 @@ class TestBreadcrumb {
 		[noTrailingSlash]="noTrailingSlash"
 		[threshold]="threshold"
 		[items]="items">
-	</cds-breadcrumb>`
+	</cds-breadcrumb>`,
+	standalone: true,
+	imports: [
+		Breadcrumb
+	]
 })
 class TestBreadcrumbModel {
 	noTrailingSlash = true;
@@ -63,16 +69,10 @@ describe("Breadcrumb", () => {
 
 		TestBed.configureTestingModule({
 			imports: [
-				FormsModule,
-				I18nModule
-			],
-			schemas: [CUSTOM_ELEMENTS_SCHEMA],
-			declarations: [
-				Breadcrumb,
-				BreadcrumbItemComponent,
 				TestBreadcrumb,
 				TestBreadcrumbModel
-			]
+			],
+			schemas: [CUSTOM_ELEMENTS_SCHEMA]
 		}).compileComponents();
 	}));
 

src/breadcrumb/breadcrumb.component.ts

@@ -14,15 +14,19 @@ import {
 import { BreadcrumbItem } from "./breadcrumb-item.interface";
 import { BreadcrumbItemComponent } from "./breadcrumb-item.component";
 import { Router } from "@angular/router";
-import { I18n } from "carbon-components-angular/i18n";
+import { I18N_SERVICE_PROVIDER, I18n } from "carbon-components-angular/i18n";
+import { NgClass, NgTemplateOutlet } from "@angular/common";
+import { IconDirective } from "carbon-components-angular/icon";
+import { OverflowMenu } from "carbon-components-angular/dialog";
+import { DOCUMENT_SERVICE_PROVIDER, EventService } from "carbon-components-angular/utils";
 
 const MINIMUM_OVERFLOW_THRESHOLD = 4;
 
 /**
  * Get started with importing the module:
  *
  * ```typescript
- * import { BreadcrumbModule } from 'carbon-components-angular';
+ * import { Breadcrumb } from 'carbon-components-angular';
  * ```
  *
  * [See demo](../../?path=/story/components-breadcrumb--basic)
@@ -123,7 +127,10 @@ const MINIMUM_OVERFLOW_THRESHOLD = 4;
 			}
 		</nav>
 	`,
-	changeDetection: ChangeDetectionStrategy.OnPush
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	standalone: true,
+	providers: [I18N_SERVICE_PROVIDER, EventService, DOCUMENT_SERVICE_PROVIDER],
+	imports: [NgClass, BreadcrumbItemComponent, NgTemplateOutlet, IconDirective, OverflowMenu]
 })
 export class Breadcrumb implements AfterContentInit {
 	@ContentChildren(BreadcrumbItemComponent) children: QueryList<BreadcrumbItemComponent>;

src/breadcrumb/breadcrumb.module.ts

@@ -10,15 +10,13 @@ import { ButtonModule } from "carbon-components-angular/button";
 import { IconModule } from "carbon-components-angular/icon";
 
 @NgModule({
-	declarations: [
-		Breadcrumb,
-		BreadcrumbItemComponent
-	],
 	exports: [
 		Breadcrumb,
 		BreadcrumbItemComponent
 	],
 	imports: [
+		Breadcrumb,
+		BreadcrumbItemComponent,
 		CommonModule,
 		ButtonModule,
 		DialogModule,

src/breadcrumb/breadcrumb.stories.ts

@@ -1,10 +1,10 @@
 import { moduleMetadata, Meta } from "@storybook/angular";
 import {
-	BreadcrumbModule,
 	Breadcrumb,
 	BreadcrumbItemComponent,
 	BreadcrumbItem
 } from "./";
+import { I18N_SERVICE_PROVIDER } from "../i18n";
 
 let breadcrumbItems;
 
@@ -25,7 +25,11 @@ export default {
 	title: "Components/Breadcrumb",
 	decorators: [
 		moduleMetadata({
-			imports: [BreadcrumbModule]
+			imports: [
+				Breadcrumb,
+				BreadcrumbItemComponent
+			],
+			providers: [I18N_SERVICE_PROVIDER]
 		})
 	],
 	args: {
@@ -41,8 +45,7 @@ export default {
 			control: false
 		}
 	},
-	component: Breadcrumb,
-	subcomponents: { BreadcrumbItemComponent }
+	component: Breadcrumb
 } as Meta;
 
 const Template = (args) => ({
@@ -149,4 +152,3 @@ Skeleton.parameters = {
 		disable: true
 	}
 };
-