@allsorter/ui-components 0.0.406 → 0.0.408

package/fesm2022/allsorter-ui-components.mjs

@@ -29,6 +29,7 @@ import * as i5 from '@angular/cdk/accordion';
 import { CdkAccordionModule } from '@angular/cdk/accordion';
 import * as i2$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { trigger, transition, style, animate } from '@angular/animations';
 import * as i2$3 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i2$4 from '@angular/material/button-toggle';
@@ -1668,7 +1669,63 @@ function getIconCandidateSection(iconKey) {
     return `data:image/svg+xml;charset=utf-8,${encodedSvg}`;
 }
 
-// import { expandCollapse } from '../utils/animations';
+/**
+ * Expand and collapse animation for accordion content
+ * Animates height from 0 to auto with overflow handling
+ * Similar to jQuery animate({ height: auto }) behavior
+ */
+const expandCollapse = trigger('expandCollapse', [
+    transition(':enter', [
+        style({ height: '0', opacity: 0, overflow: 'hidden' }),
+        animate('500ms ease-out', style({ height: '*', opacity: 1 }))
+    ]),
+    transition(':leave', [
+        style({ height: '*', opacity: 1, overflow: 'hidden' }),
+        animate('600ms ease-in', style({ height: '0', opacity: 0 }))
+    ])
+]);
+/**
+ * Fade animation for showing/hiding content with opacity changes
+ * Used when toggling visibility via eye icon
+ */
+const fadeInOut = trigger('fadeInOut', [
+    transition(':enter', [
+        style({ height: '0', opacity: 0, overflow: 'hidden' }),
+        animate('500ms ease-in', style({ height: '*', opacity: 1 }))
+    ]),
+    transition(':leave', [
+        style({ height: '*', opacity: 1, overflow: 'hidden' }),
+        animate('600ms ease-out', style({ height: '0', opacity: 0 }))
+    ])
+]);
+/**
+ * Simple slide down animation (height only, no opacity)
+ * Alternative animation for simpler expand/collapse
+ */
+const slideDown = trigger('slideDown', [
+    transition(':enter', [
+        style({ height: '0', overflow: 'hidden' }),
+        animate('500ms ease-out', style({ height: '*' }))
+    ]),
+    transition(':leave', [
+        style({ height: '*', overflow: 'hidden' }),
+        animate('600ms ease-in', style({ height: '0' }))
+    ])
+]);
+/**
+ * Fade only animation (opacity only, no height changes)
+ * Used for subtle show/hide effects
+ */
+const fadeOnly = trigger('fadeOnly', [
+    transition(':enter', [
+        style({ opacity: 0 }),
+        animate('300ms ease-in', style({ opacity: 1 }))
+    ]),
+    transition(':leave', [
+        animate('300ms ease-out', style({ opacity: 0 }))
+    ])
+]);
+
 // Embedded SVG icons - using the same SVG provided by user for visibility_off
 // For visibility (open eye), we'll use a similar eye icon
 const VISIBILITY_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="22" height="15" viewBox="0 0 22 15" fill="none">
@@ -1861,7 +1918,9 @@ class NewResumeHeaderComponent {
     //   this.cdr.detectChanges();
     // }
     toggleAccordion(accordionItem) {
+        // Toggle the cdk-accordion-item
         accordionItem.toggle();
+        this._isAccordionExpanded = accordionItem.expanded;
         this.sectionToggled.emit(accordionItem.expanded);
     }
     /**
@@ -2198,7 +2257,7 @@ class NewResumeHeaderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderComponent, deps: [{ token: i2.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: i1.MatIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewResumeHeaderComponent, isStandalone: true, selector: "al-newresumeheader", inputs: { title: "title", showHeaderCheckbox: "showHeaderCheckbox", showEyeIcon: "showEyeIcon", headerCheckboxChecked: "headerCheckboxChecked", configEyeToggle: "configEyeToggle", hiddenSection: "hiddenSection", buttonConfig: "buttonConfig", isLargeScreen: "isLargeScreen", popOutButtonLabel: "popOutButtonLabel", popOutButtonIcon: "popOutButtonIcon", popOutButtonTooltip: "popOutButtonTooltip", popOutButtonTooltipPosition: "popOutButtonTooltipPosition", showPopOutPanel: "showPopOutPanel", popOutMessage: "popOutMessage", dataTestId: "dataTestId", fieldVisibility: "fieldVisibility", index: "index", showBottomBorder: "showBottomBorder", borderColor: "borderColor" }, outputs: { titleChange: "titleChange", sectionToggled: "sectionToggled", headerCheckboxChange: "headerCheckboxChange", showHideToggleSection: "showHideToggleSection", buttonClicked: "buttonClicked", popOutButtonClick: "popOutButtonClick" }, viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }, { propertyName: "accordionHeader", first: true, predicate: ["accordionHeader"], descendants: true, read: ElementRef }, { propertyName: "generalContainer", first: true, predicate: ["generalContainer"], descendants: true, read: ElementRef }, { propertyName: "popOutPanel", first: true, predicate: ["popOutPanel"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<al-general-container #generalContainer [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\"\n  [padding]=\"'0'\" [width]=\"'100%'\"><cdk-accordion class=\"example-accordion\"><cdk-accordion-item\n      #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n      <div class=\"example-accordion-item-header\" #accordionHeader\n        [ngClass]=\"{\n          'header-hidden': isSectionHidden,\n          'header-hide-sb': (fieldVisibility?.isVisible === false),\n          'header-visible-sb': (fieldVisibility?.isVisible !== false),\n          'header-with-bottom-margin': !showPopOutPanel\n        }\"\n        [ngStyle]=\"getDynamicStyles()\"\n        [style.border-bottom]=\"showBottomBorder ? '2px solid ' + (borderColor || '#D1D3DB') : ''\"\n        [attr.data-test-id]=\"dataTestId\">\n        <!-- Normal header layout (shows when section is NOT hidden) --><ng-container\n          *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\"><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\"\n            [padding]=\"'8px 12px'\">\n            <div left>\n              <button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center\"\n                [attr.aria-expanded]=\"accordionItem.expanded\"\n                [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\">\n                <!-- When section is OPEN (expanded === true), show an UP chevron.\n                     When section is CLOSED, show a DOWN chevron. -->\n                <span class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">\n                  expand_less\n                </span>\n                <span class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">\n                  expand_more\n                </span>\n              </button>\n              <ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n                [rightWidth]=\"'32px'\" [ngClass]=\"{'input-focused': isInputFocused}\">\n                <div left>\n                  <div class=\"edit-input-group\" [ngClass]=\"{'input-focused': isInputFocused}\">\n                    <div class=\"content_width\"><span *ngIf=\"!isTitleEditing\" class=\"title-text\"\n                        [ngClass]=\"{ 'title-text-white': fieldVisibility?.isVisible === false }\"\n                        (click)=\"onTitleClick()\">\n                        {{ title || 'Click to edit' }}\n                      </span><input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n                        (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n                        class=\"title-input onfocus-input-text\" /><ng-content select=\"[header-center-left]\"></ng-content>\n                    </div><mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\"\n                      matTooltipPosition=\"above\" (click)=\"onTitleClick()\"></mat-icon>\n                  </div>\n                </div>\n                <div center><ng-content select=\"[header-center-center]\"></ng-content>\n                  <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) --><ng-container\n                    *ngIf=\"isLargeScreen\"><ng-container\n                      *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\"></ng-container></ng-container>\n                  <!-- Menu trigger and slide-out panel for small screens only -->\n                  <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n                    <div class=\"menu-trigger\" (click)=\"toggleMenu()\"><al-button buttonType=\"icon-label\" iconOnly\n                        size=\"header\" category=\"grey\" leftIcon=\"more_vert\" aria-label=\"More options\"\n                        [dataTestId]=\"'resume-header-more-menu'\"></al-button></div>\n                    <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n                      <div class=\"fit-panel\"><ng-container\n                          *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\"></ng-container>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div right><ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, visibility controlled by showEyeIcon --><ng-container\n                    *ngIf=\"showEyeIcon && configEyeToggle && configEyeToggle.length > 0\"><ng-container\n                      *ngFor=\"let eyeConfig of configEyeToggle\"><ng-container *ngIf=\"eyeConfig\"><ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container></ng-container></ng-container></ng-container>\n                </div>\n              </al-responsive-columns></div>\n            <div right><al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n                (change)=\"onHeaderCheckboxChange($event)\"></al-checkbox><ng-content\n                select=\"[header-right]\"></ng-content></div>\n          </al-responsive-columns></ng-container>\n        <!-- Hidden header layout (shows when section IS hidden) --><ng-template\n          #hiddenHeaderLayout><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n            <div left>\n              <!-- Toggle button hidden when section is hidden --><ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n                [rightWidth]=\"'32px'\">\n                <div left>\n                  <div class=\"edit-input-group hide-header-title\">\n                    <div class=\"content_width\"><span class=\"title-text header-text-turncate\"\n                        [ngClass]=\"{ 'title-text-white': fieldVisibility?.isVisible === false }\">\n                        {{ title }}\n                      </span></div>\n                  </div>\n                </div>\n                <div center>\n                  <div class=\"hidden-write-sb\" [ngClass]=\"{ 'hidden-write-white-sb': fieldVisibility?.isVisible === false }\">Section hidden</div>\n                </div>\n                <div right><ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, visibility controlled by showEyeIcon --><ng-container\n                    *ngIf=\"showEyeIcon && configEyeToggle && configEyeToggle.length > 0\"><ng-container\n                      *ngFor=\"let eyeConfig of configEyeToggle\"><ng-container *ngIf=\"eyeConfig\"><ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container></ng-container></ng-container></ng-container>\n                </div>\n              </al-responsive-columns></div>\n            <div right>\n              <!-- Checkbox hidden when section is hidden --><ng-content select=\"[header-right]\"></ng-content>\n            </div>\n          </al-responsive-columns></ng-template>\n      </div>\n      <!-- Accordion body with expand/collapse animation -->\n      <div class=\"example-accordion-item-body-wrapper\">\n        <div class=\"example-accordion-item-body\" *ngIf=\"accordionItem.expanded && !isSectionHidden\">\n          <!-- Pop-out Panel -->\n          <div *ngIf=\"shouldShowPopOut\" #popOutPanel class=\"pop-out-panel\"\n            [ngClass]=\"{'pop-out-narrow': isPopOutNarrow}\">\n            <div class=\"pop-out-content\">\n              <al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\" [buttonType]=\"'icon-label'\"\n                [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\"\n                [dataTestId]=\"'pop-out-run-deep-extraction'\" [title]=\"popOutButtonLabel\"></al-button>\n              <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n              <button type=\"button\" class=\"pop-out-close\" (click)=\"dismissPopOut()\"\n                aria-label=\"Close pop-out panel\"><span class=\"material-icons-outlined\">close</span></button>\n            </div>\n          </div>\n          <!-- Single body content slot - child component will handle 3-column layout internally -->\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </cdk-accordion-item></cdk-accordion></al-general-container><ng-template #headerButtonsTemplate\n  let-buttons=\"buttons\" let-handleClick=\"handleClick\"><ng-container *ngFor=\"let btn of buttonConfig\"><al-button\n      *ngIf=\"!btn.displayCondition || btn.displayCondition()\" [color]=\"btn.color\" [outline]=\"btn.outline\"\n      [size]=\"btn.size\" [iconOutlined]=\"btn.iconOutlined\" [labelText]=\"btn.labelText\"\n      [leftIcon]=\"getButtonIcons(btn).leftIcon\" [rightIcon]=\"getButtonIcons(btn).rightIcon\"\n      [dataTestId]=\"btn.dataTestId\" [hasDropDown]=\"btn.hasDropDown\" [dropdownItems]=\"btn.dropdownItems\"\n      [buttonType]=\"'icon-label'\" [iconOnly]=\"!btn.labelText\" [tooltip]=\"btn.tooltip\"\n      [tooltipPosition]=\"btn.tooltipPosition || 'above'\" (onClick)=\"onButtonClick(btn, $event)\"\n      (optionSelect)=\"onDropdownSelect(btn, $event)\"></al-button></ng-container></ng-template><ng-template\n  #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\" let-configEyeToggle=\"configEyeToggle\">\n  <div class=\"mat-checkbox-margin align-center\"\n    [attr.data-test-id]=\"isHidden ? 'section-show-eye-div' : 'section-hide-eye-div'\"\n    style=\"display: flex; align-items: center; justify-content: center;\"><mat-icon\n      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')\"\n      [matTooltip]=\"configEyeToggle?.tooltips?.[isHidden ? 'collapse' : 'expand'] || (isHidden ? 'Show Section' : 'Hide Section')\"\n      [matTooltipPosition]=\"configEyeToggle?.tooltips?.position || 'above'\"\n      [attr.aria-label]=\"configEyeToggle?.ariaLabels?.[isHidden ? 'collapsed' : 'expanded'] || (isHidden ? 'Show section' : 'Hide section')\"\n      (click)=\"onEyeIconClick(isHidden, accordionItem, configEyeToggle)\"\n      [attr.data-test-id]=\"isHidden ? 'section-show-eye-icon' : 'section-hide-eye-icon'\"\n      [style.color]=\"fieldVisibility?.isVisible === false ? '#fff' : '#717793'\"\n      style=\"cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px;\"\n      [style.opacity]=\"1\" [style.visibility]=\"'visible'\"></mat-icon></div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\";:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.example-accordion-item-header{display:flex;align-items:center;cursor:pointer;width:100%}.example-accordion-item-header al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns ::ng-deep .container{align-items:center;display:grid}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .container{align-items:center;display:grid;min-width:0;transition:grid-template-columns .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .container{grid-template-columns:1fr auto 32px!important}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column{display:flex;align-items:center;min-width:0}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{display:flex;align-items:center;width:100%;min-width:0}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left]{flex-shrink:1;min-width:0;overflow:visible;max-width:100%;transition:flex .2s ease,width .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused div[left],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left] .edit-input-group.input-focused{width:100%;min-width:0;max-width:none}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left{min-width:0;overflow:visible;max-width:100%;transition:flex .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .column.left{min-width:0;max-width:none;width:100%}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center]{justify-content:flex-end;gap:8px;flex-shrink:0;flex-wrap:nowrap;display:flex;align-items:center}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{flex-shrink:0}.example-accordion-item-body{width:100%}.example-accordion-item-body al-responsive-columns{width:100%;display:block}.toggle-button{border:none;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.toggle-button .material-icons-outlined{color:#717793}.example-accordion-item-header al-responsive-columns div[left]{display:flex;align-items:center;justify-content:center}.example-accordion-item-header al-responsive-columns div[right]{display:flex;align-items:center;justify-content:center;flex-shrink:0}.align-center{display:flex;align-items:center}.example-accordion-item-header{display:flex;justify-content:space-between;align-items:center;background:#ecedf1;gap:8px;border-bottom:2px solid #37c1ce;border-radius:8px;box-sizing:border-box}.example-accordion-item-header.header-with-bottom-margin{margin-bottom:16px}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;color:#717793;width:24px;height:24px;cursor:pointer;transition:color .2s ease;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 20}.material-symbols-outlined:hover{color:#4b4f62;background-color:#bbc7f6;width:24px;height:24px;border-radius:4px}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{display:flex;align-items:center;justify-content:center}.edit-input-group{display:flex;align-items:center;gap:4px;min-width:0;border-radius:4px;transition:width .2s ease,background-color .2s ease;padding:0 8px;margin:0 -8px;width:100%;overflow:visible;flex:1 1 0;position:relative}.edit-input-group.input-focused{width:100%;flex:1 1 100%;min-width:0}.edit-input-group:hover{background-color:#d1d3db}.edit-input-group:has(input:focus):hover,.edit-input-group:focus-within:hover{background-color:transparent}.edit-input-group:has(input:focus) mat-icon.edit-icon,.edit-input-group:focus-within mat-icon.edit-icon{opacity:0;visibility:hidden}.hover-menu-container{position:relative;display:inline-block}.menu-trigger{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:pointer;z-index:10}.slide-out-panel{position:absolute;bottom:100%;right:0;background-color:#fff;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap;align-items:center}.slide-out-panel.visible{opacity:1;visibility:visible}.fit-panel{display:inline-flex;width:fit-content;background:none;gap:8px;align-items:center}.example-accordion-item-body .pop-out-panel{background-color:#717793;border-radius:12px;width:calc(100% - 30px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}.pop-out-content al-button{flex-shrink:0}.pop-out-content al-button .button-label{display:inline-block!important;visibility:visible!important;opacity:1!important}.pop-out-message{flex:1;color:#fff;font-size:12px;line-height:1.5;font-family:Roboto,sans-serif;font-weight:400;min-width:0;letter-spacing:.06px;margin:0}.pop-out-panel.pop-out-narrow .pop-out-content{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:8px}.pop-out-panel.pop-out-narrow .pop-out-content al-button{grid-column:1;grid-row:1;justify-self:start}.pop-out-panel.pop-out-narrow .pop-out-content .pop-out-close{grid-column:1;grid-row:1;justify-self:end}.pop-out-panel.pop-out-narrow .pop-out-message{grid-column:1;grid-row:2;flex:none;width:100%}.pop-out-message ::ng-deep a,.pop-out-link{color:var(--Base-Blue, #5473E8);font-family:Roboto;font-size:12px;font-style:normal;font-weight:400;line-height:136%;letter-spacing:.06px;cursor:pointer}.pop-out-message ::ng-deep a:hover,.pop-out-link:hover{color:#6581ea}.pop-out-close{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:#6b7280;transition:color .2s ease}.pop-out-close:hover{color:#374151}.pop-out-close .material-icons-outlined{font-size:20px;width:20px;height:20px;color:#fff}.edit-input-group .content_width{flex:1 1 0;min-width:0;max-width:450px;overflow:hidden;display:flex;align-items:center;transition:flex .2s ease,width .2s ease}.edit-input-group.input-focused .content_width{flex:1 1 100%;width:100%;min-width:0}.title-text{font-size:16px;font-weight:400;color:#383b4a;font-family:Roboto,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:4px;flex-shrink:1;min-width:0;max-width:100%;cursor:pointer}.title-text-white{color:#fff}.title-input{font-size:16px;font-weight:400;font-family:Roboto,sans-serif;border:none;outline:none;padding:0;margin:0 4px 0 0;flex-shrink:1;min-width:100px;max-width:100%;box-sizing:border-box;width:100%;transition:width .2s ease}.title-input:focus{width:100%;min-width:100%;flex:1 1 100%}.title-input.onfocus-input-text{height:28px;background:#f4f8fc;border-radius:5px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.title-input.focusout-input-text{color:#383b4a;background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.title-input:focus{outline:none;border:none;box-shadow:none}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left{min-width:0;overflow:visible}.edit-input-group mat-icon.edit-icon{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;cursor:pointer;border-radius:4px;flex-shrink:0;min-width:16px;width:16px;height:16px;font-size:16px;display:inline-flex;align-items:center;justify-content:center;color:#717793}.edit-input-group:hover mat-icon.edit-icon{opacity:1;visibility:visible}.hide-header-title mat-icon.edit-icon{display:none}.hide-header-title .edit-input-group{cursor:default;opacity:.7}.hide-header-title .edit-input-group:hover{background-color:transparent}.hide-header-title .title-text{cursor:default;pointer-events:none}.header-text-turncate{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:#a2a6b8;line-height:28px;font-family:Roboto,sans-serif;cursor:default}.hidden-section-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.hidden-write-sb{color:#a2a6b8;font-weight:400;font-family:Roboto,sans-serif;white-space:nowrap}.hidden-write-white-sb{color:#fff}.example-accordion-item-header.header-hidden{opacity:.7}.example-accordion-item-header.header-visible-sb{transition:background-color .2s ease}.example-accordion-item-header.header-hide-sb{background-color:#4b4f62}.mat-checkbox-margin{margin-left:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i5.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { kind: "directive", type: i5.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: GeneralContainerComponent, selector: "al-general-container", inputs: ["backgroundColor", "padding", "width", "height", "overflowX", "overflowY", "borderPosition", "borderColor", "borderRadius", "boxShadow", "customBoxShadow"] }, { kind: "component", type: ResponsiveColumnsComponent, selector: "al-responsive-columns", inputs: ["dataTestId", "gap", "padding", "leftWidth", "rightWidth", "stackAt"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: CheckboxComponent, selector: "al-checkbox", inputs: ["checked", "disabled", "labelPosition", "name", "required", "value", "color", "labelText", "helperText", "showLabels", "showHelperIcon", "helperIconTooltip", "dataTestId", "tooltip", "tooltipPosition"], outputs: ["change", "indeterminateChange", "focus", "blur", "helperIconClick"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewResumeHeaderComponent, isStandalone: true, selector: "al-newresumeheader", inputs: { title: "title", showHeaderCheckbox: "showHeaderCheckbox", showEyeIcon: "showEyeIcon", headerCheckboxChecked: "headerCheckboxChecked", configEyeToggle: "configEyeToggle", hiddenSection: "hiddenSection", buttonConfig: "buttonConfig", isLargeScreen: "isLargeScreen", popOutButtonLabel: "popOutButtonLabel", popOutButtonIcon: "popOutButtonIcon", popOutButtonTooltip: "popOutButtonTooltip", popOutButtonTooltipPosition: "popOutButtonTooltipPosition", showPopOutPanel: "showPopOutPanel", popOutMessage: "popOutMessage", dataTestId: "dataTestId", fieldVisibility: "fieldVisibility", index: "index", showBottomBorder: "showBottomBorder", borderColor: "borderColor" }, outputs: { titleChange: "titleChange", sectionToggled: "sectionToggled", headerCheckboxChange: "headerCheckboxChange", showHideToggleSection: "showHideToggleSection", buttonClicked: "buttonClicked", popOutButtonClick: "popOutButtonClick" }, viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }, { propertyName: "accordionHeader", first: true, predicate: ["accordionHeader"], descendants: true, read: ElementRef }, { propertyName: "generalContainer", first: true, predicate: ["generalContainer"], descendants: true, read: ElementRef }, { propertyName: "popOutPanel", first: true, predicate: ["popOutPanel"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<al-general-container #generalContainer [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\"\n  [padding]=\"'0'\" [width]=\"'100%'\"><cdk-accordion class=\"example-accordion\"><cdk-accordion-item\n      #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n      <div class=\"example-accordion-item-header\" #accordionHeader\n        [ngClass]=\"{\n          'header-hidden': isSectionHidden,\n          'header-hide-sb': (fieldVisibility?.isVisible === false),\n          'header-visible-sb': (fieldVisibility?.isVisible !== false),\n          'header-with-bottom-margin': !showPopOutPanel\n        }\"\n        [ngStyle]=\"getDynamicStyles()\"\n        [style.border-bottom]=\"showBottomBorder ? '2px solid ' + (borderColor || '#D1D3DB') : ''\"\n        [attr.data-test-id]=\"dataTestId\">\n        <!-- Normal header layout (shows when section is NOT hidden) --><ng-container\n          *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\"><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\"\n            [padding]=\"'8px 12px'\">\n            <div left>\n              <button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center\"\n                [attr.aria-expanded]=\"accordionItem.expanded\"\n                [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\">\n                <!-- When section is OPEN (expanded === true), show an UP chevron.\n                     When section is CLOSED, show a DOWN chevron. -->\n                <span class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">\n                  expand_less\n                </span>\n                <span class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">\n                  expand_more\n                </span>\n              </button>\n              <ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n                [rightWidth]=\"'32px'\" [ngClass]=\"{'input-focused': isInputFocused}\">\n                <div left>\n                  <div class=\"edit-input-group\" [ngClass]=\"{'input-focused': isInputFocused}\">\n                    <div class=\"content_width\"><span *ngIf=\"!isTitleEditing\" class=\"title-text\"\n                        [ngClass]=\"{ 'title-text-white': fieldVisibility?.isVisible === false }\"\n                        (click)=\"onTitleClick()\">\n                        {{ title || 'Click to edit' }}\n                      </span><input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n                        (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n                        class=\"title-input onfocus-input-text\" /><ng-content select=\"[header-center-left]\"></ng-content>\n                    </div><mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\"\n                      matTooltipPosition=\"above\" (click)=\"onTitleClick()\"></mat-icon>\n                  </div>\n                </div>\n                <div center><ng-content select=\"[header-center-center]\"></ng-content>\n                  <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) --><ng-container\n                    *ngIf=\"isLargeScreen\"><ng-container\n                      *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\"></ng-container></ng-container>\n                  <!-- Menu trigger and slide-out panel for small screens only -->\n                  <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n                    <div class=\"menu-trigger\" (click)=\"toggleMenu()\"><al-button buttonType=\"icon-label\" iconOnly\n                        size=\"header\" category=\"grey\" leftIcon=\"more_vert\" aria-label=\"More options\"\n                        [dataTestId]=\"'resume-header-more-menu'\"></al-button></div>\n                    <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n                      <div class=\"fit-panel\"><ng-container\n                          *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\"></ng-container>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div right><ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, visibility controlled by showEyeIcon --><ng-container\n                    *ngIf=\"showEyeIcon && configEyeToggle && configEyeToggle.length > 0\"><ng-container\n                      *ngFor=\"let eyeConfig of configEyeToggle\"><ng-container *ngIf=\"eyeConfig\"><ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container></ng-container></ng-container></ng-container>\n                </div>\n              </al-responsive-columns></div>\n            <div right><al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n                (change)=\"onHeaderCheckboxChange($event)\"></al-checkbox><ng-content\n                select=\"[header-right]\"></ng-content></div>\n          </al-responsive-columns></ng-container>\n        <!-- Hidden header layout (shows when section IS hidden) --><ng-template\n          #hiddenHeaderLayout><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n            <div left>\n              <!-- Toggle button hidden when section is hidden --><ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n                [rightWidth]=\"'32px'\">\n                <div left>\n                  <div class=\"edit-input-group hide-header-title\">\n                    <div class=\"content_width\"><span class=\"title-text header-text-turncate\"\n                        [ngClass]=\"{ 'title-text-white': fieldVisibility?.isVisible === false }\">\n                        {{ title }}\n                      </span></div>\n                  </div>\n                </div>\n                <div center>\n                  <div class=\"hidden-write-sb\" [ngClass]=\"{ 'hidden-write-white-sb': fieldVisibility?.isVisible === false }\">Section hidden</div>\n                </div>\n                <div right><ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, visibility controlled by showEyeIcon --><ng-container\n                    *ngIf=\"showEyeIcon && configEyeToggle && configEyeToggle.length > 0\"><ng-container\n                      *ngFor=\"let eyeConfig of configEyeToggle\"><ng-container *ngIf=\"eyeConfig\"><ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container></ng-container></ng-container></ng-container>\n                </div>\n              </al-responsive-columns></div>\n            <div right>\n              <!-- Checkbox hidden when section is hidden --><ng-content select=\"[header-right]\"></ng-content>\n            </div>\n          </al-responsive-columns></ng-template>\n      </div>\n      <!-- Accordion body with expand/collapse animation -->\n      <div class=\"example-accordion-item-body-wrapper\">\n        <div class=\"example-accordion-item-body\"\n             *ngIf=\"accordionItem.expanded && !isSectionHidden\"\n             [@expandCollapse]>\n          <!-- Pop-out Panel -->\n          <div *ngIf=\"shouldShowPopOut\" #popOutPanel class=\"pop-out-panel\"\n            [ngClass]=\"{'pop-out-narrow': isPopOutNarrow}\">\n            <div class=\"pop-out-content\">\n              <al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\" [buttonType]=\"'icon-label'\"\n                [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\"\n                [dataTestId]=\"'pop-out-run-deep-extraction'\" [title]=\"popOutButtonLabel\"></al-button>\n              <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n              <button type=\"button\" class=\"pop-out-close\" (click)=\"dismissPopOut()\"\n                aria-label=\"Close pop-out panel\"><span class=\"material-icons-outlined\">close</span></button>\n            </div>\n          </div>\n          <!-- Single body content slot - child component will handle 3-column layout internally -->\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </cdk-accordion-item></cdk-accordion></al-general-container><ng-template #headerButtonsTemplate\n  let-buttons=\"buttons\" let-handleClick=\"handleClick\"><ng-container *ngFor=\"let btn of buttonConfig\"><al-button\n      *ngIf=\"!btn.displayCondition || btn.displayCondition()\" [color]=\"btn.color\" [outline]=\"btn.outline\"\n      [size]=\"btn.size\" [iconOutlined]=\"btn.iconOutlined\" [labelText]=\"btn.labelText\"\n      [leftIcon]=\"getButtonIcons(btn).leftIcon\" [rightIcon]=\"getButtonIcons(btn).rightIcon\"\n      [dataTestId]=\"btn.dataTestId\" [hasDropDown]=\"btn.hasDropDown\" [dropdownItems]=\"btn.dropdownItems\"\n      [buttonType]=\"'icon-label'\" [iconOnly]=\"!btn.labelText\" [tooltip]=\"btn.tooltip\"\n      [tooltipPosition]=\"btn.tooltipPosition || 'above'\" (onClick)=\"onButtonClick(btn, $event)\"\n      (optionSelect)=\"onDropdownSelect(btn, $event)\"></al-button></ng-container></ng-template><ng-template\n  #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\" let-configEyeToggle=\"configEyeToggle\">\n  <div class=\"mat-checkbox-margin align-center\"\n    [attr.data-test-id]=\"isHidden ? 'section-show-eye-div' : 'section-hide-eye-div'\"\n    style=\"display: flex; align-items: center; justify-content: center;\"><mat-icon\n      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')\"\n      [matTooltip]=\"configEyeToggle?.tooltips?.[isHidden ? 'collapse' : 'expand'] || (isHidden ? 'Show Section' : 'Hide Section')\"\n      [matTooltipPosition]=\"configEyeToggle?.tooltips?.position || 'above'\"\n      [attr.aria-label]=\"configEyeToggle?.ariaLabels?.[isHidden ? 'collapsed' : 'expanded'] || (isHidden ? 'Show section' : 'Hide section')\"\n      (click)=\"onEyeIconClick(isHidden, accordionItem, configEyeToggle)\"\n      [attr.data-test-id]=\"isHidden ? 'section-show-eye-icon' : 'section-hide-eye-icon'\"\n      [style.color]=\"fieldVisibility?.isVisible === false ? '#fff' : '#717793'\"\n      style=\"cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px;\"\n      [style.opacity]=\"1\" [style.visibility]=\"'visible'\"></mat-icon></div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\";:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.example-accordion-item-header{display:flex;align-items:center;cursor:pointer;width:100%}.example-accordion-item-header al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns ::ng-deep .container{align-items:center;display:grid}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .container{align-items:center;display:grid;min-width:0;transition:grid-template-columns .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .container{grid-template-columns:1fr auto 32px!important}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column{display:flex;align-items:center;min-width:0}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{display:flex;align-items:center;width:100%;min-width:0}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left]{flex-shrink:1;min-width:0;overflow:visible;max-width:100%;transition:flex .2s ease,width .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused div[left],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left] .edit-input-group.input-focused{width:100%;min-width:0;max-width:none}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left{min-width:0;overflow:visible;max-width:100%;transition:flex .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .column.left{min-width:0;max-width:none;width:100%}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center]{justify-content:flex-end;gap:8px;flex-shrink:0;flex-wrap:nowrap;display:flex;align-items:center}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{flex-shrink:0}.example-accordion-item-body{width:100%}.example-accordion-item-body al-responsive-columns{width:100%;display:block}.toggle-button{border:none;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.toggle-button .material-icons-outlined{color:#717793}.example-accordion-item-header al-responsive-columns div[left]{display:flex;align-items:center;justify-content:center}.example-accordion-item-header al-responsive-columns div[right]{display:flex;align-items:center;justify-content:center;flex-shrink:0}.align-center{display:flex;align-items:center}.example-accordion-item-header{display:flex;justify-content:space-between;align-items:center;background:#ecedf1;gap:8px;border-bottom:2px solid #37c1ce;border-radius:8px;box-sizing:border-box}.example-accordion-item-header.header-with-bottom-margin{margin-bottom:16px}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;color:#717793;width:24px;height:24px;cursor:pointer;transition:color .2s ease;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 20}.material-symbols-outlined:hover{color:#4b4f62;background-color:#bbc7f6;width:24px;height:24px;border-radius:4px}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{display:flex;align-items:center;justify-content:center}.edit-input-group{display:flex;align-items:center;gap:4px;min-width:0;border-radius:4px;transition:width .2s ease,background-color .2s ease;padding:0 8px;margin:0 -8px;width:100%;overflow:visible;flex:1 1 0;position:relative}.edit-input-group.input-focused{width:100%;flex:1 1 100%;min-width:0}.edit-input-group:hover{background-color:#d1d3db}.edit-input-group:has(input:focus):hover,.edit-input-group:focus-within:hover{background-color:transparent}.edit-input-group:has(input:focus) mat-icon.edit-icon,.edit-input-group:focus-within mat-icon.edit-icon{opacity:0;visibility:hidden}.hover-menu-container{position:relative;display:inline-block}.menu-trigger{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:pointer;z-index:10}.slide-out-panel{position:absolute;bottom:100%;right:0;background-color:#fff;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap;align-items:center}.slide-out-panel.visible{opacity:1;visibility:visible}.fit-panel{display:inline-flex;width:fit-content;background:none;gap:8px;align-items:center}.example-accordion-item-body .pop-out-panel{background-color:#717793;border-radius:12px;width:calc(100% - 30px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}.pop-out-content al-button{flex-shrink:0}.pop-out-content al-button .button-label{display:inline-block!important;visibility:visible!important;opacity:1!important}.pop-out-message{flex:1;color:#fff;font-size:12px;line-height:1.5;font-family:Roboto,sans-serif;font-weight:400;min-width:0;letter-spacing:.06px;margin:0}.pop-out-panel.pop-out-narrow .pop-out-content{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:8px}.pop-out-panel.pop-out-narrow .pop-out-content al-button{grid-column:1;grid-row:1;justify-self:start}.pop-out-panel.pop-out-narrow .pop-out-content .pop-out-close{grid-column:1;grid-row:1;justify-self:end}.pop-out-panel.pop-out-narrow .pop-out-message{grid-column:1;grid-row:2;flex:none;width:100%}.pop-out-message ::ng-deep a,.pop-out-link{color:var(--Base-Blue, #5473E8);font-family:Roboto;font-size:12px;font-style:normal;font-weight:400;line-height:136%;letter-spacing:.06px;cursor:pointer}.pop-out-message ::ng-deep a:hover,.pop-out-link:hover{color:#6581ea}.pop-out-close{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:#6b7280;transition:color .2s ease}.pop-out-close:hover{color:#374151}.pop-out-close .material-icons-outlined{font-size:20px;width:20px;height:20px;color:#fff}.edit-input-group .content_width{flex:1 1 0;min-width:0;max-width:450px;overflow:hidden;display:flex;align-items:center;transition:flex .2s ease,width .2s ease}.edit-input-group.input-focused .content_width{flex:1 1 100%;width:100%;min-width:0}.title-text{font-size:16px;font-weight:400;color:#383b4a;font-family:Roboto,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:4px;flex-shrink:1;min-width:0;max-width:100%;cursor:pointer}.title-text-white{color:#fff}.title-input{font-size:16px;font-weight:400;font-family:Roboto,sans-serif;border:none;outline:none;padding:0;margin:0 4px 0 0;flex-shrink:1;min-width:100px;max-width:100%;box-sizing:border-box;width:100%;transition:width .2s ease}.title-input:focus{width:100%;min-width:100%;flex:1 1 100%}.title-input.onfocus-input-text{height:28px;background:#f4f8fc;border-radius:5px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.title-input.focusout-input-text{color:#383b4a;background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.title-input:focus{outline:none;border:none;box-shadow:none}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left{min-width:0;overflow:visible}.edit-input-group mat-icon.edit-icon{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;cursor:pointer;border-radius:4px;flex-shrink:0;min-width:16px;width:16px;height:16px;font-size:16px;display:inline-flex;align-items:center;justify-content:center;color:#717793}.edit-input-group:hover mat-icon.edit-icon{opacity:1;visibility:visible}.hide-header-title mat-icon.edit-icon{display:none}.hide-header-title .edit-input-group{cursor:default;opacity:.7}.hide-header-title .edit-input-group:hover{background-color:transparent}.hide-header-title .title-text{cursor:default;pointer-events:none}.header-text-turncate{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:#a2a6b8;line-height:28px;font-family:Roboto,sans-serif;cursor:default}.hidden-section-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.hidden-write-sb{color:#a2a6b8;font-weight:400;font-family:Roboto,sans-serif;white-space:nowrap}.hidden-write-white-sb{color:#fff}.example-accordion-item-header.header-hidden{opacity:.7}.example-accordion-item-header.header-visible-sb{transition:background-color .2s ease}.example-accordion-item-header.header-hide-sb{background-color:#4b4f62}.mat-checkbox-margin{margin-left:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i5.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { kind: "directive", type: i5.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: GeneralContainerComponent, selector: "al-general-container", inputs: ["backgroundColor", "padding", "width", "height", "overflowX", "overflowY", "borderPosition", "borderColor", "borderRadius", "boxShadow", "customBoxShadow"] }, { kind: "component", type: ResponsiveColumnsComponent, selector: "al-responsive-columns", inputs: ["dataTestId", "gap", "padding", "leftWidth", "rightWidth", "stackAt"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: CheckboxComponent, selector: "al-checkbox", inputs: ["checked", "disabled", "labelPosition", "name", "required", "value", "color", "labelText", "helperText", "showLabels", "showHelperIcon", "helperIconTooltip", "dataTestId", "tooltip", "tooltipPosition"], outputs: ["change", "indeterminateChange", "focus", "blur", "helperIconClick"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }], animations: [expandCollapse] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderComponent, decorators: [{
             type: Component,
@@ -2212,7 +2271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ResponsiveColumnsComponent,
                         CheckboxModule,
                         ButtonComponent
-                    ], template: "<al-general-container #generalContainer [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\"\n  [padding]=\"'0'\" [width]=\"'100%'\"><cdk-accordion class=\"example-accordion\"><cdk-accordion-item\n      #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n      <div class=\"example-accordion-item-header\" #accordionHeader\n        [ngClass]=\"{\n          'header-hidden': isSectionHidden,\n          'header-hide-sb': (fieldVisibility?.isVisible === false),\n          'header-visible-sb': (fieldVisibility?.isVisible !== false),\n          'header-with-bottom-margin': !showPopOutPanel\n        }\"\n        [ngStyle]=\"getDynamicStyles()\"\n        [style.border-bottom]=\"showBottomBorder ? '2px solid ' + (borderColor || '#D1D3DB') : ''\"\n        [attr.data-test-id]=\"dataTestId\">\n        <!-- Normal header layout (shows when section is NOT hidden) --><ng-container\n          *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\"><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\"\n            [padding]=\"'8px 12px'\">\n            <div left>\n              <button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center\"\n                [attr.aria-expanded]=\"accordionItem.expanded\"\n                [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\">\n                <!-- When section is OPEN (expanded === true), show an UP chevron.\n                     When section is CLOSED, show a DOWN chevron. -->\n                <span class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">\n                  expand_less\n                </span>\n                <span class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">\n                  expand_more\n                </span>\n              </button>\n              <ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n                [rightWidth]=\"'32px'\" [ngClass]=\"{'input-focused': isInputFocused}\">\n                <div left>\n                  <div class=\"edit-input-group\" [ngClass]=\"{'input-focused': isInputFocused}\">\n                    <div class=\"content_width\"><span *ngIf=\"!isTitleEditing\" class=\"title-text\"\n                        [ngClass]=\"{ 'title-text-white': fieldVisibility?.isVisible === false }\"\n                        (click)=\"onTitleClick()\">\n                        {{ title || 'Click to edit' }}\n                      </span><input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n                        (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n                        class=\"title-input onfocus-input-text\" /><ng-content select=\"[header-center-left]\"></ng-content>\n                    </div><mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\"\n                      matTooltipPosition=\"above\" (click)=\"onTitleClick()\"></mat-icon>\n                  </div>\n                </div>\n                <div center><ng-content select=\"[header-center-center]\"></ng-content>\n                  <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) --><ng-container\n                    *ngIf=\"isLargeScreen\"><ng-container\n                      *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\"></ng-container></ng-container>\n                  <!-- Menu trigger and slide-out panel for small screens only -->\n                  <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n                    <div class=\"menu-trigger\" (click)=\"toggleMenu()\"><al-button buttonType=\"icon-label\" iconOnly\n                        size=\"header\" category=\"grey\" leftIcon=\"more_vert\" aria-label=\"More options\"\n                        [dataTestId]=\"'resume-header-more-menu'\"></al-button></div>\n                    <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n                      <div class=\"fit-panel\"><ng-container\n                          *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\"></ng-container>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div right><ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, visibility controlled by showEyeIcon --><ng-container\n                    *ngIf=\"showEyeIcon && configEyeToggle && configEyeToggle.length > 0\"><ng-container\n                      *ngFor=\"let eyeConfig of configEyeToggle\"><ng-container *ngIf=\"eyeConfig\"><ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container></ng-container></ng-container></ng-container>\n                </div>\n              </al-responsive-columns></div>\n            <div right><al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n                (change)=\"onHeaderCheckboxChange($event)\"></al-checkbox><ng-content\n                select=\"[header-right]\"></ng-content></div>\n          </al-responsive-columns></ng-container>\n        <!-- Hidden header layout (shows when section IS hidden) --><ng-template\n          #hiddenHeaderLayout><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n            <div left>\n              <!-- Toggle button hidden when section is hidden --><ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n                [rightWidth]=\"'32px'\">\n                <div left>\n                  <div class=\"edit-input-group hide-header-title\">\n                    <div class=\"content_width\"><span class=\"title-text header-text-turncate\"\n                        [ngClass]=\"{ 'title-text-white': fieldVisibility?.isVisible === false }\">\n                        {{ title }}\n                      </span></div>\n                  </div>\n                </div>\n                <div center>\n                  <div class=\"hidden-write-sb\" [ngClass]=\"{ 'hidden-write-white-sb': fieldVisibility?.isVisible === false }\">Section hidden</div>\n                </div>\n                <div right><ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, visibility controlled by showEyeIcon --><ng-container\n                    *ngIf=\"showEyeIcon && configEyeToggle && configEyeToggle.length > 0\"><ng-container\n                      *ngFor=\"let eyeConfig of configEyeToggle\"><ng-container *ngIf=\"eyeConfig\"><ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container></ng-container></ng-container></ng-container>\n                </div>\n              </al-responsive-columns></div>\n            <div right>\n              <!-- Checkbox hidden when section is hidden --><ng-content select=\"[header-right]\"></ng-content>\n            </div>\n          </al-responsive-columns></ng-template>\n      </div>\n      <!-- Accordion body with expand/collapse animation -->\n      <div class=\"example-accordion-item-body-wrapper\">\n        <div class=\"example-accordion-item-body\" *ngIf=\"accordionItem.expanded && !isSectionHidden\">\n          <!-- Pop-out Panel -->\n          <div *ngIf=\"shouldShowPopOut\" #popOutPanel class=\"pop-out-panel\"\n            [ngClass]=\"{'pop-out-narrow': isPopOutNarrow}\">\n            <div class=\"pop-out-content\">\n              <al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\" [buttonType]=\"'icon-label'\"\n                [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\"\n                [dataTestId]=\"'pop-out-run-deep-extraction'\" [title]=\"popOutButtonLabel\"></al-button>\n              <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n              <button type=\"button\" class=\"pop-out-close\" (click)=\"dismissPopOut()\"\n                aria-label=\"Close pop-out panel\"><span class=\"material-icons-outlined\">close</span></button>\n            </div>\n          </div>\n          <!-- Single body content slot - child component will handle 3-column layout internally -->\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </cdk-accordion-item></cdk-accordion></al-general-container><ng-template #headerButtonsTemplate\n  let-buttons=\"buttons\" let-handleClick=\"handleClick\"><ng-container *ngFor=\"let btn of buttonConfig\"><al-button\n      *ngIf=\"!btn.displayCondition || btn.displayCondition()\" [color]=\"btn.color\" [outline]=\"btn.outline\"\n      [size]=\"btn.size\" [iconOutlined]=\"btn.iconOutlined\" [labelText]=\"btn.labelText\"\n      [leftIcon]=\"getButtonIcons(btn).leftIcon\" [rightIcon]=\"getButtonIcons(btn).rightIcon\"\n      [dataTestId]=\"btn.dataTestId\" [hasDropDown]=\"btn.hasDropDown\" [dropdownItems]=\"btn.dropdownItems\"\n      [buttonType]=\"'icon-label'\" [iconOnly]=\"!btn.labelText\" [tooltip]=\"btn.tooltip\"\n      [tooltipPosition]=\"btn.tooltipPosition || 'above'\" (onClick)=\"onButtonClick(btn, $event)\"\n      (optionSelect)=\"onDropdownSelect(btn, $event)\"></al-button></ng-container></ng-template><ng-template\n  #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\" let-configEyeToggle=\"configEyeToggle\">\n  <div class=\"mat-checkbox-margin align-center\"\n    [attr.data-test-id]=\"isHidden ? 'section-show-eye-div' : 'section-hide-eye-div'\"\n    style=\"display: flex; align-items: center; justify-content: center;\"><mat-icon\n      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')\"\n      [matTooltip]=\"configEyeToggle?.tooltips?.[isHidden ? 'collapse' : 'expand'] || (isHidden ? 'Show Section' : 'Hide Section')\"\n      [matTooltipPosition]=\"configEyeToggle?.tooltips?.position || 'above'\"\n      [attr.aria-label]=\"configEyeToggle?.ariaLabels?.[isHidden ? 'collapsed' : 'expanded'] || (isHidden ? 'Show section' : 'Hide section')\"\n      (click)=\"onEyeIconClick(isHidden, accordionItem, configEyeToggle)\"\n      [attr.data-test-id]=\"isHidden ? 'section-show-eye-icon' : 'section-hide-eye-icon'\"\n      [style.color]=\"fieldVisibility?.isVisible === false ? '#fff' : '#717793'\"\n      style=\"cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px;\"\n      [style.opacity]=\"1\" [style.visibility]=\"'visible'\"></mat-icon></div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\";:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.example-accordion-item-header{display:flex;align-items:center;cursor:pointer;width:100%}.example-accordion-item-header al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns ::ng-deep .container{align-items:center;display:grid}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .container{align-items:center;display:grid;min-width:0;transition:grid-template-columns .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .container{grid-template-columns:1fr auto 32px!important}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column{display:flex;align-items:center;min-width:0}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{display:flex;align-items:center;width:100%;min-width:0}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left]{flex-shrink:1;min-width:0;overflow:visible;max-width:100%;transition:flex .2s ease,width .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused div[left],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left] .edit-input-group.input-focused{width:100%;min-width:0;max-width:none}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left{min-width:0;overflow:visible;max-width:100%;transition:flex .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .column.left{min-width:0;max-width:none;width:100%}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center]{justify-content:flex-end;gap:8px;flex-shrink:0;flex-wrap:nowrap;display:flex;align-items:center}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{flex-shrink:0}.example-accordion-item-body{width:100%}.example-accordion-item-body al-responsive-columns{width:100%;display:block}.toggle-button{border:none;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.toggle-button .material-icons-outlined{color:#717793}.example-accordion-item-header al-responsive-columns div[left]{display:flex;align-items:center;justify-content:center}.example-accordion-item-header al-responsive-columns div[right]{display:flex;align-items:center;justify-content:center;flex-shrink:0}.align-center{display:flex;align-items:center}.example-accordion-item-header{display:flex;justify-content:space-between;align-items:center;background:#ecedf1;gap:8px;border-bottom:2px solid #37c1ce;border-radius:8px;box-sizing:border-box}.example-accordion-item-header.header-with-bottom-margin{margin-bottom:16px}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;color:#717793;width:24px;height:24px;cursor:pointer;transition:color .2s ease;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 20}.material-symbols-outlined:hover{color:#4b4f62;background-color:#bbc7f6;width:24px;height:24px;border-radius:4px}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{display:flex;align-items:center;justify-content:center}.edit-input-group{display:flex;align-items:center;gap:4px;min-width:0;border-radius:4px;transition:width .2s ease,background-color .2s ease;padding:0 8px;margin:0 -8px;width:100%;overflow:visible;flex:1 1 0;position:relative}.edit-input-group.input-focused{width:100%;flex:1 1 100%;min-width:0}.edit-input-group:hover{background-color:#d1d3db}.edit-input-group:has(input:focus):hover,.edit-input-group:focus-within:hover{background-color:transparent}.edit-input-group:has(input:focus) mat-icon.edit-icon,.edit-input-group:focus-within mat-icon.edit-icon{opacity:0;visibility:hidden}.hover-menu-container{position:relative;display:inline-block}.menu-trigger{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:pointer;z-index:10}.slide-out-panel{position:absolute;bottom:100%;right:0;background-color:#fff;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap;align-items:center}.slide-out-panel.visible{opacity:1;visibility:visible}.fit-panel{display:inline-flex;width:fit-content;background:none;gap:8px;align-items:center}.example-accordion-item-body .pop-out-panel{background-color:#717793;border-radius:12px;width:calc(100% - 30px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}.pop-out-content al-button{flex-shrink:0}.pop-out-content al-button .button-label{display:inline-block!important;visibility:visible!important;opacity:1!important}.pop-out-message{flex:1;color:#fff;font-size:12px;line-height:1.5;font-family:Roboto,sans-serif;font-weight:400;min-width:0;letter-spacing:.06px;margin:0}.pop-out-panel.pop-out-narrow .pop-out-content{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:8px}.pop-out-panel.pop-out-narrow .pop-out-content al-button{grid-column:1;grid-row:1;justify-self:start}.pop-out-panel.pop-out-narrow .pop-out-content .pop-out-close{grid-column:1;grid-row:1;justify-self:end}.pop-out-panel.pop-out-narrow .pop-out-message{grid-column:1;grid-row:2;flex:none;width:100%}.pop-out-message ::ng-deep a,.pop-out-link{color:var(--Base-Blue, #5473E8);font-family:Roboto;font-size:12px;font-style:normal;font-weight:400;line-height:136%;letter-spacing:.06px;cursor:pointer}.pop-out-message ::ng-deep a:hover,.pop-out-link:hover{color:#6581ea}.pop-out-close{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:#6b7280;transition:color .2s ease}.pop-out-close:hover{color:#374151}.pop-out-close .material-icons-outlined{font-size:20px;width:20px;height:20px;color:#fff}.edit-input-group .content_width{flex:1 1 0;min-width:0;max-width:450px;overflow:hidden;display:flex;align-items:center;transition:flex .2s ease,width .2s ease}.edit-input-group.input-focused .content_width{flex:1 1 100%;width:100%;min-width:0}.title-text{font-size:16px;font-weight:400;color:#383b4a;font-family:Roboto,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:4px;flex-shrink:1;min-width:0;max-width:100%;cursor:pointer}.title-text-white{color:#fff}.title-input{font-size:16px;font-weight:400;font-family:Roboto,sans-serif;border:none;outline:none;padding:0;margin:0 4px 0 0;flex-shrink:1;min-width:100px;max-width:100%;box-sizing:border-box;width:100%;transition:width .2s ease}.title-input:focus{width:100%;min-width:100%;flex:1 1 100%}.title-input.onfocus-input-text{height:28px;background:#f4f8fc;border-radius:5px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.title-input.focusout-input-text{color:#383b4a;background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.title-input:focus{outline:none;border:none;box-shadow:none}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left{min-width:0;overflow:visible}.edit-input-group mat-icon.edit-icon{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;cursor:pointer;border-radius:4px;flex-shrink:0;min-width:16px;width:16px;height:16px;font-size:16px;display:inline-flex;align-items:center;justify-content:center;color:#717793}.edit-input-group:hover mat-icon.edit-icon{opacity:1;visibility:visible}.hide-header-title mat-icon.edit-icon{display:none}.hide-header-title .edit-input-group{cursor:default;opacity:.7}.hide-header-title .edit-input-group:hover{background-color:transparent}.hide-header-title .title-text{cursor:default;pointer-events:none}.header-text-turncate{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:#a2a6b8;line-height:28px;font-family:Roboto,sans-serif;cursor:default}.hidden-section-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.hidden-write-sb{color:#a2a6b8;font-weight:400;font-family:Roboto,sans-serif;white-space:nowrap}.hidden-write-white-sb{color:#fff}.example-accordion-item-header.header-hidden{opacity:.7}.example-accordion-item-header.header-visible-sb{transition:background-color .2s ease}.example-accordion-item-header.header-hide-sb{background-color:#4b4f62}.mat-checkbox-margin{margin-left:8px}\n"] }]
+                    ], animations: [expandCollapse], template: "<al-general-container #generalContainer [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\"\n  [padding]=\"'0'\" [width]=\"'100%'\"><cdk-accordion class=\"example-accordion\"><cdk-accordion-item\n      #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n      <div class=\"example-accordion-item-header\" #accordionHeader\n        [ngClass]=\"{\n          'header-hidden': isSectionHidden,\n          'header-hide-sb': (fieldVisibility?.isVisible === false),\n          'header-visible-sb': (fieldVisibility?.isVisible !== false),\n          'header-with-bottom-margin': !showPopOutPanel\n        }\"\n        [ngStyle]=\"getDynamicStyles()\"\n        [style.border-bottom]=\"showBottomBorder ? '2px solid ' + (borderColor || '#D1D3DB') : ''\"\n        [attr.data-test-id]=\"dataTestId\">\n        <!-- Normal header layout (shows when section is NOT hidden) --><ng-container\n          *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\"><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\"\n            [padding]=\"'8px 12px'\">\n            <div left>\n              <button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center\"\n                [attr.aria-expanded]=\"accordionItem.expanded\"\n                [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\">\n                <!-- When section is OPEN (expanded === true), show an UP chevron.\n                     When section is CLOSED, show a DOWN chevron. -->\n                <span class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">\n                  expand_less\n                </span>\n                <span class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">\n                  expand_more\n                </span>\n              </button>\n              <ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n                [rightWidth]=\"'32px'\" [ngClass]=\"{'input-focused': isInputFocused}\">\n                <div left>\n                  <div class=\"edit-input-group\" [ngClass]=\"{'input-focused': isInputFocused}\">\n                    <div class=\"content_width\"><span *ngIf=\"!isTitleEditing\" class=\"title-text\"\n                        [ngClass]=\"{ 'title-text-white': fieldVisibility?.isVisible === false }\"\n                        (click)=\"onTitleClick()\">\n                        {{ title || 'Click to edit' }}\n                      </span><input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n                        (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n                        class=\"title-input onfocus-input-text\" /><ng-content select=\"[header-center-left]\"></ng-content>\n                    </div><mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\"\n                      matTooltipPosition=\"above\" (click)=\"onTitleClick()\"></mat-icon>\n                  </div>\n                </div>\n                <div center><ng-content select=\"[header-center-center]\"></ng-content>\n                  <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) --><ng-container\n                    *ngIf=\"isLargeScreen\"><ng-container\n                      *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\"></ng-container></ng-container>\n                  <!-- Menu trigger and slide-out panel for small screens only -->\n                  <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n                    <div class=\"menu-trigger\" (click)=\"toggleMenu()\"><al-button buttonType=\"icon-label\" iconOnly\n                        size=\"header\" category=\"grey\" leftIcon=\"more_vert\" aria-label=\"More options\"\n                        [dataTestId]=\"'resume-header-more-menu'\"></al-button></div>\n                    <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n                      <div class=\"fit-panel\"><ng-container\n                          *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\"></ng-container>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div right><ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, visibility controlled by showEyeIcon --><ng-container\n                    *ngIf=\"showEyeIcon && configEyeToggle && configEyeToggle.length > 0\"><ng-container\n                      *ngFor=\"let eyeConfig of configEyeToggle\"><ng-container *ngIf=\"eyeConfig\"><ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container></ng-container></ng-container></ng-container>\n                </div>\n              </al-responsive-columns></div>\n            <div right><al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n                (change)=\"onHeaderCheckboxChange($event)\"></al-checkbox><ng-content\n                select=\"[header-right]\"></ng-content></div>\n          </al-responsive-columns></ng-container>\n        <!-- Hidden header layout (shows when section IS hidden) --><ng-template\n          #hiddenHeaderLayout><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n            <div left>\n              <!-- Toggle button hidden when section is hidden --><ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n                [rightWidth]=\"'32px'\">\n                <div left>\n                  <div class=\"edit-input-group hide-header-title\">\n                    <div class=\"content_width\"><span class=\"title-text header-text-turncate\"\n                        [ngClass]=\"{ 'title-text-white': fieldVisibility?.isVisible === false }\">\n                        {{ title }}\n                      </span></div>\n                  </div>\n                </div>\n                <div center>\n                  <div class=\"hidden-write-sb\" [ngClass]=\"{ 'hidden-write-white-sb': fieldVisibility?.isVisible === false }\">Section hidden</div>\n                </div>\n                <div right><ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, visibility controlled by showEyeIcon --><ng-container\n                    *ngIf=\"showEyeIcon && configEyeToggle && configEyeToggle.length > 0\"><ng-container\n                      *ngFor=\"let eyeConfig of configEyeToggle\"><ng-container *ngIf=\"eyeConfig\"><ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container></ng-container></ng-container></ng-container>\n                </div>\n              </al-responsive-columns></div>\n            <div right>\n              <!-- Checkbox hidden when section is hidden --><ng-content select=\"[header-right]\"></ng-content>\n            </div>\n          </al-responsive-columns></ng-template>\n      </div>\n      <!-- Accordion body with expand/collapse animation -->\n      <div class=\"example-accordion-item-body-wrapper\">\n        <div class=\"example-accordion-item-body\"\n             *ngIf=\"accordionItem.expanded && !isSectionHidden\"\n             [@expandCollapse]>\n          <!-- Pop-out Panel -->\n          <div *ngIf=\"shouldShowPopOut\" #popOutPanel class=\"pop-out-panel\"\n            [ngClass]=\"{'pop-out-narrow': isPopOutNarrow}\">\n            <div class=\"pop-out-content\">\n              <al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\" [buttonType]=\"'icon-label'\"\n                [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\"\n                [dataTestId]=\"'pop-out-run-deep-extraction'\" [title]=\"popOutButtonLabel\"></al-button>\n              <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n              <button type=\"button\" class=\"pop-out-close\" (click)=\"dismissPopOut()\"\n                aria-label=\"Close pop-out panel\"><span class=\"material-icons-outlined\">close</span></button>\n            </div>\n          </div>\n          <!-- Single body content slot - child component will handle 3-column layout internally -->\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </cdk-accordion-item></cdk-accordion></al-general-container><ng-template #headerButtonsTemplate\n  let-buttons=\"buttons\" let-handleClick=\"handleClick\"><ng-container *ngFor=\"let btn of buttonConfig\"><al-button\n      *ngIf=\"!btn.displayCondition || btn.displayCondition()\" [color]=\"btn.color\" [outline]=\"btn.outline\"\n      [size]=\"btn.size\" [iconOutlined]=\"btn.iconOutlined\" [labelText]=\"btn.labelText\"\n      [leftIcon]=\"getButtonIcons(btn).leftIcon\" [rightIcon]=\"getButtonIcons(btn).rightIcon\"\n      [dataTestId]=\"btn.dataTestId\" [hasDropDown]=\"btn.hasDropDown\" [dropdownItems]=\"btn.dropdownItems\"\n      [buttonType]=\"'icon-label'\" [iconOnly]=\"!btn.labelText\" [tooltip]=\"btn.tooltip\"\n      [tooltipPosition]=\"btn.tooltipPosition || 'above'\" (onClick)=\"onButtonClick(btn, $event)\"\n      (optionSelect)=\"onDropdownSelect(btn, $event)\"></al-button></ng-container></ng-template><ng-template\n  #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\" let-configEyeToggle=\"configEyeToggle\">\n  <div class=\"mat-checkbox-margin align-center\"\n    [attr.data-test-id]=\"isHidden ? 'section-show-eye-div' : 'section-hide-eye-div'\"\n    style=\"display: flex; align-items: center; justify-content: center;\"><mat-icon\n      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')\"\n      [matTooltip]=\"configEyeToggle?.tooltips?.[isHidden ? 'collapse' : 'expand'] || (isHidden ? 'Show Section' : 'Hide Section')\"\n      [matTooltipPosition]=\"configEyeToggle?.tooltips?.position || 'above'\"\n      [attr.aria-label]=\"configEyeToggle?.ariaLabels?.[isHidden ? 'collapsed' : 'expanded'] || (isHidden ? 'Show section' : 'Hide section')\"\n      (click)=\"onEyeIconClick(isHidden, accordionItem, configEyeToggle)\"\n      [attr.data-test-id]=\"isHidden ? 'section-show-eye-icon' : 'section-hide-eye-icon'\"\n      [style.color]=\"fieldVisibility?.isVisible === false ? '#fff' : '#717793'\"\n      style=\"cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px;\"\n      [style.opacity]=\"1\" [style.visibility]=\"'visible'\"></mat-icon></div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\";:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.example-accordion-item-header{display:flex;align-items:center;cursor:pointer;width:100%}.example-accordion-item-header al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns ::ng-deep .container{align-items:center;display:grid}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .container{align-items:center;display:grid;min-width:0;transition:grid-template-columns .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .container{grid-template-columns:1fr auto 32px!important}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column{display:flex;align-items:center;min-width:0}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{display:flex;align-items:center;width:100%;min-width:0}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left]{flex-shrink:1;min-width:0;overflow:visible;max-width:100%;transition:flex .2s ease,width .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused div[left],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left] .edit-input-group.input-focused{width:100%;min-width:0;max-width:none}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left{min-width:0;overflow:visible;max-width:100%;transition:flex .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .column.left{min-width:0;max-width:none;width:100%}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center]{justify-content:flex-end;gap:8px;flex-shrink:0;flex-wrap:nowrap;display:flex;align-items:center}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{flex-shrink:0}.example-accordion-item-body{width:100%}.example-accordion-item-body al-responsive-columns{width:100%;display:block}.toggle-button{border:none;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.toggle-button .material-icons-outlined{color:#717793}.example-accordion-item-header al-responsive-columns div[left]{display:flex;align-items:center;justify-content:center}.example-accordion-item-header al-responsive-columns div[right]{display:flex;align-items:center;justify-content:center;flex-shrink:0}.align-center{display:flex;align-items:center}.example-accordion-item-header{display:flex;justify-content:space-between;align-items:center;background:#ecedf1;gap:8px;border-bottom:2px solid #37c1ce;border-radius:8px;box-sizing:border-box}.example-accordion-item-header.header-with-bottom-margin{margin-bottom:16px}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;color:#717793;width:24px;height:24px;cursor:pointer;transition:color .2s ease;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 20}.material-symbols-outlined:hover{color:#4b4f62;background-color:#bbc7f6;width:24px;height:24px;border-radius:4px}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{display:flex;align-items:center;justify-content:center}.edit-input-group{display:flex;align-items:center;gap:4px;min-width:0;border-radius:4px;transition:width .2s ease,background-color .2s ease;padding:0 8px;margin:0 -8px;width:100%;overflow:visible;flex:1 1 0;position:relative}.edit-input-group.input-focused{width:100%;flex:1 1 100%;min-width:0}.edit-input-group:hover{background-color:#d1d3db}.edit-input-group:has(input:focus):hover,.edit-input-group:focus-within:hover{background-color:transparent}.edit-input-group:has(input:focus) mat-icon.edit-icon,.edit-input-group:focus-within mat-icon.edit-icon{opacity:0;visibility:hidden}.hover-menu-container{position:relative;display:inline-block}.menu-trigger{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:pointer;z-index:10}.slide-out-panel{position:absolute;bottom:100%;right:0;background-color:#fff;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap;align-items:center}.slide-out-panel.visible{opacity:1;visibility:visible}.fit-panel{display:inline-flex;width:fit-content;background:none;gap:8px;align-items:center}.example-accordion-item-body .pop-out-panel{background-color:#717793;border-radius:12px;width:calc(100% - 30px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}.pop-out-content al-button{flex-shrink:0}.pop-out-content al-button .button-label{display:inline-block!important;visibility:visible!important;opacity:1!important}.pop-out-message{flex:1;color:#fff;font-size:12px;line-height:1.5;font-family:Roboto,sans-serif;font-weight:400;min-width:0;letter-spacing:.06px;margin:0}.pop-out-panel.pop-out-narrow .pop-out-content{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:8px}.pop-out-panel.pop-out-narrow .pop-out-content al-button{grid-column:1;grid-row:1;justify-self:start}.pop-out-panel.pop-out-narrow .pop-out-content .pop-out-close{grid-column:1;grid-row:1;justify-self:end}.pop-out-panel.pop-out-narrow .pop-out-message{grid-column:1;grid-row:2;flex:none;width:100%}.pop-out-message ::ng-deep a,.pop-out-link{color:var(--Base-Blue, #5473E8);font-family:Roboto;font-size:12px;font-style:normal;font-weight:400;line-height:136%;letter-spacing:.06px;cursor:pointer}.pop-out-message ::ng-deep a:hover,.pop-out-link:hover{color:#6581ea}.pop-out-close{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:#6b7280;transition:color .2s ease}.pop-out-close:hover{color:#374151}.pop-out-close .material-icons-outlined{font-size:20px;width:20px;height:20px;color:#fff}.edit-input-group .content_width{flex:1 1 0;min-width:0;max-width:450px;overflow:hidden;display:flex;align-items:center;transition:flex .2s ease,width .2s ease}.edit-input-group.input-focused .content_width{flex:1 1 100%;width:100%;min-width:0}.title-text{font-size:16px;font-weight:400;color:#383b4a;font-family:Roboto,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:4px;flex-shrink:1;min-width:0;max-width:100%;cursor:pointer}.title-text-white{color:#fff}.title-input{font-size:16px;font-weight:400;font-family:Roboto,sans-serif;border:none;outline:none;padding:0;margin:0 4px 0 0;flex-shrink:1;min-width:100px;max-width:100%;box-sizing:border-box;width:100%;transition:width .2s ease}.title-input:focus{width:100%;min-width:100%;flex:1 1 100%}.title-input.onfocus-input-text{height:28px;background:#f4f8fc;border-radius:5px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.title-input.focusout-input-text{color:#383b4a;background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.title-input:focus{outline:none;border:none;box-shadow:none}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left{min-width:0;overflow:visible}.edit-input-group mat-icon.edit-icon{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;cursor:pointer;border-radius:4px;flex-shrink:0;min-width:16px;width:16px;height:16px;font-size:16px;display:inline-flex;align-items:center;justify-content:center;color:#717793}.edit-input-group:hover mat-icon.edit-icon{opacity:1;visibility:visible}.hide-header-title mat-icon.edit-icon{display:none}.hide-header-title .edit-input-group{cursor:default;opacity:.7}.hide-header-title .edit-input-group:hover{background-color:transparent}.hide-header-title .title-text{cursor:default;pointer-events:none}.header-text-turncate{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:#a2a6b8;line-height:28px;font-family:Roboto,sans-serif;cursor:default}.hidden-section-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.hidden-write-sb{color:#a2a6b8;font-weight:400;font-family:Roboto,sans-serif;white-space:nowrap}.hidden-write-white-sb{color:#fff}.example-accordion-item-header.header-hidden{opacity:.7}.example-accordion-item-header.header-visible-sb{transition:background-color .2s ease}.example-accordion-item-header.header-hide-sb{background-color:#4b4f62}.mat-checkbox-margin{margin-left:8px}\n"] }]
         }], ctorParameters: () => [{ type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i1.MatIconRegistry }], propDecorators: { title: [{
                 type: Input
             }], showHeaderCheckbox: [{