@allsorter/ui-components 0.0.372 → 0.0.376

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

@@ -5,9 +5,11 @@
 .resume-entries-container {
   display: flex;
   flex-direction: column;
-
   width: 100%;
   background-color: white;
+  /* Enable container queries for responsive layout based on container size */
+  container-type: inline-size;
+  container-name: resume-entries;
 }
 
 .resume-entry {
@@ -101,7 +103,6 @@
   justify-content: space-between;
   align-items: flex-start;
   gap: 24px;
-
 }
 
 .header-left {
@@ -119,6 +120,144 @@
   max-width: 30%;
 }
 
+/* Container query: Apply text ellipsis when container width is very small (<= 400px) */
+@container resume-entries (max-width: 400px) {
+
+  /* Company Name and Job Title */
+  .mobile-order-2,
+  .mobile-order-3 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+
+    ::ng-deep lib-field-placeholder {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: block;
+      width: 100%;
+
+      .value-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: block;
+        max-width: 100%;
+      }
+    }
+  }
+
+  /* Date Range */
+  .mobile-order-1 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+
+    &.date-range {
+      ::ng-deep lib-field-placeholder {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+        max-width: 100%;
+
+        .value-text {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          display: inline-block;
+          max-width: 100%;
+        }
+      }
+    }
+  }
+
+  /* Location Row */
+  .mobile-order-4 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+
+    &.location-row {
+      ::ng-deep lib-field-placeholder {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+        max-width: 100%;
+
+        .value-text {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          display: inline-block;
+          max-width: 100%;
+        }
+      }
+    }
+  }
+}
+
+/* Container query: Switch to column when container width is small (<= 600px) */
+@container resume-entries (max-width: 500px) {
+  .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 small container: 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;
+  }
+}
+
+/* Media query: Also switch to column when screen width is small (<= 767px) */
 @media (max-width: 767px) {
   .entry-header {
     flex-direction: column;

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

@@ -1,187 +1,86 @@
-<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>
+<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>
+            <toolbar-left [variant]="'default'" [content]="'Section Content'" [isExtractionAnalysisActive]="false"
+              [showSearch]="true" (editEvent)="onEditEvent($event)">
+            </toolbar-left>
           </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 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>
+            <toolbar-right [checked]="false" [alwaysShowIcons]="false" [overrideConfig]="toolbarRightConfig"
+              [currentObj]="{ hidden: false, subrole: false }" (checkboxChange)="onCheckboxChange($event)"
+              (visibilityToggle)="onVisibilityToggle($event)">
+            </toolbar-right>
           </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>
-
+        </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>

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

@@ -2,16 +2,34 @@
   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;
 }
+
+.as-split-gutter {
+  cursor: col-resize !important;
+  background-color: var(--as-gutter-background-color, #eeeeee) !important;
+  flex-basis: 8px !important;
+  min-width: 8px !important;
+  max-width: 8px !important;
+  position: relative !important;
+  z-index: 10 !important;
+
+  &:hover {
+    background-color: #d0d0d0 !important;
+  }
+
+  &.as-dragged {
+    background-color: #b0b0b0 !important;
+  }
+}
+
+.as-split-gutter > .as-split-gutter-icon {
+  display: none !important;
+}

package/src/lib/toolbar-right/toolbar-right.component.html

@@ -6,7 +6,7 @@
     <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>
+          [svgIcon]="currentObj['subrole'] ? 'subrole_active' : 'subrole-icon-grey'" class="subrole-icon"></mat-icon></button>
     </div>
     <div class="icon-wrapper"><button *ngIf="requiredIcon.eye.display" type="button"
         class="toolbar-icon toolbar-icon--eye eye-icon" [attr.aria-label]="eyeLabel" [attr.title]="eyeTitle"