commons-shared-web-ui 0.0.11 → 0.0.13

package/index.d.ts

@@ -20,6 +20,7 @@ import * as i15 from '@angular/material/button';
 import * as i16 from '@angular/material/menu';
 import * as i17 from '@angular/material/progress-bar';
 import * as i18 from '@angular/material/tooltip';
+import { TooltipPosition } from '@angular/material/tooltip';
 import * as i19 from '@angular/material/slider';
 import * as i20 from '@angular/material/list';
 import * as i21 from '@angular/material/chips';
@@ -33,6 +34,7 @@ import * as i28 from '@angular/material/expansion';
 import * as i29 from '@angular/cdk/accordion';
 import * as i3$1 from '@angular/forms';
 import { ControlValueAccessor, FormGroup, FormBuilder, AbstractControl, FormControl, FormArray, ValidatorFn, ValidationErrors } from '@angular/forms';
+import * as i3$2 from '@angular/router';
 import { Router, ActivatedRoute } from '@angular/router';
 import * as i11$1 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
@@ -1521,6 +1523,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 +1689,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 +1908,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 +1926,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 +1945,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 +1954,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 +1995,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 +2008,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.
@@ -1983,9 +2054,78 @@ declare class SmartFormModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<SmartFormModule>;
 }
 
+interface SideNavItem {
+    id: string;
+    label: string;
+    icon?: string;
+    route?: string;
+    roles?: string[];
+    disabled?: boolean;
+    showArrow?: boolean;
+    tooltip?: string;
+}
+interface SideNavStyleConfig {
+    bg?: string;
+    width?: string;
+    collapsedWidth?: string;
+    fontFamily?: string;
+    headingColor?: string;
+    itemColor?: string;
+    itemHoverBg?: string;
+    activeBg?: string;
+    activeColor?: string;
+    activeHoverBg?: string;
+}
+interface SideNavSection {
+    heading?: string;
+    items: SideNavItem[];
+}
+
+declare class SideNavComponent implements OnChanges {
+    sections: SideNavSection[];
+    userRoles?: string[];
+    activeId?: string;
+    styleConfig?: SideNavStyleConfig;
+    /** Control whether the nav is collapsed externally (two-way bindable) */
+    collapsed: boolean;
+    /** Width of the nav when expanded. Overrides the CSS variable default. */
+    width?: string;
+    /** Width of the nav when collapsed (icons only). Overrides the CSS variable default. */
+    collapsedWidth?: string;
+    /** Whether to show the collapse toggle button */
+    showCollapseToggle: boolean;
+    /** Whether to hide icons when the side nav is expanded */
+    hideIconsWhenExpanded: boolean;
+    /** Whether to show tooltips on nav items */
+    showTooltips: boolean;
+    /** Position of the tooltip */
+    tooltipPosition: TooltipPosition;
+    itemClicked: EventEmitter<SideNavItem>;
+    /** Emits whenever the collapsed state changes (supports two-way binding via [(collapsed)]) */
+    collapsedChange: EventEmitter<boolean>;
+    /** Applies collapsed class to :host for the width CSS transition */
+    get isHostCollapsed(): boolean;
+    filteredSections: SideNavSection[];
+    ngOnChanges(changes: SimpleChanges): void;
+    private filterSections;
+    onItemClick(item: SideNavItem, event: Event): void;
+    toggleCollapse(): void;
+    get customStyles(): {
+        [key: string]: string;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<SideNavComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SideNavComponent, "lib-side-nav", never, { "sections": { "alias": "sections"; "required": false; }; "userRoles": { "alias": "userRoles"; "required": false; }; "activeId": { "alias": "activeId"; "required": false; }; "styleConfig": { "alias": "styleConfig"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "width": { "alias": "width"; "required": false; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; }; "showCollapseToggle": { "alias": "showCollapseToggle"; "required": false; }; "hideIconsWhenExpanded": { "alias": "hideIconsWhenExpanded"; "required": false; }; "showTooltips": { "alias": "showTooltips"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; }, { "itemClicked": "itemClicked"; "collapsedChange": "collapsedChange"; }, never, never, false, never>;
+}
+
+declare class SideNavModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SideNavModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SideNavModule, [typeof SideNavComponent], [typeof i2$1.CommonModule, typeof i3$2.RouterModule, typeof MaterialModule], [typeof SideNavComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SideNavModule>;
+}
+
 declare class SharedUiModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SharedUiModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedUiModule, never, [typeof i2$1.CommonModule, typeof MaterialModule, typeof AlertModule, typeof ButtonModule, typeof ConfirmationModalModule, typeof FilterSidebarModule, typeof FilterModule, typeof SummaryCardModule, typeof ConfigurableFormModule, typeof FormComponentsModule, typeof SmartFormModule], [typeof MaterialModule, typeof AlertModule, typeof ButtonModule, typeof ConfirmationModalModule, typeof FilterSidebarModule, typeof FilterModule, typeof SummaryCardModule, typeof ConfigurableFormModule, typeof FormComponentsModule, typeof SmartFormModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedUiModule, never, [typeof i2$1.CommonModule, typeof MaterialModule, typeof AlertModule, typeof ButtonModule, typeof ConfirmationModalModule, typeof FilterSidebarModule, typeof FilterModule, typeof SummaryCardModule, typeof ConfigurableFormModule, typeof FormComponentsModule, typeof SmartFormModule, typeof SideNavModule], [typeof MaterialModule, typeof AlertModule, typeof ButtonModule, typeof ConfirmationModalModule, typeof FilterSidebarModule, typeof FilterModule, typeof SummaryCardModule, typeof ConfigurableFormModule, typeof FormComponentsModule, typeof SmartFormModule, typeof SideNavModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SharedUiModule>;
 }
 
@@ -2147,6 +2287,7 @@ declare const PAGINATION_THEME_DEFAULT = "theme-1";
 declare const PAGINATION_THEME_DARK = "theme-2";
 declare const NAV_VARIANT_DEFAULT: 'filled' | 'underline' | 'pills';
 declare const NAV_ORIENTATION_DEFAULT: 'horizontal' | 'vertical';
+declare const DEFAULT_SIDE_NAV_TOOLTIP_POSITION = "right";
 
 interface TableOption {
     label: string;
@@ -2385,6 +2526,7 @@ declare const SAMPLE_FORMS: {
     documentUploadForm: string;
     demandDefinitionForm: string;
     projectInfoForm: string;
+    faqForm: string;
 };
 
 declare const smartForm_examples_d_SAMPLE_FORMS: typeof SAMPLE_FORMS;
@@ -2408,5 +2550,5 @@ declare class SnackbarModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<SnackbarModule>;
 }
 
-export { AlertComponent, AlertModule, ButtonComponent, ButtonModule, CheckboxComponent, ConfigurableFormComponent, configurableForm_examples_d as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DatepickerComponent, DropdownComponent, ExpressionService, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FormComponentsModule, InputComponent, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, RadioComponent, SearchComponent, SharedUiModule, SmartFormComponent, SmartFormController, smartForm_examples_d as SmartFormExamples, SmartFormModule, SmartTableComponent, SmartTableModule, SnackbarComponent, SnackbarModule, SnackbarService, StringUtils, SummaryCardComponent, SummaryCardModule, ToggleComponent, ValidationUtils, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem, translateConfig };
-export type { AlertLabels, AlertVariant, AttachmentConfig, ButtonLabels, ButtonVariant, CheckboxConfig, CheckboxLabels, CheckboxOption, ConfirmationModalConfig, DateConfig, DatePickerConfig, DatepickerLabels, DropdownConfig, DropdownLabels, DropdownOption, EmailConfig, FieldConfig, FieldType, FilterChangeEvent, FilterConfig, FilterItem, FilterItemType, FilterOutput, FilterSearchConfig, FilterSidebarChangeEvent, FilterSidebarConfig, FilterSidebarOutput, FormConfig, FormField, FormOption, FormSchema, FormSection, GeneratedConfig, IconInput, InputConfig, InputLabels, InputType, JsonFieldConfig, JsonFormConfig, KeyType, LengthConstraint, LocationConfig, NavItem, NavStyleConfig, NestedStringConfig, NumberConfig, OptionConfig$1 as OptionConfig, OptionDTO, OptionItem, PaginationConfig, PaginationLabels, PhoneConfig, QueryParamsConfig, RadioConfig, RadioLabels, RadioOption, RangeConfig, RatingConfig, SearchConfig, SearchLabels, SectionConfig, SnackbarConfig, SnackbarVariant, StepperConfig, SubmitConfig, SummaryCardConfig, SummaryCardLabels, SummaryCardMeta, TableAction, TableActionItem, TableColumn, TableConfig, TableFilter, TableFilterChangeEvent, TableFilterColumn, TableFilterConfig, TableFilterItem, TableFilterLabels, TableFilterOutput, TableLabels, TableOption, TableTheme, TextConfig, ToggleConfig, ToggleLabels, UIConfig, UISubType, UIType, UploadedFile, ValidationResult, ValidationRules };
+export { AlertComponent, AlertModule, ButtonComponent, ButtonModule, CheckboxComponent, ConfigurableFormComponent, configurableForm_examples_d as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_SIDE_NAV_TOOLTIP_POSITION, DatepickerComponent, DropdownComponent, ExpressionService, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FormComponentsModule, InputComponent, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, RadioComponent, SearchComponent, SharedUiModule, SideNavComponent, SideNavModule, SmartFormComponent, SmartFormController, smartForm_examples_d as SmartFormExamples, SmartFormModule, SmartTableComponent, SmartTableModule, SnackbarComponent, SnackbarModule, SnackbarService, StringUtils, SummaryCardComponent, SummaryCardModule, ToggleComponent, ValidationUtils, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem, translateConfig };
+export type { AlertLabels, AlertVariant, AttachmentConfig, ButtonLabels, ButtonVariant, CheckboxConfig, CheckboxLabels, CheckboxOption, ConfirmationModalConfig, DateConfig, DatePickerConfig, DatepickerLabels, DropdownConfig, DropdownLabels, DropdownOption, EmailConfig, FieldConfig, FieldType, FilterChangeEvent, FilterConfig, FilterItem, FilterItemType, FilterOutput, FilterSearchConfig, FilterSidebarChangeEvent, FilterSidebarConfig, FilterSidebarOutput, FormConfig, FormField, FormOption, FormSchema, FormSection, GeneratedConfig, IconInput, InputConfig, InputLabels, InputType, JsonFieldConfig, JsonFormConfig, KeyType, LengthConstraint, LocationConfig, NavItem, NavStyleConfig, NestedStringConfig, NumberConfig, OptionConfig$1 as OptionConfig, OptionDTO, OptionItem, PaginationConfig, PaginationLabels, PhoneConfig, QueryParamsConfig, RadioConfig, RadioLabels, RadioOption, RangeConfig, RatingConfig, SearchConfig, SearchLabels, SectionConfig, SideNavItem, SideNavSection, SideNavStyleConfig, SnackbarConfig, SnackbarVariant, StepperConfig, SubmitConfig, SummaryCardConfig, SummaryCardLabels, SummaryCardMeta, TableAction, TableActionItem, TableColumn, TableConfig, TableFilter, TableFilterChangeEvent, TableFilterColumn, TableFilterConfig, TableFilterItem, TableFilterLabels, TableFilterOutput, TableLabels, TableOption, TableTheme, TextConfig, ToggleConfig, ToggleLabels, UIConfig, UISubType, UIType, UploadedFile, ValidationResult, ValidationRules };

package/package.json

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

package/src/lib/modules/side-nav/side-nav.theme.scss

@@ -0,0 +1,94 @@
+@use 'sass:map';
+
+$default-side-nav-config: (
+  // Container & Global
+  bg: #F9C80E0D,
+  width: 220px,
+  collapsed-width: 56px,
+  gap-sections: 24px,
+  padding: 16px,
+
+  // Typographic Global
+  font-family: ('Poppins', sans-serif),
+
+  // Header Typography
+  heading-font-weight: 500,
+  heading-font-size: 16px,
+  heading-color: #3C4043,
+
+  // Item Defaults (Inactive)
+  item-gap: 4px,
+  item-padding: 12px 16px,
+  item-border-radius: 8px,
+  item-font-weight: 400,
+  item-font-size: 14px,
+  item-color: #5F6368,
+  
+  // Item Hover
+  // (Figma didn't strictly specify hover for inactive, assume subtle transparency on the active color)
+  item-hover-bg: rgba(#E63E30, 0.05),
+  item-hover-color: #3C4043,
+
+  // Active Item
+  active-bg: #E63E30,
+  active-color: #FFFFFF,
+  active-font-weight: 500,
+  active-hover-bg: #D4382B, // Darkened active color
+  
+  // Disable State
+  disabled-opacity: 0.5,
+
+  // Tooltip Styling
+  tooltip-bg: rgba(0, 0, 0, 0.8),
+  tooltip-color: #FFFFFF,
+  tooltip-padding: 8px 12px,
+  tooltip-border-radius: 6px,
+  tooltip-font-size: 12px
+);
+
+@mixin side-nav-theme($user-config: ()) {
+  $config: map.merge($default-side-nav-config, $user-config);
+
+  // Container
+  --cc-side-nav-bg: #{map.get($config, bg)};
+  --cc-side-nav-width: #{map.get($config, width)};
+  --cc-side-nav-collapsed-width: #{map.get($config, collapsed-width)};
+  --cc-side-nav-gap-sections: #{map.get($config, gap-sections)};
+  --cc-side-nav-padding: #{map.get($config, padding)};
+
+  // Typography Family
+  --cc-side-nav-font-family: #{map.get($config, font-family)};
+
+  // Headers
+  --cc-side-nav-heading-font-weight: #{map.get($config, heading-font-weight)};
+  --cc-side-nav-heading-font-size: #{map.get($config, heading-font-size)};
+  --cc-side-nav-heading-color: #{map.get($config, heading-color)};
+
+  // Items Config
+  --cc-side-nav-item-gap: #{map.get($config, item-gap)};
+  --cc-side-nav-item-padding: #{map.get($config, item-padding)};
+  --cc-side-nav-item-border-radius: #{map.get($config, item-border-radius)};
+  
+  // Inactive Items
+  --cc-side-nav-item-font-weight: #{map.get($config, item-font-weight)};
+  --cc-side-nav-item-font-size: #{map.get($config, item-font-size)};
+  --cc-side-nav-item-color: #{map.get($config, item-color)};
+  --cc-side-nav-item-hover-bg: #{map.get($config, item-hover-bg)};
+  --cc-side-nav-item-hover-color: #{map.get($config, item-hover-color)};
+
+  // Active Items
+  --cc-side-nav-active-bg: #{map.get($config, active-bg)};
+  --cc-side-nav-active-color: #{map.get($config, active-color)};
+  --cc-side-nav-active-font-weight: #{map.get($config, active-font-weight)};
+  --cc-side-nav-active-hover-bg: #{map.get($config, active-hover-bg)};
+
+  // Disabled
+  --cc-side-nav-disabled-opacity: #{map.get($config, disabled-opacity)};
+
+  // Tooltip
+  --cc-side-nav-tooltip-bg: #{map.get($config, tooltip-bg)};
+  --cc-side-nav-tooltip-color: #{map.get($config, tooltip-color)};
+  --cc-side-nav-tooltip-padding: #{map.get($config, tooltip-padding)};
+  --cc-side-nav-tooltip-border-radius: #{map.get($config, tooltip-border-radius)};
+  --cc-side-nav-tooltip-font-size: #{map.get($config, tooltip-font-size)};
+}

package/src/lib/styles/global.scss

@@ -1,3 +1,4 @@
+@use '../modules/side-nav/side-nav.theme' as sideNav;
 @import 'quill/dist/quill.snow.css';
 
 :root {
@@ -49,6 +50,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;
+
+  @include sideNav.side-nav-theme();
 }
 
 /* ----------------------------------------------------