feat(transactions): added wrapper for grid for elements

projects/igniteui-angular-elements/src/app/create-custom-element.ts

@@ -4,6 +4,7 @@ import { FilteringExpressionsTree, FilteringLogic, IgxBooleanFilteringOperand, I
 import { ComponentConfig } from './component-config';
 import { IgxCustomNgElementStrategyFactory } from './custom-strategy';
 import type { IgniteComponent } from '../utils/register';
+import { TransactionsWrapper } from './transactionsWrapper/transactions-wrapper';
 
 export type IgxNgElementConfig = Omit<NgElementConfig, 'strategyFactory'> & { registerConfig: ComponentConfig[] };
 type IgxElementConstructor<T> = NgElementConstructor<T> & { tagName: string};
@@ -71,6 +72,24 @@ export function createIgxCustomElement<T>(component: Type<T>, config: IgxNgEleme
             };
         }
         elementCtor.prototype.getFilterFactory = getFilterFactory;
+
+        /**
+         * transactions methods for flat grid due to missing Transactions service in custom elements
+         */
+
+        Object.defineProperty(elementCtor.prototype, 'transactions', {
+            get() {
+                if(!this._transactionsWrapper){
+                    this._transactionsWrapper = new TransactionsWrapper(
+                        () => this.ngElementStrategy.componentRef?.instance,
+                        (func: () => any) => this.ngElementStrategy.runInZone(func)
+                    );
+                }
+                return this._transactionsWrapper;
+            },
+            configurable: true,
+            enumerable: true,
+        });
     }
 
     // assign static `tagName` for register/define:

projects/igniteui-angular-elements/src/app/transactionsWrapper/transactions-wrapper.ts

@@ -0,0 +1,81 @@
+import { Transaction, State, TransactionType, StateUpdateEvent, TransactionEventOrigin } from 'igniteui-angular/core';
+import { EventEmitter } from '@angular/core';
+export { Transaction, State, TransactionType, TransactionEventOrigin, StateUpdateEvent };
+
+export class TransactionsWrapper {
+
+    constructor(
+        private getInstance: () => any,
+        private runInZone: (func: () => any) => any
+    ){}
+
+    private get service() {
+        return this.getInstance()?.transactions;
+    }
+
+    // properties
+
+    public get canUndo(): boolean {
+        return this.service?.canUndo ?? false;
+    }
+
+    public get canRedo(): boolean {
+        return this.service?.canRedo ?? false;
+    }
+
+    public get enabled(): boolean {
+        return this.service?.enabled ?? false;
+    }
+
+    // methods
+
+    public undo(): void{
+        this.runInZone(() => this.service?.undo());
+    }
+
+    public redo(): void{
+        this.runInZone(() => this.service?.redo());
+    }
+
+    public commit(data?: any[], id?: any): void{
+        const instance = this.getInstance();
+        this.runInZone(() => this.service?.commit(data ? data : instance?.data, id));
+    }
+
+    public clear(id?: any): void{
+        this.runInZone(() => this.service?.clear(id));
+    }
+
+    public add(transaction: Transaction, recordRef?: any): void{
+        this.runInZone(() => this.service?.add(transaction, recordRef));
+    }
+
+    public getTransactionLog(id?: any): Transaction[] {
+        return this.service?.getTransactionLog(id) ?? [];
+    }
+
+    public getAggregatedChanges(mergeChanges: boolean): Transaction[] {
+        return this.service?.getAggregatedChanges(mergeChanges) ?? [];
+    }
+
+    public getState(id: any, pending?: boolean): State | null {
+        return this.service?.getState(id, pending) ?? null;
+    }
+
+    public getAggregatedValue(id: any, mergeChanges: boolean): any {
+        return this.service?.getAggregatedValue(id, mergeChanges);
+    }
+
+    public startPending(): void {
+        this.runInZone(() => this.service?.startPending());
+    }
+
+    public endPending(commit: boolean): void {
+        this.runInZone(() => this.service?.endPending(commit));
+    }
+
+    public get onStateUpdate(): EventEmitter<StateUpdateEvent> | undefined {
+        return this.service?.onStateUpdate;
+    }
+
+}

projects/igniteui-angular-elements/src/public_api.ts

@@ -1,5 +1,5 @@
 import { registerI18n, setCurrentI18n } from 'igniteui-i18n-core';
-import { ByLevelTreeGridMergeStrategy, ColumnPinningPosition, DefaultMergeStrategy, DefaultTreeGridMergeStrategy, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, HorizontalAlignment, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, IgxFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand, IgxTimeFilteringOperand, NoopFilteringStrategy, NoopSortingStrategy, SortingDirection, VerticalAlignment } from 'igniteui-angular/core';
+import { ByLevelTreeGridMergeStrategy, ColumnPinningPosition, DefaultMergeStrategy, DefaultTreeGridMergeStrategy, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, HorizontalAlignment, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, IgxFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand, IgxTimeFilteringOperand, NoopFilteringStrategy, NoopSortingStrategy, SortingDirection, TransactionType, TransactionEventOrigin, VerticalAlignment } from 'igniteui-angular/core';
 import { DropPosition, GridPagingMode, IgxDateSummaryOperand, IgxNumberSummaryOperand, IgxPivotAggregate, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotNumericAggregate, IgxPivotTimeAggregate, IgxSummaryOperand, IgxTimeSummaryOperand, NoopPivotDimensionsStrategy, PivotDimensionType, RowPinningPosition } from 'igniteui-angular/grids/core';
 
 /** Export Public API, TODO: reorganize, Generate all w/ renames? */
@@ -49,4 +49,8 @@ export {
     // i18n
     registerI18n,
     setCurrentI18n,
+
+    // Transactions API
+    TransactionType,
+    TransactionEventOrigin
 }