@allsorter/ui-components 0.0.394 → 0.0.398

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

@@ -30,9 +30,10 @@ export declare class AiApplyBarComponent {
     /** Emitted when the chevron icon button is clicked */
     chevronClick: EventEmitter<void>;
     isVisible: boolean;
+    toggled: boolean;
     onValueChange(v: string): void;
     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; }; "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>;
+    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; }; "isVisible": { "alias": "isVisible"; "required": false; }; "toggled": { "alias": "toggled"; "required": false; }; }, { "valueChange": "valueChange"; "applyClick": "applyClick"; "closeClick": "closeClick"; "chevronClick": "chevronClick"; }, never, never, true, never>;
 }

package/package.json

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

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

@@ -3,18 +3,22 @@
   <!-- Toggle Button - AI Trigger or Close Button (Fixed Position) -->
   <div class="ai-toggle-button">
     <!-- AI Trigger Button - Show when bar is hidden -->
-    <al-button *ngIf="!isVisible" [iconOnly]="true" [buttonType]="'icon-circle'" [icon]="'auto_fix_high'" [iconOutlined]="true"
-      [color]="'gradient'" [size]="'base'" aria-label="AI Trigger" (onClick)="toggleBar()">
+    <al-button *ngIf="toggled && !isVisible" [iconOnly]="true" [buttonType]="'icon-circle'" [icon]="'auto_fix_high'"
+      [iconOutlined]="true" [color]="'gradient'" [size]="'base'" aria-label="AI Trigger" (onClick)="toggleBar()">
     </al-button>
 
     <!-- Close Button - Show when bar is visible -->
-    <al-button *ngIf="isVisible && showClose" [iconOnly]="true" [buttonType]="'icon-circle'" [icon]="'close'"
+    <al-button *ngIf="toggled && isVisible && showClose" [iconOnly]="true" [buttonType]="'icon-circle'" [icon]="'close'"
       [color]="'grey'" [size]="'base'" aria-label="Close" (onClick)="toggleBar()">
     </al-button>
+
+    <al-button *ngIf="!toggled" [iconOnly]="true" [buttonType]="'icon-circle'" [icon]="'close'"
+      [color]="'grey'" [size]="'base'" aria-label="Close" (onClick)="onClose()">
+    </al-button>
   </div>
 
   <!-- AI Apply Bar - Expands to the LEFT of button -->
-  <div class="ai-apply-wrap" [class.visible]="isVisible" [class.hidden]="!isVisible">
+  <div class="ai-apply-wrap" [class.visible]="isVisible || !toggled" [class.hidden]="!isVisible && toggled">
     <div class="ai-apply-rail">
       <div class="ai-apply-row">
         <div class="ai-apply-input">
@@ -26,8 +30,8 @@
         </div>
 
         <div class="ai-apply-button">
-          <al-button *ngIf="showApplyButton" [label]="applyLabel" [buttonType]="'icon-label'" [category]="'gradient'" [size]="'base'"
-            [state]="applyDisabled ? 'disabled' : 'default'" (onClick)="applyClick.emit()">
+          <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"
             [customColour]="'#ffffff'" [size]="'l'" [disabled]="applyDisabled" (onClick)="chevronClick.emit()"

package/src/lib/ai-wrapper/ai-wrapper.component.scss

@@ -370,3 +370,15 @@
 :host ::ng-deep .mat-mdc-select-arrow {
   display: none !important;
 }
+
+/* AI wrapper dropdown overlay pane width - target autocomplete panels */
+:host ::ng-deep .mat-mdc-autocomplete-panel {
+  width: 253px !important;
+  min-width: 253px !important;
+}
+
+/* Also target the overlay pane for autocomplete dropdowns */
+::ng-deep .cdk-overlay-pane:has(.mat-mdc-autocomplete-panel) {
+  width: 253px !important;
+  min-width: 253px !important;
+}

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/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: 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: 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: 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: 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: 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));

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: 5px;
+  padding-top: var(--spacing-xs, 5px);
 }
 
 .timeline-indicator {