@allsorter/ui-components 0.0.372 → 0.0.376

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

@@ -28,7 +28,10 @@ export declare class AiApplyBarComponent {
     closeClick: EventEmitter<void>;
     /** Emitted when the chevron icon button is clicked */
     chevronClick: EventEmitter<void>;
+    isVisible: 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; }; "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/ai-wrapper/ai-wrapper.component.d.ts

@@ -0,0 +1,92 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i0 from "@angular/core";
+/**
+ * AI Wrapper Component
+ *
+ * A presentational component that displays a clock-hand style toolbar
+ * that rotates between vertical (tools) and horizontal (AI input) states.
+ *
+ * This component has no internal logic - all state is controlled via inputs
+ * and user interactions emit events.
+ */
+export declare class AiWrapperComponent implements OnInit {
+    private iconRegistry;
+    private sanitizer;
+    /** Whether the component is in AI mode (horizontal) or tools mode (vertical) */
+    isAI: boolean;
+    /** Placeholder text for the AI input field (dropdown) */
+    inputPlaceholder: string;
+    /** Options for the dropdown input */
+    inputOptions: string[];
+    /** Current value of the AI input field */
+    inputValue: string;
+    /** Whether the input is disabled */
+    inputDisabled: boolean;
+    /** Whether to show the close (X) button */
+    showCloseButton: boolean;
+    /** Whether to show the hide button in vertical mode */
+    showHideButton: boolean;
+    /** Whether to show the sub role button in vertical mode */
+    showSubRoleButton: boolean;
+    /** Whether to show the year month button in vertical mode */
+    showYearMonthButton: boolean;
+    /** Whether to show the move button in vertical mode */
+    showMoveButton: boolean;
+    /** Whether to show the delete button in vertical mode */
+    showDeleteButton: boolean;
+    /** Whether to show the Apply AI button in AI mode */
+    showApplyButton: boolean;
+    /** Label for the Apply AI button */
+    applyLabel: string;
+    /** Whether the Apply AI button is disabled */
+    applyDisabled: boolean;
+    /** Whether to show the chevron button */
+    showChevronButton: boolean;
+    /** Whether to show helper text */
+    showHelperText: boolean;
+    /** Helper text content */
+    helperText: string;
+    /** Event emitted when the close (X) button is clicked */
+    closeClick: EventEmitter<void>;
+    /** Event emitted when the AI trigger button (Sparkles) is clicked */
+    aiTriggerClick: EventEmitter<void>;
+    /** Event emitted when the AI input value changes */
+    inputValueChange: EventEmitter<string>;
+    /** Event emitted when the hide button is clicked */
+    hideClick: EventEmitter<void>;
+    /** Event emitted when the sub role button is clicked */
+    subRoleClick: EventEmitter<void>;
+    /** Event emitted when the year month button is clicked */
+    yearMonthClick: EventEmitter<void>;
+    /** Event emitted when the move button is clicked */
+    moveClick: EventEmitter<void>;
+    /** Event emitted when the delete button is clicked */
+    deleteClick: EventEmitter<void>;
+    /** Event emitted when the Apply AI button is clicked */
+    applyClick: EventEmitter<void>;
+    /** Event emitted when the chevron button is clicked */
+    chevronClick: EventEmitter<void>;
+    /** Event emitted when the input field is focused */
+    inputFocus: EventEmitter<void>;
+    /** Event emitted when the input field loses focus */
+    inputBlur: EventEmitter<void>;
+    constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer);
+    ngOnInit(): void;
+    private registerIcons;
+    onCloseClick(): void;
+    onAITriggerClick(event: Event): void;
+    onInputChange(value: string): void;
+    onHideClick(): void;
+    onSubRoleClick(): void;
+    onYearMonthClick(): void;
+    onMoveClick(): void;
+    onDeleteClick(): void;
+    onApplyClick(): void;
+    onChevronClick(): void;
+    onInputFocus(): void;
+    onInputBlur(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AiWrapperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AiWrapperComponent, "al-ai-wrapper", never, { "isAI": { "alias": "isAI"; "required": false; }; "inputPlaceholder": { "alias": "inputPlaceholder"; "required": false; }; "inputOptions": { "alias": "inputOptions"; "required": false; }; "inputValue": { "alias": "inputValue"; "required": false; }; "inputDisabled": { "alias": "inputDisabled"; "required": false; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; }; "showHideButton": { "alias": "showHideButton"; "required": false; }; "showSubRoleButton": { "alias": "showSubRoleButton"; "required": false; }; "showYearMonthButton": { "alias": "showYearMonthButton"; "required": false; }; "showMoveButton": { "alias": "showMoveButton"; "required": false; }; "showDeleteButton": { "alias": "showDeleteButton"; "required": false; }; "showApplyButton": { "alias": "showApplyButton"; "required": false; }; "applyLabel": { "alias": "applyLabel"; "required": false; }; "applyDisabled": { "alias": "applyDisabled"; "required": false; }; "showChevronButton": { "alias": "showChevronButton"; "required": false; }; "showHelperText": { "alias": "showHelperText"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; }, { "closeClick": "closeClick"; "aiTriggerClick": "aiTriggerClick"; "inputValueChange": "inputValueChange"; "hideClick": "hideClick"; "subRoleClick": "subRoleClick"; "yearMonthClick": "yearMonthClick"; "moveClick": "moveClick"; "deleteClick": "deleteClick"; "applyClick": "applyClick"; "chevronClick": "chevronClick"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; }, never, ["*"], true, never>;
+}

package/lib/ai-wrapper/ai-wrapper.module.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ai-wrapper.component";
+/**
+ * Module for AI Wrapper Component
+ * Note: This component is standalone, so this module is optional.
+ * It can be used if you need to import the component in a non-standalone module.
+ */
+export declare class AiWrapperModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AiWrapperModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AiWrapperModule, never, [typeof i1.AiWrapperComponent], [typeof i1.AiWrapperComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AiWrapperModule>;
+}

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

@@ -50,7 +50,10 @@ export declare class NewResumeHeaderComponent implements OnInit, OnDestroy, Afte
     isMenuVisible: boolean;
     isPopOutDismissed: boolean;
     private clickOutsideListener?;
+    private resizeObserver?;
     titleInput?: ElementRef<HTMLInputElement>;
+    accordionHeader?: ElementRef<HTMLElement>;
+    generalContainer?: ElementRef<HTMLElement>;
     constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef, iconRegistry: MatIconRegistry);
     private registerIcons;
     toggleAccordion(accordionItem: any): void;

package/package.json

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

package/public-api.d.ts

@@ -51,3 +51,5 @@ export * from './lib/toolbar-right/toolbar-right.component';
 export * from './lib/toolbar-right/toolbar-right.module';
 export * from './lib/side-action-bar-wrapper/side-action-bar-wrapper.component';
 export * from './lib/side-action-bar-wrapper/side-action-bar-wrapper.module';
+export * from './lib/ai-wrapper/ai-wrapper.component';
+export * from './lib/ai-wrapper/ai-wrapper.module';

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

@@ -1,43 +1,45 @@
-<div class="ai-apply-wrap" [attr.data-test-id]="dataTestId">
-  <div class="ai-apply-rail">
-    <div class="ai-apply-row">
-      <div class="ai-apply-input">
-        <al-input
-          [labelText]="''"
-          [placeholder]="placeholder"
-          [value]="value"
-          [type]="'text'"
-          [disabled]="disabled"
-          [helperText]="false"
-          [leftIcon]="''"
-          [rightIcon]="'expand_more'"
-          [hasDropDown]="true"
-          [searchfilter]="true"
-          [multipleSelect]="false"
-          [options]="options"
-          [size]="'base'"
-          [types]="'plain'"
-          (change)="onValueChange($event)">
-        </al-input>
-      </div>
+<div class="ai-apply-container" [attr.data-test-id]="dataTestId">
+
+  <!-- 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'"
+      [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'"
+      [color]="'grey'" [size]="'base'" aria-label="Close" (onClick)="toggleBar()">
+    </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-rail">
+      <div class="ai-apply-row">
+        <div class="ai-apply-input">
+          <al-input [labelText]="''" [placeholder]="placeholder" [value]="value" [type]="'text'" [disabled]="disabled"
+            [helperText]="false" [leftIcon]="''" [rightIcon]="'expand_more'" [hasDropDown]="true" [searchfilter]="true"
+            [multipleSelect]="false" [options]="options" [size]="'base'" [types]="'plain'"
+            (change)="onValueChange($event)">
+          </al-input>
+        </div>
 
-      <div class="ai-apply-button">
-        <al-button [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]="'xl'" [disabled]="applyDisabled" (onClick)="chevronClick.emit()"
-          [dataTestId]="'icon-btn_Uwofs4q_3kWU'"></al-icon-button>
+        <div class="ai-apply-button">
+          <al-button [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]="'xl'" [disabled]="applyDisabled" (onClick)="chevronClick.emit()"
+            [dataTestId]="'icon-btn_Uwofs4q_3kWU'">
+          </al-icon-button>
+        </div>
       </div>
-    </div>
 
-    <div class="ai-apply-helper" *ngIf="showHelperText">
-      {{ helperText }}
+      <div class="ai-apply-helper" *ngIf="showHelperText">
+        {{ helperText }}
+      </div>
     </div>
   </div>
-  <div class="ai-apply-close" *ngIf="showClose">
-    <al-button [buttonType]="'icon-circle'" [color]="'grey'" [outline]="false" [size]="'base'" [iconOnly]="true"
-      [iconOutlined]="iconOutlined" [icon]="'close'" [tooltip]="closeButtonTooltip"
-      [tooltipPosition]="closeButtonTooltipPosition" aria-label="Close" (onClick)="closeClick.emit()"></al-button>
-  </div>
-</div>
+
+</div>

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

@@ -8,14 +8,48 @@
   display: none !important;
 }
 
-/* Outer container to allow floating close button */
-.ai-apply-wrap {
+/* Main container - positioned relative for absolute children */
+.ai-apply-container {
   position: relative;
-  display: inline-flex;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+/* Toggle Button - AI Trigger or Close Button (Fixed Position) */
+.ai-toggle-button {
+  position: relative;
+  z-index: 50;
+  flex-shrink: 0;
+}
+
+/* Expanding Bar - Positioned absolute, expands to the LEFT of button */
+.ai-apply-wrap {
+  position: absolute;
+  right: 40px;
+  /* 48px (button width) + 12px (gap) = 60px from right */
+  display: flex;
   align-items: stretch;
-  width: 100%;
   overflow: hidden;
-  gap: 8px;
+  transform-origin: right center;
+  transition: width 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    opacity 300ms ease-out 200ms;
+
+  /* Hidden state - collapsed */
+  &.hidden {
+    width: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: width 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
+      opacity 300ms ease-out;
+  }
+
+  /* Visible state - expanded */
+  &.visible {
+    width: 350px;
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 
 /* Dark rail with rounded corners */
@@ -28,6 +62,18 @@
   gap: $space-4;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
   backdrop-filter: blur(2px);
+  transition: opacity 300ms ease-out;
+  white-space: nowrap;
+}
+
+/* Inner content fade-in animation - matching React */
+.ai-apply-wrap.hidden .ai-apply-rail {
+  opacity: 0;
+}
+
+.ai-apply-wrap.visible .ai-apply-rail {
+  opacity: 1;
+  transition-delay: 200ms;
 }
 
 .ai-apply-row {
@@ -167,4 +213,4 @@
     box-shadow: none !important;
     border: none !important;
   }
-}
+}

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

@@ -0,0 +1,38 @@
+<div class="al-ai-wrapper">
+  <div class="al-ai-wrapper__center">
+    <div *ngIf="showCloseButton" class="al-ai-wrapper__close-button-wrapper" [class.is-ai-mode]="isAI"><al-button
+        [buttonType]="'icon-circle'" [color]="isAI ? 'grey' : 'grey'" [outline]="false" [size]="'base'"
+        [iconOnly]="true" [iconOutlined]="false" [icon]="'close'" [disabled]="false" [tooltip]="''"
+        [tooltipPosition]="'above'" aria-label="Close" (onClick)="onCloseClick()"></al-button></div>
+    <div class="al-ai-wrapper__hand-wrapper" [class.is-ai-mode]="isAI">
+      <div class="al-ai-wrapper__gap">
+        <div class="al-ai-wrapper__toolbar" [class.is-ai-mode]="isAI" [class.no-helper-text]="isAI && !showHelperText">
+          <div class="al-ai-wrapper__content" [class.is-ai-mode]="isAI">
+            <div *ngIf="!isAI" class="al-ai-wrapper__vertical-tools">
+              <ng-content></ng-content>
+            </div>
+            <div *ngIf="isAI" class="al-ai-wrapper__horizontal-ai">
+              <div class="al-ai-wrapper__ai-row">
+                <div class="al-ai-wrapper__input-container"><al-input [labelText]="''" [placeholder]="inputPlaceholder"
+                    [value]="inputValue" [type]="'text'" [disabled]="inputDisabled" [helperText]="false" [leftIcon]="''"
+                    [rightIcon]="'expand_more'" [hasDropDown]="true" [searchfilter]="true" [multipleSelect]="false"
+                    [options]="inputOptions" [size]="'base'" [types]="'plain'"
+                    (change)="onInputChange($event)"></al-input></div>
+                <div class="al-ai-wrapper__ai-actions"><al-button *ngIf="showApplyButton" [buttonType]="'icon-label'"
+                    [color]="'gradient'" [outline]="false" [size]="'base'" [labelText]="applyLabel"
+                    [disabled]="applyDisabled" aria-label="Apply AI"
+                    (onClick)="onApplyClick()"></al-button><al-icon-button *ngIf="showChevronButton"
+                    icon="chevron_right" [iconOutlined]="true" [customColour]="'#ffffff'" [size]="'xl'"
+                    [disabled]="applyDisabled" (onClick)="onChevronClick()"
+                    [dataTestId]="'icon-btn_Uwofs4q_3kWU'"></al-icon-button></div>
+              </div>
+              <div class="al-ai-wrapper__helper-text" *ngIf="showHelperText">
+                {{ helperText }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>