@allsorter/ui-components 0.0.372 → 0.0.374

package/fesm2022/allsorter-ui-components.mjs

@@ -1628,7 +1628,7 @@ const VISIBILITY_OFF_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="
   <path d="M11.6656 5.80832C15.3498 5.80832 18.6354 7.87886 20.2393 11.1548C19.6658 12.3407 18.859 13.3614 17.8966 14.1877L19.2673 15.5583C20.6185 14.3627 21.6878 12.8656 22.3585 11.1548C20.6768 6.88733 16.526 3.86415 11.6656 3.86415C10.431 3.86415 9.24508 4.05857 8.12719 4.41824L9.73113 6.02218C10.363 5.8958 11.0046 5.80832 11.6656 5.80832ZM10.6254 6.91649L12.6377 8.92871C13.1917 9.17173 13.6389 9.61888 13.8819 10.173L15.8941 12.1852C15.9719 11.8547 16.0302 11.5047 16.0302 11.1451C16.0399 8.73429 14.0763 6.7804 11.6656 6.7804C11.3059 6.7804 10.9657 6.829 10.6254 6.91649ZM1.95446 3.73778L4.55964 6.34296C2.97515 7.58723 1.72116 9.23977 0.972656 11.1548C2.65436 15.4222 6.80516 18.4454 11.6656 18.4454C13.1431 18.4454 14.5624 18.1635 15.865 17.6483L19.1895 20.9728L20.5601 19.6022L3.3251 2.35742L1.95446 3.73778ZM9.24509 11.0284L11.7822 13.5655C11.7433 13.5753 11.7045 13.585 11.6656 13.585C10.3241 13.585 9.23536 12.4963 9.23536 11.1548C9.23536 11.1062 9.24509 11.077 9.24509 11.0284ZM5.94 7.72332L7.64115 9.42447C7.41757 9.95911 7.2912 10.5424 7.2912 11.1548C7.2912 13.5655 9.25481 15.5292 11.6656 15.5292C12.278 15.5292 12.8612 15.4028 13.3862 15.1792L14.3388 16.1318C13.4834 16.3651 12.5891 16.5012 11.6656 16.5012C7.98138 16.5012 4.69574 14.4307 3.0918 11.1548C3.77226 9.7647 4.76378 8.61764 5.94 7.72332Z" fill="#717793"/>
 </svg>`;
 // Static flag to ensure icons are registered only once
-let iconsRegistered$3 = false;
+let iconsRegistered$4 = false;
 class NewResumeHeaderComponent {
     /**
      * Whether the section is currently hidden.
@@ -1707,8 +1707,8 @@ class NewResumeHeaderComponent {
             this.iconRegistry.addSvgIconLiteral('ordering_icon', this.sanitizer.bypassSecurityTrustHtml(NewResume_Header_Component_ICON['ordering_icon']));
             // Register collapse_icon from image-utils
             this.iconRegistry.addSvgIconLiteral('collapse_icon', this.sanitizer.bypassSecurityTrustHtml(NewResume_Header_Component_ICON['collapse_icon']));
-            if (!iconsRegistered$3) {
-                iconsRegistered$3 = true;
+            if (!iconsRegistered$4) {
+                iconsRegistered$4 = true;
                 console.log('Visibility icons registered successfully');
             }
         }
@@ -1908,7 +1908,19 @@ class NewResumeHeaderComponent {
         document.addEventListener('click', this.clickOutsideListener);
     }
     checkScreenSize() {
-        this.isLargeScreen = window.innerWidth >= 1400;
+        // Check container width only - ignore window width
+        let containerWidth = 0;
+        // Try to get container width from general container first, then fallback to header
+        if (this.generalContainer?.nativeElement) {
+            containerWidth = this.generalContainer.nativeElement.offsetWidth ||
+                this.generalContainer.nativeElement.clientWidth || 0;
+        }
+        else if (this.accordionHeader?.nativeElement) {
+            containerWidth = this.accordionHeader.nativeElement.offsetWidth ||
+                this.accordionHeader.nativeElement.clientWidth || 0;
+        }
+        // Set isLargeScreen to true only if container is >= 500px
+        this.isLargeScreen = containerWidth >= 500;
         // Close menu when screen becomes large
         if (this.isLargeScreen) {
             this.isMenuVisible = false;
@@ -1957,6 +1969,20 @@ class NewResumeHeaderComponent {
         // Force change detection to ensure icon renders
         setTimeout(() => {
             this.cdr.detectChanges();
+            // Initial check after view init
+            this.checkScreenSize();
+            this.cdr.detectChanges();
+            // Setup ResizeObserver to watch container size
+            // Try general container first, then fallback to header
+            const elementToObserve = this.generalContainer?.nativeElement ||
+                this.accordionHeader?.nativeElement;
+            if (elementToObserve) {
+                this.resizeObserver = new ResizeObserver(() => {
+                    this.checkScreenSize();
+                    this.cdr.detectChanges();
+                });
+                this.resizeObserver.observe(elementToObserve);
+            }
         }, 0);
     }
     ngOnDestroy() {
@@ -1964,12 +1990,15 @@ class NewResumeHeaderComponent {
         if (this.resizeListener) {
             window.removeEventListener('resize', this.resizeListener);
         }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
         if (this.clickOutsideListener) {
             document.removeEventListener('click', this.clickOutsideListener);
         }
     }
     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", headerCheckboxChecked: "headerCheckboxChecked", configEyeToggle: "configEyeToggle", hiddenSection: "hiddenSection", buttonConfig: "buttonConfig", isLargeScreen: "isLargeScreen", popOutButtonLabel: "popOutButtonLabel", popOutButtonIcon: "popOutButtonIcon", popOutButtonTooltip: "popOutButtonTooltip", popOutButtonTooltipPosition: "popOutButtonTooltipPosition", showPopOutPanel: "showPopOutPanel", popOutMessage: "popOutMessage", dataTestId: "dataTestId" }, outputs: { titleChange: "titleChange", sectionToggled: "sectionToggled", headerCheckboxChange: "headerCheckboxChange", showHideToggleSection: "showHideToggleSection", buttonClicked: "buttonClicked", popOutButtonClick: "popOutButtonClick" }, viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<al-general-container [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\" [padding]=\"'0'\"\n  [width]=\"'100%'\">\n  <cdk-accordion class=\"example-accordion\">\n    <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n      <div class=\"example-accordion-item-header\" [ngClass]=\"{'header-hidden': isSectionHidden}\">\n        <!-- Normal header layout (shows when section is NOT hidden) -->\n        <ng-container *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\">\n          <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [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                <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>\n              <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\">\n                      <span *ngIf=\"!isTitleEditing\" class=\"title-text\" (click)=\"onTitleClick()\">\n                        {{ title || 'Click to edit' }}\n                      </span>\n                      <input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n                        (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n                        class=\"title-input onfocus-input-text\" />\n                      <ng-content select=\"[header-center-left]\"></ng-content>\n                    </div>\n                    <mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\" matTooltipPosition=\"above\"\n                      (click)=\"onTitleClick()\">\n                    </mat-icon>\n                  </div>\n                </div>\n                <div center>\n                  <ng-content select=\"[header-center-center]\"></ng-content>\n                  <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) -->\n                  <ng-container *ngIf=\"isLargeScreen\">\n                    <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n                    </ng-container>\n                  </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()\">\n                      <al-button buttonType=\"icon-label\" iconOnly size=\"header\" category=\"grey\" leftIcon=\"more_vert\"\n                        aria-label=\"More options\" [dataTestId]=\"'resume-header-more-menu'\">\n                      </al-button>\n                    </div>\n                    <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n                      <div class=\"fit-panel\">\n                        <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n                        </ng-container>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div right>\n                  <ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, always visible -->\n                  <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n                    <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n                      <ng-container *ngIf=\"eyeConfig\">\n                        <ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n                        </ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </ng-container>\n                </div>\n              </al-responsive-columns>\n            </div>\n            <div right>\n              <al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n                (change)=\"onHeaderCheckboxChange($event)\">\n              </al-checkbox>\n              <ng-content select=\"[header-right]\"></ng-content>\n            </div>\n          </al-responsive-columns>\n        </ng-container>\n\n        <!-- Hidden header layout (shows when section IS hidden) -->\n        <ng-template #hiddenHeaderLayout>\n          <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n            <div left>\n              <!-- Toggle button hidden when section is hidden -->\n              <ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center>\n              <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\">\n                      <span class=\"title-text header-text-turncate\">{{ title }}</span>\n                    </div>\n                  </div>\n                </div>\n                <div center>\n                  <div class=\"hidden-write\">Section hidden</div>\n                </div>\n                <div right>\n                  <ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, always visible -->\n                  <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n                    <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n                      <ng-container *ngIf=\"eyeConfig\">\n                        <ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n                        </ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </ng-container>\n                </div>\n              </al-responsive-columns>\n            </div>\n            <div right>\n              <!-- Checkbox hidden when section is hidden -->\n              <ng-content select=\"[header-right]\"></ng-content>\n            </div>\n          </al-responsive-columns>\n        </ng-template>\n      </div>\n      <!-- Accordion body (only shows when expanded AND not hidden) -->\n      <div class=\"example-accordion-item-body\" *ngIf=\"accordionItem.expanded && !isSectionHidden\">\n        <!-- Pop-out Panel -->\n        <div *ngIf=\"shouldShowPopOut\" class=\"pop-out-panel\">\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\">\n            </al-button>\n            <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n            <button type=\"button\" class=\"pop-out-close\" (click)=\"dismissPopOut()\" aria-label=\"Close pop-out panel\">\n              <span class=\"material-icons-outlined\">close</span>\n            </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    </cdk-accordion-item>\n  </cdk-accordion>\n</al-general-container>\n\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n  <ng-container *ngFor=\"let btn of buttonConfig\">\n    <al-button *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]=\"getButtonTooltip(btn)\"\n      [tooltipPosition]=\"'above'\" (onClick)=\"onButtonClick(btn, $event)\" (optionSelect)=\"onDropdownSelect(btn, $event)\">\n    </al-button>\n  </ng-container>\n</ng-template>\n\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n  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;\">\n    <mat-icon class=\"delete-multiple mat-fab.mat-accent eye-icon\" [svgIcon]=\"isHidden ? 'visibility' : '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=\"cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px; color: #717793;\"\n      [style.opacity]=\"1\" [style.visibility]=\"'visible'\">\n    </mat-icon>\n  </div>\n</ng-template>\n", styles: ["@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\";.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:hidden;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:hidden;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}.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}.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:background-color .2s ease,width .2s ease;padding:0 8px;flex-shrink:1;width:100%;max-width:100%;overflow:hidden;flex:1 1 0}.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% - 110px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;align-items:center}.pop-out-content al-button{flex-shrink:0;align-self:center}.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}.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-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:24px;width:24px;height:24px;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{color:#a2a6b8;font-weight:400;font-family:Roboto,sans-serif;white-space:nowrap}.example-accordion-item-header.header-hidden{opacity:.7}.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: "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", headerCheckboxChecked: "headerCheckboxChecked", configEyeToggle: "configEyeToggle", hiddenSection: "hiddenSection", buttonConfig: "buttonConfig", isLargeScreen: "isLargeScreen", popOutButtonLabel: "popOutButtonLabel", popOutButtonIcon: "popOutButtonIcon", popOutButtonTooltip: "popOutButtonTooltip", popOutButtonTooltipPosition: "popOutButtonTooltipPosition", showPopOutPanel: "showPopOutPanel", popOutMessage: "popOutMessage", dataTestId: "dataTestId" }, 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 }], 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 [ngClass]=\"{'header-hidden': isSectionHidden}\">\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><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\"><span\n                  class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">expand_less </span><span\n                  class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">expand_more\n                </span></button><ng-content select=\"[header-left]\"></ng-content></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                        (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, always visible --><ng-container\n                    *ngIf=\"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                        {{ title }}\n                      </span></div>\n                  </div>\n                </div>\n                <div center>\n                  <div class=\"hidden-write\">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, always visible --><ng-container\n                    *ngIf=\"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 (only shows when expanded AND not hidden) -->\n      <div class=\"example-accordion-item-body\" *ngIf=\"accordionItem.expanded && !isSectionHidden\">\n        <!-- Pop-out Panel -->\n        <div *ngIf=\"shouldShowPopOut\" class=\"pop-out-panel\">\n          <div class=\"pop-out-content\"><al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\"\n              [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\"\n              (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'pop-out-run-deep-extraction'\"\n              [title]=\"popOutButtonLabel\"></al-button>\n            <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p><button type=\"button\" class=\"pop-out-close\"\n              (click)=\"dismissPopOut()\" aria-label=\"Close pop-out panel\"><span\n                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    </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]=\"getButtonTooltip(btn)\"\n      [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 ? 'visibility' : '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=\"cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px; color: #717793;\"\n      [style.opacity]=\"1\" [style.visibility]=\"'visible'\"></mat-icon></div>\n</ng-template>", styles: ["@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\";.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:hidden;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:hidden;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}.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}.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:background-color .2s ease,width .2s ease;padding:0 8px;flex-shrink:1;width:100%;max-width:100%;overflow:hidden;flex:1 1 0}.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% - 110px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;align-items:center}.pop-out-content al-button{flex-shrink:0;align-self:center}.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}.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-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:24px;width:24px;height:24px;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{color:#a2a6b8;font-weight:400;font-family:Roboto,sans-serif;white-space:nowrap}.example-accordion-item-header.header-hidden{opacity:.7}.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: "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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderComponent, decorators: [{
             type: Component,
@@ -1983,7 +2012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ResponsiveColumnsComponent,
                         CheckboxModule,
                         ButtonComponent
-                    ], template: "<al-general-container [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\" [padding]=\"'0'\"\n  [width]=\"'100%'\">\n  <cdk-accordion class=\"example-accordion\">\n    <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n      <div class=\"example-accordion-item-header\" [ngClass]=\"{'header-hidden': isSectionHidden}\">\n        <!-- Normal header layout (shows when section is NOT hidden) -->\n        <ng-container *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\">\n          <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [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                <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>\n              <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\">\n                      <span *ngIf=\"!isTitleEditing\" class=\"title-text\" (click)=\"onTitleClick()\">\n                        {{ title || 'Click to edit' }}\n                      </span>\n                      <input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n                        (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n                        class=\"title-input onfocus-input-text\" />\n                      <ng-content select=\"[header-center-left]\"></ng-content>\n                    </div>\n                    <mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\" matTooltipPosition=\"above\"\n                      (click)=\"onTitleClick()\">\n                    </mat-icon>\n                  </div>\n                </div>\n                <div center>\n                  <ng-content select=\"[header-center-center]\"></ng-content>\n                  <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) -->\n                  <ng-container *ngIf=\"isLargeScreen\">\n                    <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n                    </ng-container>\n                  </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()\">\n                      <al-button buttonType=\"icon-label\" iconOnly size=\"header\" category=\"grey\" leftIcon=\"more_vert\"\n                        aria-label=\"More options\" [dataTestId]=\"'resume-header-more-menu'\">\n                      </al-button>\n                    </div>\n                    <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n                      <div class=\"fit-panel\">\n                        <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n                        </ng-container>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div right>\n                  <ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, always visible -->\n                  <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n                    <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n                      <ng-container *ngIf=\"eyeConfig\">\n                        <ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n                        </ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </ng-container>\n                </div>\n              </al-responsive-columns>\n            </div>\n            <div right>\n              <al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n                (change)=\"onHeaderCheckboxChange($event)\">\n              </al-checkbox>\n              <ng-content select=\"[header-right]\"></ng-content>\n            </div>\n          </al-responsive-columns>\n        </ng-container>\n\n        <!-- Hidden header layout (shows when section IS hidden) -->\n        <ng-template #hiddenHeaderLayout>\n          <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n            <div left>\n              <!-- Toggle button hidden when section is hidden -->\n              <ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center>\n              <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\">\n                      <span class=\"title-text header-text-turncate\">{{ title }}</span>\n                    </div>\n                  </div>\n                </div>\n                <div center>\n                  <div class=\"hidden-write\">Section hidden</div>\n                </div>\n                <div right>\n                  <ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, always visible -->\n                  <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n                    <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n                      <ng-container *ngIf=\"eyeConfig\">\n                        <ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n                        </ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </ng-container>\n                </div>\n              </al-responsive-columns>\n            </div>\n            <div right>\n              <!-- Checkbox hidden when section is hidden -->\n              <ng-content select=\"[header-right]\"></ng-content>\n            </div>\n          </al-responsive-columns>\n        </ng-template>\n      </div>\n      <!-- Accordion body (only shows when expanded AND not hidden) -->\n      <div class=\"example-accordion-item-body\" *ngIf=\"accordionItem.expanded && !isSectionHidden\">\n        <!-- Pop-out Panel -->\n        <div *ngIf=\"shouldShowPopOut\" class=\"pop-out-panel\">\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\">\n            </al-button>\n            <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n            <button type=\"button\" class=\"pop-out-close\" (click)=\"dismissPopOut()\" aria-label=\"Close pop-out panel\">\n              <span class=\"material-icons-outlined\">close</span>\n            </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    </cdk-accordion-item>\n  </cdk-accordion>\n</al-general-container>\n\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n  <ng-container *ngFor=\"let btn of buttonConfig\">\n    <al-button *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]=\"getButtonTooltip(btn)\"\n      [tooltipPosition]=\"'above'\" (onClick)=\"onButtonClick(btn, $event)\" (optionSelect)=\"onDropdownSelect(btn, $event)\">\n    </al-button>\n  </ng-container>\n</ng-template>\n\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n  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;\">\n    <mat-icon class=\"delete-multiple mat-fab.mat-accent eye-icon\" [svgIcon]=\"isHidden ? 'visibility' : '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=\"cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px; color: #717793;\"\n      [style.opacity]=\"1\" [style.visibility]=\"'visible'\">\n    </mat-icon>\n  </div>\n</ng-template>\n", styles: ["@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\";.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:hidden;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:hidden;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}.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}.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:background-color .2s ease,width .2s ease;padding:0 8px;flex-shrink:1;width:100%;max-width:100%;overflow:hidden;flex:1 1 0}.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% - 110px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;align-items:center}.pop-out-content al-button{flex-shrink:0;align-self:center}.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}.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-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:24px;width:24px;height:24px;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{color:#a2a6b8;font-weight:400;font-family:Roboto,sans-serif;white-space:nowrap}.example-accordion-item-header.header-hidden{opacity:.7}.mat-checkbox-margin{margin-left:8px}\n"] }]
+                    ], 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 [ngClass]=\"{'header-hidden': isSectionHidden}\">\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><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\"><span\n                  class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">expand_less </span><span\n                  class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">expand_more\n                </span></button><ng-content select=\"[header-left]\"></ng-content></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                        (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, always visible --><ng-container\n                    *ngIf=\"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                        {{ title }}\n                      </span></div>\n                  </div>\n                </div>\n                <div center>\n                  <div class=\"hidden-write\">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, always visible --><ng-container\n                    *ngIf=\"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 (only shows when expanded AND not hidden) -->\n      <div class=\"example-accordion-item-body\" *ngIf=\"accordionItem.expanded && !isSectionHidden\">\n        <!-- Pop-out Panel -->\n        <div *ngIf=\"shouldShowPopOut\" class=\"pop-out-panel\">\n          <div class=\"pop-out-content\"><al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\"\n              [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\"\n              (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'pop-out-run-deep-extraction'\"\n              [title]=\"popOutButtonLabel\"></al-button>\n            <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p><button type=\"button\" class=\"pop-out-close\"\n              (click)=\"dismissPopOut()\" aria-label=\"Close pop-out panel\"><span\n                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    </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]=\"getButtonTooltip(btn)\"\n      [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 ? 'visibility' : '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=\"cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px; color: #717793;\"\n      [style.opacity]=\"1\" [style.visibility]=\"'visible'\"></mat-icon></div>\n</ng-template>", styles: ["@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\";.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:hidden;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:hidden;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}.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}.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:background-color .2s ease,width .2s ease;padding:0 8px;flex-shrink:1;width:100%;max-width:100%;overflow:hidden;flex:1 1 0}.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% - 110px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;align-items:center}.pop-out-content al-button{flex-shrink:0;align-self:center}.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}.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-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:24px;width:24px;height:24px;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{color:#a2a6b8;font-weight:400;font-family:Roboto,sans-serif;white-space:nowrap}.example-accordion-item-header.header-hidden{opacity:.7}.mat-checkbox-margin{margin-left:8px}\n"] }]
         }], ctorParameters: () => [{ type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i1.MatIconRegistry }], propDecorators: { title: [{
                 type: Input
             }], showHeaderCheckbox: [{
@@ -2027,6 +2056,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], titleInput: [{
                 type: ViewChild,
                 args: ['titleInput']
+            }], accordionHeader: [{
+                type: ViewChild,
+                args: ['accordionHeader', { read: ElementRef }]
+            }], generalContainer: [{
+                type: ViewChild,
+                args: ['generalContainer', { read: ElementRef }]
             }] } });
 
 class NewResumeHeaderModule {
@@ -2884,17 +2919,28 @@ class AiApplyBarComponent {
         this.closeClick = new EventEmitter();
         /** Emitted when the chevron icon button is clicked */
         this.chevronClick = new EventEmitter();
+        // Animation state - bar show/hide
+        this.isVisible = false;
     }
     onValueChange(v) {
         this.value = v;
         this.valueChange.emit(v);
     }
+    // Toggle bar visibility
+    toggleBar() {
+        this.isVisible = !this.isVisible;
+    }
+    // Close bar and emit event
+    onClose() {
+        this.isVisible = false;
+        this.closeClick.emit();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiApplyBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AiApplyBarComponent, isStandalone: true, selector: "al-ai-apply-bar", inputs: { dataTestId: "dataTestId", showChevron: "showChevron", showChevronButton: "showChevronButton", placeholder: "placeholder", options: "options", value: "value", disabled: "disabled", applyLabel: "applyLabel", applyDisabled: "applyDisabled", showClose: "showClose", iconOutlined: "iconOutlined", closeButtonTooltip: "closeButtonTooltip", closeButtonTooltipPosition: "closeButtonTooltipPosition", showHelperText: "showHelperText", helperText: "helperText" }, outputs: { valueChange: "valueChange", applyClick: "applyClick", closeClick: "closeClick", chevronClick: "chevronClick" }, ngImport: i0, template: "<div class=\"ai-apply-wrap\" [attr.data-test-id]=\"dataTestId\">\n  <div class=\"ai-apply-rail\">\n    <div class=\"ai-apply-row\">\n      <div class=\"ai-apply-input\">\n        <al-input\n          [labelText]=\"''\"\n          [placeholder]=\"placeholder\"\n          [value]=\"value\"\n          [type]=\"'text'\"\n          [disabled]=\"disabled\"\n          [helperText]=\"false\"\n          [leftIcon]=\"''\"\n          [rightIcon]=\"'expand_more'\"\n          [hasDropDown]=\"true\"\n          [searchfilter]=\"true\"\n          [multipleSelect]=\"false\"\n          [options]=\"options\"\n          [size]=\"'base'\"\n          [types]=\"'plain'\"\n          (change)=\"onValueChange($event)\">\n        </al-input>\n      </div>\n\n      <div class=\"ai-apply-button\">\n        <al-button [label]=\"applyLabel\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'base'\"\n          [state]=\"applyDisabled ? 'disabled' : 'default'\" (onClick)=\"applyClick.emit()\">\n        </al-button>\n        <al-icon-button *ngIf=\"showChevronButton\" icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\"\n          [size]=\"'xl'\" [disabled]=\"applyDisabled\" (onClick)=\"chevronClick.emit()\"\n          [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button>\n      </div>\n    </div>\n\n    <div class=\"ai-apply-helper\" *ngIf=\"showHelperText\">\n      {{ helperText }}\n    </div>\n  </div>\n  <div class=\"ai-apply-close\" *ngIf=\"showClose\">\n    <al-button [buttonType]=\"'icon-circle'\" [color]=\"'grey'\" [outline]=\"false\" [size]=\"'base'\" [iconOnly]=\"true\"\n      [iconOutlined]=\"iconOutlined\" [icon]=\"'close'\" [tooltip]=\"closeButtonTooltip\"\n      [tooltipPosition]=\"closeButtonTooltipPosition\" aria-label=\"Close\" (onClick)=\"closeClick.emit()\"></al-button>\n  </div>\n</div>\n", styles: [":root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}: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}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}.ai-apply-wrap{position:relative;display:inline-flex;align-items:stretch;width:100%;overflow:hidden;gap:8px}.ai-apply-rail{background:#717793cc;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 8px #0000001f;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ai-apply-row,.ai-apply-button{display:flex;align-items:center;gap:4px;height:40px}.ai-apply-button al-button{height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-button al-icon-button{height:24px!important;min-height:24px!important;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-input{flex:1 1 auto;display:flex;align-items:center}.ai-apply-input ::ng-deep al-input{width:100%}.ai-apply-input ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.ai-apply-input ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.ai-apply-input ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.ai-apply-input ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.ai-apply-helper{color:#ffffffb3;font-size:12px;line-height:16px}.ai-apply-close{position:relative;margin-left:auto;z-index:2;display:flex;align-items:start;margin-top:8px}.ai-apply-close ::ng-deep al-button button.white.btn-outlined:hover{background-color:#4b4f62!important;box-shadow:none!important;border:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "al-input", inputs: ["labelText", "label", "placeholder", "value", "formControlName", "dataTestId", "type", "disabled", "helperText", "error", "errorMessage", "leftIcon", "rightIcon", "hasDropDown", "dropDown", "searchfilter", "multipleSelect", "options", "size", "types", "tooltip", "tooltipPosition", "matDatepicker", "dateType"], outputs: ["change", "valueChange", "onColorChange", "monthSelected", "yearSelected"] }, { 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"] }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColour", "iconOutlined", "size", "colour", "disabled", "dataTestId"], outputs: ["onClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AiApplyBarComponent, isStandalone: true, selector: "al-ai-apply-bar", inputs: { dataTestId: "dataTestId", showChevron: "showChevron", showChevronButton: "showChevronButton", placeholder: "placeholder", options: "options", value: "value", disabled: "disabled", applyLabel: "applyLabel", applyDisabled: "applyDisabled", showClose: "showClose", iconOutlined: "iconOutlined", closeButtonTooltip: "closeButtonTooltip", closeButtonTooltipPosition: "closeButtonTooltipPosition", showHelperText: "showHelperText", helperText: "helperText" }, outputs: { valueChange: "valueChange", applyClick: "applyClick", closeClick: "closeClick", chevronClick: "chevronClick" }, ngImport: i0, template: "<div class=\"ai-apply-container\" [attr.data-test-id]=\"dataTestId\">\n\n  <!-- Toggle Button - AI Trigger or Close Button (Fixed Position) -->\n  <div class=\"ai-toggle-button\">\n    <!-- AI Trigger Button - Show when bar is hidden -->\n    <al-button *ngIf=\"!isVisible\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'auto_fix_high'\"\n      [color]=\"'gradient'\" [size]=\"'base'\" aria-label=\"AI Trigger\" (onClick)=\"toggleBar()\">\n    </al-button>\n\n    <!-- Close Button - Show when bar is visible -->\n    <al-button *ngIf=\"isVisible && showClose\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'close'\"\n      [color]=\"'grey'\" [size]=\"'base'\" aria-label=\"Close\" (onClick)=\"toggleBar()\">\n    </al-button>\n  </div>\n\n  <!-- AI Apply Bar - Expands to the LEFT of button -->\n  <div class=\"ai-apply-wrap\" [class.visible]=\"isVisible\" [class.hidden]=\"!isVisible\">\n    <div class=\"ai-apply-rail\">\n      <div class=\"ai-apply-row\">\n        <div class=\"ai-apply-input\">\n          <al-input [labelText]=\"''\" [placeholder]=\"placeholder\" [value]=\"value\" [type]=\"'text'\" [disabled]=\"disabled\"\n            [helperText]=\"false\" [leftIcon]=\"''\" [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\"\n            [multipleSelect]=\"false\" [options]=\"options\" [size]=\"'base'\" [types]=\"'plain'\"\n            (change)=\"onValueChange($event)\">\n          </al-input>\n        </div>\n\n        <div class=\"ai-apply-button\">\n          <al-button [label]=\"applyLabel\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'base'\"\n            [state]=\"applyDisabled ? 'disabled' : 'default'\" (onClick)=\"applyClick.emit()\">\n          </al-button>\n          <al-icon-button *ngIf=\"showChevronButton\" icon=\"chevron_right\" [iconOutlined]=\"true\"\n            [customColour]=\"'#ffffff'\" [size]=\"'xl'\" [disabled]=\"applyDisabled\" (onClick)=\"chevronClick.emit()\"\n            [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\">\n          </al-icon-button>\n        </div>\n      </div>\n\n      <div class=\"ai-apply-helper\" *ngIf=\"showHelperText\">\n        {{ helperText }}\n      </div>\n    </div>\n  </div>\n\n</div>", styles: [":root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}: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}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}.ai-apply-container{position:relative;display:flex;align-items:center;justify-content:flex-end}.ai-toggle-button{position:relative;z-index:50;flex-shrink:0}.ai-apply-wrap{position:absolute;right:40px;display:flex;align-items:stretch;overflow:hidden;transform-origin:right center;transition:width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out .2s}.ai-apply-wrap.hidden{width:0;opacity:0;pointer-events:none;transition:width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out}.ai-apply-wrap.visible{width:350px;opacity:1;pointer-events:auto}.ai-apply-rail{background:#717793cc;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 8px #0000001f;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity .3s ease-out;white-space:nowrap}.ai-apply-wrap.hidden .ai-apply-rail{opacity:0}.ai-apply-wrap.visible .ai-apply-rail{opacity:1;transition-delay:.2s}.ai-apply-row,.ai-apply-button{display:flex;align-items:center;gap:4px;height:40px}.ai-apply-button al-button{height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-button al-icon-button{height:24px!important;min-height:24px!important;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-input{flex:1 1 auto;display:flex;align-items:center}.ai-apply-input ::ng-deep al-input{width:100%}.ai-apply-input ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.ai-apply-input ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.ai-apply-input ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.ai-apply-input ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.ai-apply-helper{color:#ffffffb3;font-size:12px;line-height:16px}.ai-apply-close{position:relative;margin-left:auto;z-index:2;display:flex;align-items:start;margin-top:8px}.ai-apply-close ::ng-deep al-button button.white.btn-outlined:hover{background-color:#4b4f62!important;box-shadow:none!important;border:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "al-input", inputs: ["labelText", "label", "placeholder", "value", "formControlName", "dataTestId", "type", "disabled", "helperText", "error", "errorMessage", "leftIcon", "rightIcon", "hasDropDown", "dropDown", "searchfilter", "multipleSelect", "options", "size", "types", "tooltip", "tooltipPosition", "matDatepicker", "dateType"], outputs: ["change", "valueChange", "onColorChange", "monthSelected", "yearSelected"] }, { 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"] }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColour", "iconOutlined", "size", "colour", "disabled", "dataTestId"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiApplyBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'al-ai-apply-bar', standalone: true, imports: [CommonModule, InputComponent, ButtonComponent, IconButtonComponent], template: "<div class=\"ai-apply-wrap\" [attr.data-test-id]=\"dataTestId\">\n  <div class=\"ai-apply-rail\">\n    <div class=\"ai-apply-row\">\n      <div class=\"ai-apply-input\">\n        <al-input\n          [labelText]=\"''\"\n          [placeholder]=\"placeholder\"\n          [value]=\"value\"\n          [type]=\"'text'\"\n          [disabled]=\"disabled\"\n          [helperText]=\"false\"\n          [leftIcon]=\"''\"\n          [rightIcon]=\"'expand_more'\"\n          [hasDropDown]=\"true\"\n          [searchfilter]=\"true\"\n          [multipleSelect]=\"false\"\n          [options]=\"options\"\n          [size]=\"'base'\"\n          [types]=\"'plain'\"\n          (change)=\"onValueChange($event)\">\n        </al-input>\n      </div>\n\n      <div class=\"ai-apply-button\">\n        <al-button [label]=\"applyLabel\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'base'\"\n          [state]=\"applyDisabled ? 'disabled' : 'default'\" (onClick)=\"applyClick.emit()\">\n        </al-button>\n        <al-icon-button *ngIf=\"showChevronButton\" icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\"\n          [size]=\"'xl'\" [disabled]=\"applyDisabled\" (onClick)=\"chevronClick.emit()\"\n          [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button>\n      </div>\n    </div>\n\n    <div class=\"ai-apply-helper\" *ngIf=\"showHelperText\">\n      {{ helperText }}\n    </div>\n  </div>\n  <div class=\"ai-apply-close\" *ngIf=\"showClose\">\n    <al-button [buttonType]=\"'icon-circle'\" [color]=\"'grey'\" [outline]=\"false\" [size]=\"'base'\" [iconOnly]=\"true\"\n      [iconOutlined]=\"iconOutlined\" [icon]=\"'close'\" [tooltip]=\"closeButtonTooltip\"\n      [tooltipPosition]=\"closeButtonTooltipPosition\" aria-label=\"Close\" (onClick)=\"closeClick.emit()\"></al-button>\n  </div>\n</div>\n", styles: [":root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}: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}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}.ai-apply-wrap{position:relative;display:inline-flex;align-items:stretch;width:100%;overflow:hidden;gap:8px}.ai-apply-rail{background:#717793cc;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 8px #0000001f;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ai-apply-row,.ai-apply-button{display:flex;align-items:center;gap:4px;height:40px}.ai-apply-button al-button{height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-button al-icon-button{height:24px!important;min-height:24px!important;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-input{flex:1 1 auto;display:flex;align-items:center}.ai-apply-input ::ng-deep al-input{width:100%}.ai-apply-input ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.ai-apply-input ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.ai-apply-input ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.ai-apply-input ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.ai-apply-helper{color:#ffffffb3;font-size:12px;line-height:16px}.ai-apply-close{position:relative;margin-left:auto;z-index:2;display:flex;align-items:start;margin-top:8px}.ai-apply-close ::ng-deep al-button button.white.btn-outlined:hover{background-color:#4b4f62!important;box-shadow:none!important;border:none!important}\n"] }]
+            args: [{ selector: 'al-ai-apply-bar', standalone: true, imports: [CommonModule, InputComponent, ButtonComponent, IconButtonComponent], template: "<div class=\"ai-apply-container\" [attr.data-test-id]=\"dataTestId\">\n\n  <!-- Toggle Button - AI Trigger or Close Button (Fixed Position) -->\n  <div class=\"ai-toggle-button\">\n    <!-- AI Trigger Button - Show when bar is hidden -->\n    <al-button *ngIf=\"!isVisible\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'auto_fix_high'\"\n      [color]=\"'gradient'\" [size]=\"'base'\" aria-label=\"AI Trigger\" (onClick)=\"toggleBar()\">\n    </al-button>\n\n    <!-- Close Button - Show when bar is visible -->\n    <al-button *ngIf=\"isVisible && showClose\" [iconOnly]=\"true\" [buttonType]=\"'icon-circle'\" [icon]=\"'close'\"\n      [color]=\"'grey'\" [size]=\"'base'\" aria-label=\"Close\" (onClick)=\"toggleBar()\">\n    </al-button>\n  </div>\n\n  <!-- AI Apply Bar - Expands to the LEFT of button -->\n  <div class=\"ai-apply-wrap\" [class.visible]=\"isVisible\" [class.hidden]=\"!isVisible\">\n    <div class=\"ai-apply-rail\">\n      <div class=\"ai-apply-row\">\n        <div class=\"ai-apply-input\">\n          <al-input [labelText]=\"''\" [placeholder]=\"placeholder\" [value]=\"value\" [type]=\"'text'\" [disabled]=\"disabled\"\n            [helperText]=\"false\" [leftIcon]=\"''\" [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\"\n            [multipleSelect]=\"false\" [options]=\"options\" [size]=\"'base'\" [types]=\"'plain'\"\n            (change)=\"onValueChange($event)\">\n          </al-input>\n        </div>\n\n        <div class=\"ai-apply-button\">\n          <al-button [label]=\"applyLabel\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'base'\"\n            [state]=\"applyDisabled ? 'disabled' : 'default'\" (onClick)=\"applyClick.emit()\">\n          </al-button>\n          <al-icon-button *ngIf=\"showChevronButton\" icon=\"chevron_right\" [iconOutlined]=\"true\"\n            [customColour]=\"'#ffffff'\" [size]=\"'xl'\" [disabled]=\"applyDisabled\" (onClick)=\"chevronClick.emit()\"\n            [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\">\n          </al-icon-button>\n        </div>\n      </div>\n\n      <div class=\"ai-apply-helper\" *ngIf=\"showHelperText\">\n        {{ helperText }}\n      </div>\n    </div>\n  </div>\n\n</div>", styles: [":root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}: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}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}.ai-apply-container{position:relative;display:flex;align-items:center;justify-content:flex-end}.ai-toggle-button{position:relative;z-index:50;flex-shrink:0}.ai-apply-wrap{position:absolute;right:40px;display:flex;align-items:stretch;overflow:hidden;transform-origin:right center;transition:width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out .2s}.ai-apply-wrap.hidden{width:0;opacity:0;pointer-events:none;transition:width .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out}.ai-apply-wrap.visible{width:350px;opacity:1;pointer-events:auto}.ai-apply-rail{background:#717793cc;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 8px #0000001f;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity .3s ease-out;white-space:nowrap}.ai-apply-wrap.hidden .ai-apply-rail{opacity:0}.ai-apply-wrap.visible .ai-apply-rail{opacity:1;transition-delay:.2s}.ai-apply-row,.ai-apply-button{display:flex;align-items:center;gap:4px;height:40px}.ai-apply-button al-button{height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-button al-icon-button{height:24px!important;min-height:24px!important;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-input{flex:1 1 auto;display:flex;align-items:center}.ai-apply-input ::ng-deep al-input{width:100%}.ai-apply-input ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.ai-apply-input ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.ai-apply-input ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.ai-apply-input ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.ai-apply-helper{color:#ffffffb3;font-size:12px;line-height:16px}.ai-apply-close{position:relative;margin-left:auto;z-index:2;display:flex;align-items:start;margin-top:8px}.ai-apply-close ::ng-deep al-button button.white.btn-outlined:hover{background-color:#4b4f62!important;box-shadow:none!important;border:none!important}\n"] }]
         }], propDecorators: { dataTestId: [{
                 type: Input
             }], showChevron: [{
@@ -3035,11 +3081,11 @@ class ResponsiveLayoutComponent {
         return this.dataTestId || null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResponsiveLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResponsiveLayoutComponent, isStandalone: true, selector: "app-flex-grid", inputs: { dataTestId: "dataTestId", type: "type", gap: "gap", marginBottom: "marginBottom", countMobile: "countMobile", countMobileSm: "countMobileSm", countTablet: "countTablet", countDesktop: "countDesktop", mobRow: "mobRow", mobCols: "mobCols", rows: "rows", tabRow: "tabRow", desktop: "desktop" }, host: { properties: { "style.--gap": "this.cssGap", "style.--count-mobile": "this.cssCountMobile", "style.--count-mobile-sm": "this.cssCountMobileSm", "style.--count-tablet": "this.cssCountTablet", "style.--count-desktop": "this.cssCountDesktop", "style.--mb": "this.cssMarginBottom", "class.row": "this.isRow", "class.col": "this.isCol", "attr.data-testid": "this.dataTestIdAttr" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:grid;gap:var(--gap, 8px);width:100%;--current-count: var(--count-desktop, 4)}:host(.row){grid-auto-flow:row;grid-template-columns:repeat(var(--current-count),minmax(0,1fr));margin-bottom:var(--mb, 16px)}:host(.col){grid-auto-flow:row;grid-template-columns:repeat(var(--current-count),minmax(0,1fr))}@media (max-width: 767.98px){:host{--current-count: var(--count-mobile, 1)}}@media (min-width: 768px) and (max-width: 1023.98px){:host{--current-count: var(--count-tablet, 2)}}@media (min-width: 1024px){:host{--current-count: var(--count-desktop, 3)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResponsiveLayoutComponent, isStandalone: true, selector: "app-flex-grid", inputs: { dataTestId: "dataTestId", type: "type", gap: "gap", marginBottom: "marginBottom", countMobile: "countMobile", countMobileSm: "countMobileSm", countTablet: "countTablet", countDesktop: "countDesktop", mobRow: "mobRow", mobCols: "mobCols", rows: "rows", tabRow: "tabRow", desktop: "desktop" }, host: { properties: { "style.--gap": "this.cssGap", "style.--count-mobile": "this.cssCountMobile", "style.--count-mobile-sm": "this.cssCountMobileSm", "style.--count-tablet": "this.cssCountTablet", "style.--count-desktop": "this.cssCountDesktop", "style.--mb": "this.cssMarginBottom", "class.row": "this.isRow", "class.col": "this.isCol", "attr.data-testid": "this.dataTestIdAttr" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:grid;gap:var(--gap, 8px);width:100%;--current-count: var(--count-desktop, 4);container-type:inline-size;container-name:flex-grid}:host(.row){grid-auto-flow:row;grid-template-columns:repeat(var(--current-count),minmax(0,1fr));margin-bottom:var(--mb, 16px)}:host(.col){grid-auto-flow:row;grid-template-columns:repeat(var(--current-count),minmax(0,1fr))}@media (max-width: 767.98px){:host{--current-count: var(--count-mobile, 1)}}@media (min-width: 768px) and (max-width: 1023.98px){:host{--current-count: var(--count-tablet, 2)}}@media (min-width: 1024px){:host{--current-count: var(--count-desktop, 3)}}@container flex-grid (max-width: 600px){:host(.row),:host(.col){--current-count: 1 !important;grid-template-columns:1fr!important}}@container form-wrapper (max-width: 600px){:host(.row),:host(.col){--current-count: 1 !important;grid-template-columns:1fr!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResponsiveLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-flex-grid', standalone: true, imports: [CommonModule], template: "<ng-content></ng-content>", styles: [":host{display:grid;gap:var(--gap, 8px);width:100%;--current-count: var(--count-desktop, 4)}:host(.row){grid-auto-flow:row;grid-template-columns:repeat(var(--current-count),minmax(0,1fr));margin-bottom:var(--mb, 16px)}:host(.col){grid-auto-flow:row;grid-template-columns:repeat(var(--current-count),minmax(0,1fr))}@media (max-width: 767.98px){:host{--current-count: var(--count-mobile, 1)}}@media (min-width: 768px) and (max-width: 1023.98px){:host{--current-count: var(--count-tablet, 2)}}@media (min-width: 1024px){:host{--current-count: var(--count-desktop, 3)}}\n"] }]
+            args: [{ selector: 'app-flex-grid', standalone: true, imports: [CommonModule], template: "<ng-content></ng-content>", styles: [":host{display:grid;gap:var(--gap, 8px);width:100%;--current-count: var(--count-desktop, 4);container-type:inline-size;container-name:flex-grid}:host(.row){grid-auto-flow:row;grid-template-columns:repeat(var(--current-count),minmax(0,1fr));margin-bottom:var(--mb, 16px)}:host(.col){grid-auto-flow:row;grid-template-columns:repeat(var(--current-count),minmax(0,1fr))}@media (max-width: 767.98px){:host{--current-count: var(--count-mobile, 1)}}@media (min-width: 768px) and (max-width: 1023.98px){:host{--current-count: var(--count-tablet, 2)}}@media (min-width: 1024px){:host{--current-count: var(--count-desktop, 3)}}@container flex-grid (max-width: 600px){:host(.row),:host(.col){--current-count: 1 !important;grid-template-columns:1fr!important}}@container form-wrapper (max-width: 600px){:host(.row),:host(.col){--current-count: 1 !important;grid-template-columns:1fr!important}}\n"] }]
         }], propDecorators: { dataTestId: [{
                 type: Input
             }], type: [{
@@ -6085,11 +6131,11 @@ class EditableFormWrapperComponent {
         handleScroll(); // Initial position
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditableFormWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditableFormWrapperComponent, isStandalone: true, selector: "al-form", inputs: { testId: "testId", showLeftButton: "showLeftButton", showSaveButton: "showSaveButton", showDeleteButton: "showDeleteButton", leftContainerClass: "leftContainerClass", leftContainerStyle: "leftContainerStyle", scrollContainer: "scrollContainer" }, outputs: { leftButtonClick: "leftButtonClick", saveButtonClick: "saveButtonClick", deleteButtonClick: "deleteButtonClick" }, viewQueries: [{ propertyName: "wrapperRef", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "buttonGroupRef", first: true, predicate: ["buttonGroup"], descendants: true }, { propertyName: "leftButtonRef", first: true, predicate: ["leftButton"], descendants: true }], ngImport: i0, template: "<div class=\"al-form-wrapper\" #wrapper [attr.data-test-id]=\"testId\">\n  <div *ngIf=\"showLeftButton\" #leftButton class=\"fab left\">\n    <al-button [buttonType]=\"'icon-circle'\" [iconOnly]=\"true\"\n      [leftIcon]=\"isLeftButtonActive ? 'close' : 'auto_fix_high'\"\n      [arialabel]=\"isLeftButtonActive ? 'Close' : 'Edit'\"\n      [size]=\"'base'\"\n      [color]=\"isLeftButtonActive ? 'grey' : 'gradient'\"\n      (onClick)=\"handleLeftButtonClick($event)\">\n    </al-button>\n    <div *ngIf=\"isLeftButtonActive\"\n         class=\"left-button-container\"\n         [ngClass]=\"leftContainerClass\"\n         [ngStyle]=\"leftContainerStyle\">\n      <ng-content select=\"[leftButtonContent]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"inner\"><ng-content></ng-content></div>\n  <div class=\"fab-group right\" #buttonGroup><al-button *ngIf=\"showSaveButton\" class=\"fab\" [buttonType]=\"'icon-circle'\"\n      [iconOnly]=\"true\" [leftIcon]=\"'save'\" [arialabel]=\"'Save'\" [size]=\"'base'\"  iconOutlined=\"true\"\n      [color]=\"'green'\" (onClick)=\"saveButtonClick.emit($event)\"></al-button><al-button *ngIf=\"showDeleteButton\" class=\"fab warn\" [buttonType]=\"'icon-circle'\"\n      [iconOnly]=\"true\" [leftIcon]=\"'close'\" [arialabel]=\"'Delete'\" [size]=\"'base'\" [color]=\"'error'\" iconOutlined=\"true\"\n      (onClick)=\"deleteButtonClick.emit($event)\"></al-button>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins: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&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}: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}:host{display:block;position:relative;padding:0}:host ::ng-deep .al-form__grid{display:grid;gap:16px;margin-top:16px}:host ::ng-deep .al-form__grid.cols-1{grid-template-columns:1fr}:host ::ng-deep .al-form__grid.cols-2{grid-template-columns:1fr 1fr}:host ::ng-deep .al-form__grid.cols-3{grid-template-columns:1fr 1fr 1fr}:host ::ng-deep .al-form__grid .full{grid-column:1/-1}.al-form-wrapper{position:relative;border-radius:16px;background:transparent;width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.al-form-wrapper:before{content:\"\";position:absolute;inset:0;border:1px solid var(--Base-Blue, #6581EA);border-radius:10px;box-shadow:0 0 0 6px #5473e814;pointer-events:none;z-index:1}.al-form-wrapper>.inner{position:relative;padding:32px!important;border-radius:10px;background:#fff;box-sizing:border-box;z-index:0}.al-form-wrapper>.inner>:first-child{margin-top:0!important}.al-form-wrapper>.inner>:last-child{margin-bottom:0!important}.al-form__header{display:flex;gap:10px;align-items:baseline}.al-form__title{font-weight:600;color:#222}.al-form__hint{color:#7a818f}.al-form__paragraph{margin:6px 0 0;color:#3a3f4a}.al-form__demo-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}@media (max-width: 767.98px){.al-form__demo-form{grid-template-columns:1fr}}.al-form__demo-form .full{grid-column:1/-1}.al-form__field{display:flex;flex-direction:column;gap:6px}.al-form__field label{font-size:12px;color:#5a6170}.al-form__control{width:100%;padding:10px 12px;border:1px solid #d9def4;border-radius:10px;background:#fff;color:#2a2f3a;outline:none;box-sizing:border-box;box-shadow:0 1px #5877ff0f,inset 0 0 0 2px #5877ff08;transition:box-shadow .15s ease,border-color .15s ease}.al-form__control:focus{border-color:#5877ff99;box-shadow:0 0 0 3px #5877ff24}select.al-form__control{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7a86ff 50%),linear-gradient(135deg,#7a86ff 50%,transparent 50%);background-position:calc(100% - 18px) calc(1em + 2px),calc(100% - 13px) calc(1em + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}.fab.left{position:absolute;left:-16px;top:0;z-index:10;background-color:#fff;border-radius:50%;will-change:transform;transition:transform .1s ease-out}.fab.left .left-button-container{position:absolute;left:56px;top:0;z-index:1;pointer-events:auto}.fab-group.right{position:absolute;right:-16px;top:0;display:flex;flex-direction:column;border-radius:50%;gap:8px;z-index:2;background-color:#fff;will-change:transform;transition:transform .1s ease-out}:host ::ng-deep app-flex-grid+app-flex-grid{margin-top:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditableFormWrapperComponent, isStandalone: true, selector: "al-form", inputs: { testId: "testId", showLeftButton: "showLeftButton", showSaveButton: "showSaveButton", showDeleteButton: "showDeleteButton", leftContainerClass: "leftContainerClass", leftContainerStyle: "leftContainerStyle", scrollContainer: "scrollContainer" }, outputs: { leftButtonClick: "leftButtonClick", saveButtonClick: "saveButtonClick", deleteButtonClick: "deleteButtonClick" }, viewQueries: [{ propertyName: "wrapperRef", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "buttonGroupRef", first: true, predicate: ["buttonGroup"], descendants: true }, { propertyName: "leftButtonRef", first: true, predicate: ["leftButton"], descendants: true }], ngImport: i0, template: "<div class=\"al-form-wrapper\" #wrapper [attr.data-test-id]=\"testId\">\n  <div *ngIf=\"showLeftButton\" #leftButton class=\"fab left\">\n    <al-button [buttonType]=\"'icon-circle'\" [iconOnly]=\"true\"\n      [leftIcon]=\"isLeftButtonActive ? 'close' : 'auto_fix_high'\"\n      [arialabel]=\"isLeftButtonActive ? 'Close' : 'Edit'\"\n      [size]=\"'base'\"\n      [color]=\"isLeftButtonActive ? 'grey' : 'gradient'\"\n      (onClick)=\"handleLeftButtonClick($event)\">\n    </al-button>\n    <div *ngIf=\"isLeftButtonActive\"\n         class=\"left-button-container\"\n         [ngClass]=\"leftContainerClass\"\n         [ngStyle]=\"leftContainerStyle\">\n      <ng-content select=\"[leftButtonContent]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"inner\"><ng-content></ng-content></div>\n  <div class=\"fab-group right\" #buttonGroup><al-button *ngIf=\"showSaveButton\" class=\"fab\" [buttonType]=\"'icon-circle'\"\n      [iconOnly]=\"true\" [leftIcon]=\"'save'\" [arialabel]=\"'Save'\" [size]=\"'base'\"  iconOutlined=\"true\"\n      [color]=\"'green'\" (onClick)=\"saveButtonClick.emit($event)\"></al-button><al-button *ngIf=\"showDeleteButton\" class=\"fab warn\" [buttonType]=\"'icon-circle'\"\n      [iconOnly]=\"true\" [leftIcon]=\"'close'\" [arialabel]=\"'Delete'\" [size]=\"'base'\" [color]=\"'error'\" iconOutlined=\"true\"\n      (onClick)=\"deleteButtonClick.emit($event)\"></al-button>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins: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&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}: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}:host{display:block;position:relative;padding:0}:host ::ng-deep .al-form__grid{display:grid;gap:16px;margin-top:16px}:host ::ng-deep .al-form__grid.cols-1{grid-template-columns:1fr}:host ::ng-deep .al-form__grid.cols-2{grid-template-columns:1fr 1fr}:host ::ng-deep .al-form__grid.cols-3{grid-template-columns:1fr 1fr 1fr}:host ::ng-deep .al-form__grid .full{grid-column:1/-1}.al-form-wrapper{position:relative;border-radius:16px;background:transparent;width:100%;max-width:100%;box-sizing:border-box;overflow:visible;container-type:inline-size;container-name:form-wrapper}.al-form-wrapper:before{content:\"\";position:absolute;inset:0;border:1px solid var(--Base-Blue, #6581EA);border-radius:10px;box-shadow:0 0 0 6px #5473e814;pointer-events:none;z-index:1}.al-form-wrapper>.inner{position:relative;padding:32px!important;border-radius:10px;background:#fff;box-sizing:border-box;z-index:0}.al-form-wrapper>.inner>:first-child{margin-top:0!important}.al-form-wrapper>.inner>:last-child{margin-bottom:0!important}.al-form__header{display:flex;gap:10px;align-items:baseline}.al-form__title{font-weight:600;color:#222}.al-form__hint{color:#7a818f}.al-form__paragraph{margin:6px 0 0;color:#3a3f4a}.al-form__demo-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}@media (max-width: 767.98px){.al-form__demo-form{grid-template-columns:1fr}}.al-form__demo-form .full{grid-column:1/-1}.al-form__field{display:flex;flex-direction:column;gap:6px}.al-form__field label{font-size:12px;color:#5a6170}.al-form__control{width:100%;padding:10px 12px;border:1px solid #d9def4;border-radius:10px;background:#fff;color:#2a2f3a;outline:none;box-sizing:border-box;box-shadow:0 1px #5877ff0f,inset 0 0 0 2px #5877ff08;transition:box-shadow .15s ease,border-color .15s ease}.al-form__control:focus{border-color:#5877ff99;box-shadow:0 0 0 3px #5877ff24}select.al-form__control{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7a86ff 50%),linear-gradient(135deg,#7a86ff 50%,transparent 50%);background-position:calc(100% - 18px) calc(1em + 2px),calc(100% - 13px) calc(1em + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}.fab.left{position:absolute;left:-16px;top:0;z-index:10;background-color:#fff;border-radius:50%;will-change:transform;transition:transform .1s ease-out}.fab.left .left-button-container{position:absolute;left:56px;top:0;z-index:1;pointer-events:auto}.fab-group.right{position:absolute;right:-16px;top:0;display:flex;flex-direction:column;border-radius:50%;gap:8px;z-index:2;background-color:#fff;will-change:transform;transition:transform .1s ease-out}:host ::ng-deep app-flex-grid+app-flex-grid{margin-top:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditableFormWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'al-form', standalone: true, imports: [CommonModule, MatIconModule, MatButtonModule, ButtonComponent], changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"al-form-wrapper\" #wrapper [attr.data-test-id]=\"testId\">\n  <div *ngIf=\"showLeftButton\" #leftButton class=\"fab left\">\n    <al-button [buttonType]=\"'icon-circle'\" [iconOnly]=\"true\"\n      [leftIcon]=\"isLeftButtonActive ? 'close' : 'auto_fix_high'\"\n      [arialabel]=\"isLeftButtonActive ? 'Close' : 'Edit'\"\n      [size]=\"'base'\"\n      [color]=\"isLeftButtonActive ? 'grey' : 'gradient'\"\n      (onClick)=\"handleLeftButtonClick($event)\">\n    </al-button>\n    <div *ngIf=\"isLeftButtonActive\"\n         class=\"left-button-container\"\n         [ngClass]=\"leftContainerClass\"\n         [ngStyle]=\"leftContainerStyle\">\n      <ng-content select=\"[leftButtonContent]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"inner\"><ng-content></ng-content></div>\n  <div class=\"fab-group right\" #buttonGroup><al-button *ngIf=\"showSaveButton\" class=\"fab\" [buttonType]=\"'icon-circle'\"\n      [iconOnly]=\"true\" [leftIcon]=\"'save'\" [arialabel]=\"'Save'\" [size]=\"'base'\"  iconOutlined=\"true\"\n      [color]=\"'green'\" (onClick)=\"saveButtonClick.emit($event)\"></al-button><al-button *ngIf=\"showDeleteButton\" class=\"fab warn\" [buttonType]=\"'icon-circle'\"\n      [iconOnly]=\"true\" [leftIcon]=\"'close'\" [arialabel]=\"'Delete'\" [size]=\"'base'\" [color]=\"'error'\" iconOutlined=\"true\"\n      (onClick)=\"deleteButtonClick.emit($event)\"></al-button>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins: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&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}: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}:host{display:block;position:relative;padding:0}:host ::ng-deep .al-form__grid{display:grid;gap:16px;margin-top:16px}:host ::ng-deep .al-form__grid.cols-1{grid-template-columns:1fr}:host ::ng-deep .al-form__grid.cols-2{grid-template-columns:1fr 1fr}:host ::ng-deep .al-form__grid.cols-3{grid-template-columns:1fr 1fr 1fr}:host ::ng-deep .al-form__grid .full{grid-column:1/-1}.al-form-wrapper{position:relative;border-radius:16px;background:transparent;width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.al-form-wrapper:before{content:\"\";position:absolute;inset:0;border:1px solid var(--Base-Blue, #6581EA);border-radius:10px;box-shadow:0 0 0 6px #5473e814;pointer-events:none;z-index:1}.al-form-wrapper>.inner{position:relative;padding:32px!important;border-radius:10px;background:#fff;box-sizing:border-box;z-index:0}.al-form-wrapper>.inner>:first-child{margin-top:0!important}.al-form-wrapper>.inner>:last-child{margin-bottom:0!important}.al-form__header{display:flex;gap:10px;align-items:baseline}.al-form__title{font-weight:600;color:#222}.al-form__hint{color:#7a818f}.al-form__paragraph{margin:6px 0 0;color:#3a3f4a}.al-form__demo-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}@media (max-width: 767.98px){.al-form__demo-form{grid-template-columns:1fr}}.al-form__demo-form .full{grid-column:1/-1}.al-form__field{display:flex;flex-direction:column;gap:6px}.al-form__field label{font-size:12px;color:#5a6170}.al-form__control{width:100%;padding:10px 12px;border:1px solid #d9def4;border-radius:10px;background:#fff;color:#2a2f3a;outline:none;box-sizing:border-box;box-shadow:0 1px #5877ff0f,inset 0 0 0 2px #5877ff08;transition:box-shadow .15s ease,border-color .15s ease}.al-form__control:focus{border-color:#5877ff99;box-shadow:0 0 0 3px #5877ff24}select.al-form__control{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7a86ff 50%),linear-gradient(135deg,#7a86ff 50%,transparent 50%);background-position:calc(100% - 18px) calc(1em + 2px),calc(100% - 13px) calc(1em + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}.fab.left{position:absolute;left:-16px;top:0;z-index:10;background-color:#fff;border-radius:50%;will-change:transform;transition:transform .1s ease-out}.fab.left .left-button-container{position:absolute;left:56px;top:0;z-index:1;pointer-events:auto}.fab-group.right{position:absolute;right:-16px;top:0;display:flex;flex-direction:column;border-radius:50%;gap:8px;z-index:2;background-color:#fff;will-change:transform;transition:transform .1s ease-out}:host ::ng-deep app-flex-grid+app-flex-grid{margin-top:16px}\n"] }]
+            args: [{ selector: 'al-form', standalone: true, imports: [CommonModule, MatIconModule, MatButtonModule, ButtonComponent], changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"al-form-wrapper\" #wrapper [attr.data-test-id]=\"testId\">\n  <div *ngIf=\"showLeftButton\" #leftButton class=\"fab left\">\n    <al-button [buttonType]=\"'icon-circle'\" [iconOnly]=\"true\"\n      [leftIcon]=\"isLeftButtonActive ? 'close' : 'auto_fix_high'\"\n      [arialabel]=\"isLeftButtonActive ? 'Close' : 'Edit'\"\n      [size]=\"'base'\"\n      [color]=\"isLeftButtonActive ? 'grey' : 'gradient'\"\n      (onClick)=\"handleLeftButtonClick($event)\">\n    </al-button>\n    <div *ngIf=\"isLeftButtonActive\"\n         class=\"left-button-container\"\n         [ngClass]=\"leftContainerClass\"\n         [ngStyle]=\"leftContainerStyle\">\n      <ng-content select=\"[leftButtonContent]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"inner\"><ng-content></ng-content></div>\n  <div class=\"fab-group right\" #buttonGroup><al-button *ngIf=\"showSaveButton\" class=\"fab\" [buttonType]=\"'icon-circle'\"\n      [iconOnly]=\"true\" [leftIcon]=\"'save'\" [arialabel]=\"'Save'\" [size]=\"'base'\"  iconOutlined=\"true\"\n      [color]=\"'green'\" (onClick)=\"saveButtonClick.emit($event)\"></al-button><al-button *ngIf=\"showDeleteButton\" class=\"fab warn\" [buttonType]=\"'icon-circle'\"\n      [iconOnly]=\"true\" [leftIcon]=\"'close'\" [arialabel]=\"'Delete'\" [size]=\"'base'\" [color]=\"'error'\" iconOutlined=\"true\"\n      (onClick)=\"deleteButtonClick.emit($event)\"></al-button>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins: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&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}: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}:host{display:block;position:relative;padding:0}:host ::ng-deep .al-form__grid{display:grid;gap:16px;margin-top:16px}:host ::ng-deep .al-form__grid.cols-1{grid-template-columns:1fr}:host ::ng-deep .al-form__grid.cols-2{grid-template-columns:1fr 1fr}:host ::ng-deep .al-form__grid.cols-3{grid-template-columns:1fr 1fr 1fr}:host ::ng-deep .al-form__grid .full{grid-column:1/-1}.al-form-wrapper{position:relative;border-radius:16px;background:transparent;width:100%;max-width:100%;box-sizing:border-box;overflow:visible;container-type:inline-size;container-name:form-wrapper}.al-form-wrapper:before{content:\"\";position:absolute;inset:0;border:1px solid var(--Base-Blue, #6581EA);border-radius:10px;box-shadow:0 0 0 6px #5473e814;pointer-events:none;z-index:1}.al-form-wrapper>.inner{position:relative;padding:32px!important;border-radius:10px;background:#fff;box-sizing:border-box;z-index:0}.al-form-wrapper>.inner>:first-child{margin-top:0!important}.al-form-wrapper>.inner>:last-child{margin-bottom:0!important}.al-form__header{display:flex;gap:10px;align-items:baseline}.al-form__title{font-weight:600;color:#222}.al-form__hint{color:#7a818f}.al-form__paragraph{margin:6px 0 0;color:#3a3f4a}.al-form__demo-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}@media (max-width: 767.98px){.al-form__demo-form{grid-template-columns:1fr}}.al-form__demo-form .full{grid-column:1/-1}.al-form__field{display:flex;flex-direction:column;gap:6px}.al-form__field label{font-size:12px;color:#5a6170}.al-form__control{width:100%;padding:10px 12px;border:1px solid #d9def4;border-radius:10px;background:#fff;color:#2a2f3a;outline:none;box-sizing:border-box;box-shadow:0 1px #5877ff0f,inset 0 0 0 2px #5877ff08;transition:box-shadow .15s ease,border-color .15s ease}.al-form__control:focus{border-color:#5877ff99;box-shadow:0 0 0 3px #5877ff24}select.al-form__control{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7a86ff 50%),linear-gradient(135deg,#7a86ff 50%,transparent 50%);background-position:calc(100% - 18px) calc(1em + 2px),calc(100% - 13px) calc(1em + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}.fab.left{position:absolute;left:-16px;top:0;z-index:10;background-color:#fff;border-radius:50%;will-change:transform;transition:transform .1s ease-out}.fab.left .left-button-container{position:absolute;left:56px;top:0;z-index:1;pointer-events:auto}.fab-group.right{position:absolute;right:-16px;top:0;display:flex;flex-direction:column;border-radius:50%;gap:8px;z-index:2;background-color:#fff;will-change:transform;transition:transform .1s ease-out}:host ::ng-deep app-flex-grid+app-flex-grid{margin-top:16px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { testId: [{
                 type: Input
             }], showLeftButton: [{
@@ -6204,11 +6250,11 @@ class ResumeEntriesComponent {
         return this.reappliedEntries.has(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResumeEntriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResumeEntriesComponent, isStandalone: true, selector: "al-resume-entries", inputs: { entries: "entries", showHeader: "showHeader", showDescriptionLabel: "showDescriptionLabel", showCompany: "showCompany", showJobTitle: "showJobTitle", showDates: "showDates", showLocation: "showLocation", showTimeline: "showTimeline", showReapplyButton: "showReapplyButton", showLoader: "showLoader", loaderForAllEntries: "loaderForAllEntries", loaderStatus: "loaderStatus", loaderSize: "loaderSize", skills: "skills", companyTooltip: "companyTooltip", jobTitleTooltip: "jobTitleTooltip", dateTooltip: "dateTooltip", locationTooltip: "locationTooltip", descriptionTooltip: "descriptionTooltip", tooltipPosition: "tooltipPosition", isSectionHidden: "isSectionHidden" }, outputs: { reapplyClick: "reapplyClick", undoClick: "undoClick" }, ngImport: i0, template: "<div class=\"resume-entries-container\">\n  <div *ngFor=\"let entry of entries; let i = index\" class=\"resume-entry\" [class.with-timeline]=\"showTimeline\"\n    [class.is-hidden]=\"isSectionHidden\">\n    <div *ngIf=\"showLoader && loaderForAllEntries\" class=\"entry-loader-container\"><al-loader [status]=\"loaderStatus\"\n        [size]=\"loaderSize\" [showText]=\"true\" [dataTestId]=\"'entry-' + i + '-loader'\"></al-loader></div><ng-container\n      *ngIf=\"!showLoader || !loaderForAllEntries\">\n      <div *ngIf=\"showTimeline\" class=\"timeline-indicator\">\n        <div class=\"timeline-dot\"></div>\n        <div class=\"timeline-line\"></div>\n      </div>\n      <div class=\"resume-entry-content\">\n        <div *ngIf=\"showHeader\" class=\"entry-header\">\n          <div class=\"header-left\">\n            <!-- Company / Institution: always on top, shows placeholder when no value -->\n            <div *ngIf=\"showCompany\" class=\"mobile-order-2\" [matTooltip]=\"companyTooltip\"\n              [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!companyTooltip\">\n              <lib-field-placeholder\n                [value]=\"entry.companyName?.trim() ? entry.companyName : (entry.institution?.trim() ? entry.institution : undefined)\"\n                [placeholder]=\"'Company Name / Institution'\" valueClass=\"font-text-lg-bold\"\n                [testId]=\"'entry-' + i + '-company'\" [compact]=\"true\">\n              </lib-field-placeholder>\n            </div>\n\n            <!-- Job title / Course name: always below company line -->\n            <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\" [matTooltip]=\"jobTitleTooltip\"\n              [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!jobTitleTooltip\">\n              <lib-field-placeholder [value]=\"entry.jobTitle || entry.courseName\"\n                [placeholder]=\"'Job title / Course name'\" valueClass=\"font-title-text\"\n                [testId]=\"'entry-' + i + '-title'\" [compact]=\"true\">\n              </lib-field-placeholder>\n            </div>\n          </div>\n          <div class=\"header-right\">\n            <div class=\"date-range mobile-order-1\" *ngIf=\"showDates\" [matTooltip]=\"dateTooltip\"\n              [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!dateTooltip\">\n              <!-- Start Date: always render; show placeholder when no value -->\n              <lib-field-placeholder [value]=\"entry.startDate?.trim() ? entry.startDate : undefined\"\n                [placeholder]=\"'Start Date'\" valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-start-date'\"\n                [compact]=\"true\">\n              </lib-field-placeholder>\n\n              <span class=\"date-separator\">-</span>\n\n              <!-- End Date / Present: always render; show placeholder when no end date -->\n              <lib-field-placeholder [value]=\"entry.isPresent\n                           ? 'Present'\n                           : (entry.endDate?.trim() ? entry.endDate : undefined)\" [placeholder]=\"'End Date'\"\n                valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-end-date'\" [compact]=\"true\">\n              </lib-field-placeholder>\n            </div>\n            <div class=\"location-row mobile-order-4\" *ngIf=\"showLocation\" [matTooltip]=\"locationTooltip\"\n              [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!locationTooltip\"><lib-field-placeholder\n                [value]=\"entry.city\" [placeholder]=\"'City'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-city'\" [compact]=\"true\"></lib-field-placeholder><lib-field-placeholder\n                [value]=\"entry.region\" [placeholder]=\"'Region'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-region'\" [compact]=\"true\"></lib-field-placeholder><lib-field-placeholder\n                [value]=\"entry.country\" [placeholder]=\"'Country'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-country'\" [compact]=\"true\"></lib-field-placeholder></div>\n          </div>\n        </div>\n        <div class=\"descriptions-container\">\n          <div *ngIf=\"showLoader && !loaderForAllEntries\" class=\"loader-container\">\n            <al-loader [status]=\"loaderStatus\" [size]=\"loaderSize\" [showText]=\"true\"\n              [dataTestId]=\"'entry-' + i + '-loader'\">\n            </al-loader>\n          </div>\n\n          <div *ngIf=\"!showLoader || loaderForAllEntries\">\n            <div *ngFor=\"let desc of entry.descriptions; let descIndex = index\" class=\"description-item\"\n              [matTooltip]=\"descriptionTooltip\" [matTooltipPosition]=\"tooltipPosition\"\n              [matTooltipDisabled]=\"!descriptionTooltip\">\n              <label *ngIf=\"showDescriptionLabel\" class=\"description-label\">Description</label>\n              <lib-field-placeholder [value]=\"desc\" [placeholder]=\"'Missing item'\" [padded]=\"true\"\n                valueClass=\"font-text-base\" [testId]=\"'entry-' + i + '-desc-' + descIndex\">\n              </lib-field-placeholder>\n            </div>\n          </div>\n          <div class=\"reapply-button-container\" *ngIf=\"showReapplyButton\"><al-button *ngIf=\"!isReapplied(i)\"\n              [label]=\"'Re-apply'\" [buttonType]=\"'icon-label'\" [leftIcon]=\"'refresh'\" [category]=\"'gradient'\"\n              [size]=\"'xs'\" [dataTestId]=\"'entry-' + i + '-reapply'\"\n              (onClick)=\"onReapplyClick(entry, i)\"></al-button><al-button *ngIf=\"isReapplied(i)\" [label]=\"'Undo'\"\n              [buttonType]=\"'icon-label'\" [leftIcon]=\"'undo'\" [category]=\"'grey'\" [size]=\"'xs'\"\n              [dataTestId]=\"'entry-' + i + '-undo'\" (onClick)=\"onUndoClick(entry, i)\"></al-button></div>\n          <hr *ngIf=\"i < entries.length - 1\" class=\"entry-separator\" [class.with-timeline-separator]=\"showTimeline\" />\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"resume-entry-projection\"><ng-content></ng-content></div>\n  <div *ngIf=\"skills && skills.length > 0\" class=\"skill-section-common\">\n    <div class=\"skill-list-items\">\n      <ul>\n        <li *ngFor=\"let skill of skills\" class=\"list-items\">{{ skill }}</li>\n      </ul>\n    </div>\n  </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins: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&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}: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}.resume-entries-container{display:flex;flex-direction:column;width:100%;background-color:#fff}.resume-entry{display:flex;flex-direction:column;width:100%;position:relative;cursor:pointer}.resume-entry.is-hidden{opacity:.3}.resume-entry.is-hidden .description-item ::ng-deep .value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.resume-entry.with-timeline{display:flex;flex-direction:row;flex-wrap:nowrap;gap:12px;position:relative}.resume-entry.with-timeline .entry-separator{flex-basis:100%;order:10}.resume-entry.with-timeline .timeline-indicator{z-index:0}.resume-entry.with-timeline .resume-entry-content{flex:1;min-width:0}.resume-entry-content{display:flex;flex-direction:column;flex:1;width:100%;gap:12px;padding-top:4px}.timeline-indicator{display:flex;padding:12px 0 0 8px;flex-direction:column;align-items:center;align-self:stretch;position:relative;flex-shrink:0;width:20px;min-width:20px;max-width:20px}.timeline-dot{width:10px;height:10px;border-radius:50%;background-color:#bbc7f6;z-index:1;flex-shrink:0}.timeline-line{width:2px;flex:1;background-color:#bbc7f6;min-height:calc(100% - 14px)}.resume-entry:last-child .timeline-line{display:none}.entry-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.header-left{display:flex;flex-direction:column;gap:4px;flex:1}.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:30%}@media (max-width: 767px){.entry-header{flex-direction:column;gap:12px;display:flex}.header-left,.header-right{display:contents}.entry-header .mobile-order-1{order:1}.entry-header .mobile-order-2{order:2}.entry-header .mobile-order-3{order:3}.entry-header .mobile-order-4{order:4}.mobile-order-1,.mobile-order-2,.mobile-order-3,.mobile-order-4{width:100%}.date-range,.location-row{align-items:flex-start}}.date-range{display:flex;flex-direction:row;align-items:center;gap:8px}.location-row{display:flex;flex-direction:row;align-items:center;gap:4px}.date-separator{color:#666;font-weight:500;font-size:16px}.date-icon{color:#94a3b8;font-size:14px;margin-left:4px}.descriptions-container{display:flex;flex-direction:column;gap:8px}.description-item{display:flex;flex-direction:column;gap:4px}.description-item ::ng-deep .value-text{color:#717793}.description-label{color:#a2a6b8;font-family:Roboto,sans-serif;font-size:12px;font-style:normal;font-weight:400;letter-spacing:.06px;padding-top:4px;line-height:10px}.content-right{display:flex;flex-direction:row;gap:8px;align-items:flex-start;flex-wrap:wrap}.resume-entry-projection{display:block;width:100%}.reapply-button-container{display:flex;justify-content:flex-end;align-items:center}.loader-container{display:flex;justify-content:center;align-items:center;padding:24px 0;min-height:80px}.entry-loader-container{display:flex;justify-content:center;align-items:center;width:100%}.entry-separator{border:none;border-top:1px solid #E5E9FC;margin-top:0;margin-bottom:0;width:100%;height:0;display:block;clear:both;flex-shrink:0}.skill-section-common{padding:8px 0 20px}.skill-section-common .ai_skill_summary{margin-top:8px}.skill-section-common .list-items{font-weight:400;font-size:15px;font-style:normal;letter-spacing:.15px;font-family:Roboto,sans-serif;color:#717793}.skill-section-common p,.skill-section-common .suggestion-container{margin:12px 0}.skill-section-common p.skill-list-items{width:100%}.skill-section-common .skill-list-items ul{padding:0;display:flex;flex-wrap:wrap}.skill-section-common .skill-list-items ul li{margin-left:24px;margin-right:24px;height:24px;text-align:left;max-width:200px;min-width:200px;overflow-y:clip;text-overflow:ellipsis;white-space:nowrap}.skill-section-common .skill-list-items table p{margin:0!important}.skill-section-common .skill-list-items table ul{padding:0;display:flex;flex-direction:column}.skill-section-common .skill-list-items table ul li{margin-left:24px;text-align:left;max-width:100%;white-space:break-spaces!important;word-break:break-word}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: FieldPlaceholderComponent, selector: "lib-field-placeholder", inputs: ["value", "placeholder", "tooltip", "tooltipPosition", "testId", "valueClass", "placeholderClass", "icon", "iconAlt", "iconFont", "compact", "padded"] }, { 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"] }, { kind: "component", type: LoaderComponent, selector: "al-loader", inputs: ["dataTestId", "status", "customText", "showText", "size", "autoLoop", "loopDuration", "customTexts", "completeOnDone"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResumeEntriesComponent, isStandalone: true, selector: "al-resume-entries", inputs: { entries: "entries", showHeader: "showHeader", showDescriptionLabel: "showDescriptionLabel", showCompany: "showCompany", showJobTitle: "showJobTitle", showDates: "showDates", showLocation: "showLocation", showTimeline: "showTimeline", showReapplyButton: "showReapplyButton", showLoader: "showLoader", loaderForAllEntries: "loaderForAllEntries", loaderStatus: "loaderStatus", loaderSize: "loaderSize", skills: "skills", companyTooltip: "companyTooltip", jobTitleTooltip: "jobTitleTooltip", dateTooltip: "dateTooltip", locationTooltip: "locationTooltip", descriptionTooltip: "descriptionTooltip", tooltipPosition: "tooltipPosition", isSectionHidden: "isSectionHidden" }, outputs: { reapplyClick: "reapplyClick", undoClick: "undoClick" }, ngImport: i0, template: "<div class=\"resume-entries-container\">\n  <div *ngFor=\"let entry of entries; let i = index\" class=\"resume-entry\" [class.with-timeline]=\"showTimeline\"\n    [class.is-hidden]=\"isSectionHidden\">\n    <div *ngIf=\"showLoader && loaderForAllEntries\" class=\"entry-loader-container\"><al-loader [status]=\"loaderStatus\"\n        [size]=\"loaderSize\" [showText]=\"true\" [dataTestId]=\"'entry-' + i + '-loader'\"></al-loader></div><ng-container\n      *ngIf=\"!showLoader || !loaderForAllEntries\">\n      <div *ngIf=\"showTimeline\" class=\"timeline-indicator\">\n        <div class=\"timeline-dot\"></div>\n        <div class=\"timeline-line\"></div>\n      </div>\n      <div class=\"resume-entry-content\">\n        <div *ngIf=\"showHeader\" class=\"entry-header\">\n          <div class=\"header-left\">\n            <!-- Company / Institution: always on top, shows placeholder when no value -->\n            <div *ngIf=\"showCompany\" class=\"mobile-order-2\" [matTooltip]=\"companyTooltip\"\n              [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!companyTooltip\">\n              <lib-field-placeholder\n                [value]=\"entry.companyName?.trim() ? entry.companyName : (entry.institution?.trim() ? entry.institution : undefined)\"\n                [placeholder]=\"'Company Name / Institution'\" valueClass=\"font-text-lg-bold\"\n                [testId]=\"'entry-' + i + '-company'\" [compact]=\"true\">\n              </lib-field-placeholder>\n            </div>\n\n            <!-- Job title / Course name: always below company line -->\n            <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\" [matTooltip]=\"jobTitleTooltip\"\n              [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!jobTitleTooltip\">\n              <lib-field-placeholder [value]=\"entry.jobTitle || entry.courseName\"\n                [placeholder]=\"'Job title / Course name'\" valueClass=\"font-title-text\"\n                [testId]=\"'entry-' + i + '-title'\" [compact]=\"true\">\n              </lib-field-placeholder>\n            </div>\n          </div>\n          <div class=\"header-right\">\n            <div class=\"date-range mobile-order-1\" *ngIf=\"showDates\" [matTooltip]=\"dateTooltip\"\n              [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!dateTooltip\">\n              <!-- Start Date: always render; show placeholder when no value -->\n              <lib-field-placeholder [value]=\"entry.startDate?.trim() ? entry.startDate : undefined\"\n                [placeholder]=\"'Start Date'\" valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-start-date'\"\n                [compact]=\"true\">\n              </lib-field-placeholder>\n\n              <span class=\"date-separator\">-</span>\n\n              <!-- End Date / Present: always render; show placeholder when no end date -->\n              <lib-field-placeholder [value]=\"entry.isPresent\n                           ? 'Present'\n                           : (entry.endDate?.trim() ? entry.endDate : undefined)\" [placeholder]=\"'End Date'\"\n                valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-end-date'\" [compact]=\"true\">\n              </lib-field-placeholder>\n            </div>\n            <div class=\"location-row mobile-order-4\" *ngIf=\"showLocation\" [matTooltip]=\"locationTooltip\"\n              [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!locationTooltip\"><lib-field-placeholder\n                [value]=\"entry.city\" [placeholder]=\"'City'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-city'\" [compact]=\"true\"></lib-field-placeholder><lib-field-placeholder\n                [value]=\"entry.region\" [placeholder]=\"'Region'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-region'\" [compact]=\"true\"></lib-field-placeholder><lib-field-placeholder\n                [value]=\"entry.country\" [placeholder]=\"'Country'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-country'\" [compact]=\"true\"></lib-field-placeholder></div>\n          </div>\n        </div>\n        <div class=\"descriptions-container\">\n          <div *ngIf=\"showLoader && !loaderForAllEntries\" class=\"loader-container\">\n            <al-loader [status]=\"loaderStatus\" [size]=\"loaderSize\" [showText]=\"true\"\n              [dataTestId]=\"'entry-' + i + '-loader'\">\n            </al-loader>\n          </div>\n\n          <div *ngIf=\"!showLoader || loaderForAllEntries\">\n            <div *ngFor=\"let desc of entry.descriptions; let descIndex = index\" class=\"description-item\"\n              [matTooltip]=\"descriptionTooltip\" [matTooltipPosition]=\"tooltipPosition\"\n              [matTooltipDisabled]=\"!descriptionTooltip\">\n              <label *ngIf=\"showDescriptionLabel\" class=\"description-label\">Description</label>\n              <lib-field-placeholder [value]=\"desc\" [placeholder]=\"'Missing item'\" [padded]=\"true\"\n                valueClass=\"font-text-base\" [testId]=\"'entry-' + i + '-desc-' + descIndex\">\n              </lib-field-placeholder>\n            </div>\n          </div>\n          <div class=\"reapply-button-container\" *ngIf=\"showReapplyButton\"><al-button *ngIf=\"!isReapplied(i)\"\n              [label]=\"'Re-apply'\" [buttonType]=\"'icon-label'\" [leftIcon]=\"'refresh'\" [category]=\"'gradient'\"\n              [size]=\"'xs'\" [dataTestId]=\"'entry-' + i + '-reapply'\"\n              (onClick)=\"onReapplyClick(entry, i)\"></al-button><al-button *ngIf=\"isReapplied(i)\" [label]=\"'Undo'\"\n              [buttonType]=\"'icon-label'\" [leftIcon]=\"'undo'\" [category]=\"'grey'\" [size]=\"'xs'\"\n              [dataTestId]=\"'entry-' + i + '-undo'\" (onClick)=\"onUndoClick(entry, i)\"></al-button></div>\n          <hr *ngIf=\"i < entries.length - 1\" class=\"entry-separator\" [class.with-timeline-separator]=\"showTimeline\" />\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"resume-entry-projection\"><ng-content></ng-content></div>\n  <div *ngIf=\"skills && skills.length > 0\" class=\"skill-section-common\">\n    <div class=\"skill-list-items\">\n      <ul>\n        <li *ngFor=\"let skill of skills\" class=\"list-items\">{{ skill }}</li>\n      </ul>\n    </div>\n  </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins: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&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}: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}.resume-entries-container{display:flex;flex-direction:column;width:100%;background-color:#fff;container-type:inline-size;container-name:resume-entries}.resume-entry{display:flex;flex-direction:column;width:100%;position:relative;cursor:pointer}.resume-entry.is-hidden{opacity:.3}.resume-entry.is-hidden .description-item ::ng-deep .value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.resume-entry.with-timeline{display:flex;flex-direction:row;flex-wrap:nowrap;gap:12px;position:relative}.resume-entry.with-timeline .entry-separator{flex-basis:100%;order:10}.resume-entry.with-timeline .timeline-indicator{z-index:0}.resume-entry.with-timeline .resume-entry-content{flex:1;min-width:0}.resume-entry-content{display:flex;flex-direction:column;flex:1;width:100%;gap:12px;padding-top:4px}.timeline-indicator{display:flex;padding:12px 0 0 8px;flex-direction:column;align-items:center;align-self:stretch;position:relative;flex-shrink:0;width:20px;min-width:20px;max-width:20px}.timeline-dot{width:10px;height:10px;border-radius:50%;background-color:#bbc7f6;z-index:1;flex-shrink:0}.timeline-line{width:2px;flex:1;background-color:#bbc7f6;min-height:calc(100% - 14px)}.resume-entry:last-child .timeline-line{display:none}.entry-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.header-left{display:flex;flex-direction:column;gap:4px;flex:1}.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:30%}@container resume-entries (max-width: 400px){.mobile-order-2,.mobile-order-3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mobile-order-2 ::ng-deep lib-field-placeholder,.mobile-order-3 ::ng-deep lib-field-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;width:100%}.mobile-order-2 ::ng-deep lib-field-placeholder .value-text,.mobile-order-3 ::ng-deep lib-field-placeholder .value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%}.mobile-order-1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mobile-order-1.date-range ::ng-deep lib-field-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-1.date-range ::ng-deep lib-field-placeholder .value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-4{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mobile-order-4.location-row ::ng-deep lib-field-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-4.location-row ::ng-deep lib-field-placeholder .value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}}@container resume-entries (max-width: 500px){.entry-header{flex-direction:column;gap:12px;display:flex}.header-left,.header-right{display:contents}.entry-header .mobile-order-1{order:1}.entry-header .mobile-order-2{order:2}.entry-header .mobile-order-3{order:3}.entry-header .mobile-order-4{order:4}.mobile-order-1,.mobile-order-2,.mobile-order-3,.mobile-order-4{width:100%}.date-range,.location-row{align-items:flex-start}}@media (max-width: 767px){.entry-header{flex-direction:column;gap:12px;display:flex}.header-left,.header-right{display:contents}.entry-header .mobile-order-1{order:1}.entry-header .mobile-order-2{order:2}.entry-header .mobile-order-3{order:3}.entry-header .mobile-order-4{order:4}.mobile-order-1,.mobile-order-2,.mobile-order-3,.mobile-order-4{width:100%}.date-range,.location-row{align-items:flex-start}}.date-range{display:flex;flex-direction:row;align-items:center;gap:8px}.location-row{display:flex;flex-direction:row;align-items:center;gap:4px}.date-separator{color:#666;font-weight:500;font-size:16px}.date-icon{color:#94a3b8;font-size:14px;margin-left:4px}.descriptions-container{display:flex;flex-direction:column;gap:8px}.description-item{display:flex;flex-direction:column;gap:4px}.description-item ::ng-deep .value-text{color:#717793}.description-label{color:#a2a6b8;font-family:Roboto,sans-serif;font-size:12px;font-style:normal;font-weight:400;letter-spacing:.06px;padding-top:4px;line-height:10px}.content-right{display:flex;flex-direction:row;gap:8px;align-items:flex-start;flex-wrap:wrap}.resume-entry-projection{display:block;width:100%}.reapply-button-container{display:flex;justify-content:flex-end;align-items:center}.loader-container{display:flex;justify-content:center;align-items:center;padding:24px 0;min-height:80px}.entry-loader-container{display:flex;justify-content:center;align-items:center;width:100%}.entry-separator{border:none;border-top:1px solid #E5E9FC;margin-top:0;margin-bottom:0;width:100%;height:0;display:block;clear:both;flex-shrink:0}.skill-section-common{padding:8px 0 20px}.skill-section-common .ai_skill_summary{margin-top:8px}.skill-section-common .list-items{font-weight:400;font-size:15px;font-style:normal;letter-spacing:.15px;font-family:Roboto,sans-serif;color:#717793}.skill-section-common p,.skill-section-common .suggestion-container{margin:12px 0}.skill-section-common p.skill-list-items{width:100%}.skill-section-common .skill-list-items ul{padding:0;display:flex;flex-wrap:wrap}.skill-section-common .skill-list-items ul li{margin-left:24px;margin-right:24px;height:24px;text-align:left;max-width:200px;min-width:200px;overflow-y:clip;text-overflow:ellipsis;white-space:nowrap}.skill-section-common .skill-list-items table p{margin:0!important}.skill-section-common .skill-list-items table ul{padding:0;display:flex;flex-direction:column}.skill-section-common .skill-list-items table ul li{margin-left:24px;text-align:left;max-width:100%;white-space:break-spaces!important;word-break:break-word}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: FieldPlaceholderComponent, selector: "lib-field-placeholder", inputs: ["value", "placeholder", "tooltip", "tooltipPosition", "testId", "valueClass", "placeholderClass", "icon", "iconAlt", "iconFont", "compact", "padded"] }, { 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"] }, { kind: "component", type: LoaderComponent, selector: "al-loader", inputs: ["dataTestId", "status", "customText", "showText", "size", "autoLoop", "loopDuration", "customTexts", "completeOnDone"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResumeEntriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'al-resume-entries', standalone: true, imports: [CommonModule, FieldPlaceholderComponent, ButtonComponent, LoaderComponent, MatTooltipModule], template: "<div class=\"resume-entries-container\">\n  <div *ngFor=\"let entry of entries; let i = index\" class=\"resume-entry\" [class.with-timeline]=\"showTimeline\"\n    [class.is-hidden]=\"isSectionHidden\">\n    <div *ngIf=\"showLoader && loaderForAllEntries\" class=\"entry-loader-container\"><al-loader [status]=\"loaderStatus\"\n        [size]=\"loaderSize\" [showText]=\"true\" [dataTestId]=\"'entry-' + i + '-loader'\"></al-loader></div><ng-container\n      *ngIf=\"!showLoader || !loaderForAllEntries\">\n      <div *ngIf=\"showTimeline\" class=\"timeline-indicator\">\n        <div class=\"timeline-dot\"></div>\n        <div class=\"timeline-line\"></div>\n      </div>\n      <div class=\"resume-entry-content\">\n        <div *ngIf=\"showHeader\" class=\"entry-header\">\n          <div class=\"header-left\">\n            <!-- Company / Institution: always on top, shows placeholder when no value -->\n            <div *ngIf=\"showCompany\" class=\"mobile-order-2\" [matTooltip]=\"companyTooltip\"\n              [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!companyTooltip\">\n              <lib-field-placeholder\n                [value]=\"entry.companyName?.trim() ? entry.companyName : (entry.institution?.trim() ? entry.institution : undefined)\"\n                [placeholder]=\"'Company Name / Institution'\" valueClass=\"font-text-lg-bold\"\n                [testId]=\"'entry-' + i + '-company'\" [compact]=\"true\">\n              </lib-field-placeholder>\n            </div>\n\n            <!-- Job title / Course name: always below company line -->\n            <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\" [matTooltip]=\"jobTitleTooltip\"\n              [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!jobTitleTooltip\">\n              <lib-field-placeholder [value]=\"entry.jobTitle || entry.courseName\"\n                [placeholder]=\"'Job title / Course name'\" valueClass=\"font-title-text\"\n                [testId]=\"'entry-' + i + '-title'\" [compact]=\"true\">\n              </lib-field-placeholder>\n            </div>\n          </div>\n          <div class=\"header-right\">\n            <div class=\"date-range mobile-order-1\" *ngIf=\"showDates\" [matTooltip]=\"dateTooltip\"\n              [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!dateTooltip\">\n              <!-- Start Date: always render; show placeholder when no value -->\n              <lib-field-placeholder [value]=\"entry.startDate?.trim() ? entry.startDate : undefined\"\n                [placeholder]=\"'Start Date'\" valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-start-date'\"\n                [compact]=\"true\">\n              </lib-field-placeholder>\n\n              <span class=\"date-separator\">-</span>\n\n              <!-- End Date / Present: always render; show placeholder when no end date -->\n              <lib-field-placeholder [value]=\"entry.isPresent\n                           ? 'Present'\n                           : (entry.endDate?.trim() ? entry.endDate : undefined)\" [placeholder]=\"'End Date'\"\n                valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-end-date'\" [compact]=\"true\">\n              </lib-field-placeholder>\n            </div>\n            <div class=\"location-row mobile-order-4\" *ngIf=\"showLocation\" [matTooltip]=\"locationTooltip\"\n              [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!locationTooltip\"><lib-field-placeholder\n                [value]=\"entry.city\" [placeholder]=\"'City'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-city'\" [compact]=\"true\"></lib-field-placeholder><lib-field-placeholder\n                [value]=\"entry.region\" [placeholder]=\"'Region'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-region'\" [compact]=\"true\"></lib-field-placeholder><lib-field-placeholder\n                [value]=\"entry.country\" [placeholder]=\"'Country'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-country'\" [compact]=\"true\"></lib-field-placeholder></div>\n          </div>\n        </div>\n        <div class=\"descriptions-container\">\n          <div *ngIf=\"showLoader && !loaderForAllEntries\" class=\"loader-container\">\n            <al-loader [status]=\"loaderStatus\" [size]=\"loaderSize\" [showText]=\"true\"\n              [dataTestId]=\"'entry-' + i + '-loader'\">\n            </al-loader>\n          </div>\n\n          <div *ngIf=\"!showLoader || loaderForAllEntries\">\n            <div *ngFor=\"let desc of entry.descriptions; let descIndex = index\" class=\"description-item\"\n              [matTooltip]=\"descriptionTooltip\" [matTooltipPosition]=\"tooltipPosition\"\n              [matTooltipDisabled]=\"!descriptionTooltip\">\n              <label *ngIf=\"showDescriptionLabel\" class=\"description-label\">Description</label>\n              <lib-field-placeholder [value]=\"desc\" [placeholder]=\"'Missing item'\" [padded]=\"true\"\n                valueClass=\"font-text-base\" [testId]=\"'entry-' + i + '-desc-' + descIndex\">\n              </lib-field-placeholder>\n            </div>\n          </div>\n          <div class=\"reapply-button-container\" *ngIf=\"showReapplyButton\"><al-button *ngIf=\"!isReapplied(i)\"\n              [label]=\"'Re-apply'\" [buttonType]=\"'icon-label'\" [leftIcon]=\"'refresh'\" [category]=\"'gradient'\"\n              [size]=\"'xs'\" [dataTestId]=\"'entry-' + i + '-reapply'\"\n              (onClick)=\"onReapplyClick(entry, i)\"></al-button><al-button *ngIf=\"isReapplied(i)\" [label]=\"'Undo'\"\n              [buttonType]=\"'icon-label'\" [leftIcon]=\"'undo'\" [category]=\"'grey'\" [size]=\"'xs'\"\n              [dataTestId]=\"'entry-' + i + '-undo'\" (onClick)=\"onUndoClick(entry, i)\"></al-button></div>\n          <hr *ngIf=\"i < entries.length - 1\" class=\"entry-separator\" [class.with-timeline-separator]=\"showTimeline\" />\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"resume-entry-projection\"><ng-content></ng-content></div>\n  <div *ngIf=\"skills && skills.length > 0\" class=\"skill-section-common\">\n    <div class=\"skill-list-items\">\n      <ul>\n        <li *ngFor=\"let skill of skills\" class=\"list-items\">{{ skill }}</li>\n      </ul>\n    </div>\n  </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins: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&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}: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}.resume-entries-container{display:flex;flex-direction:column;width:100%;background-color:#fff}.resume-entry{display:flex;flex-direction:column;width:100%;position:relative;cursor:pointer}.resume-entry.is-hidden{opacity:.3}.resume-entry.is-hidden .description-item ::ng-deep .value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.resume-entry.with-timeline{display:flex;flex-direction:row;flex-wrap:nowrap;gap:12px;position:relative}.resume-entry.with-timeline .entry-separator{flex-basis:100%;order:10}.resume-entry.with-timeline .timeline-indicator{z-index:0}.resume-entry.with-timeline .resume-entry-content{flex:1;min-width:0}.resume-entry-content{display:flex;flex-direction:column;flex:1;width:100%;gap:12px;padding-top:4px}.timeline-indicator{display:flex;padding:12px 0 0 8px;flex-direction:column;align-items:center;align-self:stretch;position:relative;flex-shrink:0;width:20px;min-width:20px;max-width:20px}.timeline-dot{width:10px;height:10px;border-radius:50%;background-color:#bbc7f6;z-index:1;flex-shrink:0}.timeline-line{width:2px;flex:1;background-color:#bbc7f6;min-height:calc(100% - 14px)}.resume-entry:last-child .timeline-line{display:none}.entry-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.header-left{display:flex;flex-direction:column;gap:4px;flex:1}.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:30%}@media (max-width: 767px){.entry-header{flex-direction:column;gap:12px;display:flex}.header-left,.header-right{display:contents}.entry-header .mobile-order-1{order:1}.entry-header .mobile-order-2{order:2}.entry-header .mobile-order-3{order:3}.entry-header .mobile-order-4{order:4}.mobile-order-1,.mobile-order-2,.mobile-order-3,.mobile-order-4{width:100%}.date-range,.location-row{align-items:flex-start}}.date-range{display:flex;flex-direction:row;align-items:center;gap:8px}.location-row{display:flex;flex-direction:row;align-items:center;gap:4px}.date-separator{color:#666;font-weight:500;font-size:16px}.date-icon{color:#94a3b8;font-size:14px;margin-left:4px}.descriptions-container{display:flex;flex-direction:column;gap:8px}.description-item{display:flex;flex-direction:column;gap:4px}.description-item ::ng-deep .value-text{color:#717793}.description-label{color:#a2a6b8;font-family:Roboto,sans-serif;font-size:12px;font-style:normal;font-weight:400;letter-spacing:.06px;padding-top:4px;line-height:10px}.content-right{display:flex;flex-direction:row;gap:8px;align-items:flex-start;flex-wrap:wrap}.resume-entry-projection{display:block;width:100%}.reapply-button-container{display:flex;justify-content:flex-end;align-items:center}.loader-container{display:flex;justify-content:center;align-items:center;padding:24px 0;min-height:80px}.entry-loader-container{display:flex;justify-content:center;align-items:center;width:100%}.entry-separator{border:none;border-top:1px solid #E5E9FC;margin-top:0;margin-bottom:0;width:100%;height:0;display:block;clear:both;flex-shrink:0}.skill-section-common{padding:8px 0 20px}.skill-section-common .ai_skill_summary{margin-top:8px}.skill-section-common .list-items{font-weight:400;font-size:15px;font-style:normal;letter-spacing:.15px;font-family:Roboto,sans-serif;color:#717793}.skill-section-common p,.skill-section-common .suggestion-container{margin:12px 0}.skill-section-common p.skill-list-items{width:100%}.skill-section-common .skill-list-items ul{padding:0;display:flex;flex-wrap:wrap}.skill-section-common .skill-list-items ul li{margin-left:24px;margin-right:24px;height:24px;text-align:left;max-width:200px;min-width:200px;overflow-y:clip;text-overflow:ellipsis;white-space:nowrap}.skill-section-common .skill-list-items table p{margin:0!important}.skill-section-common .skill-list-items table ul{padding:0;display:flex;flex-direction:column}.skill-section-common .skill-list-items table ul li{margin-left:24px;text-align:left;max-width:100%;white-space:break-spaces!important;word-break:break-word}\n"] }]
+            args: [{ selector: 'al-resume-entries', standalone: true, imports: [CommonModule, FieldPlaceholderComponent, ButtonComponent, LoaderComponent, MatTooltipModule], template: "<div class=\"resume-entries-container\">\n  <div *ngFor=\"let entry of entries; let i = index\" class=\"resume-entry\" [class.with-timeline]=\"showTimeline\"\n    [class.is-hidden]=\"isSectionHidden\">\n    <div *ngIf=\"showLoader && loaderForAllEntries\" class=\"entry-loader-container\"><al-loader [status]=\"loaderStatus\"\n        [size]=\"loaderSize\" [showText]=\"true\" [dataTestId]=\"'entry-' + i + '-loader'\"></al-loader></div><ng-container\n      *ngIf=\"!showLoader || !loaderForAllEntries\">\n      <div *ngIf=\"showTimeline\" class=\"timeline-indicator\">\n        <div class=\"timeline-dot\"></div>\n        <div class=\"timeline-line\"></div>\n      </div>\n      <div class=\"resume-entry-content\">\n        <div *ngIf=\"showHeader\" class=\"entry-header\">\n          <div class=\"header-left\">\n            <!-- Company / Institution: always on top, shows placeholder when no value -->\n            <div *ngIf=\"showCompany\" class=\"mobile-order-2\" [matTooltip]=\"companyTooltip\"\n              [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!companyTooltip\">\n              <lib-field-placeholder\n                [value]=\"entry.companyName?.trim() ? entry.companyName : (entry.institution?.trim() ? entry.institution : undefined)\"\n                [placeholder]=\"'Company Name / Institution'\" valueClass=\"font-text-lg-bold\"\n                [testId]=\"'entry-' + i + '-company'\" [compact]=\"true\">\n              </lib-field-placeholder>\n            </div>\n\n            <!-- Job title / Course name: always below company line -->\n            <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\" [matTooltip]=\"jobTitleTooltip\"\n              [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!jobTitleTooltip\">\n              <lib-field-placeholder [value]=\"entry.jobTitle || entry.courseName\"\n                [placeholder]=\"'Job title / Course name'\" valueClass=\"font-title-text\"\n                [testId]=\"'entry-' + i + '-title'\" [compact]=\"true\">\n              </lib-field-placeholder>\n            </div>\n          </div>\n          <div class=\"header-right\">\n            <div class=\"date-range mobile-order-1\" *ngIf=\"showDates\" [matTooltip]=\"dateTooltip\"\n              [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!dateTooltip\">\n              <!-- Start Date: always render; show placeholder when no value -->\n              <lib-field-placeholder [value]=\"entry.startDate?.trim() ? entry.startDate : undefined\"\n                [placeholder]=\"'Start Date'\" valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-start-date'\"\n                [compact]=\"true\">\n              </lib-field-placeholder>\n\n              <span class=\"date-separator\">-</span>\n\n              <!-- End Date / Present: always render; show placeholder when no end date -->\n              <lib-field-placeholder [value]=\"entry.isPresent\n                           ? 'Present'\n                           : (entry.endDate?.trim() ? entry.endDate : undefined)\" [placeholder]=\"'End Date'\"\n                valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-end-date'\" [compact]=\"true\">\n              </lib-field-placeholder>\n            </div>\n            <div class=\"location-row mobile-order-4\" *ngIf=\"showLocation\" [matTooltip]=\"locationTooltip\"\n              [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!locationTooltip\"><lib-field-placeholder\n                [value]=\"entry.city\" [placeholder]=\"'City'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-city'\" [compact]=\"true\"></lib-field-placeholder><lib-field-placeholder\n                [value]=\"entry.region\" [placeholder]=\"'Region'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-region'\" [compact]=\"true\"></lib-field-placeholder><lib-field-placeholder\n                [value]=\"entry.country\" [placeholder]=\"'Country'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-country'\" [compact]=\"true\"></lib-field-placeholder></div>\n          </div>\n        </div>\n        <div class=\"descriptions-container\">\n          <div *ngIf=\"showLoader && !loaderForAllEntries\" class=\"loader-container\">\n            <al-loader [status]=\"loaderStatus\" [size]=\"loaderSize\" [showText]=\"true\"\n              [dataTestId]=\"'entry-' + i + '-loader'\">\n            </al-loader>\n          </div>\n\n          <div *ngIf=\"!showLoader || loaderForAllEntries\">\n            <div *ngFor=\"let desc of entry.descriptions; let descIndex = index\" class=\"description-item\"\n              [matTooltip]=\"descriptionTooltip\" [matTooltipPosition]=\"tooltipPosition\"\n              [matTooltipDisabled]=\"!descriptionTooltip\">\n              <label *ngIf=\"showDescriptionLabel\" class=\"description-label\">Description</label>\n              <lib-field-placeholder [value]=\"desc\" [placeholder]=\"'Missing item'\" [padded]=\"true\"\n                valueClass=\"font-text-base\" [testId]=\"'entry-' + i + '-desc-' + descIndex\">\n              </lib-field-placeholder>\n            </div>\n          </div>\n          <div class=\"reapply-button-container\" *ngIf=\"showReapplyButton\"><al-button *ngIf=\"!isReapplied(i)\"\n              [label]=\"'Re-apply'\" [buttonType]=\"'icon-label'\" [leftIcon]=\"'refresh'\" [category]=\"'gradient'\"\n              [size]=\"'xs'\" [dataTestId]=\"'entry-' + i + '-reapply'\"\n              (onClick)=\"onReapplyClick(entry, i)\"></al-button><al-button *ngIf=\"isReapplied(i)\" [label]=\"'Undo'\"\n              [buttonType]=\"'icon-label'\" [leftIcon]=\"'undo'\" [category]=\"'grey'\" [size]=\"'xs'\"\n              [dataTestId]=\"'entry-' + i + '-undo'\" (onClick)=\"onUndoClick(entry, i)\"></al-button></div>\n          <hr *ngIf=\"i < entries.length - 1\" class=\"entry-separator\" [class.with-timeline-separator]=\"showTimeline\" />\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"resume-entry-projection\"><ng-content></ng-content></div>\n  <div *ngIf=\"skills && skills.length > 0\" class=\"skill-section-common\">\n    <div class=\"skill-list-items\">\n      <ul>\n        <li *ngFor=\"let skill of skills\" class=\"list-items\">{{ skill }}</li>\n      </ul>\n    </div>\n  </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins: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&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}: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}.resume-entries-container{display:flex;flex-direction:column;width:100%;background-color:#fff;container-type:inline-size;container-name:resume-entries}.resume-entry{display:flex;flex-direction:column;width:100%;position:relative;cursor:pointer}.resume-entry.is-hidden{opacity:.3}.resume-entry.is-hidden .description-item ::ng-deep .value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.resume-entry.with-timeline{display:flex;flex-direction:row;flex-wrap:nowrap;gap:12px;position:relative}.resume-entry.with-timeline .entry-separator{flex-basis:100%;order:10}.resume-entry.with-timeline .timeline-indicator{z-index:0}.resume-entry.with-timeline .resume-entry-content{flex:1;min-width:0}.resume-entry-content{display:flex;flex-direction:column;flex:1;width:100%;gap:12px;padding-top:4px}.timeline-indicator{display:flex;padding:12px 0 0 8px;flex-direction:column;align-items:center;align-self:stretch;position:relative;flex-shrink:0;width:20px;min-width:20px;max-width:20px}.timeline-dot{width:10px;height:10px;border-radius:50%;background-color:#bbc7f6;z-index:1;flex-shrink:0}.timeline-line{width:2px;flex:1;background-color:#bbc7f6;min-height:calc(100% - 14px)}.resume-entry:last-child .timeline-line{display:none}.entry-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.header-left{display:flex;flex-direction:column;gap:4px;flex:1}.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:30%}@container resume-entries (max-width: 400px){.mobile-order-2,.mobile-order-3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mobile-order-2 ::ng-deep lib-field-placeholder,.mobile-order-3 ::ng-deep lib-field-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;width:100%}.mobile-order-2 ::ng-deep lib-field-placeholder .value-text,.mobile-order-3 ::ng-deep lib-field-placeholder .value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%}.mobile-order-1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mobile-order-1.date-range ::ng-deep lib-field-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-1.date-range ::ng-deep lib-field-placeholder .value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-4{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mobile-order-4.location-row ::ng-deep lib-field-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-4.location-row ::ng-deep lib-field-placeholder .value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}}@container resume-entries (max-width: 500px){.entry-header{flex-direction:column;gap:12px;display:flex}.header-left,.header-right{display:contents}.entry-header .mobile-order-1{order:1}.entry-header .mobile-order-2{order:2}.entry-header .mobile-order-3{order:3}.entry-header .mobile-order-4{order:4}.mobile-order-1,.mobile-order-2,.mobile-order-3,.mobile-order-4{width:100%}.date-range,.location-row{align-items:flex-start}}@media (max-width: 767px){.entry-header{flex-direction:column;gap:12px;display:flex}.header-left,.header-right{display:contents}.entry-header .mobile-order-1{order:1}.entry-header .mobile-order-2{order:2}.entry-header .mobile-order-3{order:3}.entry-header .mobile-order-4{order:4}.mobile-order-1,.mobile-order-2,.mobile-order-3,.mobile-order-4{width:100%}.date-range,.location-row{align-items:flex-start}}.date-range{display:flex;flex-direction:row;align-items:center;gap:8px}.location-row{display:flex;flex-direction:row;align-items:center;gap:4px}.date-separator{color:#666;font-weight:500;font-size:16px}.date-icon{color:#94a3b8;font-size:14px;margin-left:4px}.descriptions-container{display:flex;flex-direction:column;gap:8px}.description-item{display:flex;flex-direction:column;gap:4px}.description-item ::ng-deep .value-text{color:#717793}.description-label{color:#a2a6b8;font-family:Roboto,sans-serif;font-size:12px;font-style:normal;font-weight:400;letter-spacing:.06px;padding-top:4px;line-height:10px}.content-right{display:flex;flex-direction:row;gap:8px;align-items:flex-start;flex-wrap:wrap}.resume-entry-projection{display:block;width:100%}.reapply-button-container{display:flex;justify-content:flex-end;align-items:center}.loader-container{display:flex;justify-content:center;align-items:center;padding:24px 0;min-height:80px}.entry-loader-container{display:flex;justify-content:center;align-items:center;width:100%}.entry-separator{border:none;border-top:1px solid #E5E9FC;margin-top:0;margin-bottom:0;width:100%;height:0;display:block;clear:both;flex-shrink:0}.skill-section-common{padding:8px 0 20px}.skill-section-common .ai_skill_summary{margin-top:8px}.skill-section-common .list-items{font-weight:400;font-size:15px;font-style:normal;letter-spacing:.15px;font-family:Roboto,sans-serif;color:#717793}.skill-section-common p,.skill-section-common .suggestion-container{margin:12px 0}.skill-section-common p.skill-list-items{width:100%}.skill-section-common .skill-list-items ul{padding:0;display:flex;flex-wrap:wrap}.skill-section-common .skill-list-items ul li{margin-left:24px;margin-right:24px;height:24px;text-align:left;max-width:200px;min-width:200px;overflow-y:clip;text-overflow:ellipsis;white-space:nowrap}.skill-section-common .skill-list-items table p{margin:0!important}.skill-section-common .skill-list-items table ul{padding:0;display:flex;flex-direction:column}.skill-section-common .skill-list-items table ul li{margin-left:24px;text-align:left;max-width:100%;white-space:break-spaces!important;word-break:break-word}\n"] }]
         }], propDecorators: { entries: [{
                 type: Input
             }], showHeader: [{
@@ -6272,7 +6318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 // Static flag to ensure icons are registered only once
-let iconsRegistered$2 = false;
+let iconsRegistered$3 = false;
 class AppToolbarLeftComponent {
     constructor(iconRegistry, sanitizer) {
         this.iconRegistry = iconRegistry;
@@ -6302,13 +6348,13 @@ class AppToolbarLeftComponent {
     }
     registerIcons() {
         // Register icons only once using static flag
-        if (!iconsRegistered$2) {
+        if (!iconsRegistered$3) {
             try {
                 // Register all icons synchronously
                 this.iconRegistry.addSvgIconLiteral('handle', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['handle']));
                 this.iconRegistry.addSvgIconLiteral('edit_icon', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['edit_icon']));
                 this.iconRegistry.addSvgIconLiteral('search', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['search']));
-                iconsRegistered$2 = true;
+                iconsRegistered$3 = true;
             }
             catch (error) {
                 console.error('Failed to register toolbar icons:', error);
@@ -6359,7 +6405,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
-let iconsRegistered$1 = false;
+let iconsRegistered$2 = false;
 class AppToolbarRightComponent {
     constructor(iconRegistry, sanitizer) {
         this.iconRegistry = iconRegistry;
@@ -6393,17 +6439,17 @@ class AppToolbarRightComponent {
         this.registerIcons();
     }
     registerIcons() {
-        if (!iconsRegistered$1) {
+        if (!iconsRegistered$2) {
             try {
                 // Register subrole icon
-                this.iconRegistry.addSvgIconLiteral('subrole', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['subrole-icon-grey']));
+                this.iconRegistry.addSvgIconLiteral('subrole-icon-grey', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['subrole-icon-grey']));
                 // Register subrole active icon
                 this.iconRegistry.addSvgIconLiteral('subrole_active', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['subrole_active']));
                 // Register hide section icon
                 this.iconRegistry.addSvgIconLiteral('hide_section', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['hide_section']));
                 // Register unhide section icon
                 this.iconRegistry.addSvgIconLiteral('unhide_section', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['unhide_section']));
-                iconsRegistered$1 = true;
+                iconsRegistered$2 = true;
             }
             catch (error) {
                 console.error('Failed to register toolbar right icons:', error);
@@ -6496,11 +6542,11 @@ class AppToolbarRightComponent {
         this.setSubroleEvent.emit(!this.currentObj['subrole']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppToolbarRightComponent, deps: [{ token: i1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppToolbarRightComponent, selector: "toolbar-right", inputs: { alwaysShowIcons: "alwaysShowIcons", checked: "checked", overrideConfig: "overrideConfig", currentObj: "currentObj" }, outputs: { checkboxChange: "checkboxChange", visibilityToggle: "visibilityToggle", hideShowEvent: "hideShowEvent", checkboxEvent: "checkboxEvent", setSubroleEvent: "setSubroleEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toolbar-right-container\">\n  <div class=\"icon-wrapper\"><al-checkbox *ngIf=\"requiredIcon.checkbox.display\" [checked]=\"checked\" [showLabels]=\"false\"\n      (change)=\"onCheckboxChange($event)\" (mouseenter)=\"onCheckboxHover(true)\"\n      (mouseleave)=\"onCheckboxHover(false)\"></al-checkbox></div>\n  <div class=\"toolbar-right-icons\" [ngClass]=\"{'always-visible': showIcons}\">\n    <div class=\"icon-wrapper\" *ngIf=\"requiredIcon.sr.display\"><button type=\"button\"\n        class=\"toolbar-icon toolbar-icon--subrole\" [attr.aria-label]=\"requiredIcon.sr.title\"\n        [attr.title]=\"requiredIcon.sr.title\" (click)=\"setSubrole()\"><mat-icon\n          [svgIcon]=\"currentObj['subrole'] ? 'subrole_active' : 'subrole'\" class=\"subrole-icon\"></mat-icon></button>\n    </div>\n    <div class=\"icon-wrapper\"><button *ngIf=\"requiredIcon.eye.display\" type=\"button\"\n        class=\"toolbar-icon toolbar-icon--eye eye-icon\" [attr.aria-label]=\"eyeLabel\" [attr.title]=\"eyeTitle\"\n        (click)=\"onToggleVisibility()\"><mat-icon [svgIcon]=\"eyeSvgIcon\" class=\"eye-icon\"></mat-icon></button></div>\n  </div>\n</div>\n", styles: [".toolbar-right-container{background-color:transparent;border-radius:8px;padding:8px 6px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px!important;transition:background-color .3s ease-in-out}.toolbar-right-container ::ng-deep .mat-ripple-element{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.toolbar-right-container ::ng-deep .mat-ripple{display:none!important;visibility:hidden!important;pointer-events:none!important}.toolbar-right-container ::ng-deep .mdc-ripple-surface{--mdc-ripple-fg-opacity: 0 !important;--mdc-ripple-hover-opacity: 0 !important;--mdc-ripple-press-opacity: 0 !important;--mdc-ripple-focus-opacity: 0 !important}.toolbar-right-container ::ng-deep .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mdc-checkbox:hover .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mdc-checkbox:focus .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox:hover .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox:focus .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox.mat-focused .mdc-checkbox__ripple{display:none!important;opacity:0!important;visibility:hidden!important;background-color:transparent!important;pointer-events:none!important;animation:none!important;transform:scale(0)!important}.toolbar-right-container ::ng-deep [class*=ripple],.toolbar-right-container ::ng-deep [class*=Ripple]{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.toolbar-right-container ::ng-deep .mdc-checkbox__native-control:before,.toolbar-right-container ::ng-deep .mdc-checkbox__native-control:after{display:none!important}.toolbar-right-container:hover{background-color:#e5e9fc}al-icon-button{margin:0 auto!important;display:flex;align-items:center;justify-content:center}.icon-wrapper al-checkbox{width:20px!important;height:20px!important;margin:0 auto!important;padding:0!important;display:flex;align-items:center;justify-content:center;background:none!important;border-radius:2px}.icon-wrapper al-checkbox ::ng-deep *{border-radius:2px!important}.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__ripple{display:none!important;opacity:0!important;visibility:hidden!important;background-color:transparent!important;pointer-events:none!important;animation:none!important;transform:scale(0)!important}.icon-wrapper al-checkbox ::ng-deep .mat-ripple-element{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.icon-wrapper al-checkbox ::ng-deep .mat-ripple{display:none!important;visibility:hidden!important;pointer-events:none!important}.icon-wrapper al-checkbox ::ng-deep .mdc-ripple-surface{--mdc-ripple-fg-opacity: 0 !important;--mdc-ripple-hover-opacity: 0 !important;--mdc-ripple-press-opacity: 0 !important;--mdc-ripple-focus-opacity: 0 !important}.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__native-control:before,.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__native-control:after{display:none!important;content:none!important}: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}al-icon-button{color:#4b4f62!important;background:transparent!important}:host ::ng-deep al-icon-button:hover,:host ::ng-deep al-icon-button:focus{background:transparent!important;color:#4b4f62!important}.toolbar-right-icons{display:flex;flex-direction:column;align-items:center;gap:12px;visibility:hidden;opacity:0;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.icon-wrapper{position:relative;display:flex;width:20px;height:20px;padding:2px;justify-content:center;align-items:center;flex-shrink:0;aspect-ratio:1/1;background-color:transparent;border-radius:4px;margin:0 auto;box-sizing:border-box}.icon-wrapper:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;background-color:transparent;border-radius:4px;transition:width .2s ease,height .2s ease,background-color .2s ease;z-index:0;pointer-events:none;padding:0;box-sizing:border-box}.icon-wrapper ::ng-deep al-icon-button,.icon-wrapper ::ng-deep al-checkbox,.icon-wrapper button{position:relative;z-index:1}.toolbar-right-container>.icon-wrapper:first-child:hover:before{background-color:transparent;width:20px;height:20px;padding:0}.toolbar-right-icons .icon-wrapper:hover:before{width:24px;height:24px;background-color:#bbc7f6}.toolbar-right-container:has(.toolbar-right-icons .icon-wrapper:has(.eye-icon):hover)>.icon-wrapper:first-child:before{width:24px;height:24px;background-color:#bbc7f6}.toolbar-right-container:hover .toolbar-right-icons,.toolbar-right-icons.always-visible{visibility:visible;opacity:1}.toolbar-icon{border:none;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;width:20px;height:20px;margin:0 auto}.toolbar-icon:after{display:none!important}.toolbar-icon ::ng-deep .mat-ripple-element{display:none!important}.toolbar-icon ::ng-deep .mat-ripple{display:none!important}.subrole-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.subrole-icon mat-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.eye-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.eye-icon mat-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.icon-wrapper al-icon-button{width:20px;height:20px;margin:0 auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppToolbarRightComponent, selector: "toolbar-right", inputs: { alwaysShowIcons: "alwaysShowIcons", checked: "checked", overrideConfig: "overrideConfig", currentObj: "currentObj" }, outputs: { checkboxChange: "checkboxChange", visibilityToggle: "visibilityToggle", hideShowEvent: "hideShowEvent", checkboxEvent: "checkboxEvent", setSubroleEvent: "setSubroleEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toolbar-right-container\">\n  <div class=\"icon-wrapper\"><al-checkbox *ngIf=\"requiredIcon.checkbox.display\" [checked]=\"checked\" [showLabels]=\"false\"\n      (change)=\"onCheckboxChange($event)\" (mouseenter)=\"onCheckboxHover(true)\"\n      (mouseleave)=\"onCheckboxHover(false)\"></al-checkbox></div>\n  <div class=\"toolbar-right-icons\" [ngClass]=\"{'always-visible': showIcons}\">\n    <div class=\"icon-wrapper\" *ngIf=\"requiredIcon.sr.display\"><button type=\"button\"\n        class=\"toolbar-icon toolbar-icon--subrole\" [attr.aria-label]=\"requiredIcon.sr.title\"\n        [attr.title]=\"requiredIcon.sr.title\" (click)=\"setSubrole()\"><mat-icon\n          [svgIcon]=\"currentObj['subrole'] ? 'subrole_active' : 'subrole-icon-grey'\" class=\"subrole-icon\"></mat-icon></button>\n    </div>\n    <div class=\"icon-wrapper\"><button *ngIf=\"requiredIcon.eye.display\" type=\"button\"\n        class=\"toolbar-icon toolbar-icon--eye eye-icon\" [attr.aria-label]=\"eyeLabel\" [attr.title]=\"eyeTitle\"\n        (click)=\"onToggleVisibility()\"><mat-icon [svgIcon]=\"eyeSvgIcon\" class=\"eye-icon\"></mat-icon></button></div>\n  </div>\n</div>\n", styles: [".toolbar-right-container{background-color:transparent;border-radius:8px;padding:8px 6px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px!important;transition:background-color .3s ease-in-out}.toolbar-right-container ::ng-deep .mat-ripple-element{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.toolbar-right-container ::ng-deep .mat-ripple{display:none!important;visibility:hidden!important;pointer-events:none!important}.toolbar-right-container ::ng-deep .mdc-ripple-surface{--mdc-ripple-fg-opacity: 0 !important;--mdc-ripple-hover-opacity: 0 !important;--mdc-ripple-press-opacity: 0 !important;--mdc-ripple-focus-opacity: 0 !important}.toolbar-right-container ::ng-deep .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mdc-checkbox:hover .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mdc-checkbox:focus .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox:hover .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox:focus .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox.mat-focused .mdc-checkbox__ripple{display:none!important;opacity:0!important;visibility:hidden!important;background-color:transparent!important;pointer-events:none!important;animation:none!important;transform:scale(0)!important}.toolbar-right-container ::ng-deep [class*=ripple],.toolbar-right-container ::ng-deep [class*=Ripple]{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.toolbar-right-container ::ng-deep .mdc-checkbox__native-control:before,.toolbar-right-container ::ng-deep .mdc-checkbox__native-control:after{display:none!important}.toolbar-right-container:hover{background-color:#e5e9fc}al-icon-button{margin:0 auto!important;display:flex;align-items:center;justify-content:center}.icon-wrapper al-checkbox{width:20px!important;height:20px!important;margin:0 auto!important;padding:0!important;display:flex;align-items:center;justify-content:center;background:none!important;border-radius:2px}.icon-wrapper al-checkbox ::ng-deep *{border-radius:2px!important}.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__ripple{display:none!important;opacity:0!important;visibility:hidden!important;background-color:transparent!important;pointer-events:none!important;animation:none!important;transform:scale(0)!important}.icon-wrapper al-checkbox ::ng-deep .mat-ripple-element{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.icon-wrapper al-checkbox ::ng-deep .mat-ripple{display:none!important;visibility:hidden!important;pointer-events:none!important}.icon-wrapper al-checkbox ::ng-deep .mdc-ripple-surface{--mdc-ripple-fg-opacity: 0 !important;--mdc-ripple-hover-opacity: 0 !important;--mdc-ripple-press-opacity: 0 !important;--mdc-ripple-focus-opacity: 0 !important}.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__native-control:before,.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__native-control:after{display:none!important;content:none!important}: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}al-icon-button{color:#4b4f62!important;background:transparent!important}:host ::ng-deep al-icon-button:hover,:host ::ng-deep al-icon-button:focus{background:transparent!important;color:#4b4f62!important}.toolbar-right-icons{display:flex;flex-direction:column;align-items:center;gap:12px;visibility:hidden;opacity:0;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.icon-wrapper{position:relative;display:flex;width:20px;height:20px;padding:2px;justify-content:center;align-items:center;flex-shrink:0;aspect-ratio:1/1;background-color:transparent;border-radius:4px;margin:0 auto;box-sizing:border-box}.icon-wrapper:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;background-color:transparent;border-radius:4px;transition:width .2s ease,height .2s ease,background-color .2s ease;z-index:0;pointer-events:none;padding:0;box-sizing:border-box}.icon-wrapper ::ng-deep al-icon-button,.icon-wrapper ::ng-deep al-checkbox,.icon-wrapper button{position:relative;z-index:1}.toolbar-right-container>.icon-wrapper:first-child:hover:before{background-color:transparent;width:20px;height:20px;padding:0}.toolbar-right-icons .icon-wrapper:hover:before{width:24px;height:24px;background-color:#bbc7f6}.toolbar-right-container:has(.toolbar-right-icons .icon-wrapper:has(.eye-icon):hover)>.icon-wrapper:first-child:before{width:24px;height:24px;background-color:#bbc7f6}.toolbar-right-container:hover .toolbar-right-icons,.toolbar-right-icons.always-visible{visibility:visible;opacity:1}.toolbar-icon{border:none;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;width:20px;height:20px;margin:0 auto}.toolbar-icon:after{display:none!important}.toolbar-icon ::ng-deep .mat-ripple-element{display:none!important}.toolbar-icon ::ng-deep .mat-ripple{display:none!important}.subrole-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.subrole-icon mat-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.eye-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.eye-icon mat-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.icon-wrapper al-icon-button{width:20px;height:20px;margin:0 auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppToolbarRightComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'toolbar-right', template: "<div class=\"toolbar-right-container\">\n  <div class=\"icon-wrapper\"><al-checkbox *ngIf=\"requiredIcon.checkbox.display\" [checked]=\"checked\" [showLabels]=\"false\"\n      (change)=\"onCheckboxChange($event)\" (mouseenter)=\"onCheckboxHover(true)\"\n      (mouseleave)=\"onCheckboxHover(false)\"></al-checkbox></div>\n  <div class=\"toolbar-right-icons\" [ngClass]=\"{'always-visible': showIcons}\">\n    <div class=\"icon-wrapper\" *ngIf=\"requiredIcon.sr.display\"><button type=\"button\"\n        class=\"toolbar-icon toolbar-icon--subrole\" [attr.aria-label]=\"requiredIcon.sr.title\"\n        [attr.title]=\"requiredIcon.sr.title\" (click)=\"setSubrole()\"><mat-icon\n          [svgIcon]=\"currentObj['subrole'] ? 'subrole_active' : 'subrole'\" class=\"subrole-icon\"></mat-icon></button>\n    </div>\n    <div class=\"icon-wrapper\"><button *ngIf=\"requiredIcon.eye.display\" type=\"button\"\n        class=\"toolbar-icon toolbar-icon--eye eye-icon\" [attr.aria-label]=\"eyeLabel\" [attr.title]=\"eyeTitle\"\n        (click)=\"onToggleVisibility()\"><mat-icon [svgIcon]=\"eyeSvgIcon\" class=\"eye-icon\"></mat-icon></button></div>\n  </div>\n</div>\n", styles: [".toolbar-right-container{background-color:transparent;border-radius:8px;padding:8px 6px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px!important;transition:background-color .3s ease-in-out}.toolbar-right-container ::ng-deep .mat-ripple-element{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.toolbar-right-container ::ng-deep .mat-ripple{display:none!important;visibility:hidden!important;pointer-events:none!important}.toolbar-right-container ::ng-deep .mdc-ripple-surface{--mdc-ripple-fg-opacity: 0 !important;--mdc-ripple-hover-opacity: 0 !important;--mdc-ripple-press-opacity: 0 !important;--mdc-ripple-focus-opacity: 0 !important}.toolbar-right-container ::ng-deep .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mdc-checkbox:hover .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mdc-checkbox:focus .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox:hover .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox:focus .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox.mat-focused .mdc-checkbox__ripple{display:none!important;opacity:0!important;visibility:hidden!important;background-color:transparent!important;pointer-events:none!important;animation:none!important;transform:scale(0)!important}.toolbar-right-container ::ng-deep [class*=ripple],.toolbar-right-container ::ng-deep [class*=Ripple]{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.toolbar-right-container ::ng-deep .mdc-checkbox__native-control:before,.toolbar-right-container ::ng-deep .mdc-checkbox__native-control:after{display:none!important}.toolbar-right-container:hover{background-color:#e5e9fc}al-icon-button{margin:0 auto!important;display:flex;align-items:center;justify-content:center}.icon-wrapper al-checkbox{width:20px!important;height:20px!important;margin:0 auto!important;padding:0!important;display:flex;align-items:center;justify-content:center;background:none!important;border-radius:2px}.icon-wrapper al-checkbox ::ng-deep *{border-radius:2px!important}.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__ripple{display:none!important;opacity:0!important;visibility:hidden!important;background-color:transparent!important;pointer-events:none!important;animation:none!important;transform:scale(0)!important}.icon-wrapper al-checkbox ::ng-deep .mat-ripple-element{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.icon-wrapper al-checkbox ::ng-deep .mat-ripple{display:none!important;visibility:hidden!important;pointer-events:none!important}.icon-wrapper al-checkbox ::ng-deep .mdc-ripple-surface{--mdc-ripple-fg-opacity: 0 !important;--mdc-ripple-hover-opacity: 0 !important;--mdc-ripple-press-opacity: 0 !important;--mdc-ripple-focus-opacity: 0 !important}.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__native-control:before,.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__native-control:after{display:none!important;content:none!important}: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}al-icon-button{color:#4b4f62!important;background:transparent!important}:host ::ng-deep al-icon-button:hover,:host ::ng-deep al-icon-button:focus{background:transparent!important;color:#4b4f62!important}.toolbar-right-icons{display:flex;flex-direction:column;align-items:center;gap:12px;visibility:hidden;opacity:0;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.icon-wrapper{position:relative;display:flex;width:20px;height:20px;padding:2px;justify-content:center;align-items:center;flex-shrink:0;aspect-ratio:1/1;background-color:transparent;border-radius:4px;margin:0 auto;box-sizing:border-box}.icon-wrapper:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;background-color:transparent;border-radius:4px;transition:width .2s ease,height .2s ease,background-color .2s ease;z-index:0;pointer-events:none;padding:0;box-sizing:border-box}.icon-wrapper ::ng-deep al-icon-button,.icon-wrapper ::ng-deep al-checkbox,.icon-wrapper button{position:relative;z-index:1}.toolbar-right-container>.icon-wrapper:first-child:hover:before{background-color:transparent;width:20px;height:20px;padding:0}.toolbar-right-icons .icon-wrapper:hover:before{width:24px;height:24px;background-color:#bbc7f6}.toolbar-right-container:has(.toolbar-right-icons .icon-wrapper:has(.eye-icon):hover)>.icon-wrapper:first-child:before{width:24px;height:24px;background-color:#bbc7f6}.toolbar-right-container:hover .toolbar-right-icons,.toolbar-right-icons.always-visible{visibility:visible;opacity:1}.toolbar-icon{border:none;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;width:20px;height:20px;margin:0 auto}.toolbar-icon:after{display:none!important}.toolbar-icon ::ng-deep .mat-ripple-element{display:none!important}.toolbar-icon ::ng-deep .mat-ripple{display:none!important}.subrole-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.subrole-icon mat-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.eye-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.eye-icon mat-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.icon-wrapper al-icon-button{width:20px;height:20px;margin:0 auto}\n"] }]
+            args: [{ selector: 'toolbar-right', template: "<div class=\"toolbar-right-container\">\n  <div class=\"icon-wrapper\"><al-checkbox *ngIf=\"requiredIcon.checkbox.display\" [checked]=\"checked\" [showLabels]=\"false\"\n      (change)=\"onCheckboxChange($event)\" (mouseenter)=\"onCheckboxHover(true)\"\n      (mouseleave)=\"onCheckboxHover(false)\"></al-checkbox></div>\n  <div class=\"toolbar-right-icons\" [ngClass]=\"{'always-visible': showIcons}\">\n    <div class=\"icon-wrapper\" *ngIf=\"requiredIcon.sr.display\"><button type=\"button\"\n        class=\"toolbar-icon toolbar-icon--subrole\" [attr.aria-label]=\"requiredIcon.sr.title\"\n        [attr.title]=\"requiredIcon.sr.title\" (click)=\"setSubrole()\"><mat-icon\n          [svgIcon]=\"currentObj['subrole'] ? 'subrole_active' : 'subrole-icon-grey'\" class=\"subrole-icon\"></mat-icon></button>\n    </div>\n    <div class=\"icon-wrapper\"><button *ngIf=\"requiredIcon.eye.display\" type=\"button\"\n        class=\"toolbar-icon toolbar-icon--eye eye-icon\" [attr.aria-label]=\"eyeLabel\" [attr.title]=\"eyeTitle\"\n        (click)=\"onToggleVisibility()\"><mat-icon [svgIcon]=\"eyeSvgIcon\" class=\"eye-icon\"></mat-icon></button></div>\n  </div>\n</div>\n", styles: [".toolbar-right-container{background-color:transparent;border-radius:8px;padding:8px 6px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px!important;transition:background-color .3s ease-in-out}.toolbar-right-container ::ng-deep .mat-ripple-element{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.toolbar-right-container ::ng-deep .mat-ripple{display:none!important;visibility:hidden!important;pointer-events:none!important}.toolbar-right-container ::ng-deep .mdc-ripple-surface{--mdc-ripple-fg-opacity: 0 !important;--mdc-ripple-hover-opacity: 0 !important;--mdc-ripple-press-opacity: 0 !important;--mdc-ripple-focus-opacity: 0 !important}.toolbar-right-container ::ng-deep .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mdc-checkbox:hover .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mdc-checkbox:focus .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox:hover .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox:focus .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox.mat-focused .mdc-checkbox__ripple{display:none!important;opacity:0!important;visibility:hidden!important;background-color:transparent!important;pointer-events:none!important;animation:none!important;transform:scale(0)!important}.toolbar-right-container ::ng-deep [class*=ripple],.toolbar-right-container ::ng-deep [class*=Ripple]{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.toolbar-right-container ::ng-deep .mdc-checkbox__native-control:before,.toolbar-right-container ::ng-deep .mdc-checkbox__native-control:after{display:none!important}.toolbar-right-container:hover{background-color:#e5e9fc}al-icon-button{margin:0 auto!important;display:flex;align-items:center;justify-content:center}.icon-wrapper al-checkbox{width:20px!important;height:20px!important;margin:0 auto!important;padding:0!important;display:flex;align-items:center;justify-content:center;background:none!important;border-radius:2px}.icon-wrapper al-checkbox ::ng-deep *{border-radius:2px!important}.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__ripple{display:none!important;opacity:0!important;visibility:hidden!important;background-color:transparent!important;pointer-events:none!important;animation:none!important;transform:scale(0)!important}.icon-wrapper al-checkbox ::ng-deep .mat-ripple-element{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.icon-wrapper al-checkbox ::ng-deep .mat-ripple{display:none!important;visibility:hidden!important;pointer-events:none!important}.icon-wrapper al-checkbox ::ng-deep .mdc-ripple-surface{--mdc-ripple-fg-opacity: 0 !important;--mdc-ripple-hover-opacity: 0 !important;--mdc-ripple-press-opacity: 0 !important;--mdc-ripple-focus-opacity: 0 !important}.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__native-control:before,.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__native-control:after{display:none!important;content:none!important}: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}al-icon-button{color:#4b4f62!important;background:transparent!important}:host ::ng-deep al-icon-button:hover,:host ::ng-deep al-icon-button:focus{background:transparent!important;color:#4b4f62!important}.toolbar-right-icons{display:flex;flex-direction:column;align-items:center;gap:12px;visibility:hidden;opacity:0;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.icon-wrapper{position:relative;display:flex;width:20px;height:20px;padding:2px;justify-content:center;align-items:center;flex-shrink:0;aspect-ratio:1/1;background-color:transparent;border-radius:4px;margin:0 auto;box-sizing:border-box}.icon-wrapper:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;background-color:transparent;border-radius:4px;transition:width .2s ease,height .2s ease,background-color .2s ease;z-index:0;pointer-events:none;padding:0;box-sizing:border-box}.icon-wrapper ::ng-deep al-icon-button,.icon-wrapper ::ng-deep al-checkbox,.icon-wrapper button{position:relative;z-index:1}.toolbar-right-container>.icon-wrapper:first-child:hover:before{background-color:transparent;width:20px;height:20px;padding:0}.toolbar-right-icons .icon-wrapper:hover:before{width:24px;height:24px;background-color:#bbc7f6}.toolbar-right-container:has(.toolbar-right-icons .icon-wrapper:has(.eye-icon):hover)>.icon-wrapper:first-child:before{width:24px;height:24px;background-color:#bbc7f6}.toolbar-right-container:hover .toolbar-right-icons,.toolbar-right-icons.always-visible{visibility:visible;opacity:1}.toolbar-icon{border:none;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;width:20px;height:20px;margin:0 auto}.toolbar-icon:after{display:none!important}.toolbar-icon ::ng-deep .mat-ripple-element{display:none!important}.toolbar-icon ::ng-deep .mat-ripple{display:none!important}.subrole-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.subrole-icon mat-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.eye-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.eye-icon mat-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.icon-wrapper al-icon-button{width:20px;height:20px;margin:0 auto}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }], propDecorators: { alwaysShowIcons: [{
                 type: Input
             }], checked: [{
@@ -6777,7 +6823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }] });
 
 // Static flag to ensure icons are registered only once
-let iconsRegistered = false;
+let iconsRegistered$1 = false;
 class SideActionBarWrapperComponent {
     constructor(iconRegistry, sanitizer) {
         this.iconRegistry = iconRegistry;
@@ -6803,7 +6849,7 @@ class SideActionBarWrapperComponent {
     }
     registerIcons() {
         // Register icons only once using static flag
-        if (!iconsRegistered) {
+        if (!iconsRegistered$1) {
             try {
                 // Register all icons synchronously
                 // Use icons from image-utils
@@ -6818,7 +6864,7 @@ class SideActionBarWrapperComponent {
                 // Keep backward compatibility - register old icon names that might be used in templates
                 this.iconRegistry.addSvgIconLiteral('arrow_downward', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['multi-drag-drop']));
                 this.iconRegistry.addSvgIconLiteral('delete', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['delete-icon']));
-                iconsRegistered = true;
+                iconsRegistered$1 = true;
             }
             catch (error) {
                 console.error('Failed to register side action bar icons:', error);
@@ -6921,6 +6967,228 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+// Static flag to ensure icons are registered only once
+let iconsRegistered = false;
+/**
+ * AI Wrapper Component
+ *
+ * A presentational component that displays a clock-hand style toolbar
+ * that rotates between vertical (tools) and horizontal (AI input) states.
+ *
+ * This component has no internal logic - all state is controlled via inputs
+ * and user interactions emit events.
+ */
+class AiWrapperComponent {
+    constructor(iconRegistry, sanitizer) {
+        this.iconRegistry = iconRegistry;
+        this.sanitizer = sanitizer;
+        /** Whether the component is in AI mode (horizontal) or tools mode (vertical) */
+        this.isAI = false;
+        /** Placeholder text for the AI input field (dropdown) */
+        this.inputPlaceholder = 'Typing';
+        /** Options for the dropdown input */
+        this.inputOptions = ['Typing', 'Gathering', 'Processing'];
+        /** Current value of the AI input field */
+        this.inputValue = '';
+        /** Whether the input is disabled */
+        this.inputDisabled = false;
+        /** Whether to show the close (X) button */
+        this.showCloseButton = true;
+        /** Whether to show the hide button in vertical mode */
+        this.showHideButton = true;
+        /** Whether to show the sub role button in vertical mode */
+        this.showSubRoleButton = true;
+        /** Whether to show the year month button in vertical mode */
+        this.showYearMonthButton = true;
+        /** Whether to show the move button in vertical mode */
+        this.showMoveButton = true;
+        /** Whether to show the delete button in vertical mode */
+        this.showDeleteButton = true;
+        /** Whether to show the Apply AI button in AI mode */
+        this.showApplyButton = true;
+        /** Label for the Apply AI button */
+        this.applyLabel = 'Apply AI';
+        /** Whether the Apply AI button is disabled */
+        this.applyDisabled = false;
+        /** Whether to show the chevron button */
+        this.showChevronButton = true;
+        /** Whether to show helper text */
+        this.showHelperText = true;
+        /** Helper text content */
+        this.helperText = 'Action will be applied globally to all sections';
+        /** Event emitted when the close (X) button is clicked */
+        this.closeClick = new EventEmitter();
+        /** Event emitted when the AI trigger button (Sparkles) is clicked */
+        this.aiTriggerClick = new EventEmitter();
+        /** Event emitted when the AI input value changes */
+        this.inputValueChange = new EventEmitter();
+        /** Event emitted when the hide button is clicked */
+        this.hideClick = new EventEmitter();
+        /** Event emitted when the sub role button is clicked */
+        this.subRoleClick = new EventEmitter();
+        /** Event emitted when the year month button is clicked */
+        this.yearMonthClick = new EventEmitter();
+        /** Event emitted when the move button is clicked */
+        this.moveClick = new EventEmitter();
+        /** Event emitted when the delete button is clicked */
+        this.deleteClick = new EventEmitter();
+        /** Event emitted when the Apply AI button is clicked */
+        this.applyClick = new EventEmitter();
+        /** Event emitted when the chevron button is clicked */
+        this.chevronClick = new EventEmitter();
+        /** Event emitted when the input field is focused */
+        this.inputFocus = new EventEmitter();
+        /** Event emitted when the input field loses focus */
+        this.inputBlur = new EventEmitter();
+        this.registerIcons();
+    }
+    ngOnInit() {
+        // Icons are registered in constructor
+    }
+    registerIcons() {
+        // Register icons only once using static flag
+        if (!iconsRegistered) {
+            try {
+                // Register all icons synchronously
+                this.iconRegistry.addSvgIconLiteral('hide_section', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['hide_section']));
+                // Register visibility_off as alias to hide_section for backward compatibility
+                this.iconRegistry.addSvgIconLiteral('visibility_off', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['hide_section']));
+                this.iconRegistry.addSvgIconLiteral('subrole', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['subrole']));
+                this.iconRegistry.addSvgIconLiteral('year_month_icon', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['year_month_icon']));
+                this.iconRegistry.addSvgIconLiteral('year_only_icon', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['year_only_icon']));
+                this.iconRegistry.addSvgIconLiteral('multi-drag-drop', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['multi-drag-drop']));
+                this.iconRegistry.addSvgIconLiteral('delete-icon', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['delete-icon']));
+                // Keep backward compatibility - register old icon names
+                this.iconRegistry.addSvgIconLiteral('arrow_downward', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['multi-drag-drop']));
+                this.iconRegistry.addSvgIconLiteral('delete', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['delete-icon']));
+                iconsRegistered = true;
+            }
+            catch (error) {
+                console.error('Failed to register AI wrapper icons:', error);
+            }
+        }
+    }
+    onCloseClick() {
+        this.closeClick.emit();
+    }
+    onAITriggerClick(event) {
+        event.stopPropagation();
+        this.aiTriggerClick.emit();
+    }
+    onInputChange(value) {
+        this.inputValueChange.emit(value);
+    }
+    onHideClick() {
+        this.hideClick.emit();
+    }
+    onSubRoleClick() {
+        this.subRoleClick.emit();
+    }
+    onYearMonthClick() {
+        this.yearMonthClick.emit();
+    }
+    onMoveClick() {
+        this.moveClick.emit();
+    }
+    onDeleteClick() {
+        this.deleteClick.emit();
+    }
+    onApplyClick() {
+        this.applyClick.emit();
+    }
+    onChevronClick() {
+        this.chevronClick.emit();
+    }
+    onInputFocus() {
+        this.inputFocus.emit();
+    }
+    onInputBlur() {
+        this.inputBlur.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiWrapperComponent, deps: [{ token: i1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AiWrapperComponent, isStandalone: true, selector: "al-ai-wrapper", inputs: { isAI: "isAI", inputPlaceholder: "inputPlaceholder", inputOptions: "inputOptions", inputValue: "inputValue", inputDisabled: "inputDisabled", showCloseButton: "showCloseButton", showHideButton: "showHideButton", showSubRoleButton: "showSubRoleButton", showYearMonthButton: "showYearMonthButton", showMoveButton: "showMoveButton", showDeleteButton: "showDeleteButton", showApplyButton: "showApplyButton", applyLabel: "applyLabel", applyDisabled: "applyDisabled", showChevronButton: "showChevronButton", showHelperText: "showHelperText", helperText: "helperText" }, outputs: { closeClick: "closeClick", aiTriggerClick: "aiTriggerClick", inputValueChange: "inputValueChange", hideClick: "hideClick", subRoleClick: "subRoleClick", yearMonthClick: "yearMonthClick", moveClick: "moveClick", deleteClick: "deleteClick", applyClick: "applyClick", chevronClick: "chevronClick", inputFocus: "inputFocus", inputBlur: "inputBlur" }, ngImport: i0, template: "<div class=\"al-ai-wrapper\">\n  <div class=\"al-ai-wrapper__center\">\n    <div *ngIf=\"showCloseButton\" class=\"al-ai-wrapper__close-button-wrapper\" [class.is-ai-mode]=\"isAI\"><al-button\n        [buttonType]=\"'icon-circle'\" [color]=\"isAI ? 'grey' : 'grey'\" [outline]=\"false\" [size]=\"'base'\"\n        [iconOnly]=\"true\" [iconOutlined]=\"false\" [icon]=\"'close'\" [disabled]=\"false\" [tooltip]=\"''\"\n        [tooltipPosition]=\"'above'\" aria-label=\"Close\" (onClick)=\"onCloseClick()\"></al-button></div>\n    <div class=\"al-ai-wrapper__hand-wrapper\" [class.is-ai-mode]=\"isAI\">\n      <div class=\"al-ai-wrapper__gap\">\n        <div class=\"al-ai-wrapper__toolbar\" [class.is-ai-mode]=\"isAI\" [class.no-helper-text]=\"isAI && !showHelperText\">\n          <div class=\"al-ai-wrapper__content\" [class.is-ai-mode]=\"isAI\">\n            <div *ngIf=\"!isAI\" class=\"al-ai-wrapper__vertical-tools\">\n              <ng-content></ng-content>\n            </div>\n            <div *ngIf=\"isAI\" class=\"al-ai-wrapper__horizontal-ai\">\n              <div class=\"al-ai-wrapper__ai-row\">\n                <div class=\"al-ai-wrapper__input-container\"><al-input [labelText]=\"''\" [placeholder]=\"inputPlaceholder\"\n                    [value]=\"inputValue\" [type]=\"'text'\" [disabled]=\"inputDisabled\" [helperText]=\"false\" [leftIcon]=\"''\"\n                    [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\" [multipleSelect]=\"false\"\n                    [options]=\"inputOptions\" [size]=\"'base'\" [types]=\"'plain'\"\n                    (change)=\"onInputChange($event)\"></al-input></div>\n                <div class=\"al-ai-wrapper__ai-actions\"><al-button *ngIf=\"showApplyButton\" [buttonType]=\"'icon-label'\"\n                    [color]=\"'gradient'\" [outline]=\"false\" [size]=\"'base'\" [labelText]=\"applyLabel\"\n                    [disabled]=\"applyDisabled\" aria-label=\"Apply AI\"\n                    (onClick)=\"onApplyClick()\"></al-button><al-icon-button *ngIf=\"showChevronButton\"\n                    icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\" [size]=\"'xl'\"\n                    [disabled]=\"applyDisabled\" (onClick)=\"onChevronClick()\"\n                    [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button></div>\n              </div>\n              <div class=\"al-ai-wrapper__helper-text\" *ngIf=\"showHelperText\">\n                {{ helperText }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":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}:root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}.al-ai-wrapper{display:flex;align-items:flex-start;justify-content:flex-end;height:400px;overflow:hidden;padding:32px}.al-ai-wrapper__center{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.al-ai-wrapper__close-button-wrapper{position:absolute;z-index:100;top:0;left:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .5s ease;pointer-events:none}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button{pointer-events:auto}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button{transition:all .5s ease}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:hover{transform:scale(1.05)}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:active{transform:scale(.95)}.al-ai-wrapper__hand-wrapper{position:absolute;top:0;left:0;width:40px;height:40px;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:rotate(0);will-change:transform;z-index:1}.al-ai-wrapper__hand-wrapper.is-ai-mode{transform:rotate(90deg)}.al-ai-wrapper__gap{position:absolute;top:52px;left:50%;transform:translate(-50%);width:48px}.al-ai-wrapper__toolbar{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#717793cc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #0000001f;transition:height .7s cubic-bezier(.4,0,.2,1),padding .7s cubic-bezier(.4,0,.2,1);border-radius:8px;overflow:hidden;width:48px}.al-ai-wrapper__toolbar.is-ai-mode{height:auto;min-height:392px;width:80px;padding:8px;overflow:visible;max-height:392px}.al-ai-wrapper__toolbar.is-ai-mode.no-helper-text{width:58px}.al-ai-wrapper__content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:center center;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:translateY(0) rotate(0);position:relative;will-change:transform;width:48px}.al-ai-wrapper__content.is-ai-mode{width:370px;height:auto;min-height:56px;position:absolute;top:50%;left:50%;margin-left:-185px;transform:translateY(-50%) rotate(-90deg);transform-origin:center center}.al-ai-wrapper__vertical-tools{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%;padding:12px 8px;gap:8px;animation:fadeInZoom .5s ease-out}.al-ai-wrapper__horizontal-ai{width:370px;display:flex;flex-direction:column;gap:4px;transform-origin:right center;padding-bottom:0;animation:aiBarExpand .5s cubic-bezier(.2,.8,.2,1);flex-shrink:0}.al-ai-wrapper__ai-row{display:flex;align-items:center;gap:4px;opacity:0;animation:aiBarContentFade .3s ease-out .2s forwards}.al-ai-wrapper__ai-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center;flex-shrink:0}.al-ai-wrapper__ai-icon mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.al-ai-wrapper__input-container{flex:1 1 auto;display:flex;align-items:center;min-width:0}.al-ai-wrapper__input-container ::ng-deep al-input{width:100%}.al-ai-wrapper__input-container ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.al-ai-wrapper__ai-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.al-ai-wrapper__action-button{padding:8px;color:#fff6;background:transparent;border:none;cursor:pointer;transition:color .2s ease;display:flex;align-items:center;justify-content:center;outline:none}.al-ai-wrapper__action-button:hover{color:#fff}.al-ai-wrapper__action-button mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.al-ai-wrapper__helper-text{color:#ffffffb3;font-size:12px;line-height:16px;padding:0;margin:0;width:100%;flex-shrink:0}@keyframes fadeInZoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes aiBarExpand{0%{opacity:0;transform:translate(16px) scaleX(.2)}60%{opacity:1;transform:translate(2px) scaleX(1.02)}to{opacity:1;transform:translate(0) scaleX(1)}}@keyframes aiBarContentFade{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColour", "iconOutlined", "size", "colour", "disabled", "dataTestId"], outputs: ["onClick"] }, { 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"] }, { kind: "component", type: InputComponent, selector: "al-input", inputs: ["labelText", "label", "placeholder", "value", "formControlName", "dataTestId", "type", "disabled", "helperText", "error", "errorMessage", "leftIcon", "rightIcon", "hasDropDown", "dropDown", "searchfilter", "multipleSelect", "options", "size", "types", "tooltip", "tooltipPosition", "matDatepicker", "dateType"], outputs: ["change", "valueChange", "onColorChange", "monthSelected", "yearSelected"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'al-ai-wrapper', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatTooltipModule, IconButtonComponent, ButtonComponent, InputComponent], template: "<div class=\"al-ai-wrapper\">\n  <div class=\"al-ai-wrapper__center\">\n    <div *ngIf=\"showCloseButton\" class=\"al-ai-wrapper__close-button-wrapper\" [class.is-ai-mode]=\"isAI\"><al-button\n        [buttonType]=\"'icon-circle'\" [color]=\"isAI ? 'grey' : 'grey'\" [outline]=\"false\" [size]=\"'base'\"\n        [iconOnly]=\"true\" [iconOutlined]=\"false\" [icon]=\"'close'\" [disabled]=\"false\" [tooltip]=\"''\"\n        [tooltipPosition]=\"'above'\" aria-label=\"Close\" (onClick)=\"onCloseClick()\"></al-button></div>\n    <div class=\"al-ai-wrapper__hand-wrapper\" [class.is-ai-mode]=\"isAI\">\n      <div class=\"al-ai-wrapper__gap\">\n        <div class=\"al-ai-wrapper__toolbar\" [class.is-ai-mode]=\"isAI\" [class.no-helper-text]=\"isAI && !showHelperText\">\n          <div class=\"al-ai-wrapper__content\" [class.is-ai-mode]=\"isAI\">\n            <div *ngIf=\"!isAI\" class=\"al-ai-wrapper__vertical-tools\">\n              <ng-content></ng-content>\n            </div>\n            <div *ngIf=\"isAI\" class=\"al-ai-wrapper__horizontal-ai\">\n              <div class=\"al-ai-wrapper__ai-row\">\n                <div class=\"al-ai-wrapper__input-container\"><al-input [labelText]=\"''\" [placeholder]=\"inputPlaceholder\"\n                    [value]=\"inputValue\" [type]=\"'text'\" [disabled]=\"inputDisabled\" [helperText]=\"false\" [leftIcon]=\"''\"\n                    [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\" [multipleSelect]=\"false\"\n                    [options]=\"inputOptions\" [size]=\"'base'\" [types]=\"'plain'\"\n                    (change)=\"onInputChange($event)\"></al-input></div>\n                <div class=\"al-ai-wrapper__ai-actions\"><al-button *ngIf=\"showApplyButton\" [buttonType]=\"'icon-label'\"\n                    [color]=\"'gradient'\" [outline]=\"false\" [size]=\"'base'\" [labelText]=\"applyLabel\"\n                    [disabled]=\"applyDisabled\" aria-label=\"Apply AI\"\n                    (onClick)=\"onApplyClick()\"></al-button><al-icon-button *ngIf=\"showChevronButton\"\n                    icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\" [size]=\"'xl'\"\n                    [disabled]=\"applyDisabled\" (onClick)=\"onChevronClick()\"\n                    [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button></div>\n              </div>\n              <div class=\"al-ai-wrapper__helper-text\" *ngIf=\"showHelperText\">\n                {{ helperText }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":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}:root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}.al-ai-wrapper{display:flex;align-items:flex-start;justify-content:flex-end;height:400px;overflow:hidden;padding:32px}.al-ai-wrapper__center{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.al-ai-wrapper__close-button-wrapper{position:absolute;z-index:100;top:0;left:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .5s ease;pointer-events:none}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button{pointer-events:auto}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button{transition:all .5s ease}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:hover{transform:scale(1.05)}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:active{transform:scale(.95)}.al-ai-wrapper__hand-wrapper{position:absolute;top:0;left:0;width:40px;height:40px;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:rotate(0);will-change:transform;z-index:1}.al-ai-wrapper__hand-wrapper.is-ai-mode{transform:rotate(90deg)}.al-ai-wrapper__gap{position:absolute;top:52px;left:50%;transform:translate(-50%);width:48px}.al-ai-wrapper__toolbar{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#717793cc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #0000001f;transition:height .7s cubic-bezier(.4,0,.2,1),padding .7s cubic-bezier(.4,0,.2,1);border-radius:8px;overflow:hidden;width:48px}.al-ai-wrapper__toolbar.is-ai-mode{height:auto;min-height:392px;width:80px;padding:8px;overflow:visible;max-height:392px}.al-ai-wrapper__toolbar.is-ai-mode.no-helper-text{width:58px}.al-ai-wrapper__content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:center center;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:translateY(0) rotate(0);position:relative;will-change:transform;width:48px}.al-ai-wrapper__content.is-ai-mode{width:370px;height:auto;min-height:56px;position:absolute;top:50%;left:50%;margin-left:-185px;transform:translateY(-50%) rotate(-90deg);transform-origin:center center}.al-ai-wrapper__vertical-tools{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%;padding:12px 8px;gap:8px;animation:fadeInZoom .5s ease-out}.al-ai-wrapper__horizontal-ai{width:370px;display:flex;flex-direction:column;gap:4px;transform-origin:right center;padding-bottom:0;animation:aiBarExpand .5s cubic-bezier(.2,.8,.2,1);flex-shrink:0}.al-ai-wrapper__ai-row{display:flex;align-items:center;gap:4px;opacity:0;animation:aiBarContentFade .3s ease-out .2s forwards}.al-ai-wrapper__ai-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center;flex-shrink:0}.al-ai-wrapper__ai-icon mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.al-ai-wrapper__input-container{flex:1 1 auto;display:flex;align-items:center;min-width:0}.al-ai-wrapper__input-container ::ng-deep al-input{width:100%}.al-ai-wrapper__input-container ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.al-ai-wrapper__ai-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.al-ai-wrapper__action-button{padding:8px;color:#fff6;background:transparent;border:none;cursor:pointer;transition:color .2s ease;display:flex;align-items:center;justify-content:center;outline:none}.al-ai-wrapper__action-button:hover{color:#fff}.al-ai-wrapper__action-button mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.al-ai-wrapper__helper-text{color:#ffffffb3;font-size:12px;line-height:16px;padding:0;margin:0;width:100%;flex-shrink:0}@keyframes fadeInZoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes aiBarExpand{0%{opacity:0;transform:translate(16px) scaleX(.2)}60%{opacity:1;transform:translate(2px) scaleX(1.02)}to{opacity:1;transform:translate(0) scaleX(1)}}@keyframes aiBarContentFade{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }], propDecorators: { isAI: [{
+                type: Input
+            }], inputPlaceholder: [{
+                type: Input
+            }], inputOptions: [{
+                type: Input
+            }], inputValue: [{
+                type: Input
+            }], inputDisabled: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], showHideButton: [{
+                type: Input
+            }], showSubRoleButton: [{
+                type: Input
+            }], showYearMonthButton: [{
+                type: Input
+            }], showMoveButton: [{
+                type: Input
+            }], showDeleteButton: [{
+                type: Input
+            }], showApplyButton: [{
+                type: Input
+            }], applyLabel: [{
+                type: Input
+            }], applyDisabled: [{
+                type: Input
+            }], showChevronButton: [{
+                type: Input
+            }], showHelperText: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], closeClick: [{
+                type: Output
+            }], aiTriggerClick: [{
+                type: Output
+            }], inputValueChange: [{
+                type: Output
+            }], hideClick: [{
+                type: Output
+            }], subRoleClick: [{
+                type: Output
+            }], yearMonthClick: [{
+                type: Output
+            }], moveClick: [{
+                type: Output
+            }], deleteClick: [{
+                type: Output
+            }], applyClick: [{
+                type: Output
+            }], chevronClick: [{
+                type: Output
+            }], inputFocus: [{
+                type: Output
+            }], inputBlur: [{
+                type: Output
+            }] } });
+
+/**
+ * Module for AI Wrapper Component
+ * Note: This component is standalone, so this module is optional.
+ * It can be used if you need to import the component in a non-standalone module.
+ */
+class AiWrapperModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AiWrapperModule, imports: [AiWrapperComponent], exports: [AiWrapperComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiWrapperModule, imports: [AiWrapperComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiWrapperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [AiWrapperComponent],
+                    exports: [AiWrapperComponent]
+                }]
+        }] });
+
 /*
  * Public API Surface of allsorter-lib
  */
@@ -6929,5 +7197,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AiApplyBarComponent, AlTabComponent, AllsorterLibComponent, AllsorterLibService, AppToolbarLeftComponent, AppToolbarLeftModule, AppToolbarRightComponent, AppToolbarRightModule, ButtonComponent, ButtonModule, CandidateSectionComponent, CandidateSectionModule, CheckboxComponent, CheckboxModule, CustomEditorComponent, CustomEditorDemoComponent, CustomEditorModule, DateRangeComponent, DateRangeModule, EditableFormWrapperComponent, ExperienceSectionComponent, ExperienceSectionModule, FieldPlaceholderComponent, FieldPlaceholderModule, GeneralContainerComponent, GeneralContainerModule, IconButtonComponent, InputComponent, InputModule, LoaderComponent, LoaderModule, ModalComponent, NewResumeHeaderComponent, NewResumeHeaderModule, NewTypographyComponent, RadioComponent, RadioModule, ResponsiveColumnsComponent, ResponsiveColumnsModule, ResponsiveLayoutComponent, ResponsiveLayoutModule, ResumeEntriesComponent, ResumeEntriesModule, SharedPopupModalModule, SideActionBarWrapperComponent, SideActionBarWrapperModule, SlideToggleComponent, SlideToggleModule, TabsComponent, TabsModule, ToggleButtonsComponent, ToggleButtonsModule, TooltipComponent, TooltipModule };
+export { AiApplyBarComponent, AiWrapperComponent, AiWrapperModule, AlTabComponent, AllsorterLibComponent, AllsorterLibService, AppToolbarLeftComponent, AppToolbarLeftModule, AppToolbarRightComponent, AppToolbarRightModule, ButtonComponent, ButtonModule, CandidateSectionComponent, CandidateSectionModule, CheckboxComponent, CheckboxModule, CustomEditorComponent, CustomEditorDemoComponent, CustomEditorModule, DateRangeComponent, DateRangeModule, EditableFormWrapperComponent, ExperienceSectionComponent, ExperienceSectionModule, FieldPlaceholderComponent, FieldPlaceholderModule, GeneralContainerComponent, GeneralContainerModule, IconButtonComponent, InputComponent, InputModule, LoaderComponent, LoaderModule, ModalComponent, NewResumeHeaderComponent, NewResumeHeaderModule, NewTypographyComponent, RadioComponent, RadioModule, ResponsiveColumnsComponent, ResponsiveColumnsModule, ResponsiveLayoutComponent, ResponsiveLayoutModule, ResumeEntriesComponent, ResumeEntriesModule, SharedPopupModalModule, SideActionBarWrapperComponent, SideActionBarWrapperModule, SlideToggleComponent, SlideToggleModule, TabsComponent, TabsModule, ToggleButtonsComponent, ToggleButtonsModule, TooltipComponent, TooltipModule };
 //# sourceMappingURL=allsorter-ui-components.mjs.map