@allsorter/ui-components 0.0.370 → 0.0.374

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

@@ -0,0 +1,371 @@
+@import "../styles/colors.scss";
+@import "../styles/border-radius.scss";
+@import "../styles/spacing.scss";
+
+.al-ai-wrapper {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  height: 400px;
+  overflow: hidden;
+  padding: 32px;
+
+  &__center {
+    position: relative;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__close-button-wrapper {
+    position: absolute;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.5s ease;
+    pointer-events: none;
+
+    ::ng-deep al-button {
+      pointer-events: auto;
+
+      ::ng-deep button {
+        transition: all 0.5s ease;
+
+        &:hover {
+          transform: scale(1.05);
+        }
+
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+
+    //     &.is-ai-mode {
+    //       ::ng-deep al-button {
+    //         ::ng-deep button {
+    //           // background: transparent !important;
+    //  // border-color: rgba(255, 255, 255, 0.05) !important;
+    //  // color: rgba(255, 255, 255, 0.2) !important;
+    //         }
+    //       }
+    //     }
+  }
+
+  &__hand-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 40px;
+    height: 40px;
+    transform-origin: 50% 50%; // Center of the clock center (pivot point)
+    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
+    transform: rotate(0deg);
+    will-change: transform;
+    z-index: 1;
+
+    &.is-ai-mode {
+      transform: rotate(90deg);
+    }
+  }
+
+  &__gap {
+    position: absolute;
+    top: 52px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 48px; // Match toolbar width
+  }
+
+  &__toolbar {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: rgba(113, 119, 147, 0.8);
+    backdrop-filter: blur(2px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+    transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1), padding 0.7s cubic-bezier(0.4, 0, 0.2, 1);
+    border-radius: 8px;
+    overflow: hidden; // Keep content contained during animation
+
+    width: 48px;
+
+
+    &.is-ai-mode {
+      height: auto;
+      min-height: 392px;
+      width: 80px;
+      padding: 8px;
+      overflow: visible; // Allow helper text to be visible
+      // When helper text is shown, we need more height
+      // 440px (base) + 24px (helper text + gap) = 464px
+      max-height: 392px;
+
+      &.no-helper-text {
+        width: 58px;
+      }
+    }
+  }
+
+  &__content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transform-origin: center center;
+    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
+    transform: translateY(0) rotate(0deg);
+    position: relative;
+    will-change: transform;
+    width: 48px;
+
+    &.is-ai-mode {
+      // After -90deg rotation, the horizontal-ai width becomes height
+      // We need 440px width to become 440px height after rotation
+      // Height needs to accommodate: 56px (row) + 8px (gap) + 16px (helper text if shown) = 80px max
+      width: 370px;
+      height: auto;
+      min-height: 56px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-left: -185px; // Half of 440px width
+      // Center vertically and rotate: translate first, then rotate
+      transform: translateY(-50%) rotate(-90deg);
+      transform-origin: center center;
+    }
+  }
+
+  &__vertical-tools {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    width: 100%;
+    padding: 12px 8px;
+    gap: 8px;
+    animation: fadeInZoom 0.5s ease-out;
+  }
+
+  &__horizontal-ai {
+    width: 370px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    transform-origin: right center;
+    padding-bottom: 0;
+    animation: aiBarExpand 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
+    flex-shrink: 0;
+  }
+
+  &__ai-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    // height: 56px;
+    opacity: 0;
+    animation: aiBarContentFade 0.3s ease-out 0.2s forwards;
+  }
+
+  &__ai-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    mat-icon {
+      font-size: 18px;
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+      color: white;
+    }
+  }
+
+  &__input-container {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+
+    /* Stretch inner input and normalize height to 40px */
+    ::ng-deep al-input {
+      width: 100%;
+    }
+
+    ::ng-deep .al-input-size-base .mat-mdc-form-field-infix {
+      min-height: 40px !important;
+    }
+
+    ::ng-deep .al-input-field .mat-mdc-text-field-wrapper {
+      height: 40px;
+    }
+
+    /* Style mat-form-field */
+    ::ng-deep .mat-mdc-form-field {
+      background: #fff;
+      border-radius: $radius-8;
+      border: 0 !important;
+      overflow: hidden;
+    }
+
+    /* Ensure all parts of the notched outline have consistent border-radius */
+    ::ng-deep .al-input-field .mdc-notched-outline {
+      border-radius: $radius-8 !important;
+    }
+
+    ::ng-deep .al-input-field .mdc-notched-outline__leading {
+      border-top-left-radius: $radius-8 !important;
+      border-bottom-left-radius: $radius-8 !important;
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+    }
+
+    ::ng-deep .al-input-field .mdc-notched-outline__trailing {
+      border-top-right-radius: $radius-8 !important;
+      border-bottom-right-radius: $radius-8 !important;
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+    }
+
+    ::ng-deep .al-input-field .mdc-notched-outline__notch {
+      border-radius: 0 !important;
+    }
+
+    /* Ensure placeholder is visible in mat-select */
+    ::ng-deep .mat-mdc-select-placeholder {
+      color: $color-grey-700 !important;
+      opacity: 1 !important;
+    }
+
+    ::ng-deep .mat-mdc-select-value-text {
+      color: $color-grey-700 !important;
+    }
+
+    /* Styles for searchfilter autocomplete input */
+    ::ng-deep input[matInput] {
+      color: $color-grey-700 !important;
+    }
+
+    ::ng-deep input[matInput]::placeholder {
+      color: $color-grey-700 !important;
+      opacity: 1 !important;
+    }
+
+    /* Hide the label when labelText is empty */
+    ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label {
+      display: none !important;
+    }
+
+    /* Ensure no label spacing when labelText is empty */
+    ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix {
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
+    }
+  }
+
+  &__ai-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+
+  &__action-button {
+    padding: 8px;
+    color: rgba(255, 255, 255, 0.4);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: color 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+
+    &:hover {
+      color: rgba(255, 255, 255, 1);
+    }
+
+    mat-icon {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+    }
+  }
+
+  &__helper-text {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 12px;
+    line-height: 16px;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    flex-shrink: 0;
+    margin-top: 0;
+  }
+}
+
+@keyframes fadeInZoom {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes aiBarExpand {
+  0% {
+    opacity: 0;
+    transform: translateX(16px) scaleX(0.2);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translateX(2px) scaleX(1.02);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0) scaleX(1);
+  }
+}
+
+@keyframes aiBarContentFade {
+  from {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Hide down arrow in mat-mdc-select for all selects inside ai-wrapper */
+:host ::ng-deep .mat-mdc-select-arrow {
+  display: none !important;
+}

package/src/lib/candidate-section/candidate-section.component.scss

@@ -14,6 +14,16 @@
   flex: 1 1 0;
 }
 
+.value-text,
+.placeholder-text {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  line-height: normal !important;
+  position: relative;
+  top: 2px;
+}
+
 .columns-wrapper .first-column {
   display: flex;
   flex-direction: column;
@@ -152,3 +162,18 @@
     order: 2;
   }
 }
+
+::ng-deep .typo-description {
+  color: var(--Greys-700, #4B4F62);
+  font-family: "Roboto", sans-serif !important;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.4;
+  letter-spacing: 0.035px;
+  min-height: 28px !important;
+  display: flex !important;
+  top: 2px !important;
+  position: relative !important;
+  align-items: center !important;
+}

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

@@ -347,6 +347,7 @@
   border-top: 0;
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
+  max-height: 60vh;
 
   &:focus {
     background-color: #F7F9FE;
@@ -438,4 +439,4 @@
 .mat-select-panel {
   width: fit-content !important;
   min-width: fit-content !important;
-}
+}

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

@@ -1,12 +1,24 @@
 <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]="'auto_fix_high'" [arialabel]="'Edit'" [size]="'base'" [category]="'gradient'"
-      (onClick)="leftButtonClick.emit($event)"></al-button></div>
+  <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 *ngIf="isLeftButtonActive"
+         class="left-button-container"
+         [ngClass]="leftContainerClass"
+         [ngStyle]="leftContainerStyle">
+      <ng-content select="[leftButtonContent]"></ng-content>
+    </div>
+  </div>
   <div class="inner"><ng-content></ng-content></div>
   <div class="fab-group right" #buttonGroup><al-button *ngIf="showSaveButton" class="fab" [buttonType]="'icon-circle'"
-      [iconOnly]="true" [leftIcon]="'save'" [arialabel]="'Save'" [size]="'base'"
-      [category]="'green'" (onClick)="saveButtonClick.emit($event)"></al-button><al-button *ngIf="showDeleteButton" class="fab warn" [buttonType]="'icon-circle'"
-      [iconOnly]="true" [leftIcon]="'close'" [arialabel]="'Delete'" [size]="'base'" [category]="'error'"
+      [iconOnly]="true" [leftIcon]="'save'" [arialabel]="'Save'" [size]="'base'"  iconOutlined="true"
+      [color]="'green'" (onClick)="saveButtonClick.emit($event)"></al-button><al-button *ngIf="showDeleteButton" class="fab warn" [buttonType]="'icon-circle'"
+      [iconOnly]="true" [leftIcon]="'close'" [arialabel]="'Delete'" [size]="'base'" [color]="'error'" iconOutlined="true"
       (onClick)="deleteButtonClick.emit($event)"></al-button>
   </div>
-</div>
+</div>

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

@@ -51,6 +51,9 @@
   box-sizing: border-box;
   overflow: visible;
   /* allow FABs to hang slightly without clipping */
+  /* Enable container queries for responsive layout based on container size */
+  container-type: inline-size;
+  container-name: form-wrapper;
 }
 
 /* Subtle outer rounded border (like a frame) */
@@ -194,12 +197,20 @@ select.al-form__control {
   /* intended design: slightly outside the inner frame */
   top: 0;
   /* Changed from top: 50% to top: 0, transform will be handled by JS */
-  z-index: 2;
+  z-index: 10;
   background-color: #fff;
   border-radius: 50%;
   will-change: transform;
   /* Optimize for smooth scrolling */
   transition: transform 0.1s ease-out;
+
+  .left-button-container {
+    position: absolute;
+    left: 56px;
+    top: 0;
+    z-index: 1;
+    pointer-events: auto;
+  }
 }
 
 .fab-group.right {

package/src/lib/experience-section/experience-section.component.html

@@ -1,8 +1,8 @@
 <al-responsive-columns [gap]="gap" [padding]="padding" [leftWidth]="leftWidth" [rightWidth]="rightWidth"
   [stackAt]="stackAt">
-  <div left><app-toolbar-left [variant]="variant" [content]="content"
+  <div left><toolbar-left [variant]="variant" [content]="content"
       [isExtractionAnalysisActive]="isExtractionAnalysisActive" [showSearch]="showSearch"
-      [overrideConfig]="overrideConfig" (editEvent)="onEditEvent($event)"></app-toolbar-left></div>
+      [overrideConfig]="overrideConfig" (editEvent)="onEditEvent($event)"></toolbar-left></div>
   <div center><al-resume-entries [entries]="entries" [showHeader]="showHeader"
       [showDescriptionLabel]="showDescriptionLabel" [showCompany]="showCompany" [showJobTitle]="showJobTitle"
       [showDates]="showDates" [showLocation]="showLocation" [showTimeline]="showTimeline"
@@ -12,9 +12,9 @@
       [descriptionTooltip]="descriptionTooltip" [tooltipPosition]="tooltipPosition" [isSectionHidden]="isSectionHidden"
       (reapplyClick)="onReapplyClick($event)" (undoClick)="onUndoClick($event)"></al-resume-entries>
   </div>
-  <div right><app-toolbar-right [checked]="checked" [alwaysShowIcons]="alwaysShowIcons"
+  <div right><toolbar-right [checked]="checked" [alwaysShowIcons]="alwaysShowIcons"
       [overrideConfig]="overrideConfigRight" [currentObj]="currentObj" (checkboxChange)="onCheckboxChange($event)"
       (visibilityToggle)="onVisibilityToggle($event)" (hideShowEvent)="onHideShowEvent($event)"
-      (checkboxEvent)="onCheckboxEvent($event)" (setSubroleEvent)="onSetSubroleEvent($event)"></app-toolbar-right>
+      (checkboxEvent)="onCheckboxEvent($event)" (setSubroleEvent)="onSetSubroleEvent($event)"></toolbar-right>
   </div>
 </al-responsive-columns>

package/src/lib/field-placeholder/field-placeholder.component.html

@@ -10,8 +10,8 @@
     </span>
   </ng-container>
   <span [matTooltip]="tooltip" [matTooltipPosition]="tooltipPosition"
-    [ngClass]="value ? ['value-text', valueClass] : ['placeholder-text', placeholderClass]"
-    [attr.data-test-id]="testId">
-    <span [innerHTML]="value ? value : placeholder"></span>
+    [ngClass]="value ? ['value-text', valueClass] : ['placeholder-text', placeholderClass]" [attr.data-test-id]="testId"
+    [innerHTML]="value ? value : placeholder">
   </span>
+
 </div>

package/src/lib/field-placeholder/field-placeholder.component.scss

@@ -11,6 +11,19 @@
 
 
 
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+/* Material Icons */
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
+
+/* Make all typography utility classes available inside this component */
+@import '../styles/typography-classes.scss';
+
+
+
 .placeholder-text {
   padding: 4px 8px;
   letter-spacing: 0.25px;
@@ -20,63 +33,11 @@
   font-family: 'Open Sans', Arial, sans-serif;
   font-size: 14px;
   font-weight: 400;
-  line-height: 18px;
+  line-height: 20px;
   color: #768FED;
 }
 
-// Default typography on host so inner content can inherit,
-// and external classes on <lib-field-placeholder> can override.
-// :host {
-//   color: var(--Greys-700, #4B4F62);
-//   font-family: var(--Body-Medium-Font, Roboto);
-//   font-size: 14px;
-//   font-style: normal;
-//   font-weight: 400;
-//   line-height: 20px;
-//   letter-spacing: 0.25px;
-// }
-
-// .value-text {
-//   // Don't set any hard values - let the classes from new-typography.scss apply
-//   color: inherit;
-//   font-family: inherit;
-//   font-size: inherit;
-//   font-style: inherit;
-//   font-weight: inherit;
-//   line-height: inherit;
-//   letter-spacing: inherit;
-
-//   // Ensure the new typography classes can override
-//   &.font-text-5xl,
-//   &.font-text-5xl-medium,
-//   &.font-text-5xl-bold,
-//   &.font-text-4xl,
-//   &.font-text-4xl-medium,
-//   &.font-text-4xl-bold,
-//   &.font-text-3xl,
-//   &.font-text-3xl-medium,
-//   &.font-text-3xl-bold,
-//   &.font-text-2xl,
-//   &.font-text-2xl-medium,
-//   &.font-text-2xl-bold,
-//   &.font-text-xl,
-//   &.font-text-xl-medium,
-//   &.font-text-xl-bold,
-//   &.font-text-lg,
-//   &.font-text-lg-medium,
-//   &.font-text-lg-bold,
-//   &.font-text-base,
-//   &.font-text-base-medium,
-//   &.font-text-base-bold,
-//   &.font-text-sm,
-//   &.font-text-sm-medium,
-//   &.font-text-sm-bold,
-//   &.font-text-xs,
-//   &.font-text-xs-medium,
-//   &.font-text-xs-bold {
-//     // Classes now have higher specificity to override host styles
-//   }
-// }
+
 
 .field-row {
   display: flex;
@@ -85,13 +46,10 @@
 }
 
 .field-row-compact {
-  leading-trim: both;
-  text-edge: cap;
   font-style: normal;
   line-height: 140%;
   letter-spacing: 0.04px;
   height: 28px;
-  // padding: 8px 0;
 }
 
 .field-row-padded {
@@ -105,6 +63,7 @@
   justify-content: center;
 }
 
+.field-icon,
 .field-icon img,
 .field-icon mat-icon {
   width: 20px;
@@ -112,8 +71,8 @@
   object-fit: contain;
   font-size: 20px;
   line-height: 20px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
   color: #37C1CE;
-}
+}

package/src/lib/input/input.component.html

@@ -1,5 +1,5 @@
 <!-- Standard floating label layout for all inputs including date picker -->
-<mat-form-field appearance="outline" class="al-input-field" [ngClass]="[
+<mat-form-field #formField appearance="outline" class="al-input-field" [ngClass]="[
     helperText ? 'has-helper-text' : '',
     getSizeClass(),
     getCategoryClass(),

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

@@ -467,19 +467,19 @@ mat-icon[matSuffix] {
 /* ===== FLOATING LABEL POSITIONING ===== */
 
 ::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
-  top: 11px !important;
+  top: 10px !important;
 }
 
 ::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
-  top: 10px !important;
+  top: 11px !important;
 }
 
 ::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
-  top: 14px !important;
+  top: 15px !important;
 }
 
 ::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
-  top: 7px !important;
+  top: 8px !important;
 }
 
 ::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {