@allsorter/ui-components 0.0.402 → 0.0.406

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,16 @@ export declare class InputComponent implements ControlValueAccessor, OnInit, OnC
     searchfilter: boolean;
     multipleSelect: boolean;
     options: string[];
+    showDropdownFooter: boolean;
+    /** Dropdown footer option configuration */
+    dropdownFooterOption: {
+        label: string;
+        value: string;
+        icon?: string;
+        iconName?: string;
+        onClick?: () => void;
+        dataTestId?: string;
+    } | undefined;
     size: 'xs' | 'small' | 'base' | 'large' | 'header';
     types: 'simple' | 'primary' | 'success' | 'error' | 'disabled' | 'plain';
     tooltip: string;
@@ -53,6 +63,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 +80,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 +94,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; }; "showDropdownFooter": { "alias": "showDropdownFooter"; "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

@@ -9,6 +9,7 @@ export declare class NewResumeHeaderComponent implements OnInit, OnDestroy, Afte
     private iconRegistry;
     title: string;
     showHeaderCheckbox: boolean;
+    showEyeIcon: boolean;
     headerCheckboxChecked: boolean;
     configEyeToggle: EyeIconConfig[];
     hiddenSection: {
@@ -61,6 +62,17 @@ export declare class NewResumeHeaderComponent implements OnInit, OnDestroy, Afte
      * 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.
@@ -151,5 +163,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; }; "fieldVisibility": { "alias": "fieldVisibility"; "required": false; }; "index": { "alias": "index"; "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; }; "showEyeIcon": { "alias": "showEyeIcon"; "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.402",
+  "version": "0.0.406",
   "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,27 @@
         [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="showDropdownFooter">
+          <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'"
+            class="dropdown-footer-option">
+            <span style="display: flex; align-items: center; gap: 8px;">
+              <!-- Image icon -->
+              <img *ngIf="dropdownFooterOption.icon && !dropdownFooterOption.iconName" [src]="dropdownFooterOption.icon"
+                style="width: 20px; height: 20px;" [alt]="dropdownFooterOption.label" />
+              <!-- Material icon -->
+              <mat-icon *ngIf="dropdownFooterOption.iconName"
+                style="font-size: 20px; width: 20px; height: 20px; color: #5473E8; margin-right: 0;">
+                {{ dropdownFooterOption.iconName }}
+              </mat-icon>
+              <span style="color: #5473E8;">{{ dropdownFooterOption.label }}</span>
+            </span>
+          </mat-option>
+        </span>
       </mat-select>
     </ng-template>
   </ng-container>
@@ -83,4 +104,4 @@
 
   <mat-error *ngIf="false && helperText">{{ helperText }}</mat-error>
   <mat-hint *ngIf="helperText">{{ helperText }}</mat-hint>
-</mat-form-field>
+</mat-form-field>

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

@@ -9,6 +9,7 @@
           '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'"
@@ -60,8 +61,8 @@
                   </div>
                 </div>
                 <div right><ng-content select="[header-center-right]"></ng-content>
-                  <!-- Eye icon - uses actual isHidden value from config, always visible --><ng-container
-                    *ngIf="configEyeToggle && configEyeToggle.length > 0"><ng-container
+                  <!-- Eye icon - uses actual isHidden value from config, visibility controlled by showEyeIcon --><ng-container
+                    *ngIf="showEyeIcon && configEyeToggle && configEyeToggle.length > 0"><ng-container
                       *ngFor="let eyeConfig of configEyeToggle"><ng-container *ngIf="eyeConfig"><ng-container
                           *ngTemplateOutlet="eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }"></ng-container></ng-container></ng-container></ng-container>
                 </div>
@@ -89,8 +90,8 @@
                   <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
-                    *ngIf="configEyeToggle && configEyeToggle.length > 0"><ng-container
+                  <!-- Eye icon - uses actual isHidden value from config, visibility controlled by showEyeIcon --><ng-container
+                    *ngIf="showEyeIcon && configEyeToggle && configEyeToggle.length > 0"><ng-container
                       *ngFor="let eyeConfig of configEyeToggle"><ng-container *ngIf="eyeConfig"><ng-container
                           *ngTemplateOutlet="eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }"></ng-container></ng-container></ng-container></ng-container>
                 </div>