@allsorter/ui-components 0.0.367 → 0.0.370

package/src/lib/date-range/date-range.component.scss

@@ -0,0 +1,284 @@
+/* Date Range Component Styles - Matching Input Component Approach */
+
+@import '../styles/colors.scss';
+@import '../styles/spacing.scss';
+@import '../styles/typography-classes.scss';
+@import '../styles/border-radius.scss';
+@import '../styles/elevation.scss';
+
+/* Container styling */
+.mat_form {
+  width: 100%;
+
+}
+
+/* Range display styling */
+.range-display {
+  margin-top: var(--space-8);
+  padding: var(--space-8) var(--space-12);
+  background: var(--color-grey-50);
+  border-radius: var(--radius-4);
+  border: 1px solid var(--color-grey-200);
+}
+
+.range-text {
+  font-size: 14px;
+  color: var(--color-grey-700);
+  font-weight: 500;
+}
+
+.range-text.invalid {
+  color: var(--color-error-500);
+}
+
+.error-message {
+  display: block;
+  font-size: 12px;
+  color: var(--color-error-500);
+  margin-top: var(--space-4);
+}
+
+/* Clear button styling */
+.clear-button {
+  color: var(--color-grey-500);
+  margin-left: var(--space-4);
+}
+
+.clear-button:hover {
+  color: var(--color-error-500);
+}
+
+/* Hide range text */
+.range-text {
+  display: none !important;
+}
+
+/* ===== SIZE STYLES (Matching Input Component) ===== */
+
+/* Size-specific form field infix */
+::ng-deep .al-date-range-size-small .mat-mdc-form-field-infix,
+::ng-deep .al-date-range-size-medium .mat-mdc-form-field-infix,
+::ng-deep .al-date-range-size-large .mat-mdc-form-field-infix {
+  padding: 0 12px !important;
+  display: flex;
+  align-items: center;
+}
+
+::ng-deep .al-date-range-size-small .mat-mdc-form-field-infix {
+  min-height: 34px !important;
+  height: 34px !important;
+}
+
+::ng-deep .al-date-range-size-medium .mat-mdc-form-field-infix {
+  min-height: 40px !important;
+  height: 40px !important;
+}
+
+::ng-deep .al-date-range-size-large .mat-mdc-form-field-infix {
+  min-height: 48px !important;
+  height: 48px !important;
+}
+
+/* ===== CATEGORY STYLES ===== */
+
+/* Default category */
+::ng-deep .al-date-range-category-default {
+  --mdc-outlined-text-field-outline-color: #C3C5D1 !important;
+  --mdc-outlined-text-field-focus-outline-color: #5473E8 !important;
+  --mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;
+  --mdc-outlined-text-field-outline-width: 1px !important;
+  --mdc-outlined-text-field-focus-outline-width: 1px !important;
+  --mdc-outlined-text-field-hover-outline-width: 1px !important;
+}
+
+/* Disabled category */
+::ng-deep .al-date-range-category-disabled {
+  --mdc-outlined-text-field-outline-color: var(--color-grey-300) !important;
+  --mdc-outlined-text-field-focus-outline-color: var(--color-grey-300) !important;
+  --mdc-outlined-text-field-hover-outline-color: var(--color-grey-300) !important;
+  --mdc-outlined-text-field-outline-width: 1px !important;
+  --mdc-outlined-text-field-focus-outline-width: 1px !important;
+  --mdc-outlined-text-field-hover-outline-width: 1px !important;
+}
+
+/* Global background color for all date range fields */
+::ng-deep .mat_form .mat-mdc-form-field-flex,
+::ng-deep .mat_form .mat-mdc-text-field-wrapper,
+::ng-deep .mat_form .mat-mdc-form-field-infix {
+  background-color: #F7F9FE !important;
+}
+
+/* Hide subscript wrapper by default */
+::ng-deep .mat_form .mat-mdc-form-field-subscript-wrapper {
+  background-color: transparent !important;
+  display: none !important;
+}
+
+/* Show subscript wrapper only when there's hint text */
+::ng-deep .mat_form .mat-mdc-form-field-subscript-wrapper {
+  display: block !important;
+}
+
+::ng-deep .mat_form .mat-mdc-form-field-focus-overlay {
+  background-color: #F7F9FE !important;
+}
+
+/* Remove box shadows */
+::ng-deep .mat_form .mat-mdc-form-field .mdc-notched-outline {
+  box-shadow: none !important;
+}
+
+/* Direct border color overrides to ensure C3C5D1 across states */
+::ng-deep .mat_form .mdc-notched-outline__leading,
+::ng-deep .mat_form .mdc-notched-outline__notch,
+::ng-deep .mat_form .mdc-notched-outline__trailing {
+  border-color: #C3C5D1 !important;
+  border-width: 1px !important;
+}
+
+::ng-deep .mat_form .mat-mdc-form-field:hover .mdc-notched-outline__leading,
+::ng-deep .mat_form .mat-mdc-form-field:hover .mdc-notched-outline__notch,
+::ng-deep .mat_form .mat-mdc-form-field:hover .mdc-notched-outline__trailing {
+  border-color: #C3C5D1 !important;
+  border-width: 1px !important;
+}
+
+::ng-deep .mat_form .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,
+::ng-deep .mat_form .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,
+::ng-deep .mat_form .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing {
+  border-color: #5473E8 !important;
+  border-width: 1px !important;
+}
+
+::ng-deep .mat_form .mat-mdc-form-field:active .mdc-notched-outline__leading,
+::ng-deep .mat_form .mat-mdc-form-field:active .mdc-notched-outline__notch,
+::ng-deep .mat_form .mat-mdc-form-field:active .mdc-notched-outline__trailing {
+  border-color: #5473E8 !important;
+  border-width: 1px !important;
+}
+
+/* Remove the small grey border before the label (notch seam) */
+::ng-deep .mat_form .mdc-notched-outline__leading {
+  border-right: none !important;
+}
+
+::ng-deep .mat_form .mdc-notched-outline__notch {
+  border-left: none !important;
+  border-right: none !important;
+}
+
+/* Icon sizing to match input component */
+::ng-deep .al-date-range-size-small mat-icon {
+  height: 16px !important;
+  width: 16px !important;
+  font-size: 16px !important;
+}
+
+::ng-deep .al-date-range-size-medium mat-icon {
+  height: 24px !important;
+  width: 24px !important;
+  font-size: 24px !important;
+}
+
+::ng-deep .al-date-range-size-large mat-icon {
+  height: 24px !important;
+  width: 24px !important;
+  font-size: 24px !important;
+}
+
+/* Floating label positioning */
+::ng-deep .al-date-range-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+  top: 13px !important;
+}
+
+::ng-deep .al-date-range-size-medium .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+  top: 16px !important;
+}
+
+::ng-deep .al-date-range-size-large .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+  top: 20px !important;
+}
+
+/* Label transform calculations */
+::ng-deep .al-date-range-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(calc(calc(6.75px + 16px) * -1)) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
+  transform: var(--mat-mdc-form-field-label-transform);
+}
+
+::ng-deep .al-date-range-size-medium .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(calc(calc(6.75px + 18px) * -1)) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
+  transform: var(--mat-mdc-form-field-label-transform);
+}
+
+::ng-deep .al-date-range-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(calc(calc(6.75px + 23px) * -1)) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
+  transform: var(--mat-mdc-form-field-label-transform);
+}
+
+/* Touch target sizing for datepicker toggle button */
+::ng-deep .mat-mdc-button-touch-target {
+  height: 24px !important;
+  width: 24px !important;
+}
+
+/* Icon button styling for datepicker toggle - Base height 40px */
+::ng-deep .mat-mdc-icon-button.mat-mdc-button-base {
+  padding: var(--space-8) !important;
+  height: 40px !important;
+  width: 40px !important;
+}
+
+/* Size-specific icon button dimensions */
+::ng-deep .al-date-range-size-small .mat-mdc-icon-button.mat-mdc-button-base {
+  padding: 0 !important;
+  height: 24px !important;
+  width: 24px !important;
+}
+
+::ng-deep .al-date-range-size-medium .mat-mdc-icon-button.mat-mdc-button-base {
+  padding: 0 !important;
+  height: 24px !important;
+  width: 24px !important;
+}
+
+::ng-deep .al-date-range-size-large .mat-mdc-icon-button.mat-mdc-button-base {
+  padding: var(--space-8) !important;
+  height: 24px !important;
+  width: 24px !important;
+}
+
+/* Size-specific touch target for icon buttons */
+::ng-deep .al-date-range-size-small .mat-mdc-button-touch-target {
+  height: 24px !important;
+  width: 24px !important;
+}
+
+::ng-deep .al-date-range-size-medium .mat-mdc-button-touch-target {
+  height: 24px !important;
+  width: 24px !important;
+}
+
+::ng-deep .al-date-range-size-large .mat-mdc-button-touch-target {
+  height: 24px !important;
+  width: 24px !important;
+}
+
+/* Primary color for outlined text field floating label */
+::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label {
+  color: #5473E8 !important;
+}
+
+/* Responsive design for smaller screens */
+
+/* Right spacing for datepicker icon */
+::ng-deep .mat_form .mat-mdc-form-field-suffix {
+  margin-right: 12px !important;
+}
+
+::ng-deep .mat_form .mat-datepicker-toggle {
+  margin-right: 12px !important;
+}
+
+::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
+  padding-left: 0 !important;
+}

package/src/lib/editable-form-wrapper/editable-form-wrapper.component.html

@@ -0,0 +1,12 @@
+<div class="al-form-wrapper" #wrapper [attr.data-test-id]="testId">
+  <div *ngIf="showLeftButton" #leftButton class="fab left"><al-button [buttonType]="'icon-circle'" [iconOnly]="true"
+      [leftIcon]="'auto_fix_high'" [arialabel]="'Edit'" [size]="'base'" [category]="'gradient'"
+      (onClick)="leftButtonClick.emit($event)"></al-button></div>
+  <div class="inner"><ng-content></ng-content></div>
+  <div class="fab-group right" #buttonGroup><al-button *ngIf="showSaveButton" class="fab" [buttonType]="'icon-circle'"
+      [iconOnly]="true" [leftIcon]="'save'" [arialabel]="'Save'" [size]="'base'"
+      [category]="'green'" (onClick)="saveButtonClick.emit($event)"></al-button><al-button *ngIf="showDeleteButton" class="fab warn" [buttonType]="'icon-circle'"
+      [iconOnly]="true" [leftIcon]="'close'" [arialabel]="'Delete'" [size]="'base'" [category]="'error'"
+      (onClick)="deleteButtonClick.emit($event)"></al-button>
+  </div>
+</div>

package/src/lib/editable-form-wrapper/editable-form-wrapper.component.scss

@@ -0,0 +1,227 @@
+@import "../styles/typography-classes.scss";
+@import "../styles/colors.scss";
+@import "../styles/border-radius.scss";
+
+:host {
+  display: block;
+  position: relative;
+  padding: 0;
+  /* ensure the blue surround starts flush; spacing is controlled by 6px inset */
+}
+
+/* Flexible grid utilities for complex layouts
+   Use ::ng-deep so these styles apply to projected content inside <al-form> */
+:host ::ng-deep .al-form__grid {
+  display: grid;
+  gap: 16px;
+  /* design: 16px between fields/columns */
+  margin-top: 16px;
+  /* design: 16px between rows */
+}
+
+:host ::ng-deep .al-form__grid.cols-1 {
+  grid-template-columns: 1fr;
+}
+
+:host ::ng-deep .al-form__grid.cols-2 {
+  grid-template-columns: 1fr 1fr;
+}
+
+:host ::ng-deep .al-form__grid.cols-3 {
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+:host ::ng-deep .al-form__grid .full {
+  grid-column: 1 / -1;
+}
+
+.al-form-wrapper {
+  position: relative;
+  /* Outer card look */
+  /* add side gutters so FABs fit without overflow */
+  //padding: 8px 0 !important;
+  /* outer white padding removed; blue area + border + inner card manage spacing */
+  border-radius: 16px;
+  /* rounded outer blue area */
+  background: transparent;
+  /* no solid blue block; halo is rendered by the ::before shadow */
+
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow: visible;
+  /* allow FABs to hang slightly without clipping */
+}
+
+/* Subtle outer rounded border (like a frame) */
+.al-form-wrapper::before {
+  content: '';
+  position: absolute;
+  inset: 0px;
+  /* distance from wrapper edges = blue area size */
+  /* Stronger, crisp border like the design */
+  border: 1px solid var(--Base-Blue, #6581EA);
+  /* IMPORTANT: adjust radius so the inset border follows the same curve */
+  border-radius: calc(16px - 6px);
+  /* Soft halo outside the border to match the blue glow in the mock */
+  box-shadow: 0 0 0 6px rgba(84, 115, 232, 0.08);
+  pointer-events: none;
+  z-index: 1;
+  /* keep border above the inner white card */
+}
+
+/* Inner white card that holds the projected form content and
+   provides exactly 24px (T/B) and 34px (L/R) padding after the border */
+.al-form-wrapper>.inner {
+  position: relative;
+
+  /* space between outer blue edge and inner card; matches border inset */
+  padding: 32px !important;
+  /* requested content padding inside the border */
+  /* IMPORTANT: inner card radius must match border's inner curve */
+  border-radius: calc(16px - 6px);
+  background: #ffffff;
+  /* clean white content area */
+  box-sizing: border-box;
+  z-index: 0;
+
+}
+
+/* Trim accidental extra spacing from first/last child margins inside content */
+.al-form-wrapper>.inner> :first-child {
+  margin-top: 0 !important;
+}
+
+.al-form-wrapper>.inner> :last-child {
+  margin-bottom: 0 !important;
+}
+
+/* Header styles for projected content */
+.al-form__header {
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+}
+
+.al-form__title {
+  font-weight: 600;
+  color: #222;
+}
+
+.al-form__hint {
+  color: #7a818f;
+}
+
+.al-form__paragraph {
+  margin: 6px 0 0;
+  color: #3a3f4a;
+}
+
+/* Demo form styles (optional helpers for stories) */
+.al-form__demo-form {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-top: 10px;
+}
+
+/* Responsive form layout */
+@media (max-width: 767.98px) {
+  .al-form__demo-form {
+    grid-template-columns: 1fr;
+  }
+}
+
+.al-form__demo-form .full {
+  grid-column: 1 / -1;
+}
+
+.al-form__field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.al-form__field label {
+  font-size: 12px;
+  color: #5a6170;
+}
+
+.al-form__control {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #d9def4;
+  border-radius: 10px;
+  background: #fff;
+  color: #2a2f3a;
+  outline: none;
+  box-sizing: border-box;
+  box-shadow: 0 1px 0 rgba(88, 119, 255, 0.06), inset 0 0 0 2px rgba(88, 119, 255, 0.03);
+  transition: box-shadow .15s ease, border-color .15s ease;
+}
+
+.al-form__control:focus {
+  border-color: rgba(88, 119, 255, 0.6);
+  box-shadow: 0 0 0 3px rgba(88, 119, 255, 0.14);
+}
+
+select.al-form__control {
+  appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, #7a86ff 50%),
+    linear-gradient(135deg, #7a86ff 50%, transparent 50%);
+  background-position: calc(100% - 18px) calc(1em + 2px),
+    calc(100% - 13px) calc(1em + 2px);
+  background-size: 5px 5px, 5px 5px;
+  background-repeat: no-repeat;
+}
+
+/* Floating Action Buttons */
+// .fab {
+//   width: 40px;
+//   height: 40px;
+//   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
+//   border-radius: 50%;
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   padding: 0;
+//   min-width: 40px; // override any button min-width
+// }
+
+.fab.left {
+  position: absolute;
+  left: -16px;
+  /* intended design: slightly outside the inner frame */
+  top: 0;
+  /* Changed from top: 50% to top: 0, transform will be handled by JS */
+  z-index: 2;
+  background-color: #fff;
+  border-radius: 50%;
+  will-change: transform;
+  /* Optimize for smooth scrolling */
+  transition: transform 0.1s ease-out;
+}
+
+.fab-group.right {
+  position: absolute;
+  right: -16px;
+  /* slightly outside the inner frame */
+  top: 0;
+  /* Changed from top: 50% to top: 0, transform will be handled by JS */
+  display: flex;
+  flex-direction: column;
+  border-radius: 50%;
+  gap: 8px;
+  z-index: 2;
+  background-color: #fff;
+  will-change: transform;
+  /* Optimize for smooth scrolling */
+  transition: transform 0.1s ease-out;
+}
+
+/* Add gap between form rows (app-flex-grid elements) */
+:host ::ng-deep app-flex-grid+app-flex-grid {
+  margin-top: 16px;
+}
+
+/* Remove special outline/background styles so buttons render as-is */

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

@@ -0,0 +1,20 @@
+<al-responsive-columns [gap]="gap" [padding]="padding" [leftWidth]="leftWidth" [rightWidth]="rightWidth"
+  [stackAt]="stackAt">
+  <div left><app-toolbar-left [variant]="variant" [content]="content"
+      [isExtractionAnalysisActive]="isExtractionAnalysisActive" [showSearch]="showSearch"
+      [overrideConfig]="overrideConfig" (editEvent)="onEditEvent($event)"></app-toolbar-left></div>
+  <div center><al-resume-entries [entries]="entries" [showHeader]="showHeader"
+      [showDescriptionLabel]="showDescriptionLabel" [showCompany]="showCompany" [showJobTitle]="showJobTitle"
+      [showDates]="showDates" [showLocation]="showLocation" [showTimeline]="showTimeline"
+      [showReapplyButton]="showReapplyButton" [showLoader]="showLoader" [loaderForAllEntries]="loaderForAllEntries"
+      [loaderStatus]="loaderStatus" [loaderSize]="loaderSize" [skills]="skills" [companyTooltip]="companyTooltip"
+      [jobTitleTooltip]="jobTitleTooltip" [dateTooltip]="dateTooltip" [locationTooltip]="locationTooltip"
+      [descriptionTooltip]="descriptionTooltip" [tooltipPosition]="tooltipPosition" [isSectionHidden]="isSectionHidden"
+      (reapplyClick)="onReapplyClick($event)" (undoClick)="onUndoClick($event)"></al-resume-entries>
+  </div>
+  <div right><app-toolbar-right [checked]="checked" [alwaysShowIcons]="alwaysShowIcons"
+      [overrideConfig]="overrideConfigRight" [currentObj]="currentObj" (checkboxChange)="onCheckboxChange($event)"
+      (visibilityToggle)="onVisibilityToggle($event)" (hideShowEvent)="onHideShowEvent($event)"
+      (checkboxEvent)="onCheckboxEvent($event)" (setSubroleEvent)="onSetSubroleEvent($event)"></app-toolbar-right>
+  </div>
+</al-responsive-columns>

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

@@ -0,0 +1,17 @@
+<div class="field-row" [class.field-row-compact]="compact === true" [class.field-row-padded]="padded === true">
+  <ng-container *ngIf="icon">
+    <span class="field-icon">
+      <ng-container *ngIf="isMaterialIcon(icon); else imageIcon">
+        <mat-icon [fontSet]="iconFont">{{ icon }}</mat-icon>
+      </ng-container>
+      <ng-template #imageIcon>
+        <img [src]="icon" [alt]="iconAlt || 'icon'" />
+      </ng-template>
+    </span>
+  </ng-container>
+  <span [matTooltip]="tooltip" [matTooltipPosition]="tooltipPosition"
+    [ngClass]="value ? ['value-text', valueClass] : ['placeholder-text', placeholderClass]"
+    [attr.data-test-id]="testId">
+    <span [innerHTML]="value ? value : placeholder"></span>
+  </span>
+</div>

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

@@ -0,0 +1,119 @@
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+/* Material Icons */
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
+
+/* Make all typography utility classes available inside this component */
+@import '../styles/typography-classes.scss';
+
+
+
+.placeholder-text {
+  padding: 4px 8px;
+  letter-spacing: 0.25px;
+  border-radius: 4px;
+  background-color: #E5E9FC;
+  width: max-content;
+  font-family: 'Open Sans', Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  color: #768FED;
+}
+
+// Default typography on host so inner content can inherit,
+// and external classes on <lib-field-placeholder> can override.
+// :host {
+//   color: var(--Greys-700, #4B4F62);
+//   font-family: var(--Body-Medium-Font, Roboto);
+//   font-size: 14px;
+//   font-style: normal;
+//   font-weight: 400;
+//   line-height: 20px;
+//   letter-spacing: 0.25px;
+// }
+
+// .value-text {
+//   // Don't set any hard values - let the classes from new-typography.scss apply
+//   color: inherit;
+//   font-family: inherit;
+//   font-size: inherit;
+//   font-style: inherit;
+//   font-weight: inherit;
+//   line-height: inherit;
+//   letter-spacing: inherit;
+
+//   // Ensure the new typography classes can override
+//   &.font-text-5xl,
+//   &.font-text-5xl-medium,
+//   &.font-text-5xl-bold,
+//   &.font-text-4xl,
+//   &.font-text-4xl-medium,
+//   &.font-text-4xl-bold,
+//   &.font-text-3xl,
+//   &.font-text-3xl-medium,
+//   &.font-text-3xl-bold,
+//   &.font-text-2xl,
+//   &.font-text-2xl-medium,
+//   &.font-text-2xl-bold,
+//   &.font-text-xl,
+//   &.font-text-xl-medium,
+//   &.font-text-xl-bold,
+//   &.font-text-lg,
+//   &.font-text-lg-medium,
+//   &.font-text-lg-bold,
+//   &.font-text-base,
+//   &.font-text-base-medium,
+//   &.font-text-base-bold,
+//   &.font-text-sm,
+//   &.font-text-sm-medium,
+//   &.font-text-sm-bold,
+//   &.font-text-xs,
+//   &.font-text-xs-medium,
+//   &.font-text-xs-bold {
+//     // Classes now have higher specificity to override host styles
+//   }
+// }
+
+.field-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.field-row-compact {
+  leading-trim: both;
+  text-edge: cap;
+  font-style: normal;
+  line-height: 140%;
+  letter-spacing: 0.04px;
+  height: 28px;
+  // padding: 8px 0;
+}
+
+.field-row-padded {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.field-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.field-icon img,
+.field-icon mat-icon {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+  font-size: 20px;
+  line-height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #37C1CE;
+}

package/src/lib/general-container/general-container.component.html

@@ -0,0 +1,3 @@
+<div class="general-container" [ngStyle]="containerStyles">
+  <ng-content></ng-content>
+</div>

package/src/lib/general-container/general-container.component.scss

@@ -0,0 +1,10 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.general-container {
+  width: 100%;
+  min-height: 100px;
+  box-sizing: border-box;
+}