commons-shared-web-ui 0.0.11 → 0.0.12

package/index.d.ts

@@ -1521,6 +1521,27 @@ interface SectionConfig {
     allowMulti?: boolean;
     name?: string;
     label?: string;
+    /** Configuration for the card-based multi-save UI (FAQ style) */
+    multiSaveConfig?: MultiSaveConfig;
+}
+interface MultiSaveConfig {
+    /** If TRUE, enable the Save/Cancel card-based flow for this repeater */
+    active?: boolean;
+    /**
+     * The name of the field to show as the main 'heading' in the collapsed card.
+     * Typically matches the question or name.
+     */
+    summaryField?: string;
+    /**
+     * Optional name of the field to show as the sub-text in the collapsed card.
+     * Typically matches the answer or description.
+     */
+    descriptionField?: string;
+    /**
+     * Custom label key for the 'Add' button. If omitted, defaults to
+     * '+ Add a [label]'.
+     */
+    addLabel?: string;
 }
 interface StepperConfig {
     children: FieldConfig[];
@@ -1666,6 +1687,17 @@ interface AttachmentConfig {
     acceptLabel?: string;
     /** Legacy: explicit list of allowed extensions (e.g. ['.pdf', '.jpg']) */
     allowedExtensions?: string[];
+    /**
+     * API endpoint to upload the file to. When provided, the file is POSTed as
+     * multipart/form-data and the returned URL is stored as dataUrl instead of
+     * the base64 data URL produced by FileReader.
+     */
+    uploadUrl?: string;
+    /**
+     * Entity type sent along with the upload request (e.g. 'ENTITY_TYPE.SESSION').
+     * Only relevant when uploadUrl is set.
+     */
+    entityType?: string;
 }
 interface LocationConfig {
     enableCurrentLocation?: boolean;
@@ -1874,7 +1906,15 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     showPassword: boolean;
     isDragOver: boolean;
     fileUploadError: string;
+    multiSaveError: string;
     private destroy$;
+    /** FormControl used ONLY for the autocomplete text-input display value */
+    autocompleteInputCtrl: FormControl<string>;
+    /** Filtered option list shown in the mat-autocomplete panel */
+    filteredOptions: {
+        label: string;
+        code: any;
+    }[];
     /** For GROUP fields with allowMulti = true */
     groupFormArray: FormArray;
     /** For GROUP fields with allowMulti = false — single nested FormGroup */
@@ -1884,11 +1924,17 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
      * Using a separate array (not FormArray.controls) + trackBy(id) ensures
      * Angular creates FRESH child components for every new row, preventing
      * cached values from bleeding into new instances.
+     *
+     * Enhanced with isEditing and isSaved flags for the 'multiSave' card UI.
      */
-    instanceList: Array<{
+    instanceList: {
         id: number;
         fg: FormGroup;
-    }>;
+        initialValue?: any;
+        isEditing?: boolean;
+        isSaved?: boolean;
+        isExpanded?: boolean;
+    }[];
     private _nextInstanceId;
     /**
      * Key used to register the GROUP control on the parent formGroup.
@@ -1897,6 +1943,7 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     get groupKey(): string;
     constructor(fb: FormBuilder, expressionService: ExpressionService, http: HttpClient);
     ngOnInit(): void;
+    get addMultiLabel(): string;
     private initGroupField;
     /**
      * Sets up cross-field validation based on the `onValidate` formula.
@@ -1905,7 +1952,11 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
      */
     private setupFormulaValidation;
     addGroupInstance(): void;
-    removeGroupInstance(index: number): void;
+    saveGroupInstance(index: number): void;
+    cancelGroupInstance(index: number): void;
+    editGroupInstance(index: number): void;
+    toggleExpandGroupInstance(index: number): void;
+    removeGroupInstance(index: number, force?: boolean): void;
     trackByInstanceId(_: number, item: {
         id: number;
         fg: FormGroup;
@@ -1942,7 +1993,9 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     get isTextField(): boolean;
     get isNumberField(): boolean;
     get isDateField(): boolean;
+    get isTimeField(): boolean;
     get isDropdown(): boolean;
+    get isAutocomplete(): boolean;
     get isFileUpload(): boolean;
     get isRadio(): boolean;
     get isCheckbox(): boolean;
@@ -1953,6 +2006,22 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     get isGenerated(): boolean;
     get isRow(): boolean;
     get isGroup(): boolean;
+    /**
+     * Initialise the separate display-control that drives the mat-autocomplete
+     * text input.  The real form control always stores the *code* value.
+     */
+    private initAutocomplete;
+    /** Filter options by the user's search text (matches label or code). */
+    private _filterOptions;
+    /** Put the human-readable label into the display control based on the stored code. */
+    private _syncAutocompleteDisplayValue;
+    /** Called when user picks an option from the mat-autocomplete panel. */
+    onAutocompleteSelected(option: {
+        label: string;
+        code: any;
+    }): void;
+    /** Called when the input loses focus — clear display & value if text was manually deleted. */
+    onAutocompleteClear(): void;
     /**
      * Returns the effective grid column span for a child inside a ROW.
      * If the child declares an explicit colSpan, use it.
@@ -2385,6 +2454,7 @@ declare const SAMPLE_FORMS: {
     documentUploadForm: string;
     demandDefinitionForm: string;
     projectInfoForm: string;
+    faqForm: string;
 };
 
 declare const smartForm_examples_d_SAMPLE_FORMS: typeof SAMPLE_FORMS;

package/package.json

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

package/src/lib/styles/global.scss

@@ -49,6 +49,19 @@
   --field-input-height: 40px;
   --field-input-radius: 7px;
   --field-hint-color: #5f6368;
+
+  /* MultiSave (Card Repeater) */
+  --ms-card-bg: #ffffff;
+  --ms-card-border: #e8eaed;
+  --ms-card-radius: 10px;
+  --ms-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  --ms-card-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.08);
+  --ms-title-color: #111827;
+  --ms-desc-color: #6b7280;
+  --ms-btn-add-color: #3b82f6;
+  --ms-btn-add-hover: #2563eb;
+
+
 }
 
 /* ----------------------------------------------------