@allsorter/ui-components 0.0.369 → 0.0.372

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 {

package/src/lib/newresumeheader/newresumeheader.component.html

@@ -151,10 +151,11 @@
 <ng-template #headerButtonsTemplate let-buttons="buttons" let-handleClick="handleClick">
   <ng-container *ngFor="let btn of buttonConfig">
     <al-button *ngIf="!btn.displayCondition || btn.displayCondition()" [color]="btn.color" [outline]="btn.outline"
-      [size]="btn.size" [iconOutlined]="btn.iconOutlined" [labelText]="btn.labelText" [leftIcon]="btn.leftIcon"
-      [rightIcon]="btn.rightIcon" [dataTestId]="btn.dataTestId" [hasDropDown]="btn.hasDropDown"
-      [dropdownItems]="btn.dropdownItems" [buttonType]="'icon-label'" [iconOnly]="!btn.labelText"
-      (onClick)="onButtonClick(btn, $event)" (optionSelect)="onDropdownSelect(btn, $event)">
+      [size]="btn.size" [iconOutlined]="btn.iconOutlined" [labelText]="btn.labelText"
+      [leftIcon]="getButtonIcons(btn).leftIcon" [rightIcon]="getButtonIcons(btn).rightIcon"
+      [dataTestId]="btn.dataTestId" [hasDropDown]="btn.hasDropDown" [dropdownItems]="btn.dropdownItems"
+      [buttonType]="'icon-label'" [iconOnly]="!btn.labelText" [tooltip]="getButtonTooltip(btn)"
+      [tooltipPosition]="'above'" (onClick)="onButtonClick(btn, $event)" (optionSelect)="onDropdownSelect(btn, $event)">
     </al-button>
   </ng-container>
 </ng-template>

package/src/lib/styles/typography-classes.scss

@@ -169,7 +169,7 @@
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
-  line-height: 140%;
+  line-height: 1.4;
   letter-spacing: 0.035px;
 }
 

package/src/lib/test-styling/test-styling.component.html

@@ -0,0 +1,187 @@
+<div style="width: 100%; height: 100vh; overflow: hidden;">
+<as-split class="split_panels" direction="horizontal" style="overflow: visible; height: 100vh;" (dragEnd)="onDragEnd()" data-test-id="main-resume-split-panels">
+  <as-split-area [size]="50" data-test-id="main-resume-left-panel">
+
+        <div class="w-100 resume-data left-section" data-test-id="main-resume-left-section" style="width: 100%; padding: 16px;">
+          <div style="margin-top: 16px; padding: 16px; background: #f5f5f5; border-radius: 8px;">
+            <h3 style="margin: 0 0 8px 0;">Dummy Content</h3>
+            <p style="margin: 0; color: #666;">This is placeholder content for the left panel. In a real application, this would contain resume parsing data or other relevant information.</p>
+          </div>
+        </div>
+  </as-split-area>
+  <as-split-area [size]="50">
+   <al-general-container
+    cdkScrollable
+    [backgroundColor]="'#FFFFFF'"
+    [padding]="'16px'"
+    [borderRadius]="'8px'"
+    [borderPosition]="'top'"
+    [borderColor]="'#87DAE2'"
+    [boxShadow]="true"
+    [height]="'calc(100vh)'"
+    [overflowX]="'hidden'"
+    [overflowY]="'auto'"
+  >
+    <al-tabs [selectedIndex]="0" [size]="'large'">
+      <al-tab labelText="Resume">
+        <al-newresumeheader
+          [title]="'Experiences'"
+          [showHeaderCheckbox]="true"
+          [headerCheckboxChecked]="false"
+          [isLargeScreen]="true"
+          [showPopOutPanel]="false"
+          [hiddenSection]="{ headerSectionHidden: false }"
+          [configEyeToggle]="configEyeToggle"
+          [buttonConfig]="buttonConfig">
+          <al-responsive-columns [stackAt]="0" [gap]="'8px'" [padding]="'8px 12px'">
+            <div left>
+              <app-toolbar-left
+                [variant]="'default'"
+                [content]="'Section Content'"
+                [isExtractionAnalysisActive]="false"
+                [showSearch]="true"
+                (editEvent)="onEditEvent($event)">
+              </app-toolbar-left>
+            </div>
+            <div center>
+              <al-resume-entries
+                [entries]="entries"
+                [showHeader]="true"
+                [showDescriptionLabel]="true"
+                [showCompany]="true"
+                [showJobTitle]="true"
+                [showDates]="true"
+                [showLocation]="true"
+                [showTimeline]="false"
+                [showReapplyButton]="true"
+                [showLoader]="false"
+                (reapplyClick)="onReapplyClick($event)"
+                (undoClick)="onUndoClick($event)">
+              </al-resume-entries>
+            </div>
+            <div right>
+              <app-toolbar-right
+                [checked]="false"
+                [alwaysShowIcons]="false"
+                [overrideConfig]="toolbarRightConfig"
+                [currentObj]="{ hidden: false, subrole: false }"
+                (checkboxChange)="onCheckboxChange($event)"
+                (visibilityToggle)="onVisibilityToggle($event)">
+              </app-toolbar-right>
+            </div>
+          </al-responsive-columns>
+        </al-newresumeheader>
+        <al-form
+          *ngFor="let entry of entries; let i = index"
+          [showLeftButton]="true"
+          [showSaveButton]="true"
+          [showDeleteButton]="true"
+          [testId]="getTestId(i)"
+          (leftButtonClick)="onLeftButtonClick($event)"
+          (saveButtonClick)="onSaveButtonClick($event)"
+          (deleteButtonClick)="onDeleteButtonClick($event)"
+          [scrollContainer]="'.general-container'">
+          <div leftButtonContent>
+            <al-ai-apply-bar
+              [placeholder]="'Apply AI'"
+              [applyLabel]="'Apply'"
+              [showHelperText]="true"
+              [showClose]="false"
+              [showChevronButton]="false"
+              [applyDisabled]="false"
+              [value]="'Apply AI'"
+              [options]="['Typing', 'Gathering', 'Processing']"
+              (valueChange)="onAIApplyValueChange($event)"
+              (applyClick)="onAIApplyClick()"
+              (closeClick)="onAIApplyClose()">
+            </al-ai-apply-bar>
+          </div>
+          <app-flex-grid [type]="'row'" [mobRow]="1" [tabRow]="2" [desktop]="4" [gap]="'16px'">
+            <al-input
+              [label]="'Date Type'"
+              [placeholder]="'Type here...'"
+              [value]="'Month/Year'"
+              [type]="'text'"
+              [disabled]="false"
+              [helperText]="false"
+              [hasDropDown]="true"
+              [options]="['Month/Year','Year']"
+              [size]="'base'"
+              [types]="'primary'"
+              [dataTestId]="'test-input'"
+            ></al-input>
+            <al-input
+              [label]="'Start Date'"
+              [placeholder]="'Type here...'"
+              [value]="entry.startDate"
+              [type]="'date'"
+              [disabled]="false"
+              [helperText]="false"
+              [size]="'base'"
+              [types]="'primary'"
+              [dataTestId]="'test-input'"
+              (monthSelected)="onMonthSelected($event)"
+              (yearSelected)="onYearSelected($event)"
+            ></al-input>
+            <al-input
+              [label]="'End Date'"
+              [placeholder]="'Type here...'"
+              [value]="entry.endDate || ''"
+              [type]="'date'"
+              [disabled]="false"
+              [helperText]="false"
+              [size]="'base'"
+              [types]="'primary'"
+              [dataTestId]="'test-input'"
+              (monthSelected)="onMonthSelected($event)"
+              (yearSelected)="onYearSelected($event)"
+            ></al-input>
+            <al-checkbox
+              labelPosition="before"
+              labelText="Current Study"
+              [checked]="entry.isPresent"
+              (change)="onFormCheckboxChange($event)"
+            ></al-checkbox>
+          </app-flex-grid>
+          <app-flex-grid [type]="'column'" [rows]="1" [mobRow]="1" [tabRow]="1" [desktop]="1" [gap]="'16px'">
+            <al-input [label]="'Company Name'" [placeholder]="'Company Name'" [value]="entry.companyName" [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+            <al-input [label]="'Job Title'" [placeholder]="'Job Title'" [value]="entry.jobTitle" [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+          </app-flex-grid>
+          <app-flex-grid [type]="'column'" [rows]="1" [mobRow]="1" [tabRow]="1" [desktop]="3" [gap]="'16px'">
+            <al-input [label]="'City'" [placeholder]="'City'" [value]="entry.city" [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+            <al-input [label]="'Region'" [placeholder]="'Region'" [value]="entry.region" [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+            <al-input [label]="'Country'" [placeholder]="'Country'" [value]="entry.country" [type]="'text'" [size]="'base'" [types]="'primary'"></al-input>
+          </app-flex-grid>
+          <app-flex-grid [type]="'column'" [gap]="16" [countMobile]="1" [countTablet]="1" [countDesktop]="1">
+            <app-custom-editor
+              [isVisible]="true"
+              [showTable]="true"
+              [historyControls]="true"
+              [autobullet]="true"
+              [showLabels]="true"
+              leftLabelText="Document Title"
+              rightLabelText="Page 1 of 5"
+              [initialValue]="getDescriptionHtml(entry.descriptions)"
+              editScreenSection="GENERAL"
+              actionType="edit"
+              [dataTestId]="'custom-editor-testid'"
+              (contentChangeFromQuill)="onContentChange($event)"
+              (ApplyAIinQuill)="onAIApply($event)"
+            ></app-custom-editor>
+          </app-flex-grid>
+        </al-form>
+      </al-tab>
+      <al-tab labelText="CoverSheet">
+        <h3>About Us</h3>
+        <p>Learn more about our company and mission.</p>
+      </al-tab>
+      <al-tab labelText="Ai Tools">
+        <h3>Contact Information</h3>
+        <p>Get in touch with us through various channels.</p>
+      </al-tab>
+    </al-tabs>
+  </al-general-container>
+</as-split-area>
+</as-split>
+</div>
+

package/src/lib/test-styling/test-styling.component.scss

@@ -0,0 +1,17 @@
+.split_panels {
+  width: calc(100%) !important;
+  height: 100% !important;
+}
+.as-split-gutter {
+  cursor: col-resize !important;
+}
+.as-split-gutter > .as-split-gutter-icon {
+  flex-basis: 32px !important;
+}
+as-split {
+  display: flex !important;
+  height: 100% !important;
+}
+as-split-area {
+  overflow: hidden !important;
+}

package/src/lib/{app-toolbar-right/app-toolbar-right.component.html → toolbar-right/toolbar-right.component.html}

@@ -3,7 +3,7 @@
       (change)="onCheckboxChange($event)" (mouseenter)="onCheckboxHover(true)"
       (mouseleave)="onCheckboxHover(false)"></al-checkbox></div>
   <div class="toolbar-right-icons" [ngClass]="{'always-visible': showIcons}">
-    <div class="icon-wrapper"><button *ngIf="requiredIcon.sr.display" type="button"
+    <div class="icon-wrapper" *ngIf="requiredIcon.sr.display"><button type="button"
         class="toolbar-icon toolbar-icon--subrole" [attr.aria-label]="requiredIcon.sr.title"
         [attr.title]="requiredIcon.sr.title" (click)="setSubrole()"><mat-icon
           [svgIcon]="currentObj['subrole'] ? 'subrole_active' : 'subrole'" class="subrole-icon"></mat-icon></button>
@@ -12,4 +12,4 @@
         class="toolbar-icon toolbar-icon--eye eye-icon" [attr.aria-label]="eyeLabel" [attr.title]="eyeTitle"
         (click)="onToggleVisibility()"><mat-icon [svgIcon]="eyeSvgIcon" class="eye-icon"></mat-icon></button></div>
   </div>
-</div>
+</div>