@allsorter/ui-components 0.0.367 → 0.0.370

package/src/lib/candidate-section/candidate-section.component.html

@@ -0,0 +1,91 @@
+<div class="candidate-container">
+  <div class="columns-wrapper">
+    <div class="column first-column">
+      <div class="container" data-test-id="candidate-section-name-container"
+        [ngClass]="shouldShowFor('name', []) ? '' : 'not-in-template'"><lib-field-placeholder [icon]="getIconName()"
+          [value]="candidateDetails?.firstName && candidateDetails?.lastName ? candidateDetails?.firstName + ' ' + candidateDetails?.lastName : candidateDetails?.firstName || candidateDetails?.lastName"
+          [placeholder]="'Name'" [tooltip]="candidateDetails?.firstName + ' ' + candidateDetails?.lastName"
+          tooltipPosition="right" [testId]="'candidate-section-name'" [valueClass]="'typo-description'"
+          [compact]="true"></lib-field-placeholder></div>
+      <div class="container" data-test-id="candidate-section-gender-container"
+        [ngClass]="shouldShowFor('gender', []) ? '' : 'not-in-template'"><lib-field-placeholder [icon]="getIconGender()"
+          [value]="candidateDetails?.userAssignedGender" [placeholder]="'Gender'"
+          [tooltip]="candidateDetails?.userAssignedGender" tooltipPosition="right" [testId]="'candidate-section-gender'"
+          [valueClass]="'typo-description'" [compact]="true"></lib-field-placeholder></div>
+      <div class="container" data-test-id="candidate-section-phone-container"
+        [ngClass]="shouldShowFor('phone', []) ? '' : 'not-in-template'"><lib-field-placeholder [icon]="getIconPhone()"
+          [value]="candidateDetails?.phoneNumber" [placeholder]="'Phone Number'"
+          [tooltip]="candidateDetails?.phoneNumber" tooltipPosition="right" [testId]="'candidate-section-phone'"
+          [valueClass]="'typo-description'" [compact]="true"></lib-field-placeholder></div>
+      <div class="container" data-test-id="candidate-section-email-container"
+        [ngClass]="shouldShowFor('email', []) ? '' : 'not-in-template'"><lib-field-placeholder [icon]="getIconEmail()"
+          [value]="candidateDetails?.emailAddress" [placeholder]="'Email Address'"
+          [tooltip]="candidateDetails?.emailAddress" tooltipPosition="right" [testId]="'candidate-section-email'"
+          [valueClass]="'typo-description'" [compact]="true"></lib-field-placeholder></div>
+      <div class="container" data-test-id="candidate-section-linkedin-container"
+        [ngClass]="shouldShowFor('linkedin', []) ? '' : 'not-in-template'"><lib-field-placeholder
+          [icon]="getIconLinkedIn()" iconAlt="LinkedIn" [value]="candidateDetails?.linkedin" [placeholder]="'LinkedIn'"
+          [tooltip]="candidateDetails?.linkedin" tooltipPosition="right" [testId]="'candidate-section-linkedin'"
+          [valueClass]="'typo-description'" [compact]="true"></lib-field-placeholder></div>
+    </div>
+    <div class="column second-column">
+      <div data-test-id="candidate-section-address-container"
+        [ngClass]="shouldShowFor('address', []) ? '' : 'not-in-template'">
+        <div [ngClass]="shouldShowFor('addressStreet', []) ? '' : 'not-in-template'"><lib-field-placeholder
+            [icon]="getIconAddress()" [value]="candidateDetails?.street" [placeholder]="'Street'"
+            [tooltip]="candidateDetails?.street" tooltipPosition="right" [testId]="'candidate-section-address-street'"
+            [valueClass]="'typo-description'" [compact]="true"></lib-field-placeholder></div>
+        <div [ngClass]="shouldShowFor('addressCity', []) ? '' : 'not-in-template'"><lib-field-placeholder
+            [value]="candidateDetails?.city" [placeholder]="'City'" [tooltip]="candidateDetails?.city"
+            tooltipPosition="right" [testId]="'candidate-section-address-city'" [valueClass]="'typo-description'"
+            [icon]="'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'"
+            [compact]="true"></lib-field-placeholder></div>
+        <div [ngClass]="shouldShowFor('addressRegion', []) ? '' : 'not-in-template'"><lib-field-placeholder
+            [value]="candidateDetails?.region" [placeholder]="'Region'" [tooltip]="candidateDetails?.region"
+            tooltipPosition="right" [testId]="'candidate-section-address-region'" [valueClass]="'typo-description'"
+            [icon]="'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'"
+            [compact]="true"></lib-field-placeholder></div>
+        <div [ngClass]="shouldShowFor('addressRegionCode', []) ? '' : 'not-in-template'"><lib-field-placeholder
+            [value]="candidateDetails?.regionCode" [placeholder]="'Region Code'"
+            [tooltip]="candidateDetails?.regionCode" tooltipPosition="right"
+            [testId]="'candidate-section-address-region-code'" [valueClass]="'typo-description'"
+            [icon]="'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'"
+            [compact]="true"></lib-field-placeholder></div>
+        <div [ngClass]="shouldShowFor('addressCountry', []) ? '' : 'not-in-template'"><lib-field-placeholder
+            [value]="candidateDetails?.country" [placeholder]="'Country'" [tooltip]="candidateDetails?.country"
+            tooltipPosition="right" [testId]="'candidate-section-address-country'" [valueClass]="'typo-description'"
+            [icon]="'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'"
+            [compact]="true"></lib-field-placeholder></div>
+        <div [ngClass]="shouldShowFor('addressPostCode', []) ? '' : 'not-in-template'"><lib-field-placeholder
+            [value]="candidateDetails?.postCode" [placeholder]="'Post Code'" [tooltip]="candidateDetails?.postCode"
+            tooltipPosition="right" [testId]="'candidate-section-address-post-code'" [valueClass]="'typo-description'"
+            [icon]="'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'"
+            [compact]="true"></lib-field-placeholder></div>
+      </div>
+    </div>
+  </div>
+  <div class="column third-column">
+    <div class="container most-recent-container" data-test-id="candidate-section-current-employer-container">
+      <div [ngClass]="shouldShowFor('currentJob', []) || shouldShowFor('currentEmployer', []) ? '' : 'not-in-template'">
+        <lib-field-placeholder [icon]="getIconMostRecent()"
+          [value]="(getCurrentJob() || getCurrentEmployer()) ? 'Most Recently : <span class=\'most-recent-inline\'>' + (getCurrentJob() ? '<span class=\'total-exp-value\'>' + getCurrentJob() + '</span>' : '') + (getCurrentEmployer() ? (getCurrentJob() ? ' at <span class=\'total-exp-value\'>' + getCurrentEmployer() + '</span>' : '<span class=\'total-exp-value\'>' + getCurrentEmployer() + '</span>') : '') + '</span>' : ''"
+          [placeholder]="'Current Job'"
+          [tooltip]="(getCurrentJob() || getCurrentEmployer()) ? 'Most Recently : ' + getCurrentJob() + (getCurrentEmployer() ? ' at ' + getCurrentEmployer() : '') : 'Current Job'"
+          tooltipPosition="right" [testId]="'candidate-section-current-job'" [valueClass]="'typo-description'"
+          [compact]="true"></lib-field-placeholder>
+        <div class="most-recent-details">
+          <div class="current-job-title" *ngIf="getCurrentJob()">{{getCurrentJob()}}</div>
+          <div class="current-employer" *ngIf="getCurrentEmployer()">{{getCurrentEmployer()}}</div>
+        </div>
+      </div>
+    </div>
+    <div class="total-exp-parent container" data-test-id="candidate-section-total-exp-parent"
+      [ngClass]="shouldShowFor('experience', []) ? '' : 'not-in-template'"><lib-field-placeholder
+        [icon]="getIconExperience()"
+        [value]="getTotalExpYears() ? 'Total Exp - <span class=\'total-exp-value\'>' + getTotalExpYears() + '</span> yrs' : ''"
+        [placeholder]="'Total Exp'"
+        [tooltip]="getTotalExpYears() ? 'Total Exp - ' + getTotalExpYears() + ' yrs' : 'Total Exp'"
+        tooltipPosition="right" [testId]="'candidate-section-total-exp-value'" [valueClass]="'typo-description'"
+        [compact]="true"></lib-field-placeholder></div>
+  </div>
+</div>

package/src/lib/candidate-section/candidate-section.component.scss

@@ -0,0 +1,154 @@
+@import '../styles/typography-classes.scss';
+
+.candidate-container {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  padding-top: 8px;
+}
+
+.columns-wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+  flex: 1 1 0;
+}
+
+.columns-wrapper .first-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex: 1 0 0;
+}
+
+.columns-wrapper .second-column {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.third-column {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  // justify-content: space-between;  align-items: flex-start;
+  flex: 1 0 0;
+  /* space between .container blocks */
+}
+
+.column.has-value {
+  gap: 24px;
+}
+
+.column.no-value {
+  gap: 8px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  /* space between field placeholders inside container */
+}
+
+::ng-deep .total-exp-value {
+  color: var(--Greys-700, #4B4F62);
+  font-family: Roboto, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 140%;
+  /* 19.6px */
+  letter-spacing: 0.035px;
+}
+
+.most-recent-details {
+  display: none;
+  /* Hidden by default for small screens */
+}
+
+.current-job-title {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  font-weight: 700;
+  color: var(--Greys-700, #4B4F62);
+  font-family: Roboto, sans-serif;
+  font-size: 14px;
+  line-height: 140%;
+  letter-spacing: 0.035px;
+}
+
+.current-employer {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  font-style: italic;
+  color: var(--Greys-700, #4B4F62);
+  font-family: Roboto, sans-serif;
+  font-size: 14px;
+  line-height: 140%;
+  letter-spacing: 0.035px;
+}
+
+/* On large screens, show job title and employer on separate lines */
+@media (min-width: 1500px) {
+  .most-recent-container {
+    ::ng-deep .field-row .value-text {
+      span.most-recent-inline {
+        display: none;
+        /* Hide inline job/employer on large screens */
+      }
+    }
+  }
+
+  .most-recent-details {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+
+    padding-left: 28px;
+    /* Align with field placeholder content (icon width + gap) */
+  }
+}
+
+@media (max-width: 1499px) {
+  .candidate-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding-top: 8px;
+  }
+
+  .columns-wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 24px;
+  }
+
+  /* Experience column becomes full-width column on mobile */
+  .third-column {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+    order: 2;
+    /* Ensure it appears after columns-wrapper */
+  }
+
+  /* On mobile, show most recent experience first, then total exp at the very bottom */
+  .third-column .most-recent-container {
+    order: 1;
+  }
+
+  .third-column .total-exp-parent {
+    order: 2;
+  }
+}

package/src/lib/checkbox/checkbox.component.html

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

package/src/lib/checkbox/checkbox.component.scss

@@ -0,0 +1,280 @@
+/* ============================================
+   CHECKBOX COMPONENT STYLES
+   ============================================ */
+
+@import '../styles/colors.scss';
+@import '../styles/border-radius.scss';
+@import '../styles/typography-classes.scss';
+
+/* ============================================
+   CUSTOM COLOR THEMES
+   ============================================ */
+
+/* Default/Primary Color (Blue) */
+::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background {
+  background-color: $color-blue-500 !important;
+  border-color: $color-blue-500 !important;
+}
+
+::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__checkmark {
+  color: white !important;
+}
+
+/* Primary Theme (Blue) */
+::ng-deep .mat-mdc-checkbox.mat-primary.mat-mdc-checkbox-checked .mdc-checkbox__background {
+  background-color: $color-blue-500 !important;
+  border-color: $color-blue-500 !important;
+}
+
+/* Green Theme */
+::ng-deep .mat-mdc-checkbox.mat-green.mat-mdc-checkbox-checked .mdc-checkbox__background {
+  background-color: $color-green-500 !important;
+  border-color: $color-green-500 !important;
+}
+
+/* Error Theme (Red) */
+::ng-deep .mat-mdc-checkbox.mat-error.mat-mdc-checkbox-checked .mdc-checkbox__background {
+  background-color: $color-error-500 !important;
+  border-color: $color-error-500 !important;
+}
+
+/* ============================================
+   DISABLED STATE STYLING
+   ============================================ */
+
+/* Disabled - Unchecked State */
+::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled:not(.mat-mdc-checkbox-checked) .mdc-checkbox__background {
+  border: 2px solid $color-grey-400 !important;
+}
+
+/* Disabled - Checked State */
+::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled.mat-mdc-checkbox-checked .mdc-checkbox__background {
+  background-color: #DEE0E6 !important;
+  border-color: $color-grey-400 !important;
+}
+
+/* Disabled Checkmark */
+::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .mdc-checkbox__checkmark {
+  color: #fff !important;
+}
+
+/* ============================================
+   UNCHECKED STATE STYLING
+   ============================================ */
+
+/* Unchecked State Border */
+::ng-deep .mat-mdc-checkbox .mdc-checkbox__background {
+  border-color: $color-grey-600 !important;
+}
+
+/* Unchecked State Styling */
+::ng-deep .mat-mdc-checkbox:not(.mat-mdc-checkbox-checked) .mdc-checkbox__background {
+  border: 2px solid $color-grey-600 !important;
+  background-color: transparent !important;
+}
+
+/* ============================================
+   INTERACTIVE STATES (FOCUS & HOVER)
+   ============================================ */
+
+/* Default Ripple State - Transparent */
+::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple {
+  background-color: transparent !important;
+  opacity: 1 !important;
+  transition: background-color 0.2s ease !important;
+}
+
+/* Hover State - Circular hover effect */
+::ng-deep .mat-mdc-checkbox:hover:not(.mat-mdc-checkbox-disabled) .mdc-checkbox__ripple {
+  background-color: rgba($color-blue-500, 0.12) !important;
+}
+
+/* Focus State - Circular focus effect */
+::ng-deep .mat-mdc-checkbox.mat-focused .mdc-checkbox__ripple {
+  background-color: rgba($color-blue-500, 0.12) !important;
+}
+
+/* ============================================
+   CHECKBOX SHAPE & BORDER RADIUS
+   ============================================ */
+
+/* Checkbox Border Radius */
+::ng-deep .mat-mdc-checkbox .mdc-checkbox__background {
+  border-radius: 2px !important;
+}
+
+/* ============================================
+   TYPOGRAPHY STYLING
+   ============================================ */
+
+/* Material Design Label Styling */
+::ng-deep .mat-mdc-checkbox .mdc-form-field>label {
+  @extend .font-label-large;
+  color: $color-grey-700 !important;
+}
+
+/* ============================================
+   CUSTOM LABEL COMPONENTS
+   ============================================ */
+
+/* Wrapper for label + helper text */
+.checkbox-label-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin-top: 12px;
+}
+
+/* Row to keep label and helper icon on the same line */
+.checkbox-label-main-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Main Label Styling */
+.checkbox-label-main {
+  @extend .font-label-large;
+  color: $color-grey-700 !important;
+}
+
+/* Helper Text Styling */
+.checkbox-label-helper {
+  @extend .font-label-medium;
+  color: $color-grey-500 !important;
+  margin-top: 0px !important;
+}
+
+/* Disabled Labels & Helper Text */
+::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .checkbox-label-main,
+::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .checkbox-label-helper {
+  color: $color-grey-400 !important;
+  cursor: not-allowed;
+}
+
+/* Helper icon next to label */
+.checkbox-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;
+}
+
+.checkbox-helper-icon:disabled {
+  border-color: #DEE0E6;
+  color: #DEE0E6;
+  cursor: not-allowed;
+}
+
+/* Primary Theme Ripple */
+::ng-deep .mat-mdc-checkbox.mat-primary .mat-ripple-element {
+  background-color: rgba($color-blue-500, 0.8) !important;
+  /* Blue with transparency */
+}
+
+/* Green Theme Ripple */
+::ng-deep .mat-mdc-checkbox.mat-green .mat-ripple-element {
+  background-color: rgba($color-green-500, 0.8) !important;
+  /* Green with transparency */
+}
+
+/* Error Theme Ripple */
+::ng-deep .mat-mdc-checkbox.mat-error .mat-ripple-element {
+  background-color: rgba($color-error-500, 0.8) !important;
+  /* Red with transparency */
+}
+
+
+
+
+// ::ng-deep .mat-mdc-checkbox .mat-mdc-checkbox .mat-mdc-checkbox-background {
+//   top: calc((var(--mdc-checkbox-state-layer-size, 44px) - 28px) / 2) !important;
+//   left: calc((var(--mdc-checkbox-state-layer-size, 44px) - 28px) / 2) !important;
+
+// }
+
+// ::ng-deep .mdc-checkbox {
+//   padding: 0px !important;
+// }
+
+// ::ng-deep .mdc-checkbox .mdc-checkbox__native-control {
+//   position: absolute;
+//   margin: 0;
+//   padding: 0;
+//   opacity: 0;
+//   cursor: inherit;
+//   width: var(--mdc-checkbox-state-layer-size, 18px);
+//   height: var(--mdc-checkbox-state-layer-size, 18px);
+//   top: calc((var(--mdc-checkbox-state-layer-size, 18px) - var(--mdc-checkbox-state-layer-size, 18)) / 2);
+//   right: calc((var(--mdc-checkbox-state-layer-size, 18) - var(--mdc-checkbox-state-layer-size, 18)) / 2);
+//   left: calc((var(--mdc-checkbox-state-layer-size, 18) - var(--mdc-checkbox-state-layer-size, 18)) / 2);
+// }
+// ::ng-deep .mdc-checkbox .mdc-checkbox__native-control {
+//   width: 18px !important;
+//   height: 18px !important;
+//   top: 0px !important;
+//   left: 0px !important;
+//   right: 0px !important;
+//   bottom: 0px !important;
+// }
+
+// ::ng-deep .mdc-checkbox {
+//   --mdc-checkbox-state-layer-size: 18px !important;
+//   padding: 0 !important;
+//   /* 2px each side */
+// }
+
+// ::ng-deep .mat-mdc-checkbox-touch-target {
+//   width: 24px !important;
+//   height: 24px !important;
+//   top: 9px !important;
+//   left: 10px !important;
+// }
+/* Checkbox box */
+::ng-deep .mdc-checkbox .mdc-checkbox__native-control {
+  width: 18px !important;
+  height: 18px !important;
+  top: 0 !important;
+  left: 0 !important;
+}
+
+/* State layer size */
+::ng-deep .mdc-checkbox {
+  --mdc-checkbox-state-layer-size: 18px !important;
+  padding: 0 !important;
+}
+
+/* Touch target */
+::ng-deep .mat-mdc-checkbox-touch-target {
+  width: 24px !important;
+  height: 24px !important;
+}
+
+/* Ripple circle */
+::ng-deep .mdc-checkbox .mdc-checkbox__ripple {
+  width: 36px !important;
+  height: 36px !important;
+  border-radius: 50% !important;
+  top: 50% !important;
+  left: 50% !important;
+  transform: translate(-50%, -50%) !important;
+  opacity: 1 !important;
+  pointer-events: none !important;
+}
+
+// Label spacing: default 0; enable when host has labels
+::ng-deep mat-checkbox .mat-internal-form-field {
+  gap: 0 !important;
+}
+
+:host(.has-labels) ::ng-deep mat-checkbox .mat-internal-form-field {
+  gap: 8px !important;
+}

package/src/lib/custom-editor/custom-editor.component.html

@@ -0,0 +1,129 @@
+<!-- Editor Labels Section -->
+<div class="editor-labels" *ngIf="showLabels">
+  <div class="left-label">{{ leftLabelText }}</div>
+  <div class="right-label">{{ rightLabelText }}</div>
+</div>
+<div class="editor-container">
+  <!-- Toolbar Section -->
+  <div class="toolbar">
+    <!-- Styling Dropdown (Small Screens Only) -->
+    <div class="styling-dropdown" *ngIf="isSmallScreen">
+      <span class="styling-text" (mouseenter)="showStylingDropdownOnHover()" (mouseleave)="hideStylingDropdown()">
+        Styling
+      </span>
+
+      <div class="styling-dropdown-content" *ngIf="showStylingDropdown" (mouseenter)="clearStylingDropdownTimeout()"
+        (mouseleave)="hideStylingDropdown()">
+        <button *ngFor="let item of toolbarConfig" class="format-button" [class.active]="getActiveState(item.type)"
+          (click)="execCmd($event, item.command)" [title]="item.title" type="button">
+          <mat-icon *ngIf="isSvgIcon(item.icon)" [svgIcon]="item.icon"
+            [class.active-icon]="getActiveState(item.type)"></mat-icon>
+          <span *ngIf="!isSvgIcon(item.icon)" class="material-icons" [class.active-icon]="getActiveState(item.type)">
+            {{ item.icon }}
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <!-- Individual Styling Buttons (Large Screens Only) -->
+    <button *ngFor="let item of toolbarConfig" class="format-button" [class.active]="getActiveState(item.type)"
+      [class.hide-on-small]="true" (click)="execCmd($event, item.command)" [title]="item.title" type="button"
+      [matTooltip]="item.title" matTooltipPosition="above">
+      <mat-icon *ngIf="isSvgIcon(item.icon)" [svgIcon]="item.icon"
+        [class.active-icon]="getActiveState(item.type)"></mat-icon>
+      <span *ngIf="!isSvgIcon(item.icon)" class="material-icons" [class.active-icon]="getActiveState(item.type)">
+        {{ item.icon }}
+      </span>
+    </button>
+
+    <!-- Text Formatting Dropdown (Small Screens Only) -->
+    <div class="text-formatting-dropdown" *ngIf="isSmallScreen">
+      <span class="text-formatting-text" (mouseenter)="showTextFormattingDropdownOnHover()"
+        (mouseleave)="hideTextFormattingDropdown()">
+        Text Formatting
+      </span>
+
+      <div class="text-formatting-dropdown-content" *ngIf="showTextFormattingDropdown"
+        (mouseenter)="clearTextFormattingDropdownTimeout()" (mouseleave)="hideTextFormattingDropdown()">
+
+        <!-- Text Formatting Buttons -->
+        <button *ngFor="let item of textFormattingConfig" class="format-button"
+          [class.active]="getActiveState(item.type)" (click)="handleTextFormattingClick($event, item)"
+          [title]="item.title" type="button">
+          <mat-icon *ngIf="isSvgIcon(item.icon)" [svgIcon]="item.icon"
+            [class.active-icon]="getActiveState(item.type)"></mat-icon>
+          <span *ngIf="!isSvgIcon(item.icon)" class="material-icons" [class.active-icon]="getActiveState(item.type)">
+            {{ item.icon }}
+          </span>
+        </button>
+
+        <!-- Auto Bullet Button -->
+        <button *ngIf="autobullet" class="ms-3 auto-bullet" mat-flat-button (click)="transformToBullets($event)"
+          [disabled]="autoBulletDisable || isLoadingAI || !checkHtmlContent('')">
+          {{ AutoBulletButton }}
+        </button>
+
+        <!-- Bullet Skill Button -->
+        <button *ngIf="skillsBullet" class="ms-3 bullet-skill" mat-flat-button
+          (click)="transformToSkillsBullets($event)" [disabled]="isDisabled || isLoadingAI">
+          {{ skillsButton }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Individual Text Formatting Buttons (Large Screens Only) -->
+    <button *ngFor="let item of textFormattingConfig" class="format-button" [class.active]="getActiveState(item.type)"
+      [class.hide-on-small]="true" (click)="handleTextFormattingClick($event, item)" [title]="item.title" type="button"
+      [matTooltip]="item.title" matTooltipPosition="above">
+      <mat-icon *ngIf="isSvgIcon(item.icon)" [svgIcon]="item.icon"
+        [class.active-icon]="getActiveState(item.type)"></mat-icon>
+      <span *ngIf="!isSvgIcon(item.icon)" class="material-icons" [class.active-icon]="getActiveState(item.type)">
+        {{ item.icon }}
+      </span>
+    </button>
+
+    <!-- Table Component -->
+    <app-table *ngIf="showTable" [getEditorElement]="getBoundGetEditorElement()"
+      [saveHistoryMethod]="getBoundSaveHistory()" [textChangeMethod]="getBoundTextChange()" matTooltip="Table"
+      matTooltipPosition="above">
+    </app-table>
+
+    <!-- Auto Bullet Button (Large Screens Only) -->
+    <button *ngIf="autobullet && !isSmallScreen" class="ms-3 auto-bullet" mat-flat-button
+      (click)="transformToBullets($event)" [disabled]="autoBulletDisable || isLoadingAI || !checkHtmlContent('')">
+      {{ AutoBulletButton }}
+    </button>
+
+    <!-- Bullet Skill Button (Large Screens Only) -->
+    <button *ngIf="skillsBullet && !isSmallScreen" class="ms-3 bullet-skill" mat-flat-button
+      (click)="transformToSkillsBullets($event)" [disabled]="isDisabled || isLoadingAI">
+      {{ skillsButton }}
+    </button>
+
+    <!-- History Controls (Undo/Redo) -->
+    <div *ngIf="historyControls" class="history-controls">
+      <!-- Undo Button -->
+      <button class="ms-3 format-button" (click)="execCmd($event, 'undo')" title="Undo" type="button" matTooltip="Undo"
+        matTooltipPosition="above">
+        <span class="material-icons" [class.active-icon]="getActiveState('undo')">
+          undo
+        </span>
+      </button>
+
+      <!-- Redo Button -->
+      <button class="ms-3 format-button" (click)="execCmd($event, 'redo')" title="Redo" type="button" matTooltip="Redo"
+        matTooltipPosition="above">
+        <span class="material-icons" [class.active-icon]="getActiveState('redo')">
+          redo
+        </span>
+      </button>
+    </div>
+  </div>
+
+  <!-- Editor Content Area -->
+  <div class="editor-content" #editorReference contenteditable="true" [id]="editorId" (click)="updateTagHierarchy()"
+    (input)="onEditorInput()" (paste)="handlePaste($event)" (keydown)="handleKeydown($event)"
+    (click)="toggleDiv($event, true)" spellcheck="false" role="textbox" aria-label="Rich text editor"
+    aria-multiline="true" [attr.data-testid]="dataTestId">
+  </div>
+</div>