@allsorter/ui-components 0.0.400 → 0.0.404

package/lib/custom-editor/custom-editor.component.d.ts

@@ -62,9 +62,20 @@ export declare class CustomEditorComponent implements OnInit, OnDestroy, AfterVi
     deleteColumnLeftbtn?: boolean;
     deleteColumnRightbtn?: boolean;
     showTable: boolean;
+    externalHistory: string[];
+    externalRedoStack: string[];
+    useExternalHistory: boolean;
     contentChangeFromQuill: EventEmitter<string>;
     ApplyAIinQuill: EventEmitter<any>;
     onAutoBullet: EventEmitter<any>;
+    onHistoryChange: EventEmitter<{
+        history: string[];
+        redoStack: string[];
+    }>;
+    onUndoRedo: EventEmitter<{
+        type: "undo" | "redo";
+        content: string;
+    }>;
     toolbarConfig: ToolbarItem[];
     textFormattingConfig: ToolbarItem[];
     boldedText: boolean;
@@ -137,12 +148,12 @@ export declare class CustomEditorComponent implements OnInit, OnDestroy, AfterVi
     clearStylingDropdownTimeout(): void;
     clearTextFormattingDropdownTimeout(): void;
     handleClickOutside(event: Event): void;
-    execCmd(event: MouseEvent, command: string, value?: string | null): void;
+    execCmd(event: Event, command: string, value?: string | null): void;
     updateTagHierarchy(): void;
     onEditorInput(): void;
     getActiveState(type: string): boolean;
-    undo(event: MouseEvent): void;
-    redo(event: MouseEvent): void;
+    undo(event: Event): void;
+    redo(event: Event): void;
     textChange(): void;
     TextChange(): void;
     saveHistory(): void;
@@ -183,6 +194,6 @@ export declare class CustomEditorComponent implements OnInit, OnDestroy, AfterVi
     useAITool(event: MouseEvent): void;
     useAutoBullet(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CustomEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CustomEditorComponent, "app-custom-editor", never, { "bold": { "alias": "bold"; "required": false; }; "italic": { "alias": "italic"; "required": false; }; "underline": { "alias": "underline"; "required": false; }; "list": { "alias": "list"; "required": false; }; "isVisible": { "alias": "isVisible"; "required": false; }; "dataTestId": { "alias": "dataTestId"; "required": false; }; "showLabels": { "alias": "showLabels"; "required": false; }; "leftLabelText": { "alias": "leftLabelText"; "required": false; }; "rightLabelText": { "alias": "rightLabelText"; "required": false; }; "initialValue": { "alias": "initialValue"; "required": false; }; "contentFromParent": { "alias": "contentFromParent"; "required": false; }; "editScreenSection": { "alias": "editScreenSection"; "required": false; }; "actionType": { "alias": "actionType"; "required": false; }; "historyControls": { "alias": "historyControls"; "required": false; }; "autobullet": { "alias": "autobullet"; "required": false; }; "skillsBullet": { "alias": "skillsBullet"; "required": false; }; "jsonData": { "alias": "jsonData"; "required": false; }; "formJsonData": { "alias": "formJsonData"; "required": false; }; "editorId": { "alias": "editorId"; "required": false; }; "sectionId": { "alias": "sectionId"; "required": false; }; "actionId": { "alias": "actionId"; "required": false; }; "undoCustom": { "alias": "undoCustom"; "required": false; }; "redoCustom": { "alias": "redoCustom"; "required": false; }; "undoSkill": { "alias": "undoSkill"; "required": false; }; "redoSkill": { "alias": "redoSkill"; "required": false; }; "matOptionAI": { "alias": "matOptionAI"; "required": false; }; "hideTableOption": { "alias": "hideTableOption"; "required": false; }; "hideAutoBulletOption": { "alias": "hideAutoBulletOption"; "required": false; }; "hideAIOption": { "alias": "hideAIOption"; "required": false; }; "showAIButton": { "alias": "showAIButton"; "required": false; }; "insertTablebtn": { "alias": "insertTablebtn"; "required": false; }; "insertRowAbovebtn": { "alias": "insertRowAbovebtn"; "required": false; }; "insertRowBelowbtn": { "alias": "insertRowBelowbtn"; "required": false; }; "insertColumnLeftbtn": { "alias": "insertColumnLeftbtn"; "required": false; }; "insertColumnRightbtn": { "alias": "insertColumnRightbtn"; "required": false; }; "deleteTablebtn": { "alias": "deleteTablebtn"; "required": false; }; "deleteRowAbovebtn": { "alias": "deleteRowAbovebtn"; "required": false; }; "deleteRowBelowbtn": { "alias": "deleteRowBelowbtn"; "required": false; }; "deleteColumnLeftbtn": { "alias": "deleteColumnLeftbtn"; "required": false; }; "deleteColumnRightbtn": { "alias": "deleteColumnRightbtn"; "required": false; }; "showTable": { "alias": "showTable"; "required": false; }; "toolbarConfig": { "alias": "toolbarConfig"; "required": false; }; "textFormattingConfig": { "alias": "textFormattingConfig"; "required": false; }; }, { "contentChangeFromQuill": "contentChangeFromQuill"; "ApplyAIinQuill": "ApplyAIinQuill"; "onAutoBullet": "onAutoBullet"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomEditorComponent, "app-custom-editor", never, { "bold": { "alias": "bold"; "required": false; }; "italic": { "alias": "italic"; "required": false; }; "underline": { "alias": "underline"; "required": false; }; "list": { "alias": "list"; "required": false; }; "isVisible": { "alias": "isVisible"; "required": false; }; "dataTestId": { "alias": "dataTestId"; "required": false; }; "showLabels": { "alias": "showLabels"; "required": false; }; "leftLabelText": { "alias": "leftLabelText"; "required": false; }; "rightLabelText": { "alias": "rightLabelText"; "required": false; }; "initialValue": { "alias": "initialValue"; "required": false; }; "contentFromParent": { "alias": "contentFromParent"; "required": false; }; "editScreenSection": { "alias": "editScreenSection"; "required": false; }; "actionType": { "alias": "actionType"; "required": false; }; "historyControls": { "alias": "historyControls"; "required": false; }; "autobullet": { "alias": "autobullet"; "required": false; }; "skillsBullet": { "alias": "skillsBullet"; "required": false; }; "jsonData": { "alias": "jsonData"; "required": false; }; "formJsonData": { "alias": "formJsonData"; "required": false; }; "editorId": { "alias": "editorId"; "required": false; }; "sectionId": { "alias": "sectionId"; "required": false; }; "actionId": { "alias": "actionId"; "required": false; }; "undoCustom": { "alias": "undoCustom"; "required": false; }; "redoCustom": { "alias": "redoCustom"; "required": false; }; "undoSkill": { "alias": "undoSkill"; "required": false; }; "redoSkill": { "alias": "redoSkill"; "required": false; }; "matOptionAI": { "alias": "matOptionAI"; "required": false; }; "hideTableOption": { "alias": "hideTableOption"; "required": false; }; "hideAutoBulletOption": { "alias": "hideAutoBulletOption"; "required": false; }; "hideAIOption": { "alias": "hideAIOption"; "required": false; }; "showAIButton": { "alias": "showAIButton"; "required": false; }; "insertTablebtn": { "alias": "insertTablebtn"; "required": false; }; "insertRowAbovebtn": { "alias": "insertRowAbovebtn"; "required": false; }; "insertRowBelowbtn": { "alias": "insertRowBelowbtn"; "required": false; }; "insertColumnLeftbtn": { "alias": "insertColumnLeftbtn"; "required": false; }; "insertColumnRightbtn": { "alias": "insertColumnRightbtn"; "required": false; }; "deleteTablebtn": { "alias": "deleteTablebtn"; "required": false; }; "deleteRowAbovebtn": { "alias": "deleteRowAbovebtn"; "required": false; }; "deleteRowBelowbtn": { "alias": "deleteRowBelowbtn"; "required": false; }; "deleteColumnLeftbtn": { "alias": "deleteColumnLeftbtn"; "required": false; }; "deleteColumnRightbtn": { "alias": "deleteColumnRightbtn"; "required": false; }; "showTable": { "alias": "showTable"; "required": false; }; "externalHistory": { "alias": "externalHistory"; "required": false; }; "externalRedoStack": { "alias": "externalRedoStack"; "required": false; }; "useExternalHistory": { "alias": "useExternalHistory"; "required": false; }; "toolbarConfig": { "alias": "toolbarConfig"; "required": false; }; "textFormattingConfig": { "alias": "textFormattingConfig"; "required": false; }; }, { "contentChangeFromQuill": "contentChangeFromQuill"; "ApplyAIinQuill": "ApplyAIinQuill"; "onAutoBullet": "onAutoBullet"; "onHistoryChange": "onHistoryChange"; "onUndoRedo": "onUndoRedo"; }, never, never, true, never>;
 }
 export {};

package/lib/input/input.component.d.ts

@@ -24,6 +24,15 @@ export declare class InputComponent implements ControlValueAccessor, OnInit, OnC
     searchfilter: boolean;
     multipleSelect: boolean;
     options: string[];
+    /** Dropdown footer option configuration */
+    dropdownFooterOption: {
+        label: string;
+        value: string;
+        icon?: string;
+        showFooter?: boolean;
+        onClick?: () => void;
+        dataTestId?: string;
+    } | undefined;
     size: 'xs' | 'small' | 'base' | 'large' | 'header';
     types: 'simple' | 'primary' | 'success' | 'error' | 'disabled' | 'plain';
     tooltip: string;
@@ -53,6 +62,7 @@ export declare class InputComponent implements ControlValueAccessor, OnInit, OnC
         date: Date;
         datepicker?: MatDatepicker<any>;
     }>;
+    footerOptionClick: EventEmitter<string>;
     private onChange;
     onTouched: () => void;
     get isDisabled(): boolean;
@@ -69,6 +79,7 @@ export declare class InputComponent implements ControlValueAccessor, OnInit, OnC
     setDisabledState(isDisabled: boolean): void;
     onInputChange(value: string): void;
     onSelectionChange(value: string | string[]): void;
+    onFooterOptionClick(event?: Event): void;
     onSearchInputChange(event: Event): void;
     onOptionSelected(event: any): void;
     filterOptions(searchTerm: string): void;
@@ -82,5 +93,5 @@ export declare class InputComponent implements ControlValueAccessor, OnInit, OnC
     getSizeClass(): string;
     getCategoryClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "al-input", never, { "labelText": { "alias": "labelText"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "dataTestId": { "alias": "dataTestId"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "leftIcon": { "alias": "leftIcon"; "required": false; }; "rightIcon": { "alias": "rightIcon"; "required": false; }; "hasDropDown": { "alias": "hasDropDown"; "required": false; }; "dropDown": { "alias": "dropDown"; "required": false; }; "searchfilter": { "alias": "searchfilter"; "required": false; }; "multipleSelect": { "alias": "multipleSelect"; "required": false; }; "options": { "alias": "options"; "required": false; }; "size": { "alias": "size"; "required": false; }; "types": { "alias": "types"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; "matDatepicker": { "alias": "matDatepicker"; "required": false; }; "dateType": { "alias": "dateType"; "required": false; }; }, { "change": "change"; "valueChange": "valueChange"; "onColorChange": "onColorChange"; "monthSelected": "monthSelected"; "yearSelected": "yearSelected"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "al-input", never, { "labelText": { "alias": "labelText"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "dataTestId": { "alias": "dataTestId"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "leftIcon": { "alias": "leftIcon"; "required": false; }; "rightIcon": { "alias": "rightIcon"; "required": false; }; "hasDropDown": { "alias": "hasDropDown"; "required": false; }; "dropDown": { "alias": "dropDown"; "required": false; }; "searchfilter": { "alias": "searchfilter"; "required": false; }; "multipleSelect": { "alias": "multipleSelect"; "required": false; }; "options": { "alias": "options"; "required": false; }; "dropdownFooterOption": { "alias": "dropdownFooterOption"; "required": false; }; "size": { "alias": "size"; "required": false; }; "types": { "alias": "types"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; "matDatepicker": { "alias": "matDatepicker"; "required": false; }; "dateType": { "alias": "dateType"; "required": false; }; }, { "change": "change"; "valueChange": "valueChange"; "onColorChange": "onColorChange"; "monthSelected": "monthSelected"; "yearSelected": "yearSelected"; "footerOptionClick": "footerOptionClick"; }, never, never, true, never>;
 }

package/lib/newresumeheader/newresumeheader.component.d.ts

@@ -23,6 +23,20 @@ export declare class NewResumeHeaderComponent implements OnInit, OnDestroy, Afte
      * 2. Otherwise, fall back to `hiddenSection.headerSectionHidden` for backward compatibility.
      */
     get isSectionHidden(): boolean;
+    /**
+     * Returns dynamic styles based on field visibility.
+     * Used by extra sections to apply template-driven background colors.
+     *
+     * Only applies custom styles when fieldVisibility is configured.
+     * When section is hidden without fieldVisibility: no custom styles (CSS handles opacity)
+     * When field is visible: light background (#ECEDF1)
+     * When field is hidden: dark background (#4B4F62)
+     *
+     * @returns Object with CSS properties for ngStyle binding, or empty object for default CSS
+     */
+    getDynamicStyles(): {
+        [key: string]: string;
+    };
     buttonConfig: HeaderButton[];
     isLargeScreen: boolean;
     private resizeListener?;
@@ -33,6 +47,31 @@ export declare class NewResumeHeaderComponent implements OnInit, OnDestroy, Afte
     showPopOutPanel: boolean;
     popOutMessage: string;
     dataTestId?: string;
+    /**
+     * Field visibility configuration for extra sections.
+     * Controls dynamic background color and padding based on template field visibility.
+     * When not provided, defaults to visible state (light background).
+     */
+    fieldVisibility: {
+        isVisible: boolean;
+        fieldIdentifier?: string;
+    };
+    /**
+     * Index for indexed field checks (e.g., extra-section with esd1, esd2, etc.)
+     * Optional - only needed when using indexed field identifiers
+     */
+    index?: number;
+    /**
+     * Whether to show a bottom border on the header
+     * When true, adds a 1px solid border at the bottom of the header
+     */
+    showBottomBorder: boolean;
+    /**
+     * Custom border color for the bottom border
+     * When provided, overrides the default color (#D1D3DB)
+     * Accepts any valid CSS color value (hex, rgb, named color, etc.)
+     */
+    borderColor?: string;
     get shouldShowPopOut(): boolean;
     /**
      * Combined state for expand/collapse animation.
@@ -123,5 +162,5 @@ export declare class NewResumeHeaderComponent implements OnInit, OnDestroy, Afte
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NewResumeHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NewResumeHeaderComponent, "al-newresumeheader", never, { "title": { "alias": "title"; "required": false; }; "showHeaderCheckbox": { "alias": "showHeaderCheckbox"; "required": false; }; "headerCheckboxChecked": { "alias": "headerCheckboxChecked"; "required": false; }; "configEyeToggle": { "alias": "configEyeToggle"; "required": false; }; "hiddenSection": { "alias": "hiddenSection"; "required": false; }; "buttonConfig": { "alias": "buttonConfig"; "required": false; }; "isLargeScreen": { "alias": "isLargeScreen"; "required": false; }; "popOutButtonLabel": { "alias": "popOutButtonLabel"; "required": false; }; "popOutButtonIcon": { "alias": "popOutButtonIcon"; "required": false; }; "popOutButtonTooltip": { "alias": "popOutButtonTooltip"; "required": false; }; "popOutButtonTooltipPosition": { "alias": "popOutButtonTooltipPosition"; "required": false; }; "showPopOutPanel": { "alias": "showPopOutPanel"; "required": false; }; "popOutMessage": { "alias": "popOutMessage"; "required": false; }; "dataTestId": { "alias": "dataTestId"; "required": false; }; }, { "titleChange": "titleChange"; "sectionToggled": "sectionToggled"; "headerCheckboxChange": "headerCheckboxChange"; "showHideToggleSection": "showHideToggleSection"; "buttonClicked": "buttonClicked"; "popOutButtonClick": "popOutButtonClick"; }, never, ["[header-left]", "[header-center-left]", "[header-center-center]", "[header-center-right]", "[header-right]", "[header-left]", "[header-center-right]", "[header-right]", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NewResumeHeaderComponent, "al-newresumeheader", never, { "title": { "alias": "title"; "required": false; }; "showHeaderCheckbox": { "alias": "showHeaderCheckbox"; "required": false; }; "headerCheckboxChecked": { "alias": "headerCheckboxChecked"; "required": false; }; "configEyeToggle": { "alias": "configEyeToggle"; "required": false; }; "hiddenSection": { "alias": "hiddenSection"; "required": false; }; "buttonConfig": { "alias": "buttonConfig"; "required": false; }; "isLargeScreen": { "alias": "isLargeScreen"; "required": false; }; "popOutButtonLabel": { "alias": "popOutButtonLabel"; "required": false; }; "popOutButtonIcon": { "alias": "popOutButtonIcon"; "required": false; }; "popOutButtonTooltip": { "alias": "popOutButtonTooltip"; "required": false; }; "popOutButtonTooltipPosition": { "alias": "popOutButtonTooltipPosition"; "required": false; }; "showPopOutPanel": { "alias": "showPopOutPanel"; "required": false; }; "popOutMessage": { "alias": "popOutMessage"; "required": false; }; "dataTestId": { "alias": "dataTestId"; "required": false; }; "fieldVisibility": { "alias": "fieldVisibility"; "required": false; }; "index": { "alias": "index"; "required": false; }; "showBottomBorder": { "alias": "showBottomBorder"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; }, { "titleChange": "titleChange"; "sectionToggled": "sectionToggled"; "headerCheckboxChange": "headerCheckboxChange"; "showHideToggleSection": "showHideToggleSection"; "buttonClicked": "buttonClicked"; "popOutButtonClick": "popOutButtonClick"; }, never, ["[header-left]", "[header-center-left]", "[header-center-center]", "[header-center-right]", "[header-right]", "[header-left]", "[header-center-right]", "[header-right]", "*"], true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allsorter/ui-components",
-  "version": "0.0.400",
+  "version": "0.0.404",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",

package/src/lib/custom-editor/custom-editor.component.html

@@ -82,7 +82,7 @@
     <!-- Individual Text Formatting Buttons (Large Containers Only) -->
     <ng-container *ngIf="!isSmallScreen">
       <button *ngFor="let item of textFormattingConfig" class="format-button" [class.active]="getActiveState(item.type)"
-        (onClick)="handleTextFormattingClick($event, item)" [title]="item.title" type="button" [matTooltip]="item.title"
+        (click)="handleTextFormattingClick($event, item)" [title]="item.title" type="button" [matTooltip]="item.title"
         matTooltipPosition="above">
         <mat-icon *ngIf="isSvgIcon(item.icon)" [svgIcon]="item.icon"
           [class.active-icon]="getActiveState(item.type)"></mat-icon>
@@ -113,7 +113,7 @@
     <!-- History Controls (Undo/Redo) -->
     <div *ngIf="historyControls" class="history-controls">
       <!-- Undo Button -->
-      <button class="format-button" (onClick)="execCmd($event, 'undo')" title="Undo" type="button" matTooltip="Undo"
+      <button class="format-button" (click)="execCmd($event, 'undo')" title="Undo" type="button" matTooltip="Undo"
         matTooltipPosition="above">
         <span class="material-icons" [class.active-icon]="getActiveState('undo')">
           undo
@@ -121,7 +121,7 @@
       </button>
 
       <!-- Redo Button -->
-      <button class="format-button" (clionClickck)="execCmd($event, 'redo')" title="Redo" type="button" matTooltip="Redo"
+      <button class="format-button" (click)="execCmd($event, 'redo')" title="Redo" type="button" matTooltip="Redo"
         matTooltipPosition="above">
         <span class="material-icons" [class.active-icon]="getActiveState('redo')">
           redo
@@ -131,7 +131,7 @@
 
     <!-- Apply AI Button -->
     <al-button class="apply-ai-button" *ngIf="showAIButton" [labelText]="ApplyAiButton" [buttonType]="'icon-label'"
-      [color]="'gradient'" [size]="'xs'" [disabled]="isLoadingAI" (onClick)="useAITool($event)"
+      [color]="'gradient'" [size]="'xs'" [disabled]="isLoadingAI" (click)="useAITool($event)"
       [tooltip]="ApplyAiButton" [tooltipPosition]="'above'">
     </al-button>
 

package/src/lib/input/input.component.html

@@ -42,6 +42,20 @@
         [ngModel]="multipleSelect ? selectedValues : value" (selectionChange)="onSelectionChange($event.value)"
         [placeholder]="placeholder || labelText">
         <mat-option *ngFor="let option of options" [value]="option">{{ option }}</mat-option>
+
+        <!-- Footer option -->
+        <span *ngIf="dropdownFooterOption?.showFooter">
+          <hr class="dropdown-footer-separator m-0">
+          <mat-option [value]="dropdownFooterOption.value" (click)="onFooterOptionClick($event)"
+            (keydown)="onFooterOptionClick($event)"
+            [attr.data-test-id]="dropdownFooterOption.dataTestId || 'option-dropdown-footer'">
+            <span style="display: flex; align-items: center; gap: 8px;">
+              <img *ngIf="dropdownFooterOption.icon" [src]="dropdownFooterOption.icon"
+                style="width: 20px; height: 20px;" [alt]="dropdownFooterOption.label" />
+              <span>{{ dropdownFooterOption.label }}</span>
+            </span>
+          </mat-option>
+        </span>
       </mat-select>
     </ng-template>
   </ng-container>

package/src/lib/newresumeheader/newresumeheader.component.html

@@ -2,7 +2,15 @@
   [padding]="'0'" [width]="'100%'"><cdk-accordion class="example-accordion"><cdk-accordion-item
       #accordionItem="cdkAccordionItem" [expanded]="true" class="example-accordion-item">
       <div class="example-accordion-item-header" #accordionHeader
-        [ngClass]="{'header-hidden': isSectionHidden, 'header-with-bottom-margin': !showPopOutPanel}">
+        [ngClass]="{
+          'header-hidden': isSectionHidden,
+          'header-hide-sb': (fieldVisibility?.isVisible === false),
+          'header-visible-sb': (fieldVisibility?.isVisible !== false),
+          'header-with-bottom-margin': !showPopOutPanel
+        }"
+        [ngStyle]="getDynamicStyles()"
+        [style.border-bottom]="showBottomBorder ? '2px solid ' + (borderColor || '#D1D3DB') : ''"
+        [attr.data-test-id]="dataTestId">
         <!-- Normal header layout (shows when section is NOT hidden) --><ng-container
           *ngIf="!isSectionHidden; else hiddenHeaderLayout"><al-responsive-columns [stackAt]="0" [gap]="'12px'"
             [padding]="'8px 12px'">
@@ -26,6 +34,7 @@
                 <div left>
                   <div class="edit-input-group" [ngClass]="{'input-focused': isInputFocused}">
                     <div class="content_width"><span *ngIf="!isTitleEditing" class="title-text"
+                        [ngClass]="{ 'title-text-white': fieldVisibility?.isVisible === false }"
                         (click)="onTitleClick()">
                         {{ title || 'Click to edit' }}
                       </span><input *ngIf="isTitleEditing" #titleInput type="text" [(ngModel)]="editedTitle"
@@ -71,13 +80,14 @@
                 [rightWidth]="'32px'">
                 <div left>
                   <div class="edit-input-group hide-header-title">
-                    <div class="content_width"><span class="title-text header-text-turncate">
+                    <div class="content_width"><span class="title-text header-text-turncate"
+                        [ngClass]="{ 'title-text-white': fieldVisibility?.isVisible === false }">
                         {{ title }}
                       </span></div>
                   </div>
                 </div>
                 <div center>
-                  <div class="hidden-write">Section hidden</div>
+                  <div class="hidden-write-sb" [ngClass]="{ 'hidden-write-white-sb': fieldVisibility?.isVisible === false }">Section hidden</div>
                 </div>
                 <div right><ng-content select="[header-center-right]"></ng-content>
                   <!-- Eye icon - uses actual isHidden value from config, always visible --><ng-container
@@ -123,12 +133,13 @@
   <div class="mat-checkbox-margin align-center"
     [attr.data-test-id]="isHidden ? 'section-show-eye-div' : 'section-hide-eye-div'"
     style="display: flex; align-items: center; justify-content: center;"><mat-icon
-      class="delete-multiple mat-fab.mat-accent eye-icon" [svgIcon]="isHidden ? 'visibility' : 'visibility_off'"
+      class="delete-multiple mat-fab.mat-accent eye-icon" [svgIcon]="isHidden ? (fieldVisibility?.isVisible === false ? 'visibility_white' : 'visibility') : (fieldVisibility?.isVisible === false ? 'visibility_off_white' : 'visibility_off')"
       [matTooltip]="configEyeToggle?.tooltips?.[isHidden ? 'collapse' : 'expand'] || (isHidden ? 'Show Section' : 'Hide Section')"
       [matTooltipPosition]="configEyeToggle?.tooltips?.position || 'above'"
       [attr.aria-label]="configEyeToggle?.ariaLabels?.[isHidden ? 'collapsed' : 'expanded'] || (isHidden ? 'Show section' : 'Hide section')"
       (click)="onEyeIconClick(isHidden, accordionItem, configEyeToggle)"
       [attr.data-test-id]="isHidden ? 'section-show-eye-icon' : 'section-hide-eye-icon'"
-      style="cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px; color: #717793;"
+      [style.color]="fieldVisibility?.isVisible === false ? '#fff' : '#717793'"
+      style="cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px;"
       [style.opacity]="1" [style.visibility]="'visible'"></mat-icon></div>
 </ng-template>

package/src/lib/newresumeheader/newresumeheader.component.scss

@@ -474,6 +474,11 @@
   cursor: pointer;
 }
 
+/* White text for dark background */
+.title-text-white {
+  color: #fff;
+}
+
 .title-input {
   font-size: 16px;
   font-weight: 400;
@@ -588,18 +593,39 @@
   flex-shrink: 0;
 }
 
-.hidden-write {
+.hidden-write-sb {
   color: #a2a6b8;
   font-weight: 400;
   font-family: 'Roboto', sans-serif;
   white-space: nowrap;
 }
 
+/* White text for dark background */
+.hidden-write-white-sb {
+  color: #fff;
+}
+
 /* Apply reduced opacity to entire header when hidden */
 .example-accordion-item-header.header-hidden {
   opacity: 0.7;
 }
 
+/**
+ * Extra Section Header Styles
+ * These classes are used for extra sections to support dynamic background colors
+ * based on template field visibility
+ */
+
+/* Standard header style - visible section with light background */
+.example-accordion-item-header.header-visible-sb {
+  transition: background-color 0.2s ease;
+}
+
+/* Collapsed header style - hidden section or field with dark background */
+.example-accordion-item-header.header-hide-sb {
+  background-color: #4B4F62;
+}
+
 .mat-checkbox-margin {
   margin-left: 8px;
 }
@@ -640,4 +666,4 @@
 //     position: relative;
 //     z-index: 1;
 //   }
-// }
+// }