[NAE-2462] Builder component decomposition

CHANGELOG.md

@@ -5,14 +5,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres
 to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-Full Changelog: [https://github.com/netgrif/components/commits/v6.5.0](https://github.com/netgrif/components/commits/v6.5.0)
+## [6.5.0](https://github.com/netgrif/components/releases/tag/v6.5.0) (2026-07-20)
 
-## [6.5.0](https://github.com/netgrif/components/releases/tag/v6.5.0) (2025-02-18)
+### Fixed
+
+- [NAE-2413] Minor CSS changes & fixes
+- [NAE-2056] Fix NAE-2048 in release 6.4.1
 
 ### Added
 
 - [NAE-2033] Welcome dashboard
 - [NAE-2041] Implementing Ticket View
+- [NAE-2439] Implement new filter data types
+- [ETASK-23] Dynamic view configuration
+- [ETASK-33] Builder integration
+- [ETASK-29] Menu item creation in menu
+- [NAE-2450] Filter field PFQL support
 
 ### Changed
 
@@ -24,9 +32,11 @@ Full Changelog: [https://github.com/netgrif/components/commits/v6.5.0](https://g
 - [NAE-2040] Search in role management
 - [NAE-2052] Integrate ticket view with menu items
 - [NAE-2039] Search in workflow view
+- [NAE-2063] Action API 6.5.0
+- [NAE-2060] Merge 6.2.10, 6.4.2 into 6.5.0
+- [NAE-2444] Upgrade Angular to 17
+- [NAE-2463] Builder change localStorage sets
 
-Full Changelog: [https://github.com/netgrif/components/commits/v6.4.2](https://github.com/netgrif/components/commits/v6.4.2)
-
 ## [6.4.2](https://github.com/netgrif/components/releases/tag/v6.4.2) (2026-04-02)
 
 ### Fixed

package.json

@@ -85,7 +85,7 @@
         "@mdi/angular-material": "^7.2.96",
         "@mdi/font": "^7.4.47",
         "@netgrif/petri.svg": "1.1.1",
-        "@netgrif/petriflow": "2.2.3",
+        "@netgrif/petriflow": "2.2.4",
         "@netgrif/petriflow.svg": "1.1.1",
         "@ngbracket/ngx-layout": "^17.0.1",
         "@ngx-translate/core": "~15.0.0",

projects/nae-example-app/src/app/doc/builder-example/builder-tabbed-case-view/builder-tabbed-case-view.component.ts

@@ -11,10 +11,9 @@ import {
     SimpleFilter,
     AbstractTabbedCaseViewComponent,
     ViewIdService, NAE_DEFAULT_HEADERS,
-    NAE_BASE_FILTER, AllowedNetsServiceFactory, AllowedNetsService,  OverflowService
+    NAE_BASE_FILTER, AllowedNetsServiceFactory, AllowedNetsService,  OverflowService, Case
 } from '@netgrif/components-core';
 import {HeaderComponent} from '@netgrif/components';
-import {Case} from "../../../../../../netgrif-components-core/src/lib/resources/interface/case";
 import {TranslateService} from "@ngx-translate/core";
 
 const baseFilterFactory = (injectedData: InjectedTabbedCaseViewData) => {

projects/nae-example-app/src/app/doc/builder-example/builder-tabs-example.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {NAE_TASK_FORCE_OPEN, NAE_VIEW_ID_SEGMENT, TabContent, ViewIdService} from '@netgrif/components-core';
 import {BuilderTabbedCaseViewComponent} from './builder-tabbed-case-view/builder-tabbed-case-view.component';
 import {
@@ -14,8 +14,7 @@ import {TranslateService} from "@ngx-translate/core";
         {provide: NAE_VIEW_ID_SEGMENT, useValue: 'all-cases'},
         {provide: NAE_TASK_FORCE_OPEN, useValue: false},
         ViewIdService
-    ],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    ]
 })
 export class BuilderTabsExampleComponent implements OnInit {
 

projects/netgrif-components-core/src/lib/data-fields/models/component.ts

@@ -17,6 +17,7 @@ export enum ComponentPrefixes {
     NUMBER = 'number-',
     TASK_REF = 'task-ref-',
     CASE_REF = 'case-ref-',
+    PROCESS_REF = 'process-ref-',
     TEXT = 'text-',
     USER = 'user-',
     USER_LIST = 'user-list-',

projects/netgrif-components-core/src/lib/data-fields/process-ref-field/model/process-ref-field.ts

@@ -0,0 +1,18 @@
+import {DataField} from '../../models/abstract-data-field';
+import {Behavior} from '../../models/behavior';
+import {Layout} from '../../models/layout';
+import {Validation} from '../../models/validation';
+import {Component, ComponentPrefixes} from '../../models/component';
+
+export class ProcessRefField extends DataField<Array<string>> {
+
+    constructor(stringId: string, title: string, initialValue: Array<string>, behavior: Behavior,
+                placeholder?: string, description?: string, layout?: Layout, validations?: Array<Validation>, component?: Component,
+                parentTaskId?: string) {
+        super(stringId, title, initialValue, behavior, placeholder, description, layout, validations, component, parentTaskId);
+    }
+
+    public getTypedComponentType(): string {
+        return ComponentPrefixes.PROCESS_REF + this.getComponentType();
+    }
+}

projects/netgrif-components-core/src/lib/data-fields/process-ref-field/process-ref-default/abstract-process-ref-default.component.ts

@@ -0,0 +1,28 @@
+import {Component, Inject, Injector, Optional, Type} from '@angular/core';
+import {DATA_FIELD_PORTAL_DATA, DataFieldPortalData} from '../../models/data-field-portal-data-injection-token';
+import {AbstractBaseDataFieldComponent} from '../../base-component/abstract-base-data-field.component';
+import {ComponentPortal} from '@angular/cdk/portal';
+import {ProcessRefField} from '../model/process-ref-field';
+
+@Component({
+    selector: 'ncc-abstract-process-ref-default',
+    template: ''
+})
+export abstract class AbstractProcessRefDefaultComponent extends AbstractBaseDataFieldComponent<ProcessRefField> {
+
+    public componentPortal: ComponentPortal<any>;
+
+    protected constructor(protected injector: Injector,
+                          protected builderComponent: Type<any>,
+                          @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<ProcessRefField>) {
+        super(dataFieldPortalData);
+    }
+
+    createPortal() {
+        const portalInjector = Injector.create({
+            providers: [],
+            parent: this.injector
+        });
+        this.componentPortal = new ComponentPortal(this.builderComponent, null, portalInjector);
+    }
+}

projects/netgrif-components-core/src/lib/data-fields/public-api.ts

@@ -67,6 +67,8 @@ export * from './task-ref-field/task-ref-dashboard-field/task-ref-dashboard-tile
 export * from './task-ref-field/task-ref-dashboard-field/abstract-task-ref-dashboard-field.component';
 export * from './task-ref-field/task-ref-list-field/abstract-task-ref-list-field.component';
 export * from './case-ref-field/case-ref-default/case-ref-default.component';
+export * from './process-ref-field/process-ref-default/abstract-process-ref-default.component';
+export * from './process-ref-field/model/process-ref-field';
 export * from './case-ref-field/model/case-ref-injection-tokens';
 export * from './string-collection-field/string-collection-default-field/abstract-string-collection-default-field.component';
 

projects/netgrif-components-core/src/lib/task-content/model/field-type-resource.ts

@@ -18,6 +18,7 @@ export enum FieldTypeResource {
     MULTICHOICE_MAP = 'multichoice_map',
     TASK_REF = 'taskRef',
     CASE_REF = 'caseRef',
+    PROCESS_REF = 'processRef',
     CASE_FILTER = 'caseFilter',
     TASK_FILTER = 'taskFilter',
     PROCESS_FILTER = 'processFilter',

projects/netgrif-components-core/src/lib/task-content/services/field-converter.service.ts

@@ -26,6 +26,7 @@ import {UserListValue} from '../../data-fields/user-list-field/models/user-list-
 import {decodeBase64, encodeBase64} from "../../utility/base64";
 import {CaseRefField} from '../../data-fields/case-ref-field/model/case-ref-field';
 import {StringCollectionField} from '../../data-fields/string-collection-field/models/string-collection-field';
+import {ProcessRefField} from '../../data-fields/process-ref-field/model/process-ref-field';
 
 @Injectable({
     providedIn: 'root'
@@ -108,6 +109,9 @@ export class FieldConverterService {
             case FieldTypeResource.CASE_REF:
                 return new CaseRefField(item.stringId, item.name, item.value ? item.value : [], item.behavior,
                     item.placeholder, item.description, item.layout, item.validations, item.component, item.parentTaskId);
+            case FieldTypeResource.PROCESS_REF:
+                return new ProcessRefField(item.stringId, item.name, item.value ? item.value : [], item.behavior,
+                    item.placeholder, item.description, item.layout, item.validations, item.component, item.parentTaskId);
             case FieldTypeResource.CASE_FILTER:
             case FieldTypeResource.TASK_FILTER:
             case FieldTypeResource.PROCESS_FILTER:
@@ -153,6 +157,8 @@ export class FieldConverterService {
             return FieldTypeResource.I18N;
         } else if (item instanceof CaseRefField) {
             return FieldTypeResource.CASE_REF;
+        } else if (item instanceof ProcessRefField) {
+            return FieldTypeResource.PROCESS_REF;
         } else if (item instanceof StringCollectionField) {
             return FieldTypeResource.STRING_COLLECTION;
         }

projects/netgrif-components-core/src/lib/user/services/user.service.ts

@@ -66,10 +66,6 @@ export class UserService implements OnDestroy {
         return this._userChange$.asObservable();
     }
 
-    get anonymousUser(): User {
-        return this.anonymousUser;
-    }
-
     get anonymousUser$(): Observable<User> {
         return this._anonymousUserChange$.asObservable();
     }

projects/netgrif-components/package.json

@@ -48,7 +48,7 @@
         "@mdi/angular-material": "^7.2.96",
         "@mdi/font": "^7.4.47",
         "@netgrif/petri.svg": "1.1.1",
-        "@netgrif/petriflow": "2.2.3",
+        "@netgrif/petriflow": "2.2.4",
         "@netgrif/petriflow.svg": "1.1.1",
         "@ngx-translate/core": "~15.0.0",
         "@ngx-translate/http-loader": "~8.0.0",

projects/netgrif-components/src/lib/builder/builder.component.spec.ts

@@ -5,7 +5,7 @@ import {MatDialog} from '@angular/material/dialog';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ImportService} from '@netgrif/petriflow';
 import {of} from 'rxjs';
-import {BuilderModeService} from './builder-mode.service';
+import {BuilderModeService} from './services/builder-mode.service';
 import {ArcFactory} from './modeler/edit-mode/domain/arc-builders/arc-factory.service';
 import {EditModeService} from './modeler/edit-mode/edit-mode.service';
 import {ExportService} from '@netgrif/petriflow';

projects/netgrif-components/src/lib/builder/builder.component.ts

@@ -1,11 +1,11 @@
-import {Component, Inject, Optional} from '@angular/core';
-import {BuilderMode, BuilderModeService} from "./builder-mode.service";
+import {Component, Inject, Optional, Type} from '@angular/core';
+import {BuilderMode, BuilderModeService} from "./services/builder-mode.service";
 import {ModelService} from "./modeler/services/model/model.service";
 import {ActivatedRoute, Router} from "@angular/router";
 import {MatDialog} from "@angular/material/dialog";
 import {HttpClient} from "@angular/common/http";
 import {HistoryService} from "./modeler/services/history/history.service";
-import {CaseResourceService, LoadingEmitter, NAE_TAB_DATA, ImmediateData} from "@netgrif/components-core";
+import {CaseResourceService, LoadingEmitter, NAE_TAB_DATA, ImmediateData, DATA_FIELD_PORTAL_DATA, CaseRefField, DataFieldPortalData} from "@netgrif/components-core";
 import {InjectedTabbedBuilderViewData} from "./injected-builder-data";
 import {FieldListService} from './form-builder/field-list/field-list.service';
 import {GridsterService} from './form-builder/gridster/gridster.service';
@@ -52,8 +52,10 @@ import {MatPaginatorIntl} from '@angular/material/paginator';
 import {BuilderPaginatorIntl} from './modeler/components/master-detail/main-master/builder-paginator-inpl';
 import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';
 import {I18nControlService} from './modeler/i18n-mode/i18n-control.service';
-import {BuilderIntegrationService} from "./builder-integration.service";
+import {BuilderIntegrationService} from "./services/builder-integration.service";
 import {TaskModeService} from "./modeler/task-mode/task-mode.service";
+import {LocalStorageService} from "./services/local-storage.service";
+import {PetriflowCanvasService} from '@netgrif/petriflow.svg';
 
 @Component({
     selector: 'nc-builder',
@@ -108,7 +110,12 @@ import {TaskModeService} from "./modeler/task-mode/task-mode.service";
         BuilderModeService,
         I18nControlService,
         BuilderIntegrationService,
-        TaskModeService
+        TaskModeService,
+        LocalStorageService,
+        // PetriflowCanvasService is `providedIn: 'root'` in @netgrif/petriflow.svg, which would make it a
+        // single instance shared by every open builder tab (wrong canvas/model rendered on tab switch).
+        // Re-provided here so each <nc-builder> instance gets its own canvas/panzoom state.
+        {provide: PetriflowCanvasService, useClass: PetriflowCanvasService as unknown as Type<PetriflowCanvasService>}
     ]
 })
 export class BuilderComponent {
@@ -124,9 +131,10 @@ export class BuilderComponent {
                 public builderModeService: BuilderModeService,
                 protected _caseResourceService: CaseResourceService,
                 protected _builderIntegrationService: BuilderIntegrationService,
-                @Optional() @Inject(NAE_TAB_DATA) injectedTabData: InjectedTabbedBuilderViewData) {
+                @Optional() @Inject(NAE_TAB_DATA) injectedTabData: InjectedTabbedBuilderViewData,
+                @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<CaseRefField>) {
         this.loading = new LoadingEmitter(true);
-        if (injectedTabData?.processCase) {
+        if (injectedTabData !== null && injectedTabData?.processCase) {
             this._builderIntegrationService.isIntegrated = true;
             this._builderIntegrationService.processCase = injectedTabData.processCase;
             this.resolveIntegratedMode();
@@ -137,6 +145,21 @@ export class BuilderComponent {
                     this._builderIntegrationService.reloadModes = true;
                 })
             });
+        } else if (dataFieldPortalData !== null && dataFieldPortalData?.dataField?.value?.length > 0) {
+            this._builderIntegrationService.isIntegrated = true;
+            this._caseResourceService.getOneCase(dataFieldPortalData?.dataField?.value[0]).subscribe({next: processCase => {
+                this._builderIntegrationService.processCase = processCase;
+                this.resolveIntegratedMode();
+            }, error: () => {
+                this.loading.off();
+            }})
+            this._builderIntegrationService.reloadCase.subscribe(() => {
+                this._caseResourceService.getOneCase(this._builderIntegrationService.processCase?.stringId).subscribe(processCase => {
+                    this._builderIntegrationService.processCase = processCase;
+                    this.resolveIntegratedMode()
+                    this._builderIntegrationService.reloadModes = true;
+                })
+            });
         } else {
             this.loading.off();
             this.resolveRouterModel();

projects/netgrif-components/src/lib/builder/builder.module.ts

@@ -1,7 +1,7 @@
-import {NgModule} from '@angular/core';
+import {Injector, NgModule} from '@angular/core';
 import {CommonModule, NgOptimizedImage} from '@angular/common';
 import {BuilderComponent} from './builder.component';
-import {MaterialModule} from '@netgrif/components-core';
+import {MaterialModule, ComponentRegistryService} from '@netgrif/components-core';
 import {FormBuilderModule} from './form-builder/form-builder.module';
 import {ModelerModule} from './modeler/modeler.module';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
@@ -12,11 +12,14 @@ import {TaskContentComponentModule} from '../task-content/task-content.module';
 import {MaterialIconPickerComponent} from './modeler/components/material-icon-picker/material-icon-picker.component';
 import {BuilderDialogsModule} from './dialogs/dialogs.module';
 import {FlexLayoutModule} from "@ngbracket/ngx-layout";
+import {ComponentPortal} from '@angular/cdk/portal';
+import {ProcessRefDefaultComponent} from '../data-fields/process-ref/process-ref-default/process-ref-default.component';
 
 
 @NgModule({
     declarations: [
         BuilderComponent,
+        ProcessRefDefaultComponent,
     ],
     imports: [
         BuilderDialogsModule,
@@ -36,4 +39,8 @@ import {FlexLayoutModule} from "@ngbracket/ngx-layout";
     exports: [BuilderComponent]
 })
 export class BuilderModule {
+
+    constructor(registry: ComponentRegistryService) {
+        registry.register("process-ref-default", (injector: Injector) => new ComponentPortal<any>(ProcessRefDefaultComponent, null, injector));
+    }
 }

projects/netgrif-components/src/lib/builder/builder.theme.scss

@@ -6,6 +6,18 @@
     $warn: map-get($theme, warn);
 
     // BUILDER
+
+    .single-task-fix {
+        .fix-datafield-expansion-panel {
+            .mat-expansion-panel:not(.mat-expanded) > .mat-expansion-panel-content {
+                height: 0 !important;
+            }
+
+            .mat-expansion-panel.mat-expanded > .mat-expansion-panel-content {
+                height: 100% !important;
+            }
+        }
+    }
     .svg-active-stroke {
         stroke:  mat.get-color-from-palette($accent, 500) !important;
     }
@@ -15,6 +27,10 @@
     }
 
     .builder-fix {
+        .info-label-icon {
+            color: mat.get-color-from-palette($primary, 500);
+        }
+
         .app-mat-viewnav {
             background-color: mat.get-color-from-palette($primary, 600) !important;