feat(angular): enable standalone first draft (#1170)

* feat(angular): enable standalone first draft

* chore: update package.json

* feat(angular): add standalone solution

* chore: add changeset

* chore: adjust bundle

* chore: improve package.json to reduce side effects

* chore: update package.lock

* chore: add missing build for standalone

* chore: add missing build for standalone

* chore: add bal-doc-app to e2e tests

.changeset/six-pumpkins-draw.md

@@ -0,0 +1,49 @@
+---
+'@baloise/design-system-components-angular': minor
+---
+
+All components are now available as standalone elements for Angular v17.
+
+Use the `provideBaloiseDesignSystem` provider within the app.config.ts file, where Angular providers are typically defined.
+
+**app.config.ts**
+
+```ts
+import { ApplicationConfig, importProvidersFrom } from '@angular/core'
+
+import { provideBaloiseDesignSystem } from '@baloise/design-system-components-angular/standalone'
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideBaloiseDesignSystem()],
+}
+```
+
+In each app component, import the necessary Baloise Design System components or a bundled set.
+
+**app.component.ts**
+
+```ts
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { BalApp, BalButton } from '@baloise/design-system-components-angular/standalone'
+
+export interface UpdateControl {
+  name: string
+  value: any
+}
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [CommonModule, BalApp, BalButton],
+  template: `
+    <bal-app>
+      <main class="container py-normal">
+        <bal-button>My Button</bal-button>
+      </main>
+    </bal-app>
+  `,
+})
+export class AppComponent {}
+```

.github/workflows/actions/build/action.yml

@@ -53,6 +53,12 @@ runs:
         output: packages/components-angular/src/ComponentsAngular.zip
         paths: packages/components-angular/src/generated
 
+    - uses: ./.github/workflows/actions/upload-archive
+      with:
+        name: components-angular-standalone
+        output: packages/components-angular/standalone/src/ComponentsAngularStandalone.zip
+        paths: packages/components-angular/standalone/src/generated
+
     - uses: ./.github/workflows/actions/upload-archive
       with:
         name: components-angular-legacy

.github/workflows/actions/test-angular-setup/action.yml

@@ -56,6 +56,12 @@ runs:
         path: ./packages/components-angular/src
         filename: ComponentsAngular.zip
 
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: components-angular-standalone
+        path: ./packages/components-angular/standalone/src
+        filename: ComponentsAngularStandalone.zip
+
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: components-angular-legacy

.github/workflows/continuous.yml

@@ -128,7 +128,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [v16,v17]
+        apps: [v16,v17,v17-standalone]
     needs: [build]
     steps:
       - uses: actions/checkout@v3

.gitignore

@@ -156,12 +156,20 @@ docs/stories/assets/data
 
 apps/angular/v16/
 apps/angular/v17/
+apps/angular/v17-standalone/
 
 packages/components-angular/common/directives
 packages/components-angular/common/providers
 packages/components-angular/common/utils
 packages/components-angular/common/index.d.ts
 
+packages/components-angular/standalone/components
+packages/components-angular/standalone/directives
+packages/components-angular/standalone/app-initialize.d.ts
+packages/components-angular/standalone/bundles.d.ts
+packages/components-angular/standalone/index.d.ts
+packages/components-angular/standalone/provide.d.ts
+
 packages/components-angular/legacy/directives
 packages/components-angular/legacy/providers
 packages/components-angular/legacy/app-initialize.d.ts

apps/angular/base/app/src/app/app.config.ts

@@ -1,7 +1,6 @@
-import { ApplicationConfig, importProvidersFrom } from '@angular/core'
-
-import { BaloiseDesignSystemModule } from '../design-system'
+import type { ApplicationConfig } from '@angular/platform-browser'
+import { balProviders } from '../design-system'
 
 export const appConfig: ApplicationConfig = {
-  providers: [importProvidersFrom(BaloiseDesignSystemModule.forRoot())],
+  providers: [...balProviders],
 }

apps/angular/base/app/src/design-system.ts

@@ -1,5 +1,9 @@
+import { importProvidersFrom } from '@angular/core'
+
 import { BaloiseDesignSystemModule } from '@baloise/design-system-components-angular'
 
 export { BaloiseDesignSystemModule, BalModalService } from '@baloise/design-system-components-angular'
 
 export const balImports = [BaloiseDesignSystemModule]
+
+export const balProviders = [importProvidersFrom(BaloiseDesignSystemModule.forRoot())]

apps/angular/base/v16/src/design-system.ts

@@ -1,5 +1,9 @@
+import { importProvidersFrom } from '@angular/core'
+
 import { BaloiseDesignSystemModule } from '@baloise/design-system-components-angular/legacy'
 
 export { BaloiseDesignSystemModule, BalModalService } from '@baloise/design-system-components-angular/legacy'
 
 export const balImports = [BaloiseDesignSystemModule]
+
+export const balProviders = [importProvidersFrom(BaloiseDesignSystemModule.forRoot())]