@allsorter/ui-components 0.0.367 → 0.0.370

package/src/lib/tabs/tabs.component.html

@@ -0,0 +1,9 @@
+<mat-tab-group [selectedIndex]="selectedIndex" [class]="'tabs-' + size" mat-align-tabs="start" headerPosition="above">
+  <mat-tab *ngFor="let tab of tabComponents; let i = index" [label]="tab.labelText">
+    <ng-container [ngTemplateOutlet]="tab.templateRef"></ng-container>
+  </mat-tab>
+  <!-- Debug info -->
+  <div *ngIf="!tabComponents || tabComponents.length === 0" style="padding: 20px; color: red;">
+    No tabs found. Tab components: {{ tabComponents?.length || 0 }}
+  </div>
+</mat-tab-group>

package/src/lib/tabs/tabs.component.scss

@@ -0,0 +1,151 @@
+@import '../styles/colors.scss';
+@import '../styles/typography-classes.scss';
+
+:host {
+  display: block;
+
+  ::ng-deep {
+    // .mat-mdc-tab-group {
+    //   border: 2px solid $color-grey-400;
+    //   border-radius: 8px;
+    //   overflow: hidden;
+    //   background-color: #fff;
+    // }
+
+    // Small size (32px height)
+    &.tabs-small .mat-mdc-tab-header {
+      height: 32px;
+      background-color: #fff;
+    }
+
+    &.tabs-small .mat-mdc-tab {
+      border: 1px solid $color-grey-200;
+      min-width: 130px !important;
+      width: auto !important;
+      flex: 0 0 auto !important;
+      padding: 0 32px !important;
+      height: 32px !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+
+      &:first-child {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
+
+      &:not(:first-child):not(:last-child) {
+        border-left: none !important;
+        border-right: none !important;
+      }
+    }
+
+    // Medium size (36px height) - default
+    &.tabs-medium .mat-mdc-tab-header {
+      height: 36px;
+      background-color: #fff;
+    }
+
+    &.tabs-medium .mat-mdc-tab {
+      border: 1px solid $color-grey-200;
+      min-width: 130px !important;
+      width: auto !important;
+      flex: 0 0 auto !important;
+      padding: 0 36px !important;
+      height: 36px !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+
+      &:first-child {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
+
+      &:not(:first-child):not(:last-child) {
+        border-left: none !important;
+        border-right: none !important;
+      }
+    }
+
+    // Large size (40px height)
+    &.tabs-large .mat-mdc-tab-header {
+      height: 40px;
+      background-color: #fff;
+    }
+
+    &.tabs-large .mat-mdc-tab {
+      border: 1px solid $color-grey-200;
+      min-width: 130px !important;
+      width: auto !important;
+      flex: 0 0 auto !important;
+      padding: 0 40px !important;
+      height: 40px !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+
+      &:first-child {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
+
+      &:not(:first-child):not(:last-child) {
+        border-left: none !important;
+        border-right: none !important;
+      }
+    }
+
+    .mat-mdc-tab-body-wrapper {
+      padding: 16px;
+      min-height: 100px;
+      background-color: #fff;
+    }
+
+    .mat-mdc-tab:not(.mat-mdc-tab-disabled) {
+      @extend .font-label-large; // Match toggle button typography
+      color: $color-grey-700;
+
+      &:hover {
+        background-color: $color-grey-100;
+      }
+    }
+
+    .mat-mdc-tab.mat-mdc-tab-active {
+      background-color: #d1d3db !important;
+      color: #383b4a;
+      font-weight: 500;
+    }
+
+    // Override active tab background and text color with higher specificity
+    .mat-mdc-tab.mat-mdc-tab-active,
+    .mat-mdc-tab.mdc-tab--active {
+      background-color: #d1d3db !important;
+    }
+
+    .mat-mdc-tab.mat-mdc-tab-active .mdc-tab__text-label,
+    .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label,
+    .mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label {
+      color: #383b4a !important;
+    }
+
+    .mat-mdc-tab .mdc-tab-indicator {
+      display: none !important;
+    }
+  }
+}

package/src/lib/toggle-buttons/toggle-buttons.component.html

@@ -0,0 +1,17 @@
+<mat-button-toggle-group [value]="getSelectedValue()" [disabled]="disabled" [multiple]="multiple" [vertical]="vertical"
+  (change)="onSelectionChange($event.value)" [ngClass]="[getSizeClass(), vertical ? 'al-toggle-vertical' : '']">
+
+  <mat-button-toggle *ngFor="let button of buttons" [value]="button.id" [disabled]="button.disabled"
+    [attr.aria-label]="button.label" [style.display]="'inline-flex'" [style.align-items]="'center'"
+    [style.gap.px]="computeGap(button)" [attr.data-testid]="button.dataTestId || dataTestId">
+
+    <!-- Icon (shown based on type) -->
+    <mat-icon *ngIf="(type === 'default' || type === 'icon-only') && button.icon?.trim()" class="button-icon">{{
+      button.icon }}</mat-icon>
+
+    <!-- Label (shown based on type) -->
+    <span *ngIf="(type === 'default' || type === 'text-only') && button.label?.trim()" class="button-label">{{
+      button.label }}</span>
+  </mat-button-toggle>
+
+</mat-button-toggle-group>

package/src/lib/toggle-buttons/toggle-buttons.component.scss

@@ -0,0 +1,284 @@
+/* ============================================
+   TOGGLE BUTTONS COMPONENT STYLES
+   ============================================ */
+
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
+@import '../styles/colors.scss';
+@import '../styles/typography-classes.scss';
+
+/* ============================================
+   BUTTON GROUP CONTAINER
+   ============================================ */
+
+mat-button-toggle-group {
+  display: flex;
+  border-radius: 4px;
+  border: 1px solid $color-grey-400;
+  background: #fff;
+  overflow: hidden;
+  box-shadow: none !important;
+  width: fit-content;
+  align-items: stretch;
+}
+
+mat-button-toggle-group[vertical="true"],
+mat-button-toggle-group.mat-button-toggle-group-vertical {
+  flex-direction: column;
+}
+
+/* ============================================
+   INDIVIDUAL BUTTON STYLES
+   ============================================ */
+
+mat-button-toggle {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  flex: 0 0 auto;
+  width: fit-content;
+  min-width: fit-content;
+  border-radius: 0;
+  color: $color-grey-500;
+  font-family: var(--Body-Medium-Font, Roboto);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+}
+
+/* ============================================
+   BUTTON STATES
+   ============================================ */
+
+mat-button-toggle:hover:not(.mat-button-toggle-disabled) {
+  background-color: $color-grey-100;
+}
+
+mat-button-toggle.mat-button-toggle-checked,
+mat-button-toggle[aria-pressed="true"],
+mat-button-toggle.mat-button-toggle-checked:hover {
+  background-color: $color-grey-100 !important;
+  color: $color-grey-700 !important;
+  font-weight: 400;
+}
+
+/* Ensure active state colors for all sizes */
+.al-toggle-buttons-size-sm mat-button-toggle.mat-button-toggle-checked,
+.al-toggle-buttons-size-md mat-button-toggle.mat-button-toggle-checked,
+.al-toggle-buttons-size-lg mat-button-toggle.mat-button-toggle-checked {
+  background-color: $color-grey-100 !important;
+  color: $color-grey-700 !important;
+}
+
+mat-button-toggle.mat-button-toggle-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  color: $color-grey-500;
+}
+
+/* ============================================
+   BUTTON ELEMENTS
+   ============================================ */
+
+.button-icon {
+  font-size: 14px;
+  line-height: 1;
+  margin-right: 8px;
+}
+
+mat-button-toggle .mat-icon {
+  font-size: 14px;
+  width: 14px;
+  height: 14px;
+}
+
+.button-label {
+  @extend .font-label-large;
+  color: $color-grey-700;
+  white-space: nowrap;
+  line-height: 19px;
+}
+
+mat-button-toggle.mat-button-toggle-checked .button-label {
+  color: $color-grey-700 !important;
+  font-weight: 400;
+}
+
+/* ============================================
+   ICON-ONLY BUTTON STYLES
+   ============================================ */
+
+::ng-deep .al-toggle-buttons[type="icon-only"] .button-icon,
+::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .button-icon {
+  margin-right: 0px !important;
+}
+
+::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .button-icon {
+  width: 100% !important;
+  height: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .mat-icon {
+  width: 20px !important;
+  height: 20px !important;
+  font-size: 20px !important;
+  line-height: 20px !important;
+}
+
+/* ============================================
+   SIZE VARIATIONS
+   ============================================ */
+
+.al-toggle-buttons-size-sm mat-button-toggle {
+  height: 32px !important;
+  padding: 8px 12px !important;
+  border: 1px solid $color-grey-400 !important;
+  background: #fff !important;
+}
+
+.al-toggle-buttons-size-md mat-button-toggle {
+  height: 36px !important;
+  padding: 8px 12px !important;
+  border: 1px solid $color-grey-400 !important;
+  background: #fff !important;
+}
+
+.al-toggle-buttons-size-lg mat-button-toggle {
+  height: 40px !important;
+  padding: 8px 12px !important;
+  border: 1px solid $color-grey-400 !important;
+  background: #fff !important;
+}
+
+/* Icon sizes for all variations */
+.al-toggle-buttons-size-sm .button-icon,
+.al-toggle-buttons-size-sm mat-button-toggle .mat-icon,
+.al-toggle-buttons-size-md .button-icon,
+.al-toggle-buttons-size-md mat-button-toggle .mat-icon {
+  font-size: 14px;
+  width: 14px;
+  height: 14px;
+}
+
+.al-toggle-buttons-size-lg .button-icon,
+.al-toggle-buttons-size-lg mat-button-toggle .mat-icon {
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+}
+
+/* ============================================
+   MATERIAL DESIGN OVERRIDES
+   ============================================ */
+
+/* Button group borders */
+mat-button-toggle-group .mat-button-toggle {
+  border: none !important;
+  border-radius: 0 !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+mat-button-toggle-group .mat-button-toggle:first-child {
+  border-radius: 0 !important;
+  border-left: none !important;
+}
+
+mat-button-toggle-group .mat-button-toggle:last-child {
+  border-radius: 0 !important;
+  border-right: none !important;
+}
+
+mat-button-toggle-group .mat-button-toggle:not(:last-child) {
+  border-right: 1px solid $color-grey-400 !important;
+}
+
+/* ============================================
+   VERTICAL TOGGLE BUTTON STYLES
+   ============================================ */
+
+mat-button-toggle-group.al-toggle-vertical,
+mat-button-toggle-group.mat-button-toggle-group-vertical {
+  flex-direction: column !important;
+}
+
+mat-button-toggle-group.al-toggle-vertical .mat-button-toggle,
+mat-button-toggle-group.mat-button-toggle-group-vertical .mat-button-toggle {
+  border-right: 0 !important;
+  border-bottom: 1px solid $color-grey-400 !important;
+  width: 100% !important;
+
+
+}
+
+mat-button-toggle-group.al-toggle-vertical .mat-button-toggle:last-child,
+mat-button-toggle-group.mat-button-toggle-group-vertical .mat-button-toggle:last-child {
+  border-bottom: none !important;
+}
+
+/* Remove all Material styling */
+mat-button-toggle-group .mat-button-toggle *,
+mat-button-toggle-group .mat-button-toggle-appearance-standard,
+mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-label-content,
+mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-button,
+mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay,
+mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-ripple {
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+
+mat-button-toggle-group .mat-button-toggle:focus .mat-button-toggle-focus-overlay {
+  display: none !important;
+}
+
+/* Hide Material check icons */
+.mat-button-toggle-checked .mat-button-toggle-label-content::before,
+.mat-button-toggle-checked .mat-button-toggle-label-content::after,
+.mat-button-toggle-checked::before,
+.mat-button-toggle-checked::after,
+.mat-button-toggle-checked .mat-icon:not(.button-icon),
+.mat-button-toggle-checked .material-icons:not(.button-icon) {
+  display: none !important;
+}
+
+.mat-button-toggle-checked .button-icon {
+  display: inline-flex !important;
+}
+
+.mat-button-toggle-checked .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+  background-image: none !important;
+}
+
+/* Line height and pseudo-checkbox */
+::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+  line-height: 20px !important;
+}
+
+::ng-deep.mat-button-toggle .mat-pseudo-checkbox {
+  display: none !important;
+}
+
+/* ============================================
+   FOCUS STATES
+   ============================================ */
+
+mat-button-toggle:focus-visible {
+  outline: 2px solid $color-blue-500;
+  outline-offset: 2px;
+}

package/src/lib/tooltip/tooltip.component.html

@@ -0,0 +1,6 @@
+<ng-container>
+  <div [matTooltip]="getTooltipContent()" [matTooltipPosition]="position" [matTooltipDisabled]="disabled"
+    [attr.data-test-id]="dataTestId" class="al-tooltip-wrapper">
+    <ng-content></ng-content>
+  </div>
+</ng-container>

package/src/lib/tooltip/tooltip.component.scss

@@ -0,0 +1,8 @@
+.al-tooltip-wrapper {
+  display: inline-block;
+  position: relative;
+
+  &:hover {
+    cursor: help;
+  }
+}

package/lib/action-bar-wrapper/action-bar-wrapper.component.d.ts

@@ -1,36 +0,0 @@
-import { AfterContentInit, EventEmitter, QueryList } from '@angular/core';
-import { ButtonComponent } from '../button/button.component';
-import * as i0 from "@angular/core";
-export declare class ActionBarWrapperComponent implements AfterContentInit {
-    actionButtons: QueryList<ButtonComponent>;
-    showClose: boolean;
-    visible: boolean;
-    mode: 'buttons' | 'ai-apply';
-    showHelperText: boolean;
-    helperText: string;
-    showChevronOnApply: boolean;
-    showExtraButton: boolean;
-    extraButtonIcon: string;
-    extraButtonAriaLabel: string;
-    showStickyButton: boolean;
-    stickyButtonIcon: string;
-    stickyButtonAriaLabel: string;
-    closeClick: EventEmitter<void>;
-    applyClick: EventEmitter<void>;
-    extraButtonClick: EventEmitter<void>;
-    stickyButtonClick: EventEmitter<void>;
-    /** If true, clicking Apply hides the bar (sets visible = false) after emitting applyClick */
-    autoHideOnApply: boolean;
-    buttons: ButtonComponent[];
-    ngAfterContentInit(): void;
-    /**
-     * Enforce wrapper defaults on projected buttons:
-     * - size = 'base'
-     * - outline style for non-gradient categories
-     * - preserve any button explicitly set to gradient (e.g., AI)
-     */
-    private applyDefaultsToButtons;
-    onApply(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ActionBarWrapperComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ActionBarWrapperComponent, "al-action-bar", never, { "showClose": { "alias": "showClose"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "showHelperText": { "alias": "showHelperText"; "required": false; }; "helperText": { "alias": "helperText"; "required": false; }; "showChevronOnApply": { "alias": "showChevronOnApply"; "required": false; }; "showExtraButton": { "alias": "showExtraButton"; "required": false; }; "extraButtonIcon": { "alias": "extraButtonIcon"; "required": false; }; "extraButtonAriaLabel": { "alias": "extraButtonAriaLabel"; "required": false; }; "showStickyButton": { "alias": "showStickyButton"; "required": false; }; "stickyButtonIcon": { "alias": "stickyButtonIcon"; "required": false; }; "stickyButtonAriaLabel": { "alias": "stickyButtonAriaLabel"; "required": false; }; "autoHideOnApply": { "alias": "autoHideOnApply"; "required": false; }; }, { "closeClick": "closeClick"; "applyClick": "applyClick"; "extraButtonClick": "extraButtonClick"; "stickyButtonClick": "stickyButtonClick"; }, ["actionButtons"], ["*"], true, never>;
-}

package/lib/resume-header/resume-header.component.d.ts

@@ -1,69 +0,0 @@
-import { EventEmitter, OnInit, OnDestroy, AfterViewInit, ElementRef } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { EyeIconConfig, HeaderButton, InputHandlersConfig, SectionCheckboxConfig } from './resume-header.model';
-import * as i0 from "@angular/core";
-export declare class ResumeHeaderComponent implements OnInit, OnDestroy, AfterViewInit {
-    private sanitizer;
-    hideTimeout: any;
-    isMenuVisible: boolean;
-    isEducationHidden: boolean;
-    private resizeListener?;
-    private clickOutsideListener?;
-    hiddenSection: {
-        headerSectionHidden: boolean;
-    };
-    isLargeScreen: boolean;
-    inputHandlers: InputHandlersConfig;
-    focusField: EventEmitter<string>;
-    blurField: EventEmitter<void>;
-    enterKeyPressed: EventEmitter<KeyboardEvent>;
-    checked: boolean;
-    checkboxConfig: SectionCheckboxConfig;
-    checkedCheckBoxChange: EventEmitter<boolean>;
-    disabled: boolean;
-    buttonConfig: HeaderButton[];
-    buttonClicked: EventEmitter<HeaderButton>;
-    configEyeToggle: EyeIconConfig[];
-    accordionItem: any;
-    showHideToggleSection: EventEmitter<{
-        isHidden: boolean;
-        accordionItem?: any;
-        config: EyeIconConfig;
-    }>;
-    toggleEditIcon?: (field: string) => void;
-    showSection: boolean;
-    sectionToggled: EventEmitter<boolean>;
-    borderColor: string;
-    dataTestId?: string;
-    showPopOutPanel: boolean;
-    popOutMessage: string;
-    popOutButtonLabel: string;
-    popOutButtonIcon: string;
-    popOutButtonTooltip: string;
-    popOutButtonTooltipPosition: 'above' | 'below' | 'left' | 'right';
-    popOutButtonClick: EventEmitter<void>;
-    showPopOut: boolean;
-    inputWidth: number;
-    maxContainerWidth: number;
-    textInputSection?: ElementRef<HTMLInputElement>;
-    constructor(sanitizer: DomSanitizer);
-    toggleAccordion(accordionItem: any): void;
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    private checkPopOutVisibility;
-    dismissPopOut(): void;
-    get sanitizedMessage(): SafeHtml;
-    calculateMaxContainerWidth(): void;
-    adjustInputWidth(event: Event): void;
-    ngOnDestroy(): void;
-    checkScreenSize(): void;
-    showMenu(): void;
-    toggleMenu(): void;
-    handleClickOutside(event: Event): void;
-    startHideTimeout(): void;
-    clearHideTimeout(): void;
-    onButtonClick(btn: any): void;
-    onDropdownSelect(btn: any, value: any): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ResumeHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ResumeHeaderComponent, "al-resume-header", never, { "hiddenSection": { "alias": "hiddenSection"; "required": false; }; "isLargeScreen": { "alias": "isLargeScreen"; "required": false; }; "inputHandlers": { "alias": "inputHandlers"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "checkboxConfig": { "alias": "checkboxConfig"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "buttonConfig": { "alias": "buttonConfig"; "required": false; }; "configEyeToggle": { "alias": "configEyeToggle"; "required": false; }; "accordionItem": { "alias": "accordionItem"; "required": false; }; "toggleEditIcon": { "alias": "toggleEditIcon"; "required": false; }; "showSection": { "alias": "showSection"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; "dataTestId": { "alias": "dataTestId"; "required": false; }; "showPopOutPanel": { "alias": "showPopOutPanel"; "required": false; }; "popOutMessage": { "alias": "popOutMessage"; "required": false; }; "popOutButtonLabel": { "alias": "popOutButtonLabel"; "required": false; }; "popOutButtonIcon": { "alias": "popOutButtonIcon"; "required": false; }; "popOutButtonTooltip": { "alias": "popOutButtonTooltip"; "required": false; }; "popOutButtonTooltipPosition": { "alias": "popOutButtonTooltipPosition"; "required": false; }; }, { "focusField": "focusField"; "blurField": "blurField"; "enterKeyPressed": "enterKeyPressed"; "checkedCheckBoxChange": "checkedCheckBoxChange"; "buttonClicked": "buttonClicked"; "showHideToggleSection": "showHideToggleSection"; "sectionToggled": "sectionToggled"; "popOutButtonClick": "popOutButtonClick"; }, never, never, true, never>;
-}

package/lib/resume-header/resume-header.module.d.ts

@@ -1,8 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "./resume-header.component";
-export declare class ResumeHeaderModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<ResumeHeaderModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ResumeHeaderModule, never, [typeof i1.CommonModule, typeof i2.ResumeHeaderComponent], [typeof i2.ResumeHeaderComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<ResumeHeaderModule>;
-}