@allsorter/ui-components 0.0.396 → 0.0.400

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.396",
+  "version": "0.0.400",
   "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/newresumeheader/newresumeheader.component.scss

@@ -62,7 +62,7 @@
 .example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left] {
   flex-shrink: 1;
   min-width: 0;
-  overflow: hidden;
+  overflow: visible;
   max-width: 100%;
   transition: flex 0.2s ease, width 0.2s ease;
 }
@@ -77,7 +77,7 @@
 
 .example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left {
   min-width: 0;
-  overflow: hidden;
+  overflow: visible;
   max-width: 100%;
   transition: flex 0.2s ease;
 }
@@ -114,9 +114,9 @@
 
 /* Animation wrapper - ensures smooth height transitions */
 // .example-accordion-item-body-wrapper {
-  //   width: 100%;
-  //   overflow: hidden;
-  // }
+//   width: 100%;
+//   overflow: hidden;
+// }
 
 .toggle-button {
   border: none;
@@ -213,19 +213,44 @@
 }
 
 /* Edit input group hover effect for title */
+// .edit-input-group {
+//   display: flex;
+//   align-items: center;
+//   gap: 4px;
+//   min-width: 0;
+//   border-radius: 4px;
+//   transition: background-color 0.2s ease, width 0.2s ease;
+//   padding: 0 8px;
+//   flex-shrink: 1;
+//   width: 100%;
+//   max-width: 100%;
+//   overflow: hidden;
+//   flex: 1 1 0;
+// }
+
+// /* Expand edit-input-group to 100% width when input is focused */
+// .edit-input-group.input-focused {
+//   width: 100%;
+//   flex: 1 1 100%;
+//   min-width: 0;
+// }
+
+// .edit-input-group:hover {
+//   background-color: #D1D3DB;
+// }
 .edit-input-group {
   display: flex;
   align-items: center;
   gap: 4px;
   min-width: 0;
   border-radius: 4px;
-  transition: background-color 0.2s ease, width 0.2s ease;
+  transition: width 0.2s ease, background-color 0.2s ease;
   padding: 0 8px;
-  flex-shrink: 1;
+  margin: 0 -8px;
   width: 100%;
-  max-width: 100%;
-  overflow: hidden;
+  overflow: visible;
   flex: 1 1 0;
+  position: relative;
 }
 
 /* Expand edit-input-group to 100% width when input is focused */
@@ -235,6 +260,7 @@
   min-width: 0;
 }
 
+/* Hover effect - direct background */
 .edit-input-group:hover {
   background-color: #D1D3DB;
 }
@@ -584,34 +610,34 @@
 
 /* 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;
-  //   }
-  // }
+//   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/responsive-columns/responsive-columns.component.scss

@@ -5,7 +5,7 @@
 .container {
   display: grid;
   grid-template-columns: var(--template-columns, var(--left-width, auto) 1fr var(--right-width, auto));
-  gap: var(--gap, 12px);
+  gap: var(--gap, 8px);
   padding: var(--padding, 0);
 }