@allsorter/ui-components 0.0.400 → 0.0.402

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,20 @@ 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;
     get shouldShowPopOut(): boolean;
     /**
      * Combined state for expand/collapse animation.
@@ -123,5 +151,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; }; }, { "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.402",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",

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

@@ -2,7 +2,14 @@
   [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()"
+        [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 +33,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 +79,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 +132,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;
 //   }
-// }
+// }