@allsorter/ui-components 0.0.382 → 0.0.386

package/src/lib/field-placeholder/field-placeholder.component.scss

@@ -50,7 +50,8 @@
   font-style: normal;
   line-height: 140%;
   letter-spacing: 0.04px;
-  height: 28px;
+  min-height: 28px;
+  align-items: flex-start;
 }
 
 .field-row-padded {
@@ -78,8 +79,18 @@
   color: #37C1CE;
 }
 
+
 .value-text {
-  // Default style - can be overridden by valueClass input
-  display: inline;
   color: $color-grey-600 !important;
 }
+
+// Apply collapsed styles when .collapsed is anywhere in parent hierarchy
+.collapsed .value-text {
+  display: -webkit-box !important;
+  -webkit-line-clamp: 1 !important;
+  line-clamp: 1 !important;
+  -webkit-box-orient: vertical !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: normal !important;
+}

package/src/lib/input/input.component.scss

@@ -208,7 +208,7 @@
 }
 
 ::ng-deep .al-input-size-small .mat-mdc-form-field-infix {
-  min-height: 34px !important;
+  min-height: 36px !important;
 }
 
 ::ng-deep .al-input-size-base .mat-mdc-form-field-infix {
@@ -216,9 +216,22 @@
   min-height: 24px !important;
 }
 
+/* Large = 48px: constrain wrapper, flex and infix to override Material's 56px default */
+::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper,
+::ng-deep .al-input-field.al-input-size-large .mat-mdc-form-field-flex {
+  min-height: 48px !important;
+  max-height: 48px !important;
+  height: 48px !important;
+  box-sizing: border-box !important;
+}
+
+::ng-deep .al-input-field.al-input-size-large .mat-mdc-form-field-infix,
 ::ng-deep .al-input-size-large .mat-mdc-form-field-infix {
-  padding: 16px 0 !important;
+  padding: 12px 0 !important;
   min-height: 48px !important;
+  max-height: 48px !important;
+  height: 48px !important;
+  box-sizing: border-box !important;
 }
 
 ::ng-deep .al-input-size-header .mat-mdc-form-field-infix {
@@ -253,6 +266,29 @@
   border-bottom-right-radius: 4px !important;
 }
 
+/* Large = 48px: force the notched outline (the visible border box) to 48px - Material defaults to 56px */
+::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline,
+::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline--upgraded,
+::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline,
+::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline--upgraded {
+  min-height: 48px !important;
+  max-height: 48px !important;
+  height: 48px !important;
+  box-sizing: border-box !important;
+}
+
+::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,
+::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,
+::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,
+::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,
+::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,
+::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing {
+  min-height: 48px !important;
+  max-height: 48px !important;
+  height: 48px !important;
+  box-sizing: border-box !important;
+}
+
 /* ===== NO BORDER STYLES ===== */
 
 /* No border input styling - combines header and plain input functionality */
@@ -483,7 +519,7 @@ mat-icon[matSuffix] {
 }
 
 ::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
-  top: 24px !important;
+  top: 20px !important;
 }
 
 
@@ -494,7 +530,7 @@ mat-icon[matSuffix] {
 }
 
 ::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
-  --mat-mdc-form-field-label-transform: translateY(-20px) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
+  --mat-mdc-form-field-label-transform: translateY(-22px) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
   transform: var(--mat-mdc-form-field-label-transform);
 }
 
@@ -509,7 +545,7 @@ mat-icon[matSuffix] {
 }
 
 ::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
-  --mat-mdc-form-field-label-transform: translateY(-35px) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
+  --mat-mdc-form-field-label-transform: translateY(-30px) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
   transform: var(--mat-mdc-form-field-label-transform);
 }
 
@@ -815,14 +851,14 @@ mat-icon[matSuffix] {
 
 /* Icon button styling for datepicker toggle - Small size (higher specificity) */
 ::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle .mat-mdc-icon-button.mat-mdc-button-base {
-  height: 34px !important;
-  width: 34px !important;
+  height: 36px !important;
+  width: 36px !important;
   padding: 4px !important;
 }
 
 ::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle {
-  height: 34px !important;
-  width: 34px !important;
+  height: 36px !important;
+  width: 36px !important;
 }
 
 ::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle .mat-mdc-button-touch-target {
@@ -832,8 +868,8 @@ mat-icon[matSuffix] {
 
 ::ng-deep .al-input-field .mat-mdc-icon-button.mat-mdc-button-small {
   padding: 4px !important;
-  height: 34px !important;
-  width: 34px !important;
+  height: 36px !important;
+  width: 36px !important;
 }
 
 /* Primary color for outlined text field floating label */

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

@@ -1,16 +1,37 @@
 <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}">
+      <div class="example-accordion-item-header" #accordionHeader
+        [ngClass]="{'header-hidden': isSectionHidden, 'header-with-bottom-margin': !showPopOutPanel}">
         <!-- 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"
+            <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>
+                [matTooltip]="accordionItem.expanded ? 'Collapse' : 'Expand'"
+                matTooltipPosition="above"
+              >
+                <!-- When section is OPEN (expanded === true), show an UP chevron.
+                     When section is CLOSED, show a DOWN chevron. -->
+                <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>
@@ -105,8 +126,8 @@
       [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)"
+      [buttonType]="'icon-label'" [iconOnly]="!btn.labelText" [tooltip]="btn.tooltip"
+      [tooltipPosition]="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">
   <div class="mat-checkbox-margin align-center"

package/src/lib/newresumeheader/newresumeheader.component.scss

@@ -156,6 +156,15 @@
   border-radius: 8px;
   box-sizing: border-box;
 
+  /**
+   * When the Deep Extraction pop-out panel is NOT shown (showPopOutPanel === false),
+   * add spacing below the header so the resume entries and header have a 16px gap.
+   * When showPopOutPanel is true, this class is not applied to keep the header
+   * flush with the pop-out panel.
+   */
+  &.header-with-bottom-margin {
+    margin-bottom: 16px;
+  }
 }
 
 

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

@@ -51,7 +51,6 @@
 
 /* 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;
@@ -61,7 +60,6 @@
 
 /* Also check parent container (form-wrapper) for container queries */
 @container form-wrapper (max-width: 600px) {
-
   :host(.row),
   :host(.col) {
     --current-count: 1 !important;

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

@@ -12,31 +12,30 @@
         <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">
+            <div *ngIf="showCompany" class="mobile-order-2">
               <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">
+                [testId]="'entry-' + i + '-company'" [compact]="true"
+                [tooltip]="companyTooltip" [tooltipPosition]="tooltipPosition">
               </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">
+            <div *ngIf="showJobTitle" class="mobile-order-3">
               <lib-field-placeholder [value]="entry.jobTitle || entry.courseName"
                 [placeholder]="'Job title / Course name'" valueClass="font-title-text"
-                [testId]="'entry-' + i + '-title'" [compact]="true">
+                [testId]="'entry-' + i + '-title'" [compact]="true"
+                [tooltip]="jobTitleTooltip" [tooltipPosition]="tooltipPosition">
               </lib-field-placeholder>
             </div>
           </div>
           <div class="header-right">
-            <div class="date-range mobile-order-1" *ngIf="showDates" [matTooltip]="dateTooltip"
-              [matTooltipPosition]="tooltipPosition" [matTooltipDisabled]="!dateTooltip">
+            <div class="date-range mobile-order-1" *ngIf="showDates">
               <!-- 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">
+                [compact]="true" [tooltip]="dateTooltip" [tooltipPosition]="tooltipPosition">
               </lib-field-placeholder>
 
               <span class="date-separator">-</span>
@@ -45,17 +44,21 @@
               <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">
+                valueClass="font-text-lg-bold" [testId]="'entry-' + i + '-end-date'" [compact]="true"
+                [tooltip]="dateTooltip" [tooltipPosition]="tooltipPosition">
               </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 class="location-row mobile-order-4" *ngIf="showLocation">
+              <lib-field-placeholder [value]="entry.city" [placeholder]="'City'" valueClass="font-location-text"
+                [testId]="'entry-' + i + '-city'" [compact]="true"
+                [tooltip]="locationTooltip" [tooltipPosition]="tooltipPosition"></lib-field-placeholder>
+              <lib-field-placeholder [value]="entry.region" [placeholder]="'Region'" valueClass="font-location-text"
+                [testId]="'entry-' + i + '-region'" [compact]="true"
+                [tooltip]="locationTooltip" [tooltipPosition]="tooltipPosition"></lib-field-placeholder>
+              <lib-field-placeholder [value]="entry.country" [placeholder]="'Country'" valueClass="font-location-text"
+                [testId]="'entry-' + i + '-country'" [compact]="true"
+                [tooltip]="locationTooltip" [tooltipPosition]="tooltipPosition"></lib-field-placeholder>
+            </div>
           </div>
         </div>
         <div class="descriptions-container">
@@ -66,12 +69,11 @@
           </div>
 
           <div *ngIf="!showLoader || loaderForAllEntries">
-            <div *ngFor="let desc of entry.descriptions; let descIndex = index" class="description-item"
-              [matTooltip]="descriptionTooltip" [matTooltipPosition]="tooltipPosition"
-              [matTooltipDisabled]="!descriptionTooltip">
+            <div *ngFor="let desc of entry.descriptions; let descIndex = index" class="description-item" [class.collapsed]="isCollapsed">
               <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">
+                valueClass="font-text-base" [testId]="'entry-' + i + '-desc-' + descIndex"
+                [tooltip]="descriptionTooltip" [tooltipPosition]="tooltipPosition">
               </lib-field-placeholder>
             </div>
           </div>
@@ -94,4 +96,4 @@
       </ul>
     </div>
   </div>
-</div>
+</div>

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

@@ -94,9 +94,9 @@
   min-height: calc(100% - 14px);
 }
 
-.resume-entry:last-child .timeline-line {
-  display: none;
-}
+// .resume-entry:last-child .timeline-line {
+//   display: none;
+// }
 
 .entry-header {
   display: flex;
@@ -112,42 +112,29 @@
   flex: 1;
 }
 
+/* Company name and job title: min-height 28px, wrap to next line when longer, height auto */
+.mobile-order-2,
+.mobile-order-3 {
+  min-height: 28px;
+
+  ::ng-deep lib-field-placeholder .value-text,
+  ::ng-deep lib-field-placeholder .placeholder-text {
+    white-space: normal;
+    word-wrap: break-word;
+  }
+}
+
 .header-right {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 4px;
-  max-width: 30%;
+  // 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;
@@ -250,6 +237,7 @@
 
   .date-range {
     align-items: flex-start;
+    flex-wrap: nowrap;
   }
 
   .location-row {
@@ -306,6 +294,7 @@
 
   .date-range {
     align-items: flex-start;
+    flex-wrap: nowrap;
   }
 
   .location-row {
@@ -316,8 +305,15 @@
 .date-range {
   display: flex;
   flex-direction: row;
+  flex-wrap: nowrap;
   align-items: center;
   gap: 8px;
+
+  /* Keep date on a single row on small screens; no wrapping */
+  ::ng-deep lib-field-placeholder .value-text,
+  ::ng-deep lib-field-placeholder .placeholder-text {
+    white-space: nowrap;
+  }
 }
 
 .location-row {
@@ -350,9 +346,16 @@
   flex-direction: column;
   gap: 4px;
 
-  ::ng-deep .value-text {
-    color: $color-grey-600;
-  }
+  &.collapsed .value-text {
+      display: -webkit-box !important;
+      -webkit-line-clamp: 1 !important;
+      line-clamp: 1 !important;
+      -webkit-box-orient: vertical !important;
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      white-space: normal !important;
+    }
+
 }
 
 .description-label {

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

@@ -112,18 +112,18 @@
             (applyClick)="onAIApplyClick()" (closeClick)="onAIApplyClose()">
           </al-ai-apply-bar>
         </div>
-        <app-flex-grid [type]="'row'" [mobRow]="1" [tabRow]="2" [desktop]="4" [gap]="'16px'">
+        <app-flex-grid [type]="'row'" [mobRow]="1" [tabRow]="2" [desktop]="4" [gap]="'16px'" [minColumns]="2">
           <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-checkbox labelPosition="before" labelText="Current Study" [checked]="entry.isPresent"
+            (change)="onFormCheckboxChange($event)"></al-checkbox>
           <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'"

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

@@ -1,13 +1,13 @@
 <div class="toolbar-container">
   <div class="icon-wrapper"><button type="button" class="toolbar-icon toolbar-icon--handle"
-      [attr.aria-label]="requiredIcon.handle.title" [attr.title]="requiredIcon.handle.title"
-      (click)="$event.stopPropagation()"><mat-icon svgIcon="handle" class="handle-icon"></mat-icon></button></div>
+      [attr.aria-label]="requiredIcon.handle.title" [matTooltip]="requiredIcon.handle.title"
+      matTooltipPosition="left" (click)="$event.stopPropagation()"><mat-icon svgIcon="handle" class="handle-icon"></mat-icon></button></div>
   <div class="toolbar-icons">
     <div class="icon-wrapper"><button type="button" class="toolbar-icon toolbar-icon--edit"
-        [attr.aria-label]="requiredIcon.edit.title" [attr.title]="requiredIcon.edit.title"
-        (click)="editSelectedSection()"><mat-icon svgIcon="edit_icon" class="edit-icon"></mat-icon></button></div>
+        [attr.aria-label]="requiredIcon.edit.title" [matTooltip]="requiredIcon.edit.title"
+        matTooltipPosition="left" (click)="editSelectedSection()"><mat-icon svgIcon="edit_icon" class="edit-icon"></mat-icon></button></div>
     <div class="icon-wrapper"><button type="button" class="toolbar-icon toolbar-icon--search"
-        [attr.aria-label]="requiredIcon.search.title" [attr.title]="requiredIcon.search.title"
-        (click)="onSearchClick($event)"><mat-icon svgIcon="search" class="search-icon"></mat-icon></button></div>
+        [attr.aria-label]="requiredIcon.search.title" [matTooltip]="requiredIcon.search.title"
+        matTooltipPosition="left" (click)="onSearchClick($event)"><mat-icon svgIcon="search" class="search-icon"></mat-icon></button></div>
   </div>
 </div>

package/src/lib/toolbar-left/toolbar-left.component.scss

@@ -47,6 +47,10 @@
 
 .toolbar-icon--handle {
   cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
 }
 
 .icon-wrapper {

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

@@ -5,11 +5,13 @@
   <div class="toolbar-right-icons" [ngClass]="{'always-visible': showIcons}">
     <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-icon-grey'" class="subrole-icon"></mat-icon></button>
+        [matTooltip]="requiredIcon.sr.title" matTooltipPosition="right" (click)="setSubrole()"><mat-icon
+          [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>
+        class="toolbar-icon toolbar-icon--eye eye-icon" [attr.aria-label]="eyeLabel" [matTooltip]="eyeTitle"
+        matTooltipPosition="right" (click)="onToggleVisibility()"><mat-icon [svgIcon]="eyeSvgIcon"
+          class="eye-icon"></mat-icon></button></div>
   </div>
-</div>
+</div>