@allsorter/ui-components 0.0.367 → 0.0.370

package/src/lib/radio/radio.component.html

@@ -0,0 +1,23 @@
+<mat-radio-button [value]="value" [name]="name" [checked]="checked" [disabled]="disabled" [color]="color"
+  [labelPosition]="labelPosition" [required]="required" [attr.data-testid]="dataTestId" [ngClass]="getColorClass()"
+  [matTooltip]="tooltip" [matTooltipPosition]="tooltipPosition" [matTooltipDisabled]="!tooltip"
+  (change)="handleChange($event)" (focus)="handleFocus($event)" (blur)="handleBlur($event)">
+  <div class="radio-label-wrapper" *ngIf="showLabels">
+    <div class="radio-label-main-row" *ngIf="labelText">
+      <div class="radio-label-main">
+        {{ labelText }}
+      </div>
+      <button *ngIf="showHelperIcon" type="button" class="radio-helper-icon"
+        [matTooltip]="helperIconTooltip || helperText" [matTooltipPosition]="tooltipPosition" [disabled]="disabled"
+        (click)="onHelperIconClick($event)">
+        ?
+      </button>
+    </div>
+
+    <div *ngIf="helperText" class="radio-label-helper">
+      {{ helperText }}
+    </div>
+  </div>
+
+  <ng-content></ng-content>
+</mat-radio-button>

package/src/lib/radio/radio.component.scss

@@ -0,0 +1,253 @@
+@import '../styles/colors.scss';
+@import '../styles/typography-classes.scss';
+/* ============================================
+   RADIO BUTTON COMPONENT STYLES
+   ============================================ */
+
+/* ============================================
+   CUSTOM COLOR THEMES
+   ============================================ */
+
+/* Default/Primary Color (Blue) */
+::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle {
+  border-color: $color-blue-500 !important;
+}
+
+::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle {
+  border-color: $color-blue-500 !important;
+}
+
+::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__ripple {
+  background-color: $color-blue-500 !important;
+}
+
+/* Primary Theme (Blue) */
+::ng-deep .mat-mdc-radio-button.mat-primary.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle {
+  border-color: $color-blue-500 !important;
+}
+
+::ng-deep .mat-mdc-radio-button.mat-primary.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle {
+  border-color: $color-blue-500 !important;
+}
+
+/* Green Theme */
+::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle {
+  border-color: $color-green-500 !important;
+}
+
+::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle {
+  border-color: $color-green-500 !important;
+}
+
+/* Green Theme Ripple Effect */
+::ng-deep .mat-mdc-radio-button.mat-green .mdc-radio__ripple {
+  background-color: rgba($color-green-500, 0.8) !important;
+}
+
+/* Green Theme Ripple Effect - Checked and Hover */
+::ng-deep .mat-mdc-radio-button.mat-green .mdc-radio__ripple,
+::ng-deep .mat-mdc-radio-button.mat-green:hover .mdc-radio__ripple {
+  background-color: rgba($color-green-500, 0.24) !important;
+}
+
+/* Error Theme (Red) */
+::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle {
+  border-color: $color-error-500 !important;
+}
+
+::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle {
+  border-color: $color-error-500 !important;
+}
+
+/* Error Theme Ripple Effect */
+::ng-deep .mat-mdc-radio-button.mat-error .mdc-radio__ripple {
+  background-color: rgba($color-error-500, 0.12) !important;
+}
+
+/* Error Theme Ripple Effect - Checked and Hover */
+::ng-deep .mat-mdc-radio-button.mat-error .mdc-radio__ripple,
+::ng-deep .mat-mdc-radio-button.mat-error:hover .mdc-radio__ripple {
+  background-color: rgba($color-error-500, 0.24) !important;
+}
+
+/* ============================================
+   DISABLED STATE STYLING
+   ============================================ */
+
+/* Disabled - Unchecked State */
+::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .mdc-radio__background .mdc-radio__outer-circle {
+  border-color: #C3C5D1 !important;
+}
+
+::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .mdc-radio__background .mdc-radio__inner-circle {
+  border-color: #DEE0E6 !important;
+}
+
+/* Disabled - Checked State */
+::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle {
+  border-color: #DEE0E6 !important;
+}
+
+::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle {
+  border-color: #DEE0E6 !important;
+}
+
+/* ============================================
+   INTERACTIVE STATES (FOCUS & HOVER)
+   ============================================ */
+
+/* Default Focus State */
+::ng-deep .mat-mdc-radio-button .mdc-radio__ripple {
+  background-color: rgba($color-blue-500, 0.12) !important;
+}
+
+/* Hover State */
+::ng-deep .mat-mdc-radio-button:hover .mdc-radio__ripple {
+  background-color: rgba($color-blue-500, 0.24) !important;
+}
+
+
+
+
+/* ============================================
+   TYPOGRAPHY STYLING
+   ============================================ */
+
+/* Material Design Label Styling */
+::ng-deep .mat-mdc-radio-button .mdc-form-field>label {
+  @extend .font-label-large;
+  color: $color-grey-700 !important;
+}
+
+/* ============================================
+   CUSTOM LABEL COMPONENTS
+   ============================================ */
+
+/* Wrapper for label + helper text */
+.radio-label-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin-top: 12px;
+}
+
+/* Row to keep label and helper icon on the same line */
+.radio-label-main-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Main Label Styling */
+.radio-label-main {
+  @extend .font-label-large;
+  color: $color-grey-700 !important;
+}
+
+/* Helper Text Styling */
+.radio-label-helper {
+  @extend .font-label-medium;
+  color: $color-grey-500 !important;
+  margin-top: 0px !important;
+}
+
+/* Disabled Labels & Helper Text */
+::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .radio-label-main,
+::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .radio-label-helper {
+  color: $color-grey-400 !important;
+  cursor: not-allowed;
+}
+
+/* Helper icon next to label */
+.radio-helper-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 1px solid #C3C5D1;
+  background-color: #FFFFFF;
+  color: #717793;
+  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin-left: 4px;
+  cursor: pointer;
+}
+
+.radio-helper-icon:disabled {
+  border-color: #DEE0E6;
+  color: #DEE0E6;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   RADIO BUTTON RIPPLE STYLES (DARK)
+   ============================================ */
+
+/* Primary (Blue) Ripple */
+::ng-deep .mat-mdc-radio-button.mat-primary .mat-ripple-element {
+  background-color: rgba($color-blue-500, 1) !important;
+  /* full opacity */
+}
+
+/* Green Ripple */
+::ng-deep .mat-mdc-radio-button.mat-green .mat-ripple-element {
+  background-color: rgba($color-green-500, 1) !important;
+}
+
+/* Green Ripple Hover / Checked */
+::ng-deep .mat-mdc-radio-button.mat-green:hover .mat-ripple-element,
+::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mat-ripple-element {
+  background-color: rgba($color-green-500, 0.7) !important;
+}
+
+/* Error Ripple */
+::ng-deep .mat-mdc-radio-button.mat-error .mat-ripple-element {
+  background-color: rgba($color-error-500, 1) !important;
+}
+
+/* Error Ripple Hover / Checked */
+::ng-deep .mat-mdc-radio-button.mat-error:hover .mat-ripple-element,
+::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mat-ripple-element {
+  background-color: rgba($color-error-500, 0.7) !important;
+}
+
+/* ============================================
+   RADIO BUTTON RIPPLE STYLES (DARK)
+   ============================================ */
+
+/* Primary (Blue) */
+::ng-deep .mat-mdc-radio-button.mat-primary .mat-ripple-element::after {
+  background-color: rgba($color-blue-500, 1) !important;
+  /* full opacity */
+}
+
+/* Green */
+::ng-deep .mat-mdc-radio-button.mat-green .mat-ripple-element::after {
+  background-color: rgba($color-green-500, 1) !important;
+}
+
+/* Green Hover */
+::ng-deep .mat-mdc-radio-button.mat-green:hover .mat-ripple-element::after {
+  background-color: rgba($color-green-500, 0.7) !important;
+}
+
+/* Green Checked */
+::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mat-ripple-element::after {
+  background-color: rgba($color-green-500, 0.7) !important;
+}
+
+/* Error */
+::ng-deep .mat-mdc-radio-button.mat-error .mat-ripple-element::after {
+  background-color: rgba($color-error-500, 1) !important;
+}
+
+/* Error Hover */
+::ng-deep .mat-mdc-radio-button.mat-error:hover .mat-ripple-element::after {
+  background-color: rgba($color-error-500, 0.7) !important;
+}
+
+/* Error Checked */
+::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mat-ripple-element::after {
+  background-color: rgba($color-error-500, 0.7) !important;
+}

package/src/lib/responsive-columns/responsive-columns.component.html

@@ -0,0 +1,6 @@
+<div class="container">
+  <div class="column left"><ng-content select="[left],[slot=left],[data-slot=left]"></ng-content></div>
+  <div class="column center"><ng-content></ng-content><ng-content
+      select="[center],[slot=center],[data-slot=center]"></ng-content></div>
+  <div class="column right"><ng-content select="[right],[slot=right],[data-slot=right]"></ng-content></div>
+</div>

package/src/lib/responsive-columns/responsive-columns.component.scss

@@ -0,0 +1,68 @@
+:host {
+  display: block;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: var(--template-columns, var(--left-width, auto) 1fr var(--right-width, auto));
+  gap: var(--gap, 12px);
+  padding: var(--padding, 0);
+}
+
+:host(.stack) .container {
+  grid-template-columns: 1fr;
+}
+
+:host(.stack) .container .left,
+:host(.stack) .container .right {
+  order: -1;
+}
+
+.column {
+  min-width: 0;
+}
+
+.center {
+  background: var(--center-bg, transparent);
+}
+
+// Show hidden elements in left and right columns when hovering over the parent container
+.container:hover {
+  ::ng-deep .toolbar-icons {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateY(0);
+    transition: opacity 150ms ease, transform 150ms ease, visibility 0s;
+  }
+
+  ::ng-deep .toolbar-container {
+    background-color: #e5e9fc;
+  }
+
+  ::ng-deep .toolbar-right-container {
+    background-color: #e5e9fc;
+  }
+}
+
+// Show right toolbar icons when hovering over the center column
+.center:hover {
+  ::ng-deep .toolbar-right-icons {
+    visibility: visible !important;
+    opacity: 1 !important;
+    display: flex !important;
+  }
+
+  ::ng-deep .toolbar-right-container {
+    background-color: #e5e9fc;
+  }
+}
+
+// Also show when hovering over the container (for consistency)
+.container:hover {
+  ::ng-deep .toolbar-right-icons {
+    visibility: visible !important;
+    opacity: 1 !important;
+    display: flex !important;
+  }
+}

package/src/lib/responsive-layout/responsive-layout.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/src/lib/responsive-layout/responsive-layout.component.scss

@@ -0,0 +1,47 @@
+/* Responsive layout using CSS Grid and CSS variables for per-breakpoint counts.
+   Breakpoints (px):
+   - mobile:     0 - 500
+   - mobile-sm:  500 - 767
+   - tablet:     767 - 1024
+   - desktop:    1024+
+   Note: We use fractional max-widths to avoid overlap.
+*/
+:host {
+  display: grid;
+  gap: var(--gap, 8px);
+  width: 100%;
+  /* Default to desktop counts */
+  --current-count: var(--count-desktop, 4);
+}
+
+/* Row mode: define columns per breakpoint */
+:host(.row) {
+  grid-auto-flow: row;
+  grid-template-columns: repeat(var(--current-count), minmax(0, 1fr));
+  margin-bottom: var(--mb, 16px);
+}
+
+/* Column mode: also uses count variables to create responsive columns */
+:host(.col) {
+  grid-auto-flow: row;
+  grid-template-columns: repeat(var(--current-count), minmax(0, 1fr));
+}
+
+/* Breakpoint overrides */
+@media (max-width: 767.98px) {
+  :host {
+    --current-count: var(--count-mobile, 1);
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023.98px) {
+  :host {
+    --current-count: var(--count-tablet, 2);
+  }
+}
+
+@media (min-width: 1024px) {
+  :host {
+    --current-count: var(--count-desktop, 3);
+  }
+}

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

@@ -0,0 +1,97 @@
+<div class="resume-entries-container">
+  <div *ngFor="let entry of entries; let i = index" class="resume-entry" [class.with-timeline]="showTimeline"
+    [class.is-hidden]="isSectionHidden">
+    <div *ngIf="showLoader && loaderForAllEntries" class="entry-loader-container"><al-loader [status]="loaderStatus"
+        [size]="loaderSize" [showText]="true" [dataTestId]="'entry-' + i + '-loader'"></al-loader></div><ng-container
+      *ngIf="!showLoader || !loaderForAllEntries">
+      <div *ngIf="showTimeline" class="timeline-indicator">
+        <div class="timeline-dot"></div>
+        <div class="timeline-line"></div>
+      </div>
+      <div class="resume-entry-content">
+        <div *ngIf="showHeader" class="entry-header">
+          <div class="header-left">
+            <!-- Company / Institution: always on top, shows placeholder when no value -->
+            <div *ngIf="showCompany" class="mobile-order-2" [matTooltip]="companyTooltip"
+              [matTooltipPosition]="tooltipPosition" [matTooltipDisabled]="!companyTooltip">
+              <lib-field-placeholder
+                [value]="entry.companyName?.trim() ? entry.companyName : (entry.institution?.trim() ? entry.institution : undefined)"
+                [placeholder]="'Company Name / Institution'" valueClass="font-text-lg-bold"
+                [testId]="'entry-' + i + '-company'" [compact]="true">
+              </lib-field-placeholder>
+            </div>
+
+            <!-- Job title / Course name: always below company line -->
+            <div *ngIf="showJobTitle" class="mobile-order-3" [matTooltip]="jobTitleTooltip"
+              [matTooltipPosition]="tooltipPosition" [matTooltipDisabled]="!jobTitleTooltip">
+              <lib-field-placeholder [value]="entry.jobTitle || entry.courseName"
+                [placeholder]="'Job title / Course name'" valueClass="font-title-text"
+                [testId]="'entry-' + i + '-title'" [compact]="true">
+              </lib-field-placeholder>
+            </div>
+          </div>
+          <div class="header-right">
+            <div class="date-range mobile-order-1" *ngIf="showDates" [matTooltip]="dateTooltip"
+              [matTooltipPosition]="tooltipPosition" [matTooltipDisabled]="!dateTooltip">
+              <!-- Start Date: always render; show placeholder when no value -->
+              <lib-field-placeholder [value]="entry.startDate?.trim() ? entry.startDate : undefined"
+                [placeholder]="'Start Date'" valueClass="font-text-lg-bold" [testId]="'entry-' + i + '-start-date'"
+                [compact]="true">
+              </lib-field-placeholder>
+
+              <span class="date-separator">-</span>
+
+              <!-- End Date / Present: always render; show placeholder when no end date -->
+              <lib-field-placeholder [value]="entry.isPresent
+                           ? 'Present'
+                           : (entry.endDate?.trim() ? entry.endDate : undefined)" [placeholder]="'End Date'"
+                valueClass="font-text-lg-bold" [testId]="'entry-' + i + '-end-date'" [compact]="true">
+              </lib-field-placeholder>
+            </div>
+            <div class="location-row mobile-order-4" *ngIf="showLocation" [matTooltip]="locationTooltip"
+              [matTooltipPosition]="tooltipPosition" [matTooltipDisabled]="!locationTooltip"><lib-field-placeholder
+                [value]="entry.city" [placeholder]="'City'" valueClass="font-location-text"
+                [testId]="'entry-' + i + '-city'" [compact]="true"></lib-field-placeholder><lib-field-placeholder
+                [value]="entry.region" [placeholder]="'Region'" valueClass="font-location-text"
+                [testId]="'entry-' + i + '-region'" [compact]="true"></lib-field-placeholder><lib-field-placeholder
+                [value]="entry.country" [placeholder]="'Country'" valueClass="font-location-text"
+                [testId]="'entry-' + i + '-country'" [compact]="true"></lib-field-placeholder></div>
+          </div>
+        </div>
+        <div class="descriptions-container">
+          <div *ngIf="showLoader && !loaderForAllEntries" class="loader-container">
+            <al-loader [status]="loaderStatus" [size]="loaderSize" [showText]="true"
+              [dataTestId]="'entry-' + i + '-loader'">
+            </al-loader>
+          </div>
+
+          <div *ngIf="!showLoader || loaderForAllEntries">
+            <div *ngFor="let desc of entry.descriptions; let descIndex = index" class="description-item"
+              [matTooltip]="descriptionTooltip" [matTooltipPosition]="tooltipPosition"
+              [matTooltipDisabled]="!descriptionTooltip">
+              <label *ngIf="showDescriptionLabel" class="description-label">Description</label>
+              <lib-field-placeholder [value]="desc" [placeholder]="'Missing item'" [padded]="true"
+                valueClass="font-text-base" [testId]="'entry-' + i + '-desc-' + descIndex">
+              </lib-field-placeholder>
+            </div>
+          </div>
+          <div class="reapply-button-container" *ngIf="showReapplyButton"><al-button *ngIf="!isReapplied(i)"
+              [label]="'Re-apply'" [buttonType]="'icon-label'" [leftIcon]="'refresh'" [category]="'gradient'"
+              [size]="'xs'" [dataTestId]="'entry-' + i + '-reapply'"
+              (onClick)="onReapplyClick(entry, i)"></al-button><al-button *ngIf="isReapplied(i)" [label]="'Undo'"
+              [buttonType]="'icon-label'" [leftIcon]="'undo'" [category]="'grey'" [size]="'xs'"
+              [dataTestId]="'entry-' + i + '-undo'" (onClick)="onUndoClick(entry, i)"></al-button></div>
+          <hr *ngIf="i < entries.length - 1" class="entry-separator" [class.with-timeline-separator]="showTimeline" />
+        </div>
+      </div>
+    </ng-container>
+  </div>
+  <div class="resume-entry-projection"><ng-content></ng-content></div>
+  <div *ngIf="skills && skills.length > 0" class="skill-section-common">
+    <div class="skill-list-items">
+      <ul>
+        <li *ngFor="let skill of skills" class="list-items">{{ skill }}</li>
+      </ul>
+    </div>
+  </div>
+</div>