@allsorter/ui-components 0.0.406 → 0.0.410

package/lib/editable-form-wrapper/editable-form-wrapper.component.d.ts

@@ -40,6 +40,11 @@ export declare class EditableFormWrapperComponent implements AfterViewInit, OnDe
      * If not provided, defaults to window scrolling.
      */
     scrollContainer: string | HTMLElement | null;
+    /**
+     * Padding for button clamp boundaries.
+     * @default 36
+     */
+    clampPadding: number;
     /**
      * Emitted when the left (edit) button is clicked.
      */
@@ -75,5 +80,5 @@ export declare class EditableFormWrapperComponent implements AfterViewInit, OnDe
     ngOnDestroy(): void;
     private setupScrollBehavior;
     static ɵfac: i0.ɵɵFactoryDeclaration<EditableFormWrapperComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EditableFormWrapperComponent, "al-form", never, { "testId": { "alias": "testId"; "required": false; }; "showLeftButton": { "alias": "showLeftButton"; "required": false; }; "showSaveButton": { "alias": "showSaveButton"; "required": false; }; "showDeleteButton": { "alias": "showDeleteButton"; "required": false; }; "leftContainerClass": { "alias": "leftContainerClass"; "required": false; }; "leftContainerStyle": { "alias": "leftContainerStyle"; "required": false; }; "scrollContainer": { "alias": "scrollContainer"; "required": false; }; }, { "leftButtonClick": "leftButtonClick"; "saveButtonClick": "saveButtonClick"; "deleteButtonClick": "deleteButtonClick"; }, never, ["[leftButtonContent]", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditableFormWrapperComponent, "al-form", never, { "testId": { "alias": "testId"; "required": false; }; "showLeftButton": { "alias": "showLeftButton"; "required": false; }; "showSaveButton": { "alias": "showSaveButton"; "required": false; }; "showDeleteButton": { "alias": "showDeleteButton"; "required": false; }; "leftContainerClass": { "alias": "leftContainerClass"; "required": false; }; "leftContainerStyle": { "alias": "leftContainerStyle"; "required": false; }; "scrollContainer": { "alias": "scrollContainer"; "required": false; }; "clampPadding": { "alias": "clampPadding"; "required": false; }; }, { "leftButtonClick": "leftButtonClick"; "saveButtonClick": "saveButtonClick"; "deleteButtonClick": "deleteButtonClick"; }, never, ["[leftButtonContent]", "*"], true, never>;
 }

package/lib/loader/loader.component.d.ts

@@ -1,4 +1,4 @@
-import { OnInit, OnDestroy } from '@angular/core';
+import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 export type LoaderStatus = 'analyzing' | 'gathering' | 'processing' | 'applying' | 'done';
 export declare class LoaderComponent implements OnInit, OnDestroy {
@@ -43,6 +43,11 @@ export declare class LoaderComponent implements OnInit, OnDestroy {
      * @default false
      */
     completeOnDone: boolean;
+    /**
+     * Event emitted when the loader completes a full cycle (reaches 'done' status).
+     * Only emits when completeOnDone is true.
+     */
+    completed: EventEmitter<void>;
     private loopInterval?;
     private currentLoopIndex;
     private readonly statusOrder;
@@ -78,5 +83,5 @@ export declare class LoaderComponent implements OnInit, OnDestroy {
      */
     reset(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LoaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LoaderComponent, "al-loader", never, { "dataTestId": { "alias": "dataTestId"; "required": false; }; "status": { "alias": "status"; "required": false; }; "customText": { "alias": "customText"; "required": false; }; "showText": { "alias": "showText"; "required": false; }; "size": { "alias": "size"; "required": false; }; "autoLoop": { "alias": "autoLoop"; "required": false; }; "loopDuration": { "alias": "loopDuration"; "required": false; }; "customTexts": { "alias": "customTexts"; "required": false; }; "completeOnDone": { "alias": "completeOnDone"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LoaderComponent, "al-loader", never, { "dataTestId": { "alias": "dataTestId"; "required": false; }; "status": { "alias": "status"; "required": false; }; "customText": { "alias": "customText"; "required": false; }; "showText": { "alias": "showText"; "required": false; }; "size": { "alias": "size"; "required": false; }; "autoLoop": { "alias": "autoLoop"; "required": false; }; "loopDuration": { "alias": "loopDuration"; "required": false; }; "customTexts": { "alias": "customTexts"; "required": false; }; "completeOnDone": { "alias": "completeOnDone"; "required": false; }; }, { "completed": "completed"; }, never, never, true, never>;
 }

package/lib/newresumeheader/newresumeheader.component.d.ts

@@ -10,6 +10,8 @@ export declare class NewResumeHeaderComponent implements OnInit, OnDestroy, Afte
     title: string;
     showHeaderCheckbox: boolean;
     showEyeIcon: boolean;
+    showMenuTrigger: boolean;
+    showHeaderButtons: boolean;
     headerCheckboxChecked: boolean;
     configEyeToggle: EyeIconConfig[];
     hiddenSection: {
@@ -163,5 +165,5 @@ export declare class NewResumeHeaderComponent implements OnInit, OnDestroy, Afte
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NewResumeHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NewResumeHeaderComponent, "al-newresumeheader", never, { "title": { "alias": "title"; "required": false; }; "showHeaderCheckbox": { "alias": "showHeaderCheckbox"; "required": false; }; "showEyeIcon": { "alias": "showEyeIcon"; "required": false; }; "headerCheckboxChecked": { "alias": "headerCheckboxChecked"; "required": false; }; "configEyeToggle": { "alias": "configEyeToggle"; "required": false; }; "hiddenSection": { "alias": "hiddenSection"; "required": false; }; "buttonConfig": { "alias": "buttonConfig"; "required": false; }; "isLargeScreen": { "alias": "isLargeScreen"; "required": false; }; "popOutButtonLabel": { "alias": "popOutButtonLabel"; "required": false; }; "popOutButtonIcon": { "alias": "popOutButtonIcon"; "required": false; }; "popOutButtonTooltip": { "alias": "popOutButtonTooltip"; "required": false; }; "popOutButtonTooltipPosition": { "alias": "popOutButtonTooltipPosition"; "required": false; }; "showPopOutPanel": { "alias": "showPopOutPanel"; "required": false; }; "popOutMessage": { "alias": "popOutMessage"; "required": false; }; "dataTestId": { "alias": "dataTestId"; "required": false; }; "fieldVisibility": { "alias": "fieldVisibility"; "required": false; }; "index": { "alias": "index"; "required": false; }; "showBottomBorder": { "alias": "showBottomBorder"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; }, { "titleChange": "titleChange"; "sectionToggled": "sectionToggled"; "headerCheckboxChange": "headerCheckboxChange"; "showHideToggleSection": "showHideToggleSection"; "buttonClicked": "buttonClicked"; "popOutButtonClick": "popOutButtonClick"; }, never, ["[header-left]", "[header-center-left]", "[header-center-center]", "[header-center-right]", "[header-right]", "[header-left]", "[header-center-right]", "[header-right]", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NewResumeHeaderComponent, "al-newresumeheader", never, { "title": { "alias": "title"; "required": false; }; "showHeaderCheckbox": { "alias": "showHeaderCheckbox"; "required": false; }; "showEyeIcon": { "alias": "showEyeIcon"; "required": false; }; "showMenuTrigger": { "alias": "showMenuTrigger"; "required": false; }; "showHeaderButtons": { "alias": "showHeaderButtons"; "required": false; }; "headerCheckboxChecked": { "alias": "headerCheckboxChecked"; "required": false; }; "configEyeToggle": { "alias": "configEyeToggle"; "required": false; }; "hiddenSection": { "alias": "hiddenSection"; "required": false; }; "buttonConfig": { "alias": "buttonConfig"; "required": false; }; "isLargeScreen": { "alias": "isLargeScreen"; "required": false; }; "popOutButtonLabel": { "alias": "popOutButtonLabel"; "required": false; }; "popOutButtonIcon": { "alias": "popOutButtonIcon"; "required": false; }; "popOutButtonTooltip": { "alias": "popOutButtonTooltip"; "required": false; }; "popOutButtonTooltipPosition": { "alias": "popOutButtonTooltipPosition"; "required": false; }; "showPopOutPanel": { "alias": "showPopOutPanel"; "required": false; }; "popOutMessage": { "alias": "popOutMessage"; "required": false; }; "dataTestId": { "alias": "dataTestId"; "required": false; }; "fieldVisibility": { "alias": "fieldVisibility"; "required": false; }; "index": { "alias": "index"; "required": false; }; "showBottomBorder": { "alias": "showBottomBorder"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; }, { "titleChange": "titleChange"; "sectionToggled": "sectionToggled"; "headerCheckboxChange": "headerCheckboxChange"; "showHideToggleSection": "showHideToggleSection"; "buttonClicked": "buttonClicked"; "popOutButtonClick": "popOutButtonClick"; }, never, ["[header-left]", "[header-center-left]", "[header-center-center]", "[header-center-right]", "[header-right]", "[header-left]", "[header-center-right]", "[header-right]", "*"], true, never>;
 }

package/lib/toggle-buttons/toggle-buttons.component.d.ts

@@ -4,7 +4,9 @@ export interface ToggleButton {
     id: string;
     label?: string;
     icon?: string;
+    fontSet?: string;
     disabled?: boolean;
+    tooltip?: string;
     dataTestId?: string;
 }
 export declare class ToggleButtonsComponent {

package/lib/utils/animations.d.ts

@@ -0,0 +1,22 @@
+import { AnimationTriggerMetadata } from '@angular/animations';
+/**
+ * Expand and collapse animation for accordion content
+ * Animates height from 0 to auto with overflow handling
+ * Similar to jQuery animate({ height: auto }) behavior
+ */
+export declare const expandCollapse: AnimationTriggerMetadata;
+/**
+ * Fade animation for showing/hiding content with opacity changes
+ * Used when toggling visibility via eye icon
+ */
+export declare const fadeInOut: AnimationTriggerMetadata;
+/**
+ * Simple slide down animation (height only, no opacity)
+ * Alternative animation for simpler expand/collapse
+ */
+export declare const slideDown: AnimationTriggerMetadata;
+/**
+ * Fade only animation (opacity only, no height changes)
+ * Used for subtle show/hide effects
+ */
+export declare const fadeOnly: AnimationTriggerMetadata;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allsorter/ui-components",
-  "version": "0.0.406",
+  "version": "0.0.410",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",

package/src/lib/button/button.component.scss

@@ -458,6 +458,7 @@ mat-icon.mat-icon {
   align-items: center !important;
   justify-content: center !important;
   flex-shrink: 0;
+  cursor: pointer;
 }
 
 /* Ensure SVG icons inherit button text color for proper visibility */

package/src/lib/candidate-section/candidate-section.component.html

@@ -4,28 +4,28 @@
       <div class="container" data-test-id="candidate-section-name-container"
         [style.opacity]="candidate_name ? '1' : '0.3'"><lib-field-placeholder icon="candidate_name"
           [value]="candidateDetails?.firstName && candidateDetails?.lastName ? candidateDetails?.firstName + ' ' + candidateDetails?.lastName : candidateDetails?.firstName || candidateDetails?.lastName"
-          [placeholder]="'Name'" [tooltip]="candidateDetails?.firstName + ' ' + candidateDetails?.lastName"
-          tooltipPosition="right" [testId]="'candidate-section-name'" [valueClass]="'typo-description'"
+          [placeholder]="'Name'"
+          [testId]="'candidate-section-name'" [valueClass]="'typo-description'"
           [compact]="true"></lib-field-placeholder></div>
       <div class="container" data-test-id="candidate-section-gender-container"
         [style.opacity]="candidate_gender ? '1' : '0.3'"><lib-field-placeholder icon="candidate_gender"
           [value]="candidateDetails?.userAssignedGender" [placeholder]="'Gender'"
-          [tooltip]="candidateDetails?.userAssignedGender" tooltipPosition="right" [testId]="'candidate-section-gender'"
+          [testId]="'candidate-section-gender'"
           [valueClass]="'typo-description'" [compact]="true"></lib-field-placeholder></div>
       <div class="container" data-test-id="candidate-section-phone-container"
         [style.opacity]="candidate_phonenumber ? '1' : '0.3'"><lib-field-placeholder
           icon="candidate_phonenumber" [value]="candidateDetails?.phoneNumber" [placeholder]="'Phone Number'"
-          [tooltip]="candidateDetails?.phoneNumber" tooltipPosition="right" [testId]="'candidate-section-phone'"
+          [testId]="'candidate-section-phone'"
           [valueClass]="'typo-description'" [compact]="true"></lib-field-placeholder></div>
       <div class="container" data-test-id="candidate-section-email-container"
         [style.opacity]="candidate_email ? '1' : '0.3'"><lib-field-placeholder icon="candidate_email"
           [value]="candidateDetails?.emailAddress" [placeholder]="'Email Address'"
-          [tooltip]="candidateDetails?.emailAddress" tooltipPosition="right" [testId]="'candidate-section-email'"
+          [testId]="'candidate-section-email'"
           [valueClass]="'typo-description'" [compact]="true"></lib-field-placeholder></div>
       <div class="container" data-test-id="candidate-section-linkedin-container"
         [style.opacity]="candidate_linkedin ? '1' : '0.3'"><lib-field-placeholder
           icon="candidate_linkedin" iconAlt="LinkedIn" [value]="candidateDetails?.linkedin" [placeholder]="'LinkedIn'"
-          [tooltip]="candidateDetails?.linkedin" tooltipPosition="right" [testId]="'candidate-section-linkedin'"
+          [testId]="'candidate-section-linkedin'"
           [valueClass]="'typo-description'" [compact]="true"></lib-field-placeholder></div>
     </div>
     <div class="column second-column">
@@ -33,28 +33,26 @@
         [style.opacity]="candidate_address ? '1' : '0.3'">
         <div [style.opacity]="addressStreet ? '1' : '0.3'"><lib-field-placeholder
             icon="candidate_address" [value]="candidateDetails?.street" [placeholder]="'Street'"
-            [tooltip]="candidateDetails?.street" tooltipPosition="right" [testId]="'candidate-section-address-street'"
+            [testId]="'candidate-section-address-street'"
             [valueClass]="'typo-description'" [compact]="true"></lib-field-placeholder></div>
         <div [style.opacity]="addressCity ? '1' : '0.3'"><lib-field-placeholder icon="no-icon"
-            [value]="candidateDetails?.city" [placeholder]="'City'" [tooltip]="candidateDetails?.city"
-            tooltipPosition="right" [testId]="'candidate-section-address-city'" [valueClass]="'typo-description'"
+            [value]="candidateDetails?.city" [placeholder]="'City'"
+            [testId]="'candidate-section-address-city'" [valueClass]="'typo-description'"
             [compact]="true"></lib-field-placeholder></div>
         <div [style.opacity]="addressRegion ? '1' : '0.3'"><lib-field-placeholder
             icon="no-icon" [value]="candidateDetails?.region" [placeholder]="'Region'"
-            [tooltip]="candidateDetails?.region" tooltipPosition="right" [testId]="'candidate-section-address-region'"
+            [testId]="'candidate-section-address-region'"
             [valueClass]="'typo-description'" [compact]="true"></lib-field-placeholder></div>
         <div [style.opacity]="addressRegionCode ? '1' : '0.3'"><lib-field-placeholder
             [value]="candidateDetails?.regionCode" [placeholder]="'Region Code'" icon="no-icon"
-            [tooltip]="candidateDetails?.regionCode" tooltipPosition="right"
             [testId]="'candidate-section-address-region-code'" [valueClass]="'typo-description'"
             [compact]="true"></lib-field-placeholder></div>
         <div [style.opacity]="addressCountry ? '1' : '0.3'"><lib-field-placeholder
             icon="no-icon" [value]="candidateDetails?.country" [placeholder]="'Country'"
-            [tooltip]="candidateDetails?.country" tooltipPosition="right" [testId]="'candidate-section-address-country'"
+            [testId]="'candidate-section-address-country'"
             [valueClass]="'typo-description'" [compact]="true"></lib-field-placeholder></div>
         <div [style.opacity]="addressPostCode ? '1' : '0.3'"><lib-field-placeholder
             icon="no-icon" [value]="candidateDetails?.postCode" [placeholder]="'Post Code'"
-            [tooltip]="candidateDetails?.postCode" tooltipPosition="right"
             [testId]="'candidate-section-address-post-code'" [valueClass]="'typo-description'"
             [compact]="true"></lib-field-placeholder></div>
       </div>
@@ -66,8 +64,7 @@
         <lib-field-placeholder icon="candidate_most_recent"
           [value]="(getCurrentJob() || getCurrentEmployer()) ? 'Most Recently : <span class=\'most-recent-inline\'>' + (getCurrentJob() ? '<span class=\'total-exp-value\'>' + getCurrentJob() + '</span>' : '') + (getCurrentEmployer() ? (getCurrentJob() ? ' at <span class=\'total-exp-value\'>' + getCurrentEmployer() + '</span>' : '<span class=\'total-exp-value\'>' + getCurrentEmployer() + '</span>') : '') + '</span>' : ''"
           [placeholder]="'Current Job'"
-          [tooltip]="(getCurrentJob() || getCurrentEmployer()) ? 'Most Recently : ' + getCurrentJob() + (getCurrentEmployer() ? ' at ' + getCurrentEmployer() : '') : 'Current Job'"
-          tooltipPosition="right" [testId]="'candidate-section-current-job'" [valueClass]="'typo-description'"
+          [testId]="'candidate-section-current-job'" [valueClass]="'typo-description'"
           [compact]="true"></lib-field-placeholder>
         <div class="most-recent-details">
           <div class="current-job-title" *ngIf="getCurrentJob()">{{getCurrentJob()}}</div>
@@ -80,8 +77,7 @@
         icon="candidate_experience"
         [value]="getTotalExpYears() ? 'Total Exp - <span class=\'total-exp-value\'>' + getTotalExpYears() + '</span> yrs' : ''"
         [placeholder]="'Total Exp'"
-        [tooltip]="getTotalExpYears() ? 'Total Exp - ' + getTotalExpYears() + ' yrs' : 'Total Exp'"
-        tooltipPosition="right" [testId]="'candidate-section-total-exp-value'" [valueClass]="'typo-description'"
+        [testId]="'candidate-section-total-exp-value'" [valueClass]="'typo-description'"
         [compact]="true"></lib-field-placeholder></div>
   </div>
 </div>

package/src/lib/candidate-section/candidate-section.component.scss

@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: row;
   gap: 16px;
+  cursor: pointer;
 }
 
 .columns-wrapper {

package/src/lib/custom-editor/custom-editor.component.scss

@@ -382,7 +382,7 @@
   }
 
   p {
-    margin: 0 0 12px 0;
+    margin: 0 0 0px 0;
 
     &:last-child {
       margin-bottom: 0;

package/src/lib/editable-form-wrapper/editable-form-wrapper.component.html

@@ -1,12 +1,5 @@
 <div class="al-form-wrapper" #wrapper [attr.data-test-id]="testId">
   <div *ngIf="showLeftButton" #leftButton class="fab left">
-    <!-- <al-button [buttonType]="'icon-circle'" [iconOnly]="true"
-      [leftIcon]="isLeftButtonActive ? 'close' : 'auto_fix_high'"
-      [arialabel]="isLeftButtonActive ? 'Close' : 'Edit'"
-      [size]="'base'"
-      [color]="isLeftButtonActive ? 'grey' : 'gradient'"
-      (onClick)="handleLeftButtonClick($event)">
-    </al-button> -->
     <div
          class="left-button-container"
          [ngClass]="leftContainerClass"

package/src/lib/editable-form-wrapper/editable-form-wrapper.component.scss

@@ -54,6 +54,8 @@
   /* Enable container queries for responsive layout based on container size */
   container-type: inline-size;
   container-name: form-wrapper;
+  /* Isolate layout calculations to prevent FABs from causing parent reflow */
+  contain: layout style;
 }
 
 /* Subtle outer rounded border (like a frame) */
@@ -195,19 +197,28 @@ select.al-form__control {
   position: absolute;
   left: -27px;
   /* intended design: slightly outside the inner frame */
-  top: 0;
-  /* Changed from top: 50% to top: 0, transform will be handled by JS */
+  top: 36px;
+  /* Start at clampPadding position to minimize jump */
   z-index: 10;
   background-color: #fff;
   border-radius: 50%;
   will-change: transform;
   /* Optimize for smooth scrolling */
   transition: transform 0.1s ease-out;
+  opacity: 0;
+  /* Start hidden, shown after positioning */
+  /* Match height with right button group (2 buttons + 8px gap = ~88px) */
+  height: 88px;
+  display: flex;
+  align-items: center;
+  /* Center the inner button container */
 
   .left-button-container {
     position: absolute;
     left: 56px;
-    top: 0;
+    /* Vertically centered by flexbox on parent */
+    top: 50%;
+    transform: translateY(-50%);
     z-index: 1;
     pointer-events: auto;
   }
@@ -217,8 +228,8 @@ select.al-form__control {
   position: absolute;
   right: -16px;
   /* slightly outside the inner frame */
-  top: 0;
-  /* Changed from top: 50% to top: 0, transform will be handled by JS */
+  top: 36px;
+  /* Start at clampPadding position to minimize jump */
   display: flex;
   flex-direction: column;
   border-radius: 50%;
@@ -228,6 +239,16 @@ select.al-form__control {
   will-change: transform;
   /* Optimize for smooth scrolling */
   transition: transform 0.1s ease-out;
+  opacity: 0;
+  /* Start hidden, shown after positioning */
+  /* Fixed height to match left button (2 buttons + 8px gap) */
+  height: 82px;
+}
+
+/* When buttons are positioned, show them */
+.fab.left.positioned,
+.fab-group.right.positioned {
+  opacity: 1;
 }
 
 /* Add gap between form rows (app-flex-grid elements) */
@@ -294,4 +315,21 @@ select.al-form__control {
   :host ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(3):last-child { order: 2; } /* End Date middle */
 }
 
+/* Fade-in animation for FABs on initial render */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Apply fade-in animation to left and right FABs */
+.fab.left,
+.fab-group.right {
+  opacity: 0;
+  animation: fadeIn 1s ease-out forwards;
+}
+
 /* Remove special outline/background styles so buttons render as-is */

package/src/lib/field-placeholder/field-placeholder.component.scss

@@ -80,10 +80,9 @@
 }
 
 
-.value-text {
-  color: $color-grey-600 !important;
-}
-
+// .value-text {
+//   color: $color-grey-600 !important;
+// }
 // Apply collapsed styles when .collapsed is anywhere in parent hierarchy
 .collapsed .value-text {
   display: -webkit-box !important;
@@ -93,4 +92,4 @@
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   white-space: normal !important;
-}
+}

package/src/lib/input/input.component.scss

@@ -420,6 +420,7 @@
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
+  cursor: pointer;
 }
 
 /* Icon sizing by size category */
@@ -498,6 +499,7 @@ mat-icon[matSuffix] {
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 
 /* ===== FLOATING LABEL POSITIONING ===== */

package/src/lib/loader/loader.component.html

@@ -1,15 +1,15 @@
 <div class="loader-container" [attr.data-testid]="effectiveDataTestId">
   <!-- Brain Icon -->
-  <mat-icon class="loader-icon font-icon icon-brain" fontSet="material-icons">psychology</mat-icon>
+  <mat-icon class="loader-icon font-icon icon-brain" fontSet="material-symbols-outlined">network_intelligence</mat-icon>
   <!-- Settings/Gear Icon -->
   <mat-icon class="loader-icon font-icon icon-cog" fontSet="material-icons-outlined">settings</mat-icon>
   <!-- Document Icon -->
-  <mat-icon class="loader-icon font-icon icon-document" fontSet="material-icons">article</mat-icon>
+  <mat-icon class="loader-icon font-icon icon-document" fontSet="material-icons-outlined">article</mat-icon>
   <!-- Wand Icon -->
-  <mat-icon class="loader-icon font-icon icon-wand" fontSet="material-icons">auto_awesome</mat-icon>
+  <mat-icon class="loader-icon font-icon icon-wand" fontSet="material-icons-outlined">auto_awesome</mat-icon>
   <!-- Settings Icon -->
-  <mat-icon class="loader-icon font-icon icon-tick" fontSet="material-icons">build</mat-icon>
+  <mat-icon class="loader-icon font-icon icon-tick" fontSet="material-icons-outlined">done</mat-icon>
 </div>
 <div class="text-container" *ngIf="showText">
   <span class="loader-text">{{ displayText }}</span>
-</div>
+</div>

package/src/lib/loader/loader.component.scss

@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=network_intelligence");
 
 :host {
   display: flex;
@@ -28,7 +29,7 @@
 
 .text-container {
   position: relative;
-  margin-top: 8px;
+  margin-top: 4px;
 }
 
 .loader-text {
@@ -56,6 +57,28 @@ mat-icon.loader-icon {
   justify-content: center;
 }
 
+/* Ensure icon-tick renders at correct size when using material-icons fontSet */
+:host(.size-medium) .icon-tick[fontSet="material-icons"] {
+  font-size: 72px !important;
+  width: 72px !important;
+  height: 72px !important;
+  line-height: 72px !important;
+}
+
+:host(.size-small) .icon-tick[fontSet="material-icons"] {
+  font-size: 48px !important;
+  width: 48px !important;
+  height: 48px !important;
+  line-height: 48px !important;
+}
+
+:host(.size-large) .icon-tick[fontSet="material-icons"] {
+  font-size: 108px !important;
+  width: 108px !important;
+  height: 108px !important;
+  line-height: 108px !important;
+}
+
 /* Size variations */
 :host(.size-small) {
   .loader-container {
@@ -86,11 +109,11 @@ mat-icon.loader-icon {
   }
 
   .font-icon {
-    font-size: 72px;
+    font-size: 72px !important;
   }
 
   mat-icon.loader-icon {
-    font-size: 72px;
+    font-size: 72px !important;
     width: 72px;
     height: 72px;
   }
@@ -453,41 +476,41 @@ mat-icon.loader-icon {
 /* --- Looping Mode: Enhanced animations with enter/exit transitions --- */
 /* These are triggered when autoLoop is enabled */
 :host(.auto-loop.status-analyzing) .icon-brain {
-  animation: animate-brain 3s ease-in-out;
+  animation: animate-brain 2s ease-in-out;
 }
 
 :host(.auto-loop.status-analyzing) .loader-text {
-  animation: animate-text 3s ease-in-out;
+  animation: animate-text 2s ease-in-out;
 }
 
 :host(.auto-loop.status-gathering) .icon-cog {
-  animation: animate-cog 3s ease-in-out;
+  animation: animate-cog 2s ease-in-out;
 }
 
 :host(.auto-loop.status-gathering) .loader-text {
-  animation: animate-text 3s ease-in-out;
+  animation: animate-text 2s ease-in-out;
 }
 
 :host(.auto-loop.status-processing) .icon-document {
-  animation: animate-document 3s ease-in-out;
+  animation: animate-document 2s ease-in-out;
 }
 
 :host(.auto-loop.status-processing) .loader-text {
-  animation: animate-text 3s ease-in-out;
+  animation: animate-text 2s ease-in-out;
 }
 
 :host(.auto-loop.status-applying) .icon-wand {
-  animation: animate-wand 3s ease-in-out;
+  animation: animate-wand 2s ease-in-out;
 }
 
 :host(.auto-loop.status-applying) .loader-text {
-  animation: animate-text 3s ease-in-out;
+  animation: animate-text 2s ease-in-out;
 }
 
 :host(.auto-loop.status-done) .icon-tick {
-  animation: animate-tick 3s ease-in-out;
+  animation: animate-tick 2s ease-in-out;
 }
 
 :host(.auto-loop.status-done) .loader-text {
-  animation: animate-text 3s ease-in-out;
+  animation: animate-text 2s ease-in-out;
 }

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

@@ -46,10 +46,10 @@
                 </div>
                 <div center><ng-content select="[header-center-center]"></ng-content>
                   <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) --><ng-container
-                    *ngIf="isLargeScreen"><ng-container
+                    *ngIf="isLargeScreen && showHeaderButtons"><ng-container
                       *ngTemplateOutlet="headerButtonsTemplate; context: { buttons: buttonConfig }"></ng-container></ng-container>
                   <!-- Menu trigger and slide-out panel for small screens only -->
-                  <div class="hover-menu-container" *ngIf="!isLargeScreen">
+                  <div class="hover-menu-container" *ngIf="!isLargeScreen && showMenuTrigger && showHeaderButtons">
                     <div class="menu-trigger" (click)="toggleMenu()"><al-button buttonType="icon-label" iconOnly
                         size="header" category="grey" leftIcon="more_vert" aria-label="More options"
                         [dataTestId]="'resume-header-more-menu'"></al-button></div>
@@ -103,7 +103,9 @@
       </div>
       <!-- Accordion body with expand/collapse animation -->
       <div class="example-accordion-item-body-wrapper">
-        <div class="example-accordion-item-body" *ngIf="accordionItem.expanded && !isSectionHidden">
+        <div class="example-accordion-item-body"
+             *ngIf="accordionItem.expanded && !isSectionHidden"
+             [@expandCollapse]>
           <!-- Pop-out Panel -->
           <div *ngIf="shouldShowPopOut" #popOutPanel class="pop-out-panel"
             [ngClass]="{'pop-out-narrow': isPopOutNarrow}">

package/src/lib/newresumeheader/newresumeheader.component.scss

@@ -162,6 +162,7 @@
   border-bottom: 2px solid #37c1ce;
   border-radius: 8px;
   box-sizing: border-box;
+  margin-top: 16px !important;
 
   /**
    * When the Deep Extraction pop-out panel is NOT shown (showPopOutPanel === false),
@@ -171,7 +172,11 @@
    */
   &.header-with-bottom-margin {
     margin-bottom: 16px;
+
+
   }
+
+
 }
 
 
@@ -666,4 +671,4 @@
 //     position: relative;
 //     z-index: 1;
 //   }
-// }
+// }

package/src/lib/resume-entries/resume-entries.component.html

@@ -52,10 +52,13 @@
               <lib-field-placeholder [value]="entry.city" [placeholder]="'City'" valueClass="font-location-text"
                 [testId]="'entry-' + i + '-city'" [compact]="true"
                 [tooltip]="locationTooltip" [tooltipPosition]="tooltipPosition"></lib-field-placeholder>
+              <span class="location-comma">,</span>
               <lib-field-placeholder [value]="entry.region" [placeholder]="'Region'" valueClass="font-location-text"
                 [testId]="'entry-' + i + '-region'" [compact]="true"
                 [tooltip]="locationTooltip" [tooltipPosition]="tooltipPosition"></lib-field-placeholder>
-              <lib-field-placeholder [value]="entry.country" [placeholder]="'Country'" valueClass="font-location-text"
+              <span class="location-comma">,</span>
+              <lib-field-placeholder [value]="entry.country" [placeholder]="'Country'"
+                valueClass="font-location-text"
                 [testId]="'entry-' + i + '-country'" [compact]="true"
                 [tooltip]="locationTooltip" [tooltipPosition]="tooltipPosition"></lib-field-placeholder>
             </div>

package/src/lib/resume-entries/resume-entries.component.scss

@@ -350,15 +350,23 @@
   flex-direction: column;
   gap: 4px;
 
+  ::ng-deep .value-text {
+    color: #717793;
+  }
+
+  // ::ng-deep .placeholder-text {
+  //   color: #717793;
+  // }
+
   &.collapsed .value-text {
-      display: -webkit-box !important;
-      -webkit-line-clamp: 1 !important;
-      line-clamp: 1 !important;
-      -webkit-box-orient: vertical !important;
-      overflow: hidden !important;
-      text-overflow: ellipsis !important;
-      white-space: normal !important;
-    }
+    display: -webkit-box !important;
+    -webkit-line-clamp: 1 !important;
+    line-clamp: 1 !important;
+    -webkit-box-orient: vertical !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: normal !important;
+  }
 
 }
 
@@ -397,8 +405,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 24px 0;
-  min-height: 80px;
+  // padding: 24px 0;
+  // min-height: 80px;
 }
 
 .entry-loader-container {
@@ -435,7 +443,7 @@
     font-style: normal;
     letter-spacing: 0.15px;
     font-family: Roboto, sans-serif;
-    color: #717793;
+    color: #717793 !important;
   }
 
   p,

package/src/lib/tabs/tabs.component.html

@@ -1,4 +1,4 @@
-<mat-tab-group [selectedIndex]="selectedIndex" [class]="'tabs-' + size" mat-align-tabs="start" headerPosition="above">
+<mat-tab-group [selectedIndex]="selectedIndex" [class]="'tabs-' + size" mat-align-tabs="start" headerPosition="above" animationDuration="0ms">
   <mat-tab *ngFor="let tab of tabComponents; let i = index">
     <ng-template mat-tab-label>
       <span [ngClass]="{ 'tab-label-content': true, 'icon-only-tab': tab.icon && tab.showIcon && !tab.labelText }"