commons-shared-web-ui 0.0.26 → 0.0.28

package/index.d.ts

@@ -1,5 +1,7 @@
 import * as i0 from '@angular/core';
 import { OnChanges, EventEmitter, SimpleChanges, ChangeDetectorRef, OnInit, OnDestroy, ElementRef, PipeTransform, AfterViewInit, QueryList, NgZone } from '@angular/core';
+import * as i2 from '@angular/material/snack-bar';
+import { MatSnackBar, MatSnackBarRef } from '@angular/material/snack-bar';
 import * as i2$1 from '@angular/common';
 import * as i3$1 from '@angular/forms';
 import { FormGroup, FormBuilder, FormArray, FormControl, ValidatorFn, ControlValueAccessor, AbstractControl, ValidationErrors } from '@angular/forms';
@@ -7,8 +9,6 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import * as i3$2 from '@angular/router';
 import { Router, ActivatedRoute } from '@angular/router';
 import { BehaviorSubject, Subject, Observable } from 'rxjs';
-import * as i2 from '@angular/material/snack-bar';
-import { MatSnackBar, MatSnackBarRef } from '@angular/material/snack-bar';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import * as i1 from '@angular/material/card';
 import * as i3 from '@angular/material/checkbox';
@@ -58,6 +58,12 @@ interface FormSchema {
     metadata?: {
         [key: string]: any;
     };
+    /**
+     * When true, top-level GROUP children of sectionConfig are rendered as
+     * a horizontal stepper at the top, showing one section at a time.
+     * Navigate between sections via the Next/Previous buttons in the host app.
+     */
+    sectionStepper?: boolean;
     sectionConfig?: SectionConfig;
     stepperConfig?: StepperConfig;
     submitConfig?: SubmitConfig;
@@ -632,8 +638,15 @@ declare class FieldSelectionService {
      * Initialize the store from a FormSchema.
      */
     loadSchema(schema: FormSchema): void;
+    /**
+     * Load a schema while preserving the expanded/collapsed state of sections and groups.
+     * Used when the schema structure hasn't changed but field selections have.
+     * This prevents the UI from unexpectedly collapsing sections when the user toggles a field.
+     */
+    loadSchemaPreservingExpanded(schema: FormSchema): void;
     /**
      * Toggle a group's enabled state. Disabling cascades to all sections + fields.
+     * When enabling, all fields are selected (unless locked).
      */
     toggleGroup(groupIndex: number): void;
     /**
@@ -658,9 +671,19 @@ declare class FieldSelectionService {
      */
     buildUpdatedSchema(): FormSchema | null;
     private _disableAllSections;
+    /**
+     * Enable all sections and their fields (except locked ones).
+     * Used when toggling a section/group back ON to restore field selections.
+     */
+    private _enableAllSections;
     private _toggleSectionAtPath;
     private _toggleExpandedAtPath;
     private _toggleFieldAtPath;
+    /**
+     * Recursively merge expansion state from old sections into new sections.
+     * Preserves which sections were expanded/collapsed by the user.
+     */
+    private _mergeExpandedSections;
     static ɵfac: i0.ɵɵFactoryDeclaration<FieldSelectionService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<FieldSelectionService>;
 }
@@ -677,6 +700,11 @@ declare class FieldSelectionComponent implements OnChanges {
      */
     hideToggleForOptionTypes: boolean;
     protected readonly store: FieldSelectionService;
+    /**
+     * Flag to track if the next schema change is from internal toggles.
+     * When true, we'll use loadSchemaPreservingExpanded() to keep user's expansion state.
+     */
+    private _isInternalChange;
     ngOnChanges(changes: SimpleChanges): void;
     onToggleGroup(groupIndex: number): void;
     onToggleGroupExpanded(groupIndex: number): void;
@@ -887,9 +915,32 @@ declare class ConfiguratorTreeComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<ConfiguratorTreeComponent, "lib-configurator-tree", never, { "tree": { "alias": "tree"; "required": false; }; "selectedFieldPath": { "alias": "selectedFieldPath"; "required": false; }; }, { "selectField": "selectField"; "toggleExpanded": "toggleExpanded"; }, never, never, false, never>;
 }
 
+type SnackbarVariant = 'success' | 'error' | 'warning' | 'info';
+interface SnackbarConfig {
+    message: string;
+    variant?: SnackbarVariant;
+    duration?: number;
+    horizontalPosition?: 'start' | 'center' | 'end' | 'left' | 'right';
+    verticalPosition?: 'top' | 'bottom';
+    showCloseButton?: boolean;
+}
+
+declare class SnackbarService {
+    private snackBar;
+    constructor(snackBar: MatSnackBar);
+    show(config: SnackbarConfig): void;
+    success(message: string, duration?: number): void;
+    error(message: string, duration?: number): void;
+    warning(message: string, duration?: number): void;
+    info(message: string, duration?: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SnackbarService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SnackbarService>;
+}
+
 declare class ConfiguratorConfigPanelComponent implements OnChanges {
     private cdr;
-    constructor(cdr: ChangeDetectorRef);
+    private snackbarService;
+    constructor(cdr: ChangeDetectorRef, snackbarService: SnackbarService);
     selectedField: FieldConfig | null;
     selectedFieldInfo: ConfiguratorFieldInfo | null;
     builderFieldType: string | null;
@@ -938,8 +989,14 @@ declare class ConfiguratorConfigPanelComponent implements OnChanges {
      */
     private _buildConfigFormForType;
     /**
-     * Deep-clones the schema and removes any field whose `name` starts with
-     * `optionConfig.` and removes entire sections that become empty after that.
+     * Deep-clones the schema and removes any field whose `name` matches developer-only fields.
+     * This prevents end users from modifying system-level configurations like:
+     * - optionConfig.* (API URLs, data paths, etc.)
+     * - payloadPath (payload mapping)
+     * - className (CSS styling)
+     * - name (system identifier)
+     *
+     * Also removes entire sections that become empty after filtering.
      */
     private _filterSchemaForOptionConfig;
     private _extractInitialValuesFromField;
@@ -993,28 +1050,6 @@ declare class ExpressionService {
     static ɵprov: i0.ɵɵInjectableDeclaration<ExpressionService>;
 }
 
-type SnackbarVariant = 'success' | 'error' | 'warning' | 'info';
-interface SnackbarConfig {
-    message: string;
-    variant?: SnackbarVariant;
-    duration?: number;
-    horizontalPosition?: 'start' | 'center' | 'end' | 'left' | 'right';
-    verticalPosition?: 'top' | 'bottom';
-    showCloseButton?: boolean;
-}
-
-declare class SnackbarService {
-    private snackBar;
-    constructor(snackBar: MatSnackBar);
-    show(config: SnackbarConfig): void;
-    success(message: string, duration?: number): void;
-    error(message: string, duration?: number): void;
-    warning(message: string, duration?: number): void;
-    info(message: string, duration?: number): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SnackbarService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<SnackbarService>;
-}
-
 declare class SmartFormComponent implements OnInit, OnChanges, OnDestroy {
     private fb;
     controller: SmartFormController;
@@ -1058,6 +1093,15 @@ declare class SmartFormComponent implements OnInit, OnChanges, OnDestroy {
     fileAdded: EventEmitter<any>;
     fileUploadFinished: EventEmitter<any>;
     fileRemoved: EventEmitter<any>;
+    /** Emitted whenever the active section step changes. Carries current state so the
+     *  host can show/hide Previous/Next/Submit buttons in its own footer. */
+    stepChange: EventEmitter<{
+        currentStep: number;
+        totalSteps: number;
+        isFirst: boolean;
+        isLast: boolean;
+        stepLabel: string;
+    }>;
     formSchema: FormSchema;
     formGroup: FormGroup;
     fieldList: FieldConfig[];
@@ -1065,9 +1109,27 @@ declare class SmartFormComponent implements OnInit, OnChanges, OnDestroy {
     currentStep: number;
     isLoading: boolean;
     isDraftLoading: boolean;
+    /** True when sectionStepper mode is active (SECTION form with top-level GROUPs as steps). */
+    isSectionStepper: boolean;
+    /** Index of the currently visible section step. */
+    currentSectionStep: number;
+    /** Flat list of top-level GROUP FieldConfigs that become the stepper steps. */
+    sectionSteps: FieldConfig[];
+    /** Validation state per section step — drives badge colour/icon. */
+    stepValidationStates: ('untouched' | 'valid' | 'warning')[];
+    /** Flat field-name lists per step used for targeted validation. */
+    private stepFieldNames;
+    /** Controls skeleton visibility. Stays false until schema is parsed AND
+     *  any EDIT-mode data fetch completes, but always shows for at least
+     *  SKELETON_MIN_MS so the animation is visible even on fast loads. */
+    isFormReady: boolean;
+    private readonly SKELETON_MIN_MS;
+    private _skeletonStart;
     constructor(fb: FormBuilder, controller: SmartFormController, expressionService: ExpressionService, http: HttpClient, snackbarService: SnackbarService, router: Router);
     ngOnInit(): void;
     loadEditData(): void;
+    /** Flips isFormReady=true after the skeleton has been visible for at least SKELETON_MIN_MS. */
+    private _markReady;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     parseFormJson(): void;
@@ -1104,6 +1166,25 @@ declare class SmartFormComponent implements OnInit, OnChanges, OnDestroy {
     get canGoNext(): boolean;
     get canGoPrevious(): boolean;
     get currentStepConfig(): FieldConfig | undefined;
+    /** Advance to the next section step. Called by the host footer "Next" button.
+     *  Validates the current step first — marks it valid (green) or warning (orange). */
+    navigateToNext(): void;
+    /** Go back to the previous section step. Called by the host footer "Previous" button. */
+    navigateToPrevious(): void;
+    /** Jump directly to a specific section step by index.
+     *  Validates the step being left so the badge state updates correctly. */
+    goToSectionStep(index: number): void;
+    get isSectionStepFirst(): boolean;
+    get isSectionStepLast(): boolean;
+    /** Returns the SectionConfig for a given step — passed to lib-form-section.
+     *  The outer label is intentionally omitted because the stepper nav already
+     *  displays it; showing it again inside the content would be redundant. */
+    getSectionStepConfig(step: FieldConfig): any;
+    private _emitStepChange;
+    /** Marks all controls in the given step as touched and records valid/warning state. */
+    private _validateStep;
+    /** Recursively collects all leaf field names from a set of FieldConfigs. */
+    private _collectFieldNames;
     get nextLabel(): string;
     get submitLabel(): string;
     get previousLabel(): string;
@@ -1117,7 +1198,7 @@ declare class SmartFormComponent implements OnInit, OnChanges, OnDestroy {
     private getButtonByActionKind;
     private navigateTo;
     static ɵfac: i0.ɵɵFactoryDeclaration<SmartFormComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SmartFormComponent, "lib-smart-form", never, { "formJson": { "alias": "formJson"; "required": false; }; "initialValues": { "alias": "initialValues"; "required": false; }; "enableDraftAutoSave": { "alias": "enableDraftAutoSave"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; }, { "submit": "submit"; "draftSave": "draftSave"; "actionClick": "actionClick"; "valueChange": "valueChange"; "fileAdded": "fileAdded"; "fileUploadFinished": "fileUploadFinished"; "fileRemoved": "fileRemoved"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SmartFormComponent, "lib-smart-form", never, { "formJson": { "alias": "formJson"; "required": false; }; "initialValues": { "alias": "initialValues"; "required": false; }; "enableDraftAutoSave": { "alias": "enableDraftAutoSave"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; }, { "submit": "submit"; "draftSave": "draftSave"; "actionClick": "actionClick"; "valueChange": "valueChange"; "fileAdded": "fileAdded"; "fileUploadFinished": "fileUploadFinished"; "fileRemoved": "fileRemoved"; "stepChange": "stepChange"; }, never, never, false, never>;
 }
 
 declare class FormSectionComponent implements OnInit, OnDestroy {
@@ -1130,6 +1211,8 @@ declare class FormSectionComponent implements OnInit, OnDestroy {
      * Each element is a FormGroup representing one repeater instance.
      */
     repeaterFormArray: FormArray;
+    /** Tracks which accordion panels are open (by index). New instances start expanded. */
+    expandedInstances: Set<number>;
     /**
      * The key under which the FormArray is registered in the root formGroup.
      * Falls back to config.name or a generated key.
@@ -1142,6 +1225,8 @@ declare class FormSectionComponent implements OnInit, OnDestroy {
     private createInstanceGroup;
     addInstance(): void;
     removeInstance(index: number): void;
+    toggleInstance(index: number): void;
+    isExpanded(index: number): boolean;
     getInstanceGroup(index: number): FormGroup;
     get instanceGroups(): FormGroup[];
     /** For non-allowMulti sections we simply pass the root formGroup down */
@@ -1233,6 +1318,8 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
         isExpanded?: boolean;
     }[];
     private _nextInstanceId;
+    /** Tracks open accordion panels for standard (non-multiSave) GROUP repeaters. */
+    expandedGroupInstances: Set<number>;
     /**
      * Key used to register the GROUP control on the parent formGroup.
      * Priority: sectionConfig.name > field.name > camelCase(label) > '__group__'
@@ -1254,6 +1341,8 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     editGroupInstance(index: number): void;
     toggleExpandGroupInstance(index: number): void;
     removeGroupInstance(index: number, force?: boolean): void;
+    toggleGroupAccordion(index: number): void;
+    isGroupExpanded(index: number): boolean;
     trackByInstanceId(_: number, item: {
         id: number;
         fg: FormGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "commons-shared-web-ui",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "peerDependencies": {
     "@angular/animations": "20.3.15",
     "@angular/cdk": "20.2.14",