Implement ngx-fm-group tag

projects/flexmonster/angular/src/filter.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, inject, Input, OnDestroy } from '@angular/core';
 import {
   Filter,
   type IFMFilter,
@@ -9,6 +9,7 @@ import {
   type ConditionalFilterControlInputParams,
   type ConditionalFilterControlOutputParams,
 } from '@flexmonster/js';
+import { FM_STATE_CONTEXT } from './state-context';
 
 @Component({
   selector: 'ngx-fm-filter',
@@ -22,14 +23,16 @@ export class FMFilter implements AfterViewInit, OnDestroy, IFMFilter {
 
   protected root: HTMLElement;
   private _filter!: IFMFilter;
+  private stateContext = inject(FM_STATE_CONTEXT, { optional: true });
 
   constructor(el: ElementRef) {
     this.root = el.nativeElement;
   }
 
   ngAfterViewInit() {
     const container = this.root.getElementsByClassName('fm-ng-wrapper')[0] as HTMLElement;
-    this._filter = Filter(container, { state: this.state, options: this.options, fieldName: this.fieldName! });
+    const state = this.state ?? this.stateContext?.state;
+    this._filter = Filter(container, { state, options: this.options, fieldName: this.fieldName! });
   }
 
   ngOnDestroy() {
@@ -38,12 +41,10 @@ export class FMFilter implements AfterViewInit, OnDestroy, IFMFilter {
     }
   }
 
-  // Readonly properties
   get id(): string { return this._filter.id; }
   get parentId(): string { return this._filter.parentId; }
   get stateId(): string { return this._filter.stateId; }
 
-  // Methods
   getOptions(): any { return this._filter.getOptions(); }
   dispose(): void { this._filter.dispose(); }
   getMemberFilter(): Promise<MemberFilterControlOutputParams> { return this._filter.getMemberFilter(); }

projects/flexmonster/angular/src/flat-field-list.component.ts

@@ -1,10 +1,11 @@
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, inject, Input, OnDestroy } from '@angular/core';
 import {
   FlatFieldList,
   type IFMFlatFieldList,
   type IFMFlatFieldListOptionsInputParams,
   type StateInputParams,
 } from '@flexmonster/js';
+import { FM_STATE_CONTEXT } from './state-context';
 
 @Component({
   selector: 'ngx-fm-flat-field-list',
@@ -17,14 +18,16 @@ export class FMFlatFieldList implements AfterViewInit, OnDestroy, IFMFlatFieldLi
 
   protected root: HTMLElement;
   private _flatFieldList!: IFMFlatFieldList;
+  private stateContext = inject(FM_STATE_CONTEXT, { optional: true });
 
   constructor(el: ElementRef) {
     this.root = el.nativeElement;
   }
 
   ngAfterViewInit() {
     const container = this.root.getElementsByClassName('fm-ng-wrapper')[0] as HTMLElement;
-    this._flatFieldList = FlatFieldList(container, { state: this.state, options: this.options });
+    const state = this.state ?? this.stateContext?.state;
+    this._flatFieldList = FlatFieldList(container, { state, options: this.options });
   }
 
   ngOnDestroy() {
@@ -33,12 +36,10 @@ export class FMFlatFieldList implements AfterViewInit, OnDestroy, IFMFlatFieldLi
     }
   }
 
-  // Readonly properties
   get id(): string { return this._flatFieldList.id; }
   get parentId(): string { return this._flatFieldList.parentId; }
   get stateId(): string { return this._flatFieldList.stateId; }
 
-  // Methods
   getOptions(): any { return this._flatFieldList.getOptions(); }
   dispose(): void { this._flatFieldList.dispose(); }
 }

projects/flexmonster/angular/src/flat-table.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, inject, Input, OnDestroy } from '@angular/core';
 import {
   FlatTable,
   type IFMFlatTable,
@@ -14,6 +14,7 @@ import {
   type ReportInputParams,
   type ReportOutputParams,
 } from '@flexmonster/js';
+import { FM_STATE_CONTEXT } from './state-context';
 
 @Component({
   selector: 'ngx-fm-flat-table',
@@ -27,14 +28,16 @@ export class FMFlatTable implements AfterViewInit, OnDestroy, IFMFlatTable {
 
   protected root: HTMLElement;
   private _flatTable!: IFMFlatTable;
+  private stateContext = inject(FM_STATE_CONTEXT, { optional: true });
 
   constructor(el: ElementRef) {
     this.root = el.nativeElement;
   }
 
   ngAfterViewInit() {
     const container = this.root.getElementsByClassName('fm-ng-wrapper')[0] as HTMLElement;
-    this._flatTable = FlatTable(container, { state: this.state, options: this.options, name: this.name });
+    const state = this.state ?? this.stateContext?.state;
+    this._flatTable = FlatTable(container, { state: state, options: this.options, name: this.name });
   }
 
   ngOnDestroy() {
@@ -43,12 +46,10 @@ export class FMFlatTable implements AfterViewInit, OnDestroy, IFMFlatTable {
     }
   }
 
-  // Readonly properties
   get id(): string { return this._flatTable.id; }
   get parentId(): string { return this._flatTable.parentId; }
   get stateId(): string { return this._flatTable.stateId; }
 
-  // Methods
   getOptions(): any { return this._flatTable.getOptions(); }
   dispose(): void { this._flatTable.dispose(); }
   hasFilter(fieldName?: string): Promise<boolean> { return this._flatTable.hasFilter(fieldName); }

projects/flexmonster/angular/src/flexmonster.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, inject, Input, OnDestroy } from '@angular/core';
 import {
   Flexmonster,
   type IFMFlexmonster,
@@ -19,6 +19,7 @@ import {
   type FlatSortInputParams,
   type FlatSortOutputParams,
 } from '@flexmonster/js';
+import { FM_STATE_CONTEXT } from './state-context';
 
 @Component({
   selector: 'ngx-fm-flexmonster',
@@ -31,14 +32,16 @@ export class FMFlexmonster implements AfterViewInit, OnDestroy, IFMFlexmonster {
 
   protected root: HTMLElement;
   private _flexmonster!: IFMFlexmonster;
+  private stateContext = inject(FM_STATE_CONTEXT, { optional: true });
 
   constructor(el: ElementRef) {
     this.root = el.nativeElement;
   }
 
   ngAfterViewInit() {
     const container = this.root.getElementsByClassName('fm-ng-wrapper')[0] as HTMLElement;
-    this._flexmonster = Flexmonster(container, { state: this.state, options: this.options });
+    const state = this.state ?? this.stateContext?.state;
+    this._flexmonster = Flexmonster(container, { state, options: this.options });
   }
 
   ngOnDestroy() {
@@ -47,12 +50,10 @@ export class FMFlexmonster implements AfterViewInit, OnDestroy, IFMFlexmonster {
     }
   }
 
-  // Readonly properties
   get id(): string { return this._flexmonster.id; }
   get parentId(): string { return this._flexmonster.parentId; }
   get stateId(): string { return this._flexmonster.stateId; }
 
-  // Methods
   hasFilter(fieldName?: string): Promise<boolean> { return this._flexmonster.hasFilter(fieldName); }
   getFilters(fieldName?: string): Promise<FilterOutputParams[]> { return this._flexmonster.getFilters(fieldName); }
   setFilters(filter: FilterInputParams[]): Promise<void> { return this._flexmonster.setFilters(filter); }

projects/flexmonster/angular/src/flexmonster.module.ts

@@ -6,6 +6,7 @@ import { FMPivotTable } from './pivot-table.component';
 import { FMPivotFieldList } from './pivot-field-list.component';
 import { FMToolbar } from './toolbar.component';
 import { FMFilter } from './filter.component';
+import { FMGroup } from './group.component';
 
 @NgModule({
     imports: [
@@ -16,6 +17,7 @@ import { FMFilter } from './filter.component';
         FMPivotFieldList,
         FMToolbar,
         FMFilter,
+        FMGroup,
     ],
     exports: [
         FMFlexmonster,
@@ -25,6 +27,7 @@ import { FMFilter } from './filter.component';
         FMPivotFieldList,
         FMToolbar,
         FMFilter,
+        FMGroup,
     ]
 })
 export class FMModule{ }

projects/flexmonster/angular/src/group.component.ts

@@ -0,0 +1,13 @@
+import { Component, forwardRef, Input } from '@angular/core';
+import type { StateInputParams } from '@flexmonster/js';
+import { FM_STATE_CONTEXT, type FMStateContext } from './state-context';
+
+@Component({
+  selector: 'ngx-fm-group',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  providers: [{ provide: FM_STATE_CONTEXT, useExisting: forwardRef(() => FMGroup) }],
+})
+export class FMGroup implements FMStateContext {
+  @Input() state: StateInputParams | undefined;
+}

projects/flexmonster/angular/src/pivot-field-list.component.ts

@@ -1,10 +1,11 @@
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, inject, Input, OnDestroy } from '@angular/core';
 import {
   PivotFieldList,
   type IFMPivotFieldList,
   type IFMPivotFieldListOptionsInputParams,
   type StateInputParams,
 } from '@flexmonster/js';
+import { FM_STATE_CONTEXT } from './state-context';
 
 @Component({
   selector: 'ngx-fm-pivot-field-list',
@@ -17,14 +18,16 @@ export class FMPivotFieldList implements AfterViewInit, OnDestroy, IFMPivotField
 
   protected root: HTMLElement;
   private _pivotFieldList!: IFMPivotFieldList;
+  private stateContext = inject(FM_STATE_CONTEXT, { optional: true });
 
   constructor(el: ElementRef) {
     this.root = el.nativeElement;
   }
 
   ngAfterViewInit() {
     const container = this.root.getElementsByClassName('fm-ng-wrapper')[0] as HTMLElement;
-    this._pivotFieldList = PivotFieldList(container, { state: this.state, options: this.options });
+    const state = this.state ?? this.stateContext?.state;
+    this._pivotFieldList = PivotFieldList(container, { state, options: this.options });
   }
 
   ngOnDestroy() {
@@ -33,12 +36,10 @@ export class FMPivotFieldList implements AfterViewInit, OnDestroy, IFMPivotField
     }
   }
 
-  // Readonly properties
   get id(): string { return this._pivotFieldList.id; }
   get parentId(): string { return this._pivotFieldList.parentId; }
   get stateId(): string { return this._pivotFieldList.stateId; }
 
-  // Methods
   getOptions(): any { return this._pivotFieldList.getOptions(); }
   dispose(): void { this._pivotFieldList.dispose(); }
 }

projects/flexmonster/angular/src/pivot-table.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, inject, Input, OnDestroy } from '@angular/core';
 import {
   PivotTable,
   type IFMPivotTable,
@@ -16,6 +16,7 @@ import {
   type ReportInputParams,
   type ReportOutputParams,
 } from '@flexmonster/js';
+import { FM_STATE_CONTEXT } from './state-context';
 
 @Component({
   selector: 'ngx-fm-pivot-table',
@@ -29,14 +30,16 @@ export class FMPivotTable implements AfterViewInit, OnDestroy, IFMPivotTable {
 
   protected root: HTMLElement;
   private _pivotTable!: IFMPivotTable;
+  private stateContext = inject(FM_STATE_CONTEXT, { optional: true });
 
   constructor(el: ElementRef) {
     this.root = el.nativeElement;
   }
 
   ngAfterViewInit() {
     const container = this.root.getElementsByClassName('fm-ng-wrapper')[0] as HTMLElement;
-    this._pivotTable = PivotTable(container, { state: this.state, options: this.options, name: this.name });
+    const state = this.state ?? this.stateContext?.state;
+    this._pivotTable = PivotTable(container, { state: state, options: this.options, name: this.name });
   }
 
   ngOnDestroy() {
@@ -45,12 +48,10 @@ export class FMPivotTable implements AfterViewInit, OnDestroy, IFMPivotTable {
     }
   }
 
-  // Readonly properties
   get id(): string { return this._pivotTable.id; }
   get parentId(): string { return this._pivotTable.parentId; }
   get stateId(): string { return this._pivotTable.stateId; }
 
-  // Methods
   getOptions(): any { return this._pivotTable.getOptions(); }
   dispose(): void { this._pivotTable.dispose(); }
   hasFilter(fieldName?: string): Promise<boolean> { return this._pivotTable.hasFilter(fieldName); }

projects/flexmonster/angular/src/public-api.ts

@@ -1,14 +1,10 @@
-/*
- * Public API Surface of @flexmonster/angular
- */
-
-// CSR components (sync import, ngAfterViewInit)
 export * from './flexmonster.component';
 export * from './flat-table.component';
 export * from './flat-field-list.component';
 export * from './pivot-table.component';
 export * from './pivot-field-list.component';
 export * from './toolbar.component';
 export * from './filter.component';
+export * from './group.component';
 
-export * from './flexmonster.module';
+export * from './flexmonster.module';

projects/flexmonster/angular/src/state-context.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+import type { StateInputParams } from '@flexmonster/js';
+
+export interface FMStateContext {
+  readonly state: StateInputParams | undefined;
+}
+
+export const FM_STATE_CONTEXT = new InjectionToken<FMStateContext>('FM_STATE_CONTEXT');

projects/flexmonster/angular/src/toolbar.component.ts

@@ -1,10 +1,11 @@
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, inject, Input, OnDestroy } from '@angular/core';
 import {
   Toolbar,
   type IFMToolbar,
   type IFMToolbarOptionsInputParams,
   type StateInputParams,
 } from '@flexmonster/js';
+import { FM_STATE_CONTEXT } from './state-context';
 
 @Component({
   selector: 'ngx-fm-toolbar',
@@ -18,16 +19,18 @@ export class FMToolbar implements AfterViewInit, OnDestroy, IFMToolbar {
 
   protected root: HTMLElement;
   private _toolbar!: IFMToolbar;
+  private stateContext = inject(FM_STATE_CONTEXT, { optional: true });
 
   constructor(el: ElementRef) {
     this.root = el.nativeElement;
   }
 
   ngAfterViewInit() {
     const container = this.root.getElementsByClassName('fm-ng-wrapper')[0] as HTMLElement;
+    const state = this.state ?? this.stateContext?.state;
     // The standalone `for` input takes priority; fall back to `options.for` when it is empty.
     const options = this.for ? { ...this.options, for: this.for } : this.options;
-    this._toolbar = Toolbar(container, { state: this.state, options });
+    this._toolbar = Toolbar(container, { state: state, options });
   }
 
   ngOnDestroy() {
@@ -36,12 +39,10 @@ export class FMToolbar implements AfterViewInit, OnDestroy, IFMToolbar {
     }
   }
 
-  // Readonly properties
   get id(): string { return this._toolbar.id; }
   get parentId(): string { return this._toolbar.parentId; }
   get stateId(): string { return this._toolbar.stateId; }
 
-  // Methods
   getOptions(): any { return this._toolbar.getOptions(); }
   dispose(): void { this._toolbar.dispose(); }
   openFieldList(): void { this._toolbar.openFieldList(); }