@allsorter/ui-components 0.0.367 → 0.0.370

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

@@ -0,0 +1,341 @@
+@import "../styles/typography-classes.scss";
+@import "../styles/colors.scss";
+@import "../styles/border-radius.scss";
+
+.resume-entries-container {
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  background-color: white;
+}
+
+.resume-entry {
+  display: flex;
+  flex-direction: column;
+  // gap: 16px;
+  width: 100%;
+  position: relative;
+  cursor: pointer;
+
+  &.is-hidden {
+    opacity: 0.3;
+
+    .description-item {
+      ::ng-deep .value-text {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  &.with-timeline {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 12px;
+    position: relative;
+
+    .entry-separator {
+      flex-basis: 100%;
+      order: 10;
+    }
+
+    // Ensure timeline doesn't overlap with checkbox in right column
+    .timeline-indicator {
+      z-index: 0;
+    }
+
+    .resume-entry-content {
+      flex: 1;
+      min-width: 0; // Prevent content from overflowing
+    }
+  }
+}
+
+.resume-entry-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  gap: 12px;
+  padding-top: 4px;
+}
+
+.timeline-indicator {
+  display: flex;
+  padding: 12px 0 0 8px;
+  flex-direction: column;
+  align-items: center;
+  align-self: stretch;
+  position: relative;
+  flex-shrink: 0;
+  width: 20px;
+  min-width: 20px;
+  max-width: 20px;
+}
+
+.timeline-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #BBC7F6;
+  z-index: 1;
+  flex-shrink: 0;
+}
+
+.timeline-line {
+  width: 2px;
+  flex: 1;
+  background-color: #BBC7F6;
+  min-height: calc(100% - 14px);
+}
+
+.resume-entry:last-child .timeline-line {
+  display: none;
+}
+
+.entry-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 24px;
+
+}
+
+.header-left {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+}
+
+.header-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  max-width: 30%;
+}
+
+@media (max-width: 767px) {
+  .entry-header {
+    flex-direction: column;
+    gap: 12px;
+    display: flex;
+  }
+
+  // Use display: contents to make children of header-left and header-right
+  // participate directly in entry-header flex container for reordering
+  .header-left,
+  .header-right {
+    display: contents;
+  }
+
+  // Reorder elements for mobile: Date (1) -> Company (2) -> Job Title (3) -> Location (4)
+  .entry-header {
+
+    // Date comes first
+    .mobile-order-1 {
+      order: 1;
+    }
+
+    // Company comes second
+    .mobile-order-2 {
+      order: 2;
+    }
+
+    // Job title comes third
+    .mobile-order-3 {
+      order: 3;
+    }
+
+    // Location comes fourth
+    .mobile-order-4 {
+      order: 4;
+    }
+  }
+
+  // Ensure the ordered elements maintain their styling and layout
+  .mobile-order-1,
+  .mobile-order-2,
+  .mobile-order-3,
+  .mobile-order-4 {
+    width: 100%;
+  }
+
+  .date-range {
+    align-items: flex-start;
+  }
+
+  .location-row {
+    align-items: flex-start;
+  }
+}
+
+.date-range {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+.location-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+
+.date-separator {
+  color: #666;
+  font-weight: 500;
+  font-size: 16px;
+}
+
+.date-icon {
+  color: #94A3B8;
+  font-size: 14px;
+  margin-left: 4px;
+}
+
+.descriptions-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.description-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  ::ng-deep .value-text {
+    color: $color-grey-600;
+  }
+}
+
+.description-label {
+  color: #A2A6B8;
+  font-family: 'Roboto', sans-serif;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.06px;
+  padding-top: 4px;
+  line-height: 10px;
+
+}
+
+.content-right {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.resume-entry-projection {
+  display: block;
+  width: 100%;
+}
+
+.reapply-button-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.loader-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24px 0;
+  min-height: 80px;
+}
+
+.entry-loader-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+}
+
+.entry-separator {
+  border: none;
+  border-top: 1px solid #E5E9FC;
+  margin-top: 0;
+  margin-bottom: 0;
+  width: 100%;
+  height: 0;
+  display: block;
+  clear: both;
+  flex-shrink: 0;
+}
+
+// Skill Section Styles
+.skill-section-common {
+  padding: 8px 0 20px;
+
+  .ai_skill_summary {
+    margin-top: 8px;
+  }
+
+  .list-items {
+    font-weight: 400;
+    font-size: 15px;
+    font-style: normal;
+    letter-spacing: 0.15px;
+    font-family: Roboto, sans-serif;
+    color: #717793;
+  }
+
+  p,
+  .suggestion-container {
+    margin: 12px 0;
+  }
+
+  p.skill-list-items {
+    width: 100%;
+  }
+
+  .skill-list-items ul {
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .skill-list-items ul li {
+    margin-left: 24px;
+    margin-right: 24px;
+    height: 24px;
+    text-align: left;
+    max-width: 200px;
+    min-width: 200px;
+    overflow-y: clip;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .skill-list-items table {
+    p {
+      margin: 0 !important;
+    }
+
+    ul {
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+
+      li {
+        margin-left: 24px;
+        text-align: left;
+        max-width: 100%;
+        white-space: break-spaces !important;
+        word-break: break-word;
+      }
+    }
+  }
+}

package/src/lib/resume-header/resume-header.component.html

@@ -0,0 +1,167 @@
+<cdk-accordion class="example-accordion">
+  <cdk-accordion-item #accordionItem="cdkAccordionItem" [expanded]="true" class="example-accordion-item">
+
+    <div class="example-accordion-item-header" [ngStyle]="{ 'border-color': borderColor }">
+      <div class="left_side_header" *ngIf="!hiddenSection?.headerSectionHidden; else hiddenHeaderLayout">
+        <div [matTooltip]="accordionItem.expanded ? 'Collapse' : 'Expand'" matTooltipPosition="above">
+          <button (click)="toggleAccordion(accordionItem)" tabindex="0" class="toggle-button align-center "
+            [attr.aria-expanded]="accordionItem.expanded">
+            <span class="material-icons-outlined" *ngIf="!accordionItem.expanded">
+              expand_less
+            </span>
+            <span class="material-icons-outlined" *ngIf="accordionItem.expanded">
+              expand_more
+            </span>
+          </button>
+        </div>
+
+        <div class="edit-input-group" [style.max-width.px]="maxContainerWidth">
+          <div class="content_width" data-test-id="edu-section-title-input">
+            <div class="content_width" data-test-id="edu-section-title-input" *ngIf="!inputHandlers.headersLoading">
+              <input #textInputSection type="text" [ngClass]="{
+                'focusout-input-text': !inputHandlers?.isFocused,
+                'onfocus-input-text': inputHandlers?.isFocused
+              }" [(ngModel)]="inputHandlers.shownTitle" [attr.aria-label]="inputHandlers.shownTitle"
+                (focus)="focusField.emit('educationHeader')" (focusout)="blurField.emit()"
+                (keypress)="enterKeyPressed.emit($event)" (input)="adjustInputWidth($event)"
+                [style.width.px]="inputWidth" [style.max-width.%]="100"
+                [disabled]="inputHandlers?.isDisabled?.() ?? false" />
+            </div>
+          </div>
+          <span *ngIf="!inputHandlers.headersLoading" class="align-center">
+            <span class="material-symbols-outlined" [attr.alt]="inputHandlers.iconAltText || 'edit-icon'"
+              (click)="toggleEditIcon?.('educationHeader')"
+              [matTooltip]="inputHandlers.tooltipText || 'This header can be edited'"
+              [matTooltipPosition]="inputHandlers.tooltipPosition || 'above'"
+              *ngIf="inputHandlers.getFieldNotHidden('')">
+              edit
+            </span>
+          </span>
+        </div>
+      </div>
+
+      <!-- ✅ FIXED: Right side header (shows when section is NOT hidden) -->
+      <div class="right_side_header" *ngIf="!hiddenSection?.headerSectionHidden">
+        <ng-container *ngIf="isLargeScreen">
+          <al-button [labelText]="popOutButtonLabel || 'Run Deep Extraction'" [leftIcon]="popOutButtonIcon"
+            [rightIcon]="'arrow_forward'" [buttonType]="'icon-label'" [category]="'gradient'" [size]="'header'"
+            [iconOnly]="false" (onClick)="popOutButtonClick.emit()" [dataTestId]="'header-run-deep-extraction'"
+            [title]="popOutButtonLabel || 'Run Deep Extraction'" [matTooltip]="popOutButtonTooltip"
+            [matTooltipPosition]="popOutButtonTooltipPosition">
+          </al-button>
+          <ng-container class="button-margin"
+            *ngTemplateOutlet="headerButtonsTemplate; context: { buttons: buttonConfig }">
+          </ng-container>
+        </ng-container>
+
+        <div class="hover-menu-container" *ngIf="!isLargeScreen">
+          <div class="menu-trigger" (click)="toggleMenu()">
+            <al-button buttonType="icon-label" iconOnly size="header" category="grey" leftIcon="more_vert"
+              aria-label="More options" [dataTestId]="'resume-header-more-menu'">
+            </al-button>
+          </div>
+          <div class="slide-out-panel" [class.visible]="isMenuVisible">
+            <div class="fit-panel">
+              <al-button [labelText]="popOutButtonLabel || 'Run Deep Extraction'" [leftIcon]="popOutButtonIcon"
+                [rightIcon]="'arrow_forward'" [buttonType]="'icon-label'" [category]="'gradient'" [size]="'header'"
+                [iconOnly]="false" (onClick)="popOutButtonClick.emit()" [dataTestId]="'header-run-deep-extraction'"
+                [title]="popOutButtonLabel || ' Deep Extraction'" [matTooltip]="popOutButtonTooltip"
+                [matTooltipPosition]="popOutButtonTooltipPosition">
+              </al-button>
+              <ng-container *ngTemplateOutlet="headerButtonsTemplate; context: { buttons: buttonConfig }">
+              </ng-container>
+            </div>
+          </div>
+        </div>
+
+        <!-- ✅ FIXED: Eye icon for hiding section -->
+        <ng-container *ngIf="!hiddenSection?.headerSectionHidden">
+          <ng-container *ngFor="let eyeConfig of configEyeToggle">
+            <ng-container
+              *ngTemplateOutlet="eyeIconTemplate; context: { isHidden: false, accordionItem: accordionItem, configEyeToggle: eyeConfig }"></ng-container>
+          </ng-container>
+        </ng-container>
+
+        <div *ngIf="checkboxConfig?.sectionItems?.length" class="mat-checkbox-margin">
+          <al-checkbox [checked]="checked" [disabled]="disabled || checkboxConfig?.disabled ?? false"
+            [tooltip]="checkboxConfig?.tooltipText || 'Select All'"
+            [tooltipPosition]="checkboxConfig.tooltipPosition || 'above'"
+            [dataTestId]="'edu-section-select-all-checkbox'" [showLabels]="false"
+            (change)="checkedCheckBoxChange.emit($event)">
+          </al-checkbox>
+        </div>
+      </div>
+
+      <!-- ✅ FIXED: Hidden header layout (shows when section IS hidden) -->
+      <ng-template #hiddenHeaderLayout>
+        <div class="hide-header">
+          <span class="header-text-turncate">{{ inputHandlers?.shownTitle }}</span>
+          <div class="hidden-write">Section hidden</div>
+
+          <!-- ✅ FIXED: Eye icon for showing section -->
+          <ng-container *ngIf="hiddenSection?.headerSectionHidden">
+            <ng-container *ngFor="let eyeConfig of configEyeToggle">
+              <ng-container *ngIf="!eyeConfig['onClick']">
+                <ng-container
+                  *ngTemplateOutlet="eyeIconTemplate; context: { isHidden: true, accordionItem: accordionItem, configEyeToggle: eyeConfig }"></ng-container>
+              </ng-container>
+            </ng-container>
+          </ng-container>
+        </div>
+      </ng-template>
+    </div>
+
+    <!-- Pop-out Panel -->
+    <div *ngIf="showPopOut" class="pop-out-panel">
+      <div class="pop-out-content">
+        <al-button [labelText]="popOutButtonLabel || 'Run Deep Extraction'" [leftIcon]="popOutButtonIcon"
+          [rightIcon]="'arrow_forward'" [buttonType]="'icon-label'" [category]="'gradient'" [size]="'xs'"
+          [iconOnly]="false" (onClick)="popOutButtonClick.emit()" [dataTestId]="'pop-out-run-deep-extraction'"
+          [title]="popOutButtonLabel || 'Run Deep Extraction'">
+        </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>
+      </div>
+    </div>
+
+    <!-- ✅ FIXED: Accordion body (only shows when expanded AND not hidden) -->
+    <div *ngIf="accordionItem.expanded && !hiddenSection?.headerSectionHidden" class="example-accordion-item-body"
+      role="region">
+      Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Perferendis excepturi incidunt ipsum
+      deleniti labore, tempore non nam doloribus blanditiis veritatis illo autem iure aliquid ullam
+      rem tenetur deserunt velit culpa?
+    </div>
+
+  </cdk-accordion-item>
+</cdk-accordion>
+
+<!-- Header Buttons Template -->
+<ng-template #headerButtonsTemplate let-buttons="buttons" let-handleClick="handleClick">
+  <ng-container *ngFor="let btn of buttonConfig">
+    <al-button *ngIf="!btn.hidden && (!btn.displayCondition || btn.displayCondition())" [category]="btn.category"
+      [buttonType]="btn.buttonType" [labelText]="btn.label" [leftIcon]="btn.leftIcon" [rightIcon]="btn.rightIcon"
+      [state]="btn.state" [size]="btn.size" [outlined]="btn.outlined" [iconOnly]="btn.iconOnly"
+      [dropdownOptions]="btn.buttonType === 'dropdown' ? btn.dropdownOptions : null"
+      (optionSelect)="onDropdownSelect(btn, $event)" (onClick)="onButtonClick(btn)" [attr.alt]="btn.alt"
+      [dataTestId]="btn.testId" [matTooltip]="btn.tooltipText" [matTooltipPosition]="btn.tooltipPosition || 'above'">
+    </al-button>
+  </ng-container>
+</ng-template>
+
+<!-- ✅ FIXED: Eye Icon Template with proper click handler -->
+<ng-template #eyeIconTemplate let-isHidden="isHidden" let-accordionItem="accordionItem"
+  let-configEyeToggle="configEyeToggle">
+  <div *ngIf="configEyeToggle" class="mat-checkbox-margin align-center"
+    [attr.data-test-id]="isHidden ? 'edu-section-show-eye-div' : 'edu-section-hide-eye-div'">
+    <span class="material-symbols-outlined delete-multiple mat-fab.mat-accent"
+      [matTooltip]="configEyeToggle.tooltips[isHidden ? 'collapse' : 'expand']"
+      [matTooltipPosition]="configEyeToggle.tooltips.position"
+      [attr.aria-label]="configEyeToggle.ariaLabels[isHidden ? 'collapsed' : 'expanded']"
+      (click)="showHideToggleSection.emit({ isHidden: isHidden, accordionItem: accordionItem, config: configEyeToggle })"
+      [attr.data-test-id]="isHidden ? 'edu-section-show-eye-icon' : 'edu-section-show-hide-eye-icon'">
+      {{ isHidden ? 'visibility' : 'visibility_off' }}
+    </span>
+  </div>
+</ng-template>

package/src/lib/shared-popup-modal/shared-popup-modal.component.html

@@ -0,0 +1,99 @@
+<div class="modal-container">
+  <!-- Feedback Modal Type - Success, Warning, or Error -->
+  <div *ngIf="modalType === 'feedback'" class="modal-body">
+    <div mat-dialog-content>
+      <div style="display:flex;flex-direction:column;align-items:center;gap:24px;padding-top:8px;">
+        <!-- Feedback Icon (hardcoded by variant, optional single override via feedbackIcon) -->
+        <mat-icon *ngIf="feedbackIcon" class="feedback-icon" [ngClass]="{
+            'success': feedbackVariant === 'success',
+            'warning': feedbackVariant === 'warning',
+            'error': feedbackVariant === 'error'
+          }">{{ feedbackIcon }}</mat-icon>
+        <img *ngIf="!feedbackIcon && feedbackVariant === 'success'" [src]="getSuccessIconPath()" alt="Success"
+          class="feedback-icon success feedback-icon-image" />
+        <img *ngIf="!feedbackIcon && feedbackVariant === 'warning'" [src]="getWarningIconPath()" alt="Warning"
+          class="feedback-icon warning feedback-icon-image" />
+        <img *ngIf="!feedbackIcon && feedbackVariant === 'error'" [src]="getErrorIconPath()" alt="Error"
+          class="feedback-icon error feedback-icon-image" />
+
+        <div style="color:#4b4f62;font-weight:500;">{{ userMessage || getDefaultMessage() }}</div>
+      </div>
+    </div>
+
+    <div *ngIf="showFooter" mat-dialog-actions class="modal-actions"
+      [style.justify-content]="buttonAlignment === 'left' ? 'flex-start' : buttonAlignment === 'right' ? 'flex-end' : 'center'">
+      <al-button *ngIf="showSubmitAction" [category]="submitCategory" [size]="buttonSize" [iconOutlined]="false"
+        [labelText]="submitLabel || 'Ok'" [leftIcon]="submitIcon" [rightIcon]="''" [dataTestId]="'submit-btn'"
+        [hasDropDown]="false" [dropdownItems]="[]" (onClick)="onSubmit()"></al-button>
+    </div>
+  </div>
+
+  <!-- Regular Modal for Generic Type -->
+  <div *ngIf="modalType !== 'feedback'">
+    <!-- Default Header -->
+    <h2 *ngIf="!useCustomHeader && showHeader" mat-dialog-title class="modal-title">
+      <span class="title-content">
+        <mat-icon *ngIf="leftIcon" class="title-icon">{{ leftIcon }}</mat-icon>
+        {{ titleText }}
+        <mat-icon *ngIf="rightIcon" class="title-icon">{{ rightIcon }}</mat-icon>
+      </span>
+      <al-icon-button *ngIf="closeIcon" [icon]="'close'" [iconOutlined]="false" [customColour]="'#ffffff'"
+        [colour]="'blue'" [size]="'base'" [disabled]="false" (onClick)="onClose()"
+        [dataTestId]="'close-btn'"></al-icon-button>
+    </h2>
+
+    <!-- Custom Header -->
+    <div *ngIf="useCustomHeader && showHeader" class="custom-header">
+      <!-- Left side content -->
+      <div class="custom-header-left">
+        <!-- Icon and Title -->
+        <div class="custom-header-title-section">
+          <div *ngIf="customHeaderIcon" class="custom-header-icon">
+            <mat-icon>{{ customHeaderIcon }}</mat-icon>
+          </div>
+          <h2 class="custom-header-title">{{ customHeaderTitle }}</h2>
+        </div>
+
+        <!-- Description paragraph -->
+        <p class="custom-header-description">{{ customHeaderDescription }}</p>
+
+        <!-- Templating guide link/text -->
+        <span class="templating-guide-prefix">{{ templatingGuidePrefix }}</span>
+        <a class="templating-guide-link" [href]="templatingGuideHref">{{ templatingGuideLabel }}</a>
+        <span class="templating-guide-suffix">.</span>
+      </div>
+
+      <!-- Right side content -->
+      <div class="custom-header-right">
+        <!-- Close button -->
+        <al-icon-button *ngIf="closeIcon" class="custom-close" [icon]="'close'" [iconOutlined]="false"
+          [customColour]="'#ffffff'" [colour]="'blue'" [size]="'base'" [disabled]="false" (onClick)="onClose()"
+          [dataTestId]="'close-btn'"></al-icon-button>
+
+        <!-- Action button -->
+        <al-button [category]="submitCategory" [size]="'xs'" [iconOutlined]="false" [labelText]="customActionLabel"
+          [leftIcon]="customActionIcon" [rightIcon]="customActionRightIcon" [dataTestId]="'custom-action-btn'"
+          [hasDropDown]="false" [dropdownItems]="[]" (onClick)="onRequestTemplate()"></al-button>
+      </div>
+    </div>
+
+    <div class="modal-body">
+      <div mat-dialog-content>
+        <p *ngIf="userMessage && !hasProjectedContent" class="modal-message" [style.text-align]="messageAlignment">{{
+          userMessage }}</p>
+        <ng-content></ng-content>
+      </div>
+
+      <div *ngIf="showFooter" mat-dialog-actions class="modal-actions"
+        [style.justify-content]="buttonAlignment === 'left' ? 'flex-start' : buttonAlignment === 'right' ? 'flex-end' : 'center'">
+        <al-button *ngIf="showCancelAction" [category]="cancelCategory" [size]="buttonSize" [iconOutlined]="false"
+          [labelText]="cancelLabel" [leftIcon]="cancelIcon" [rightIcon]="''" [dataTestId]="'cancel-btn'"
+          [hasDropDown]="false" [dropdownItems]="[]" (onClick)="onCancel()"></al-button>
+
+        <al-button *ngIf="showSubmitAction" [category]="submitCategory" [size]="buttonSize" [iconOutlined]="false"
+          [labelText]="submitLabel" [leftIcon]="submitIcon" [rightIcon]="''" [dataTestId]="'submit-btn'"
+          [hasDropDown]="false" [dropdownItems]="[]" (onClick)="onSubmit()"></al-button>
+      </div>
+    </div>
+  </div>
+</div>