commons-shared-web-ui 0.0.10 → 0.0.12

package/index.d.ts

@@ -38,6 +38,7 @@ import * as i11$1 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable, Subject } from 'rxjs';
+import * as i9$1 from 'ngx-quill';
 
 declare class MaterialModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MaterialModule, never>;
@@ -1520,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[];
@@ -1576,6 +1598,7 @@ interface FieldConfig {
     attachmentConfig?: AttachmentConfig;
     locationConfig?: LocationConfig;
     ratingConfig?: RatingConfig;
+    richTextConfig?: RichTextConfig;
     children?: FieldConfig[];
 }
 interface TextConfig {
@@ -1664,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;
@@ -1673,6 +1707,10 @@ interface RatingConfig {
     maxRating?: number;
     allowHalf?: boolean;
 }
+interface RichTextConfig {
+    height?: string;
+    placeholder?: string;
+}
 interface ValidationResult {
     isValid: boolean;
     errorMessage?: string;
@@ -1868,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 */
@@ -1878,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.
@@ -1891,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.
@@ -1899,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;
@@ -1936,16 +1993,35 @@ 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;
     get isChip(): boolean;
     get isSwitch(): boolean;
     get isRating(): boolean;
+    get isRichText(): boolean;
     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.
@@ -1972,7 +2048,7 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
 
 declare class SmartFormModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SmartFormModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SmartFormModule, [typeof SmartFormComponent, typeof FormSectionComponent, typeof FormFieldComponent], [typeof i2$1.CommonModule, typeof i3$1.ReactiveFormsModule, typeof i3$1.FormsModule, typeof MaterialModule, typeof ButtonModule, typeof AlertModule], [typeof SmartFormComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SmartFormModule, [typeof SmartFormComponent, typeof FormSectionComponent, typeof FormFieldComponent], [typeof i2$1.CommonModule, typeof i3$1.ReactiveFormsModule, typeof i3$1.FormsModule, typeof MaterialModule, typeof ButtonModule, typeof AlertModule, typeof i9$1.QuillModule], [typeof SmartFormComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SmartFormModule>;
 }
 
@@ -2378,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.10",
+  "version": "0.0.12",
   "peerDependencies": {
     "@angular/animations": "20.3.15",
     "@angular/cdk": "20.2.14",
@@ -13,7 +13,9 @@
     "@angular/platform-browser-dynamic": "20.3.15",
     "@angular/router": "20.3.15",
     "rxjs": "7.8.0",
-    "zone.js": "~0.14.0 || ~0.15.0"
+    "zone.js": "~0.14.0 || ~0.15.0",
+    "ngx-quill": "^28.0.0",
+    "quill": "^2.0.3"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/src/lib/styles/global.scss

@@ -1,3 +1,5 @@
+@import 'quill/dist/quill.snow.css';
+
 :root {
   /* Default Variables (Can be overridden) */
   --cc-card-bg: #ffffff;
@@ -47,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;
+
+
 }
 
 /* ----------------------------------------------------