@allsorter/ui-components 0.0.370 → 0.0.374

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

@@ -1,178 +1,121 @@
-<al-general-container [borderRadius]="'0'" [borderPosition]="'none'" [boxShadow]="false" [padding]="'0'"
-  [width]="'100%'">
-  <cdk-accordion class="example-accordion">
-    <cdk-accordion-item #accordionItem="cdkAccordionItem" [expanded]="true" class="example-accordion-item">
-      <div class="example-accordion-item-header" [ngClass]="{'header-hidden': isSectionHidden}">
-        <!-- Normal header layout (shows when section is NOT hidden) -->
-        <ng-container *ngIf="!isSectionHidden; else hiddenHeaderLayout">
-          <al-responsive-columns [stackAt]="0" [gap]="'12px'" [padding]="'8px 12px'">
-            <div left>
-              <button (click)="toggleAccordion(accordionItem)" tabindex="0" class="toggle-button align-center"
+<al-general-container #generalContainer [borderRadius]="'0'" [borderPosition]="'none'" [boxShadow]="false"
+  [padding]="'0'" [width]="'100%'"><cdk-accordion class="example-accordion"><cdk-accordion-item
+      #accordionItem="cdkAccordionItem" [expanded]="true" class="example-accordion-item">
+      <div class="example-accordion-item-header" #accordionHeader [ngClass]="{'header-hidden': isSectionHidden}">
+        <!-- Normal header layout (shows when section is NOT hidden) --><ng-container
+          *ngIf="!isSectionHidden; else hiddenHeaderLayout"><al-responsive-columns [stackAt]="0" [gap]="'12px'"
+            [padding]="'8px 12px'">
+            <div left><button (click)="toggleAccordion(accordionItem)" tabindex="0" class="toggle-button align-center"
                 [attr.aria-expanded]="accordionItem.expanded"
-                [matTooltip]="accordionItem.expanded ? 'Collapse' : 'Expand'" matTooltipPosition="above">
-                <span class="material-icons-outlined" *ngIf="!accordionItem.expanded">
-                  expand_less
-                </span>
-                <span class="material-icons-outlined" *ngIf="accordionItem.expanded">
-                  expand_more
-                </span>
-              </button>
-              <ng-content select="[header-left]"></ng-content>
-            </div>
-            <div center>
-              <al-responsive-columns [stackAt]="0" [gap]="'12px'" [padding]="'0'" [leftWidth]="'auto'"
+                [matTooltip]="accordionItem.expanded ? 'Collapse' : 'Expand'" matTooltipPosition="above"><span
+                  class="material-icons-outlined" *ngIf="!accordionItem.expanded">expand_less </span><span
+                  class="material-icons-outlined" *ngIf="accordionItem.expanded">expand_more
+                </span></button><ng-content select="[header-left]"></ng-content></div>
+            <div center><al-responsive-columns [stackAt]="0" [gap]="'12px'" [padding]="'0'" [leftWidth]="'auto'"
                 [rightWidth]="'32px'" [ngClass]="{'input-focused': isInputFocused}">
                 <div left>
                   <div class="edit-input-group" [ngClass]="{'input-focused': isInputFocused}">
-                    <div class="content_width">
-                      <span *ngIf="!isTitleEditing" class="title-text" (click)="onTitleClick()">
+                    <div class="content_width"><span *ngIf="!isTitleEditing" class="title-text"
+                        (click)="onTitleClick()">
                         {{ title || 'Click to edit' }}
-                      </span>
-                      <input *ngIf="isTitleEditing" #titleInput type="text" [(ngModel)]="editedTitle"
+                      </span><input *ngIf="isTitleEditing" #titleInput type="text" [(ngModel)]="editedTitle"
                         (focus)="onTitleFocus()" (blur)="onTitleBlur()" (keydown)="onTitleKeyPress($event)"
-                        class="title-input onfocus-input-text" />
-                      <ng-content select="[header-center-left]"></ng-content>
-                    </div>
-                    <mat-icon class="edit-icon" svgIcon="edit_icon" matTooltip="Edit title" matTooltipPosition="above"
-                      (click)="onTitleClick()">
-                    </mat-icon>
+                        class="title-input onfocus-input-text" /><ng-content select="[header-center-left]"></ng-content>
+                    </div><mat-icon class="edit-icon" svgIcon="edit_icon" matTooltip="Edit title"
+                      matTooltipPosition="above" (click)="onTitleClick()"></mat-icon>
                   </div>
                 </div>
-                <div center>
-                  <ng-content select="[header-center-center]"></ng-content>
-                  <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) -->
-                  <ng-container *ngIf="isLargeScreen">
-                    <ng-container *ngTemplateOutlet="headerButtonsTemplate; context: { buttons: buttonConfig }">
-                    </ng-container>
-                  </ng-container>
+                <div center><ng-content select="[header-center-center]"></ng-content>
+                  <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) --><ng-container
+                    *ngIf="isLargeScreen"><ng-container
+                      *ngTemplateOutlet="headerButtonsTemplate; context: { buttons: buttonConfig }"></ng-container></ng-container>
                   <!-- Menu trigger and slide-out panel for small screens only -->
                   <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="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">
-                        <ng-container *ngTemplateOutlet="headerButtonsTemplate; context: { buttons: buttonConfig }">
-                        </ng-container>
+                      <div class="fit-panel"><ng-container
+                          *ngTemplateOutlet="headerButtonsTemplate; context: { buttons: buttonConfig }"></ng-container>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div right>
-                  <ng-content select="[header-center-right]"></ng-content>
-                  <!-- Eye icon - uses actual isHidden value from config, always visible -->
-                  <ng-container *ngIf="configEyeToggle && configEyeToggle.length > 0">
-                    <ng-container *ngFor="let eyeConfig of configEyeToggle">
-                      <ng-container *ngIf="eyeConfig">
-                        <ng-container
-                          *ngTemplateOutlet="eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }">
-                        </ng-container>
-                      </ng-container>
-                    </ng-container>
-                  </ng-container>
+                <div right><ng-content select="[header-center-right]"></ng-content>
+                  <!-- Eye icon - uses actual isHidden value from config, always visible --><ng-container
+                    *ngIf="configEyeToggle && configEyeToggle.length > 0"><ng-container
+                      *ngFor="let eyeConfig of configEyeToggle"><ng-container *ngIf="eyeConfig"><ng-container
+                          *ngTemplateOutlet="eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }"></ng-container></ng-container></ng-container></ng-container>
                 </div>
-              </al-responsive-columns>
-            </div>
-            <div right>
-              <al-checkbox *ngIf="showHeaderCheckbox" [checked]="headerCheckboxChecked" [showLabels]="false"
-                (change)="onHeaderCheckboxChange($event)">
-              </al-checkbox>
-              <ng-content select="[header-right]"></ng-content>
-            </div>
-          </al-responsive-columns>
-        </ng-container>
-
-        <!-- Hidden header layout (shows when section IS hidden) -->
-        <ng-template #hiddenHeaderLayout>
-          <al-responsive-columns [stackAt]="0" [gap]="'12px'" [padding]="'8px 12px'">
+              </al-responsive-columns></div>
+            <div right><al-checkbox *ngIf="showHeaderCheckbox" [checked]="headerCheckboxChecked" [showLabels]="false"
+                (change)="onHeaderCheckboxChange($event)"></al-checkbox><ng-content
+                select="[header-right]"></ng-content></div>
+          </al-responsive-columns></ng-container>
+        <!-- Hidden header layout (shows when section IS hidden) --><ng-template
+          #hiddenHeaderLayout><al-responsive-columns [stackAt]="0" [gap]="'12px'" [padding]="'8px 12px'">
             <div left>
-              <!-- Toggle button hidden when section is hidden -->
-              <ng-content select="[header-left]"></ng-content>
+              <!-- Toggle button hidden when section is hidden --><ng-content select="[header-left]"></ng-content>
             </div>
-            <div center>
-              <al-responsive-columns [stackAt]="0" [gap]="'12px'" [padding]="'0'" [leftWidth]="'auto'"
+            <div center><al-responsive-columns [stackAt]="0" [gap]="'12px'" [padding]="'0'" [leftWidth]="'auto'"
                 [rightWidth]="'32px'">
                 <div left>
                   <div class="edit-input-group hide-header-title">
-                    <div class="content_width">
-                      <span class="title-text header-text-turncate">{{ title }}</span>
-                    </div>
+                    <div class="content_width"><span class="title-text header-text-turncate">
+                        {{ title }}
+                      </span></div>
                   </div>
                 </div>
                 <div center>
                   <div class="hidden-write">Section hidden</div>
                 </div>
-                <div right>
-                  <ng-content select="[header-center-right]"></ng-content>
-                  <!-- Eye icon - uses actual isHidden value from config, always visible -->
-                  <ng-container *ngIf="configEyeToggle && configEyeToggle.length > 0">
-                    <ng-container *ngFor="let eyeConfig of configEyeToggle">
-                      <ng-container *ngIf="eyeConfig">
-                        <ng-container
-                          *ngTemplateOutlet="eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }">
-                        </ng-container>
-                      </ng-container>
-                    </ng-container>
-                  </ng-container>
+                <div right><ng-content select="[header-center-right]"></ng-content>
+                  <!-- Eye icon - uses actual isHidden value from config, always visible --><ng-container
+                    *ngIf="configEyeToggle && configEyeToggle.length > 0"><ng-container
+                      *ngFor="let eyeConfig of configEyeToggle"><ng-container *ngIf="eyeConfig"><ng-container
+                          *ngTemplateOutlet="eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }"></ng-container></ng-container></ng-container></ng-container>
                 </div>
-              </al-responsive-columns>
-            </div>
+              </al-responsive-columns></div>
             <div right>
-              <!-- Checkbox hidden when section is hidden -->
-              <ng-content select="[header-right]"></ng-content>
+              <!-- Checkbox hidden when section is hidden --><ng-content select="[header-right]"></ng-content>
             </div>
-          </al-responsive-columns>
-        </ng-template>
+          </al-responsive-columns></ng-template>
       </div>
       <!-- Accordion body (only shows when expanded AND not hidden) -->
       <div class="example-accordion-item-body" *ngIf="accordionItem.expanded && !isSectionHidden">
         <!-- Pop-out Panel -->
         <div *ngIf="shouldShowPopOut" class="pop-out-panel">
-          <div class="pop-out-content">
-            <al-button [labelText]="popOutButtonLabel" [rightIcon]="popOutButtonIcon" [buttonType]="'icon-label'"
-              [category]="'gradient'" [size]="'xs'" [iconOnly]="false" (onClick)="popOutButtonClick.emit()"
-              [dataTestId]="'pop-out-run-deep-extraction'" [title]="popOutButtonLabel">
-            </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 class="pop-out-content"><al-button [labelText]="popOutButtonLabel" [rightIcon]="popOutButtonIcon"
+              [buttonType]="'icon-label'" [category]="'gradient'" [size]="'xs'" [iconOnly]="false"
+              (onClick)="popOutButtonClick.emit()" [dataTestId]="'pop-out-run-deep-extraction'"
+              [title]="popOutButtonLabel"></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>
         <!-- Single body content slot - child component will handle 3-column layout internally -->
         <ng-content></ng-content>
       </div>
-    </cdk-accordion-item>
-  </cdk-accordion>
-</al-general-container>
-
-<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"
+    </cdk-accordion-item></cdk-accordion></al-general-container><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]="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>
-
-<ng-template #eyeIconTemplate let-isHidden="isHidden" let-accordionItem="accordionItem"
-  let-configEyeToggle="configEyeToggle">
+      [tooltipPosition]="'above'" (onClick)="onButtonClick(btn, $event)"
+      (optionSelect)="onDropdownSelect(btn, $event)"></al-button></ng-container></ng-template><ng-template
+  #eyeIconTemplate let-isHidden="isHidden" let-accordionItem="accordionItem" let-configEyeToggle="configEyeToggle">
   <div class="mat-checkbox-margin align-center"
     [attr.data-test-id]="isHidden ? 'section-show-eye-div' : 'section-hide-eye-div'"
-    style="display: flex; align-items: center; justify-content: center;">
-    <mat-icon class="delete-multiple mat-fab.mat-accent eye-icon" [svgIcon]="isHidden ? 'visibility' : 'visibility_off'"
+    style="display: flex; align-items: center; justify-content: center;"><mat-icon
+      class="delete-multiple mat-fab.mat-accent eye-icon" [svgIcon]="isHidden ? 'visibility' : 'visibility_off'"
       [matTooltip]="configEyeToggle?.tooltips?.[isHidden ? 'collapse' : 'expand'] || (isHidden ? 'Show Section' : 'Hide Section')"
       [matTooltipPosition]="configEyeToggle?.tooltips?.position || 'above'"
       [attr.aria-label]="configEyeToggle?.ariaLabels?.[isHidden ? 'collapsed' : 'expanded'] || (isHidden ? 'Show section' : 'Hide section')"
       (click)="onEyeIconClick(isHidden, accordionItem, configEyeToggle)"
       [attr.data-test-id]="isHidden ? 'section-show-eye-icon' : 'section-hide-eye-icon'"
       style="cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px; color: #717793;"
-      [style.opacity]="1" [style.visibility]="'visible'">
-    </mat-icon>
-  </div>
-</ng-template>
+      [style.opacity]="1" [style.visibility]="'visible'"></mat-icon></div>
+</ng-template>

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

@@ -12,6 +12,9 @@
   width: 100%;
   /* Default to desktop counts */
   --current-count: var(--count-desktop, 4);
+  /* Enable container queries - will respond to parent container size */
+  container-type: inline-size;
+  container-name: flex-grid;
 }
 
 /* Row mode: define columns per breakpoint */
@@ -45,3 +48,23 @@
     --current-count: var(--count-desktop, 3);
   }
 }
+
+/* Container query: Switch row/column layout to single column when container width is small (<= 600px) */
+@container flex-grid (max-width: 600px) {
+
+  :host(.row),
+  :host(.col) {
+    --current-count: 1 !important;
+    grid-template-columns: 1fr !important;
+  }
+}
+
+/* Also check parent container (form-wrapper) for container queries */
+@container form-wrapper (max-width: 600px) {
+
+  :host(.row),
+  :host(.col) {
+    --current-count: 1 !important;
+    grid-template-columns: 1fr !important;
+  }
+}

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/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,86 @@
+<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 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>
+        </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

@@ -0,0 +1,35 @@
+.split_panels {
+  width: calc(100%) !important;
+  height: 100% !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/{app-toolbar-right/app-toolbar-right.component.html → toolbar-right/toolbar-right.component.html}

@@ -3,13 +3,13 @@
       (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>
+          [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"
         (click)="onToggleVisibility()"><mat-icon [svgIcon]="eyeSvgIcon" class="eye-icon"></mat-icon></button></div>
   </div>
-</div>
+</div>