@allsorter/ui-components 0.0.398 → 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.398",
+  "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

@@ -62,7 +62,7 @@
 .example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left] {
   flex-shrink: 1;
   min-width: 0;
-  overflow: hidden;
+  overflow: visible;
   max-width: 100%;
   transition: flex 0.2s ease, width 0.2s ease;
 }
@@ -77,7 +77,7 @@
 
 .example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left {
   min-width: 0;
-  overflow: hidden;
+  overflow: visible;
   max-width: 100%;
   transition: flex 0.2s ease;
 }
@@ -114,9 +114,9 @@
 
 /* Animation wrapper - ensures smooth height transitions */
 // .example-accordion-item-body-wrapper {
-  //   width: 100%;
-  //   overflow: hidden;
-  // }
+//   width: 100%;
+//   overflow: hidden;
+// }
 
 .toggle-button {
   border: none;
@@ -213,19 +213,44 @@
 }
 
 /* Edit input group hover effect for title */
+// .edit-input-group {
+//   display: flex;
+//   align-items: center;
+//   gap: 4px;
+//   min-width: 0;
+//   border-radius: 4px;
+//   transition: background-color 0.2s ease, width 0.2s ease;
+//   padding: 0 8px;
+//   flex-shrink: 1;
+//   width: 100%;
+//   max-width: 100%;
+//   overflow: hidden;
+//   flex: 1 1 0;
+// }
+
+// /* Expand edit-input-group to 100% width when input is focused */
+// .edit-input-group.input-focused {
+//   width: 100%;
+//   flex: 1 1 100%;
+//   min-width: 0;
+// }
+
+// .edit-input-group:hover {
+//   background-color: #D1D3DB;
+// }
 .edit-input-group {
   display: flex;
   align-items: center;
   gap: 4px;
   min-width: 0;
   border-radius: 4px;
-  transition: background-color 0.2s ease, width 0.2s ease;
+  transition: width 0.2s ease, background-color 0.2s ease;
   padding: 0 8px;
-  flex-shrink: 1;
+  margin: 0 -8px;
   width: 100%;
-  max-width: 100%;
-  overflow: hidden;
+  overflow: visible;
   flex: 1 1 0;
+  position: relative;
 }
 
 /* Expand edit-input-group to 100% width when input is focused */
@@ -235,6 +260,7 @@
   min-width: 0;
 }
 
+/* Hover effect - direct background */
 .edit-input-group:hover {
   background-color: #D1D3DB;
 }
@@ -448,6 +474,11 @@
   cursor: pointer;
 }
 
+/* White text for dark background */
+.title-text-white {
+  color: #fff;
+}
+
 .title-input {
   font-size: 16px;
   font-weight: 400;
@@ -562,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;
 }
@@ -584,34 +636,34 @@
 
 /* Smooth hover effect on eye icon container - circular background without jumping */
 // .mat-checkbox-margin {
-  //   position: relative;
-  //   display: inline-flex;
-  //   align-items: center;
-  //   justify-content: center;
-
-  //   &::before {
-  //     content: '';
-  //     position: absolute;
-  //     top: 50%;
-  //     left: 50%;
-  //     transform: translate(-50%, -50%);
-  //     width: 28px;
-  //     height: 28px;
-  //     border-radius: 4px;
-  //     background-color: transparent;
-  //     transition: background-color 0.2s ease;
-  //     z-index: 0;
-  //     pointer-events: none;
-  //   }
-
-  //   &:hover::before {
-  //     background-color: rgba(211, 211, 211, 0.9) !important;
-
-  //   }
-
-  //   /* Ensure icon stays above the background */
-  //   mat-icon {
-  //     position: relative;
-  //     z-index: 1;
-  //   }
-  // }
+//   position: relative;
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+
+//   &::before {
+//     content: '';
+//     position: absolute;
+//     top: 50%;
+//     left: 50%;
+//     transform: translate(-50%, -50%);
+//     width: 28px;
+//     height: 28px;
+//     border-radius: 4px;
+//     background-color: transparent;
+//     transition: background-color 0.2s ease;
+//     z-index: 0;
+//     pointer-events: none;
+//   }
+
+//   &:hover::before {
+//     background-color: rgba(211, 211, 211, 0.9) !important;
+
+//   }
+
+//   /* Ensure icon stays above the background */
+//   mat-icon {
+//     position: relative;
+//     z-index: 1;
+//   }
+// }

package/src/lib/responsive-columns/responsive-columns.component.scss

@@ -5,7 +5,7 @@
 .container {
   display: grid;
   grid-template-columns: var(--template-columns, var(--left-width, auto) 1fr var(--right-width, auto));
-  gap: var(--gap, 12px);
+  gap: var(--gap, 8px);
   padding: var(--padding, 0);
 }