feat(Angular): add standalone components to the @beeq/angular output target

packages/beeq-angular/README.md

@@ -118,15 +118,11 @@ To enable two-way binding and the use of [ngModel] within BEEQ form components,
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
-import { BeeQModule, BooleanValueAccessor, TextValueAccessor } from '@beeq/angular';
 
 import { AppComponent } from './app.component';
 
-/** 💡 More Value Accessors will be exported later and should be included as well */
-const VALUE_ACCESSORS = [BooleanValueAccessor, TextValueAccessor];
-
 @NgModule({
-  declarations: [AppComponent, ...VALUE_ACCESSORS],
+  declarations: [AppComponent],
   imports: [BeeQModule.forRoot(), BrowserModule, FormsModule],
   providers: [],
   bootstrap: [AppComponent],
@@ -135,6 +131,22 @@ const VALUE_ACCESSORS = [BooleanValueAccessor, TextValueAccessor];
 export class AppModule {}
 ```
 
+> 🙋🏼‍♂️ If you are using `@beeq/angular` v1.0.1 or below, **you also need to import the values accessors**, as shown below:
+
+```ts
+...
+import { BeeQModule, BooleanValueAccessor, TextValueAccessor } from '@beeq/angular';
+...
+const VALUE_ACCESSORS = [BooleanValueAccessor, TextValueAccessor];
+
+@NgModule({
+  declarations: [AppComponent, ...VALUE_ACCESSORS],
+  imports: [BeeQModule.forRoot(), BrowserModule, FormsModule],
+  ...
+})
+export class AppModule {}
+```
+
 ### Usage
 
 ```html
@@ -176,3 +188,36 @@ export class AppComponent {
   }
 }
 ```
+
+### Using BEEQ components in Angular standalone
+
+You can also use BEEQ components in Angular standalone. To do so, you will need to import the components from `@beeq/angular/standalone` and use them as you would use any other Angular component.
+
+```ts
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BqButton, BqCard, BqInput } from '@beeq/angular/standalone';
+
+@Component({
+  selector: 'app-component',
+  standalone: true,
+  imports: [BqButton, BqCard, BqInput],
+  template: `
+    <bq-card>
+      <bq-input name="email" [value]="emailValue" (bqChange)="onInputChange($event)">
+        <label slot="label">Your email</label>
+      </bq-input>
+      <bq-button>Subscribe me!</bq-button>
+    </bq-card>
+  `,
+  styles: [],
+  schemas: [],
+})
+export class AppComponent2 {
+  emailValue = 'BEEQ Design System';
+
+  onInputChange(event: CustomEvent<{ value: string }>) {
+    console.log('emailValue', event.detail.value);
+  }
+}
+```

packages/beeq-angular/package.json

@@ -7,7 +7,7 @@
   "module": "dist/esm2015/index.js",
   "types": "index.d.ts",
   "dependencies": {
-    "@beeq/core": "*",
+    "@beeq/core": "^1.0.1",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {

packages/beeq-angular/project.json

@@ -11,14 +11,14 @@
       "executor": "@nx/angular:package",
       "outputs": ["{workspaceRoot}/dist/beeq-angular"],
       "options": {
-        "project": "packages/beeq-angular/ng-package.json"
+        "project": "{projectRoot}/ng-package.json"
       },
       "configurations": {
         "production": {
-          "tsConfig": "packages/beeq-angular/tsconfig.lib.prod.json"
+          "tsConfig": "{projectRoot}/tsconfig.lib.prod.json"
         },
         "development": {
-          "tsConfig": "packages/beeq-angular/tsconfig.lib.json"
+          "tsConfig": "{projectRoot}/tsconfig.lib.json"
         }
       },
       "defaultConfiguration": "production"

packages/beeq-angular/src/beeq.module.ts

@@ -1,19 +1,41 @@
-import { CommonModule } from '@angular/common';
-import { ModuleWithProviders, NgModule } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { APP_INITIALIZER, ModuleWithProviders, NgModule, NgZone } from '@angular/core';
 import { defineCustomElements } from '@beeq/core/dist/loader';
 
 import { DIRECTIVES } from './directives';
+import { BooleanValueAccessor } from './directives/boolean-value-accessor';
+import { NumericValueAccessor } from './directives/number-value-accessor';
+import { RadioValueAccessor } from './directives/radio-value-accessor';
+import { SelectValueAccessor } from './directives/select-value-accessor';
+import { TextValueAccessor } from './directives/text-value-accessor';
+
+const DECLARATIONS = [
+  ...DIRECTIVES,
+  // ngModel Accessors
+  BooleanValueAccessor,
+  NumericValueAccessor,
+  RadioValueAccessor,
+  SelectValueAccessor,
+  TextValueAccessor,
+];
 
 @NgModule({
   imports: [CommonModule],
-  declarations: [...DIRECTIVES],
-  exports: [...DIRECTIVES],
+  declarations: DECLARATIONS,
+  exports: DECLARATIONS,
 })
 export class BeeQModule {
   static forRoot(): ModuleWithProviders<BeeQModule> {
-    defineCustomElements();
     return {
       ngModule: BeeQModule,
+      providers: [
+        {
+          provide: APP_INITIALIZER,
+          useFactory: () => defineCustomElements,
+          multi: true,
+          deps: [DOCUMENT, NgZone],
+        },
+      ],
     };
   }
 }

packages/beeq-angular/src/index.ts

@@ -2,6 +2,9 @@
 /*                                 DIRECTIVES                                 */
 /* -------------------------------------------------------------------------- */
 export { BooleanValueAccessor } from './directives/boolean-value-accessor';
+export { NumericValueAccessor } from './directives/number-value-accessor';
+export { RadioValueAccessor } from './directives/radio-value-accessor';
+export { SelectValueAccessor } from './directives/select-value-accessor';
 export { TextValueAccessor } from './directives/text-value-accessor';
 
 export * from './directives/components';

packages/beeq-angular/standalone/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

packages/beeq-angular/standalone/src/index.ts

@@ -0,0 +1,5 @@
+/* -------------------------------------------------------------------------- */
+/*                                 DIRECTIVES                                 */
+/* -------------------------------------------------------------------------- */
+// @ts-ignore
+export * from './directives/components';

packages/beeq-angular/tsconfig.lib.json

@@ -8,5 +8,5 @@
     "types": []
   },
   "exclude": ["src/test-setup.ts", "**/*.spec.ts", "jest.config.ts", "**/*.test.ts"],
-  "include": ["**/*.ts"]
+  "include": ["src/index.ts", "standalone/src/index.ts"]
 }

packages/beeq-angular/tsconfig.lib.prod.json

@@ -1,7 +1,8 @@
 {
   "extends": "./tsconfig.lib.json",
   "compilerOptions": {
-    "declarationMap": false
+    "declarationMap": false,
+    "removeComments": false
   },
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,

packages/beeq-react/package.json

@@ -7,7 +7,7 @@
   "module": "./src/index.js",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@beeq/core": "*"
+    "@beeq/core": "^1.0.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

packages/beeq-react/tsconfig.json

@@ -5,7 +5,8 @@
     "allowJs": false,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
-    "declaration": true
+    "declaration": true,
+    "removeComments": false
   },
   "files": [],
   "include": [],

packages/beeq-vue/package.json

@@ -7,7 +7,7 @@
   "module": "./src/index.js",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@beeq/core": "*",
+    "@beeq/core": "^1.0.1",
     "tslib": "^2.3.0"
   },
   "peerDependencies": {

packages/beeq-vue/tsconfig.lib.json

@@ -2,6 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
+    "removeComments": false,
     "types": ["node"]
   },
   "include": ["src/**/*.ts"],

packages/beeq/project.json

@@ -76,6 +76,7 @@
         "{options.outputPath}",
         "{projectRoot}/custom-elements.json",
         "{workspaceRoot}/packages/beeq-angular/src/directives",
+        "{workspaceRoot}/packages/beeq-angular/standalone/src/directives",
         "{workspaceRoot}/packages/beeq-react/src/react-component-lib",
         "{workspaceRoot}/packages/beeq-vue/src/components.ts"
       ],

packages/beeq/src/components/input/bq-input.tsx

@@ -246,7 +246,7 @@ export class BqInput {
     this.debounceBqInput?.cancel();
 
     if (!isHTMLElement(ev.target, 'input')) return;
-    this.value = ev.target.value;
+    this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;
 
     this.debounceBqInput = debounce(() => {
       this.bqInput.emit({ value: this.value, el: this.el });
@@ -258,7 +258,7 @@ export class BqInput {
     if (this.disabled) return;
 
     if (!isHTMLElement(ev.target, 'input')) return;
-    this.value = ev.target.value;
+    this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;
 
     this.bqChange.emit({ value: this.value, el: this.el });
   };

packages/beeq/src/tools/angular-value-accessor-config.ts

@@ -1,14 +1,41 @@
 import { ValueAccessorConfig } from '@stencil/angular-output-target';
 
+/**
+ * This lets you define which components should be integrated with ngModel (i.e. form components).
+ * It lets you set what the target prop is (i.e. value), which event will cause the target prop to change.
+ */
 export const angularValueAccessorBindings: ValueAccessorConfig[] = [
   {
+    // Boolean
     elementSelectors: ['bq-checkbox', 'bq-switch'],
     event: 'bqChange',
     targetAttr: 'checked',
     type: 'boolean',
   },
   {
-    elementSelectors: ['bq-input', 'bq-radio-group', 'bq-select', 'bq-slider', 'bq-textarea'],
+    // Number
+    elementSelectors: ['bq-input[type="number"]', 'bq-slider'],
+    event: 'bqChange',
+    targetAttr: 'value',
+    type: 'number',
+  },
+  {
+    // Radio
+    elementSelectors: ['bq-radio-group'],
+    event: 'bqChange',
+    targetAttr: 'value',
+    type: 'radio',
+  },
+  {
+    // Select
+    elementSelectors: ['bq-select'],
+    event: 'bqChange',
+    targetAttr: 'value',
+    type: 'select',
+  },
+  {
+    // Text
+    elementSelectors: ['bq-input:not[type="number"]', 'bq-textarea'],
     event: 'bqChange',
     targetAttr: 'value',
     type: 'text',