Angular SDK

npm install -g @angular/cli@19

npm install -g @angular/cli@19
ng new my-flowx-app

npm install \
  @flowx/core-sdk@<version>\
  @flowx/core-theme@<version> \
  @flowx/angular-sdk@<version> \
  @flowx/angular-theme@<version> \
  @flowx/angular-ui-toolkit@<version> \
  @angular/cdk@19 \
  @types/event-source-polyfill

{
  "glob": "**/*",
  "input": "node_modules/ng2-pdfjs-viewer/pdfjs",
  "output": "/assets/pdfjs"
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { FlxProcessModule } from '@flowx/angular-sdk';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    // will be used by the renderer SDK to make requests
    HttpClientModule,
    // needed by the renderer SDK
    FlxProcessModule.withConfig({
      components: {},
      services: {},
    }),
  ],
  // this interceptor with decorate the requests with the Authorization header
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

// example with custom component, custom services and custom validator
FlxProcessModule.withConfig({
  components: {
    YourCustomComponentIdentifier: CustomComponent,
  },
  services: {
    NomenclatorService,
    LocalDataStoreService,
  },
  validators: { currentOrLastYear },
})

  // example of a custom validator that restricts data selection to
  // the current or the previous year

  currentOrLastYear: function currentOrLastYear(AC: AbstractControl): { [key: string]: any } {
    if (!AC) {
      return null;
    }

    const yearDate = moment(AC.value, YEAR_FORMAT, true);
    const currentDateYear = moment(new Date()).startOf('year');
    const lastYear = moment(new Date()).subtract(1, 'year').startOf('year');

    if (!yearDate.isSame(currentDateYear) && !yearDate.isSame(lastYear)) {
      return { currentOrLastYear: true };
    }

    return null;
  }

<flx-process-renderer
  [apiUrl]="baseApiUrl"
  [processApiPath]="processApiPath"
  [authToken]="authToken"
  [themeId]="themeId"
  [processName]="processName"
  [processStartData]="processStartData"
  [workspaceId]="workspaceId"
  [debugLogs]="debugLogs"
  [keepState]="keepState"
  [language]="language"
  [legacyHttpVersion]="legacyHttpVersion"
  [projectInfo]="projectInfo"
  [locale]="locale",
  [cache]="cache"
/>

@Component({
  selector: 'my-custom-component',
  templateUrl: './custom-component.component.html',
  styleUrls: ['./custom-component.component.scss'],
})
export class CustomComponentComponent  {
  data$ = input<Observable<any> | null>(null)
}

# data object example
data: {
    actionsFn: {
      action_one: () => void;
      action_two: () => void;
    }
  }

@Component({
  selector: 'flx-custom-validation',
  imports: [CommonModule, ReactiveFormsModule],
  template: `
    Custom validation:
    <input [formControl]="fc" />
    @if (formSubmitted() && fc.invalid) {
      <span>error</span>
    }
  `
})
export class FlxCustomValidationComponent implements OnInit {
  data$ = input<Observable<any> | null>(null) // can be used to get process data & actions

  validationService = inject(FLX_VALIDATOR_SERVICE) // service used to validate the custom component - ony use in components that need validation

  fc = new FormControl('', Validators.required) // the form control has a required validator.
  formSubmitted = signal(false)

  ngOnInit(): void {
    // update validity
    this.fc.statusChanges.subscribe((status) => {
      this.validationService.validate(status === 'VALID')
    })
    // save data
    this.fc.valueChanges.subscribe((value) => {
      this.validationService.saveData({ app: { test1: value, test2: `${value}${value}` } })
    })
    // monitor external submission
    this.validationService.validated$.subscribe(() => {
      this.formSubmitted.set(true)
    })
  }
}

// Import the necessary types
import { FLX_REQUEST_INTERCEPTORS_CONFIG } from '@flowx/angular-sdk'
import { HttpRequestInterceptor } from '@flowx/core-sdk'

// create the interceptor factory function

const customHeaderInterceptor: HttpRequestInterceptor[] = [
  {
    onFulfilled: (response) => {
      response.headers['custom-header'] = 'custom-value'
      return response
    },
  }
]

// Add the interceptor to the providers array in the main app module

{
  provide: FLX_REQUEST_INTERCEPTORS_CONFIG,
  useValue: customHeaderInterceptor,
}

import { FLX_RESPONSE_INTERCEPTORS_CONFIG } from '@flowx/angular-sdk'
import { HttpResponseInterceptor } from '@flowx/core-sdk'

const customHErrorInterceptor: HttpResponseInterceptor[] = [
  {
    onRejected: (response) => {
      if (response.status !== 200) {
        console.error('Something went wrong, we should handle this!', response.message)
      }
      return response
    }
  }
]

// Add the interceptor to the providers array in the main app module
{
  provide: FLX_RESPONSE_INTERCEPTORS_CONFIG,
  useValue: customHErrorInterceptor,
}

// the interceptor factory function that receives the custom service as an argument through dependency injection:
const interceptor: (custom: any) => HttpRequestInterceptor[] = (customService: CustomService) => [{
  onFulfilled: (response) => {
    // do something with the custom service
    // interceptor logic
    return response
  }
}]

// Add the interceptor to the providers array in the main app module
{
  provide: FLX_REQUEST_INTERCEPTORS_CONFIG,
  useFactory: (customService: CustomService) => [
    interceptorFactory(customService),
  ],
  deps: [CustomService], // provider factory dependencies
}

import { FlxIconModule } from '@flowx/angular-ui-toolkit'

// create a custom dictionary of icons
const customIconDictionary = {
  'custom-icon': 'custom icon svg'
}

// add the custom icon dictionary to the providers array in the main app module.
providers: [
  ...
  importProvidersFrom(FlxIconModule),
  provideExtraIconSet(customIconDictionary),
]

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-process',
  template: `
    <flx-process-renderer
      [apiUrl]="apiUrl"
      [authToken]="authToken"
      [processName]="processName"
      [processStartData]="processStartData"
      [workspaceId]="workspaceId"
      [processApiPath]="processApiPath"
      [themeId]="themeId"
      [projectInfo]="projectInfo"
      (processEnd)="onProcessEnd()"
    />
  `
})
export class ProcessComponent {
  constructor(private router: Router) {}

  onProcessEnd(): void {
    // Your custom logic here
    console.log('Process has ended');
    
    // Example: Redirect to home page
    this.router.navigate(['/dashboard']);
  }
}

import { FlxProcessModule } from '@flowx/angular-sdk';

// Define your custom loader components
@Component({
  selector: 'app-start-loader',
  template: `
    <div class="custom-start-loader">
      <div class="spinner"></div>
      <p>Starting process...</p>
    </div>
  `
})
export class StartProcessLoaderComponent {}

@Component({
  selector: 'app-action-loader', 
  template: `
    <div class="custom-action-loader">
      <div class="spinner"></div>
      <p>Processing your request...</p>
    </div>
  `
})
export class SaveDataLoaderComponent {}

// Register the custom loaders in your app module
@NgModule({
  imports: [
    FlxProcessModule.withConfig({
      customLoader: {
        startProcess: StartProcessLoaderComponent,
        saveData: SaveDataLoaderComponent,
      },
      components: {},
      services: {},
    }),
  ],
})
export class AppModule {}

import {getEnumeration} from '@flowx/angular-sdk'

// get an enumeration by name
const enumeration = await getEnumeration('enumerationName')

// get enumeration with a parent
const enumeration = await getEnumeration('enumerationName', 'parentName')

// get enumerations and cache the result for subsequent calls
const enumerations = await getEnumerations('enumerationName', null, true)

// import the pipe in the module where you want to use it
import { FlxLocalizePipe } from '@flowx/angular-sdk'

imports: [
  ...
  FlxLocalizePipe
]

<!-- use the pipe in the template of a custom component -->
<span>{{ 'hello' | flxLocalize }}</span>

const localize = new FlxLocalizePipe()
const translatedText = localize.transform('@@substitution_tag')

import {
   ANALYTICS_EVENTS,
   AnalyticsData,
   pushAnalyticsData,
} from '@flowx/core-sdk';

enum ANALYTICS_EVENTS {
  SCREEN = 'SCREEN',
  ACTION = 'ACTION',
}

type AnalyticsData = {
  type: ANALYTICS_EVENTS;
  value: string;
  screen?: string;
  component?: string;
  label?: string;
  customPayload?: object;
}

ngOnInit(): void {
  document.addEventListener('flowx:analytics', this.analyticsListener);
}

analyticsListener = (event: CustomEvent<AnalyticsData>) => {
  console.log('Received flowx:analytics event:', event.detail);
};

ngOnDestroy(): void {
  document.removeEventListener('flowx:analytics', this.analyticsListener);
}

import { FlxTasksManagementComponent } from '@flowx/angular-sdk';

<flx-task-management
      [apiUrl]="apiUrl"
      [authToken]="accessToken"
      [appId]="appId()"
      [language]="language()"
      [themeId]="themeId()"
      [staticAssetsPath]="staticUrl"
      [viewDefinitionId]="viewDefinitionId()"
      [locale]="locale()"
      [buildId]="buildId()"
      [workspaceId]="workspaceId()"
  ></flx-task-management>