@allsorter/ui-components 0.0.386 → 0.0.390

package/lib/ai-apply-bar/ai-apply-bar.component.d.ts

@@ -17,6 +17,7 @@ export declare class AiApplyBarComponent {
     disabled: boolean;
     applyLabel: string;
     applyDisabled: boolean;
+    showApplyButton: boolean;
     showClose: boolean;
     iconOutlined: boolean;
     closeButtonTooltip: string;
@@ -33,5 +34,5 @@ export declare class AiApplyBarComponent {
     toggleBar(): void;
     onClose(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AiApplyBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AiApplyBarComponent, "al-ai-apply-bar", never, { "dataTestId": { "alias": "dataTestId"; "required": false; }; "showChevron": { "alias": "showChevron"; "required": false; }; "showChevronButton": { "alias": "showChevronButton"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "applyLabel": { "alias": "applyLabel"; "required": false; }; "applyDisabled": { "alias": "applyDisabled"; "required": false; }; "showClose": { "alias": "showClose"; "required": false; }; "iconOutlined": { "alias": "iconOutlined"; "required": false; }; "closeButtonTooltip": { "alias": "closeButtonTooltip"; "required": false; }; "closeButtonTooltipPosition": { "alias": "closeButtonTooltipPosition"; "required": false; }; "showHelperText": { "alias": "showHelperText"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; }, { "valueChange": "valueChange"; "applyClick": "applyClick"; "closeClick": "closeClick"; "chevronClick": "chevronClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AiApplyBarComponent, "al-ai-apply-bar", never, { "dataTestId": { "alias": "dataTestId"; "required": false; }; "showChevron": { "alias": "showChevron"; "required": false; }; "showChevronButton": { "alias": "showChevronButton"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "applyLabel": { "alias": "applyLabel"; "required": false; }; "applyDisabled": { "alias": "applyDisabled"; "required": false; }; "showApplyButton": { "alias": "showApplyButton"; "required": false; }; "showClose": { "alias": "showClose"; "required": false; }; "iconOutlined": { "alias": "iconOutlined"; "required": false; }; "closeButtonTooltip": { "alias": "closeButtonTooltip"; "required": false; }; "closeButtonTooltipPosition": { "alias": "closeButtonTooltipPosition"; "required": false; }; "showHelperText": { "alias": "showHelperText"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; }, { "valueChange": "valueChange"; "applyClick": "applyClick"; "closeClick": "closeClick"; "chevronClick": "chevronClick"; }, never, never, true, never>;
 }

package/lib/candidate-section/candidate-section.component.d.ts

@@ -1,6 +1,10 @@
-import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
+import { AfterViewInit, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MatIconRegistry } from '@angular/material/icon';
 import * as i0 from "@angular/core";
-export declare class CandidateSectionComponent implements AfterViewInit, OnDestroy {
+export declare class CandidateSectionComponent implements AfterViewInit, OnDestroy, OnInit {
+    private iconRegistry;
+    private sanitizer;
     candidateContainer?: ElementRef<HTMLElement>;
     /**
      * When true, layout switches from 3 columns to "2-column" stacked layout.
@@ -10,34 +14,36 @@ export declare class CandidateSectionComponent implements AfterViewInit, OnDestr
     private resizeObserver?;
     useCustomHeader: boolean;
     candidateDetails: any;
-    getFieldNotHidden?: (field: string) => boolean;
-    getForceShowAllFields?: () => boolean;
-    resumeService?: any;
-    fieldVisibilityKeys?: Record<string, string | string[]>;
+    candidate_name: boolean;
+    candidate_gender: boolean;
+    candidate_phonenumber: boolean;
+    candidate_email: boolean;
+    candidate_linkedin: boolean;
+    candidate_address: boolean;
+    addressStreet: boolean;
+    addressCity: boolean;
+    addressRegion: boolean;
+    addressRegionCode: boolean;
+    addressCountry: boolean;
+    addressPostCode: boolean;
+    currentJob: boolean;
+    candidate_experience: boolean;
+    constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    ngOnInit(): void;
+    private registerIcons;
     /**
      * Sets isNarrowLayout based on the current container width.
      * Uses 600px as the breakpoint where the layout switches from 3 to 2 columns.
      */
     private updateLayoutBreakpoint;
-    shouldShow(...keys: string[]): boolean;
-    private resolveKeys;
-    shouldShowFor(fieldId: string, fallbackKeys: string[]): boolean;
     getCurrentJob(): string;
     getCurrentEmployer(): string;
     getTotalExpYears(): string;
     hasValue(): boolean;
     hasAddressValue(): boolean;
     hasExperienceValue(): boolean;
-    getIconName(): string | undefined;
-    getIconGender(): string | undefined;
-    getIconPhone(): string | undefined;
-    getIconEmail(): string | undefined;
-    getIconLinkedIn(): string | undefined;
-    getIconAddress(): string | undefined;
-    getIconExperience(): string | undefined;
-    getIconMostRecent(): string | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<CandidateSectionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CandidateSectionComponent, "al-candidate-section", never, { "useCustomHeader": { "alias": "useCustomHeader"; "required": false; }; "candidateDetails": { "alias": "candidateDetails"; "required": false; }; "getFieldNotHidden": { "alias": "getFieldNotHidden"; "required": false; }; "getForceShowAllFields": { "alias": "getForceShowAllFields"; "required": false; }; "resumeService": { "alias": "resumeService"; "required": false; }; "fieldVisibilityKeys": { "alias": "fieldVisibilityKeys"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CandidateSectionComponent, "al-candidate-section", never, { "useCustomHeader": { "alias": "useCustomHeader"; "required": false; }; "candidateDetails": { "alias": "candidateDetails"; "required": false; }; "candidate_name": { "alias": "candidate_name"; "required": false; }; "candidate_gender": { "alias": "candidate_gender"; "required": false; }; "candidate_phonenumber": { "alias": "candidate_phonenumber"; "required": false; }; "candidate_email": { "alias": "candidate_email"; "required": false; }; "candidate_linkedin": { "alias": "candidate_linkedin"; "required": false; }; "candidate_address": { "alias": "candidate_address"; "required": false; }; "addressStreet": { "alias": "addressStreet"; "required": false; }; "addressCity": { "alias": "addressCity"; "required": false; }; "addressRegion": { "alias": "addressRegion"; "required": false; }; "addressRegionCode": { "alias": "addressRegionCode"; "required": false; }; "addressCountry": { "alias": "addressCountry"; "required": false; }; "addressPostCode": { "alias": "addressPostCode"; "required": false; }; "currentJob": { "alias": "currentJob"; "required": false; }; "candidate_experience": { "alias": "candidate_experience"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/custom-editor/custom-editor.component.d.ts

@@ -181,6 +181,7 @@ export declare class CustomEditorComponent implements OnInit, OnDestroy, AfterVi
     deleteRowBelow(event: MouseEvent): void;
     updateAIToolInMemory(tool: any): void;
     useAITool(event: MouseEvent): void;
+    useAutoBullet(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CustomEditorComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CustomEditorComponent, "app-custom-editor", never, { "bold": { "alias": "bold"; "required": false; }; "italic": { "alias": "italic"; "required": false; }; "underline": { "alias": "underline"; "required": false; }; "list": { "alias": "list"; "required": false; }; "isVisible": { "alias": "isVisible"; "required": false; }; "dataTestId": { "alias": "dataTestId"; "required": false; }; "showLabels": { "alias": "showLabels"; "required": false; }; "leftLabelText": { "alias": "leftLabelText"; "required": false; }; "rightLabelText": { "alias": "rightLabelText"; "required": false; }; "initialValue": { "alias": "initialValue"; "required": false; }; "contentFromParent": { "alias": "contentFromParent"; "required": false; }; "editScreenSection": { "alias": "editScreenSection"; "required": false; }; "actionType": { "alias": "actionType"; "required": false; }; "historyControls": { "alias": "historyControls"; "required": false; }; "autobullet": { "alias": "autobullet"; "required": false; }; "skillsBullet": { "alias": "skillsBullet"; "required": false; }; "jsonData": { "alias": "jsonData"; "required": false; }; "formJsonData": { "alias": "formJsonData"; "required": false; }; "editorId": { "alias": "editorId"; "required": false; }; "sectionId": { "alias": "sectionId"; "required": false; }; "actionId": { "alias": "actionId"; "required": false; }; "undoCustom": { "alias": "undoCustom"; "required": false; }; "redoCustom": { "alias": "redoCustom"; "required": false; }; "undoSkill": { "alias": "undoSkill"; "required": false; }; "redoSkill": { "alias": "redoSkill"; "required": false; }; "matOptionAI": { "alias": "matOptionAI"; "required": false; }; "hideTableOption": { "alias": "hideTableOption"; "required": false; }; "hideAutoBulletOption": { "alias": "hideAutoBulletOption"; "required": false; }; "hideAIOption": { "alias": "hideAIOption"; "required": false; }; "showAIButton": { "alias": "showAIButton"; "required": false; }; "insertTablebtn": { "alias": "insertTablebtn"; "required": false; }; "insertRowAbovebtn": { "alias": "insertRowAbovebtn"; "required": false; }; "insertRowBelowbtn": { "alias": "insertRowBelowbtn"; "required": false; }; "insertColumnLeftbtn": { "alias": "insertColumnLeftbtn"; "required": false; }; "insertColumnRightbtn": { "alias": "insertColumnRightbtn"; "required": false; }; "deleteTablebtn": { "alias": "deleteTablebtn"; "required": false; }; "deleteRowAbovebtn": { "alias": "deleteRowAbovebtn"; "required": false; }; "deleteRowBelowbtn": { "alias": "deleteRowBelowbtn"; "required": false; }; "deleteColumnLeftbtn": { "alias": "deleteColumnLeftbtn"; "required": false; }; "deleteColumnRightbtn": { "alias": "deleteColumnRightbtn"; "required": false; }; "showTable": { "alias": "showTable"; "required": false; }; "toolbarConfig": { "alias": "toolbarConfig"; "required": false; }; "textFormattingConfig": { "alias": "textFormattingConfig"; "required": false; }; }, { "contentChangeFromQuill": "contentChangeFromQuill"; "ApplyAIinQuill": "ApplyAIinQuill"; "onAutoBullet": "onAutoBullet"; }, never, never, true, never>;
 }

package/lib/field-placeholder/field-placeholder.component.d.ts

@@ -36,6 +36,7 @@ export declare class FieldPlaceholderComponent {
      */
     padded?: boolean;
     isMaterialIcon(icon: string): boolean;
+    isRegisteredSvgIcon(icon: string): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<FieldPlaceholderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FieldPlaceholderComponent, "lib-field-placeholder", never, { "value": { "alias": "value"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; "testId": { "alias": "testId"; "required": false; }; "valueClass": { "alias": "valueClass"; "required": false; }; "placeholderClass": { "alias": "placeholderClass"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconAlt": { "alias": "iconAlt"; "required": false; }; "iconFont": { "alias": "iconFont"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "padded": { "alias": "padded"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/tabs/tabs.component.d.ts

@@ -1,21 +1,37 @@
-import { QueryList, AfterContentInit, TemplateRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { QueryList, AfterContentInit, TemplateRef, AfterViewInit, ChangeDetectorRef, OnInit } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
 import * as i0 from "@angular/core";
 export declare class AlTabComponent implements AfterViewInit {
     labelText: string;
     /** DEPRECATED: label -> labelText */
     set label(val: string);
     selected: boolean;
+    icon: string;
+    iconType: 'svg' | 'font';
+    showIcon: boolean;
+    tooltip: string;
+    tooltipPosition: 'left' | 'right' | 'above' | 'below' | 'before' | 'after';
     templateRef: TemplateRef<any>;
+    /**
+     * Returns the tooltip text. If no tooltip is explicitly set,
+     * defaults to the labelText for better accessibility.
+     */
+    get effectiveTooltip(): string;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AlTabComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AlTabComponent, "al-tab", never, { "labelText": { "alias": "labelText"; "required": false; }; "label": { "alias": "label"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AlTabComponent, "al-tab", never, { "labelText": { "alias": "labelText"; "required": false; }; "label": { "alias": "label"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconType": { "alias": "iconType"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
-export declare class TabsComponent implements AfterContentInit, AfterViewInit {
+export declare class TabsComponent implements AfterContentInit, AfterViewInit, OnInit {
     private cdr;
+    private iconRegistry;
+    private sanitizer;
     tabComponents: QueryList<AlTabComponent>;
     selectedIndex: number;
     size: 'small' | 'medium' | 'large';
-    constructor(cdr: ChangeDetectorRef);
+    constructor(cdr: ChangeDetectorRef, iconRegistry: MatIconRegistry, sanitizer: DomSanitizer);
+    ngOnInit(): void;
+    private registerIcons;
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabsComponent, never>;

package/lib/toolbar-left/toolbar-left.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, OnInit } from '@angular/core';
+import { EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i0 from "@angular/core";
@@ -11,25 +11,24 @@ export interface RequiredIconConfig {
     edit: IconConfig;
     search: IconConfig;
 }
-export declare class AppToolbarLeftComponent implements OnInit {
+export declare class AppToolbarLeftComponent implements OnInit, OnChanges {
     private iconRegistry;
     private sanitizer;
     variant: string;
     constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer);
     private registerIcons;
     ngOnInit(): void;
-    private _overrideConfig;
-    set overrideConfig(val: Partial<RequiredIconConfig>);
-    get overrideConfig(): Partial<RequiredIconConfig>;
+    ngOnChanges(changes: SimpleChanges): void;
+    overrideConfig: Partial<RequiredIconConfig>;
+    private updateRequiredIcon;
     private _defaultRequiredIcon;
     requiredIcon: RequiredIconConfig;
     content: string;
     editEvent: EventEmitter<string>;
     isExtractionAnalysisActive: boolean;
-    showSearch: boolean;
+    searchEvent: EventEmitter<Event>;
     editSelectedSection(): void;
-    sendMessage(): void;
     onSearchClick(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AppToolbarLeftComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AppToolbarLeftComponent, "toolbar-left", never, { "variant": { "alias": "variant"; "required": false; }; "overrideConfig": { "alias": "overrideConfig"; "required": false; }; "content": { "alias": "content"; "required": false; }; "isExtractionAnalysisActive": { "alias": "isExtractionAnalysisActive"; "required": false; }; "showSearch": { "alias": "showSearch"; "required": false; }; }, { "editEvent": "editEvent"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppToolbarLeftComponent, "toolbar-left", never, { "variant": { "alias": "variant"; "required": false; }; "overrideConfig": { "alias": "overrideConfig"; "required": false; }; "content": { "alias": "content"; "required": false; }; "isExtractionAnalysisActive": { "alias": "isExtractionAnalysisActive"; "required": false; }; }, { "editEvent": "editEvent"; "searchEvent": "searchEvent"; }, never, never, true, never>;
 }

package/lib/utils/image-utils.d.ts

@@ -34,6 +34,11 @@ export declare const Candidate_Section_ICON: {
     candidate_experience: string;
     candidate_most_recent: string;
 };
+export declare const Resume_Tab_icon: {
+    resume_tab_icon: string;
+    coversheet_tab_icon: string;
+    Ai_tools_tab_icon: string;
+};
 export declare const NewResume_Header_Component_ICON: {
     'add-right_icon_section': string;
     'add_left-icon_section': string;

package/package.json

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

package/src/lib/ai-apply-bar/ai-apply-bar.component.html

@@ -26,7 +26,7 @@
         </div>
 
         <div class="ai-apply-button">
-          <al-button [label]="applyLabel" [buttonType]="'icon-label'" [category]="'gradient'" [size]="'base'"
+          <al-button *ngIf="showApplyButton" [label]="applyLabel" [buttonType]="'icon-label'" [category]="'gradient'" [size]="'base'"
             [state]="applyDisabled ? 'disabled' : 'default'" (onClick)="applyClick.emit()">
           </al-button>
           <al-icon-button *ngIf="showChevronButton" icon="chevron_right" [iconOutlined]="true"

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

@@ -2,72 +2,68 @@
   <div class="columns-wrapper">
     <div class="column first-column">
       <div class="container" data-test-id="candidate-section-name-container"
-        [ngClass]="shouldShowFor('name', []) ? '' : 'not-in-template'"><lib-field-placeholder [icon]="getIconName()"
+        [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'"
           [compact]="true"></lib-field-placeholder></div>
       <div class="container" data-test-id="candidate-section-gender-container"
-        [ngClass]="shouldShowFor('gender', []) ? '' : 'not-in-template'"><lib-field-placeholder [icon]="getIconGender()"
+        [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'"
           [valueClass]="'typo-description'" [compact]="true"></lib-field-placeholder></div>
       <div class="container" data-test-id="candidate-section-phone-container"
-        [ngClass]="shouldShowFor('phone', []) ? '' : 'not-in-template'"><lib-field-placeholder [icon]="getIconPhone()"
-          [value]="candidateDetails?.phoneNumber" [placeholder]="'Phone Number'"
+        [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'"
           [valueClass]="'typo-description'" [compact]="true"></lib-field-placeholder></div>
       <div class="container" data-test-id="candidate-section-email-container"
-        [ngClass]="shouldShowFor('email', []) ? '' : 'not-in-template'"><lib-field-placeholder [icon]="getIconEmail()"
+        [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'"
           [valueClass]="'typo-description'" [compact]="true"></lib-field-placeholder></div>
       <div class="container" data-test-id="candidate-section-linkedin-container"
-        [ngClass]="shouldShowFor('linkedin', []) ? '' : 'not-in-template'"><lib-field-placeholder
-          [icon]="getIconLinkedIn()" iconAlt="LinkedIn" [value]="candidateDetails?.linkedin" [placeholder]="'LinkedIn'"
+        [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'"
           [valueClass]="'typo-description'" [compact]="true"></lib-field-placeholder></div>
     </div>
     <div class="column second-column">
       <div data-test-id="candidate-section-address-container"
-        [ngClass]="shouldShowFor('address', []) ? '' : 'not-in-template'">
-        <div [ngClass]="shouldShowFor('addressStreet', []) ? '' : 'not-in-template'"><lib-field-placeholder
-            [icon]="getIconAddress()" [value]="candidateDetails?.street" [placeholder]="'Street'"
+        [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'"
             [valueClass]="'typo-description'" [compact]="true"></lib-field-placeholder></div>
-        <div [ngClass]="shouldShowFor('addressCity', []) ? '' : 'not-in-template'"><lib-field-placeholder
+        <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'"
-            [icon]="'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'"
             [compact]="true"></lib-field-placeholder></div>
-        <div [ngClass]="shouldShowFor('addressRegion', []) ? '' : 'not-in-template'"><lib-field-placeholder
-            [value]="candidateDetails?.region" [placeholder]="'Region'" [tooltip]="candidateDetails?.region"
-            tooltipPosition="right" [testId]="'candidate-section-address-region'" [valueClass]="'typo-description'"
-            [icon]="'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'"
-            [compact]="true"></lib-field-placeholder></div>
-        <div [ngClass]="shouldShowFor('addressRegionCode', []) ? '' : 'not-in-template'"><lib-field-placeholder
-            [value]="candidateDetails?.regionCode" [placeholder]="'Region Code'"
+        <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'"
+            [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'"
-            [icon]="'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'"
             [compact]="true"></lib-field-placeholder></div>
-        <div [ngClass]="shouldShowFor('addressCountry', []) ? '' : 'not-in-template'"><lib-field-placeholder
-            [value]="candidateDetails?.country" [placeholder]="'Country'" [tooltip]="candidateDetails?.country"
-            tooltipPosition="right" [testId]="'candidate-section-address-country'" [valueClass]="'typo-description'"
-            [icon]="'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'"
-            [compact]="true"></lib-field-placeholder></div>
-        <div [ngClass]="shouldShowFor('addressPostCode', []) ? '' : 'not-in-template'"><lib-field-placeholder
-            [value]="candidateDetails?.postCode" [placeholder]="'Post Code'" [tooltip]="candidateDetails?.postCode"
-            tooltipPosition="right" [testId]="'candidate-section-address-post-code'" [valueClass]="'typo-description'"
-            [icon]="'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'"
+        <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'"
+            [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>
     </div>
   </div>
   <div class="column third-column">
     <div class="container most-recent-container" data-test-id="candidate-section-current-employer-container">
-      <div [ngClass]="shouldShowFor('currentJob', []) || shouldShowFor('currentEmployer', []) ? '' : 'not-in-template'">
-        <lib-field-placeholder [icon]="getIconMostRecent()"
+      <div [style.opacity]="currentJob ? '1' : '0.3'">
+        <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'"
@@ -80,12 +76,12 @@
       </div>
     </div>
     <div class="total-exp-parent container" data-test-id="candidate-section-total-exp-parent"
-      [ngClass]="shouldShowFor('experience', []) ? '' : 'not-in-template'"><lib-field-placeholder
-        [icon]="getIconExperience()"
+      [style.opacity]="candidate_experience ? '1' : '0.3'"><lib-field-placeholder
+        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'"
         [compact]="true"></lib-field-placeholder></div>
   </div>
-</div>
+</div>

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

@@ -4,7 +4,6 @@
   display: flex;
   flex-direction: row;
   gap: 16px;
-  padding-top: 8px;
 }
 
 .columns-wrapper {
@@ -182,4 +181,4 @@
   top: 2px !important;
   position: relative !important;
   align-items: center !important;
-}
+}

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

@@ -66,14 +66,14 @@
         </app-table>
 
         <!-- Auto Bullet Button -->
-        <button *ngIf="autobullet" class="auto-bullet" mat-flat-button (click)="event.stopPropagation(); onAutoBullet.emit()"
+        <button *ngIf="autobullet" class="auto-bullet" mat-flat-button (click)="$event.stopPropagation(); useAutoBullet($event)"
           [disabled]="autoBulletDisable || isLoadingAI || !checkHtmlContent('')">
           {{ AutoBulletButton }}
         </button>
 
         <!-- Bullet Skill Button -->
         <button *ngIf="skillsBullet" class="bullet-skill" mat-flat-button
-          (click)="event.stopPropagation(); transformToSkillsBullets($event)" [disabled]="isDisabled || isLoadingAI">
+          (click)="$event.stopPropagation(); transformToSkillsBullets()" [disabled]="isDisabled || isLoadingAI">
           {{ skillsButton }}
         </button>
       </div>
@@ -82,7 +82,7 @@
     <!-- Individual Text Formatting Buttons (Large Containers Only) -->
     <ng-container *ngIf="!isSmallScreen">
       <button *ngFor="let item of textFormattingConfig" class="format-button" [class.active]="getActiveState(item.type)"
-        (click)="handleTextFormattingClick($event, item)" [title]="item.title" type="button" [matTooltip]="item.title"
+        (onClick)="handleTextFormattingClick($event, item)" [title]="item.title" type="button" [matTooltip]="item.title"
         matTooltipPosition="above">
         <mat-icon *ngIf="isSvgIcon(item.icon)" [svgIcon]="item.icon"
           [class.active-icon]="getActiveState(item.type)"></mat-icon>
@@ -100,20 +100,20 @@
 
     <!-- Auto Bullet Button (Large Screens Only) -->
     <button *ngIf="autobullet && !isSmallScreen" class="auto-bullet" mat-flat-button
-      (click)="event.stopPropagation(); onAutoBullet.emit()" [disabled]="autoBulletDisable || isLoadingAI || !checkHtmlContent('')">
+      (click)="$event.stopPropagation(); useAutoBullet($event)" [disabled]="autoBulletDisable || isLoadingAI || !checkHtmlContent('')">
       {{ AutoBulletButton }}
     </button>
 
     <!-- Bullet Skill Button (Large Screens Only) -->
     <button *ngIf="skillsBullet && !isSmallScreen" class="bullet-skill" mat-flat-button
-      (click)="event.stopPropagation(); transformToSkillsBullets($event)" [disabled]="isDisabled || isLoadingAI">
+      (click)="$event.stopPropagation(); transformToSkillsBullets($event)" [disabled]="isDisabled || isLoadingAI">
       {{ skillsButton }}
     </button>
 
     <!-- History Controls (Undo/Redo) -->
     <div *ngIf="historyControls" class="history-controls">
       <!-- Undo Button -->
-      <button class="format-button" (click)="execCmd($event, 'undo')" title="Undo" type="button" matTooltip="Undo"
+      <button class="format-button" (onClick)="execCmd($event, 'undo')" title="Undo" type="button" matTooltip="Undo"
         matTooltipPosition="above">
         <span class="material-icons" [class.active-icon]="getActiveState('undo')">
           undo
@@ -121,7 +121,7 @@
       </button>
 
       <!-- Redo Button -->
-      <button class="format-button" (click)="execCmd($event, 'redo')" title="Redo" type="button" matTooltip="Redo"
+      <button class="format-button" (clionClickck)="execCmd($event, 'redo')" title="Redo" type="button" matTooltip="Redo"
         matTooltipPosition="above">
         <span class="material-icons" [class.active-icon]="getActiveState('redo')">
           redo

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

@@ -1,13 +1,13 @@
 <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"
+    <!-- <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 *ngIf="isLeftButtonActive"
+    </al-button> -->
+    <div
          class="left-button-container"
          [ngClass]="leftContainerClass"
          [ngStyle]="leftContainerStyle">

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

@@ -193,7 +193,7 @@ select.al-form__control {
 
 .fab.left {
   position: absolute;
-  left: -16px;
+  left: -27px;
   /* intended design: slightly outside the inner frame */
   top: 0;
   /* Changed from top: 50% to top: 0, transform will be handled by JS */

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

@@ -1,7 +1,7 @@
 <al-responsive-columns [gap]="gap" [padding]="padding" [leftWidth]="leftWidth" [rightWidth]="rightWidth"
   [stackAt]="stackAt">
   <div left><toolbar-left [variant]="variant" [content]="content"
-      [isExtractionAnalysisActive]="isExtractionAnalysisActive" [showSearch]="showSearch"
+      [isExtractionAnalysisActive]="isExtractionAnalysisActive"
       [overrideConfig]="overrideConfig" (editEvent)="onEditEvent($event)"></toolbar-left></div>
   <div center><al-resume-entries [entries]="entries" [showHeader]="showHeader"
       [showDescriptionLabel]="showDescriptionLabel" [showCompany]="showCompany" [showJobTitle]="showJobTitle"
@@ -17,4 +17,4 @@
       (visibilityToggle)="onVisibilityToggle($event)" (hideShowEvent)="onHideShowEvent($event)"
       (checkboxEvent)="onCheckboxEvent($event)" (setSubroleEvent)="onSetSubroleEvent($event)"></toolbar-right>
   </div>
-</al-responsive-columns>
+</al-responsive-columns>

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

@@ -1,12 +1,18 @@
 <div class="field-row" [class.field-row-compact]="compact === true" [class.field-row-padded]="padded === true">
   <ng-container *ngIf="icon">
     <span class="field-icon">
-      <ng-container *ngIf="isMaterialIcon(icon); else imageIcon">
+      <ng-container *ngIf="icon === 'no-icon'">
+        <!-- Transparent spacer to maintain icon alignment -->
+      </ng-container>
+      <ng-container *ngIf="isRegisteredSvgIcon(icon) && icon !== 'no-icon'">
+        <mat-icon [svgIcon]="icon"></mat-icon>
+      </ng-container>
+      <ng-container *ngIf="isMaterialIcon(icon) && !isRegisteredSvgIcon(icon) && icon !== 'no-icon'">
         <mat-icon [fontSet]="iconFont">{{ icon }}</mat-icon>
       </ng-container>
-      <ng-template #imageIcon>
+      <ng-container *ngIf="!isMaterialIcon(icon) && !isRegisteredSvgIcon(icon) && icon !== 'no-icon'">
         <img [src]="icon" [alt]="iconAlt || 'icon'" />
-      </ng-template>
+      </ng-container>
     </span>
   </ng-container>
   <span [matTooltip]="tooltip" [matTooltipPosition]="tooltipPosition" [matTooltipDisabled]="!tooltip"

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

@@ -51,7 +51,7 @@
   line-height: 140%;
   letter-spacing: 0.04px;
   min-height: 28px;
-  align-items: flex-start;
+  align-items: center;
 }
 
 .field-row-padded {
@@ -73,9 +73,9 @@
   object-fit: contain;
   font-size: 20px;
   line-height: 20px;
- display: inline-flex;
- align-items: center;
- justify-content: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   color: #37C1CE;
 }
 
@@ -93,4 +93,4 @@
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   white-space: normal !important;
-}
+}

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

@@ -62,7 +62,7 @@
   flex: 1;
   width: 100%;
   gap: 12px;
-  padding-top: 4px;
+  padding-top: 8px;
 }
 
 .timeline-indicator {

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

@@ -1,5 +1,15 @@
 <mat-tab-group [selectedIndex]="selectedIndex" [class]="'tabs-' + size" mat-align-tabs="start" headerPosition="above">
-  <mat-tab *ngFor="let tab of tabComponents; let i = index" [label]="tab.labelText">
+  <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 }"
+            [matTooltip]="tab.effectiveTooltip"
+            [matTooltipPosition]="tab.tooltipPosition"
+            [matTooltipDisabled]="!tab.effectiveTooltip">
+        <mat-icon *ngIf="tab.icon && tab.showIcon && tab.iconType === 'svg'" [svgIcon]="tab.icon"></mat-icon>
+        <mat-icon *ngIf="tab.icon && tab.showIcon && tab.iconType === 'font'">{{ tab.icon }}</mat-icon>
+        <ng-container *ngIf="tab.labelText">{{ tab.labelText }}</ng-container>
+      </span>
+    </ng-template>
     <ng-container [ngTemplateOutlet]="tab.templateRef"></ng-container>
   </mat-tab>
   <!-- Debug info -->