@allsorter/ui-components 0.0.408 → 0.0.412

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/responsive-layout/responsive-layout.component.d.ts

@@ -33,6 +33,7 @@ export declare class ResponsiveLayoutComponent {
     /** Minimum columns (e.g. 2) so this row never collapses to 1 column on small viewports. Use for "Date Type + Current Role/Study" row in certification/experience. */
     minColumns?: number;
     get hasMinCols2(): boolean;
+    get hasMinCols3(): boolean;
     get cssGap(): string;
     get cssCountMobile(): number;
     get cssCountMobileSm(): number;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allsorter/ui-components",
-  "version": "0.0.408",
+  "version": "0.0.412",
   "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) */
@@ -88,6 +90,20 @@
   box-sizing: border-box;
   z-index: 0;
 
+  /* Ensure content doesn't overflow the form */
+  overflow: hidden;
+}
+
+/* Ensure all form inputs don't overflow their containers */
+:host ::ng-deep .al-form-wrapper>.inner > * {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+/* Ensure app-flex-grid doesn't overflow */
+:host ::ng-deep .al-form-wrapper>.inner app-flex-grid {
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 /* Trim accidental extra spacing from first/last child margins inside content */
@@ -195,19 +211,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 +242,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 +253,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) */
@@ -246,10 +281,11 @@ select.al-form__control {
   justify-content: center;
 }
 
-/* AL Form only: force 2 columns for the first row (Date Type + Current Study) when viewport or form is narrow.
+/* AL Form only: force 2 columns for the first row when viewport or form is narrow.
    Without this, app-flex-grid would collapse to 1 column; we keep 2 cols for this row inside al-form.
 
-   WITHOUT Date Type (3 children): use 1 column so each field is on its own row */
+   WITH Date Type (Date Type, Current Study, ...): 2-1 layout (Date Type|Current Study in row 1, End Date in row 2)
+   WITHOUT Date Type (Current Study, Start Date, End Date): 1-1-1 layout (each field on its own row) */
 @media (max-width: 767.98px) {
   :host ::ng-deep app-flex-grid.row.min-cols-2,
   :host ::ng-deep app-flex-grid.col.min-cols-2 {
@@ -257,8 +293,24 @@ select.al-form__control {
     grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   }
 
-  /* Without Date Type: force 1 column so Current Study, Start Date, End Date each on own row */
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3) {
+  /* Ensure checkbox and input don't span full width - fit in their grid cells */
+  :host ::ng-deep app-flex-grid.row.min-cols-2 al-checkbox,
+  :host ::ng-deep app-flex-grid.row.min-cols-2 al-input,
+  :host ::ng-deep app-flex-grid.col.min-cols-2 al-checkbox,
+  :host ::ng-deep app-flex-grid.col.min-cols-2 al-input {
+    grid-column: auto !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  /* WITH Date Type (Date Type, Current Study, End Date): ensure inputs don't span full width */
+  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-input) {
+    grid-column: auto !important;
+  }
+
+  /* WITHOUT Date Type (first child is checkbox): force 1 column so Current Study, Start Date, End Date each on own row */
+  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-checkbox),
+  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-checkbox) ~ * {
     grid-column: 1 / -1 !important;
   }
 }
@@ -270,28 +322,220 @@ select.al-form__control {
     grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   }
 
-  /* Without Date Type: force 1 column so Current Study, Start Date, End Date each on own row */
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3) {
+  /* Ensure checkbox and input don't span full width - fit in their grid cells */
+  :host ::ng-deep app-flex-grid.row.min-cols-2 al-checkbox,
+  :host ::ng-deep app-flex-grid.row.min-cols-2 al-input,
+  :host ::ng-deep app-flex-grid.col.min-cols-2 al-checkbox,
+  :host ::ng-deep app-flex-grid.col.min-cols-2 al-input {
+    grid-column: auto !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  /* WITH Date Type (Date Type, Current Study, End Date): ensure inputs don't span full width */
+  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-input) {
+    grid-column: auto !important;
+  }
+
+  /* WITHOUT Date Type (first child is checkbox): force 1 column so Current Study, Start Date, End Date each on own row */
+  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-checkbox),
+  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-checkbox) ~ * {
+    grid-column: 1 / -1 !important;
+  }
+}
+
+/* When form wrapper is wide enough (600px+): maintain responsive order with CSS.
+   Container query so order follows form width.
+
+   ORDER REQUIREMENTS:
+   - 4 fields: Date Type | Start Date | End Date | Current Study
+   - 3 fields (no Start Date): Date Type | End Date | Current Study
+   - 3 fields (no Date Type): Start Date | End Date | Current Study
+   - 2 fields (no Date Type, no Start Date): End Date | Current Study */
+@container form-wrapper (min-width: 600px) {
+  /* === 4 CHILDREN: Date Type, Current Study, Start Date, End Date === */
+  /* Result: Date Type | Start Date | End Date | Current Study */
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(1) { order: 1; } /* Date Type → 1st */
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(2) { order: 4; } /* Current Study → 4th */
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(3) { order: 2; } /* Start Date → 2nd */
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(4) { order: 3; } /* End Date → 3rd */
+
+  /* === 3 CHILDREN: Date Type, Current Study, End Date (NO Start Date) === */
+  /* DOM order: Date Type(1), Current Study(2), End Date(3) */
+  /* Result: Date Type | End Date | Current Study */
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3) {
+    order: 1;
+    grid-column: 1 / 2 !important;
+  }
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3) ~ *:nth-child(2) {
+    order: 3;
+    grid-column: 4 / 5 !important;
+  }
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3) ~ *:nth-child(3) {
+    order: 2;
+    grid-column: 2 / 4 !important;
+  }
+
+  /* === 3 CHILDREN: Current Study, Start Date, End Date (NO Date Type) === */
+  /* DOM order: Current Study(1), Start Date(2), End Date(3) */
+  /* Result: Start Date | End Date | Current Study */
+  /* Override: checkbox (1st child) moves to 3rd position */
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-checkbox) {
+    order: 3;
+    grid-column: 4 / 5 !important;
+  }
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-checkbox) ~ *:nth-child(2) {
+    order: 1;
+    grid-column: 1 / 2 !important;
+  }
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3):is(al-checkbox) ~ *:nth-child(3) {
+    order: 2;
+    grid-column: 2 / 4 !important;
+  }
+
+  /* === 2 CHILDREN: Current Study, End Date (NO Date Type, NO Start Date) === */
+  /* DOM order: Current Study(1), End Date(2) */
+  /* Result: End Date | Current Study */
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(2) {
+    order: 2;
+    grid-column: 2 / 3 !important;
+  }
+  ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(2):last-child {
+    order: 1;
+    grid-column: 1 / 2 !important;
+  }
+}
+
+/* ============================================
+   3-COLUMN LAYOUT RULES
+   Scenario: Start Date, End Date, Checkbox (no Date Type)
+
+   Desktop (600px+): Start Date | End Date | Checkbox (equal 1fr each)
+   Mobile (< 600px): Checkbox (full width, first), then Start Date | End Date
+
+   DOM order in actual project: Checkbox(1), Start Date(2), End Date(3)
+   ============================================ */
+
+/* Mobile layout: 2 columns, checkbox first (full width), dates in row 2 */
+@media (max-width: 767.98px) {
+  /* Target 3-column grids using min-cols-3 class or style attribute */
+  :host ::ng-deep app-flex-grid.row.min-cols-3,
+  :host ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] {
+    --current-count: 2 !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+
+  /* Move checkbox to first position, full width */
+  :host ::ng-deep app-flex-grid.row.min-cols-3 al-checkbox,
+  :host ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] al-checkbox {
+    order: -1 !important;
     grid-column: 1 / -1 !important;
   }
+
+  /* Extra small screens (400.98px or less): all fields in separate rows (1 column) */
+  @media (max-width: 400.98px) {
+    :host ::ng-deep app-flex-grid.row.min-cols-3,
+    :host ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] {
+      --current-count: 1 !important;
+      grid-template-columns: 1fr !important;
+    }
+
+    /* Reset all to natural DOM order: Current Study, Start Date, End Date */
+    :host ::ng-deep app-flex-grid.row.min-cols-3 > *,
+    :host ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] > * {
+      order: 0 !important;
+      grid-column: auto !important;
+    }
+  }
 }
 
-/* When form wrapper is wide enough (600px+): show initial order (Date Type, Start Date, End Date, Current Study).
-   DOM order is Date Type, Current Study, Start Date, End Date; reorder with CSS.
-   Container query so order follows form width (works in test-styling and narrow viewports).
+/* Container query for mobile */
+@container form-wrapper (max-width: 600px) {
+  :host ::ng-deep app-flex-grid.row.min-cols-3,
+  :host ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] {
+    --current-count: 2 !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+
+  /* Move checkbox to first position, full width */
+  :host ::ng-deep app-flex-grid.row.min-cols-3 al-checkbox,
+  :host ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] al-checkbox {
+    order: -1 !important;
+    grid-column: 1 / -1 !important;
+  }
+}
+
+/* Extra small container (400px or less): all fields in separate rows (1 column) */
+@container form-wrapper (max-width: 400px) {
+  :host ::ng-deep app-flex-grid.row.min-cols-3,
+  :host ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] {
+    --current-count: 1 !important;
+    grid-template-columns: 1fr !important;
+  }
 
-   WITHOUT Date Type (3 children): Start Date, End Date on row 1, Current Study on row 2 (as column) */
+  /* Reset all to natural DOM order: Current Study, Start Date, End Date */
+  :host ::ng-deep app-flex-grid.row.min-cols-3 > *,
+  :host ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] > * {
+    order: 0 !important;
+    grid-column: auto !important;
+  }
+}
+
+/* Desktop layout: 3 equal columns, reorder to Start Date | End Date | Checkbox */
 @container form-wrapper (min-width: 600px) {
-  /* With Date Type present (4 children): Date Type, Start Date, End Date, Current Study */
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(1) { order: 1; }
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(2) { order: 4; }
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(3) { order: 2; }
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(4) { order: 3; }
-
-  /* Without Date Type (3 children): Start Date, End Date, Current Study all in ONE row */
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:first-child:nth-last-child(3) { order: 3; } /* Current Study last */
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(2):nth-last-child(2) { order: 1; } /* Start Date first */
-  :host ::ng-deep app-flex-grid.row.min-cols-2 > *:nth-child(3):last-child { order: 2; } /* End Date middle */
+  /* Force 3 equal columns */
+  ::ng-deep app-flex-grid.row.min-cols-3,
+  ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] {
+    grid-template-columns: repeat(3, 1fr) !important;
+  }
+
+  /* === 3 CHILDREN: Checkbox(1), Start Date(2), End Date(3) === */
+  /* Reorder to: Start Date | End Date | Checkbox */
+  ::ng-deep app-flex-grid.row.min-cols-3 > *:first-child:nth-last-child(3):is(al-checkbox),
+  ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] > *:first-child:nth-last-child(3):is(al-checkbox) {
+    order: 3 !important;
+    grid-column: auto !important;
+  }
+  ::ng-deep app-flex-grid.row.min-cols-3 > *:first-child:nth-last-child(3):is(al-checkbox) ~ *:nth-child(2),
+  ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] > *:first-child:nth-last-child(3):is(al-checkbox) ~ *:nth-child(2) {
+    order: 1 !important;
+    grid-column: auto !important;
+  }
+  ::ng-deep app-flex-grid.row.min-cols-3 > *:first-child:nth-last-child(3):is(al-checkbox) ~ *:nth-child(3),
+  ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] > *:first-child:nth-last-child(3):is(al-checkbox) ~ *:nth-child(3) {
+    order: 2 !important;
+    grid-column: auto !important;
+  }
+
+  /* === 2 CHILDREN: Checkbox(1), Start Date OR End Date(2) === */
+  /* Checkbox stays in position 2, date in position 1 */
+  ::ng-deep app-flex-grid.row.min-cols-3 > *:first-child:nth-last-child(2):is(al-checkbox),
+  ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] > *:first-child:nth-last-child(2):is(al-checkbox) {
+    order: 2 !important;
+    grid-column: 3 / 4 !important;
+  }
+  ::ng-deep app-flex-grid.row.min-cols-3 > *:first-child:nth-last-child(2):is(al-checkbox) ~ *:nth-child(2),
+  ::ng-deep app-flex-grid.row[style*="--count-desktop: 3"] > *:first-child:nth-last-child(2):is(al-checkbox) ~ *:nth-child(2) {
+    order: 1 !important;
+    grid-column: 1 / 3 !important;
+  }
+}
+
+/* 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 ===== */