commons-shared-web-ui 0.0.33 → 0.0.35

package/index.d.ts

@@ -1312,6 +1312,61 @@ declare class FormSectionComponent implements OnInit, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<FormSectionComponent, "lib-form-section", never, { "config": { "alias": "config"; "required": false; }; "controller": { "alias": "controller"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; }, {}, never, never, false, never>;
 }
 
+interface ConfirmationModalConfig {
+    title: string;
+    headerTheme?: 'light' | 'dark';
+    icon?: string | {
+        type: 'material' | 'custom';
+        value: string;
+        color?: string;
+    };
+    width?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    customClass?: string;
+    type?: 'modal' | 'side-panel';
+    panelPosition?: 'left' | 'right' | 'top' | 'bottom';
+    panelSpacing?: string;
+    panelWidth?: string;
+    panelHeight?: string;
+    backgroundColor?: string;
+    borderRadius?: string;
+    borderTopLeftRadius?: string;
+    borderTopRightRadius?: string;
+    borderBottomLeftRadius?: string;
+    borderBottomRightRadius?: string;
+    padding?: string;
+    headerBackgroundColor?: string;
+    headerTextColor?: string;
+    headerBorderBottom?: string;
+    bodyTextColor?: string;
+    footerBackgroundColor?: string;
+    footerBorderTop?: string;
+    confirmButton: {
+        label: string;
+        type: 'primary' | 'danger' | 'warning';
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    cancelButton?: {
+        label?: string;
+        show?: boolean;
+    };
+    customFooter?: boolean;
+    formMode?: boolean;
+    closeOnBackdrop?: boolean;
+    closeOnEsc?: boolean;
+    showCloseButton?: boolean;
+    showCodeSnippetButton?: boolean;
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+    labels?: {
+        closeAriaLabel?: string;
+        codeSnippetAriaLabel?: string;
+        codeSnippetTitle?: string;
+        iconAltText?: string;
+    };
+}
+
 declare class FormFieldComponent implements OnInit, OnDestroy {
     private fb;
     private expressionService;
@@ -1338,6 +1393,8 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     multiSaveError: string;
     private destroy$;
     mediaDeviceInput: ElementRef<HTMLInputElement>;
+    /** Host div for the library picker — always in DOM, moved to body to escape parent transforms */
+    libraryModalRef: ElementRef<HTMLDivElement>;
     showMediaMenu: boolean;
     showYoutubeInput: boolean;
     youtubeUrlInput: string;
@@ -1424,6 +1481,7 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
         id: number;
         fg: FormGroup;
     }): number;
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     registerControl(): void;
     getValidators(): ValidatorFn[];
@@ -1532,6 +1590,8 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
      * Returns `null` when not configured; the caller skips the API call.
      */
     private buildLibraryUploadRequest;
+    /** Config object for the cc-confirmation-modal used as the library picker. */
+    get libraryModalConfig(): ConfirmationModalConfig;
     onMediaMenuLibrary(): void;
     private _loadLibraryImages;
     getLibraryItemUrl(item: any): string;
@@ -1911,6 +1971,7 @@ declare class DropdownComponent implements ControlValueAccessor, OnInit, OnChang
     onTouched: () => void;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    private get validOptions();
     private updateFromConfig;
     private updateFromLabels;
     get requiredMarker(): string;
@@ -2027,6 +2088,7 @@ declare class CheckboxComponent implements ControlValueAccessor, OnInit, OnChang
     private updateFromConfig;
     private updateFromLabels;
     get isGroup(): boolean;
+    get visibleOptions(): CheckboxOption[];
     get requiredMarker(): string;
     writeValue(value: any): void;
     registerOnChange(fn: any): void;
@@ -2113,6 +2175,7 @@ declare class RadioComponent implements ControlValueAccessor, OnInit {
     ngOnChanges(changes: any): void;
     private updateFromConfig;
     get requiredMarker(): string;
+    get visibleOptions(): RadioOption[];
     writeValue(value: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
@@ -2460,61 +2523,6 @@ interface DropdownAction {
     confirmationTitle?: string;
 }
 
-interface ConfirmationModalConfig {
-    title: string;
-    headerTheme?: 'light' | 'dark';
-    icon?: string | {
-        type: 'material' | 'custom';
-        value: string;
-        color?: string;
-    };
-    width?: string;
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    customClass?: string;
-    type?: 'modal' | 'side-panel';
-    panelPosition?: 'left' | 'right' | 'top' | 'bottom';
-    panelSpacing?: string;
-    panelWidth?: string;
-    panelHeight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    borderTopLeftRadius?: string;
-    borderTopRightRadius?: string;
-    borderBottomLeftRadius?: string;
-    borderBottomRightRadius?: string;
-    padding?: string;
-    headerBackgroundColor?: string;
-    headerTextColor?: string;
-    headerBorderBottom?: string;
-    bodyTextColor?: string;
-    footerBackgroundColor?: string;
-    footerBorderTop?: string;
-    confirmButton: {
-        label: string;
-        type: 'primary' | 'danger' | 'warning';
-        disabled?: boolean;
-        loading?: boolean;
-    };
-    cancelButton?: {
-        label?: string;
-        show?: boolean;
-    };
-    customFooter?: boolean;
-    formMode?: boolean;
-    closeOnBackdrop?: boolean;
-    closeOnEsc?: boolean;
-    showCloseButton?: boolean;
-    showCodeSnippetButton?: boolean;
-    ariaLabel?: string;
-    ariaDescribedBy?: string;
-    labels?: {
-        closeAriaLabel?: string;
-        codeSnippetAriaLabel?: string;
-        codeSnippetTitle?: string;
-        iconAltText?: string;
-    };
-}
-
 declare class ButtonDropdownComponent {
     private elementRef;
     private router;
@@ -3614,6 +3622,7 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
         value: any;
     } | null): void;
     getFilterDisplay(filter: any): string;
+    getValidFilterOptions(filter: any): any[];
     isFilterActive(filter: any): boolean;
     /**
      * Assembles the current table state into a `TableDataChangeEvent` object.

package/package.json

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

package/src/lib/modules/smart-form/smart-form.theme.scss

@@ -16,6 +16,7 @@ $default-smart-form-config: (
 
     // ── Accent colour (flows from app primary; replaces hard-coded blue) ────────
     accent-color: #3B82F6,
+    selected-color: #3B82F6,
 
     // ── Form container ──────────────────────────────────────────────────────────
     form-bg: #ffffff,
@@ -198,7 +199,7 @@ $default-smart-form-config: (
 
     // ── Form action bar (submit / previous) ─────────────────────────────────────
     actions-border: 1px solid #E5E7EB,
-    actions-padding: 20px 0 0,
+    actions-padding: 20px 10px 0,
     actions-gap: 12px,
 
     btn-primary-bg: #3B82F6,
@@ -252,6 +253,7 @@ $theme-2-smart-form-config: (
 
     // ── Accent colour ───────────────────────────────────────────────────────────
     accent-color: #818CF8,
+    selected-color: #818CF8,
 
     // ── Form container ──────────────────────────────────────────────────────────
     form-bg: #0F172A,
@@ -434,7 +436,7 @@ $theme-2-smart-form-config: (
 
     // ── Actions bar ─────────────────────────────────────────────────────────────
     actions-border: 1px solid #1E293B,
-    actions-padding: 20px 0 0,
+    actions-padding: 20px 10px 0,
     actions-gap: 12px,
 
     btn-primary-bg: #818CF8,
@@ -482,6 +484,9 @@ $theme-2-smart-form-config: (
 
 // ── Theme 3 — Campus Students (campus red accent) ─────────────────────────────
 $type1-config: map.merge($default-smart-form-config, (
+    accent-color: #E63E30,
+    selected-color: #E63E30,
+
     input-focus-border: #E63E30,
     input-focus-shadow: 0 0 0 3px rgba(230, 62, 48, 0.08),
     chip-selected-bg: #E63E30,
@@ -553,6 +558,7 @@ $type1-config: map.merge($default-smart-form-config, (
 
     // Accent colour
     --cc-sf-accent-color: #{map.get($config, accent-color)};
+    --cc-sf-selected-color: #{map.get($config, selected-color)};
 
     // Form container
     --cc-sf-form-bg: #{map.get($config, form-bg)};