feat(Angular): add standalone components to the @beeq/angular outpu…

…t target (#870) We have added more flexibility over the `dist-custom-elements` target, allowing using it on each framework-specific configuration target. The Angular output target has been improved, the value accessors are now part of the BEEQ Angular module, and no need to import them on the Angular project side. Instead of this: ```ts import { BeeQModule, BooleanValueAccessor, TextValueAccessor, } from '@beeq/angular'; /** 💡 More Value Accessors will be exported later and should be included as well */ const VALUE_ACCESSORS = [BooleanValueAccessor, TextValueAccessor]; @NgModule({ declarations: [AppComponent, ...VALUE_ACCESSORS], imports: [BeeQModule.forRoot(), BrowserModule, FormsModule, ReactiveFormsModule], .... }) ``` we will have only to do this: ```ts @NgModule({ declarations: [AppComponent], imports: [BeeQModule.forRoot(), BrowserModule, FormsModule, ReactiveFormsModule], .... }) ``` Also, we added new value accessors: number, radio, and select, for components like `bq-input[type="number"]`, `bq-radio-group`, and `bq-select`.
Endava · Feb 24, 2024 · 055209f · 055209f
1 parent 5a297a9
commit 055209f
Show file tree

Hide file tree

Showing 19 changed files with 166 additions and 35 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/beeq-angular/README.md b/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);
+  }
+}
+```
diff --git a/packages/beeq-angular/package.json b/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": {

diff --git a/packages/beeq-angular/project.json b/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"

diff --git a/packages/beeq-angular/src/beeq.module.ts b/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],
+        },
+      ],
     };
   }
 }
diff --git a/packages/beeq-angular/src/index.ts b/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';

diff --git a/packages/beeq-angular/standalone/ng-package.json b/packages/beeq-angular/standalone/ng-package.json
@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}
diff --git a/packages/beeq-angular/standalone/src/index.ts b/packages/beeq-angular/standalone/src/index.ts
@@ -0,0 +1,5 @@
+/* -------------------------------------------------------------------------- */
+/*                                 DIRECTIVES                                 */
+/* -------------------------------------------------------------------------- */
+// @ts-ignore
+export * from './directives/components';
diff --git a/packages/beeq-angular/tsconfig.lib.json b/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"]
 }
diff --git a/packages/beeq-angular/tsconfig.lib.prod.json b/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,

diff --git a/packages/beeq-react/package.json b/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",

diff --git a/packages/beeq-react/tsconfig.json b/packages/beeq-react/tsconfig.json
@@ -5,7 +5,8 @@
     "allowJs": false,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
-    "declaration": true
+    "declaration": true,
+    "removeComments": false
   },
   "files": [],
   "include": [],

diff --git a/packages/beeq-vue/package.json b/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": {

diff --git a/packages/beeq-vue/tsconfig.lib.json b/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"],

diff --git a/packages/beeq/project.json b/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"
       ],

diff --git a/packages/beeq/src/components/input/bq-input.tsx b/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 });
   };

diff --git a/packages/beeq/src/tools/angular-value-accessor-config.ts b/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',