@allsorter/ui-components 0.0.367 → 0.0.370

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

@@ -0,0 +1,178 @@
+<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"
+                [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'"
+                [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()">
+                        {{ title || 'Click to edit' }}
+                      </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>
+                  </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>
+                  <!-- 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="slide-out-panel" [class.visible]="isMenuVisible">
+                      <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>
+              </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>
+            </div>
+            <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>
+                </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>
+              </al-responsive-columns>
+            </div>
+            <div right>
+              <!-- Checkbox hidden when section is hidden -->
+              <ng-content select="[header-right]"></ng-content>
+            </div>
+          </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>
+        </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"
+      [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">
+  <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'"
+      [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>

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

@@ -0,0 +1,530 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Material+Icons+Outlined');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0');
+@import url('https://fonts.googleapis.com/css2?family=Roboto: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&display=swap');
+
+
+
+
+.example-accordion-item-header {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: 100%;
+}
+
+.example-accordion-item-header al-responsive-columns {
+  width: 100%;
+  display: block;
+}
+
+/* Center align items in outer responsive-columns - only vertical alignment, preserve grid layout */
+.example-accordion-item-header al-responsive-columns ::ng-deep .container {
+  align-items: center;
+  /* Grid layout preserved - align-items only affects vertical alignment */
+  display: grid;
+}
+
+.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns {
+  width: 100%;
+  display: block;
+}
+
+/* Center align items in nested responsive-columns - only vertical alignment, preserve grid layout */
+.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .container {
+  align-items: center;
+  /* Grid layout preserved - align-items only affects vertical alignment */
+  display: grid;
+  min-width: 0;
+  transition: grid-template-columns 0.2s ease;
+}
+
+/* Override grid template columns when input is focused to expand left column */
+.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .container {
+  grid-template-columns: 1fr auto 32px !important;
+}
+
+.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left],
+.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center],
+.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
+
+.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left] {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  max-width: 100%;
+  transition: flex 0.2s ease, width 0.2s ease;
+}
+
+/* Expand left div when input inside is focused */
+.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused div[left],
+.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left] .edit-input-group.input-focused {
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+}
+
+.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left {
+  min-width: 0;
+  overflow: hidden;
+  max-width: 100%;
+  transition: flex 0.2s ease;
+}
+
+/* Expand left column in grid when input is focused */
+.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .column.left {
+  min-width: 0;
+  max-width: none;
+  width: 100%;
+}
+
+.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center] {
+  justify-content: flex-end;
+  gap: 8px;
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+  display: flex;
+  align-items: center;
+}
+
+.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right] {
+  flex-shrink: 0;
+}
+
+.example-accordion-item-body {
+  width: 100%;
+}
+
+.example-accordion-item-body al-responsive-columns {
+  width: 100%;
+  display: block;
+}
+
+.toggle-button {
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+}
+
+.example-accordion-item-header al-responsive-columns div[left] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.example-accordion-item-header al-responsive-columns div[right] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+
+
+
+.example-accordion-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #ecedf1;
+  gap: 8px;
+  border-bottom: 2px solid #37c1ce;
+  border-radius: 8px;
+  box-sizing: border-box;
+
+}
+
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  color: #717793;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  transition: color 0.2s ease;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+}
+
+.material-symbols-outlined:hover {
+  color: #4b4f62;
+  background-color: #BBC7F6;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+
+}
+
+.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Edit input group hover effect for title */
+.edit-input-group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  border-radius: 4px;
+  transition: background-color 0.2s ease, width 0.2s ease;
+  padding: 0 8px;
+  flex-shrink: 1;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  flex: 1 1 0;
+}
+
+/* Expand edit-input-group to 100% width when input is focused */
+.edit-input-group.input-focused {
+  width: 100%;
+  flex: 1 1 100%;
+  min-width: 0;
+}
+
+.edit-input-group:hover {
+  background-color: #D1D3DB;
+}
+
+/* Disable hover effect when input is focused */
+.edit-input-group:has(input:focus):hover,
+.edit-input-group:focus-within:hover {
+  background-color: transparent;
+}
+
+/* Hide edit icon when input is focused */
+.edit-input-group:has(input:focus) mat-icon.edit-icon,
+.edit-input-group:focus-within mat-icon.edit-icon {
+  opacity: 0;
+  visibility: hidden;
+}
+
+/* Hover menu container for small screens */
+.hover-menu-container {
+  position: relative;
+  display: inline-block;
+}
+
+.menu-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.slide-out-panel {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  background-color: white;
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 10035;
+  padding: 8px;
+  margin-bottom: 6px;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  align-items: center;
+}
+
+.slide-out-panel.visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.fit-panel {
+  display: inline-flex;
+  width: fit-content;
+  background: none;
+  gap: 8px;
+  align-items: center;
+}
+
+/* Pop-out Panel Styles */
+.example-accordion-item-body .pop-out-panel {
+  background-color: #717793;
+  border-radius: 12px;
+  width: calc(100% - 110px);
+  margin: 8px auto;
+  padding: 12px 16px;
+  position: relative;
+  box-sizing: border-box;
+
+}
+
+.pop-out-content {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  align-items: center;
+}
+
+.pop-out-content al-button {
+  flex-shrink: 0;
+  align-self: center;
+}
+
+.pop-out-content al-button .button-label {
+  display: inline-block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+.pop-out-message {
+  flex: 1;
+  color: #fff;
+  font-size: 12px;
+  line-height: 1.5;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  min-width: 0;
+  letter-spacing: 0.06px;
+}
+
+.pop-out-message ::ng-deep a,
+.pop-out-link {
+  color: var(--Base-Blue, #5473E8);
+  font-family: Roboto;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 136%;
+  letter-spacing: 0.06px;
+  cursor: pointer;
+}
+
+.pop-out-message ::ng-deep a:hover,
+.pop-out-link:hover {
+  color: #6581EA;
+}
+
+.pop-out-close {
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  color: #6B7280;
+  transition: color 0.2s ease;
+}
+
+.pop-out-close:hover {
+  color: #374151;
+}
+
+.pop-out-close .material-icons-outlined {
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+  color: #fff;
+}
+
+.edit-input-group .content_width {
+  flex: 1 1 0;
+  min-width: 0;
+  max-width: 450px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  transition: flex 0.2s ease, width 0.2s ease;
+}
+
+/* Expand content_width when input is focused */
+.edit-input-group.input-focused .content_width {
+  flex: 1 1 100%;
+  width: 100%;
+  min-width: 0;
+}
+
+.title-text {
+  font-size: 16px;
+  font-weight: 400;
+  color: #383b4a;
+  font-family: 'Roboto', sans-serif;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 4px;
+  flex-shrink: 1;
+  min-width: 0;
+  max-width: 100%;
+  cursor: pointer;
+}
+
+.title-input {
+  font-size: 16px;
+  font-weight: 400;
+  font-family: 'Roboto', sans-serif;
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  margin-right: 4px;
+  flex-shrink: 1;
+  min-width: 100px;
+  max-width: 100%;
+  box-sizing: border-box;
+  width: 100%;
+  transition: width 0.2s ease;
+}
+
+/* Input expands to 100% width when focused */
+.title-input:focus {
+  width: 100%;
+  min-width: 100%;
+  flex: 1 1 100%;
+}
+
+.title-input.onfocus-input-text {
+  height: 28px;
+  background: #f4f8fc;
+  border-radius: 5px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.title-input.focusout-input-text {
+  color: #383b4a;
+  background: transparent;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.title-input:focus {
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+
+/* Allow title to expand and use available space */
+.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left {
+  min-width: 0;
+  overflow: visible;
+}
+
+.edit-input-group mat-icon.edit-icon {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  cursor: pointer;
+  border-radius: 4px;
+  flex-shrink: 0;
+  min-width: 24px;
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #717793;
+}
+
+.edit-input-group:hover mat-icon.edit-icon {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Hidden header layout styles */
+/* Hide edit icon when header is in hidden state */
+.hide-header-title mat-icon.edit-icon {
+  display: none;
+}
+
+.hide-header-title .edit-input-group {
+  cursor: default;
+  opacity: 0.7;
+}
+
+.hide-header-title .edit-input-group:hover {
+  background-color: transparent;
+}
+
+.hide-header-title .title-text {
+  cursor: default;
+  pointer-events: none;
+}
+
+.header-text-turncate {
+  font-weight: 400;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  color: #a2a6b8;
+  line-height: 28px;
+  font-family: 'Roboto', sans-serif;
+  cursor: default;
+}
+
+.hidden-section-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.hidden-write {
+  color: #a2a6b8;
+  font-weight: 400;
+  font-family: 'Roboto', sans-serif;
+  white-space: nowrap;
+}
+
+/* Apply reduced opacity to entire header when hidden */
+.example-accordion-item-header.header-hidden {
+  opacity: 0.7;
+}
+
+.mat-checkbox-margin {
+  margin-left: 8px;
+}