@allsorter/ui-components 0.0.392 → 0.0.396

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

@@ -119,6 +119,8 @@ export declare class CustomEditorComponent implements OnInit, OnDestroy, AfterVi
     private getCursorPosition;
     private restoreCursorPosition;
     ngAfterViewInit(): void;
+    onClick(): void;
+    private assignUniqueIdAndStyle;
     getEditorElement(): HTMLElement | undefined;
     getBoundGetEditorElement(): () => HTMLElement | undefined;
     getBoundSaveHistory(): () => void;

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

@@ -40,12 +40,10 @@ export declare class NewResumeHeaderComponent implements OnInit, OnDestroy, Afte
      * Returns false when collapsed (accordion) or hidden (eye icon).
      * This is used by the expandCollapse animation trigger.
      */
-    get isBodyExpanded(): boolean;
     /**
      * Reference to the accordion item instance from ViewChild.
      * Used to track the accordion expansion state for animations.
      */
-    accordionItem: any;
     /**
      * Local tracking of accordion expanded state for animation.
      * This is the single source of truth for the animation state.

package/lib/newresumeheader/newresumeheader.module.d.ts

@@ -1,9 +1,8 @@
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "@angular/platform-browser/animations";
-import * as i3 from "./newresumeheader.component";
+import * as i2 from "./newresumeheader.component";
 export declare class NewResumeHeaderModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NewResumeHeaderModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NewResumeHeaderModule, never, [typeof i1.CommonModule, typeof i2.BrowserAnimationsModule, typeof i3.NewResumeHeaderComponent], [typeof i3.NewResumeHeaderComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NewResumeHeaderModule, never, [typeof i1.CommonModule, typeof i2.NewResumeHeaderComponent], [typeof i2.NewResumeHeaderComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NewResumeHeaderModule>;
 }

package/package.json

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

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

@@ -448,13 +448,13 @@
   border: 1px solid #ccc;
 }
 
-// .cdk-overlay-pane {
-  //   width: fit-content !important;
-  //   min-width: fit-content !important;
-  //   transform: translate(0px) !important;
-  // }
+.cdk-overlay-pane {
+  width: fit-content !important;
+  min-width: fit-content !important;
+  transform: translate(0px) !important;
+}
 
 .mat-select-panel {
   width: fit-content !important;
   min-width: fit-content !important;
-}
+}

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

@@ -247,13 +247,20 @@ select.al-form__control {
 }
 
 /* AL Form only: force 2 columns for the first row (Date Type + Current Study) 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 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 */
 @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 {
     --current-count: 2 !important;
     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) {
+    grid-column: 1 / -1 !important;
+  }
 }
 
 @container form-wrapper (max-width: 600px) {
@@ -262,16 +269,29 @@ select.al-form__control {
     --current-count: 2 !important;
     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) {
+    grid-column: 1 / -1 !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 so order follows form width (works in test-styling and narrow viewports).
+
+   WITHOUT Date Type (3 children): Start Date, End Date on row 1, Current Study on row 2 (as column) */
 @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 */
 }
 
 /* Remove special outline/background styles so buttons render as-is */

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

@@ -502,27 +502,28 @@ mat-icon[matSuffix] {
 
 /* ===== FLOATING LABEL POSITIONING ===== */
 
+/* ===== FLOATING LABEL POSITIONING ===== */
+
 ::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
-top: var(--al-floating-label-top-xs, 10px) !important;
+  top: var(--al-floating-label-top-xs, 10px) !important;
 }
 
 ::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
-    top: var(--al-floating-label-top-small, 11px) !important;
+  top: var(--al-floating-label-top-small, 11px) !important;
 }
 
 ::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
- top: var(--al-floating-label-top-base, 15px) !important;
+  top: var(--al-floating-label-top-base, 15px) !important;
 }
 
 ::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
-   top: var(--al-floating-label-top-header, 8px) !important
+  top: var(--al-floating-label-top-header, 8px) !important
 }
 
 ::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
-   top: var(--al-floating-label-top-header, 20px) !important
+  top: var(--al-floating-label-top-header, 20px) !important
 }
 
-
 /* Label transform calculations - Fixed to position at top of border */
 ::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
   --mat-mdc-form-field-label-transform: translateY(-20px) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
@@ -1370,4 +1371,4 @@ top: var(--al-floating-label-top-xs, 10px) !important;
 ::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked,
 ::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate {
   background-color: $color-blue-500 !important;
-}
+}

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

@@ -7,26 +7,15 @@
           *ngIf="!isSectionHidden; else hiddenHeaderLayout"><al-responsive-columns [stackAt]="0" [gap]="'12px'"
             [padding]="'8px 12px'">
             <div left>
-              <button
-                (click)="toggleAccordion(accordionItem)"
-                tabindex="0"
-                class="toggle-button align-center"
-                [attr.aria-expanded]="_isAccordionExpanded"
-                [matTooltip]="_isAccordionExpanded ? 'Collapse' : 'Expand'"
-                matTooltipPosition="above"
-              >
+              <button (click)="toggleAccordion(accordionItem)" tabindex="0" class="toggle-button align-center"
+                [attr.aria-expanded]="accordionItem.expanded"
+                [matTooltip]="accordionItem.expanded ? 'Collapse' : 'Expand'" matTooltipPosition="above">
                 <!-- When section is OPEN (expanded === true), show an UP chevron.
                      When section is CLOSED, show a DOWN chevron. -->
-                <span
-                  class="material-icons-outlined"
-                  *ngIf="_isAccordionExpanded"
-                >
+                <span class="material-icons-outlined" *ngIf="accordionItem.expanded">
                   expand_less
                 </span>
-                <span
-                  class="material-icons-outlined"
-                  *ngIf="!_isAccordionExpanded"
-                >
+                <span class="material-icons-outlined" *ngIf="!accordionItem.expanded">
                   expand_more
                 </span>
               </button>
@@ -104,18 +93,17 @@
       </div>
       <!-- Accordion body with expand/collapse animation -->
       <div class="example-accordion-item-body-wrapper">
-        <div class="example-accordion-item-body" [@expandCollapse]="isBodyExpanded ? 'expanded' : 'collapsed'" [@.disabled]="false">
+        <div class="example-accordion-item-body" *ngIf="accordionItem.expanded && !isSectionHidden">
           <!-- Pop-out Panel -->
-          <div *ngIf="shouldShowPopOut" #popOutPanel class="pop-out-panel" [ngClass]="{'pop-out-narrow': isPopOutNarrow}">
+          <div *ngIf="shouldShowPopOut" #popOutPanel class="pop-out-panel"
+            [ngClass]="{'pop-out-narrow': isPopOutNarrow}">
             <div class="pop-out-content">
-              <al-button [labelText]="popOutButtonLabel" [rightIcon]="popOutButtonIcon"
-                [buttonType]="'icon-label'" [category]="'gradient'" [size]="'xs'" [iconOnly]="false"
-                (onClick)="popOutButtonClick.emit()" [dataTestId]="'pop-out-run-deep-extraction'"
-                [title]="popOutButtonLabel"></al-button>
+              <al-button [labelText]="popOutButtonLabel" [rightIcon]="popOutButtonIcon" [buttonType]="'icon-label'"
+                [category]="'gradient'" [size]="'xs'" [iconOnly]="false" (onClick)="popOutButtonClick.emit()"
+                [dataTestId]="'pop-out-run-deep-extraction'" [title]="popOutButtonLabel"></al-button>
               <p class="pop-out-message" [innerHTML]="sanitizedMessage"></p>
-              <button type="button" class="pop-out-close"
-                (click)="dismissPopOut()" aria-label="Close pop-out panel"><span
-                  class="material-icons-outlined">close</span></button>
+              <button type="button" class="pop-out-close" (click)="dismissPopOut()"
+                aria-label="Close pop-out panel"><span class="material-icons-outlined">close</span></button>
             </div>
           </div>
           <!-- Single body content slot - child component will handle 3-column layout internally -->

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

@@ -113,10 +113,10 @@
 }
 
 /* Animation wrapper - ensures smooth height transitions */
-.example-accordion-item-body-wrapper {
-  width: 100%;
-  overflow: hidden;
-}
+// .example-accordion-item-body-wrapper {
+  //   width: 100%;
+  //   overflow: hidden;
+  // }
 
 .toggle-button {
   border: none;
@@ -583,35 +583,35 @@
 /* Removed old CSS targeting non-existent .eye-icon-wrapper element */
 
 /* Smooth hover effect on eye icon container - circular background without jumping */
-.mat-checkbox-margin {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 28px;
-    height: 28px;
-    border-radius: 4px;
-    background-color: transparent;
-    transition: background-color 0.2s ease;
-    z-index: 0;
-    pointer-events: none;
-  }
-
-  &:hover::before {
-    background-color: rgba(211, 211, 211, 0.9) !important;
-
-  }
-
-  /* Ensure icon stays above the background */
-  mat-icon {
-    position: relative;
-    z-index: 1;
-  }
-}
+// .mat-checkbox-margin {
+  //   position: relative;
+  //   display: inline-flex;
+  //   align-items: center;
+  //   justify-content: center;
+
+  //   &::before {
+  //     content: '';
+  //     position: absolute;
+  //     top: 50%;
+  //     left: 50%;
+  //     transform: translate(-50%, -50%);
+  //     width: 28px;
+  //     height: 28px;
+  //     border-radius: 4px;
+  //     background-color: transparent;
+  //     transition: background-color 0.2s ease;
+  //     z-index: 0;
+  //     pointer-events: none;
+  //   }
+
+  //   &:hover::before {
+  //     background-color: rgba(211, 211, 211, 0.9) !important;
+
+  //   }
+
+  //   /* Ensure icon stays above the background */
+  //   mat-icon {
+  //     position: relative;
+  //     z-index: 1;
+  //   }
+  // }

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

@@ -2,6 +2,10 @@
 @import "../styles/colors.scss";
 @import "../styles/border-radius.scss";
 
+:root {
+  --spacing-xs: 6px;
+}
+
 .resume-entries-container {
   display: flex;
   flex-direction: column;
@@ -62,7 +66,7 @@
   flex: 1;
   width: 100%;
   gap: 12px;
-  padding-top: 4px;
+  padding-top: var(--spacing-xs, 5px);
 }
 
 .timeline-indicator {
@@ -347,14 +351,14 @@
   gap: 4px;
 
   &.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;
+    }
 
 }
 
@@ -480,4 +484,4 @@
       }
     }
   }
-}
+}

package/src/lib/test-styling/test-styling.component.html

@@ -3,8 +3,7 @@
   [overflowY]="'auto'">
   <al-tabs [selectedIndex]="0" [size]="'large'">
     <al-tab labelText="Resume">
-      <al-candidate-section [candidateDetails]="candidateEntry" [useCustomHeader]="false"
-        [getFieldNotHidden]="getFieldNotHidden" [getForceShowAllFields]="getForceShowAllFields"></al-candidate-section>
+      <al-candidate-section [candidateDetails]="candidateEntry" [useCustomHeader]="false"></al-candidate-section>
 
       <!-- candidate-section-form -->
       <al-form *ngIf="candidateEntry" [showLeftButton]="true" [showSaveButton]="true" [showDeleteButton]="true"
@@ -83,7 +82,7 @@
         <al-responsive-columns [stackAt]="0" [gap]="'8px'" [padding]="'8px 12px'">
           <div left>
             <toolbar-left [variant]="'default'" [content]="'Section Content'" [isExtractionAnalysisActive]="false"
-              [showSearch]="true" (editEvent)="onEditEvent($event)">
+              (editEvent)="onEditEvent($event)">
             </toolbar-left>
           </div>
           <div center>
@@ -116,7 +115,7 @@
           <al-input [label]="'Date Type'" [placeholder]="'Type here...'" [value]="'Month/Year'" [type]="'text'"
             [disabled]="false" [helperText]="false" [hasDropDown]="true" [options]="['Month/Year','Year']"
             [size]="'base'" [types]="'primary'" [dataTestId]="'test-input'"></al-input>
-          <al-checkbox labelPosition="before" labelText="Current Study" [checked]="entry.isPresent"
+          <al-checkbox labelPosition="after" labelText="Current Study" [checked]="entry.isPresent"
             (change)="onFormCheckboxChange($event)"></al-checkbox>
           <al-input [label]="'Start Date'" [placeholder]="'Type here...'" [value]="entry.startDate" [type]="'date'"
             [disabled]="false" [helperText]="false" [size]="'base'" [types]="'primary'" [dataTestId]="'test-input'"
@@ -159,4 +158,4 @@
       <p>Get in touch with us through various channels.</p>
     </al-tab>
   </al-tabs>
-</al-general-container>
+</al-general-container>

package/lib/utils/animations.d.ts

@@ -1,43 +0,0 @@
-import { AnimationReferenceMetadata } from '@angular/animations';
-/**
- * Collapse animation - matches jQuery hideAnimation
- * Duration: 600ms
- * Easing: swing (ease-in-out)
- * Result: height: 0, overflow: hidden
- */
-export declare const collapseAnimation: AnimationReferenceMetadata;
-/**
- * Expand animation - matches jQuery showAnimation
- * Duration: 500ms
- * Easing: swing (ease-in-out)
- * Result: height: *, overflow: visible
- */
-export declare const expandAnimation: AnimationReferenceMetadata;
-/**
- * Main trigger for expand/collapse animations on accordion bodies.
- * Uses void state for hidden and default state for visible.
- */
-export declare const accordionExpandCollapse: import("@angular/animations").AnimationTriggerMetadata;
-/**
- * Alternative trigger that works with a boolean input (expanded/collapsed).
- * Use this when you want to control animation with @Input expanded boolean.
- *
- * Usage: [@expandCollapse]="expanded ? 'expanded' : 'collapsed'"
- */
-export declare const expandCollapse: import("@angular/animations").AnimationTriggerMetadata;
-/**
- * Fade transition for smooth opacity changes during expand/collapse.
- * Use alongside height animations for a polished effect.
- */
-export declare const fadeInOut: import("@angular/animations").AnimationTriggerMetadata;
-/**
- * Animation metadata export for use in component animations array.
- * This allows importing and using animations directly.
- */
-export declare const accordionAnimations: {
-    accordionExpandCollapse: import("@angular/animations").AnimationTriggerMetadata;
-    expandCollapse: import("@angular/animations").AnimationTriggerMetadata;
-    fadeInOut: import("@angular/animations").AnimationTriggerMetadata;
-    collapseAnimation: AnimationReferenceMetadata;
-    expandAnimation: AnimationReferenceMetadata;
-};