npm - @allsorter/ui-components - Versions diffs - 0.0.390 → 0.0.392 - Mend

@allsorter/ui-components 0.0.390 → 0.0.392

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/fesm2022/allsorter-ui-components.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, Input, Output, ViewChild, NgModule, forwardRef, HostBinding, ElementRef, Renderer2, ViewEncapsulation, Inject, HostListener, TemplateRef, ContentChildren, Optional, ContentChild, ChangeDetectionStrategy } from '@angular/core';
+import { Injectable, Component, EventEmitter, Input, Output, ViewChild, NgModule, forwardRef, HostBinding, ElementRef, Renderer2, ViewEncapsulation, Inject, TemplateRef, ContentChildren, Optional, ContentChild, ChangeDetectionStrategy } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/material/icon';
@@ -29,6 +29,8 @@ import * as i5 from '@angular/cdk/accordion';
 import { CdkAccordionModule } from '@angular/cdk/accordion';
 import * as i2$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { animation, style, animate, trigger, transition, state } from '@angular/animations';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as i2$3 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i2$4 from '@angular/material/button-toggle';
@@ -1015,7 +1017,7 @@ class InputComponent {
                 useExisting: forwardRef(() => InputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "internalDatepicker", first: true, predicate: ["dp"], descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: ["autocompleteTrigger"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Standard floating label layout for all inputs including date picker -->\n<mat-form-field #formField appearance=\"outline\" class=\"al-input-field\" [ngClass]=\"[\n    helperText ? 'has-helper-text' : '',\n    getSizeClass(),\n    getCategoryClass(),\n    noBorder ? 'al-input-no-border' : '',\n    leftIcon ? 'has-left-icon' : ''\n  ]\" [attr.data-test-id]=\"dataTestId\" [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\"\n  [matTooltipDisabled]=\"!tooltip\">\n  <mat-label *ngIf=\"labelText && !noBorder\">{{ labelText }}</mat-label>\n\n  <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\" [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n    matPrefix class=\"left-icon\">{{ leftIconText }}</mat-icon>\n\n  <ng-container *ngIf=\"hasDropDown; else regularInput\">\n    <!-- Searchable Dropdown with Autocomplete -->\n    <ng-container *ngIf=\"isSearchableDropdown; else regularDropdown\">\n      <input matInput #searchInput type=\"text\" [placeholder]=\"placeholder || labelText\" [disabled]=\"isDisabled\"\n        [value]=\"searchValue\" (input)=\"onSearchInputChange($event)\" (focus)=\"onSearchFocus()\" (click)=\"onSearchFocus()\"\n        (blur)=\"onTouched()\" [matAutocomplete]=\"auto\" #autocompleteTrigger=\"matAutocompleteTrigger\"\n        autocomplete=\"off\" />\n      <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onOptionSelected($event)\" [displayWith]=\"displayFn\"\n        panelClass=\"al-searchable-dropdown-panel\" [autoActiveFirstOption]=\"false\" [panelWidth]=\"null\">\n        <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\n          {{ option }}\n        </mat-option>\n        <mat-option *ngIf=\"filteredOptions.length === 0 && searchValue && searchValue.trim()\" disabled>\n          <span style=\"display: flex; align-items: center; gap: 8px;\">\n            <mat-icon style=\"font-size: 18px; width: 18px; height: 18px;\">search_off</mat-icon>\n            <span>No results found</span>\n          </span>\n        </mat-option>\n      </mat-autocomplete>\n      <mat-icon matSuffix class=\"search-icon\" *ngIf=\"!rightIcon?.trim()\">search</mat-icon>\n      <mat-icon *ngIf=\"rightIcon?.trim() && isSearchableDropdown\" matSuffix class=\"right-icon\">{{ rightIcon\n        }}</mat-icon>\n    </ng-container>\n\n    <!-- Regular Dropdown (non-searchable) -->\n    <ng-template #regularDropdown>\n      <mat-select [disabled]=\"isDisabled\" [multiple]=\"multipleSelect\"\n        [ngModel]=\"multipleSelect ? selectedValues : value\" (selectionChange)=\"onSelectionChange($event.value)\"\n        [placeholder]=\"placeholder || labelText\">\n        <mat-option *ngFor=\"let option of options\" [value]=\"option\">{{ option }}</mat-option>\n      </mat-select>\n    </ng-template>\n  </ng-container>\n  <ng-template #regularInput>\n    <!-- Color Picker Input -->\n    <ng-container *ngIf=\"isColorPicker; else datePickerInput\">\n      <div class=\"color-picker-container\">\n        <input matInput [placeholder]=\"placeholder || labelText\" [disabled]=\"isDisabled\" [(ngModel)]=\"value\"\n          (input)=\"onInputChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n        <input type=\"color\" class=\"color-picker-input\" [value]=\"value || '#000000'\" [disabled]=\"isDisabled\"\n          (input)=\"handleColorChange($event)\" (blur)=\"onTouched()\" />\n        <mat-icon class=\"color-picker-icon\" matSuffix>palette</mat-icon>\n      </div>\n    </ng-container>\n\n    <!-- Date Picker Input - with floating label animation -->\n    <ng-template #datePickerInput>\n      <ng-container *ngIf=\"isDatePicker; else standardInput\">\n        <input matInput [matDatepicker]=\"datepickerRef\" [placeholder]=\"placeholder || labelText\" [disabled]=\"isDisabled\"\n          [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\" (blur)=\"onTouched()\" />\n        <mat-datepicker-toggle matSuffix [for]=\"datepickerRef\"></mat-datepicker-toggle>\n        <mat-datepicker #dp *ngIf=\"!matDatepicker\" startView=\"multi-year\" (monthSelected)=\"onMonthSelected($event, dp)\"\n          (yearSelected)=\"onYearSelected($event, dp)\" panelClass=\"example-month-picker\">\n        </mat-datepicker>\n      </ng-container>\n\n      <!-- Standard Input -->\n      <ng-template #standardInput>\n        <input matInput [placeholder]=\"placeholder || labelText\" [type]=\"type\" [disabled]=\"isDisabled\"\n          [(ngModel)]=\"value\" (input)=\"onInputChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n      </ng-template>\n    </ng-template>\n  </ng-template>\n\n  <!-- Right icon - only show when not date picker, not color picker, and not searchable dropdown -->\n  <mat-icon *ngIf=\"!isDatePicker && !isColorPicker && !isSearchableDropdown && rightIcon?.trim() as rightIconText\"\n    [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\" matSuffix class=\"right-icon\">{{ rightIconText\n    }}</mat-icon>\n\n  <mat-error *ngIf=\"false && helperText\">{{ helperText }}</mat-error>\n  <mat-hint *ngIf=\"helperText\">{{ helperText }}</mat-hint>\n</mat-form-field>", styles: ["@import\"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\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap\";@import\"https://cdn.jsdelivr.net/npm/@angular/material@19.2.3/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.al-input-field{width:100%}::ng-deep .al-input-field .mat-mdc-form-field-flex{display:flex!important;align-items:center!important;flex-direction:row!important}::ng-deep .al-input-field .mat-mdc-form-field-infix{display:flex!important;align-items:center!important;flex:1!important}::ng-deep .al-input-field input[matInput]{flex:1!important;text-align:left!important}::ng-deep .al-input-field .mat-mdc-form-field-suffix{display:flex!important;align-items:center!important;margin-left:auto!important;margin-right:12px!important}::ng-deep .al-input-field .mat-mdc-form-field-flex,::ng-deep .al-input-field .mat-mdc-text-field-wrapper,::ng-deep .al-input-field .mat-mdc-form-field-infix{background-color:#f7f9fe!important}::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper{background-color:transparent!important;display:none!important}.mdc-notched-outline.mdc-notched-outline--no-label{background:#fff;border-radius:4px!important}::ng-deep .al-input-field.has-helper-text .mat-mdc-form-field-subscript-wrapper,::ng-deep .al-input-field.has-error .mat-mdc-form-field-subscript-wrapper{display:block!important}::ng-deep .al-input-field .mat-mdc-form-field-focus-overlay{background-color:#f7f9fe!important}::ng-deep .al-input-category-primary,::ng-deep .al-input-category-success,::ng-deep .al-input-category-error,::ng-deep .al-input-category-disabled{--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}::ng-deep .al-input-category-simple{--mdc-outlined-text-field-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-focus-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-label-text-color: $color-blue !important;--mdc-outlined-text-field-focus-label-text-color: $color-blue !important}::ng-deep .al-input-category-success{--mdc-outlined-text-field-outline-color: #00AD83 !important;--mdc-outlined-text-field-focus-outline-color: #00AD83 !important;--mdc-outlined-text-field-hover-outline-color: #00AD83 !important;--mdc-outlined-text-field-label-text-color: #00AD83 !important;--mdc-outlined-text-field-focus-label-text-color: #00AD83 !important}::ng-deep .al-input-category-success input::placeholder{color:#00ad83!important}::ng-deep .al-input-category-error{--mdc-outlined-text-field-outline-color: #E854A4 !important;--mdc-outlined-text-field-focus-outline-color: #E854A4 !important;--mdc-outlined-text-field-hover-outline-color: #E854A4 !important;--mdc-outlined-text-field-label-text-color: $color-error-500 !important;--mdc-outlined-text-field-focus-label-text-color: $color-error-500 !important}::ng-deep .al-input-category-error input::placeholder{color:#e854a4!important}::ng-deep .al-input-category-disabled{--mdc-outlined-text-field-outline-color: $color-blue !important;--mdc-outlined-text-field-focus-outline-color: $color-blue !important;--mdc-outlined-text-field-hover-outline-color: $color-blue !important;--mdc-outlined-text-field-label-text-color: $color-blue !important;--mdc-outlined-text-field-focus-label-text-color: $color-blue !important}::ng-deep .al-input-category-primary{--mdc-outlined-text-field-focus-outline-width: 2px !important;--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-label-text-color: $color-blue !important;--mdc-outlined-text-field-focus-label-text-color: $color-blue !important}::ng-deep .al-input-category-primary .mdc-notched-outline{box-shadow:none!important}::ng-deep .al-input-category-plain{--mdc-outlined-text-field-outline-color: transparent !important;--mdc-outlined-text-field-focus-outline-color: transparent !important;--mdc-outlined-text-field-hover-outline-color: transparent !important;--mdc-outlined-text-field-outline-width: 0 !important;--mdc-outlined-text-field-focus-outline-width: 0 !important;--mdc-outlined-text-field-hover-outline-width: 0 !important}::ng-deep .al-input-category-plain .mat-mdc-form-field-outline,::ng-deep .al-input-category-plain .mat-mdc-form-field-outline-thick,::ng-deep .al-input-category-plain .mat-mdc-form-field-label,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-line-ripple{display:none!important}::ng-deep .al-input-category-plain .material-symbols-outlined,::ng-deep .al-input-category-plain mat-icon{color:#4b4f62!important}::ng-deep .al-input-field{border-width:1px!important}::ng-deep .al-input-field.mat-focused .mdc-notched-outline__leading,::ng-deep .al-input-field.mat-focused .mdc-notched-outline__notch,::ng-deep .al-input-field.mat-focused .mdc-notched-outline__trailing{border-width:2px!important}::ng-deep .al-input-size-xs .mat-mdc-form-field-infix,::ng-deep .al-input-size-small .mat-mdc-form-field-infix,::ng-deep .al-input-size-header .mat-mdc-form-field-infix{padding:0!important;display:flex;align-items:center}::ng-deep .al-input-size-xs .mat-mdc-form-field-infix{min-height:32px!important}::ng-deep .al-input-size-small .mat-mdc-form-field-infix{min-height:36px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-infix{padding:8px 0!important;min-height:24px!important}::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper,::ng-deep .al-input-field.al-input-size-large .mat-mdc-form-field-flex{min-height:48px!important;max-height:48px!important;height:48px!important;box-sizing:border-box!important}::ng-deep .al-input-field.al-input-size-large .mat-mdc-form-field-infix,::ng-deep .al-input-size-large .mat-mdc-form-field-infix{padding:12px 0!important;min-height:48px!important;max-height:48px!important;height:48px!important;box-sizing:border-box!important}::ng-deep .al-input-size-header .mat-mdc-form-field-infix{min-height:28px!important}::ng-deep .al-input-size-xs .mdc-notched-outline,::ng-deep .al-input-size-small .mdc-notched-outline,::ng-deep .al-input-size-base .mdc-notched-outline,::ng-deep .al-input-size-header .mdc-notched-outline{border-top-left-radius:4px!important;border-bottom-left-radius:4px!important}::ng-deep .al-input-size-small .mdc-notched-outline__trailing,::ng-deep .al-input-size-base .mdc-notched-outline__trailing,::ng-deep .al-input-size-xs .mdc-notched-outline__trailing,::ng-deep .al-input-size-header .mdc-notched-outline__trailing{border-top-right-radius:4px!important;border-bottom-right-radius:4px!important}::ng-deep .al-input-size-large .mdc-notched-outline__leading{border-top-left-radius:4px!important;border-bottom-left-radius:4px!important}::ng-deep .al-input-size-large .mdc-notched-outline__trailing{border-top-right-radius:4px!important;border-bottom-right-radius:4px!important}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline--upgraded,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline--upgraded{min-height:48px!important;max-height:48px!important;height:48px!important;box-sizing:border-box!important}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{min-height:48px!important;max-height:48px!important;height:48px!important;box-sizing:border-box!important}::ng-deep .al-input-no-border{--mdc-outlined-text-field-outline-color: transparent !important;--mdc-outlined-text-field-focus-outline-color: transparent !important;--mdc-outlined-text-field-hover-outline-color: transparent !important;--mdc-outlined-text-field-outline-width: 0 !important;--mdc-outlined-text-field-focus-outline-width: 0 !important;--mdc-outlined-text-field-hover-outline-width: 0 !important}::ng-deep .al-input-no-border .mat-mdc-form-field-outline,::ng-deep .al-input-no-border .mat-mdc-form-field-outline-thick,::ng-deep .al-input-no-border .mat-mdc-form-field-label,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-line-ripple{display:none!important}::ng-deep .al-input-field input,::ng-deep .al-input-field .mat-mdc-select-value{color:#4b4f62!important}::ng-deep .al-input-size-xs input,::ng-deep .al-input-size-xs .mat-mdc-select-value,::ng-deep .al-input-size-small input,::ng-deep .al-input-size-small .mat-mdc-select-value,::ng-deep .al-input-size-header input,::ng-deep .al-input-size-header .mat-mdc-select-value{font-size:12px!important}::ng-deep .al-input-size-base input,::ng-deep .al-input-size-base .mat-mdc-select-value{font-size:14px!important}::ng-deep .al-input-size-large input,::ng-deep .al-input-size-large .mat-mdc-select-value{font-size:16px!important}::ng-deep .al-input-field input::placeholder{font-size:12px!important}::ng-deep .al-input-field:hover input::placeholder,::ng-deep .al-input-field:focus input::placeholder,::ng-deep .al-input-field:active input::placeholder,::ng-deep .al-input-field input:hover::placeholder,::ng-deep .al-input-field input:focus::placeholder,::ng-deep .al-input-field input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-category-primary:hover input::placeholder,::ng-deep .al-input-category-primary:focus input::placeholder,::ng-deep .al-input-category-primary:active input::placeholder,::ng-deep .al-input-category-primary input:hover::placeholder,::ng-deep .al-input-category-primary input:focus::placeholder,::ng-deep .al-input-category-primary input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-category-simple:hover input::placeholder,::ng-deep .al-input-category-simple:focus input::placeholder,::ng-deep .al-input-category-simple:active input::placeholder,::ng-deep .al-input-category-simple input:hover::placeholder,::ng-deep .al-input-category-simple input:focus::placeholder,::ng-deep .al-input-category-simple input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-size-xs .mat-mdc-form-field-label,::ng-deep .al-input-size-xs .mat-mdc-floating-label,::ng-deep .al-input-size-small .mat-mdc-form-field-label,::ng-deep .al-input-size-small .mat-mdc-floating-label,::ng-deep .al-input-size-header .mat-mdc-form-field-label,::ng-deep .al-input-size-header .mat-mdc-floating-label{font-size:12px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-label,::ng-deep .al-input-size-base .mat-mdc-floating-label{font-size:14px!important}::ng-deep .al-input-size-large .mat-mdc-form-field-label,::ng-deep .al-input-size-large .mat-mdc-floating-label{font-size:16px!important}::ng-deep .al-input-category-simple input,::ng-deep .al-input-category-simple .mat-mdc-select-value,::ng-deep .al-input-category-primary input,::ng-deep .al-input-category-primary .mat-mdc-select-value{font-weight:400!important;letter-spacing:.5px!important}::ng-deep .al-input-field .material-symbols-outlined,::ng-deep .al-input-field mat-icon{height:20px!important;width:20px!important;font-size:20px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .al-input-size-small .material-symbols-outlined,::ng-deep .al-input-size-xs .material-symbols-outlined,::ng-deep .al-input-size-header .material-symbols-outlined,::ng-deep .al-input-size-small mat-icon,::ng-deep .al-input-size-xs mat-icon,::ng-deep .al-input-size-header mat-icon{height:16px!important;width:16px!important;font-size:16px!important}::ng-deep .al-input-size-large .material-symbols-outlined,::ng-deep .al-input-size-large mat-icon{height:24px!important;width:24px!important;font-size:24px!important}::ng-deep .al-input-category-simple .material-symbols-outlined,::ng-deep .al-input-category-primary .material-symbols-outlined,::ng-deep .al-input-category-simple mat-icon,::ng-deep .al-input-category-primary mat-icon{color:#4b4f62!important}::ng-deep .al-input-category-success .material-symbols-outlined,::ng-deep .al-input-category-success mat-icon{color:#00ad83!important}::ng-deep .al-input-category-error .material-symbols-outlined,::ng-deep .al-input-category-error mat-icon{color:#e854a4!important}::ng-deep .al-input-field .material-symbols-outlined[matPrefix],::ng-deep .al-input-field mat-icon[matPrefix]{padding-left:12px!important;padding-right:8px!important}::ng-deep .al-input-field .material-symbols-outlined[matSuffix],::ng-deep .al-input-field mat-icon[matSuffix]{padding-right:12px!important;padding-left:8px}.mat-mdc-form-field-icon-suffix{padding:0!important}::ng-deep .al-input-field.has-left-icon .mat-mdc-form-field-label{margin-left:8px!important}::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-form-field-label,::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-floating-label,::ng-deep .al-input-field:not(.has-left-icon) .mdc-floating-label{margin-left:0!important}::ng-deep .mat-mdc-form-field-icon-prefix{padding:0!important}.material-symbols-outlined[matSuffix],mat-icon[matSuffix]{display:flex;align-items:center;justify-content:center}::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:10px!important}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:11px!important}::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:15px!important}::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:8px!important}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:20px!important}::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY(-20px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY(-22px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-base .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(-26px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-header .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(-18px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY(-30px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-field.has-error .mat-mdc-form-field-outline{border-color:#e854a4!important}::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,::ng-deep .al-input-category-disabled .mat-mdc-form-field-label,::ng-deep .al-input-category-disabled .mat-mdc-select-arrow,::ng-deep .al-input-category-disabled .material-symbols-outlined,::ng-deep .al-input-category-disabled mat-icon,::ng-deep .al-input-category-disabled input,::ng-deep .al-input-category-disabled .mat-mdc-select-value{color:#9ca3af!important;opacity:.6!important}::ng-deep .al-input-field .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-floating-label,::ng-deep .al-input-field .mdc-floating-label,::ng-deep .al-input-field .mdc-text-field__label,::ng-deep .al-input-field .mdc-text-field__label--float-above{transition:none!important}::ng-deep .al-input-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field:hover .mdc-floating-label,::ng-deep .al-input-field:hover .mdc-text-field__label,::ng-deep .al-input-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-floating-label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-success .mat-mdc-form-field-hint{color:#00ad83!important}::ng-deep .al-input-category-error .mat-mdc-form-field-hint{color:#e854a4!important}::ng-deep .al-input-category-simple .mat-mdc-form-field-hint,::ng-deep .al-input-category-primary .mat-mdc-form-field-hint,::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,::ng-deep .al-input-category-plain .mat-mdc-form-field-hint{color:#4b4f62!important}::ng-deep .al-input-category-simple:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-simple:hover .mat-mdc-floating-label,::ng-deep .al-input-category-simple:hover .mdc-floating-label,::ng-deep .al-input-category-simple:hover .mdc-text-field__label,::ng-deep .al-input-category-simple:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-primary:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-primary:hover .mat-mdc-floating-label,::ng-deep .al-input-category-primary:hover .mdc-floating-label,::ng-deep .al-input-category-primary:hover .mdc-text-field__label,::ng-deep .al-input-category-primary:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-error:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-error:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-error:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-error:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above{color:#e854a4!important}::ng-deep .al-input-category-disabled:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-disabled:hover .mat-mdc-floating-label,::ng-deep .al-input-category-disabled:hover .mdc-floating-label,::ng-deep .al-input-category-disabled:hover .mdc-text-field__label,::ng-deep .al-input-category-disabled:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-plain:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-plain:hover .mat-mdc-floating-label,::ng-deep .al-input-category-plain:hover .mdc-floating-label,::ng-deep .al-input-category-plain:hover .mdc-text-field__label,::ng-deep .al-input-category-plain:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-success .mat-mdc-select-arrow{color:#00ad83!important}::ng-deep .al-input-category-error .mat-mdc-select-arrow{color:#e854a4!important}::ng-deep .al-input-field .mat-mdc-form-field-hint-wrapper,::ng-deep .al-input-field .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .al-input-field.has-helper-text .mat-mdc-form-field-hint,::ng-deep .al-input-field.has-helper-text .mat-mdc-form-field-error{display:block!important;opacity:1!important}::ng-deep .al-input-field:not(.has-helper-text):not(.has-error) .mat-mdc-form-field-hint,::ng-deep .al-input-field:not(.has-helper-text):not(.has-error) .mat-mdc-form-field-error{display:none!important;opacity:0!important}::ng-deep .al-input-field .mat-mdc-form-field .mat-mdc-floating-label{transition:color .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)!important;pointer-events:none}::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field.mat-form-field-should-float .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:not(.mat-mdc-form-field-label-always-float) .mat-mdc-floating-label.mdc-floating-label--float-above{transform:var(--mat-mdc-form-field-label-transform)!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-floating-label--float-above{transform:var(--mat-mdc-form-field-label-transform)!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-floating-label:not(.mdc-floating-label--float-above){transform:translateY(0)!important}::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:#5473e8!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline{box-shadow:none!important}::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__trailing{border-color:#c3c5d1!important;border-width:1px!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#c3c5d1!important;border-width:1px!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__leading{border-right:none!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important;border-right:none!important}::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:#5473e8!important;border-width:2px!important}::ng-deep .al-input-field .mat-mdc-form-field:active .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field:active .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field:active .mdc-notched-outline__trailing{border-color:#5473e8!important;border-width:2px!important}::ng-deep .al-input-field .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .al-input-field .mat-datepicker-toggle{display:flex!important;align-items:center!important;justify-content:center!important;margin-left:auto!important;margin-right:6px!important}::ng-deep .al-input-field .mat-datepicker-toggle .mat-mdc-icon-button{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .al-input-field .mat-datepicker-toggle .mat-mdc-icon-button.mat-mdc-button-base{padding:0!important;height:24px!important;width:24px!important}::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle .mat-mdc-icon-button.mat-mdc-button-base{height:36px!important;width:36px!important;padding:4px!important}::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle{height:36px!important;width:36px!important}::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .al-input-field .mat-mdc-icon-button.mat-mdc-button-small{padding:4px!important;height:36px!important;width:36px!important}::ng-deep .al-input-field .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:#5473e8!important}::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper:hover{border-color:transparent!important}::ng-deep .al-input-field.al-input-category-success input::placeholder,::ng-deep .al-input-field.al-input-category-success:hover input::placeholder,::ng-deep .al-input-field.al-input-category-success:focus input::placeholder,::ng-deep .al-input-field.al-input-category-success:active input::placeholder,::ng-deep .al-input-field.al-input-category-success input:hover::placeholder,::ng-deep .al-input-field.al-input-category-success input:focus::placeholder,::ng-deep .al-input-field.al-input-category-success input:active::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error input::placeholder,::ng-deep .al-input-field.al-input-category-error:hover input::placeholder,::ng-deep .al-input-field.al-input-category-error:focus input::placeholder,::ng-deep .al-input-field.al-input-category-error:active input::placeholder,::ng-deep .al-input-field.al-input-category-error input:hover::placeholder,::ng-deep .al-input-field.al-input-category-error input:focus::placeholder,::ng-deep .al-input-field.al-input-category-error input:active::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field input::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover input::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:focus input::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:active input::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field input::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover input::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:focus input::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:active input::placeholder{color:#e854a4!important}::ng-deep .al-input-field input::placeholder{color:#4b4f62!important}::ng-deep .al-input-field.al-input-category-success input::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error input::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input:hover::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input:focus::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input:active::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input:hover::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input:focus::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input:active::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success input[placeholder]::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error input[placeholder]::placeholder{color:#e854a4!important}::ng-deep .mat-mdc-form-field.al-input-category-success .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix input::placeholder{color:#00ad83!important}::ng-deep .mat-mdc-form-field.al-input-category-error .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix input::placeholder{color:#e854a4!important}::ng-deep .mat-mdc-form-field.al-input-field.al-input-category-success input::placeholder{color:#00ad83!important}::ng-deep .mat-mdc-form-field.al-input-field.al-input-category-error input::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success input::placeholder{color:#00ad83!important;-webkit-text-fill-color:#00AD83!important}::ng-deep .al-input-field.al-input-category-success input::-webkit-input-placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-success input::-moz-placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-success input:-ms-input-placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error input::placeholder{color:#e854a4!important;-webkit-text-fill-color:#E854A4!important}::ng-deep .al-input-field.al-input-category-error input::-webkit-input-placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-error input::-moz-placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-error input:-ms-input-placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label{color:#e854a4!important}.color-picker-container{display:flex;align-items:center;width:100%;position:relative}.color-picker-input{position:absolute;right:12px;width:24px;height:24px;border:none;border-radius:4px;cursor:pointer;opacity:0;z-index:2}.color-picker-container:after{content:\"\";position:absolute;right:0;width:24px;height:24px;border-radius:4px;border:2px solid #C3C5D1;background-color:var(--color-value, #000000);pointer-events:none;z-index:1}.color-picker-container:hover:after{border-color:#5473e8}.color-picker-input:focus+.color-picker-container:after,.color-picker-input:focus-visible+.color-picker-container:after{border-color:#5473e8;box-shadow:0 0 0 1px #5473e8}::ng-deep .al-input-size-xs .color-picker-input,::ng-deep .al-input-size-small .color-picker-input,::ng-deep .al-input-size-header .color-picker-input{width:20px;height:20px;right:0}::ng-deep .al-input-size-xs .color-picker-container:after,::ng-deep .al-input-size-small .color-picker-container:after,::ng-deep .al-input-size-header .color-picker-container:after{width:20px;height:20px;right:0}::ng-deep .al-input-size-large .color-picker-input{width:28px;height:28px;right:0}::ng-deep .al-input-size-large .color-picker-container:after{width:28px;height:28px;right:0}::ng-deep .al-input-category-success .color-picker-container:after{border-color:#00ad83}::ng-deep .al-input-category-success .color-picker-container:hover:after{border-color:#00ad83}::ng-deep .al-input-category-error .color-picker-container:after{border-color:#e854a4}::ng-deep .al-input-category-error .color-picker-container:hover:after{border-color:#e854a4}::ng-deep .al-input-category-disabled .color-picker-container:after{border-color:#9ca3af;opacity:.6}::ng-deep .al-input-category-disabled .color-picker-input{cursor:not-allowed}.color-picker-input:focus{outline:none}::ng-deep .al-input-field .color-picker-container .mat-mdc-form-field-infix{display:flex!important;align-items:center!important;flex:1!important}::ng-deep .al-input-field .color-picker-container{display:flex!important;align-items:center!important;width:100%!important;position:relative!important}.color-picker-icon{color:#4b4f62!important;cursor:pointer!important;transition:color .2s ease!important}.color-picker-container:hover .color-picker-icon{color:#5473e8!important}.color-picker-input:focus+.color-picker-icon{color:#5473e8!important}::ng-deep .al-input-size-xs .color-picker-icon,::ng-deep .al-input-size-small .color-picker-icon,::ng-deep .al-input-size-header .color-picker-icon{font-size:16px!important;width:16px!important;height:16px!important}::ng-deep .al-input-size-base .color-picker-icon{font-size:20px!important;width:22px!important;height:20px!important}::ng-deep .al-input-size-large .color-picker-icon{font-size:24px!important;width:24px!important;height:24px!important}::ng-deep .al-input-category-success .color-picker-icon{color:#00ad83!important}::ng-deep .al-input-category-success .color-picker-container:hover .color-picker-icon{color:#00ad83!important}::ng-deep .al-input-category-error .color-picker-icon{color:#e854a4!important}::ng-deep .al-input-category-error .color-picker-container:hover .color-picker-icon{color:#e854a4!important}::ng-deep .al-input-category-disabled .color-picker-icon{color:#9ca3af!important;opacity:.6!important}::ng-deep .al-input-category-disabled .color-picker-container:hover .color-picker-icon{color:#9ca3af!important}::ng-deep .color-picker-container .color-picker-icon{position:absolute!important;right:4px!important;z-index:1!important;pointer-events:none!important}::ng-deep .al-input-size-xs .color-picker-container .color-picker-icon,::ng-deep .al-input-size-small .color-picker-container .color-picker-icon,::ng-deep .al-input-size-header .color-picker-container .color-picker-icon{right:8px!important}::ng-deep .al-input-size-large .color-picker-container .color-picker-icon{right:6px!important}::ng-deep .color-picker-container .color-picker-input{position:absolute!important;right:4px!important;width:24px!important;height:24px!important;border:none!important;border-radius:4px!important;cursor:pointer!important;opacity:0!important;z-index:2!important}::ng-deep .al-input-size-xs .color-picker-container .color-picker-input,::ng-deep .al-input-size-small .color-picker-container .color-picker-input,::ng-deep .al-input-size-header .color-picker-container .color-picker-input{right:8px!important;width:20px!important;height:20px!important}::ng-deep .al-input-size-large .color-picker-container .color-picker-input{right:6px!important;width:28px!important;height:28px!important}.color-picker-container:after{display:none!important}::ng-deep .mat-mdc-option,::ng-deep .mat-option{font-family:Roboto,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:400!important;line-height:140%!important;letter-spacing:.04px!important;color:var(--Gray-700, #414651)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text,::ng-deep .mat-mdc-option .mat-mdc-option-text,::ng-deep .mat-option .mat-option-text{font-family:Roboto,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:400!important;line-height:140%!important;letter-spacing:.04px!important;color:var(--Gray-700, #414651)!important}::ng-deep .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-option:hover:not(.mat-option-disabled){background-color:#f7f9fe!important}::ng-deep .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-option:focus:not(.mat-option-disabled),::ng-deep .mat-mdc-option.cdk-keyboard-focused:not(.mdc-list-item--disabled),::ng-deep .mat-option.cdk-keyboard-focused:not(.mat-option-disabled){background-color:#e5e9fc!important;outline:none}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled),::ng-deep .mat-option.mat-selected:not(.mat-option-disabled){background-color:#f7f9fe!important;color:#5473e8!important}::ng-deep .mat-mdc-option:focus.mdc-list-item,::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:#f7f9fe!important}::ng-deep .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-option.mdc-list-item--selected .mat-mdc-option-text,::ng-deep .mat-option.mat-selected .mat-option-text{color:#5473e8!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked,::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:#5473e8!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+        ], viewQueries: [{ propertyName: "internalDatepicker", first: true, predicate: ["dp"], descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: ["autocompleteTrigger"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Standard floating label layout for all inputs including date picker -->\n<mat-form-field #formField appearance=\"outline\" class=\"al-input-field\" [ngClass]=\"[\n    helperText ? 'has-helper-text' : '',\n    getSizeClass(),\n    getCategoryClass(),\n    noBorder ? 'al-input-no-border' : '',\n    leftIcon ? 'has-left-icon' : ''\n  ]\" [attr.data-test-id]=\"dataTestId\" [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\"\n  [matTooltipDisabled]=\"!tooltip\">\n  <mat-label *ngIf=\"labelText && !noBorder\">{{ labelText }}</mat-label>\n\n  <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\" [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n    matPrefix class=\"left-icon\">{{ leftIconText }}</mat-icon>\n\n  <ng-container *ngIf=\"hasDropDown; else regularInput\">\n    <!-- Searchable Dropdown with Autocomplete -->\n    <ng-container *ngIf=\"isSearchableDropdown; else regularDropdown\">\n      <input matInput #searchInput type=\"text\" [placeholder]=\"placeholder || labelText\" [disabled]=\"isDisabled\"\n        [value]=\"searchValue\" (input)=\"onSearchInputChange($event)\" (focus)=\"onSearchFocus()\" (click)=\"onSearchFocus()\"\n        (blur)=\"onTouched()\" [matAutocomplete]=\"auto\" #autocompleteTrigger=\"matAutocompleteTrigger\"\n        autocomplete=\"off\" />\n      <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onOptionSelected($event)\" [displayWith]=\"displayFn\"\n        panelClass=\"al-searchable-dropdown-panel\" [autoActiveFirstOption]=\"false\" [panelWidth]=\"null\">\n        <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\n          {{ option }}\n        </mat-option>\n        <mat-option *ngIf=\"filteredOptions.length === 0 && searchValue && searchValue.trim()\" disabled>\n          <span style=\"display: flex; align-items: center; gap: 8px;\">\n            <mat-icon style=\"font-size: 18px; width: 18px; height: 18px;\">search_off</mat-icon>\n            <span>No results found</span>\n          </span>\n        </mat-option>\n      </mat-autocomplete>\n      <mat-icon matSuffix class=\"search-icon\" *ngIf=\"!rightIcon?.trim()\">search</mat-icon>\n      <mat-icon *ngIf=\"rightIcon?.trim() && isSearchableDropdown\" matSuffix class=\"right-icon\">{{ rightIcon\n        }}</mat-icon>\n    </ng-container>\n\n    <!-- Regular Dropdown (non-searchable) -->\n    <ng-template #regularDropdown>\n      <mat-select [disabled]=\"isDisabled\" [multiple]=\"multipleSelect\"\n        [ngModel]=\"multipleSelect ? selectedValues : value\" (selectionChange)=\"onSelectionChange($event.value)\"\n        [placeholder]=\"placeholder || labelText\">\n        <mat-option *ngFor=\"let option of options\" [value]=\"option\">{{ option }}</mat-option>\n      </mat-select>\n    </ng-template>\n  </ng-container>\n  <ng-template #regularInput>\n    <!-- Color Picker Input -->\n    <ng-container *ngIf=\"isColorPicker; else datePickerInput\">\n      <div class=\"color-picker-container\">\n        <input matInput [placeholder]=\"placeholder || labelText\" [disabled]=\"isDisabled\" [(ngModel)]=\"value\"\n          (input)=\"onInputChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n        <input type=\"color\" class=\"color-picker-input\" [value]=\"value || '#000000'\" [disabled]=\"isDisabled\"\n          (input)=\"handleColorChange($event)\" (blur)=\"onTouched()\" />\n        <mat-icon class=\"color-picker-icon\" matSuffix>palette</mat-icon>\n      </div>\n    </ng-container>\n\n    <!-- Date Picker Input - with floating label animation -->\n    <ng-template #datePickerInput>\n      <ng-container *ngIf=\"isDatePicker; else standardInput\">\n        <input matInput [matDatepicker]=\"datepickerRef\" [placeholder]=\"placeholder || labelText\" [disabled]=\"isDisabled\"\n          [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\" (blur)=\"onTouched()\" />\n        <mat-datepicker-toggle matSuffix [for]=\"datepickerRef\"></mat-datepicker-toggle>\n        <mat-datepicker #dp *ngIf=\"!matDatepicker\" startView=\"multi-year\" (monthSelected)=\"onMonthSelected($event, dp)\"\n          (yearSelected)=\"onYearSelected($event, dp)\" panelClass=\"example-month-picker\">\n        </mat-datepicker>\n      </ng-container>\n\n      <!-- Standard Input -->\n      <ng-template #standardInput>\n        <input matInput [placeholder]=\"placeholder || labelText\" [type]=\"type\" [disabled]=\"isDisabled\"\n          [(ngModel)]=\"value\" (input)=\"onInputChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n      </ng-template>\n    </ng-template>\n  </ng-template>\n\n  <!-- Right icon - only show when not date picker, not color picker, and not searchable dropdown -->\n  <mat-icon *ngIf=\"!isDatePicker && !isColorPicker && !isSearchableDropdown && rightIcon?.trim() as rightIconText\"\n    [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\" matSuffix class=\"right-icon\">{{ rightIconText\n    }}</mat-icon>\n\n  <mat-error *ngIf=\"false && helperText\">{{ helperText }}</mat-error>\n  <mat-hint *ngIf=\"helperText\">{{ helperText }}</mat-hint>\n</mat-form-field>", styles: ["@import\"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\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap\";@import\"https://cdn.jsdelivr.net/npm/@angular/material@19.2.3/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.al-input-field{width:100%}::ng-deep .al-input-field .mat-mdc-form-field-flex{display:flex!important;align-items:center!important;flex-direction:row!important}::ng-deep .al-input-field .mat-mdc-form-field-infix{display:flex!important;align-items:center!important;flex:1!important}::ng-deep .al-input-field input[matInput]{flex:1!important;text-align:left!important}::ng-deep .al-input-field .mat-mdc-form-field-suffix{display:flex!important;align-items:center!important;margin-left:auto!important;margin-right:12px!important}::ng-deep .al-input-field .mat-mdc-form-field-flex,::ng-deep .al-input-field .mat-mdc-text-field-wrapper,::ng-deep .al-input-field .mat-mdc-form-field-infix{background-color:#f7f9fe!important}::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper{background-color:transparent!important;display:none!important}.mdc-notched-outline.mdc-notched-outline--no-label{background:#fff;border-radius:4px!important}::ng-deep .al-input-field.has-helper-text .mat-mdc-form-field-subscript-wrapper,::ng-deep .al-input-field.has-error .mat-mdc-form-field-subscript-wrapper{display:block!important}::ng-deep .al-input-field .mat-mdc-form-field-focus-overlay{background-color:#f7f9fe!important}::ng-deep .al-input-category-primary,::ng-deep .al-input-category-success,::ng-deep .al-input-category-error,::ng-deep .al-input-category-disabled{--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}::ng-deep .al-input-category-simple{--mdc-outlined-text-field-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-focus-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-label-text-color: $color-blue !important;--mdc-outlined-text-field-focus-label-text-color: $color-blue !important}::ng-deep .al-input-category-success{--mdc-outlined-text-field-outline-color: #00AD83 !important;--mdc-outlined-text-field-focus-outline-color: #00AD83 !important;--mdc-outlined-text-field-hover-outline-color: #00AD83 !important;--mdc-outlined-text-field-label-text-color: #00AD83 !important;--mdc-outlined-text-field-focus-label-text-color: #00AD83 !important}::ng-deep .al-input-category-success input::placeholder{color:#00ad83!important}::ng-deep .al-input-category-error{--mdc-outlined-text-field-outline-color: #E854A4 !important;--mdc-outlined-text-field-focus-outline-color: #E854A4 !important;--mdc-outlined-text-field-hover-outline-color: #E854A4 !important;--mdc-outlined-text-field-label-text-color: $color-error-500 !important;--mdc-outlined-text-field-focus-label-text-color: $color-error-500 !important}::ng-deep .al-input-category-error input::placeholder{color:#e854a4!important}::ng-deep .al-input-category-disabled{--mdc-outlined-text-field-outline-color: $color-blue !important;--mdc-outlined-text-field-focus-outline-color: $color-blue !important;--mdc-outlined-text-field-hover-outline-color: $color-blue !important;--mdc-outlined-text-field-label-text-color: $color-blue !important;--mdc-outlined-text-field-focus-label-text-color: $color-blue !important}::ng-deep .al-input-category-primary{--mdc-outlined-text-field-focus-outline-width: 2px !important;--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-label-text-color: $color-blue !important;--mdc-outlined-text-field-focus-label-text-color: $color-blue !important}::ng-deep .al-input-category-primary .mdc-notched-outline{box-shadow:none!important}::ng-deep .al-input-category-plain{--mdc-outlined-text-field-outline-color: transparent !important;--mdc-outlined-text-field-focus-outline-color: transparent !important;--mdc-outlined-text-field-hover-outline-color: transparent !important;--mdc-outlined-text-field-outline-width: 0 !important;--mdc-outlined-text-field-focus-outline-width: 0 !important;--mdc-outlined-text-field-hover-outline-width: 0 !important}::ng-deep .al-input-category-plain .mat-mdc-form-field-outline,::ng-deep .al-input-category-plain .mat-mdc-form-field-outline-thick,::ng-deep .al-input-category-plain .mat-mdc-form-field-label,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-line-ripple{display:none!important}::ng-deep .al-input-category-plain .material-symbols-outlined,::ng-deep .al-input-category-plain mat-icon{color:#4b4f62!important}::ng-deep .al-input-field{border-width:1px!important}::ng-deep .al-input-field.mat-focused .mdc-notched-outline__leading,::ng-deep .al-input-field.mat-focused .mdc-notched-outline__notch,::ng-deep .al-input-field.mat-focused .mdc-notched-outline__trailing{border-width:2px!important}::ng-deep .al-input-size-xs .mat-mdc-form-field-infix,::ng-deep .al-input-size-small .mat-mdc-form-field-infix,::ng-deep .al-input-size-header .mat-mdc-form-field-infix{padding:0!important;display:flex;align-items:center}::ng-deep .al-input-size-xs .mat-mdc-form-field-infix{min-height:32px!important}::ng-deep .al-input-size-small .mat-mdc-form-field-infix{min-height:36px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-infix{padding:8px 0!important;min-height:24px!important}::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper,::ng-deep .al-input-field.al-input-size-large .mat-mdc-form-field-flex{min-height:48px!important;max-height:48px!important;height:48px!important;box-sizing:border-box!important}::ng-deep .al-input-field.al-input-size-large .mat-mdc-form-field-infix,::ng-deep .al-input-size-large .mat-mdc-form-field-infix{padding:12px 0!important;min-height:48px!important;max-height:48px!important;height:48px!important;box-sizing:border-box!important}::ng-deep .al-input-size-header .mat-mdc-form-field-infix{min-height:28px!important}::ng-deep .al-input-size-xs .mdc-notched-outline,::ng-deep .al-input-size-small .mdc-notched-outline,::ng-deep .al-input-size-base .mdc-notched-outline,::ng-deep .al-input-size-header .mdc-notched-outline{border-top-left-radius:4px!important;border-bottom-left-radius:4px!important}::ng-deep .al-input-size-small .mdc-notched-outline__trailing,::ng-deep .al-input-size-base .mdc-notched-outline__trailing,::ng-deep .al-input-size-xs .mdc-notched-outline__trailing,::ng-deep .al-input-size-header .mdc-notched-outline__trailing{border-top-right-radius:4px!important;border-bottom-right-radius:4px!important}::ng-deep .al-input-size-large .mdc-notched-outline__leading{border-top-left-radius:4px!important;border-bottom-left-radius:4px!important}::ng-deep .al-input-size-large .mdc-notched-outline__trailing{border-top-right-radius:4px!important;border-bottom-right-radius:4px!important}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline--upgraded,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline--upgraded{min-height:48px!important;max-height:48px!important;height:48px!important;box-sizing:border-box!important}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{min-height:48px!important;max-height:48px!important;height:48px!important;box-sizing:border-box!important}::ng-deep .al-input-no-border{--mdc-outlined-text-field-outline-color: transparent !important;--mdc-outlined-text-field-focus-outline-color: transparent !important;--mdc-outlined-text-field-hover-outline-color: transparent !important;--mdc-outlined-text-field-outline-width: 0 !important;--mdc-outlined-text-field-focus-outline-width: 0 !important;--mdc-outlined-text-field-hover-outline-width: 0 !important}::ng-deep .al-input-no-border .mat-mdc-form-field-outline,::ng-deep .al-input-no-border .mat-mdc-form-field-outline-thick,::ng-deep .al-input-no-border .mat-mdc-form-field-label,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-line-ripple{display:none!important}::ng-deep .al-input-field input,::ng-deep .al-input-field .mat-mdc-select-value{color:#4b4f62!important}::ng-deep .al-input-size-xs input,::ng-deep .al-input-size-xs .mat-mdc-select-value,::ng-deep .al-input-size-small input,::ng-deep .al-input-size-small .mat-mdc-select-value,::ng-deep .al-input-size-header input,::ng-deep .al-input-size-header .mat-mdc-select-value{font-size:12px!important}::ng-deep .al-input-size-base input,::ng-deep .al-input-size-base .mat-mdc-select-value{font-size:14px!important}::ng-deep .al-input-size-large input,::ng-deep .al-input-size-large .mat-mdc-select-value{font-size:16px!important}::ng-deep .al-input-field input::placeholder{font-size:12px!important}::ng-deep .al-input-field:hover input::placeholder,::ng-deep .al-input-field:focus input::placeholder,::ng-deep .al-input-field:active input::placeholder,::ng-deep .al-input-field input:hover::placeholder,::ng-deep .al-input-field input:focus::placeholder,::ng-deep .al-input-field input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-category-primary:hover input::placeholder,::ng-deep .al-input-category-primary:focus input::placeholder,::ng-deep .al-input-category-primary:active input::placeholder,::ng-deep .al-input-category-primary input:hover::placeholder,::ng-deep .al-input-category-primary input:focus::placeholder,::ng-deep .al-input-category-primary input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-category-simple:hover input::placeholder,::ng-deep .al-input-category-simple:focus input::placeholder,::ng-deep .al-input-category-simple:active input::placeholder,::ng-deep .al-input-category-simple input:hover::placeholder,::ng-deep .al-input-category-simple input:focus::placeholder,::ng-deep .al-input-category-simple input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-size-xs .mat-mdc-form-field-label,::ng-deep .al-input-size-xs .mat-mdc-floating-label,::ng-deep .al-input-size-small .mat-mdc-form-field-label,::ng-deep .al-input-size-small .mat-mdc-floating-label,::ng-deep .al-input-size-header .mat-mdc-form-field-label,::ng-deep .al-input-size-header .mat-mdc-floating-label{font-size:12px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-label,::ng-deep .al-input-size-base .mat-mdc-floating-label{font-size:14px!important}::ng-deep .al-input-size-large .mat-mdc-form-field-label,::ng-deep .al-input-size-large .mat-mdc-floating-label{font-size:16px!important}::ng-deep .al-input-category-simple input,::ng-deep .al-input-category-simple .mat-mdc-select-value,::ng-deep .al-input-category-primary input,::ng-deep .al-input-category-primary .mat-mdc-select-value{font-weight:400!important;letter-spacing:.5px!important}::ng-deep .al-input-field .material-symbols-outlined,::ng-deep .al-input-field mat-icon{height:20px!important;width:20px!important;font-size:20px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .al-input-size-small .material-symbols-outlined,::ng-deep .al-input-size-xs .material-symbols-outlined,::ng-deep .al-input-size-header .material-symbols-outlined,::ng-deep .al-input-size-small mat-icon,::ng-deep .al-input-size-xs mat-icon,::ng-deep .al-input-size-header mat-icon{height:16px!important;width:16px!important;font-size:16px!important}::ng-deep .al-input-size-large .material-symbols-outlined,::ng-deep .al-input-size-large mat-icon{height:24px!important;width:24px!important;font-size:24px!important}::ng-deep .al-input-category-simple .material-symbols-outlined,::ng-deep .al-input-category-primary .material-symbols-outlined,::ng-deep .al-input-category-simple mat-icon,::ng-deep .al-input-category-primary mat-icon{color:#4b4f62!important}::ng-deep .al-input-category-success .material-symbols-outlined,::ng-deep .al-input-category-success mat-icon{color:#00ad83!important}::ng-deep .al-input-category-error .material-symbols-outlined,::ng-deep .al-input-category-error mat-icon{color:#e854a4!important}::ng-deep .al-input-field .material-symbols-outlined[matPrefix],::ng-deep .al-input-field mat-icon[matPrefix]{padding-left:12px!important;padding-right:8px!important}::ng-deep .al-input-field .material-symbols-outlined[matSuffix],::ng-deep .al-input-field mat-icon[matSuffix]{padding-right:12px!important;padding-left:8px}.mat-mdc-form-field-icon-suffix{padding:0!important}::ng-deep .al-input-field.has-left-icon .mat-mdc-form-field-label{margin-left:8px!important}::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-form-field-label,::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-floating-label,::ng-deep .al-input-field:not(.has-left-icon) .mdc-floating-label{margin-left:0!important}::ng-deep .mat-mdc-form-field-icon-prefix{padding:0!important}.material-symbols-outlined[matSuffix],mat-icon[matSuffix]{display:flex;align-items:center;justify-content:center}::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:var(--al-floating-label-top-xs, 10px)!important}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:var(--al-floating-label-top-small, 11px)!important}::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:var(--al-floating-label-top-base, 15px)!important}::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:var(--al-floating-label-top-header, 8px)!important}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:var(--al-floating-label-top-header, 20px)!important}::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY(-20px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY(-22px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-base .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(-26px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-header .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(-18px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY(-30px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-field.has-error .mat-mdc-form-field-outline{border-color:#e854a4!important}::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,::ng-deep .al-input-category-disabled .mat-mdc-form-field-label,::ng-deep .al-input-category-disabled .mat-mdc-select-arrow,::ng-deep .al-input-category-disabled .material-symbols-outlined,::ng-deep .al-input-category-disabled mat-icon,::ng-deep .al-input-category-disabled input,::ng-deep .al-input-category-disabled .mat-mdc-select-value{color:#9ca3af!important;opacity:.6!important}::ng-deep .al-input-field .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-floating-label,::ng-deep .al-input-field .mdc-floating-label,::ng-deep .al-input-field .mdc-text-field__label,::ng-deep .al-input-field .mdc-text-field__label--float-above{transition:none!important}::ng-deep .al-input-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field:hover .mdc-floating-label,::ng-deep .al-input-field:hover .mdc-text-field__label,::ng-deep .al-input-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-floating-label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-success .mat-mdc-form-field-hint{color:#00ad83!important}::ng-deep .al-input-category-error .mat-mdc-form-field-hint{color:#e854a4!important}::ng-deep .al-input-category-simple .mat-mdc-form-field-hint,::ng-deep .al-input-category-primary .mat-mdc-form-field-hint,::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,::ng-deep .al-input-category-plain .mat-mdc-form-field-hint{color:#4b4f62!important}::ng-deep .al-input-category-simple:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-simple:hover .mat-mdc-floating-label,::ng-deep .al-input-category-simple:hover .mdc-floating-label,::ng-deep .al-input-category-simple:hover .mdc-text-field__label,::ng-deep .al-input-category-simple:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-primary:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-primary:hover .mat-mdc-floating-label,::ng-deep .al-input-category-primary:hover .mdc-floating-label,::ng-deep .al-input-category-primary:hover .mdc-text-field__label,::ng-deep .al-input-category-primary:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-error:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-error:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-error:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-error:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above{color:#e854a4!important}::ng-deep .al-input-category-disabled:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-disabled:hover .mat-mdc-floating-label,::ng-deep .al-input-category-disabled:hover .mdc-floating-label,::ng-deep .al-input-category-disabled:hover .mdc-text-field__label,::ng-deep .al-input-category-disabled:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-plain:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-plain:hover .mat-mdc-floating-label,::ng-deep .al-input-category-plain:hover .mdc-floating-label,::ng-deep .al-input-category-plain:hover .mdc-text-field__label,::ng-deep .al-input-category-plain:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-success .mat-mdc-select-arrow{color:#00ad83!important}::ng-deep .al-input-category-error .mat-mdc-select-arrow{color:#e854a4!important}::ng-deep .al-input-field .mat-mdc-form-field-hint-wrapper,::ng-deep .al-input-field .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .al-input-field.has-helper-text .mat-mdc-form-field-hint,::ng-deep .al-input-field.has-helper-text .mat-mdc-form-field-error{display:block!important;opacity:1!important}::ng-deep .al-input-field:not(.has-helper-text):not(.has-error) .mat-mdc-form-field-hint,::ng-deep .al-input-field:not(.has-helper-text):not(.has-error) .mat-mdc-form-field-error{display:none!important;opacity:0!important}::ng-deep .al-input-field .mat-mdc-form-field .mat-mdc-floating-label{transition:color .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)!important;pointer-events:none}::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field.mat-form-field-should-float .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:not(.mat-mdc-form-field-label-always-float) .mat-mdc-floating-label.mdc-floating-label--float-above{transform:var(--mat-mdc-form-field-label-transform)!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-floating-label--float-above{transform:var(--mat-mdc-form-field-label-transform)!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-floating-label:not(.mdc-floating-label--float-above){transform:translateY(0)!important}::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:#5473e8!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline{box-shadow:none!important}::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__trailing{border-color:#c3c5d1!important;border-width:1px!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#c3c5d1!important;border-width:1px!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__leading{border-right:none!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important;border-right:none!important}::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:#5473e8!important;border-width:2px!important}::ng-deep .al-input-field .mat-mdc-form-field:active .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field:active .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field:active .mdc-notched-outline__trailing{border-color:#5473e8!important;border-width:2px!important}::ng-deep .al-input-field .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .al-input-field .mat-datepicker-toggle{display:flex!important;align-items:center!important;justify-content:center!important;margin-left:auto!important;margin-right:6px!important}::ng-deep .al-input-field .mat-datepicker-toggle .mat-mdc-icon-button{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .al-input-field .mat-datepicker-toggle .mat-mdc-icon-button.mat-mdc-button-base{padding:0!important;height:24px!important;width:24px!important}::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle .mat-mdc-icon-button.mat-mdc-button-base{height:36px!important;width:36px!important;padding:4px!important}::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle{height:36px!important;width:36px!important}::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .al-input-field .mat-mdc-icon-button.mat-mdc-button-small{padding:4px!important;height:36px!important;width:36px!important}::ng-deep .al-input-field .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:#5473e8!important}::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper:hover{border-color:transparent!important}::ng-deep .al-input-field.al-input-category-success input::placeholder,::ng-deep .al-input-field.al-input-category-success:hover input::placeholder,::ng-deep .al-input-field.al-input-category-success:focus input::placeholder,::ng-deep .al-input-field.al-input-category-success:active input::placeholder,::ng-deep .al-input-field.al-input-category-success input:hover::placeholder,::ng-deep .al-input-field.al-input-category-success input:focus::placeholder,::ng-deep .al-input-field.al-input-category-success input:active::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error input::placeholder,::ng-deep .al-input-field.al-input-category-error:hover input::placeholder,::ng-deep .al-input-field.al-input-category-error:focus input::placeholder,::ng-deep .al-input-field.al-input-category-error:active input::placeholder,::ng-deep .al-input-field.al-input-category-error input:hover::placeholder,::ng-deep .al-input-field.al-input-category-error input:focus::placeholder,::ng-deep .al-input-field.al-input-category-error input:active::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field input::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover input::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:focus input::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:active input::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field input::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover input::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:focus input::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:active input::placeholder{color:#e854a4!important}::ng-deep .al-input-field input::placeholder{color:#4b4f62!important}::ng-deep .al-input-field.al-input-category-success input::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error input::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input:hover::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input:focus::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input:active::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input:hover::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input:focus::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input:active::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success input[placeholder]::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error input[placeholder]::placeholder{color:#e854a4!important}::ng-deep .mat-mdc-form-field.al-input-category-success .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix input::placeholder{color:#00ad83!important}::ng-deep .mat-mdc-form-field.al-input-category-error .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix input::placeholder{color:#e854a4!important}::ng-deep .mat-mdc-form-field.al-input-field.al-input-category-success input::placeholder{color:#00ad83!important}::ng-deep .mat-mdc-form-field.al-input-field.al-input-category-error input::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success input::placeholder{color:#00ad83!important;-webkit-text-fill-color:#00AD83!important}::ng-deep .al-input-field.al-input-category-success input::-webkit-input-placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-success input::-moz-placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-success input:-ms-input-placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error input::placeholder{color:#e854a4!important;-webkit-text-fill-color:#E854A4!important}::ng-deep .al-input-field.al-input-category-error input::-webkit-input-placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-error input::-moz-placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-error input:-ms-input-placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label{color:#e854a4!important}.color-picker-container{display:flex;align-items:center;width:100%;position:relative}.color-picker-input{position:absolute;right:12px;width:24px;height:24px;border:none;border-radius:4px;cursor:pointer;opacity:0;z-index:2}.color-picker-container:after{content:\"\";position:absolute;right:0;width:24px;height:24px;border-radius:4px;border:2px solid #C3C5D1;background-color:var(--color-value, #000000);pointer-events:none;z-index:1}.color-picker-container:hover:after{border-color:#5473e8}.color-picker-input:focus+.color-picker-container:after,.color-picker-input:focus-visible+.color-picker-container:after{border-color:#5473e8;box-shadow:0 0 0 1px #5473e8}::ng-deep .al-input-size-xs .color-picker-input,::ng-deep .al-input-size-small .color-picker-input,::ng-deep .al-input-size-header .color-picker-input{width:20px;height:20px;right:0}::ng-deep .al-input-size-xs .color-picker-container:after,::ng-deep .al-input-size-small .color-picker-container:after,::ng-deep .al-input-size-header .color-picker-container:after{width:20px;height:20px;right:0}::ng-deep .al-input-size-large .color-picker-input{width:28px;height:28px;right:0}::ng-deep .al-input-size-large .color-picker-container:after{width:28px;height:28px;right:0}::ng-deep .al-input-category-success .color-picker-container:after{border-color:#00ad83}::ng-deep .al-input-category-success .color-picker-container:hover:after{border-color:#00ad83}::ng-deep .al-input-category-error .color-picker-container:after{border-color:#e854a4}::ng-deep .al-input-category-error .color-picker-container:hover:after{border-color:#e854a4}::ng-deep .al-input-category-disabled .color-picker-container:after{border-color:#9ca3af;opacity:.6}::ng-deep .al-input-category-disabled .color-picker-input{cursor:not-allowed}.color-picker-input:focus{outline:none}::ng-deep .al-input-field .color-picker-container .mat-mdc-form-field-infix{display:flex!important;align-items:center!important;flex:1!important}::ng-deep .al-input-field .color-picker-container{display:flex!important;align-items:center!important;width:100%!important;position:relative!important}.color-picker-icon{color:#4b4f62!important;cursor:pointer!important;transition:color .2s ease!important}.color-picker-container:hover .color-picker-icon{color:#5473e8!important}.color-picker-input:focus+.color-picker-icon{color:#5473e8!important}::ng-deep .al-input-size-xs .color-picker-icon,::ng-deep .al-input-size-small .color-picker-icon,::ng-deep .al-input-size-header .color-picker-icon{font-size:16px!important;width:16px!important;height:16px!important}::ng-deep .al-input-size-base .color-picker-icon{font-size:20px!important;width:22px!important;height:20px!important}::ng-deep .al-input-size-large .color-picker-icon{font-size:24px!important;width:24px!important;height:24px!important}::ng-deep .al-input-category-success .color-picker-icon{color:#00ad83!important}::ng-deep .al-input-category-success .color-picker-container:hover .color-picker-icon{color:#00ad83!important}::ng-deep .al-input-category-error .color-picker-icon{color:#e854a4!important}::ng-deep .al-input-category-error .color-picker-container:hover .color-picker-icon{color:#e854a4!important}::ng-deep .al-input-category-disabled .color-picker-icon{color:#9ca3af!important;opacity:.6!important}::ng-deep .al-input-category-disabled .color-picker-container:hover .color-picker-icon{color:#9ca3af!important}::ng-deep .color-picker-container .color-picker-icon{position:absolute!important;right:4px!important;z-index:1!important;pointer-events:none!important}::ng-deep .al-input-size-xs .color-picker-container .color-picker-icon,::ng-deep .al-input-size-small .color-picker-container .color-picker-icon,::ng-deep .al-input-size-header .color-picker-container .color-picker-icon{right:8px!important}::ng-deep .al-input-size-large .color-picker-container .color-picker-icon{right:6px!important}::ng-deep .color-picker-container .color-picker-input{position:absolute!important;right:4px!important;width:24px!important;height:24px!important;border:none!important;border-radius:4px!important;cursor:pointer!important;opacity:0!important;z-index:2!important}::ng-deep .al-input-size-xs .color-picker-container .color-picker-input,::ng-deep .al-input-size-small .color-picker-container .color-picker-input,::ng-deep .al-input-size-header .color-picker-container .color-picker-input{right:8px!important;width:20px!important;height:20px!important}::ng-deep .al-input-size-large .color-picker-container .color-picker-input{right:6px!important;width:28px!important;height:28px!important}.color-picker-container:after{display:none!important}::ng-deep .mat-mdc-option,::ng-deep .mat-option{font-family:Roboto,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:400!important;line-height:140%!important;letter-spacing:.04px!important;color:var(--Gray-700, #414651)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text,::ng-deep .mat-mdc-option .mat-mdc-option-text,::ng-deep .mat-option .mat-option-text{font-family:Roboto,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:400!important;line-height:140%!important;letter-spacing:.04px!important;color:var(--Gray-700, #414651)!important}::ng-deep .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-option:hover:not(.mat-option-disabled){background-color:#f7f9fe!important}::ng-deep .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-option:focus:not(.mat-option-disabled),::ng-deep .mat-mdc-option.cdk-keyboard-focused:not(.mdc-list-item--disabled),::ng-deep .mat-option.cdk-keyboard-focused:not(.mat-option-disabled){background-color:#e5e9fc!important;outline:none}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled),::ng-deep .mat-option.mat-selected:not(.mat-option-disabled){background-color:#f7f9fe!important;color:#5473e8!important}::ng-deep .mat-mdc-option:focus.mdc-list-item,::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:#f7f9fe!important}::ng-deep .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-option.mdc-list-item--selected .mat-mdc-option-text,::ng-deep .mat-option.mat-selected .mat-option-text{color:#5473e8!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked,::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:#5473e8!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -1038,7 +1040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => InputComponent),
                             multi: true
                         }
-                    ], template: "<!-- Standard floating label layout for all inputs including date picker -->\n<mat-form-field #formField appearance=\"outline\" class=\"al-input-field\" [ngClass]=\"[\n    helperText ? 'has-helper-text' : '',\n    getSizeClass(),\n    getCategoryClass(),\n    noBorder ? 'al-input-no-border' : '',\n    leftIcon ? 'has-left-icon' : ''\n  ]\" [attr.data-test-id]=\"dataTestId\" [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\"\n  [matTooltipDisabled]=\"!tooltip\">\n  <mat-label *ngIf=\"labelText && !noBorder\">{{ labelText }}</mat-label>\n\n  <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\" [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n    matPrefix class=\"left-icon\">{{ leftIconText }}</mat-icon>\n\n  <ng-container *ngIf=\"hasDropDown; else regularInput\">\n    <!-- Searchable Dropdown with Autocomplete -->\n    <ng-container *ngIf=\"isSearchableDropdown; else regularDropdown\">\n      <input matInput #searchInput type=\"text\" [placeholder]=\"placeholder || labelText\" [disabled]=\"isDisabled\"\n        [value]=\"searchValue\" (input)=\"onSearchInputChange($event)\" (focus)=\"onSearchFocus()\" (click)=\"onSearchFocus()\"\n        (blur)=\"onTouched()\" [matAutocomplete]=\"auto\" #autocompleteTrigger=\"matAutocompleteTrigger\"\n        autocomplete=\"off\" />\n      <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onOptionSelected($event)\" [displayWith]=\"displayFn\"\n        panelClass=\"al-searchable-dropdown-panel\" [autoActiveFirstOption]=\"false\" [panelWidth]=\"null\">\n        <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\n          {{ option }}\n        </mat-option>\n        <mat-option *ngIf=\"filteredOptions.length === 0 && searchValue && searchValue.trim()\" disabled>\n          <span style=\"display: flex; align-items: center; gap: 8px;\">\n            <mat-icon style=\"font-size: 18px; width: 18px; height: 18px;\">search_off</mat-icon>\n            <span>No results found</span>\n          </span>\n        </mat-option>\n      </mat-autocomplete>\n      <mat-icon matSuffix class=\"search-icon\" *ngIf=\"!rightIcon?.trim()\">search</mat-icon>\n      <mat-icon *ngIf=\"rightIcon?.trim() && isSearchableDropdown\" matSuffix class=\"right-icon\">{{ rightIcon\n        }}</mat-icon>\n    </ng-container>\n\n    <!-- Regular Dropdown (non-searchable) -->\n    <ng-template #regularDropdown>\n      <mat-select [disabled]=\"isDisabled\" [multiple]=\"multipleSelect\"\n        [ngModel]=\"multipleSelect ? selectedValues : value\" (selectionChange)=\"onSelectionChange($event.value)\"\n        [placeholder]=\"placeholder || labelText\">\n        <mat-option *ngFor=\"let option of options\" [value]=\"option\">{{ option }}</mat-option>\n      </mat-select>\n    </ng-template>\n  </ng-container>\n  <ng-template #regularInput>\n    <!-- Color Picker Input -->\n    <ng-container *ngIf=\"isColorPicker; else datePickerInput\">\n      <div class=\"color-picker-container\">\n        <input matInput [placeholder]=\"placeholder || labelText\" [disabled]=\"isDisabled\" [(ngModel)]=\"value\"\n          (input)=\"onInputChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n        <input type=\"color\" class=\"color-picker-input\" [value]=\"value || '#000000'\" [disabled]=\"isDisabled\"\n          (input)=\"handleColorChange($event)\" (blur)=\"onTouched()\" />\n        <mat-icon class=\"color-picker-icon\" matSuffix>palette</mat-icon>\n      </div>\n    </ng-container>\n\n    <!-- Date Picker Input - with floating label animation -->\n    <ng-template #datePickerInput>\n      <ng-container *ngIf=\"isDatePicker; else standardInput\">\n        <input matInput [matDatepicker]=\"datepickerRef\" [placeholder]=\"placeholder || labelText\" [disabled]=\"isDisabled\"\n          [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\" (blur)=\"onTouched()\" />\n        <mat-datepicker-toggle matSuffix [for]=\"datepickerRef\"></mat-datepicker-toggle>\n        <mat-datepicker #dp *ngIf=\"!matDatepicker\" startView=\"multi-year\" (monthSelected)=\"onMonthSelected($event, dp)\"\n          (yearSelected)=\"onYearSelected($event, dp)\" panelClass=\"example-month-picker\">\n        </mat-datepicker>\n      </ng-container>\n\n      <!-- Standard Input -->\n      <ng-template #standardInput>\n        <input matInput [placeholder]=\"placeholder || labelText\" [type]=\"type\" [disabled]=\"isDisabled\"\n          [(ngModel)]=\"value\" (input)=\"onInputChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n      </ng-template>\n    </ng-template>\n  </ng-template>\n\n  <!-- Right icon - only show when not date picker, not color picker, and not searchable dropdown -->\n  <mat-icon *ngIf=\"!isDatePicker && !isColorPicker && !isSearchableDropdown && rightIcon?.trim() as rightIconText\"\n    [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\" matSuffix class=\"right-icon\">{{ rightIconText\n    }}</mat-icon>\n\n  <mat-error *ngIf=\"false && helperText\">{{ helperText }}</mat-error>\n  <mat-hint *ngIf=\"helperText\">{{ helperText }}</mat-hint>\n</mat-form-field>", styles: ["@import\"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\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap\";@import\"https://cdn.jsdelivr.net/npm/@angular/material@19.2.3/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.al-input-field{width:100%}::ng-deep .al-input-field .mat-mdc-form-field-flex{display:flex!important;align-items:center!important;flex-direction:row!important}::ng-deep .al-input-field .mat-mdc-form-field-infix{display:flex!important;align-items:center!important;flex:1!important}::ng-deep .al-input-field input[matInput]{flex:1!important;text-align:left!important}::ng-deep .al-input-field .mat-mdc-form-field-suffix{display:flex!important;align-items:center!important;margin-left:auto!important;margin-right:12px!important}::ng-deep .al-input-field .mat-mdc-form-field-flex,::ng-deep .al-input-field .mat-mdc-text-field-wrapper,::ng-deep .al-input-field .mat-mdc-form-field-infix{background-color:#f7f9fe!important}::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper{background-color:transparent!important;display:none!important}.mdc-notched-outline.mdc-notched-outline--no-label{background:#fff;border-radius:4px!important}::ng-deep .al-input-field.has-helper-text .mat-mdc-form-field-subscript-wrapper,::ng-deep .al-input-field.has-error .mat-mdc-form-field-subscript-wrapper{display:block!important}::ng-deep .al-input-field .mat-mdc-form-field-focus-overlay{background-color:#f7f9fe!important}::ng-deep .al-input-category-primary,::ng-deep .al-input-category-success,::ng-deep .al-input-category-error,::ng-deep .al-input-category-disabled{--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}::ng-deep .al-input-category-simple{--mdc-outlined-text-field-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-focus-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-label-text-color: $color-blue !important;--mdc-outlined-text-field-focus-label-text-color: $color-blue !important}::ng-deep .al-input-category-success{--mdc-outlined-text-field-outline-color: #00AD83 !important;--mdc-outlined-text-field-focus-outline-color: #00AD83 !important;--mdc-outlined-text-field-hover-outline-color: #00AD83 !important;--mdc-outlined-text-field-label-text-color: #00AD83 !important;--mdc-outlined-text-field-focus-label-text-color: #00AD83 !important}::ng-deep .al-input-category-success input::placeholder{color:#00ad83!important}::ng-deep .al-input-category-error{--mdc-outlined-text-field-outline-color: #E854A4 !important;--mdc-outlined-text-field-focus-outline-color: #E854A4 !important;--mdc-outlined-text-field-hover-outline-color: #E854A4 !important;--mdc-outlined-text-field-label-text-color: $color-error-500 !important;--mdc-outlined-text-field-focus-label-text-color: $color-error-500 !important}::ng-deep .al-input-category-error input::placeholder{color:#e854a4!important}::ng-deep .al-input-category-disabled{--mdc-outlined-text-field-outline-color: $color-blue !important;--mdc-outlined-text-field-focus-outline-color: $color-blue !important;--mdc-outlined-text-field-hover-outline-color: $color-blue !important;--mdc-outlined-text-field-label-text-color: $color-blue !important;--mdc-outlined-text-field-focus-label-text-color: $color-blue !important}::ng-deep .al-input-category-primary{--mdc-outlined-text-field-focus-outline-width: 2px !important;--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-label-text-color: $color-blue !important;--mdc-outlined-text-field-focus-label-text-color: $color-blue !important}::ng-deep .al-input-category-primary .mdc-notched-outline{box-shadow:none!important}::ng-deep .al-input-category-plain{--mdc-outlined-text-field-outline-color: transparent !important;--mdc-outlined-text-field-focus-outline-color: transparent !important;--mdc-outlined-text-field-hover-outline-color: transparent !important;--mdc-outlined-text-field-outline-width: 0 !important;--mdc-outlined-text-field-focus-outline-width: 0 !important;--mdc-outlined-text-field-hover-outline-width: 0 !important}::ng-deep .al-input-category-plain .mat-mdc-form-field-outline,::ng-deep .al-input-category-plain .mat-mdc-form-field-outline-thick,::ng-deep .al-input-category-plain .mat-mdc-form-field-label,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-line-ripple{display:none!important}::ng-deep .al-input-category-plain .material-symbols-outlined,::ng-deep .al-input-category-plain mat-icon{color:#4b4f62!important}::ng-deep .al-input-field{border-width:1px!important}::ng-deep .al-input-field.mat-focused .mdc-notched-outline__leading,::ng-deep .al-input-field.mat-focused .mdc-notched-outline__notch,::ng-deep .al-input-field.mat-focused .mdc-notched-outline__trailing{border-width:2px!important}::ng-deep .al-input-size-xs .mat-mdc-form-field-infix,::ng-deep .al-input-size-small .mat-mdc-form-field-infix,::ng-deep .al-input-size-header .mat-mdc-form-field-infix{padding:0!important;display:flex;align-items:center}::ng-deep .al-input-size-xs .mat-mdc-form-field-infix{min-height:32px!important}::ng-deep .al-input-size-small .mat-mdc-form-field-infix{min-height:36px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-infix{padding:8px 0!important;min-height:24px!important}::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper,::ng-deep .al-input-field.al-input-size-large .mat-mdc-form-field-flex{min-height:48px!important;max-height:48px!important;height:48px!important;box-sizing:border-box!important}::ng-deep .al-input-field.al-input-size-large .mat-mdc-form-field-infix,::ng-deep .al-input-size-large .mat-mdc-form-field-infix{padding:12px 0!important;min-height:48px!important;max-height:48px!important;height:48px!important;box-sizing:border-box!important}::ng-deep .al-input-size-header .mat-mdc-form-field-infix{min-height:28px!important}::ng-deep .al-input-size-xs .mdc-notched-outline,::ng-deep .al-input-size-small .mdc-notched-outline,::ng-deep .al-input-size-base .mdc-notched-outline,::ng-deep .al-input-size-header .mdc-notched-outline{border-top-left-radius:4px!important;border-bottom-left-radius:4px!important}::ng-deep .al-input-size-small .mdc-notched-outline__trailing,::ng-deep .al-input-size-base .mdc-notched-outline__trailing,::ng-deep .al-input-size-xs .mdc-notched-outline__trailing,::ng-deep .al-input-size-header .mdc-notched-outline__trailing{border-top-right-radius:4px!important;border-bottom-right-radius:4px!important}::ng-deep .al-input-size-large .mdc-notched-outline__leading{border-top-left-radius:4px!important;border-bottom-left-radius:4px!important}::ng-deep .al-input-size-large .mdc-notched-outline__trailing{border-top-right-radius:4px!important;border-bottom-right-radius:4px!important}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline--upgraded,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline--upgraded{min-height:48px!important;max-height:48px!important;height:48px!important;box-sizing:border-box!important}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{min-height:48px!important;max-height:48px!important;height:48px!important;box-sizing:border-box!important}::ng-deep .al-input-no-border{--mdc-outlined-text-field-outline-color: transparent !important;--mdc-outlined-text-field-focus-outline-color: transparent !important;--mdc-outlined-text-field-hover-outline-color: transparent !important;--mdc-outlined-text-field-outline-width: 0 !important;--mdc-outlined-text-field-focus-outline-width: 0 !important;--mdc-outlined-text-field-hover-outline-width: 0 !important}::ng-deep .al-input-no-border .mat-mdc-form-field-outline,::ng-deep .al-input-no-border .mat-mdc-form-field-outline-thick,::ng-deep .al-input-no-border .mat-mdc-form-field-label,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-line-ripple{display:none!important}::ng-deep .al-input-field input,::ng-deep .al-input-field .mat-mdc-select-value{color:#4b4f62!important}::ng-deep .al-input-size-xs input,::ng-deep .al-input-size-xs .mat-mdc-select-value,::ng-deep .al-input-size-small input,::ng-deep .al-input-size-small .mat-mdc-select-value,::ng-deep .al-input-size-header input,::ng-deep .al-input-size-header .mat-mdc-select-value{font-size:12px!important}::ng-deep .al-input-size-base input,::ng-deep .al-input-size-base .mat-mdc-select-value{font-size:14px!important}::ng-deep .al-input-size-large input,::ng-deep .al-input-size-large .mat-mdc-select-value{font-size:16px!important}::ng-deep .al-input-field input::placeholder{font-size:12px!important}::ng-deep .al-input-field:hover input::placeholder,::ng-deep .al-input-field:focus input::placeholder,::ng-deep .al-input-field:active input::placeholder,::ng-deep .al-input-field input:hover::placeholder,::ng-deep .al-input-field input:focus::placeholder,::ng-deep .al-input-field input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-category-primary:hover input::placeholder,::ng-deep .al-input-category-primary:focus input::placeholder,::ng-deep .al-input-category-primary:active input::placeholder,::ng-deep .al-input-category-primary input:hover::placeholder,::ng-deep .al-input-category-primary input:focus::placeholder,::ng-deep .al-input-category-primary input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-category-simple:hover input::placeholder,::ng-deep .al-input-category-simple:focus input::placeholder,::ng-deep .al-input-category-simple:active input::placeholder,::ng-deep .al-input-category-simple input:hover::placeholder,::ng-deep .al-input-category-simple input:focus::placeholder,::ng-deep .al-input-category-simple input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-size-xs .mat-mdc-form-field-label,::ng-deep .al-input-size-xs .mat-mdc-floating-label,::ng-deep .al-input-size-small .mat-mdc-form-field-label,::ng-deep .al-input-size-small .mat-mdc-floating-label,::ng-deep .al-input-size-header .mat-mdc-form-field-label,::ng-deep .al-input-size-header .mat-mdc-floating-label{font-size:12px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-label,::ng-deep .al-input-size-base .mat-mdc-floating-label{font-size:14px!important}::ng-deep .al-input-size-large .mat-mdc-form-field-label,::ng-deep .al-input-size-large .mat-mdc-floating-label{font-size:16px!important}::ng-deep .al-input-category-simple input,::ng-deep .al-input-category-simple .mat-mdc-select-value,::ng-deep .al-input-category-primary input,::ng-deep .al-input-category-primary .mat-mdc-select-value{font-weight:400!important;letter-spacing:.5px!important}::ng-deep .al-input-field .material-symbols-outlined,::ng-deep .al-input-field mat-icon{height:20px!important;width:20px!important;font-size:20px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .al-input-size-small .material-symbols-outlined,::ng-deep .al-input-size-xs .material-symbols-outlined,::ng-deep .al-input-size-header .material-symbols-outlined,::ng-deep .al-input-size-small mat-icon,::ng-deep .al-input-size-xs mat-icon,::ng-deep .al-input-size-header mat-icon{height:16px!important;width:16px!important;font-size:16px!important}::ng-deep .al-input-size-large .material-symbols-outlined,::ng-deep .al-input-size-large mat-icon{height:24px!important;width:24px!important;font-size:24px!important}::ng-deep .al-input-category-simple .material-symbols-outlined,::ng-deep .al-input-category-primary .material-symbols-outlined,::ng-deep .al-input-category-simple mat-icon,::ng-deep .al-input-category-primary mat-icon{color:#4b4f62!important}::ng-deep .al-input-category-success .material-symbols-outlined,::ng-deep .al-input-category-success mat-icon{color:#00ad83!important}::ng-deep .al-input-category-error .material-symbols-outlined,::ng-deep .al-input-category-error mat-icon{color:#e854a4!important}::ng-deep .al-input-field .material-symbols-outlined[matPrefix],::ng-deep .al-input-field mat-icon[matPrefix]{padding-left:12px!important;padding-right:8px!important}::ng-deep .al-input-field .material-symbols-outlined[matSuffix],::ng-deep .al-input-field mat-icon[matSuffix]{padding-right:12px!important;padding-left:8px}.mat-mdc-form-field-icon-suffix{padding:0!important}::ng-deep .al-input-field.has-left-icon .mat-mdc-form-field-label{margin-left:8px!important}::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-form-field-label,::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-floating-label,::ng-deep .al-input-field:not(.has-left-icon) .mdc-floating-label{margin-left:0!important}::ng-deep .mat-mdc-form-field-icon-prefix{padding:0!important}.material-symbols-outlined[matSuffix],mat-icon[matSuffix]{display:flex;align-items:center;justify-content:center}::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:10px!important}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:11px!important}::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:15px!important}::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:8px!important}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:20px!important}::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY(-20px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY(-22px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-base .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(-26px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-header .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(-18px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY(-30px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-field.has-error .mat-mdc-form-field-outline{border-color:#e854a4!important}::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,::ng-deep .al-input-category-disabled .mat-mdc-form-field-label,::ng-deep .al-input-category-disabled .mat-mdc-select-arrow,::ng-deep .al-input-category-disabled .material-symbols-outlined,::ng-deep .al-input-category-disabled mat-icon,::ng-deep .al-input-category-disabled input,::ng-deep .al-input-category-disabled .mat-mdc-select-value{color:#9ca3af!important;opacity:.6!important}::ng-deep .al-input-field .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-floating-label,::ng-deep .al-input-field .mdc-floating-label,::ng-deep .al-input-field .mdc-text-field__label,::ng-deep .al-input-field .mdc-text-field__label--float-above{transition:none!important}::ng-deep .al-input-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field:hover .mdc-floating-label,::ng-deep .al-input-field:hover .mdc-text-field__label,::ng-deep .al-input-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-floating-label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-success .mat-mdc-form-field-hint{color:#00ad83!important}::ng-deep .al-input-category-error .mat-mdc-form-field-hint{color:#e854a4!important}::ng-deep .al-input-category-simple .mat-mdc-form-field-hint,::ng-deep .al-input-category-primary .mat-mdc-form-field-hint,::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,::ng-deep .al-input-category-plain .mat-mdc-form-field-hint{color:#4b4f62!important}::ng-deep .al-input-category-simple:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-simple:hover .mat-mdc-floating-label,::ng-deep .al-input-category-simple:hover .mdc-floating-label,::ng-deep .al-input-category-simple:hover .mdc-text-field__label,::ng-deep .al-input-category-simple:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-primary:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-primary:hover .mat-mdc-floating-label,::ng-deep .al-input-category-primary:hover .mdc-floating-label,::ng-deep .al-input-category-primary:hover .mdc-text-field__label,::ng-deep .al-input-category-primary:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-error:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-error:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-error:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-error:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above{color:#e854a4!important}::ng-deep .al-input-category-disabled:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-disabled:hover .mat-mdc-floating-label,::ng-deep .al-input-category-disabled:hover .mdc-floating-label,::ng-deep .al-input-category-disabled:hover .mdc-text-field__label,::ng-deep .al-input-category-disabled:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-plain:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-plain:hover .mat-mdc-floating-label,::ng-deep .al-input-category-plain:hover .mdc-floating-label,::ng-deep .al-input-category-plain:hover .mdc-text-field__label,::ng-deep .al-input-category-plain:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-success .mat-mdc-select-arrow{color:#00ad83!important}::ng-deep .al-input-category-error .mat-mdc-select-arrow{color:#e854a4!important}::ng-deep .al-input-field .mat-mdc-form-field-hint-wrapper,::ng-deep .al-input-field .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .al-input-field.has-helper-text .mat-mdc-form-field-hint,::ng-deep .al-input-field.has-helper-text .mat-mdc-form-field-error{display:block!important;opacity:1!important}::ng-deep .al-input-field:not(.has-helper-text):not(.has-error) .mat-mdc-form-field-hint,::ng-deep .al-input-field:not(.has-helper-text):not(.has-error) .mat-mdc-form-field-error{display:none!important;opacity:0!important}::ng-deep .al-input-field .mat-mdc-form-field .mat-mdc-floating-label{transition:color .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)!important;pointer-events:none}::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field.mat-form-field-should-float .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:not(.mat-mdc-form-field-label-always-float) .mat-mdc-floating-label.mdc-floating-label--float-above{transform:var(--mat-mdc-form-field-label-transform)!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-floating-label--float-above{transform:var(--mat-mdc-form-field-label-transform)!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-floating-label:not(.mdc-floating-label--float-above){transform:translateY(0)!important}::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:#5473e8!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline{box-shadow:none!important}::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__trailing{border-color:#c3c5d1!important;border-width:1px!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#c3c5d1!important;border-width:1px!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__leading{border-right:none!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important;border-right:none!important}::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:#5473e8!important;border-width:2px!important}::ng-deep .al-input-field .mat-mdc-form-field:active .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field:active .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field:active .mdc-notched-outline__trailing{border-color:#5473e8!important;border-width:2px!important}::ng-deep .al-input-field .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .al-input-field .mat-datepicker-toggle{display:flex!important;align-items:center!important;justify-content:center!important;margin-left:auto!important;margin-right:6px!important}::ng-deep .al-input-field .mat-datepicker-toggle .mat-mdc-icon-button{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .al-input-field .mat-datepicker-toggle .mat-mdc-icon-button.mat-mdc-button-base{padding:0!important;height:24px!important;width:24px!important}::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle .mat-mdc-icon-button.mat-mdc-button-base{height:36px!important;width:36px!important;padding:4px!important}::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle{height:36px!important;width:36px!important}::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .al-input-field .mat-mdc-icon-button.mat-mdc-button-small{padding:4px!important;height:36px!important;width:36px!important}::ng-deep .al-input-field .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:#5473e8!important}::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper:hover{border-color:transparent!important}::ng-deep .al-input-field.al-input-category-success input::placeholder,::ng-deep .al-input-field.al-input-category-success:hover input::placeholder,::ng-deep .al-input-field.al-input-category-success:focus input::placeholder,::ng-deep .al-input-field.al-input-category-success:active input::placeholder,::ng-deep .al-input-field.al-input-category-success input:hover::placeholder,::ng-deep .al-input-field.al-input-category-success input:focus::placeholder,::ng-deep .al-input-field.al-input-category-success input:active::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error input::placeholder,::ng-deep .al-input-field.al-input-category-error:hover input::placeholder,::ng-deep .al-input-field.al-input-category-error:focus input::placeholder,::ng-deep .al-input-field.al-input-category-error:active input::placeholder,::ng-deep .al-input-field.al-input-category-error input:hover::placeholder,::ng-deep .al-input-field.al-input-category-error input:focus::placeholder,::ng-deep .al-input-field.al-input-category-error input:active::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field input::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover input::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:focus input::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:active input::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field input::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover input::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:focus input::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:active input::placeholder{color:#e854a4!important}::ng-deep .al-input-field input::placeholder{color:#4b4f62!important}::ng-deep .al-input-field.al-input-category-success input::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error input::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input:hover::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input:focus::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input:active::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input:hover::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input:focus::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input:active::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success input[placeholder]::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error input[placeholder]::placeholder{color:#e854a4!important}::ng-deep .mat-mdc-form-field.al-input-category-success .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix input::placeholder{color:#00ad83!important}::ng-deep .mat-mdc-form-field.al-input-category-error .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix input::placeholder{color:#e854a4!important}::ng-deep .mat-mdc-form-field.al-input-field.al-input-category-success input::placeholder{color:#00ad83!important}::ng-deep .mat-mdc-form-field.al-input-field.al-input-category-error input::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success input::placeholder{color:#00ad83!important;-webkit-text-fill-color:#00AD83!important}::ng-deep .al-input-field.al-input-category-success input::-webkit-input-placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-success input::-moz-placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-success input:-ms-input-placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error input::placeholder{color:#e854a4!important;-webkit-text-fill-color:#E854A4!important}::ng-deep .al-input-field.al-input-category-error input::-webkit-input-placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-error input::-moz-placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-error input:-ms-input-placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label{color:#e854a4!important}.color-picker-container{display:flex;align-items:center;width:100%;position:relative}.color-picker-input{position:absolute;right:12px;width:24px;height:24px;border:none;border-radius:4px;cursor:pointer;opacity:0;z-index:2}.color-picker-container:after{content:\"\";position:absolute;right:0;width:24px;height:24px;border-radius:4px;border:2px solid #C3C5D1;background-color:var(--color-value, #000000);pointer-events:none;z-index:1}.color-picker-container:hover:after{border-color:#5473e8}.color-picker-input:focus+.color-picker-container:after,.color-picker-input:focus-visible+.color-picker-container:after{border-color:#5473e8;box-shadow:0 0 0 1px #5473e8}::ng-deep .al-input-size-xs .color-picker-input,::ng-deep .al-input-size-small .color-picker-input,::ng-deep .al-input-size-header .color-picker-input{width:20px;height:20px;right:0}::ng-deep .al-input-size-xs .color-picker-container:after,::ng-deep .al-input-size-small .color-picker-container:after,::ng-deep .al-input-size-header .color-picker-container:after{width:20px;height:20px;right:0}::ng-deep .al-input-size-large .color-picker-input{width:28px;height:28px;right:0}::ng-deep .al-input-size-large .color-picker-container:after{width:28px;height:28px;right:0}::ng-deep .al-input-category-success .color-picker-container:after{border-color:#00ad83}::ng-deep .al-input-category-success .color-picker-container:hover:after{border-color:#00ad83}::ng-deep .al-input-category-error .color-picker-container:after{border-color:#e854a4}::ng-deep .al-input-category-error .color-picker-container:hover:after{border-color:#e854a4}::ng-deep .al-input-category-disabled .color-picker-container:after{border-color:#9ca3af;opacity:.6}::ng-deep .al-input-category-disabled .color-picker-input{cursor:not-allowed}.color-picker-input:focus{outline:none}::ng-deep .al-input-field .color-picker-container .mat-mdc-form-field-infix{display:flex!important;align-items:center!important;flex:1!important}::ng-deep .al-input-field .color-picker-container{display:flex!important;align-items:center!important;width:100%!important;position:relative!important}.color-picker-icon{color:#4b4f62!important;cursor:pointer!important;transition:color .2s ease!important}.color-picker-container:hover .color-picker-icon{color:#5473e8!important}.color-picker-input:focus+.color-picker-icon{color:#5473e8!important}::ng-deep .al-input-size-xs .color-picker-icon,::ng-deep .al-input-size-small .color-picker-icon,::ng-deep .al-input-size-header .color-picker-icon{font-size:16px!important;width:16px!important;height:16px!important}::ng-deep .al-input-size-base .color-picker-icon{font-size:20px!important;width:22px!important;height:20px!important}::ng-deep .al-input-size-large .color-picker-icon{font-size:24px!important;width:24px!important;height:24px!important}::ng-deep .al-input-category-success .color-picker-icon{color:#00ad83!important}::ng-deep .al-input-category-success .color-picker-container:hover .color-picker-icon{color:#00ad83!important}::ng-deep .al-input-category-error .color-picker-icon{color:#e854a4!important}::ng-deep .al-input-category-error .color-picker-container:hover .color-picker-icon{color:#e854a4!important}::ng-deep .al-input-category-disabled .color-picker-icon{color:#9ca3af!important;opacity:.6!important}::ng-deep .al-input-category-disabled .color-picker-container:hover .color-picker-icon{color:#9ca3af!important}::ng-deep .color-picker-container .color-picker-icon{position:absolute!important;right:4px!important;z-index:1!important;pointer-events:none!important}::ng-deep .al-input-size-xs .color-picker-container .color-picker-icon,::ng-deep .al-input-size-small .color-picker-container .color-picker-icon,::ng-deep .al-input-size-header .color-picker-container .color-picker-icon{right:8px!important}::ng-deep .al-input-size-large .color-picker-container .color-picker-icon{right:6px!important}::ng-deep .color-picker-container .color-picker-input{position:absolute!important;right:4px!important;width:24px!important;height:24px!important;border:none!important;border-radius:4px!important;cursor:pointer!important;opacity:0!important;z-index:2!important}::ng-deep .al-input-size-xs .color-picker-container .color-picker-input,::ng-deep .al-input-size-small .color-picker-container .color-picker-input,::ng-deep .al-input-size-header .color-picker-container .color-picker-input{right:8px!important;width:20px!important;height:20px!important}::ng-deep .al-input-size-large .color-picker-container .color-picker-input{right:6px!important;width:28px!important;height:28px!important}.color-picker-container:after{display:none!important}::ng-deep .mat-mdc-option,::ng-deep .mat-option{font-family:Roboto,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:400!important;line-height:140%!important;letter-spacing:.04px!important;color:var(--Gray-700, #414651)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text,::ng-deep .mat-mdc-option .mat-mdc-option-text,::ng-deep .mat-option .mat-option-text{font-family:Roboto,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:400!important;line-height:140%!important;letter-spacing:.04px!important;color:var(--Gray-700, #414651)!important}::ng-deep .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-option:hover:not(.mat-option-disabled){background-color:#f7f9fe!important}::ng-deep .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-option:focus:not(.mat-option-disabled),::ng-deep .mat-mdc-option.cdk-keyboard-focused:not(.mdc-list-item--disabled),::ng-deep .mat-option.cdk-keyboard-focused:not(.mat-option-disabled){background-color:#e5e9fc!important;outline:none}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled),::ng-deep .mat-option.mat-selected:not(.mat-option-disabled){background-color:#f7f9fe!important;color:#5473e8!important}::ng-deep .mat-mdc-option:focus.mdc-list-item,::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:#f7f9fe!important}::ng-deep .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-option.mdc-list-item--selected .mat-mdc-option-text,::ng-deep .mat-option.mat-selected .mat-option-text{color:#5473e8!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked,::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:#5473e8!important}\n"] }]
+                    ], template: "<!-- Standard floating label layout for all inputs including date picker -->\n<mat-form-field #formField appearance=\"outline\" class=\"al-input-field\" [ngClass]=\"[\n    helperText ? 'has-helper-text' : '',\n    getSizeClass(),\n    getCategoryClass(),\n    noBorder ? 'al-input-no-border' : '',\n    leftIcon ? 'has-left-icon' : ''\n  ]\" [attr.data-test-id]=\"dataTestId\" [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\"\n  [matTooltipDisabled]=\"!tooltip\">\n  <mat-label *ngIf=\"labelText && !noBorder\">{{ labelText }}</mat-label>\n\n  <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\" [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n    matPrefix class=\"left-icon\">{{ leftIconText }}</mat-icon>\n\n  <ng-container *ngIf=\"hasDropDown; else regularInput\">\n    <!-- Searchable Dropdown with Autocomplete -->\n    <ng-container *ngIf=\"isSearchableDropdown; else regularDropdown\">\n      <input matInput #searchInput type=\"text\" [placeholder]=\"placeholder || labelText\" [disabled]=\"isDisabled\"\n        [value]=\"searchValue\" (input)=\"onSearchInputChange($event)\" (focus)=\"onSearchFocus()\" (click)=\"onSearchFocus()\"\n        (blur)=\"onTouched()\" [matAutocomplete]=\"auto\" #autocompleteTrigger=\"matAutocompleteTrigger\"\n        autocomplete=\"off\" />\n      <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onOptionSelected($event)\" [displayWith]=\"displayFn\"\n        panelClass=\"al-searchable-dropdown-panel\" [autoActiveFirstOption]=\"false\" [panelWidth]=\"null\">\n        <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\n          {{ option }}\n        </mat-option>\n        <mat-option *ngIf=\"filteredOptions.length === 0 && searchValue && searchValue.trim()\" disabled>\n          <span style=\"display: flex; align-items: center; gap: 8px;\">\n            <mat-icon style=\"font-size: 18px; width: 18px; height: 18px;\">search_off</mat-icon>\n            <span>No results found</span>\n          </span>\n        </mat-option>\n      </mat-autocomplete>\n      <mat-icon matSuffix class=\"search-icon\" *ngIf=\"!rightIcon?.trim()\">search</mat-icon>\n      <mat-icon *ngIf=\"rightIcon?.trim() && isSearchableDropdown\" matSuffix class=\"right-icon\">{{ rightIcon\n        }}</mat-icon>\n    </ng-container>\n\n    <!-- Regular Dropdown (non-searchable) -->\n    <ng-template #regularDropdown>\n      <mat-select [disabled]=\"isDisabled\" [multiple]=\"multipleSelect\"\n        [ngModel]=\"multipleSelect ? selectedValues : value\" (selectionChange)=\"onSelectionChange($event.value)\"\n        [placeholder]=\"placeholder || labelText\">\n        <mat-option *ngFor=\"let option of options\" [value]=\"option\">{{ option }}</mat-option>\n      </mat-select>\n    </ng-template>\n  </ng-container>\n  <ng-template #regularInput>\n    <!-- Color Picker Input -->\n    <ng-container *ngIf=\"isColorPicker; else datePickerInput\">\n      <div class=\"color-picker-container\">\n        <input matInput [placeholder]=\"placeholder || labelText\" [disabled]=\"isDisabled\" [(ngModel)]=\"value\"\n          (input)=\"onInputChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n        <input type=\"color\" class=\"color-picker-input\" [value]=\"value || '#000000'\" [disabled]=\"isDisabled\"\n          (input)=\"handleColorChange($event)\" (blur)=\"onTouched()\" />\n        <mat-icon class=\"color-picker-icon\" matSuffix>palette</mat-icon>\n      </div>\n    </ng-container>\n\n    <!-- Date Picker Input - with floating label animation -->\n    <ng-template #datePickerInput>\n      <ng-container *ngIf=\"isDatePicker; else standardInput\">\n        <input matInput [matDatepicker]=\"datepickerRef\" [placeholder]=\"placeholder || labelText\" [disabled]=\"isDisabled\"\n          [(ngModel)]=\"selectedDate\" (dateChange)=\"onDateChange($event)\" (blur)=\"onTouched()\" />\n        <mat-datepicker-toggle matSuffix [for]=\"datepickerRef\"></mat-datepicker-toggle>\n        <mat-datepicker #dp *ngIf=\"!matDatepicker\" startView=\"multi-year\" (monthSelected)=\"onMonthSelected($event, dp)\"\n          (yearSelected)=\"onYearSelected($event, dp)\" panelClass=\"example-month-picker\">\n        </mat-datepicker>\n      </ng-container>\n\n      <!-- Standard Input -->\n      <ng-template #standardInput>\n        <input matInput [placeholder]=\"placeholder || labelText\" [type]=\"type\" [disabled]=\"isDisabled\"\n          [(ngModel)]=\"value\" (input)=\"onInputChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n      </ng-template>\n    </ng-template>\n  </ng-template>\n\n  <!-- Right icon - only show when not date picker, not color picker, and not searchable dropdown -->\n  <mat-icon *ngIf=\"!isDatePicker && !isColorPicker && !isSearchableDropdown && rightIcon?.trim() as rightIconText\"\n    [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\" matSuffix class=\"right-icon\">{{ rightIconText\n    }}</mat-icon>\n\n  <mat-error *ngIf=\"false && helperText\">{{ helperText }}</mat-error>\n  <mat-hint *ngIf=\"helperText\">{{ helperText }}</mat-hint>\n</mat-form-field>", styles: ["@import\"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\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap\";@import\"https://cdn.jsdelivr.net/npm/@angular/material@19.2.3/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.al-input-field{width:100%}::ng-deep .al-input-field .mat-mdc-form-field-flex{display:flex!important;align-items:center!important;flex-direction:row!important}::ng-deep .al-input-field .mat-mdc-form-field-infix{display:flex!important;align-items:center!important;flex:1!important}::ng-deep .al-input-field input[matInput]{flex:1!important;text-align:left!important}::ng-deep .al-input-field .mat-mdc-form-field-suffix{display:flex!important;align-items:center!important;margin-left:auto!important;margin-right:12px!important}::ng-deep .al-input-field .mat-mdc-form-field-flex,::ng-deep .al-input-field .mat-mdc-text-field-wrapper,::ng-deep .al-input-field .mat-mdc-form-field-infix{background-color:#f7f9fe!important}::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper{background-color:transparent!important;display:none!important}.mdc-notched-outline.mdc-notched-outline--no-label{background:#fff;border-radius:4px!important}::ng-deep .al-input-field.has-helper-text .mat-mdc-form-field-subscript-wrapper,::ng-deep .al-input-field.has-error .mat-mdc-form-field-subscript-wrapper{display:block!important}::ng-deep .al-input-field .mat-mdc-form-field-focus-overlay{background-color:#f7f9fe!important}::ng-deep .al-input-category-primary,::ng-deep .al-input-category-success,::ng-deep .al-input-category-error,::ng-deep .al-input-category-disabled{--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}::ng-deep .al-input-category-simple{--mdc-outlined-text-field-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-focus-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-label-text-color: $color-blue !important;--mdc-outlined-text-field-focus-label-text-color: $color-blue !important}::ng-deep .al-input-category-success{--mdc-outlined-text-field-outline-color: #00AD83 !important;--mdc-outlined-text-field-focus-outline-color: #00AD83 !important;--mdc-outlined-text-field-hover-outline-color: #00AD83 !important;--mdc-outlined-text-field-label-text-color: #00AD83 !important;--mdc-outlined-text-field-focus-label-text-color: #00AD83 !important}::ng-deep .al-input-category-success input::placeholder{color:#00ad83!important}::ng-deep .al-input-category-error{--mdc-outlined-text-field-outline-color: #E854A4 !important;--mdc-outlined-text-field-focus-outline-color: #E854A4 !important;--mdc-outlined-text-field-hover-outline-color: #E854A4 !important;--mdc-outlined-text-field-label-text-color: $color-error-500 !important;--mdc-outlined-text-field-focus-label-text-color: $color-error-500 !important}::ng-deep .al-input-category-error input::placeholder{color:#e854a4!important}::ng-deep .al-input-category-disabled{--mdc-outlined-text-field-outline-color: $color-blue !important;--mdc-outlined-text-field-focus-outline-color: $color-blue !important;--mdc-outlined-text-field-hover-outline-color: $color-blue !important;--mdc-outlined-text-field-label-text-color: $color-blue !important;--mdc-outlined-text-field-focus-label-text-color: $color-blue !important}::ng-deep .al-input-category-primary{--mdc-outlined-text-field-focus-outline-width: 2px !important;--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-label-text-color: $color-blue !important;--mdc-outlined-text-field-focus-label-text-color: $color-blue !important}::ng-deep .al-input-category-primary .mdc-notched-outline{box-shadow:none!important}::ng-deep .al-input-category-plain{--mdc-outlined-text-field-outline-color: transparent !important;--mdc-outlined-text-field-focus-outline-color: transparent !important;--mdc-outlined-text-field-hover-outline-color: transparent !important;--mdc-outlined-text-field-outline-width: 0 !important;--mdc-outlined-text-field-focus-outline-width: 0 !important;--mdc-outlined-text-field-hover-outline-width: 0 !important}::ng-deep .al-input-category-plain .mat-mdc-form-field-outline,::ng-deep .al-input-category-plain .mat-mdc-form-field-outline-thick,::ng-deep .al-input-category-plain .mat-mdc-form-field-label,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-line-ripple{display:none!important}::ng-deep .al-input-category-plain .material-symbols-outlined,::ng-deep .al-input-category-plain mat-icon{color:#4b4f62!important}::ng-deep .al-input-field{border-width:1px!important}::ng-deep .al-input-field.mat-focused .mdc-notched-outline__leading,::ng-deep .al-input-field.mat-focused .mdc-notched-outline__notch,::ng-deep .al-input-field.mat-focused .mdc-notched-outline__trailing{border-width:2px!important}::ng-deep .al-input-size-xs .mat-mdc-form-field-infix,::ng-deep .al-input-size-small .mat-mdc-form-field-infix,::ng-deep .al-input-size-header .mat-mdc-form-field-infix{padding:0!important;display:flex;align-items:center}::ng-deep .al-input-size-xs .mat-mdc-form-field-infix{min-height:32px!important}::ng-deep .al-input-size-small .mat-mdc-form-field-infix{min-height:36px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-infix{padding:8px 0!important;min-height:24px!important}::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper,::ng-deep .al-input-field.al-input-size-large .mat-mdc-form-field-flex{min-height:48px!important;max-height:48px!important;height:48px!important;box-sizing:border-box!important}::ng-deep .al-input-field.al-input-size-large .mat-mdc-form-field-infix,::ng-deep .al-input-size-large .mat-mdc-form-field-infix{padding:12px 0!important;min-height:48px!important;max-height:48px!important;height:48px!important;box-sizing:border-box!important}::ng-deep .al-input-size-header .mat-mdc-form-field-infix{min-height:28px!important}::ng-deep .al-input-size-xs .mdc-notched-outline,::ng-deep .al-input-size-small .mdc-notched-outline,::ng-deep .al-input-size-base .mdc-notched-outline,::ng-deep .al-input-size-header .mdc-notched-outline{border-top-left-radius:4px!important;border-bottom-left-radius:4px!important}::ng-deep .al-input-size-small .mdc-notched-outline__trailing,::ng-deep .al-input-size-base .mdc-notched-outline__trailing,::ng-deep .al-input-size-xs .mdc-notched-outline__trailing,::ng-deep .al-input-size-header .mdc-notched-outline__trailing{border-top-right-radius:4px!important;border-bottom-right-radius:4px!important}::ng-deep .al-input-size-large .mdc-notched-outline__leading{border-top-left-radius:4px!important;border-bottom-left-radius:4px!important}::ng-deep .al-input-size-large .mdc-notched-outline__trailing{border-top-right-radius:4px!important;border-bottom-right-radius:4px!important}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline--upgraded,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline--upgraded{min-height:48px!important;max-height:48px!important;height:48px!important;box-sizing:border-box!important}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-field.al-input-size-large .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{min-height:48px!important;max-height:48px!important;height:48px!important;box-sizing:border-box!important}::ng-deep .al-input-no-border{--mdc-outlined-text-field-outline-color: transparent !important;--mdc-outlined-text-field-focus-outline-color: transparent !important;--mdc-outlined-text-field-hover-outline-color: transparent !important;--mdc-outlined-text-field-outline-width: 0 !important;--mdc-outlined-text-field-focus-outline-width: 0 !important;--mdc-outlined-text-field-hover-outline-width: 0 !important}::ng-deep .al-input-no-border .mat-mdc-form-field-outline,::ng-deep .al-input-no-border .mat-mdc-form-field-outline-thick,::ng-deep .al-input-no-border .mat-mdc-form-field-label,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-line-ripple{display:none!important}::ng-deep .al-input-field input,::ng-deep .al-input-field .mat-mdc-select-value{color:#4b4f62!important}::ng-deep .al-input-size-xs input,::ng-deep .al-input-size-xs .mat-mdc-select-value,::ng-deep .al-input-size-small input,::ng-deep .al-input-size-small .mat-mdc-select-value,::ng-deep .al-input-size-header input,::ng-deep .al-input-size-header .mat-mdc-select-value{font-size:12px!important}::ng-deep .al-input-size-base input,::ng-deep .al-input-size-base .mat-mdc-select-value{font-size:14px!important}::ng-deep .al-input-size-large input,::ng-deep .al-input-size-large .mat-mdc-select-value{font-size:16px!important}::ng-deep .al-input-field input::placeholder{font-size:12px!important}::ng-deep .al-input-field:hover input::placeholder,::ng-deep .al-input-field:focus input::placeholder,::ng-deep .al-input-field:active input::placeholder,::ng-deep .al-input-field input:hover::placeholder,::ng-deep .al-input-field input:focus::placeholder,::ng-deep .al-input-field input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-category-primary:hover input::placeholder,::ng-deep .al-input-category-primary:focus input::placeholder,::ng-deep .al-input-category-primary:active input::placeholder,::ng-deep .al-input-category-primary input:hover::placeholder,::ng-deep .al-input-category-primary input:focus::placeholder,::ng-deep .al-input-category-primary input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-category-simple:hover input::placeholder,::ng-deep .al-input-category-simple:focus input::placeholder,::ng-deep .al-input-category-simple:active input::placeholder,::ng-deep .al-input-category-simple input:hover::placeholder,::ng-deep .al-input-category-simple input:focus::placeholder,::ng-deep .al-input-category-simple input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-size-xs .mat-mdc-form-field-label,::ng-deep .al-input-size-xs .mat-mdc-floating-label,::ng-deep .al-input-size-small .mat-mdc-form-field-label,::ng-deep .al-input-size-small .mat-mdc-floating-label,::ng-deep .al-input-size-header .mat-mdc-form-field-label,::ng-deep .al-input-size-header .mat-mdc-floating-label{font-size:12px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-label,::ng-deep .al-input-size-base .mat-mdc-floating-label{font-size:14px!important}::ng-deep .al-input-size-large .mat-mdc-form-field-label,::ng-deep .al-input-size-large .mat-mdc-floating-label{font-size:16px!important}::ng-deep .al-input-category-simple input,::ng-deep .al-input-category-simple .mat-mdc-select-value,::ng-deep .al-input-category-primary input,::ng-deep .al-input-category-primary .mat-mdc-select-value{font-weight:400!important;letter-spacing:.5px!important}::ng-deep .al-input-field .material-symbols-outlined,::ng-deep .al-input-field mat-icon{height:20px!important;width:20px!important;font-size:20px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .al-input-size-small .material-symbols-outlined,::ng-deep .al-input-size-xs .material-symbols-outlined,::ng-deep .al-input-size-header .material-symbols-outlined,::ng-deep .al-input-size-small mat-icon,::ng-deep .al-input-size-xs mat-icon,::ng-deep .al-input-size-header mat-icon{height:16px!important;width:16px!important;font-size:16px!important}::ng-deep .al-input-size-large .material-symbols-outlined,::ng-deep .al-input-size-large mat-icon{height:24px!important;width:24px!important;font-size:24px!important}::ng-deep .al-input-category-simple .material-symbols-outlined,::ng-deep .al-input-category-primary .material-symbols-outlined,::ng-deep .al-input-category-simple mat-icon,::ng-deep .al-input-category-primary mat-icon{color:#4b4f62!important}::ng-deep .al-input-category-success .material-symbols-outlined,::ng-deep .al-input-category-success mat-icon{color:#00ad83!important}::ng-deep .al-input-category-error .material-symbols-outlined,::ng-deep .al-input-category-error mat-icon{color:#e854a4!important}::ng-deep .al-input-field .material-symbols-outlined[matPrefix],::ng-deep .al-input-field mat-icon[matPrefix]{padding-left:12px!important;padding-right:8px!important}::ng-deep .al-input-field .material-symbols-outlined[matSuffix],::ng-deep .al-input-field mat-icon[matSuffix]{padding-right:12px!important;padding-left:8px}.mat-mdc-form-field-icon-suffix{padding:0!important}::ng-deep .al-input-field.has-left-icon .mat-mdc-form-field-label{margin-left:8px!important}::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-form-field-label,::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-floating-label,::ng-deep .al-input-field:not(.has-left-icon) .mdc-floating-label{margin-left:0!important}::ng-deep .mat-mdc-form-field-icon-prefix{padding:0!important}.material-symbols-outlined[matSuffix],mat-icon[matSuffix]{display:flex;align-items:center;justify-content:center}::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:var(--al-floating-label-top-xs, 10px)!important}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:var(--al-floating-label-top-small, 11px)!important}::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:var(--al-floating-label-top-base, 15px)!important}::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:var(--al-floating-label-top-header, 8px)!important}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:var(--al-floating-label-top-header, 20px)!important}::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY(-20px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY(-22px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-base .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(-26px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-header .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(-18px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY(-30px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-field.has-error .mat-mdc-form-field-outline{border-color:#e854a4!important}::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,::ng-deep .al-input-category-disabled .mat-mdc-form-field-label,::ng-deep .al-input-category-disabled .mat-mdc-select-arrow,::ng-deep .al-input-category-disabled .material-symbols-outlined,::ng-deep .al-input-category-disabled mat-icon,::ng-deep .al-input-category-disabled input,::ng-deep .al-input-category-disabled .mat-mdc-select-value{color:#9ca3af!important;opacity:.6!important}::ng-deep .al-input-field .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-floating-label,::ng-deep .al-input-field .mdc-floating-label,::ng-deep .al-input-field .mdc-text-field__label,::ng-deep .al-input-field .mdc-text-field__label--float-above{transition:none!important}::ng-deep .al-input-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field:hover .mdc-floating-label,::ng-deep .al-input-field:hover .mdc-text-field__label,::ng-deep .al-input-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-floating-label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-success .mat-mdc-form-field-hint{color:#00ad83!important}::ng-deep .al-input-category-error .mat-mdc-form-field-hint{color:#e854a4!important}::ng-deep .al-input-category-simple .mat-mdc-form-field-hint,::ng-deep .al-input-category-primary .mat-mdc-form-field-hint,::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,::ng-deep .al-input-category-plain .mat-mdc-form-field-hint{color:#4b4f62!important}::ng-deep .al-input-category-simple:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-simple:hover .mat-mdc-floating-label,::ng-deep .al-input-category-simple:hover .mdc-floating-label,::ng-deep .al-input-category-simple:hover .mdc-text-field__label,::ng-deep .al-input-category-simple:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-primary:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-primary:hover .mat-mdc-floating-label,::ng-deep .al-input-category-primary:hover .mdc-floating-label,::ng-deep .al-input-category-primary:hover .mdc-text-field__label,::ng-deep .al-input-category-primary:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-error:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-error:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-error:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-error:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-error .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above{color:#e854a4!important}::ng-deep .al-input-category-disabled:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-disabled:hover .mat-mdc-floating-label,::ng-deep .al-input-category-disabled:hover .mdc-floating-label,::ng-deep .al-input-category-disabled:hover .mdc-text-field__label,::ng-deep .al-input-category-disabled:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-plain:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-plain:hover .mat-mdc-floating-label,::ng-deep .al-input-category-plain:hover .mdc-floating-label,::ng-deep .al-input-category-plain:hover .mdc-text-field__label,::ng-deep .al-input-category-plain:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-success .mat-mdc-select-arrow{color:#00ad83!important}::ng-deep .al-input-category-error .mat-mdc-select-arrow{color:#e854a4!important}::ng-deep .al-input-field .mat-mdc-form-field-hint-wrapper,::ng-deep .al-input-field .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .al-input-field.has-helper-text .mat-mdc-form-field-hint,::ng-deep .al-input-field.has-helper-text .mat-mdc-form-field-error{display:block!important;opacity:1!important}::ng-deep .al-input-field:not(.has-helper-text):not(.has-error) .mat-mdc-form-field-hint,::ng-deep .al-input-field:not(.has-helper-text):not(.has-error) .mat-mdc-form-field-error{display:none!important;opacity:0!important}::ng-deep .al-input-field .mat-mdc-form-field .mat-mdc-floating-label{transition:color .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)!important;pointer-events:none}::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field.mat-form-field-should-float .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:not(.mat-mdc-form-field-label-always-float) .mat-mdc-floating-label.mdc-floating-label--float-above{transform:var(--mat-mdc-form-field-label-transform)!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-floating-label--float-above{transform:var(--mat-mdc-form-field-label-transform)!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-floating-label:not(.mdc-floating-label--float-above){transform:translateY(0)!important}::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:#5473e8!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline{box-shadow:none!important}::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-notched-outline__trailing{border-color:#c3c5d1!important;border-width:1px!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#c3c5d1!important;border-width:1px!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__leading{border-right:none!important}::ng-deep .al-input-field .mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important;border-right:none!important}::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:#5473e8!important;border-width:2px!important}::ng-deep .al-input-field .mat-mdc-form-field:active .mdc-notched-outline__leading,::ng-deep .al-input-field .mat-mdc-form-field:active .mdc-notched-outline__notch,::ng-deep .al-input-field .mat-mdc-form-field:active .mdc-notched-outline__trailing{border-color:#5473e8!important;border-width:2px!important}::ng-deep .al-input-field .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .al-input-field .mat-datepicker-toggle{display:flex!important;align-items:center!important;justify-content:center!important;margin-left:auto!important;margin-right:6px!important}::ng-deep .al-input-field .mat-datepicker-toggle .mat-mdc-icon-button{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .al-input-field .mat-datepicker-toggle .mat-mdc-icon-button.mat-mdc-button-base{padding:0!important;height:24px!important;width:24px!important}::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle .mat-mdc-icon-button.mat-mdc-button-base{height:36px!important;width:36px!important;padding:4px!important}::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle{height:36px!important;width:36px!important}::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .al-input-field .mat-mdc-icon-button.mat-mdc-button-small{padding:4px!important;height:36px!important;width:36px!important}::ng-deep .al-input-field .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:#5473e8!important}::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper:hover{border-color:transparent!important}::ng-deep .al-input-field.al-input-category-success input::placeholder,::ng-deep .al-input-field.al-input-category-success:hover input::placeholder,::ng-deep .al-input-field.al-input-category-success:focus input::placeholder,::ng-deep .al-input-field.al-input-category-success:active input::placeholder,::ng-deep .al-input-field.al-input-category-success input:hover::placeholder,::ng-deep .al-input-field.al-input-category-success input:focus::placeholder,::ng-deep .al-input-field.al-input-category-success input:active::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error input::placeholder,::ng-deep .al-input-field.al-input-category-error:hover input::placeholder,::ng-deep .al-input-field.al-input-category-error:focus input::placeholder,::ng-deep .al-input-field.al-input-category-error:active input::placeholder,::ng-deep .al-input-field.al-input-category-error input:hover::placeholder,::ng-deep .al-input-field.al-input-category-error input:focus::placeholder,::ng-deep .al-input-field.al-input-category-error input:active::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field input::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover input::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:focus input::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:active input::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field input::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:hover input::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:focus input::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field:active input::placeholder{color:#e854a4!important}::ng-deep .al-input-field input::placeholder{color:#4b4f62!important}::ng-deep .al-input-field.al-input-category-success input::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error input::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input:hover::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input:focus::placeholder,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-form-field-infix input:active::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input:hover::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input:focus::placeholder,::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-form-field-infix input:active::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success input[placeholder]::placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error input[placeholder]::placeholder{color:#e854a4!important}::ng-deep .mat-mdc-form-field.al-input-category-success .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix input::placeholder{color:#00ad83!important}::ng-deep .mat-mdc-form-field.al-input-category-error .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix input::placeholder{color:#e854a4!important}::ng-deep .mat-mdc-form-field.al-input-field.al-input-category-success input::placeholder{color:#00ad83!important}::ng-deep .mat-mdc-form-field.al-input-field.al-input-category-error input::placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success input::placeholder{color:#00ad83!important;-webkit-text-fill-color:#00AD83!important}::ng-deep .al-input-field.al-input-category-success input::-webkit-input-placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-success input::-moz-placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-success input:-ms-input-placeholder{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error input::placeholder{color:#e854a4!important;-webkit-text-fill-color:#E854A4!important}::ng-deep .al-input-field.al-input-category-error input::-webkit-input-placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-error input::-moz-placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-error input:-ms-input-placeholder{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:#e854a4!important}::ng-deep .al-input-field.al-input-category-success .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-error .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label{color:#e854a4!important}.color-picker-container{display:flex;align-items:center;width:100%;position:relative}.color-picker-input{position:absolute;right:12px;width:24px;height:24px;border:none;border-radius:4px;cursor:pointer;opacity:0;z-index:2}.color-picker-container:after{content:\"\";position:absolute;right:0;width:24px;height:24px;border-radius:4px;border:2px solid #C3C5D1;background-color:var(--color-value, #000000);pointer-events:none;z-index:1}.color-picker-container:hover:after{border-color:#5473e8}.color-picker-input:focus+.color-picker-container:after,.color-picker-input:focus-visible+.color-picker-container:after{border-color:#5473e8;box-shadow:0 0 0 1px #5473e8}::ng-deep .al-input-size-xs .color-picker-input,::ng-deep .al-input-size-small .color-picker-input,::ng-deep .al-input-size-header .color-picker-input{width:20px;height:20px;right:0}::ng-deep .al-input-size-xs .color-picker-container:after,::ng-deep .al-input-size-small .color-picker-container:after,::ng-deep .al-input-size-header .color-picker-container:after{width:20px;height:20px;right:0}::ng-deep .al-input-size-large .color-picker-input{width:28px;height:28px;right:0}::ng-deep .al-input-size-large .color-picker-container:after{width:28px;height:28px;right:0}::ng-deep .al-input-category-success .color-picker-container:after{border-color:#00ad83}::ng-deep .al-input-category-success .color-picker-container:hover:after{border-color:#00ad83}::ng-deep .al-input-category-error .color-picker-container:after{border-color:#e854a4}::ng-deep .al-input-category-error .color-picker-container:hover:after{border-color:#e854a4}::ng-deep .al-input-category-disabled .color-picker-container:after{border-color:#9ca3af;opacity:.6}::ng-deep .al-input-category-disabled .color-picker-input{cursor:not-allowed}.color-picker-input:focus{outline:none}::ng-deep .al-input-field .color-picker-container .mat-mdc-form-field-infix{display:flex!important;align-items:center!important;flex:1!important}::ng-deep .al-input-field .color-picker-container{display:flex!important;align-items:center!important;width:100%!important;position:relative!important}.color-picker-icon{color:#4b4f62!important;cursor:pointer!important;transition:color .2s ease!important}.color-picker-container:hover .color-picker-icon{color:#5473e8!important}.color-picker-input:focus+.color-picker-icon{color:#5473e8!important}::ng-deep .al-input-size-xs .color-picker-icon,::ng-deep .al-input-size-small .color-picker-icon,::ng-deep .al-input-size-header .color-picker-icon{font-size:16px!important;width:16px!important;height:16px!important}::ng-deep .al-input-size-base .color-picker-icon{font-size:20px!important;width:22px!important;height:20px!important}::ng-deep .al-input-size-large .color-picker-icon{font-size:24px!important;width:24px!important;height:24px!important}::ng-deep .al-input-category-success .color-picker-icon{color:#00ad83!important}::ng-deep .al-input-category-success .color-picker-container:hover .color-picker-icon{color:#00ad83!important}::ng-deep .al-input-category-error .color-picker-icon{color:#e854a4!important}::ng-deep .al-input-category-error .color-picker-container:hover .color-picker-icon{color:#e854a4!important}::ng-deep .al-input-category-disabled .color-picker-icon{color:#9ca3af!important;opacity:.6!important}::ng-deep .al-input-category-disabled .color-picker-container:hover .color-picker-icon{color:#9ca3af!important}::ng-deep .color-picker-container .color-picker-icon{position:absolute!important;right:4px!important;z-index:1!important;pointer-events:none!important}::ng-deep .al-input-size-xs .color-picker-container .color-picker-icon,::ng-deep .al-input-size-small .color-picker-container .color-picker-icon,::ng-deep .al-input-size-header .color-picker-container .color-picker-icon{right:8px!important}::ng-deep .al-input-size-large .color-picker-container .color-picker-icon{right:6px!important}::ng-deep .color-picker-container .color-picker-input{position:absolute!important;right:4px!important;width:24px!important;height:24px!important;border:none!important;border-radius:4px!important;cursor:pointer!important;opacity:0!important;z-index:2!important}::ng-deep .al-input-size-xs .color-picker-container .color-picker-input,::ng-deep .al-input-size-small .color-picker-container .color-picker-input,::ng-deep .al-input-size-header .color-picker-container .color-picker-input{right:8px!important;width:20px!important;height:20px!important}::ng-deep .al-input-size-large .color-picker-container .color-picker-input{right:6px!important;width:28px!important;height:28px!important}.color-picker-container:after{display:none!important}::ng-deep .mat-mdc-option,::ng-deep .mat-option{font-family:Roboto,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:400!important;line-height:140%!important;letter-spacing:.04px!important;color:var(--Gray-700, #414651)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text,::ng-deep .mat-mdc-option .mat-mdc-option-text,::ng-deep .mat-option .mat-option-text{font-family:Roboto,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:400!important;line-height:140%!important;letter-spacing:.04px!important;color:var(--Gray-700, #414651)!important}::ng-deep .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-option:hover:not(.mat-option-disabled){background-color:#f7f9fe!important}::ng-deep .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-option:focus:not(.mat-option-disabled),::ng-deep .mat-mdc-option.cdk-keyboard-focused:not(.mdc-list-item--disabled),::ng-deep .mat-option.cdk-keyboard-focused:not(.mat-option-disabled){background-color:#e5e9fc!important;outline:none}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled),::ng-deep .mat-option.mat-selected:not(.mat-option-disabled){background-color:#f7f9fe!important;color:#5473e8!important}::ng-deep .mat-mdc-option:focus.mdc-list-item,::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background-color:#f7f9fe!important}::ng-deep .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-option.mdc-list-item--selected .mat-mdc-option-text,::ng-deep .mat-option.mat-selected .mat-option-text{color:#5473e8!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked,::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:#5473e8!important}\n"] }]
         }], propDecorators: { labelText: [{
                 type: Input
             }], label: [{
@@ -1644,6 +1646,118 @@ function getIconCandidateSection(iconKey) {
     return `data:image/svg+xml;charset=utf-8,${encodedSvg}`;
 }
+/**
+ * Reusable expand/collapse animations that match the jQuery animation timing:
+ * - hideAnimation: 600ms, swing easing → height: 0
+ * - showAnimation: 500ms, swing easing → height: auto
+ *
+ * The "swing" easing in jQuery is approximately "ease-in-out" in CSS.
+ */
+// Swing easing is approximately ease-in-out (cubic-bezier(0.42, 0, 0.58, 1))
+const SWING_EASING = 'cubic-bezier(0.42, 0, 0.58, 1)';
+/**
+ * Collapse animation - matches jQuery hideAnimation
+ * Duration: 600ms
+ * Easing: swing (ease-in-out)
+ * Result: height: 0, overflow: hidden
+ */
+const collapseAnimation = animation([
+    style({ height: '*', overflow: 'hidden' }),
+    animate('{{ duration}}ms {{ easing }}', style({ height: 0, overflow: 'hidden' }))
+], {
+    params: { duration: 600, easing: SWING_EASING }
+});
+/**
+ * Expand animation - matches jQuery showAnimation
+ * Duration: 500ms
+ * Easing: swing (ease-in-out)
+ * Result: height: *, overflow: visible
+ */
+const expandAnimation = animation([
+    style({ height: 0, overflow: 'hidden' }),
+    animate('{{ duration}}ms {{ easing }}', style({ height: '*', overflow: 'visible' }))
+], {
+    params: { duration: 500, easing: SWING_EASING }
+});
+/**
+ * Main trigger for expand/collapse animations on accordion bodies.
+ * Uses void state for hidden and default state for visible.
+ */
+const accordionExpandCollapse = trigger('accordionExpandCollapse', [
+    // Hidden state (collapsed)
+    transition(':leave', [
+        style({ height: '*', overflow: 'hidden' }),
+        animate('600ms cubic-bezier(0.42, 0, 0.58, 1)', style({ height: 0, overflow: 'hidden' }))
+    ]),
+    // Visible state (expanded)
+    transition(':enter', [
+        style({ height: 0, overflow: 'hidden' }),
+        animate('500ms cubic-bezier(0.42, 0, 0.58, 1)', style({ height: '*', overflow: 'hidden' }))
+    ])
+]);
+/**
+ * Alternative trigger that works with a boolean input (expanded/collapsed).
+ * Use this when you want to control animation with @Input expanded boolean.
+ *
+ * Usage: [@expandCollapse]="expanded ? 'expanded' : 'collapsed'"
+ */
+const expandCollapse = trigger('expandCollapse', [
+    // Collapsed state
+    state('collapsed', style({
+        height: 0,
+        overflow: 'hidden',
+        opacity: 0
+    })),
+    // Expanded state
+    state('expanded', style({
+        height: '*',
+        overflow: 'visible',
+        opacity: 1
+    })),
+    // Collapse → Expand (showAnimation timing: 500ms)
+    transition('collapsed => expanded', [
+        animate('500ms cubic-bezier(0.42, 0, 0.58, 1)')
+    ]),
+    // Expand → Collapse (hideAnimation timing: 600ms)
+    transition('expanded => collapsed', [
+        animate('600ms cubic-bezier(0.42, 0, 0.58, 1)')
+    ]),
+    // Handle initial state
+    transition(':enter', [
+        style({ height: 0, overflow: 'hidden', opacity: 0 }),
+        animate('500ms cubic-bezier(0.42, 0, 0.58, 1)', style({ height: '*', overflow: 'hidden', opacity: 1 }))
+    ]),
+    transition(':leave', [
+        style({ height: '*', overflow: 'hidden', opacity: 1 }),
+        animate('600ms cubic-bezier(0.42, 0, 0.58, 1)', style({ height: 0, overflow: 'hidden', opacity: 0 }))
+    ])
+]);
+/**
+ * Fade transition for smooth opacity changes during expand/collapse.
+ * Use alongside height animations for a polished effect.
+ */
+const fadeInOut = trigger('fadeInOut', [
+    transition(':enter', [
+        style({ opacity: 0 }),
+        animate('300ms ease-in', style({ opacity: 1 }))
+    ]),
+    transition(':leave', [
+        style({ opacity: 1 }),
+        animate('200ms ease-out', style({ opacity: 0 }))
+    ])
+]);
+/**
+ * Animation metadata export for use in component animations array.
+ * This allows importing and using animations directly.
+ */
+const accordionAnimations = {
+    accordionExpandCollapse,
+    expandCollapse,
+    fadeInOut,
+    collapseAnimation,
+    expandAnimation
+};
 // Embedded SVG icons - using the same SVG provided by user for visibility_off
 // For visibility (open eye), we'll use a similar eye icon
 const VISIBILITY_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="22" height="15" viewBox="0 0 22 15" fill="none">
@@ -1682,6 +1796,15 @@ class NewResumeHeaderComponent {
     get shouldShowPopOut() {
         return this.showPopOutPanel && !this.isPopOutDismissed;
     }
+    /**
+     * Combined state for expand/collapse animation.
+     * Returns true when the accordion body should be expanded and visible.
+     * Returns false when collapsed (accordion) or hidden (eye icon).
+     * This is used by the expandCollapse animation trigger.
+     */
+    get isBodyExpanded() {
+        return this._isAccordionExpanded && !this.isSectionHidden;
+    }
     constructor(sanitizer, cdr, iconRegistry) {
         this.sanitizer = sanitizer;
         this.cdr = cdr;
@@ -1700,6 +1823,12 @@ class NewResumeHeaderComponent {
         this.popOutButtonTooltipPosition = 'above';
         this.showPopOutPanel = false;
         this.popOutMessage = 'Takes a little longer, but deals with tricky resumes much better than fast extraction.';
+        /**
+         * Local tracking of accordion expanded state for animation.
+         * This is the single source of truth for the animation state.
+         * Made public for template access (chevron icon, aria attributes).
+         */
+        this._isAccordionExpanded = true;
         this.titleChange = new EventEmitter();
         this.sectionToggled = new EventEmitter();
         this.headerCheckboxChange = new EventEmitter();
@@ -1744,37 +1873,57 @@ class NewResumeHeaderComponent {
         }
     }
     toggleAccordion(accordionItem) {
-        accordionItem.toggle();
-        this.sectionToggled.emit(accordionItem.expanded);
+        // Update local state first - this triggers the animation
+        this._isAccordionExpanded = !this._isAccordionExpanded;
+        // Sync with cdk-accordion-item
+        if (this._isAccordionExpanded) {
+            accordionItem.open();
+        }
+        else {
+            accordionItem.close();
+        }
+        this.sectionToggled.emit(this._isAccordionExpanded);
+        // Trigger change detection to ensure animation updates
+        this.cdr.detectChanges();
     }
     /**
      * Handles clicks on the eye icon.
      *
      * - Toggles the isHidden flag on the corresponding EyeIconConfig (if canToggle is true)
      * - Keeps hiddenSection.headerSectionHidden in sync for backwards compatibility
+     * - When showing a hidden section, also expands the accordion for smooth animation
      * - Emits the showHideToggleSection event with the *new* isHidden state
      */
     onEyeIconClick(currentHidden, accordionItem, config) {
         const nextHidden = !currentHidden;
         // Update the matching config in the local array so isSectionHidden reflects the new state
+        // Create a new array to ensure Angular's change detection picks up the change
         if (this.configEyeToggle && config) {
             const idx = this.configEyeToggle.indexOf(config);
             if (idx !== -1 && this.configEyeToggle[idx].canToggle) {
-                this.configEyeToggle[idx] = {
-                    ...this.configEyeToggle[idx],
-                    isHidden: nextHidden,
-                };
+                // Create new array and new object to trigger change detection
+                this.configEyeToggle = [
+                    ...this.configEyeToggle.slice(0, idx),
+                    { ...this.configEyeToggle[idx], isHidden: nextHidden },
+                    ...this.configEyeToggle.slice(idx + 1)
+                ];
             }
         }
         // Keep legacy hiddenSection flag in sync
         this.hiddenSection = {
             headerSectionHidden: nextHidden,
         };
+        // Note: We do NOT change the accordion expansion state when toggling visibility.
+        // The accordion remains in its current state - only visibility changes.
+        // This maintains a single source of truth for each state.
         this.showHideToggleSection.emit({
             isHidden: nextHidden,
             accordionItem,
             config,
         });
+        // Mark for check to ensure child components receive the updated state
+        // This is critical for resume-entries to update its is-hidden class
+        this.cdr.markForCheck();
     }
     onHeaderCheckboxChange(checked) {
         this.headerCheckboxChecked = checked;
@@ -2010,6 +2159,10 @@ class NewResumeHeaderComponent {
         return this.sanitizer.bypassSecurityTrustHtml(processedMessage);
     }
     ngAfterViewInit() {
+        // Sync initial accordion state from the ViewChild reference
+        // Note: cdk-accordion-item starts with expanded=true from template
+        // Our local state should match this initial value
+        this._isAccordionExpanded = true;
         // Ensure icons are registered after view init
         this.registerIcons();
         // Force change detection to ensure icon renders
@@ -2055,7 +2208,7 @@ class NewResumeHeaderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderComponent, deps: [{ token: i2.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: i1.MatIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewResumeHeaderComponent, isStandalone: true, selector: "al-newresumeheader", inputs: { title: "title", showHeaderCheckbox: "showHeaderCheckbox", headerCheckboxChecked: "headerCheckboxChecked", configEyeToggle: "configEyeToggle", hiddenSection: "hiddenSection", buttonConfig: "buttonConfig", isLargeScreen: "isLargeScreen", popOutButtonLabel: "popOutButtonLabel", popOutButtonIcon: "popOutButtonIcon", popOutButtonTooltip: "popOutButtonTooltip", popOutButtonTooltipPosition: "popOutButtonTooltipPosition", showPopOutPanel: "showPopOutPanel", popOutMessage: "popOutMessage", dataTestId: "dataTestId" }, outputs: { titleChange: "titleChange", sectionToggled: "sectionToggled", headerCheckboxChange: "headerCheckboxChange", showHideToggleSection: "showHideToggleSection", buttonClicked: "buttonClicked", popOutButtonClick: "popOutButtonClick" }, viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }, { propertyName: "accordionHeader", first: true, predicate: ["accordionHeader"], descendants: true, read: ElementRef }, { propertyName: "generalContainer", first: true, predicate: ["generalContainer"], descendants: true, read: ElementRef }, { propertyName: "popOutPanel", first: true, predicate: ["popOutPanel"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<al-general-container #generalContainer [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\"\n  [padding]=\"'0'\" [width]=\"'100%'\"><cdk-accordion class=\"example-accordion\"><cdk-accordion-item\n      #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n      <div class=\"example-accordion-item-header\" #accordionHeader\n        [ngClass]=\"{'header-hidden': isSectionHidden, 'header-with-bottom-margin': !showPopOutPanel}\">\n        <!-- Normal header layout (shows when section is NOT hidden) --><ng-container\n          *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\"><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\"\n            [padding]=\"'8px 12px'\">\n            <div left>\n              <button\n                (click)=\"toggleAccordion(accordionItem)\"\n                tabindex=\"0\"\n                class=\"toggle-button align-center\"\n                [attr.aria-expanded]=\"accordionItem.expanded\"\n                [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\"\n                matTooltipPosition=\"above\"\n              >\n                <!-- When section is OPEN (expanded === true), show an UP chevron.\n                     When section is CLOSED, show a DOWN chevron. -->\n                <span\n                  class=\"material-icons-outlined\"\n                  *ngIf=\"accordionItem.expanded\"\n                >\n                  expand_less\n                </span>\n                <span\n                  class=\"material-icons-outlined\"\n                  *ngIf=\"!accordionItem.expanded\"\n                >\n                  expand_more\n                </span>\n              </button>\n              <ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n                [rightWidth]=\"'32px'\" [ngClass]=\"{'input-focused': isInputFocused}\">\n                <div left>\n                  <div class=\"edit-input-group\" [ngClass]=\"{'input-focused': isInputFocused}\">\n                    <div class=\"content_width\"><span *ngIf=\"!isTitleEditing\" class=\"title-text\"\n                        (click)=\"onTitleClick()\">\n                        {{ title || 'Click to edit' }}\n                      </span><input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n                        (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n                        class=\"title-input onfocus-input-text\" /><ng-content select=\"[header-center-left]\"></ng-content>\n                    </div><mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\"\n                      matTooltipPosition=\"above\" (click)=\"onTitleClick()\"></mat-icon>\n                  </div>\n                </div>\n                <div center><ng-content select=\"[header-center-center]\"></ng-content>\n                  <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) --><ng-container\n                    *ngIf=\"isLargeScreen\"><ng-container\n                      *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\"></ng-container></ng-container>\n                  <!-- Menu trigger and slide-out panel for small screens only -->\n                  <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n                    <div class=\"menu-trigger\" (click)=\"toggleMenu()\"><al-button buttonType=\"icon-label\" iconOnly\n                        size=\"header\" category=\"grey\" leftIcon=\"more_vert\" aria-label=\"More options\"\n                        [dataTestId]=\"'resume-header-more-menu'\"></al-button></div>\n                    <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n                      <div class=\"fit-panel\"><ng-container\n                          *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\"></ng-container>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div right><ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, always visible --><ng-container\n                    *ngIf=\"configEyeToggle && configEyeToggle.length > 0\"><ng-container\n                      *ngFor=\"let eyeConfig of configEyeToggle\"><ng-container *ngIf=\"eyeConfig\"><ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container></ng-container></ng-container></ng-container>\n                </div>\n              </al-responsive-columns></div>\n            <div right><al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n                (change)=\"onHeaderCheckboxChange($event)\"></al-checkbox><ng-content\n                select=\"[header-right]\"></ng-content></div>\n          </al-responsive-columns></ng-container>\n        <!-- Hidden header layout (shows when section IS hidden) --><ng-template\n          #hiddenHeaderLayout><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n            <div left>\n              <!-- Toggle button hidden when section is hidden --><ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n                [rightWidth]=\"'32px'\">\n                <div left>\n                  <div class=\"edit-input-group hide-header-title\">\n                    <div class=\"content_width\"><span class=\"title-text header-text-turncate\">\n                        {{ title }}\n                      </span></div>\n                  </div>\n                </div>\n                <div center>\n                  <div class=\"hidden-write\">Section hidden</div>\n                </div>\n                <div right><ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, always visible --><ng-container\n                    *ngIf=\"configEyeToggle && configEyeToggle.length > 0\"><ng-container\n                      *ngFor=\"let eyeConfig of configEyeToggle\"><ng-container *ngIf=\"eyeConfig\"><ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container></ng-container></ng-container></ng-container>\n                </div>\n              </al-responsive-columns></div>\n            <div right>\n              <!-- Checkbox hidden when section is hidden --><ng-content select=\"[header-right]\"></ng-content>\n            </div>\n          </al-responsive-columns></ng-template>\n      </div>\n      <!-- Accordion body (only shows when expanded AND not hidden) -->\n      <div class=\"example-accordion-item-body\" *ngIf=\"accordionItem.expanded && !isSectionHidden\">\n        <!-- Pop-out Panel -->\n        <div *ngIf=\"shouldShowPopOut\" #popOutPanel class=\"pop-out-panel\" [ngClass]=\"{'pop-out-narrow': isPopOutNarrow}\">\n          <div class=\"pop-out-content\">\n            <al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\"\n              [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\"\n              (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'pop-out-run-deep-extraction'\"\n              [title]=\"popOutButtonLabel\"></al-button>\n            <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n            <button type=\"button\" class=\"pop-out-close\"\n              (click)=\"dismissPopOut()\" aria-label=\"Close pop-out panel\"><span\n                class=\"material-icons-outlined\">close</span></button>\n          </div>\n        </div>\n        <!-- Single body content slot - child component will handle 3-column layout internally -->\n        <ng-content></ng-content>\n      </div>\n    </cdk-accordion-item></cdk-accordion></al-general-container><ng-template #headerButtonsTemplate\n  let-buttons=\"buttons\" let-handleClick=\"handleClick\"><ng-container *ngFor=\"let btn of buttonConfig\"><al-button\n      *ngIf=\"!btn.displayCondition || btn.displayCondition()\" [color]=\"btn.color\" [outline]=\"btn.outline\"\n      [size]=\"btn.size\" [iconOutlined]=\"btn.iconOutlined\" [labelText]=\"btn.labelText\"\n      [leftIcon]=\"getButtonIcons(btn).leftIcon\" [rightIcon]=\"getButtonIcons(btn).rightIcon\"\n      [dataTestId]=\"btn.dataTestId\" [hasDropDown]=\"btn.hasDropDown\" [dropdownItems]=\"btn.dropdownItems\"\n      [buttonType]=\"'icon-label'\" [iconOnly]=\"!btn.labelText\" [tooltip]=\"btn.tooltip\"\n      [tooltipPosition]=\"btn.tooltipPosition || 'above'\" (onClick)=\"onButtonClick(btn, $event)\"\n      (optionSelect)=\"onDropdownSelect(btn, $event)\"></al-button></ng-container></ng-template><ng-template\n  #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\" let-configEyeToggle=\"configEyeToggle\">\n  <div class=\"mat-checkbox-margin align-center\"\n    [attr.data-test-id]=\"isHidden ? 'section-show-eye-div' : 'section-hide-eye-div'\"\n    style=\"display: flex; align-items: center; justify-content: center;\"><mat-icon\n      class=\"delete-multiple mat-fab.mat-accent eye-icon\" [svgIcon]=\"isHidden ? 'visibility' : 'visibility_off'\"\n      [matTooltip]=\"configEyeToggle?.tooltips?.[isHidden ? 'collapse' : 'expand'] || (isHidden ? 'Show Section' : 'Hide Section')\"\n      [matTooltipPosition]=\"configEyeToggle?.tooltips?.position || 'above'\"\n      [attr.aria-label]=\"configEyeToggle?.ariaLabels?.[isHidden ? 'collapsed' : 'expanded'] || (isHidden ? 'Show section' : 'Hide section')\"\n      (click)=\"onEyeIconClick(isHidden, accordionItem, configEyeToggle)\"\n      [attr.data-test-id]=\"isHidden ? 'section-show-eye-icon' : 'section-hide-eye-icon'\"\n      style=\"cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px; color: #717793;\"\n      [style.opacity]=\"1\" [style.visibility]=\"'visible'\"></mat-icon></div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0\";@import\"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\";:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.example-accordion-item-header{display:flex;align-items:center;cursor:pointer;width:100%}.example-accordion-item-header al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns ::ng-deep .container{align-items:center;display:grid}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .container{align-items:center;display:grid;min-width:0;transition:grid-template-columns .2s ease}.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 .2s ease,width .2s ease}.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 .2s ease}.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}.toggle-button .material-icons-outlined{color:#717793}.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}.example-accordion-item-header.header-with-bottom-margin{margin-bottom:16px}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;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 .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{display:flex;align-items:center;gap:4px;min-width:0;border-radius:4px;transition:background-color .2s ease,width .2s ease;padding:0 8px;flex-shrink:1;width:100%;max-width:100%;overflow:hidden;flex:1 1 0}.edit-input-group.input-focused{width:100%;flex:1 1 100%;min-width:0}.edit-input-group:hover{background-color:#d1d3db}.edit-input-group:has(input:focus):hover,.edit-input-group:focus-within:hover{background-color:transparent}.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{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:#fff;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .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}.example-accordion-item-body .pop-out-panel{background-color:#717793;border-radius:12px;width:calc(100% - 30px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}.pop-out-content al-button{flex-shrink:0}.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:.06px;margin:0}.pop-out-panel.pop-out-narrow .pop-out-content{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:8px}.pop-out-panel.pop-out-narrow .pop-out-content al-button{grid-column:1;grid-row:1;justify-self:start}.pop-out-panel.pop-out-narrow .pop-out-content .pop-out-close{grid-column:1;grid-row:1;justify-self:end}.pop-out-panel.pop-out-narrow .pop-out-message{grid-column:1;grid-row:2;flex:none;width:100%}.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:.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 .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 .2s ease,width .2s ease}.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 4px 0 0;flex-shrink:1;min-width:100px;max-width:100%;box-sizing:border-box;width:100%;transition:width .2s ease}.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}.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 .2s ease,visibility .2s ease;cursor:pointer;border-radius:4px;flex-shrink:0;min-width:16px;width:16px;height:16px;font-size:16px;display:inline-flex;align-items:center;justify-content:center;color:#717793}.edit-input-group:hover mat-icon.edit-icon{opacity:1;visibility:visible}.hide-header-title mat-icon.edit-icon{display:none}.hide-header-title .edit-input-group{cursor:default;opacity:.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}.example-accordion-item-header.header-hidden{opacity:.7}.mat-checkbox-margin{margin-left:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i5.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { kind: "directive", type: i5.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: GeneralContainerComponent, selector: "al-general-container", inputs: ["backgroundColor", "padding", "width", "height", "overflowX", "overflowY", "borderPosition", "borderColor", "borderRadius", "boxShadow", "customBoxShadow"] }, { kind: "component", type: ResponsiveColumnsComponent, selector: "al-responsive-columns", inputs: ["dataTestId", "gap", "padding", "leftWidth", "rightWidth", "stackAt"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: CheckboxComponent, selector: "al-checkbox", inputs: ["checked", "disabled", "labelPosition", "name", "required", "value", "color", "labelText", "helperText", "showLabels", "showHelperIcon", "helperIconTooltip", "dataTestId", "tooltip", "tooltipPosition"], outputs: ["change", "indeterminateChange", "focus", "blur", "helperIconClick"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewResumeHeaderComponent, isStandalone: true, selector: "al-newresumeheader", inputs: { title: "title", showHeaderCheckbox: "showHeaderCheckbox", headerCheckboxChecked: "headerCheckboxChecked", configEyeToggle: "configEyeToggle", hiddenSection: "hiddenSection", buttonConfig: "buttonConfig", isLargeScreen: "isLargeScreen", popOutButtonLabel: "popOutButtonLabel", popOutButtonIcon: "popOutButtonIcon", popOutButtonTooltip: "popOutButtonTooltip", popOutButtonTooltipPosition: "popOutButtonTooltipPosition", showPopOutPanel: "showPopOutPanel", popOutMessage: "popOutMessage", dataTestId: "dataTestId" }, outputs: { titleChange: "titleChange", sectionToggled: "sectionToggled", headerCheckboxChange: "headerCheckboxChange", showHideToggleSection: "showHideToggleSection", buttonClicked: "buttonClicked", popOutButtonClick: "popOutButtonClick" }, viewQueries: [{ propertyName: "accordionItem", first: true, predicate: ["accordionItem"], descendants: true, static: true }, { propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }, { propertyName: "accordionHeader", first: true, predicate: ["accordionHeader"], descendants: true, read: ElementRef }, { propertyName: "generalContainer", first: true, predicate: ["generalContainer"], descendants: true, read: ElementRef }, { propertyName: "popOutPanel", first: true, predicate: ["popOutPanel"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<al-general-container #generalContainer [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\"\n  [padding]=\"'0'\" [width]=\"'100%'\"><cdk-accordion class=\"example-accordion\"><cdk-accordion-item\n      #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n      <div class=\"example-accordion-item-header\" #accordionHeader\n        [ngClass]=\"{'header-hidden': isSectionHidden, 'header-with-bottom-margin': !showPopOutPanel}\">\n        <!-- Normal header layout (shows when section is NOT hidden) --><ng-container\n          *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\"><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\"\n            [padding]=\"'8px 12px'\">\n            <div left>\n              <button\n                (click)=\"toggleAccordion(accordionItem)\"\n                tabindex=\"0\"\n                class=\"toggle-button align-center\"\n                [attr.aria-expanded]=\"_isAccordionExpanded\"\n                [matTooltip]=\"_isAccordionExpanded ? 'Collapse' : 'Expand'\"\n                matTooltipPosition=\"above\"\n              >\n                <!-- When section is OPEN (expanded === true), show an UP chevron.\n                     When section is CLOSED, show a DOWN chevron. -->\n                <span\n                  class=\"material-icons-outlined\"\n                  *ngIf=\"_isAccordionExpanded\"\n                >\n                  expand_less\n                </span>\n                <span\n                  class=\"material-icons-outlined\"\n                  *ngIf=\"!_isAccordionExpanded\"\n                >\n                  expand_more\n                </span>\n              </button>\n              <ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n                [rightWidth]=\"'32px'\" [ngClass]=\"{'input-focused': isInputFocused}\">\n                <div left>\n                  <div class=\"edit-input-group\" [ngClass]=\"{'input-focused': isInputFocused}\">\n                    <div class=\"content_width\"><span *ngIf=\"!isTitleEditing\" class=\"title-text\"\n                        (click)=\"onTitleClick()\">\n                        {{ title || 'Click to edit' }}\n                      </span><input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n                        (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n                        class=\"title-input onfocus-input-text\" /><ng-content select=\"[header-center-left]\"></ng-content>\n                    </div><mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\"\n                      matTooltipPosition=\"above\" (click)=\"onTitleClick()\"></mat-icon>\n                  </div>\n                </div>\n                <div center><ng-content select=\"[header-center-center]\"></ng-content>\n                  <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) --><ng-container\n                    *ngIf=\"isLargeScreen\"><ng-container\n                      *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\"></ng-container></ng-container>\n                  <!-- Menu trigger and slide-out panel for small screens only -->\n                  <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n                    <div class=\"menu-trigger\" (click)=\"toggleMenu()\"><al-button buttonType=\"icon-label\" iconOnly\n                        size=\"header\" category=\"grey\" leftIcon=\"more_vert\" aria-label=\"More options\"\n                        [dataTestId]=\"'resume-header-more-menu'\"></al-button></div>\n                    <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n                      <div class=\"fit-panel\"><ng-container\n                          *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\"></ng-container>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div right><ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, always visible --><ng-container\n                    *ngIf=\"configEyeToggle && configEyeToggle.length > 0\"><ng-container\n                      *ngFor=\"let eyeConfig of configEyeToggle\"><ng-container *ngIf=\"eyeConfig\"><ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container></ng-container></ng-container></ng-container>\n                </div>\n              </al-responsive-columns></div>\n            <div right><al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n                (change)=\"onHeaderCheckboxChange($event)\"></al-checkbox><ng-content\n                select=\"[header-right]\"></ng-content></div>\n          </al-responsive-columns></ng-container>\n        <!-- Hidden header layout (shows when section IS hidden) --><ng-template\n          #hiddenHeaderLayout><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n            <div left>\n              <!-- Toggle button hidden when section is hidden --><ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n                [rightWidth]=\"'32px'\">\n                <div left>\n                  <div class=\"edit-input-group hide-header-title\">\n                    <div class=\"content_width\"><span class=\"title-text header-text-turncate\">\n                        {{ title }}\n                      </span></div>\n                  </div>\n                </div>\n                <div center>\n                  <div class=\"hidden-write\">Section hidden</div>\n                </div>\n                <div right><ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, always visible --><ng-container\n                    *ngIf=\"configEyeToggle && configEyeToggle.length > 0\"><ng-container\n                      *ngFor=\"let eyeConfig of configEyeToggle\"><ng-container *ngIf=\"eyeConfig\"><ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container></ng-container></ng-container></ng-container>\n                </div>\n              </al-responsive-columns></div>\n            <div right>\n              <!-- Checkbox hidden when section is hidden --><ng-content select=\"[header-right]\"></ng-content>\n            </div>\n          </al-responsive-columns></ng-template>\n      </div>\n      <!-- Accordion body with expand/collapse animation -->\n      <div class=\"example-accordion-item-body-wrapper\">\n        <div class=\"example-accordion-item-body\" [@expandCollapse]=\"isBodyExpanded ? 'expanded' : 'collapsed'\" [@.disabled]=\"false\">\n          <!-- Pop-out Panel -->\n          <div *ngIf=\"shouldShowPopOut\" #popOutPanel class=\"pop-out-panel\" [ngClass]=\"{'pop-out-narrow': isPopOutNarrow}\">\n            <div class=\"pop-out-content\">\n              <al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\"\n                [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\"\n                (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'pop-out-run-deep-extraction'\"\n                [title]=\"popOutButtonLabel\"></al-button>\n              <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n              <button type=\"button\" class=\"pop-out-close\"\n                (click)=\"dismissPopOut()\" aria-label=\"Close pop-out panel\"><span\n                  class=\"material-icons-outlined\">close</span></button>\n            </div>\n          </div>\n          <!-- Single body content slot - child component will handle 3-column layout internally -->\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </cdk-accordion-item></cdk-accordion></al-general-container><ng-template #headerButtonsTemplate\n  let-buttons=\"buttons\" let-handleClick=\"handleClick\"><ng-container *ngFor=\"let btn of buttonConfig\"><al-button\n      *ngIf=\"!btn.displayCondition || btn.displayCondition()\" [color]=\"btn.color\" [outline]=\"btn.outline\"\n      [size]=\"btn.size\" [iconOutlined]=\"btn.iconOutlined\" [labelText]=\"btn.labelText\"\n      [leftIcon]=\"getButtonIcons(btn).leftIcon\" [rightIcon]=\"getButtonIcons(btn).rightIcon\"\n      [dataTestId]=\"btn.dataTestId\" [hasDropDown]=\"btn.hasDropDown\" [dropdownItems]=\"btn.dropdownItems\"\n      [buttonType]=\"'icon-label'\" [iconOnly]=\"!btn.labelText\" [tooltip]=\"btn.tooltip\"\n      [tooltipPosition]=\"btn.tooltipPosition || 'above'\" (onClick)=\"onButtonClick(btn, $event)\"\n      (optionSelect)=\"onDropdownSelect(btn, $event)\"></al-button></ng-container></ng-template><ng-template\n  #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\" let-configEyeToggle=\"configEyeToggle\">\n  <div class=\"mat-checkbox-margin align-center\"\n    [attr.data-test-id]=\"isHidden ? 'section-show-eye-div' : 'section-hide-eye-div'\"\n    style=\"display: flex; align-items: center; justify-content: center;\"><mat-icon\n      class=\"delete-multiple mat-fab.mat-accent eye-icon\" [svgIcon]=\"isHidden ? 'visibility' : 'visibility_off'\"\n      [matTooltip]=\"configEyeToggle?.tooltips?.[isHidden ? 'collapse' : 'expand'] || (isHidden ? 'Show Section' : 'Hide Section')\"\n      [matTooltipPosition]=\"configEyeToggle?.tooltips?.position || 'above'\"\n      [attr.aria-label]=\"configEyeToggle?.ariaLabels?.[isHidden ? 'collapsed' : 'expanded'] || (isHidden ? 'Show section' : 'Hide section')\"\n      (click)=\"onEyeIconClick(isHidden, accordionItem, configEyeToggle)\"\n      [attr.data-test-id]=\"isHidden ? 'section-show-eye-icon' : 'section-hide-eye-icon'\"\n      style=\"cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px; color: #717793;\"\n      [style.opacity]=\"1\" [style.visibility]=\"'visible'\"></mat-icon></div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0\";@import\"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\";:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.example-accordion-item-header{display:flex;align-items:center;cursor:pointer;width:100%}.example-accordion-item-header al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns ::ng-deep .container{align-items:center;display:grid}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .container{align-items:center;display:grid;min-width:0;transition:grid-template-columns .2s ease}.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 .2s ease,width .2s ease}.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 .2s ease}.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}.example-accordion-item-body-wrapper{width:100%;overflow:hidden}.toggle-button{border:none;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.toggle-button .material-icons-outlined{color:#717793}.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}.example-accordion-item-header.header-with-bottom-margin{margin-bottom:16px}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;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 .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{display:flex;align-items:center;gap:4px;min-width:0;border-radius:4px;transition:background-color .2s ease,width .2s ease;padding:0 8px;flex-shrink:1;width:100%;max-width:100%;overflow:hidden;flex:1 1 0}.edit-input-group.input-focused{width:100%;flex:1 1 100%;min-width:0}.edit-input-group:hover{background-color:#d1d3db}.edit-input-group:has(input:focus):hover,.edit-input-group:focus-within:hover{background-color:transparent}.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{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:#fff;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .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}.example-accordion-item-body .pop-out-panel{background-color:#717793;border-radius:12px;width:calc(100% - 30px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}.pop-out-content al-button{flex-shrink:0}.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:.06px;margin:0}.pop-out-panel.pop-out-narrow .pop-out-content{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:8px}.pop-out-panel.pop-out-narrow .pop-out-content al-button{grid-column:1;grid-row:1;justify-self:start}.pop-out-panel.pop-out-narrow .pop-out-content .pop-out-close{grid-column:1;grid-row:1;justify-self:end}.pop-out-panel.pop-out-narrow .pop-out-message{grid-column:1;grid-row:2;flex:none;width:100%}.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:.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 .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 .2s ease,width .2s ease}.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 4px 0 0;flex-shrink:1;min-width:100px;max-width:100%;box-sizing:border-box;width:100%;transition:width .2s ease}.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}.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 .2s ease,visibility .2s ease;cursor:pointer;border-radius:4px;flex-shrink:0;min-width:16px;width:16px;height:16px;font-size:16px;display:inline-flex;align-items:center;justify-content:center;color:#717793}.edit-input-group:hover mat-icon.edit-icon{opacity:1;visibility:visible}.hide-header-title mat-icon.edit-icon{display:none}.hide-header-title .edit-input-group{cursor:default;opacity:.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}.example-accordion-item-header.header-hidden{opacity:.7}.mat-checkbox-margin{margin-left:8px}.mat-checkbox-margin{position:relative;display:inline-flex;align-items:center;justify-content:center}.mat-checkbox-margin:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:4px;background-color:transparent;transition:background-color .2s ease;z-index:0;pointer-events:none}.mat-checkbox-margin:hover:before{background-color:#d3d3d3e6!important}.mat-checkbox-margin mat-icon{position:relative;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i5.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { kind: "directive", type: i5.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: GeneralContainerComponent, selector: "al-general-container", inputs: ["backgroundColor", "padding", "width", "height", "overflowX", "overflowY", "borderPosition", "borderColor", "borderRadius", "boxShadow", "customBoxShadow"] }, { kind: "component", type: ResponsiveColumnsComponent, selector: "al-responsive-columns", inputs: ["dataTestId", "gap", "padding", "leftWidth", "rightWidth", "stackAt"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: CheckboxComponent, selector: "al-checkbox", inputs: ["checked", "disabled", "labelPosition", "name", "required", "value", "color", "labelText", "helperText", "showLabels", "showHelperIcon", "helperIconTooltip", "dataTestId", "tooltip", "tooltipPosition"], outputs: ["change", "indeterminateChange", "focus", "blur", "helperIconClick"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }], animations: [expandCollapse] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderComponent, decorators: [{
             type: Component,
@@ -2069,7 +2222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ResponsiveColumnsComponent,
                         CheckboxModule,
                         ButtonComponent
-                    ], template: "<al-general-container #generalContainer [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\"\n  [padding]=\"'0'\" [width]=\"'100%'\"><cdk-accordion class=\"example-accordion\"><cdk-accordion-item\n      #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n      <div class=\"example-accordion-item-header\" #accordionHeader\n        [ngClass]=\"{'header-hidden': isSectionHidden, 'header-with-bottom-margin': !showPopOutPanel}\">\n        <!-- Normal header layout (shows when section is NOT hidden) --><ng-container\n          *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\"><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\"\n            [padding]=\"'8px 12px'\">\n            <div left>\n              <button\n                (click)=\"toggleAccordion(accordionItem)\"\n                tabindex=\"0\"\n                class=\"toggle-button align-center\"\n                [attr.aria-expanded]=\"accordionItem.expanded\"\n                [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\"\n                matTooltipPosition=\"above\"\n              >\n                <!-- When section is OPEN (expanded === true), show an UP chevron.\n                     When section is CLOSED, show a DOWN chevron. -->\n                <span\n                  class=\"material-icons-outlined\"\n                  *ngIf=\"accordionItem.expanded\"\n                >\n                  expand_less\n                </span>\n                <span\n                  class=\"material-icons-outlined\"\n                  *ngIf=\"!accordionItem.expanded\"\n                >\n                  expand_more\n                </span>\n              </button>\n              <ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n                [rightWidth]=\"'32px'\" [ngClass]=\"{'input-focused': isInputFocused}\">\n                <div left>\n                  <div class=\"edit-input-group\" [ngClass]=\"{'input-focused': isInputFocused}\">\n                    <div class=\"content_width\"><span *ngIf=\"!isTitleEditing\" class=\"title-text\"\n                        (click)=\"onTitleClick()\">\n                        {{ title || 'Click to edit' }}\n                      </span><input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n                        (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n                        class=\"title-input onfocus-input-text\" /><ng-content select=\"[header-center-left]\"></ng-content>\n                    </div><mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\"\n                      matTooltipPosition=\"above\" (click)=\"onTitleClick()\"></mat-icon>\n                  </div>\n                </div>\n                <div center><ng-content select=\"[header-center-center]\"></ng-content>\n                  <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) --><ng-container\n                    *ngIf=\"isLargeScreen\"><ng-container\n                      *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\"></ng-container></ng-container>\n                  <!-- Menu trigger and slide-out panel for small screens only -->\n                  <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n                    <div class=\"menu-trigger\" (click)=\"toggleMenu()\"><al-button buttonType=\"icon-label\" iconOnly\n                        size=\"header\" category=\"grey\" leftIcon=\"more_vert\" aria-label=\"More options\"\n                        [dataTestId]=\"'resume-header-more-menu'\"></al-button></div>\n                    <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n                      <div class=\"fit-panel\"><ng-container\n                          *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\"></ng-container>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div right><ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, always visible --><ng-container\n                    *ngIf=\"configEyeToggle && configEyeToggle.length > 0\"><ng-container\n                      *ngFor=\"let eyeConfig of configEyeToggle\"><ng-container *ngIf=\"eyeConfig\"><ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container></ng-container></ng-container></ng-container>\n                </div>\n              </al-responsive-columns></div>\n            <div right><al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n                (change)=\"onHeaderCheckboxChange($event)\"></al-checkbox><ng-content\n                select=\"[header-right]\"></ng-content></div>\n          </al-responsive-columns></ng-container>\n        <!-- Hidden header layout (shows when section IS hidden) --><ng-template\n          #hiddenHeaderLayout><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n            <div left>\n              <!-- Toggle button hidden when section is hidden --><ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n                [rightWidth]=\"'32px'\">\n                <div left>\n                  <div class=\"edit-input-group hide-header-title\">\n                    <div class=\"content_width\"><span class=\"title-text header-text-turncate\">\n                        {{ title }}\n                      </span></div>\n                  </div>\n                </div>\n                <div center>\n                  <div class=\"hidden-write\">Section hidden</div>\n                </div>\n                <div right><ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, always visible --><ng-container\n                    *ngIf=\"configEyeToggle && configEyeToggle.length > 0\"><ng-container\n                      *ngFor=\"let eyeConfig of configEyeToggle\"><ng-container *ngIf=\"eyeConfig\"><ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container></ng-container></ng-container></ng-container>\n                </div>\n              </al-responsive-columns></div>\n            <div right>\n              <!-- Checkbox hidden when section is hidden --><ng-content select=\"[header-right]\"></ng-content>\n            </div>\n          </al-responsive-columns></ng-template>\n      </div>\n      <!-- Accordion body (only shows when expanded AND not hidden) -->\n      <div class=\"example-accordion-item-body\" *ngIf=\"accordionItem.expanded && !isSectionHidden\">\n        <!-- Pop-out Panel -->\n        <div *ngIf=\"shouldShowPopOut\" #popOutPanel class=\"pop-out-panel\" [ngClass]=\"{'pop-out-narrow': isPopOutNarrow}\">\n          <div class=\"pop-out-content\">\n            <al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\"\n              [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\"\n              (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'pop-out-run-deep-extraction'\"\n              [title]=\"popOutButtonLabel\"></al-button>\n            <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n            <button type=\"button\" class=\"pop-out-close\"\n              (click)=\"dismissPopOut()\" aria-label=\"Close pop-out panel\"><span\n                class=\"material-icons-outlined\">close</span></button>\n          </div>\n        </div>\n        <!-- Single body content slot - child component will handle 3-column layout internally -->\n        <ng-content></ng-content>\n      </div>\n    </cdk-accordion-item></cdk-accordion></al-general-container><ng-template #headerButtonsTemplate\n  let-buttons=\"buttons\" let-handleClick=\"handleClick\"><ng-container *ngFor=\"let btn of buttonConfig\"><al-button\n      *ngIf=\"!btn.displayCondition || btn.displayCondition()\" [color]=\"btn.color\" [outline]=\"btn.outline\"\n      [size]=\"btn.size\" [iconOutlined]=\"btn.iconOutlined\" [labelText]=\"btn.labelText\"\n      [leftIcon]=\"getButtonIcons(btn).leftIcon\" [rightIcon]=\"getButtonIcons(btn).rightIcon\"\n      [dataTestId]=\"btn.dataTestId\" [hasDropDown]=\"btn.hasDropDown\" [dropdownItems]=\"btn.dropdownItems\"\n      [buttonType]=\"'icon-label'\" [iconOnly]=\"!btn.labelText\" [tooltip]=\"btn.tooltip\"\n      [tooltipPosition]=\"btn.tooltipPosition || 'above'\" (onClick)=\"onButtonClick(btn, $event)\"\n      (optionSelect)=\"onDropdownSelect(btn, $event)\"></al-button></ng-container></ng-template><ng-template\n  #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\" let-configEyeToggle=\"configEyeToggle\">\n  <div class=\"mat-checkbox-margin align-center\"\n    [attr.data-test-id]=\"isHidden ? 'section-show-eye-div' : 'section-hide-eye-div'\"\n    style=\"display: flex; align-items: center; justify-content: center;\"><mat-icon\n      class=\"delete-multiple mat-fab.mat-accent eye-icon\" [svgIcon]=\"isHidden ? 'visibility' : 'visibility_off'\"\n      [matTooltip]=\"configEyeToggle?.tooltips?.[isHidden ? 'collapse' : 'expand'] || (isHidden ? 'Show Section' : 'Hide Section')\"\n      [matTooltipPosition]=\"configEyeToggle?.tooltips?.position || 'above'\"\n      [attr.aria-label]=\"configEyeToggle?.ariaLabels?.[isHidden ? 'collapsed' : 'expanded'] || (isHidden ? 'Show section' : 'Hide section')\"\n      (click)=\"onEyeIconClick(isHidden, accordionItem, configEyeToggle)\"\n      [attr.data-test-id]=\"isHidden ? 'section-show-eye-icon' : 'section-hide-eye-icon'\"\n      style=\"cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px; color: #717793;\"\n      [style.opacity]=\"1\" [style.visibility]=\"'visible'\"></mat-icon></div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0\";@import\"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\";:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.example-accordion-item-header{display:flex;align-items:center;cursor:pointer;width:100%}.example-accordion-item-header al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns ::ng-deep .container{align-items:center;display:grid}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .container{align-items:center;display:grid;min-width:0;transition:grid-template-columns .2s ease}.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 .2s ease,width .2s ease}.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 .2s ease}.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}.toggle-button .material-icons-outlined{color:#717793}.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}.example-accordion-item-header.header-with-bottom-margin{margin-bottom:16px}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;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 .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{display:flex;align-items:center;gap:4px;min-width:0;border-radius:4px;transition:background-color .2s ease,width .2s ease;padding:0 8px;flex-shrink:1;width:100%;max-width:100%;overflow:hidden;flex:1 1 0}.edit-input-group.input-focused{width:100%;flex:1 1 100%;min-width:0}.edit-input-group:hover{background-color:#d1d3db}.edit-input-group:has(input:focus):hover,.edit-input-group:focus-within:hover{background-color:transparent}.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{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:#fff;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .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}.example-accordion-item-body .pop-out-panel{background-color:#717793;border-radius:12px;width:calc(100% - 30px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}.pop-out-content al-button{flex-shrink:0}.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:.06px;margin:0}.pop-out-panel.pop-out-narrow .pop-out-content{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:8px}.pop-out-panel.pop-out-narrow .pop-out-content al-button{grid-column:1;grid-row:1;justify-self:start}.pop-out-panel.pop-out-narrow .pop-out-content .pop-out-close{grid-column:1;grid-row:1;justify-self:end}.pop-out-panel.pop-out-narrow .pop-out-message{grid-column:1;grid-row:2;flex:none;width:100%}.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:.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 .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 .2s ease,width .2s ease}.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 4px 0 0;flex-shrink:1;min-width:100px;max-width:100%;box-sizing:border-box;width:100%;transition:width .2s ease}.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}.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 .2s ease,visibility .2s ease;cursor:pointer;border-radius:4px;flex-shrink:0;min-width:16px;width:16px;height:16px;font-size:16px;display:inline-flex;align-items:center;justify-content:center;color:#717793}.edit-input-group:hover mat-icon.edit-icon{opacity:1;visibility:visible}.hide-header-title mat-icon.edit-icon{display:none}.hide-header-title .edit-input-group{cursor:default;opacity:.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}.example-accordion-item-header.header-hidden{opacity:.7}.mat-checkbox-margin{margin-left:8px}\n"] }]
+                    ], animations: [expandCollapse], template: "<al-general-container #generalContainer [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\"\n  [padding]=\"'0'\" [width]=\"'100%'\"><cdk-accordion class=\"example-accordion\"><cdk-accordion-item\n      #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n      <div class=\"example-accordion-item-header\" #accordionHeader\n        [ngClass]=\"{'header-hidden': isSectionHidden, 'header-with-bottom-margin': !showPopOutPanel}\">\n        <!-- Normal header layout (shows when section is NOT hidden) --><ng-container\n          *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\"><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\"\n            [padding]=\"'8px 12px'\">\n            <div left>\n              <button\n                (click)=\"toggleAccordion(accordionItem)\"\n                tabindex=\"0\"\n                class=\"toggle-button align-center\"\n                [attr.aria-expanded]=\"_isAccordionExpanded\"\n                [matTooltip]=\"_isAccordionExpanded ? 'Collapse' : 'Expand'\"\n                matTooltipPosition=\"above\"\n              >\n                <!-- When section is OPEN (expanded === true), show an UP chevron.\n                     When section is CLOSED, show a DOWN chevron. -->\n                <span\n                  class=\"material-icons-outlined\"\n                  *ngIf=\"_isAccordionExpanded\"\n                >\n                  expand_less\n                </span>\n                <span\n                  class=\"material-icons-outlined\"\n                  *ngIf=\"!_isAccordionExpanded\"\n                >\n                  expand_more\n                </span>\n              </button>\n              <ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n                [rightWidth]=\"'32px'\" [ngClass]=\"{'input-focused': isInputFocused}\">\n                <div left>\n                  <div class=\"edit-input-group\" [ngClass]=\"{'input-focused': isInputFocused}\">\n                    <div class=\"content_width\"><span *ngIf=\"!isTitleEditing\" class=\"title-text\"\n                        (click)=\"onTitleClick()\">\n                        {{ title || 'Click to edit' }}\n                      </span><input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n                        (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n                        class=\"title-input onfocus-input-text\" /><ng-content select=\"[header-center-left]\"></ng-content>\n                    </div><mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\"\n                      matTooltipPosition=\"above\" (click)=\"onTitleClick()\"></mat-icon>\n                  </div>\n                </div>\n                <div center><ng-content select=\"[header-center-center]\"></ng-content>\n                  <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) --><ng-container\n                    *ngIf=\"isLargeScreen\"><ng-container\n                      *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\"></ng-container></ng-container>\n                  <!-- Menu trigger and slide-out panel for small screens only -->\n                  <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n                    <div class=\"menu-trigger\" (click)=\"toggleMenu()\"><al-button buttonType=\"icon-label\" iconOnly\n                        size=\"header\" category=\"grey\" leftIcon=\"more_vert\" aria-label=\"More options\"\n                        [dataTestId]=\"'resume-header-more-menu'\"></al-button></div>\n                    <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n                      <div class=\"fit-panel\"><ng-container\n                          *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\"></ng-container>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div right><ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, always visible --><ng-container\n                    *ngIf=\"configEyeToggle && configEyeToggle.length > 0\"><ng-container\n                      *ngFor=\"let eyeConfig of configEyeToggle\"><ng-container *ngIf=\"eyeConfig\"><ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container></ng-container></ng-container></ng-container>\n                </div>\n              </al-responsive-columns></div>\n            <div right><al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n                (change)=\"onHeaderCheckboxChange($event)\"></al-checkbox><ng-content\n                select=\"[header-right]\"></ng-content></div>\n          </al-responsive-columns></ng-container>\n        <!-- Hidden header layout (shows when section IS hidden) --><ng-template\n          #hiddenHeaderLayout><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n            <div left>\n              <!-- Toggle button hidden when section is hidden --><ng-content select=\"[header-left]\"></ng-content>\n            </div>\n            <div center><al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n                [rightWidth]=\"'32px'\">\n                <div left>\n                  <div class=\"edit-input-group hide-header-title\">\n                    <div class=\"content_width\"><span class=\"title-text header-text-turncate\">\n                        {{ title }}\n                      </span></div>\n                  </div>\n                </div>\n                <div center>\n                  <div class=\"hidden-write\">Section hidden</div>\n                </div>\n                <div right><ng-content select=\"[header-center-right]\"></ng-content>\n                  <!-- Eye icon - uses actual isHidden value from config, always visible --><ng-container\n                    *ngIf=\"configEyeToggle && configEyeToggle.length > 0\"><ng-container\n                      *ngFor=\"let eyeConfig of configEyeToggle\"><ng-container *ngIf=\"eyeConfig\"><ng-container\n                          *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container></ng-container></ng-container></ng-container>\n                </div>\n              </al-responsive-columns></div>\n            <div right>\n              <!-- Checkbox hidden when section is hidden --><ng-content select=\"[header-right]\"></ng-content>\n            </div>\n          </al-responsive-columns></ng-template>\n      </div>\n      <!-- Accordion body with expand/collapse animation -->\n      <div class=\"example-accordion-item-body-wrapper\">\n        <div class=\"example-accordion-item-body\" [@expandCollapse]=\"isBodyExpanded ? 'expanded' : 'collapsed'\" [@.disabled]=\"false\">\n          <!-- Pop-out Panel -->\n          <div *ngIf=\"shouldShowPopOut\" #popOutPanel class=\"pop-out-panel\" [ngClass]=\"{'pop-out-narrow': isPopOutNarrow}\">\n            <div class=\"pop-out-content\">\n              <al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\"\n                [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\"\n                (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'pop-out-run-deep-extraction'\"\n                [title]=\"popOutButtonLabel\"></al-button>\n              <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n              <button type=\"button\" class=\"pop-out-close\"\n                (click)=\"dismissPopOut()\" aria-label=\"Close pop-out panel\"><span\n                  class=\"material-icons-outlined\">close</span></button>\n            </div>\n          </div>\n          <!-- Single body content slot - child component will handle 3-column layout internally -->\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </cdk-accordion-item></cdk-accordion></al-general-container><ng-template #headerButtonsTemplate\n  let-buttons=\"buttons\" let-handleClick=\"handleClick\"><ng-container *ngFor=\"let btn of buttonConfig\"><al-button\n      *ngIf=\"!btn.displayCondition || btn.displayCondition()\" [color]=\"btn.color\" [outline]=\"btn.outline\"\n      [size]=\"btn.size\" [iconOutlined]=\"btn.iconOutlined\" [labelText]=\"btn.labelText\"\n      [leftIcon]=\"getButtonIcons(btn).leftIcon\" [rightIcon]=\"getButtonIcons(btn).rightIcon\"\n      [dataTestId]=\"btn.dataTestId\" [hasDropDown]=\"btn.hasDropDown\" [dropdownItems]=\"btn.dropdownItems\"\n      [buttonType]=\"'icon-label'\" [iconOnly]=\"!btn.labelText\" [tooltip]=\"btn.tooltip\"\n      [tooltipPosition]=\"btn.tooltipPosition || 'above'\" (onClick)=\"onButtonClick(btn, $event)\"\n      (optionSelect)=\"onDropdownSelect(btn, $event)\"></al-button></ng-container></ng-template><ng-template\n  #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\" let-configEyeToggle=\"configEyeToggle\">\n  <div class=\"mat-checkbox-margin align-center\"\n    [attr.data-test-id]=\"isHidden ? 'section-show-eye-div' : 'section-hide-eye-div'\"\n    style=\"display: flex; align-items: center; justify-content: center;\"><mat-icon\n      class=\"delete-multiple mat-fab.mat-accent eye-icon\" [svgIcon]=\"isHidden ? 'visibility' : 'visibility_off'\"\n      [matTooltip]=\"configEyeToggle?.tooltips?.[isHidden ? 'collapse' : 'expand'] || (isHidden ? 'Show Section' : 'Hide Section')\"\n      [matTooltipPosition]=\"configEyeToggle?.tooltips?.position || 'above'\"\n      [attr.aria-label]=\"configEyeToggle?.ariaLabels?.[isHidden ? 'collapsed' : 'expanded'] || (isHidden ? 'Show section' : 'Hide section')\"\n      (click)=\"onEyeIconClick(isHidden, accordionItem, configEyeToggle)\"\n      [attr.data-test-id]=\"isHidden ? 'section-show-eye-icon' : 'section-hide-eye-icon'\"\n      style=\"cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px; color: #717793;\"\n      [style.opacity]=\"1\" [style.visibility]=\"'visible'\"></mat-icon></div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0\";@import\"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\";:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.example-accordion-item-header{display:flex;align-items:center;cursor:pointer;width:100%}.example-accordion-item-header al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns ::ng-deep .container{align-items:center;display:grid}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .container{align-items:center;display:grid;min-width:0;transition:grid-template-columns .2s ease}.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 .2s ease,width .2s ease}.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 .2s ease}.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}.example-accordion-item-body-wrapper{width:100%;overflow:hidden}.toggle-button{border:none;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.toggle-button .material-icons-outlined{color:#717793}.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}.example-accordion-item-header.header-with-bottom-margin{margin-bottom:16px}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;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 .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{display:flex;align-items:center;gap:4px;min-width:0;border-radius:4px;transition:background-color .2s ease,width .2s ease;padding:0 8px;flex-shrink:1;width:100%;max-width:100%;overflow:hidden;flex:1 1 0}.edit-input-group.input-focused{width:100%;flex:1 1 100%;min-width:0}.edit-input-group:hover{background-color:#d1d3db}.edit-input-group:has(input:focus):hover,.edit-input-group:focus-within:hover{background-color:transparent}.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{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:#fff;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .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}.example-accordion-item-body .pop-out-panel{background-color:#717793;border-radius:12px;width:calc(100% - 30px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}.pop-out-content al-button{flex-shrink:0}.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:.06px;margin:0}.pop-out-panel.pop-out-narrow .pop-out-content{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:8px}.pop-out-panel.pop-out-narrow .pop-out-content al-button{grid-column:1;grid-row:1;justify-self:start}.pop-out-panel.pop-out-narrow .pop-out-content .pop-out-close{grid-column:1;grid-row:1;justify-self:end}.pop-out-panel.pop-out-narrow .pop-out-message{grid-column:1;grid-row:2;flex:none;width:100%}.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:.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 .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 .2s ease,width .2s ease}.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 4px 0 0;flex-shrink:1;min-width:100px;max-width:100%;box-sizing:border-box;width:100%;transition:width .2s ease}.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}.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 .2s ease,visibility .2s ease;cursor:pointer;border-radius:4px;flex-shrink:0;min-width:16px;width:16px;height:16px;font-size:16px;display:inline-flex;align-items:center;justify-content:center;color:#717793}.edit-input-group:hover mat-icon.edit-icon{opacity:1;visibility:visible}.hide-header-title mat-icon.edit-icon{display:none}.hide-header-title .edit-input-group{cursor:default;opacity:.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}.example-accordion-item-header.header-hidden{opacity:.7}.mat-checkbox-margin{margin-left:8px}.mat-checkbox-margin{position:relative;display:inline-flex;align-items:center;justify-content:center}.mat-checkbox-margin:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:4px;background-color:transparent;transition:background-color .2s ease;z-index:0;pointer-events:none}.mat-checkbox-margin:hover:before{background-color:#d3d3d3e6!important}.mat-checkbox-margin mat-icon{position:relative;z-index:1}\n"] }]
         }], ctorParameters: () => [{ type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i1.MatIconRegistry }], propDecorators: { title: [{
                 type: Input
             }], showHeaderCheckbox: [{
@@ -2098,6 +2251,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], dataTestId: [{
                 type: Input
+            }], accordionItem: [{
+                type: ViewChild,
+                args: ['accordionItem', { static: true }]
             }], titleChange: [{
                 type: Output
             }], sectionToggled: [{
@@ -2126,13 +2282,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class NewResumeHeaderModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderModule, imports: [CommonModule, NewResumeHeaderComponent], exports: [NewResumeHeaderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderModule, imports: [CommonModule, NewResumeHeaderComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderModule, imports: [CommonModule, BrowserAnimationsModule, NewResumeHeaderComponent], exports: [NewResumeHeaderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderModule, imports: [CommonModule, BrowserAnimationsModule, NewResumeHeaderComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, NewResumeHeaderComponent],
+                    imports: [CommonModule, BrowserAnimationsModule, NewResumeHeaderComponent],
                     exports: [NewResumeHeaderComponent],
                 }]
         }] });
@@ -4303,7 +4459,7 @@ class CustomEditorComponent {
         }
         sel?.removeAllRanges();
         sel?.addRange(range);
-        this.assignUniqueIdAndStyle();
+        // this.assignUniqueIdAndStyle();
         this.saveHistory();
         // Observe container size so we can switch layout based on container width, not screen width
         if (this.editorContainer?.nativeElement && typeof ResizeObserver !== 'undefined') {
@@ -4317,23 +4473,23 @@ class CustomEditorComponent {
             this.checkScreenSize();
         }
     }
-    onClick() {
-        setTimeout(() => this.assignUniqueIdAndStyle(), 0);
-    }
-    assignUniqueIdAndStyle() {
-        if (!this.renderer)
-            return;
-        const overlayPane = document.querySelector(".cdk-overlay-pane");
-        if (overlayPane) {
-            const isDialog = overlayPane.querySelector('mat-dialog-container');
-            if (!isDialog) {
-                const uniqueId = `cdk-overlay-${this.editorId}-${this.overlayIdCounter++}`;
-                this.renderer.setAttribute(overlayPane, "id", uniqueId);
-                this.renderer.setStyle(overlayPane, "width", "216px");
-                this.renderer.setStyle(overlayPane, "min-width", "216px");
-            }
-        }
-    }
+    // @HostListener("click")
+    // onClick(): void {
+    //   setTimeout(() => this.assignUniqueIdAndStyle(), 0);
+    // }
+    // private assignUniqueIdAndStyle(): void {
+    //   if (!this.renderer) return;
+    //   const overlayPane = document.querySelector(".cdk-overlay-pane");
+    //   if (overlayPane) {
+    //     const isDialog = overlayPane.querySelector('mat-dialog-container');
+    //     if (!isDialog) {
+    //       const uniqueId = `cdk-overlay-${this.editorId}-${this.overlayIdCounter++}`;
+    //       this.renderer.setAttribute(overlayPane, "id", uniqueId);
+    //       this.renderer.setStyle(overlayPane, "width", "216px");
+    //       this.renderer.setStyle(overlayPane, "min-width", "216px");
+    //     }
+    //   }
+    // }
     getEditorElement() {
         return this.editorReference?.nativeElement;
     }
@@ -5150,11 +5306,11 @@ class CustomEditorComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomEditorComponent, deps: [{ token: Renderer2 }, { token: i1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomEditorComponent, isStandalone: true, selector: "app-custom-editor", inputs: { bold: "bold", italic: "italic", underline: "underline", list: "list", isVisible: "isVisible", dataTestId: "dataTestId", showLabels: "showLabels", leftLabelText: "leftLabelText", rightLabelText: "rightLabelText", initialValue: "initialValue", contentFromParent: "contentFromParent", editScreenSection: "editScreenSection", actionType: "actionType", historyControls: "historyControls", autobullet: "autobullet", skillsBullet: "skillsBullet", jsonData: "jsonData", formJsonData: "formJsonData", editorId: "editorId", sectionId: "sectionId", actionId: "actionId", undoCustom: "undoCustom", redoCustom: "redoCustom", undoSkill: "undoSkill", redoSkill: "redoSkill", matOptionAI: "matOptionAI", hideTableOption: "hideTableOption", hideAutoBulletOption: "hideAutoBulletOption", hideAIOption: "hideAIOption", showAIButton: "showAIButton", insertTablebtn: "insertTablebtn", insertRowAbovebtn: "insertRowAbovebtn", insertRowBelowbtn: "insertRowBelowbtn", insertColumnLeftbtn: "insertColumnLeftbtn", insertColumnRightbtn: "insertColumnRightbtn", deleteTablebtn: "deleteTablebtn", deleteRowAbovebtn: "deleteRowAbovebtn", deleteRowBelowbtn: "deleteRowBelowbtn", deleteColumnLeftbtn: "deleteColumnLeftbtn", deleteColumnRightbtn: "deleteColumnRightbtn", showTable: "showTable", toolbarConfig: "toolbarConfig", textFormattingConfig: "textFormattingConfig" }, outputs: { contentChangeFromQuill: "contentChangeFromQuill", ApplyAIinQuill: "ApplyAIinQuill", onAutoBullet: "onAutoBullet" }, host: { listeners: { "click": "onClick()" } }, viewQueries: [{ propertyName: "editorReference", first: true, predicate: ["editorReference"], descendants: true, static: true }, { propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Editor Labels Section -->\n<div class=\"editor-labels\" *ngIf=\"showLabels\">\n  <div class=\"left-label\">{{ leftLabelText }}</div>\n  <div class=\"right-label\">{{ rightLabelText }}</div>\n</div>\n<div class=\"editor-container\" #editorContainer>\n  <!-- Toolbar Section -->\n  <div class=\"toolbar\">\n    <!-- Styling Dropdown (Small Screens Only) -->\n    <div class=\"styling-dropdown\" *ngIf=\"isSmallScreen\">\n      <span class=\"styling-text\" (mouseenter)=\"showStylingDropdownOnHover()\" (mouseleave)=\"hideStylingDropdown()\">\n        Styling\n      </span>\n\n      <div class=\"styling-dropdown-content\" *ngIf=\"showStylingDropdown\" (mouseenter)=\"clearStylingDropdownTimeout()\"\n        (mouseleave)=\"hideStylingDropdown()\">\n        <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n          (click)=\"execCmd($event, item.command)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n          matTooltipPosition=\"above\">\n          <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n            [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n          <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n            {{ item.icon }}\n          </span>\n        </button>\n      </div>\n    </div>\n\n    <!-- Individual Styling Buttons (Large Containers Only) -->\n    <ng-container *ngIf=\"!isSmallScreen\">\n      <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n        (click)=\"execCmd($event, item.command)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n        matTooltipPosition=\"above\">\n        <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n          [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n        <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n          {{ item.icon }}\n        </span>\n      </button>\n    </ng-container>\n\n    <!-- Text Formatting Dropdown (Small Screens Only) -->\n    <div class=\"text-formatting-dropdown\" *ngIf=\"isSmallScreen\">\n      <span class=\"text-formatting-text\" (mouseenter)=\"showTextFormattingDropdownOnHover()\"\n        (mouseleave)=\"hideTextFormattingDropdown()\">\n        Text Formatting\n      </span>\n\n      <div class=\"text-formatting-dropdown-content\" *ngIf=\"showTextFormattingDropdown\"\n        (mouseenter)=\"clearTextFormattingDropdownTimeout()\" (mouseleave)=\"hideTextFormattingDropdown()\">\n\n        <!-- Text Formatting Buttons -->\n        <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\"\n          [class.active]=\"getActiveState(item.type)\" (click)=\"handleTextFormattingClick($event, item)\"\n          [title]=\"item.title\" type=\"button\">\n          <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n            [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n          <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n            {{ item.icon }}\n          </span>\n        </button>\n\n        <!-- Table Component (Small Screens Only) -->\n        <app-table *ngIf=\"showTable\" [getEditorElement]=\"getBoundGetEditorElement()\"\n          [saveHistoryMethod]=\"getBoundSaveHistory()\" [textChangeMethod]=\"getBoundTextChange()\">\n        </app-table>\n\n        <!-- Auto Bullet Button -->\n        <button *ngIf=\"autobullet\" class=\"auto-bullet\" mat-flat-button (click)=\"$event.stopPropagation(); useAutoBullet($event)\"\n          [disabled]=\"autoBulletDisable || isLoadingAI || !checkHtmlContent('')\">\n          {{ AutoBulletButton }}\n        </button>\n\n        <!-- Bullet Skill Button -->\n        <button *ngIf=\"skillsBullet\" class=\"bullet-skill\" mat-flat-button\n          (click)=\"$event.stopPropagation(); transformToSkillsBullets()\" [disabled]=\"isDisabled || isLoadingAI\">\n          {{ skillsButton }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Individual Text Formatting Buttons (Large Containers Only) -->\n    <ng-container *ngIf=\"!isSmallScreen\">\n      <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n        (onClick)=\"handleTextFormattingClick($event, item)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n        matTooltipPosition=\"above\">\n        <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n          [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n        <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n          {{ item.icon }}\n        </span>\n      </button>\n    </ng-container>\n\n    <!-- Table Component (Large Screens Only) -->\n    <app-table *ngIf=\"showTable && !isSmallScreen\" [getEditorElement]=\"getBoundGetEditorElement()\"\n      [saveHistoryMethod]=\"getBoundSaveHistory()\" [textChangeMethod]=\"getBoundTextChange()\" matTooltip=\"Table\"\n      matTooltipPosition=\"above\">\n    </app-table>\n\n    <!-- Auto Bullet Button (Large Screens Only) -->\n    <button *ngIf=\"autobullet && !isSmallScreen\" class=\"auto-bullet\" mat-flat-button\n      (click)=\"$event.stopPropagation(); useAutoBullet($event)\" [disabled]=\"autoBulletDisable || isLoadingAI || !checkHtmlContent('')\">\n      {{ AutoBulletButton }}\n    </button>\n\n    <!-- Bullet Skill Button (Large Screens Only) -->\n    <button *ngIf=\"skillsBullet && !isSmallScreen\" class=\"bullet-skill\" mat-flat-button\n      (click)=\"$event.stopPropagation(); transformToSkillsBullets($event)\" [disabled]=\"isDisabled || isLoadingAI\">\n      {{ skillsButton }}\n    </button>\n\n    <!-- History Controls (Undo/Redo) -->\n    <div *ngIf=\"historyControls\" class=\"history-controls\">\n      <!-- Undo Button -->\n      <button class=\"format-button\" (onClick)=\"execCmd($event, 'undo')\" title=\"Undo\" type=\"button\" matTooltip=\"Undo\"\n        matTooltipPosition=\"above\">\n        <span class=\"material-icons\" [class.active-icon]=\"getActiveState('undo')\">\n          undo\n        </span>\n      </button>\n\n      <!-- Redo Button -->\n      <button class=\"format-button\" (clionClickck)=\"execCmd($event, 'redo')\" title=\"Redo\" type=\"button\" matTooltip=\"Redo\"\n        matTooltipPosition=\"above\">\n        <span class=\"material-icons\" [class.active-icon]=\"getActiveState('redo')\">\n          redo\n        </span>\n      </button>\n    </div>\n\n    <!-- Apply AI Button -->\n    <al-button class=\"apply-ai-button\" *ngIf=\"showAIButton\" [labelText]=\"ApplyAiButton\" [buttonType]=\"'icon-label'\"\n      [color]=\"'gradient'\" [size]=\"'xs'\" [disabled]=\"isLoadingAI\" (onClick)=\"useAITool($event)\"\n      [tooltip]=\"ApplyAiButton\" [tooltipPosition]=\"'above'\">\n    </al-button>\n\n  </div>\n\n  <!-- Editor Content Area -->\n  <div class=\"editor-content\" #editorReference contenteditable=\"true\" [id]=\"editorId\" (click)=\"updateTagHierarchy()\"\n    (input)=\"onEditorInput()\" (paste)=\"handlePaste($event)\" (keydown)=\"handleKeydown($event)\"\n    (click)=\"toggleDiv($event, true)\" spellcheck=\"false\" role=\"textbox\" aria-label=\"Rich text editor\"\n    aria-multiline=\"true\" [attr.data-testid]=\"dataTestId\">\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"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\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large,.toolbar .text-formatting-dropdown .text-formatting-text,.toolbar .styling-dropdown .styling-text,.editor-labels .left-label{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small,.editor-labels .right-label{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}.editor-labels{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 4px}.editor-labels .left-label{color:#4b4f62}.editor-labels .right-label{color:var(--Greys-500, #A2A6B8);text-align:right}.editor-container{width:100%;max-width:100%;display:block;border-radius:10px;overflow:visible;box-sizing:border-box;position:relative}.editor-container img{-webkit-user-drag:none;user-drag:none;pointer-events:auto}.toolbar{display:flex;align-items:center;background-color:#fafbfb;border:1px solid #C3C5D1;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:1px solid #C3C5D1;gap:12px;padding:12px 16px;overflow:visible;position:relative;z-index:1}.toolbar .format-button{display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;border-radius:6px;cursor:pointer;transition:background-color .2s ease;padding:0;position:relative;width:24px;min-width:24px;height:24px}.toolbar .format-button .material-icons,.toolbar .format-button mat-icon{display:flex;align-items:center;justify-content:center;font-size:20px;line-height:20px;color:#4b4f62;transition:none;width:20px;height:20px;box-sizing:border-box}.toolbar .format-button .format-button .material-icons{transform:translateY(1px)}.toolbar .format-button.active .material-icons,.toolbar .format-button.active mat-icon,.toolbar .format-button .active-icon{color:#37c1ce}.toolbar .format-button:hover{background-color:#d3d3d380!important}.toolbar .format-button:hover .material-icons,.toolbar .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .format-button:hover.active .material-icons,.toolbar .format-button:hover.active mat-icon,.toolbar .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .format-button:active{transform:translateY(0);box-shadow:0 1px 2px #0000001a}.toolbar .format-button.active{color:#37c1ce}.toolbar .format-button svg{pointer-events:none;transition:fill .2s ease}.toolbar .auto-bullet,.toolbar .bullet-skill{display:flex;align-items:center;justify-content:center;border:1px solid #383B4A;background-color:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;padding:6px 12px;height:28px;font-size:12px;font-weight:400;color:#383b4a;letter-spacing:.4px}.toolbar .auto-bullet:hover,.toolbar .bullet-skill:hover{background-color:#e9ecef;border-color:#383b4a}.toolbar .auto-bullet:disabled,.toolbar .bullet-skill:disabled{opacity:.5;cursor:not-allowed}.toolbar .styling-dropdown{position:relative;display:inline-block;cursor:pointer;z-index:1000}.toolbar .styling-dropdown .styling-text{color:#4b4f62;font-weight:400;padding:4px;border-radius:4px;transition:background-color .2s ease}.toolbar .styling-dropdown .styling-text:hover{color:#4b4f62!important;background-color:#d3d3d380!important}.toolbar .styling-dropdown .styling-dropdown-content{position:absolute;bottom:100%;left:0;background-color:#ecedf1;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap}.toolbar .styling-dropdown .styling-dropdown-content .format-button{justify-content:center;width:24px;min-width:24px;height:24px;padding:0;border-radius:4px;background-color:transparent;border:1px solid transparent;flex-shrink:0;transition:background-color .2s ease}.toolbar .styling-dropdown .styling-dropdown-content .format-button .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button mat-icon{display:flex;align-items:center;justify-content:center;margin-right:0;font-size:24px;line-height:1;color:#4b4f62;transition:none;width:24px;height:24px}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover{background-color:#d3d3d380!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover.active mat-icon,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button.active mat-icon,.toolbar .styling-dropdown .styling-dropdown-content .format-button .active-icon{color:#37c1ce}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active{color:#37c1ce}.toolbar .text-formatting-dropdown{position:relative;display:inline-block;cursor:pointer;z-index:1000}.toolbar .text-formatting-dropdown .text-formatting-text{color:#4b4f62;font-weight:400;padding:4px;border-radius:4px;transition:background-color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-text:hover{color:#4b4f62!important;background-color:#d3d3d380!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content{position:absolute;bottom:100%;left:0;background-color:#ecedf1;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;min-width:auto;padding:8px;margin-bottom:6px;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap;align-items:center}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button{justify-content:center;width:24px;min-width:24px;height:24px;padding:0;border-radius:4px;flex-shrink:0;white-space:nowrap;background-color:transparent;border:1px solid transparent;transition:background-color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button mat-icon{display:flex;align-items:center;justify-content:center;margin-right:0;font-size:18px;line-height:1;color:#4b4f62;transition:none;width:18px;height:18px}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover{background-color:#d3d3d380!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover.active mat-icon,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active mat-icon,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .active-icon{color:#37c1ce}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active{color:#37c1ce}.toolbar .history-controls{display:flex;align-items:center;gap:8px}.toolbar .apply-ai-button{margin-left:auto}.editor-content{max-width:100%;min-height:100px;padding:12px 16px;background-color:#f7f9fe;outline:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.6;color:#4b4f62;overflow-y:auto;border:1px solid #ccc;border-top:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px;max-height:60vh}.editor-content:focus{background-color:#f7f9fe}.editor-content:focus-visible{outline:none!important}.editor-content:empty:before{content:\"Start typing here...\";color:#adb5bd;font-style:italic}.editor-content p{margin:0 0 12px}.editor-content p:last-child{margin-bottom:0}.editor-content b,.editor-content strong{font-weight:600;color:#2c3e50}.editor-content i,.editor-content em{font-style:italic;color:#34495e}.editor-content u,.editor-content ins{text-decoration:underline;text-decoration-color:#000;text-decoration-thickness:2px}.editor-content *::selection{background-color:#37c1ce33}.editor-content table{border-collapse:collapse;width:100%;margin:10px 0;background-color:#f7f9fe;table-layout:fixed}.editor-content table td,.editor-content table th{border:1px solid #ccc;padding:8px;text-align:left;vertical-align:top;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;max-width:0;background-color:#f7f9fe}.editor-content table th{background-color:#f7f9fe;font-weight:600}.tag-hierarchy{padding:5px;border-top:none;background-color:#f9f9f9;height:25px;border:1px solid #ccc}.cdk-overlay-pane{width:fit-content!important;min-width:fit-content!important;transform:translate(0)!important}.mat-select-panel{width:fit-content!important;min-width:fit-content!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TableComponent, selector: "app-table", inputs: ["getEditorElement", "saveHistoryMethod", "textChangeMethod"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomEditorComponent, isStandalone: true, selector: "app-custom-editor", inputs: { bold: "bold", italic: "italic", underline: "underline", list: "list", isVisible: "isVisible", dataTestId: "dataTestId", showLabels: "showLabels", leftLabelText: "leftLabelText", rightLabelText: "rightLabelText", initialValue: "initialValue", contentFromParent: "contentFromParent", editScreenSection: "editScreenSection", actionType: "actionType", historyControls: "historyControls", autobullet: "autobullet", skillsBullet: "skillsBullet", jsonData: "jsonData", formJsonData: "formJsonData", editorId: "editorId", sectionId: "sectionId", actionId: "actionId", undoCustom: "undoCustom", redoCustom: "redoCustom", undoSkill: "undoSkill", redoSkill: "redoSkill", matOptionAI: "matOptionAI", hideTableOption: "hideTableOption", hideAutoBulletOption: "hideAutoBulletOption", hideAIOption: "hideAIOption", showAIButton: "showAIButton", insertTablebtn: "insertTablebtn", insertRowAbovebtn: "insertRowAbovebtn", insertRowBelowbtn: "insertRowBelowbtn", insertColumnLeftbtn: "insertColumnLeftbtn", insertColumnRightbtn: "insertColumnRightbtn", deleteTablebtn: "deleteTablebtn", deleteRowAbovebtn: "deleteRowAbovebtn", deleteRowBelowbtn: "deleteRowBelowbtn", deleteColumnLeftbtn: "deleteColumnLeftbtn", deleteColumnRightbtn: "deleteColumnRightbtn", showTable: "showTable", toolbarConfig: "toolbarConfig", textFormattingConfig: "textFormattingConfig" }, outputs: { contentChangeFromQuill: "contentChangeFromQuill", ApplyAIinQuill: "ApplyAIinQuill", onAutoBullet: "onAutoBullet" }, viewQueries: [{ propertyName: "editorReference", first: true, predicate: ["editorReference"], descendants: true, static: true }, { propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Editor Labels Section -->\n<div class=\"editor-labels\" *ngIf=\"showLabels\">\n  <div class=\"left-label\">{{ leftLabelText }}</div>\n  <div class=\"right-label\">{{ rightLabelText }}</div>\n</div>\n<div class=\"editor-container\" #editorContainer>\n  <!-- Toolbar Section -->\n  <div class=\"toolbar\">\n    <!-- Styling Dropdown (Small Screens Only) -->\n    <div class=\"styling-dropdown\" *ngIf=\"isSmallScreen\">\n      <span class=\"styling-text\" (mouseenter)=\"showStylingDropdownOnHover()\" (mouseleave)=\"hideStylingDropdown()\">\n        Styling\n      </span>\n\n      <div class=\"styling-dropdown-content\" *ngIf=\"showStylingDropdown\" (mouseenter)=\"clearStylingDropdownTimeout()\"\n        (mouseleave)=\"hideStylingDropdown()\">\n        <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n          (click)=\"execCmd($event, item.command)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n          matTooltipPosition=\"above\">\n          <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n            [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n          <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n            {{ item.icon }}\n          </span>\n        </button>\n      </div>\n    </div>\n\n    <!-- Individual Styling Buttons (Large Containers Only) -->\n    <ng-container *ngIf=\"!isSmallScreen\">\n      <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n        (click)=\"execCmd($event, item.command)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n        matTooltipPosition=\"above\">\n        <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n          [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n        <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n          {{ item.icon }}\n        </span>\n      </button>\n    </ng-container>\n\n    <!-- Text Formatting Dropdown (Small Screens Only) -->\n    <div class=\"text-formatting-dropdown\" *ngIf=\"isSmallScreen\">\n      <span class=\"text-formatting-text\" (mouseenter)=\"showTextFormattingDropdownOnHover()\"\n        (mouseleave)=\"hideTextFormattingDropdown()\">\n        Text Formatting\n      </span>\n\n      <div class=\"text-formatting-dropdown-content\" *ngIf=\"showTextFormattingDropdown\"\n        (mouseenter)=\"clearTextFormattingDropdownTimeout()\" (mouseleave)=\"hideTextFormattingDropdown()\">\n\n        <!-- Text Formatting Buttons -->\n        <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\"\n          [class.active]=\"getActiveState(item.type)\" (click)=\"handleTextFormattingClick($event, item)\"\n          [title]=\"item.title\" type=\"button\">\n          <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n            [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n          <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n            {{ item.icon }}\n          </span>\n        </button>\n\n        <!-- Table Component (Small Screens Only) -->\n        <app-table *ngIf=\"showTable\" [getEditorElement]=\"getBoundGetEditorElement()\"\n          [saveHistoryMethod]=\"getBoundSaveHistory()\" [textChangeMethod]=\"getBoundTextChange()\">\n        </app-table>\n\n        <!-- Auto Bullet Button -->\n        <button *ngIf=\"autobullet\" class=\"auto-bullet\" mat-flat-button (click)=\"$event.stopPropagation(); useAutoBullet($event)\"\n          [disabled]=\"autoBulletDisable || isLoadingAI || !checkHtmlContent('')\">\n          {{ AutoBulletButton }}\n        </button>\n\n        <!-- Bullet Skill Button -->\n        <button *ngIf=\"skillsBullet\" class=\"bullet-skill\" mat-flat-button\n          (click)=\"$event.stopPropagation(); transformToSkillsBullets()\" [disabled]=\"isDisabled || isLoadingAI\">\n          {{ skillsButton }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Individual Text Formatting Buttons (Large Containers Only) -->\n    <ng-container *ngIf=\"!isSmallScreen\">\n      <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n        (onClick)=\"handleTextFormattingClick($event, item)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n        matTooltipPosition=\"above\">\n        <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n          [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n        <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n          {{ item.icon }}\n        </span>\n      </button>\n    </ng-container>\n\n    <!-- Table Component (Large Screens Only) -->\n    <app-table *ngIf=\"showTable && !isSmallScreen\" [getEditorElement]=\"getBoundGetEditorElement()\"\n      [saveHistoryMethod]=\"getBoundSaveHistory()\" [textChangeMethod]=\"getBoundTextChange()\" matTooltip=\"Table\"\n      matTooltipPosition=\"above\">\n    </app-table>\n\n    <!-- Auto Bullet Button (Large Screens Only) -->\n    <button *ngIf=\"autobullet && !isSmallScreen\" class=\"auto-bullet\" mat-flat-button\n      (click)=\"$event.stopPropagation(); useAutoBullet($event)\" [disabled]=\"autoBulletDisable || isLoadingAI || !checkHtmlContent('')\">\n      {{ AutoBulletButton }}\n    </button>\n\n    <!-- Bullet Skill Button (Large Screens Only) -->\n    <button *ngIf=\"skillsBullet && !isSmallScreen\" class=\"bullet-skill\" mat-flat-button\n      (click)=\"$event.stopPropagation(); transformToSkillsBullets($event)\" [disabled]=\"isDisabled || isLoadingAI\">\n      {{ skillsButton }}\n    </button>\n\n    <!-- History Controls (Undo/Redo) -->\n    <div *ngIf=\"historyControls\" class=\"history-controls\">\n      <!-- Undo Button -->\n      <button class=\"format-button\" (onClick)=\"execCmd($event, 'undo')\" title=\"Undo\" type=\"button\" matTooltip=\"Undo\"\n        matTooltipPosition=\"above\">\n        <span class=\"material-icons\" [class.active-icon]=\"getActiveState('undo')\">\n          undo\n        </span>\n      </button>\n\n      <!-- Redo Button -->\n      <button class=\"format-button\" (clionClickck)=\"execCmd($event, 'redo')\" title=\"Redo\" type=\"button\" matTooltip=\"Redo\"\n        matTooltipPosition=\"above\">\n        <span class=\"material-icons\" [class.active-icon]=\"getActiveState('redo')\">\n          redo\n        </span>\n      </button>\n    </div>\n\n    <!-- Apply AI Button -->\n    <al-button class=\"apply-ai-button\" *ngIf=\"showAIButton\" [labelText]=\"ApplyAiButton\" [buttonType]=\"'icon-label'\"\n      [color]=\"'gradient'\" [size]=\"'xs'\" [disabled]=\"isLoadingAI\" (onClick)=\"useAITool($event)\"\n      [tooltip]=\"ApplyAiButton\" [tooltipPosition]=\"'above'\">\n    </al-button>\n\n  </div>\n\n  <!-- Editor Content Area -->\n  <div class=\"editor-content\" #editorReference contenteditable=\"true\" [id]=\"editorId\" (click)=\"updateTagHierarchy()\"\n    (input)=\"onEditorInput()\" (paste)=\"handlePaste($event)\" (keydown)=\"handleKeydown($event)\"\n    (click)=\"toggleDiv($event, true)\" spellcheck=\"false\" role=\"textbox\" aria-label=\"Rich text editor\"\n    aria-multiline=\"true\" [attr.data-testid]=\"dataTestId\">\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"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\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large,.toolbar .text-formatting-dropdown .text-formatting-text,.toolbar .styling-dropdown .styling-text,.editor-labels .left-label{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small,.editor-labels .right-label{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}.editor-labels{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 4px}.editor-labels .left-label{color:#4b4f62}.editor-labels .right-label{color:var(--Greys-500, #A2A6B8);text-align:right}.editor-container{width:100%;max-width:100%;display:block;border-radius:10px;overflow:visible;box-sizing:border-box;position:relative}.editor-container img{-webkit-user-drag:none;user-drag:none;pointer-events:auto}.toolbar{display:flex;align-items:center;background-color:#fafbfb;border:1px solid #C3C5D1;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:1px solid #C3C5D1;gap:12px;padding:12px 16px;overflow:visible;position:relative;z-index:1}.toolbar .format-button{display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;border-radius:6px;cursor:pointer;transition:background-color .2s ease;padding:0;position:relative;width:24px;min-width:24px;height:24px}.toolbar .format-button .material-icons,.toolbar .format-button mat-icon{display:flex;align-items:center;justify-content:center;font-size:20px;line-height:20px;color:#4b4f62;transition:none;width:20px;height:20px;box-sizing:border-box}.toolbar .format-button .format-button .material-icons{transform:translateY(1px)}.toolbar .format-button.active .material-icons,.toolbar .format-button.active mat-icon,.toolbar .format-button .active-icon{color:#37c1ce}.toolbar .format-button:hover{background-color:#d3d3d380!important}.toolbar .format-button:hover .material-icons,.toolbar .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .format-button:hover.active .material-icons,.toolbar .format-button:hover.active mat-icon,.toolbar .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .format-button:active{transform:translateY(0);box-shadow:0 1px 2px #0000001a}.toolbar .format-button.active{color:#37c1ce}.toolbar .format-button svg{pointer-events:none;transition:fill .2s ease}.toolbar .auto-bullet,.toolbar .bullet-skill{display:flex;align-items:center;justify-content:center;border:1px solid #383B4A;background-color:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;padding:6px 12px;height:28px;font-size:12px;font-weight:400;color:#383b4a;letter-spacing:.4px}.toolbar .auto-bullet:hover,.toolbar .bullet-skill:hover{background-color:#e9ecef;border-color:#383b4a}.toolbar .auto-bullet:disabled,.toolbar .bullet-skill:disabled{opacity:.5;cursor:not-allowed}.toolbar .styling-dropdown{position:relative;display:inline-block;cursor:pointer;z-index:1000}.toolbar .styling-dropdown .styling-text{color:#4b4f62;font-weight:400;padding:4px;border-radius:4px;transition:background-color .2s ease}.toolbar .styling-dropdown .styling-text:hover{color:#4b4f62!important;background-color:#d3d3d380!important}.toolbar .styling-dropdown .styling-dropdown-content{position:absolute;bottom:100%;left:0;background-color:#ecedf1;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap}.toolbar .styling-dropdown .styling-dropdown-content .format-button{justify-content:center;width:24px;min-width:24px;height:24px;padding:0;border-radius:4px;background-color:transparent;border:1px solid transparent;flex-shrink:0;transition:background-color .2s ease}.toolbar .styling-dropdown .styling-dropdown-content .format-button .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button mat-icon{display:flex;align-items:center;justify-content:center;margin-right:0;font-size:24px;line-height:1;color:#4b4f62;transition:none;width:24px;height:24px}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover{background-color:#d3d3d380!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover.active mat-icon,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button.active mat-icon,.toolbar .styling-dropdown .styling-dropdown-content .format-button .active-icon{color:#37c1ce}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active{color:#37c1ce}.toolbar .text-formatting-dropdown{position:relative;display:inline-block;cursor:pointer;z-index:1000}.toolbar .text-formatting-dropdown .text-formatting-text{color:#4b4f62;font-weight:400;padding:4px;border-radius:4px;transition:background-color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-text:hover{color:#4b4f62!important;background-color:#d3d3d380!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content{position:absolute;bottom:100%;left:0;background-color:#ecedf1;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;min-width:auto;padding:8px;margin-bottom:6px;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap;align-items:center}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button{justify-content:center;width:24px;min-width:24px;height:24px;padding:0;border-radius:4px;flex-shrink:0;white-space:nowrap;background-color:transparent;border:1px solid transparent;transition:background-color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button mat-icon{display:flex;align-items:center;justify-content:center;margin-right:0;font-size:18px;line-height:1;color:#4b4f62;transition:none;width:18px;height:18px}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover{background-color:#d3d3d380!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover.active mat-icon,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active mat-icon,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .active-icon{color:#37c1ce}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active{color:#37c1ce}.toolbar .history-controls{display:flex;align-items:center;gap:8px}.toolbar .apply-ai-button{margin-left:auto}.editor-content{max-width:100%;min-height:100px;padding:12px 16px;background-color:#f7f9fe;outline:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.6;color:#4b4f62;overflow-y:auto;border:1px solid #ccc;border-top:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px;max-height:60vh}.editor-content:focus{background-color:#f7f9fe}.editor-content:focus-visible{outline:none!important}.editor-content:empty:before{content:\"Start typing here...\";color:#adb5bd;font-style:italic}.editor-content p{margin:0 0 12px}.editor-content p:last-child{margin-bottom:0}.editor-content b,.editor-content strong{font-weight:600;color:#2c3e50}.editor-content i,.editor-content em{font-style:italic;color:#34495e}.editor-content u,.editor-content ins{text-decoration:underline;text-decoration-color:#000;text-decoration-thickness:2px}.editor-content *::selection{background-color:#37c1ce33}.editor-content table{border-collapse:collapse;width:100%;margin:10px 0;background-color:#f7f9fe;table-layout:fixed}.editor-content table td,.editor-content table th{border:1px solid #ccc;padding:8px;text-align:left;vertical-align:top;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;max-width:0;background-color:#f7f9fe}.editor-content table th{background-color:#f7f9fe;font-weight:600}.tag-hierarchy{padding:5px;border-top:none;background-color:#f9f9f9;height:25px;border:1px solid #ccc}.mat-select-panel{width:fit-content!important;min-width:fit-content!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TableComponent, selector: "app-table", inputs: ["getEditorElement", "saveHistoryMethod", "textChangeMethod"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-custom-editor', standalone: true, imports: [CommonModule, TableComponent, MatTooltipModule, MatIconModule, ButtonComponent], encapsulation: ViewEncapsulation.None, template: "<!-- Editor Labels Section -->\n<div class=\"editor-labels\" *ngIf=\"showLabels\">\n  <div class=\"left-label\">{{ leftLabelText }}</div>\n  <div class=\"right-label\">{{ rightLabelText }}</div>\n</div>\n<div class=\"editor-container\" #editorContainer>\n  <!-- Toolbar Section -->\n  <div class=\"toolbar\">\n    <!-- Styling Dropdown (Small Screens Only) -->\n    <div class=\"styling-dropdown\" *ngIf=\"isSmallScreen\">\n      <span class=\"styling-text\" (mouseenter)=\"showStylingDropdownOnHover()\" (mouseleave)=\"hideStylingDropdown()\">\n        Styling\n      </span>\n\n      <div class=\"styling-dropdown-content\" *ngIf=\"showStylingDropdown\" (mouseenter)=\"clearStylingDropdownTimeout()\"\n        (mouseleave)=\"hideStylingDropdown()\">\n        <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n          (click)=\"execCmd($event, item.command)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n          matTooltipPosition=\"above\">\n          <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n            [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n          <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n            {{ item.icon }}\n          </span>\n        </button>\n      </div>\n    </div>\n\n    <!-- Individual Styling Buttons (Large Containers Only) -->\n    <ng-container *ngIf=\"!isSmallScreen\">\n      <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n        (click)=\"execCmd($event, item.command)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n        matTooltipPosition=\"above\">\n        <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n          [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n        <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n          {{ item.icon }}\n        </span>\n      </button>\n    </ng-container>\n\n    <!-- Text Formatting Dropdown (Small Screens Only) -->\n    <div class=\"text-formatting-dropdown\" *ngIf=\"isSmallScreen\">\n      <span class=\"text-formatting-text\" (mouseenter)=\"showTextFormattingDropdownOnHover()\"\n        (mouseleave)=\"hideTextFormattingDropdown()\">\n        Text Formatting\n      </span>\n\n      <div class=\"text-formatting-dropdown-content\" *ngIf=\"showTextFormattingDropdown\"\n        (mouseenter)=\"clearTextFormattingDropdownTimeout()\" (mouseleave)=\"hideTextFormattingDropdown()\">\n\n        <!-- Text Formatting Buttons -->\n        <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\"\n          [class.active]=\"getActiveState(item.type)\" (click)=\"handleTextFormattingClick($event, item)\"\n          [title]=\"item.title\" type=\"button\">\n          <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n            [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n          <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n            {{ item.icon }}\n          </span>\n        </button>\n\n        <!-- Table Component (Small Screens Only) -->\n        <app-table *ngIf=\"showTable\" [getEditorElement]=\"getBoundGetEditorElement()\"\n          [saveHistoryMethod]=\"getBoundSaveHistory()\" [textChangeMethod]=\"getBoundTextChange()\">\n        </app-table>\n\n        <!-- Auto Bullet Button -->\n        <button *ngIf=\"autobullet\" class=\"auto-bullet\" mat-flat-button (click)=\"$event.stopPropagation(); useAutoBullet($event)\"\n          [disabled]=\"autoBulletDisable || isLoadingAI || !checkHtmlContent('')\">\n          {{ AutoBulletButton }}\n        </button>\n\n        <!-- Bullet Skill Button -->\n        <button *ngIf=\"skillsBullet\" class=\"bullet-skill\" mat-flat-button\n          (click)=\"$event.stopPropagation(); transformToSkillsBullets()\" [disabled]=\"isDisabled || isLoadingAI\">\n          {{ skillsButton }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Individual Text Formatting Buttons (Large Containers Only) -->\n    <ng-container *ngIf=\"!isSmallScreen\">\n      <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n        (onClick)=\"handleTextFormattingClick($event, item)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n        matTooltipPosition=\"above\">\n        <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n          [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n        <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n          {{ item.icon }}\n        </span>\n      </button>\n    </ng-container>\n\n    <!-- Table Component (Large Screens Only) -->\n    <app-table *ngIf=\"showTable && !isSmallScreen\" [getEditorElement]=\"getBoundGetEditorElement()\"\n      [saveHistoryMethod]=\"getBoundSaveHistory()\" [textChangeMethod]=\"getBoundTextChange()\" matTooltip=\"Table\"\n      matTooltipPosition=\"above\">\n    </app-table>\n\n    <!-- Auto Bullet Button (Large Screens Only) -->\n    <button *ngIf=\"autobullet && !isSmallScreen\" class=\"auto-bullet\" mat-flat-button\n      (click)=\"$event.stopPropagation(); useAutoBullet($event)\" [disabled]=\"autoBulletDisable || isLoadingAI || !checkHtmlContent('')\">\n      {{ AutoBulletButton }}\n    </button>\n\n    <!-- Bullet Skill Button (Large Screens Only) -->\n    <button *ngIf=\"skillsBullet && !isSmallScreen\" class=\"bullet-skill\" mat-flat-button\n      (click)=\"$event.stopPropagation(); transformToSkillsBullets($event)\" [disabled]=\"isDisabled || isLoadingAI\">\n      {{ skillsButton }}\n    </button>\n\n    <!-- History Controls (Undo/Redo) -->\n    <div *ngIf=\"historyControls\" class=\"history-controls\">\n      <!-- Undo Button -->\n      <button class=\"format-button\" (onClick)=\"execCmd($event, 'undo')\" title=\"Undo\" type=\"button\" matTooltip=\"Undo\"\n        matTooltipPosition=\"above\">\n        <span class=\"material-icons\" [class.active-icon]=\"getActiveState('undo')\">\n          undo\n        </span>\n      </button>\n\n      <!-- Redo Button -->\n      <button class=\"format-button\" (clionClickck)=\"execCmd($event, 'redo')\" title=\"Redo\" type=\"button\" matTooltip=\"Redo\"\n        matTooltipPosition=\"above\">\n        <span class=\"material-icons\" [class.active-icon]=\"getActiveState('redo')\">\n          redo\n        </span>\n      </button>\n    </div>\n\n    <!-- Apply AI Button -->\n    <al-button class=\"apply-ai-button\" *ngIf=\"showAIButton\" [labelText]=\"ApplyAiButton\" [buttonType]=\"'icon-label'\"\n      [color]=\"'gradient'\" [size]=\"'xs'\" [disabled]=\"isLoadingAI\" (onClick)=\"useAITool($event)\"\n      [tooltip]=\"ApplyAiButton\" [tooltipPosition]=\"'above'\">\n    </al-button>\n\n  </div>\n\n  <!-- Editor Content Area -->\n  <div class=\"editor-content\" #editorReference contenteditable=\"true\" [id]=\"editorId\" (click)=\"updateTagHierarchy()\"\n    (input)=\"onEditorInput()\" (paste)=\"handlePaste($event)\" (keydown)=\"handleKeydown($event)\"\n    (click)=\"toggleDiv($event, true)\" spellcheck=\"false\" role=\"textbox\" aria-label=\"Rich text editor\"\n    aria-multiline=\"true\" [attr.data-testid]=\"dataTestId\">\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"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\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large,.toolbar .text-formatting-dropdown .text-formatting-text,.toolbar .styling-dropdown .styling-text,.editor-labels .left-label{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small,.editor-labels .right-label{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}.editor-labels{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 4px}.editor-labels .left-label{color:#4b4f62}.editor-labels .right-label{color:var(--Greys-500, #A2A6B8);text-align:right}.editor-container{width:100%;max-width:100%;display:block;border-radius:10px;overflow:visible;box-sizing:border-box;position:relative}.editor-container img{-webkit-user-drag:none;user-drag:none;pointer-events:auto}.toolbar{display:flex;align-items:center;background-color:#fafbfb;border:1px solid #C3C5D1;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:1px solid #C3C5D1;gap:12px;padding:12px 16px;overflow:visible;position:relative;z-index:1}.toolbar .format-button{display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;border-radius:6px;cursor:pointer;transition:background-color .2s ease;padding:0;position:relative;width:24px;min-width:24px;height:24px}.toolbar .format-button .material-icons,.toolbar .format-button mat-icon{display:flex;align-items:center;justify-content:center;font-size:20px;line-height:20px;color:#4b4f62;transition:none;width:20px;height:20px;box-sizing:border-box}.toolbar .format-button .format-button .material-icons{transform:translateY(1px)}.toolbar .format-button.active .material-icons,.toolbar .format-button.active mat-icon,.toolbar .format-button .active-icon{color:#37c1ce}.toolbar .format-button:hover{background-color:#d3d3d380!important}.toolbar .format-button:hover .material-icons,.toolbar .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .format-button:hover.active .material-icons,.toolbar .format-button:hover.active mat-icon,.toolbar .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .format-button:active{transform:translateY(0);box-shadow:0 1px 2px #0000001a}.toolbar .format-button.active{color:#37c1ce}.toolbar .format-button svg{pointer-events:none;transition:fill .2s ease}.toolbar .auto-bullet,.toolbar .bullet-skill{display:flex;align-items:center;justify-content:center;border:1px solid #383B4A;background-color:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;padding:6px 12px;height:28px;font-size:12px;font-weight:400;color:#383b4a;letter-spacing:.4px}.toolbar .auto-bullet:hover,.toolbar .bullet-skill:hover{background-color:#e9ecef;border-color:#383b4a}.toolbar .auto-bullet:disabled,.toolbar .bullet-skill:disabled{opacity:.5;cursor:not-allowed}.toolbar .styling-dropdown{position:relative;display:inline-block;cursor:pointer;z-index:1000}.toolbar .styling-dropdown .styling-text{color:#4b4f62;font-weight:400;padding:4px;border-radius:4px;transition:background-color .2s ease}.toolbar .styling-dropdown .styling-text:hover{color:#4b4f62!important;background-color:#d3d3d380!important}.toolbar .styling-dropdown .styling-dropdown-content{position:absolute;bottom:100%;left:0;background-color:#ecedf1;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap}.toolbar .styling-dropdown .styling-dropdown-content .format-button{justify-content:center;width:24px;min-width:24px;height:24px;padding:0;border-radius:4px;background-color:transparent;border:1px solid transparent;flex-shrink:0;transition:background-color .2s ease}.toolbar .styling-dropdown .styling-dropdown-content .format-button .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button mat-icon{display:flex;align-items:center;justify-content:center;margin-right:0;font-size:24px;line-height:1;color:#4b4f62;transition:none;width:24px;height:24px}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover{background-color:#d3d3d380!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover.active mat-icon,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button.active mat-icon,.toolbar .styling-dropdown .styling-dropdown-content .format-button .active-icon{color:#37c1ce}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active{color:#37c1ce}.toolbar .text-formatting-dropdown{position:relative;display:inline-block;cursor:pointer;z-index:1000}.toolbar .text-formatting-dropdown .text-formatting-text{color:#4b4f62;font-weight:400;padding:4px;border-radius:4px;transition:background-color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-text:hover{color:#4b4f62!important;background-color:#d3d3d380!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content{position:absolute;bottom:100%;left:0;background-color:#ecedf1;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;min-width:auto;padding:8px;margin-bottom:6px;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap;align-items:center}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button{justify-content:center;width:24px;min-width:24px;height:24px;padding:0;border-radius:4px;flex-shrink:0;white-space:nowrap;background-color:transparent;border:1px solid transparent;transition:background-color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button mat-icon{display:flex;align-items:center;justify-content:center;margin-right:0;font-size:18px;line-height:1;color:#4b4f62;transition:none;width:18px;height:18px}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover{background-color:#d3d3d380!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover.active mat-icon,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active mat-icon,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .active-icon{color:#37c1ce}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active{color:#37c1ce}.toolbar .history-controls{display:flex;align-items:center;gap:8px}.toolbar .apply-ai-button{margin-left:auto}.editor-content{max-width:100%;min-height:100px;padding:12px 16px;background-color:#f7f9fe;outline:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.6;color:#4b4f62;overflow-y:auto;border:1px solid #ccc;border-top:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px;max-height:60vh}.editor-content:focus{background-color:#f7f9fe}.editor-content:focus-visible{outline:none!important}.editor-content:empty:before{content:\"Start typing here...\";color:#adb5bd;font-style:italic}.editor-content p{margin:0 0 12px}.editor-content p:last-child{margin-bottom:0}.editor-content b,.editor-content strong{font-weight:600;color:#2c3e50}.editor-content i,.editor-content em{font-style:italic;color:#34495e}.editor-content u,.editor-content ins{text-decoration:underline;text-decoration-color:#000;text-decoration-thickness:2px}.editor-content *::selection{background-color:#37c1ce33}.editor-content table{border-collapse:collapse;width:100%;margin:10px 0;background-color:#f7f9fe;table-layout:fixed}.editor-content table td,.editor-content table th{border:1px solid #ccc;padding:8px;text-align:left;vertical-align:top;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;max-width:0;background-color:#f7f9fe}.editor-content table th{background-color:#f7f9fe;font-weight:600}.tag-hierarchy{padding:5px;border-top:none;background-color:#f9f9f9;height:25px;border:1px solid #ccc}.cdk-overlay-pane{width:fit-content!important;min-width:fit-content!important;transform:translate(0)!important}.mat-select-panel{width:fit-content!important;min-width:fit-content!important}\n"] }]
+            args: [{ selector: 'app-custom-editor', standalone: true, imports: [CommonModule, TableComponent, MatTooltipModule, MatIconModule, ButtonComponent], encapsulation: ViewEncapsulation.None, template: "<!-- Editor Labels Section -->\n<div class=\"editor-labels\" *ngIf=\"showLabels\">\n  <div class=\"left-label\">{{ leftLabelText }}</div>\n  <div class=\"right-label\">{{ rightLabelText }}</div>\n</div>\n<div class=\"editor-container\" #editorContainer>\n  <!-- Toolbar Section -->\n  <div class=\"toolbar\">\n    <!-- Styling Dropdown (Small Screens Only) -->\n    <div class=\"styling-dropdown\" *ngIf=\"isSmallScreen\">\n      <span class=\"styling-text\" (mouseenter)=\"showStylingDropdownOnHover()\" (mouseleave)=\"hideStylingDropdown()\">\n        Styling\n      </span>\n\n      <div class=\"styling-dropdown-content\" *ngIf=\"showStylingDropdown\" (mouseenter)=\"clearStylingDropdownTimeout()\"\n        (mouseleave)=\"hideStylingDropdown()\">\n        <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n          (click)=\"execCmd($event, item.command)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n          matTooltipPosition=\"above\">\n          <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n            [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n          <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n            {{ item.icon }}\n          </span>\n        </button>\n      </div>\n    </div>\n\n    <!-- Individual Styling Buttons (Large Containers Only) -->\n    <ng-container *ngIf=\"!isSmallScreen\">\n      <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n        (click)=\"execCmd($event, item.command)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n        matTooltipPosition=\"above\">\n        <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n          [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n        <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n          {{ item.icon }}\n        </span>\n      </button>\n    </ng-container>\n\n    <!-- Text Formatting Dropdown (Small Screens Only) -->\n    <div class=\"text-formatting-dropdown\" *ngIf=\"isSmallScreen\">\n      <span class=\"text-formatting-text\" (mouseenter)=\"showTextFormattingDropdownOnHover()\"\n        (mouseleave)=\"hideTextFormattingDropdown()\">\n        Text Formatting\n      </span>\n\n      <div class=\"text-formatting-dropdown-content\" *ngIf=\"showTextFormattingDropdown\"\n        (mouseenter)=\"clearTextFormattingDropdownTimeout()\" (mouseleave)=\"hideTextFormattingDropdown()\">\n\n        <!-- Text Formatting Buttons -->\n        <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\"\n          [class.active]=\"getActiveState(item.type)\" (click)=\"handleTextFormattingClick($event, item)\"\n          [title]=\"item.title\" type=\"button\">\n          <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n            [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n          <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n            {{ item.icon }}\n          </span>\n        </button>\n\n        <!-- Table Component (Small Screens Only) -->\n        <app-table *ngIf=\"showTable\" [getEditorElement]=\"getBoundGetEditorElement()\"\n          [saveHistoryMethod]=\"getBoundSaveHistory()\" [textChangeMethod]=\"getBoundTextChange()\">\n        </app-table>\n\n        <!-- Auto Bullet Button -->\n        <button *ngIf=\"autobullet\" class=\"auto-bullet\" mat-flat-button (click)=\"$event.stopPropagation(); useAutoBullet($event)\"\n          [disabled]=\"autoBulletDisable || isLoadingAI || !checkHtmlContent('')\">\n          {{ AutoBulletButton }}\n        </button>\n\n        <!-- Bullet Skill Button -->\n        <button *ngIf=\"skillsBullet\" class=\"bullet-skill\" mat-flat-button\n          (click)=\"$event.stopPropagation(); transformToSkillsBullets()\" [disabled]=\"isDisabled || isLoadingAI\">\n          {{ skillsButton }}\n        </button>\n      </div>\n    </div>\n\n    <!-- Individual Text Formatting Buttons (Large Containers Only) -->\n    <ng-container *ngIf=\"!isSmallScreen\">\n      <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n        (onClick)=\"handleTextFormattingClick($event, item)\" [title]=\"item.title\" type=\"button\" [matTooltip]=\"item.title\"\n        matTooltipPosition=\"above\">\n        <mat-icon *ngIf=\"isSvgIcon(item.icon)\" [svgIcon]=\"item.icon\"\n          [class.active-icon]=\"getActiveState(item.type)\"></mat-icon>\n        <span *ngIf=\"!isSvgIcon(item.icon)\" class=\"material-icons\" [class.active-icon]=\"getActiveState(item.type)\">\n          {{ item.icon }}\n        </span>\n      </button>\n    </ng-container>\n\n    <!-- Table Component (Large Screens Only) -->\n    <app-table *ngIf=\"showTable && !isSmallScreen\" [getEditorElement]=\"getBoundGetEditorElement()\"\n      [saveHistoryMethod]=\"getBoundSaveHistory()\" [textChangeMethod]=\"getBoundTextChange()\" matTooltip=\"Table\"\n      matTooltipPosition=\"above\">\n    </app-table>\n\n    <!-- Auto Bullet Button (Large Screens Only) -->\n    <button *ngIf=\"autobullet && !isSmallScreen\" class=\"auto-bullet\" mat-flat-button\n      (click)=\"$event.stopPropagation(); useAutoBullet($event)\" [disabled]=\"autoBulletDisable || isLoadingAI || !checkHtmlContent('')\">\n      {{ AutoBulletButton }}\n    </button>\n\n    <!-- Bullet Skill Button (Large Screens Only) -->\n    <button *ngIf=\"skillsBullet && !isSmallScreen\" class=\"bullet-skill\" mat-flat-button\n      (click)=\"$event.stopPropagation(); transformToSkillsBullets($event)\" [disabled]=\"isDisabled || isLoadingAI\">\n      {{ skillsButton }}\n    </button>\n\n    <!-- History Controls (Undo/Redo) -->\n    <div *ngIf=\"historyControls\" class=\"history-controls\">\n      <!-- Undo Button -->\n      <button class=\"format-button\" (onClick)=\"execCmd($event, 'undo')\" title=\"Undo\" type=\"button\" matTooltip=\"Undo\"\n        matTooltipPosition=\"above\">\n        <span class=\"material-icons\" [class.active-icon]=\"getActiveState('undo')\">\n          undo\n        </span>\n      </button>\n\n      <!-- Redo Button -->\n      <button class=\"format-button\" (clionClickck)=\"execCmd($event, 'redo')\" title=\"Redo\" type=\"button\" matTooltip=\"Redo\"\n        matTooltipPosition=\"above\">\n        <span class=\"material-icons\" [class.active-icon]=\"getActiveState('redo')\">\n          redo\n        </span>\n      </button>\n    </div>\n\n    <!-- Apply AI Button -->\n    <al-button class=\"apply-ai-button\" *ngIf=\"showAIButton\" [labelText]=\"ApplyAiButton\" [buttonType]=\"'icon-label'\"\n      [color]=\"'gradient'\" [size]=\"'xs'\" [disabled]=\"isLoadingAI\" (onClick)=\"useAITool($event)\"\n      [tooltip]=\"ApplyAiButton\" [tooltipPosition]=\"'above'\">\n    </al-button>\n\n  </div>\n\n  <!-- Editor Content Area -->\n  <div class=\"editor-content\" #editorReference contenteditable=\"true\" [id]=\"editorId\" (click)=\"updateTagHierarchy()\"\n    (input)=\"onEditorInput()\" (paste)=\"handlePaste($event)\" (keydown)=\"handleKeydown($event)\"\n    (click)=\"toggleDiv($event, true)\" spellcheck=\"false\" role=\"textbox\" aria-label=\"Rich text editor\"\n    aria-multiline=\"true\" [attr.data-testid]=\"dataTestId\">\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"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\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large,.toolbar .text-formatting-dropdown .text-formatting-text,.toolbar .styling-dropdown .styling-text,.editor-labels .left-label{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small,.editor-labels .right-label{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}.editor-labels{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 4px}.editor-labels .left-label{color:#4b4f62}.editor-labels .right-label{color:var(--Greys-500, #A2A6B8);text-align:right}.editor-container{width:100%;max-width:100%;display:block;border-radius:10px;overflow:visible;box-sizing:border-box;position:relative}.editor-container img{-webkit-user-drag:none;user-drag:none;pointer-events:auto}.toolbar{display:flex;align-items:center;background-color:#fafbfb;border:1px solid #C3C5D1;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:1px solid #C3C5D1;gap:12px;padding:12px 16px;overflow:visible;position:relative;z-index:1}.toolbar .format-button{display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;border-radius:6px;cursor:pointer;transition:background-color .2s ease;padding:0;position:relative;width:24px;min-width:24px;height:24px}.toolbar .format-button .material-icons,.toolbar .format-button mat-icon{display:flex;align-items:center;justify-content:center;font-size:20px;line-height:20px;color:#4b4f62;transition:none;width:20px;height:20px;box-sizing:border-box}.toolbar .format-button .format-button .material-icons{transform:translateY(1px)}.toolbar .format-button.active .material-icons,.toolbar .format-button.active mat-icon,.toolbar .format-button .active-icon{color:#37c1ce}.toolbar .format-button:hover{background-color:#d3d3d380!important}.toolbar .format-button:hover .material-icons,.toolbar .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .format-button:hover.active .material-icons,.toolbar .format-button:hover.active mat-icon,.toolbar .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .format-button:active{transform:translateY(0);box-shadow:0 1px 2px #0000001a}.toolbar .format-button.active{color:#37c1ce}.toolbar .format-button svg{pointer-events:none;transition:fill .2s ease}.toolbar .auto-bullet,.toolbar .bullet-skill{display:flex;align-items:center;justify-content:center;border:1px solid #383B4A;background-color:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;padding:6px 12px;height:28px;font-size:12px;font-weight:400;color:#383b4a;letter-spacing:.4px}.toolbar .auto-bullet:hover,.toolbar .bullet-skill:hover{background-color:#e9ecef;border-color:#383b4a}.toolbar .auto-bullet:disabled,.toolbar .bullet-skill:disabled{opacity:.5;cursor:not-allowed}.toolbar .styling-dropdown{position:relative;display:inline-block;cursor:pointer;z-index:1000}.toolbar .styling-dropdown .styling-text{color:#4b4f62;font-weight:400;padding:4px;border-radius:4px;transition:background-color .2s ease}.toolbar .styling-dropdown .styling-text:hover{color:#4b4f62!important;background-color:#d3d3d380!important}.toolbar .styling-dropdown .styling-dropdown-content{position:absolute;bottom:100%;left:0;background-color:#ecedf1;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap}.toolbar .styling-dropdown .styling-dropdown-content .format-button{justify-content:center;width:24px;min-width:24px;height:24px;padding:0;border-radius:4px;background-color:transparent;border:1px solid transparent;flex-shrink:0;transition:background-color .2s ease}.toolbar .styling-dropdown .styling-dropdown-content .format-button .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button mat-icon{display:flex;align-items:center;justify-content:center;margin-right:0;font-size:24px;line-height:1;color:#4b4f62;transition:none;width:24px;height:24px}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover{background-color:#d3d3d380!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover.active mat-icon,.toolbar .styling-dropdown .styling-dropdown-content .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button.active mat-icon,.toolbar .styling-dropdown .styling-dropdown-content .format-button .active-icon{color:#37c1ce}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active{color:#37c1ce}.toolbar .text-formatting-dropdown{position:relative;display:inline-block;cursor:pointer;z-index:1000}.toolbar .text-formatting-dropdown .text-formatting-text{color:#4b4f62;font-weight:400;padding:4px;border-radius:4px;transition:background-color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-text:hover{color:#4b4f62!important;background-color:#d3d3d380!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content{position:absolute;bottom:100%;left:0;background-color:#ecedf1;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;min-width:auto;padding:8px;margin-bottom:6px;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap;align-items:center}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button{justify-content:center;width:24px;min-width:24px;height:24px;padding:0;border-radius:4px;flex-shrink:0;white-space:nowrap;background-color:transparent;border:1px solid transparent;transition:background-color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button mat-icon{display:flex;align-items:center;justify-content:center;margin-right:0;font-size:18px;line-height:1;color:#4b4f62;transition:none;width:18px;height:18px}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover{background-color:#d3d3d380!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover mat-icon{color:#4b4f62!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover.active mat-icon,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button:hover .active-icon{color:#37c1ce!important}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active mat-icon,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .active-icon{color:#37c1ce}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active{color:#37c1ce}.toolbar .history-controls{display:flex;align-items:center;gap:8px}.toolbar .apply-ai-button{margin-left:auto}.editor-content{max-width:100%;min-height:100px;padding:12px 16px;background-color:#f7f9fe;outline:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.6;color:#4b4f62;overflow-y:auto;border:1px solid #ccc;border-top:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px;max-height:60vh}.editor-content:focus{background-color:#f7f9fe}.editor-content:focus-visible{outline:none!important}.editor-content:empty:before{content:\"Start typing here...\";color:#adb5bd;font-style:italic}.editor-content p{margin:0 0 12px}.editor-content p:last-child{margin-bottom:0}.editor-content b,.editor-content strong{font-weight:600;color:#2c3e50}.editor-content i,.editor-content em{font-style:italic;color:#34495e}.editor-content u,.editor-content ins{text-decoration:underline;text-decoration-color:#000;text-decoration-thickness:2px}.editor-content *::selection{background-color:#37c1ce33}.editor-content table{border-collapse:collapse;width:100%;margin:10px 0;background-color:#f7f9fe;table-layout:fixed}.editor-content table td,.editor-content table th{border:1px solid #ccc;padding:8px;text-align:left;vertical-align:top;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;max-width:0;background-color:#f7f9fe}.editor-content table th{background-color:#f7f9fe;font-weight:600}.tag-hierarchy{padding:5px;border-top:none;background-color:#f9f9f9;height:25px;border:1px solid #ccc}.mat-select-panel{width:fit-content!important;min-width:fit-content!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2, decorators: [{
                     type: Inject,
                     args: [Renderer2]
@@ -5260,9 +5416,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], textFormattingConfig: [{
                 type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ["click"]
             }] } });
 class CustomEditorModule {
@@ -6407,11 +6560,11 @@ class ResumeEntriesComponent {
         return this.reappliedEntries.has(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResumeEntriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResumeEntriesComponent, isStandalone: true, selector: "al-resume-entries", inputs: { 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", isCollapsed: "isCollapsed" }, outputs: { reapplyClick: "reapplyClick", undoClick: "undoClick" }, ngImport: i0, template: "<div class=\"resume-entries-container\">\n  <div *ngFor=\"let entry of entries; let i = index\" class=\"resume-entry\" [class.with-timeline]=\"showTimeline\"\n    [class.is-hidden]=\"isSectionHidden\">\n    <div *ngIf=\"showLoader && loaderForAllEntries\" class=\"entry-loader-container\"><al-loader [status]=\"loaderStatus\"\n        [size]=\"loaderSize\" [showText]=\"true\" [dataTestId]=\"'entry-' + i + '-loader'\"></al-loader></div><ng-container\n      *ngIf=\"!showLoader || !loaderForAllEntries\">\n      <div *ngIf=\"showTimeline\" class=\"timeline-indicator\">\n        <div class=\"timeline-dot\"></div>\n        <div class=\"timeline-line\"></div>\n      </div>\n      <div class=\"resume-entry-content\">\n        <div *ngIf=\"showHeader\" class=\"entry-header\">\n          <div class=\"header-left\">\n            <!-- Company / Institution: always on top, shows placeholder when no value -->\n            <div *ngIf=\"showCompany\" class=\"mobile-order-2\">\n              <lib-field-placeholder\n                [value]=\"entry.companyName?.trim() ? entry.companyName : (entry.institution?.trim() ? entry.institution : undefined)\"\n                [placeholder]=\"'Company Name / Institution'\" valueClass=\"font-text-lg-bold\"\n                [testId]=\"'entry-' + i + '-company'\" [compact]=\"true\"\n                [tooltip]=\"companyTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n            </div>\n\n            <!-- Job title / Course name: always below company line -->\n            <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\">\n              <lib-field-placeholder [value]=\"entry.jobTitle || entry.courseName\"\n                [placeholder]=\"'Job title / Course name'\" valueClass=\"font-title-text\"\n                [testId]=\"'entry-' + i + '-title'\" [compact]=\"true\"\n                [tooltip]=\"jobTitleTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n            </div>\n          </div>\n          <div class=\"header-right\">\n            <div class=\"date-range mobile-order-1\" *ngIf=\"showDates\">\n              <!-- Start Date: always render; show placeholder when no value -->\n              <lib-field-placeholder [value]=\"entry.startDate?.trim() ? entry.startDate : undefined\"\n                [placeholder]=\"'Start Date'\" valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-start-date'\"\n                [compact]=\"true\" [tooltip]=\"dateTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n\n              <span class=\"date-separator\">-</span>\n\n              <!-- End Date / Present: always render; show placeholder when no end date -->\n              <lib-field-placeholder [value]=\"entry.isPresent\n                           ? 'Present'\n                           : (entry.endDate?.trim() ? entry.endDate : undefined)\" [placeholder]=\"'End Date'\"\n                valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-end-date'\" [compact]=\"true\"\n                [tooltip]=\"dateTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n            </div>\n            <div class=\"location-row mobile-order-4\" *ngIf=\"showLocation\">\n              <lib-field-placeholder [value]=\"entry.city\" [placeholder]=\"'City'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-city'\" [compact]=\"true\"\n                [tooltip]=\"locationTooltip\" [tooltipPosition]=\"tooltipPosition\"></lib-field-placeholder>\n              <lib-field-placeholder [value]=\"entry.region\" [placeholder]=\"'Region'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-region'\" [compact]=\"true\"\n                [tooltip]=\"locationTooltip\" [tooltipPosition]=\"tooltipPosition\"></lib-field-placeholder>\n              <lib-field-placeholder [value]=\"entry.country\" [placeholder]=\"'Country'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-country'\" [compact]=\"true\"\n                [tooltip]=\"locationTooltip\" [tooltipPosition]=\"tooltipPosition\"></lib-field-placeholder>\n            </div>\n          </div>\n        </div>\n        <div class=\"descriptions-container\">\n          <div *ngIf=\"showLoader && !loaderForAllEntries\" class=\"loader-container\">\n            <al-loader [status]=\"loaderStatus\" [size]=\"loaderSize\" [showText]=\"true\"\n              [dataTestId]=\"'entry-' + i + '-loader'\">\n            </al-loader>\n          </div>\n\n          <div *ngIf=\"!showLoader || loaderForAllEntries\">\n            <div *ngFor=\"let desc of entry.descriptions; let descIndex = index\" class=\"description-item\" [class.collapsed]=\"isCollapsed\">\n              <label *ngIf=\"showDescriptionLabel\" class=\"description-label\">Description</label>\n              <lib-field-placeholder [value]=\"desc\" [placeholder]=\"'Missing item'\" [padded]=\"true\"\n                valueClass=\"font-text-base\" [testId]=\"'entry-' + i + '-desc-' + descIndex\"\n                [tooltip]=\"descriptionTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n            </div>\n          </div>\n          <div class=\"reapply-button-container\" *ngIf=\"showReapplyButton\"><al-button *ngIf=\"!isReapplied(i)\"\n              [label]=\"'Re-apply'\" [buttonType]=\"'icon-label'\" [leftIcon]=\"'refresh'\" [category]=\"'gradient'\"\n              [size]=\"'xs'\" [dataTestId]=\"'entry-' + i + '-reapply'\"\n              (onClick)=\"onReapplyClick(entry, i)\"></al-button><al-button *ngIf=\"isReapplied(i)\" [label]=\"'Undo'\"\n              [buttonType]=\"'icon-label'\" [leftIcon]=\"'undo'\" [category]=\"'grey'\" [size]=\"'xs'\"\n              [dataTestId]=\"'entry-' + i + '-undo'\" (onClick)=\"onUndoClick(entry, i)\"></al-button></div>\n          <hr *ngIf=\"i < entries.length - 1\" class=\"entry-separator\" [class.with-timeline-separator]=\"showTimeline\" />\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"resume-entry-projection\"><ng-content></ng-content></div>\n  <div *ngIf=\"skills && skills.length > 0\" class=\"skill-section-common\">\n    <div class=\"skill-list-items\">\n      <ul>\n        <li *ngFor=\"let skill of skills\" class=\"list-items\">{{ skill }}</li>\n      </ul>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"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\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.resume-entries-container{display:flex;flex-direction:column;width:100%;background-color:#fff;container-type:inline-size;container-name:resume-entries}.resume-entry{display:flex;flex-direction:column;width:100%;position:relative;cursor:pointer}.resume-entry.is-hidden{opacity:.3}.resume-entry.is-hidden .description-item ::ng-deep .value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.resume-entry.with-timeline{display:flex;flex-direction:row;flex-wrap:nowrap;gap:12px;position:relative}.resume-entry.with-timeline .entry-separator{flex-basis:100%;order:10}.resume-entry.with-timeline .timeline-indicator{z-index:0}.resume-entry.with-timeline .resume-entry-content{flex:1;min-width:0}.resume-entry-content{display:flex;flex-direction:column;flex:1;width:100%;gap:12px;padding-top:8px}.timeline-indicator{display:flex;padding:12px 0 0 8px;flex-direction:column;align-items:center;align-self:stretch;position:relative;flex-shrink:0;width:20px;min-width:20px;max-width:20px}.timeline-dot{width:10px;height:10px;border-radius:50%;background-color:#bbc7f6;z-index:1;flex-shrink:0}.timeline-line{width:2px;flex:1;background-color:#bbc7f6;min-height:calc(100% - 14px)}.entry-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.header-left{display:flex;flex-direction:column;gap:4px;flex:1}.mobile-order-2,.mobile-order-3{min-height:28px}.mobile-order-2 ::ng-deep lib-field-placeholder .value-text,.mobile-order-2 ::ng-deep lib-field-placeholder .placeholder-text,.mobile-order-3 ::ng-deep lib-field-placeholder .value-text,.mobile-order-3 ::ng-deep lib-field-placeholder .placeholder-text{white-space:normal;word-wrap:break-word}.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}@container resume-entries (max-width: 400px){.mobile-order-1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mobile-order-1.date-range ::ng-deep lib-field-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-1.date-range ::ng-deep lib-field-placeholder .value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-4{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mobile-order-4.location-row ::ng-deep lib-field-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-4.location-row ::ng-deep lib-field-placeholder .value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}}@container resume-entries (max-width: 500px){.entry-header{flex-direction:column;gap:4px;display:flex}.header-left,.header-right{display:contents}.entry-header .mobile-order-1{order:1}.entry-header .mobile-order-2{order:2}.entry-header .mobile-order-3{order:3}.entry-header .mobile-order-4{order:4}.mobile-order-1,.mobile-order-2,.mobile-order-3,.mobile-order-4{width:100%}.date-range{align-items:flex-start;flex-wrap:nowrap}.location-row{align-items:flex-start}}@media (max-width: 767px){.entry-header{flex-direction:column;gap:4px;display:flex}.header-left,.header-right{display:contents}.entry-header .mobile-order-1{order:1}.entry-header .mobile-order-2{order:2}.entry-header .mobile-order-3{order:3}.entry-header .mobile-order-4{order:4}.mobile-order-1,.mobile-order-2,.mobile-order-3,.mobile-order-4{width:100%}.date-range{align-items:flex-start;flex-wrap:nowrap}.location-row{align-items:flex-start}}.date-range{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px}.date-range ::ng-deep lib-field-placeholder .value-text,.date-range ::ng-deep lib-field-placeholder .placeholder-text{white-space:nowrap}.location-row{display:flex;flex-direction:row;align-items:center;gap:4px}.date-separator{color:#666;font-weight:500;font-size:16px}.date-icon{color:#94a3b8;font-size:14px;margin-left:4px}.descriptions-container{display:flex;flex-direction:column;gap:8px}.description-item{display:flex;flex-direction:column;gap:4px}.description-item.collapsed .value-text{display:-webkit-box!important;-webkit-line-clamp:1!important;line-clamp:1!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:normal!important}.description-label{color:#a2a6b8;font-family:Roboto,sans-serif;font-size:12px;font-style:normal;font-weight:400;letter-spacing:.06px;padding-top:4px;line-height:10px}.content-right{display:flex;flex-direction:row;gap:8px;align-items:flex-start;flex-wrap:wrap}.resume-entry-projection{display:block;width:100%}.reapply-button-container{display:flex;justify-content:flex-end;align-items:center}.loader-container{display:flex;justify-content:center;align-items:center;padding:24px 0;min-height:80px}.entry-loader-container{display:flex;justify-content:center;align-items:center;width:100%}.entry-separator{border:none;border-top:1px solid #E5E9FC;margin-top:0;margin-bottom:0;width:100%;height:0;display:block;clear:both;flex-shrink:0}.skill-section-common{padding:8px 0 20px}.skill-section-common .ai_skill_summary{margin-top:8px}.skill-section-common .list-items{font-weight:400;font-size:15px;font-style:normal;letter-spacing:.15px;font-family:Roboto,sans-serif;color:#717793}.skill-section-common p,.skill-section-common .suggestion-container{margin:12px 0}.skill-section-common p.skill-list-items{width:100%}.skill-section-common .skill-list-items ul{padding:0;display:flex;flex-wrap:wrap}.skill-section-common .skill-list-items ul li{margin-left:24px;margin-right:24px;height:24px;text-align:left;max-width:200px;min-width:200px;overflow-y:clip;text-overflow:ellipsis;white-space:nowrap}.skill-section-common .skill-list-items table p{margin:0!important}.skill-section-common .skill-list-items table ul{padding:0;display:flex;flex-direction:column}.skill-section-common .skill-list-items table ul li{margin-left:24px;text-align:left;max-width:100%;white-space:break-spaces!important;word-break:break-word}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldPlaceholderComponent, selector: "lib-field-placeholder", inputs: ["value", "placeholder", "tooltip", "tooltipPosition", "testId", "valueClass", "placeholderClass", "icon", "iconAlt", "iconFont", "compact", "padded"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }, { kind: "component", type: LoaderComponent, selector: "al-loader", inputs: ["dataTestId", "status", "customText", "showText", "size", "autoLoop", "loopDuration", "customTexts", "completeOnDone"] }, { kind: "ngmodule", type: MatTooltipModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResumeEntriesComponent, isStandalone: true, selector: "al-resume-entries", inputs: { 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", isCollapsed: "isCollapsed" }, outputs: { reapplyClick: "reapplyClick", undoClick: "undoClick" }, ngImport: i0, template: "<div class=\"resume-entries-container\">\n  <div *ngFor=\"let entry of entries; let i = index\" class=\"resume-entry\" [class.with-timeline]=\"showTimeline\"\n    [class.is-hidden]=\"isSectionHidden\">\n    <div *ngIf=\"showLoader && loaderForAllEntries\" class=\"entry-loader-container\"><al-loader [status]=\"loaderStatus\"\n        [size]=\"loaderSize\" [showText]=\"true\" [dataTestId]=\"'entry-' + i + '-loader'\"></al-loader></div><ng-container\n      *ngIf=\"!showLoader || !loaderForAllEntries\">\n      <div *ngIf=\"showTimeline\" class=\"timeline-indicator\">\n        <div class=\"timeline-dot\"></div>\n        <div class=\"timeline-line\"></div>\n      </div>\n      <div class=\"resume-entry-content\">\n        <div *ngIf=\"showHeader\" class=\"entry-header\">\n          <div class=\"header-left\">\n            <!-- Company / Institution: always on top, shows placeholder when no value -->\n            <div *ngIf=\"showCompany\" class=\"mobile-order-2\">\n              <lib-field-placeholder\n                [value]=\"entry.companyName?.trim() ? entry.companyName : (entry.institution?.trim() ? entry.institution : undefined)\"\n                [placeholder]=\"'Company Name / Institution'\" valueClass=\"font-text-lg-bold\"\n                [testId]=\"'entry-' + i + '-company'\" [compact]=\"true\"\n                [tooltip]=\"companyTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n            </div>\n\n            <!-- Job title / Course name: always below company line -->\n            <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\">\n              <lib-field-placeholder [value]=\"entry.jobTitle || entry.courseName\"\n                [placeholder]=\"'Job title / Course name'\" valueClass=\"font-title-text\"\n                [testId]=\"'entry-' + i + '-title'\" [compact]=\"true\"\n                [tooltip]=\"jobTitleTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n            </div>\n          </div>\n          <div class=\"header-right\">\n            <div class=\"date-range mobile-order-1\" *ngIf=\"showDates\">\n              <!-- Start Date: always render; show placeholder when no value -->\n              <lib-field-placeholder [value]=\"entry.startDate?.trim() ? entry.startDate : undefined\"\n                [placeholder]=\"'Start Date'\" valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-start-date'\"\n                [compact]=\"true\" [tooltip]=\"dateTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n\n              <span class=\"date-separator\">-</span>\n\n              <!-- End Date / Present: always render; show placeholder when no end date -->\n              <lib-field-placeholder [value]=\"entry.isPresent\n                           ? 'Present'\n                           : (entry.endDate?.trim() ? entry.endDate : undefined)\" [placeholder]=\"'End Date'\"\n                valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-end-date'\" [compact]=\"true\"\n                [tooltip]=\"dateTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n            </div>\n            <div class=\"location-row mobile-order-4\" *ngIf=\"showLocation\">\n              <lib-field-placeholder [value]=\"entry.city\" [placeholder]=\"'City'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-city'\" [compact]=\"true\"\n                [tooltip]=\"locationTooltip\" [tooltipPosition]=\"tooltipPosition\"></lib-field-placeholder>\n              <lib-field-placeholder [value]=\"entry.region\" [placeholder]=\"'Region'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-region'\" [compact]=\"true\"\n                [tooltip]=\"locationTooltip\" [tooltipPosition]=\"tooltipPosition\"></lib-field-placeholder>\n              <lib-field-placeholder [value]=\"entry.country\" [placeholder]=\"'Country'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-country'\" [compact]=\"true\"\n                [tooltip]=\"locationTooltip\" [tooltipPosition]=\"tooltipPosition\"></lib-field-placeholder>\n            </div>\n          </div>\n        </div>\n        <div class=\"descriptions-container\">\n          <div *ngIf=\"showLoader && !loaderForAllEntries\" class=\"loader-container\">\n            <al-loader [status]=\"loaderStatus\" [size]=\"loaderSize\" [showText]=\"true\"\n              [dataTestId]=\"'entry-' + i + '-loader'\">\n            </al-loader>\n          </div>\n\n          <div *ngIf=\"!showLoader || loaderForAllEntries\">\n            <div *ngFor=\"let desc of entry.descriptions; let descIndex = index\" class=\"description-item\" [class.collapsed]=\"isCollapsed\">\n              <label *ngIf=\"showDescriptionLabel\" class=\"description-label\">Description</label>\n              <lib-field-placeholder [value]=\"desc\" [placeholder]=\"'Missing item'\" [padded]=\"true\"\n                valueClass=\"font-text-base\" [testId]=\"'entry-' + i + '-desc-' + descIndex\"\n                [tooltip]=\"descriptionTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n            </div>\n          </div>\n          <div class=\"reapply-button-container\" *ngIf=\"showReapplyButton\"><al-button *ngIf=\"!isReapplied(i)\"\n              [label]=\"'Re-apply'\" [buttonType]=\"'icon-label'\" [leftIcon]=\"'refresh'\" [category]=\"'gradient'\"\n              [size]=\"'xs'\" [dataTestId]=\"'entry-' + i + '-reapply'\"\n              (onClick)=\"onReapplyClick(entry, i)\"></al-button><al-button *ngIf=\"isReapplied(i)\" [label]=\"'Undo'\"\n              [buttonType]=\"'icon-label'\" [leftIcon]=\"'undo'\" [category]=\"'grey'\" [size]=\"'xs'\"\n              [dataTestId]=\"'entry-' + i + '-undo'\" (onClick)=\"onUndoClick(entry, i)\"></al-button></div>\n          <hr *ngIf=\"i < entries.length - 1\" class=\"entry-separator\" [class.with-timeline-separator]=\"showTimeline\" />\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"resume-entry-projection\"><ng-content></ng-content></div>\n  <div *ngIf=\"skills && skills.length > 0\" class=\"skill-section-common\">\n    <div class=\"skill-list-items\">\n      <ul>\n        <li *ngFor=\"let skill of skills\" class=\"list-items\">{{ skill }}</li>\n      </ul>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"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\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.resume-entries-container{display:flex;flex-direction:column;width:100%;background-color:#fff;container-type:inline-size;container-name:resume-entries}.resume-entry{display:flex;flex-direction:column;width:100%;position:relative;cursor:pointer}.resume-entry.is-hidden{opacity:.3}.resume-entry.is-hidden .description-item ::ng-deep .value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.resume-entry.with-timeline{display:flex;flex-direction:row;flex-wrap:nowrap;gap:12px;position:relative}.resume-entry.with-timeline .entry-separator{flex-basis:100%;order:10}.resume-entry.with-timeline .timeline-indicator{z-index:0}.resume-entry.with-timeline .resume-entry-content{flex:1;min-width:0}.resume-entry-content{display:flex;flex-direction:column;flex:1;width:100%;gap:12px;padding-top:4px}.timeline-indicator{display:flex;padding:12px 0 0 8px;flex-direction:column;align-items:center;align-self:stretch;position:relative;flex-shrink:0;width:20px;min-width:20px;max-width:20px}.timeline-dot{width:10px;height:10px;border-radius:50%;background-color:#bbc7f6;z-index:1;flex-shrink:0}.timeline-line{width:2px;flex:1;background-color:#bbc7f6;min-height:calc(100% - 14px)}.entry-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.header-left{display:flex;flex-direction:column;gap:4px;flex:1}.mobile-order-2,.mobile-order-3{min-height:28px}.mobile-order-2 ::ng-deep lib-field-placeholder .value-text,.mobile-order-2 ::ng-deep lib-field-placeholder .placeholder-text,.mobile-order-3 ::ng-deep lib-field-placeholder .value-text,.mobile-order-3 ::ng-deep lib-field-placeholder .placeholder-text{white-space:normal;word-wrap:break-word}.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}@container resume-entries (max-width: 400px){.mobile-order-1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mobile-order-1.date-range ::ng-deep lib-field-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-1.date-range ::ng-deep lib-field-placeholder .value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-4{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mobile-order-4.location-row ::ng-deep lib-field-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-4.location-row ::ng-deep lib-field-placeholder .value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}}@container resume-entries (max-width: 500px){.entry-header{flex-direction:column;gap:4px;display:flex}.header-left,.header-right{display:contents}.entry-header .mobile-order-1{order:1}.entry-header .mobile-order-2{order:2}.entry-header .mobile-order-3{order:3}.entry-header .mobile-order-4{order:4}.mobile-order-1,.mobile-order-2,.mobile-order-3,.mobile-order-4{width:100%}.date-range{align-items:flex-start;flex-wrap:nowrap}.location-row{align-items:flex-start}}@media (max-width: 767px){.entry-header{flex-direction:column;gap:4px;display:flex}.header-left,.header-right{display:contents}.entry-header .mobile-order-1{order:1}.entry-header .mobile-order-2{order:2}.entry-header .mobile-order-3{order:3}.entry-header .mobile-order-4{order:4}.mobile-order-1,.mobile-order-2,.mobile-order-3,.mobile-order-4{width:100%}.date-range{align-items:flex-start;flex-wrap:nowrap}.location-row{align-items:flex-start}}.date-range{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px}.date-range ::ng-deep lib-field-placeholder .value-text,.date-range ::ng-deep lib-field-placeholder .placeholder-text{white-space:nowrap}.location-row{display:flex;flex-direction:row;align-items:center;gap:4px}.date-separator{color:#666;font-weight:500;font-size:16px}.date-icon{color:#94a3b8;font-size:14px;margin-left:4px}.descriptions-container{display:flex;flex-direction:column;gap:8px}.description-item{display:flex;flex-direction:column;gap:4px}.description-item.collapsed .value-text{display:-webkit-box!important;-webkit-line-clamp:1!important;line-clamp:1!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:normal!important}.description-label{color:#a2a6b8;font-family:Roboto,sans-serif;font-size:12px;font-style:normal;font-weight:400;letter-spacing:.06px;padding-top:4px;line-height:10px}.content-right{display:flex;flex-direction:row;gap:8px;align-items:flex-start;flex-wrap:wrap}.resume-entry-projection{display:block;width:100%}.reapply-button-container{display:flex;justify-content:flex-end;align-items:center}.loader-container{display:flex;justify-content:center;align-items:center;padding:24px 0;min-height:80px}.entry-loader-container{display:flex;justify-content:center;align-items:center;width:100%}.entry-separator{border:none;border-top:1px solid #E5E9FC;margin-top:0;margin-bottom:0;width:100%;height:0;display:block;clear:both;flex-shrink:0}.skill-section-common{padding:8px 0 20px}.skill-section-common .ai_skill_summary{margin-top:8px}.skill-section-common .list-items{font-weight:400;font-size:15px;font-style:normal;letter-spacing:.15px;font-family:Roboto,sans-serif;color:#717793}.skill-section-common p,.skill-section-common .suggestion-container{margin:12px 0}.skill-section-common p.skill-list-items{width:100%}.skill-section-common .skill-list-items ul{padding:0;display:flex;flex-wrap:wrap}.skill-section-common .skill-list-items ul li{margin-left:24px;margin-right:24px;height:24px;text-align:left;max-width:200px;min-width:200px;overflow-y:clip;text-overflow:ellipsis;white-space:nowrap}.skill-section-common .skill-list-items table p{margin:0!important}.skill-section-common .skill-list-items table ul{padding:0;display:flex;flex-direction:column}.skill-section-common .skill-list-items table ul li{margin-left:24px;text-align:left;max-width:100%;white-space:break-spaces!important;word-break:break-word}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldPlaceholderComponent, selector: "lib-field-placeholder", inputs: ["value", "placeholder", "tooltip", "tooltipPosition", "testId", "valueClass", "placeholderClass", "icon", "iconAlt", "iconFont", "compact", "padded"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }, { kind: "component", type: LoaderComponent, selector: "al-loader", inputs: ["dataTestId", "status", "customText", "showText", "size", "autoLoop", "loopDuration", "customTexts", "completeOnDone"] }, { kind: "ngmodule", type: MatTooltipModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResumeEntriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'al-resume-entries', standalone: true, imports: [CommonModule, FieldPlaceholderComponent, ButtonComponent, LoaderComponent, MatTooltipModule], template: "<div class=\"resume-entries-container\">\n  <div *ngFor=\"let entry of entries; let i = index\" class=\"resume-entry\" [class.with-timeline]=\"showTimeline\"\n    [class.is-hidden]=\"isSectionHidden\">\n    <div *ngIf=\"showLoader && loaderForAllEntries\" class=\"entry-loader-container\"><al-loader [status]=\"loaderStatus\"\n        [size]=\"loaderSize\" [showText]=\"true\" [dataTestId]=\"'entry-' + i + '-loader'\"></al-loader></div><ng-container\n      *ngIf=\"!showLoader || !loaderForAllEntries\">\n      <div *ngIf=\"showTimeline\" class=\"timeline-indicator\">\n        <div class=\"timeline-dot\"></div>\n        <div class=\"timeline-line\"></div>\n      </div>\n      <div class=\"resume-entry-content\">\n        <div *ngIf=\"showHeader\" class=\"entry-header\">\n          <div class=\"header-left\">\n            <!-- Company / Institution: always on top, shows placeholder when no value -->\n            <div *ngIf=\"showCompany\" class=\"mobile-order-2\">\n              <lib-field-placeholder\n                [value]=\"entry.companyName?.trim() ? entry.companyName : (entry.institution?.trim() ? entry.institution : undefined)\"\n                [placeholder]=\"'Company Name / Institution'\" valueClass=\"font-text-lg-bold\"\n                [testId]=\"'entry-' + i + '-company'\" [compact]=\"true\"\n                [tooltip]=\"companyTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n            </div>\n\n            <!-- Job title / Course name: always below company line -->\n            <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\">\n              <lib-field-placeholder [value]=\"entry.jobTitle || entry.courseName\"\n                [placeholder]=\"'Job title / Course name'\" valueClass=\"font-title-text\"\n                [testId]=\"'entry-' + i + '-title'\" [compact]=\"true\"\n                [tooltip]=\"jobTitleTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n            </div>\n          </div>\n          <div class=\"header-right\">\n            <div class=\"date-range mobile-order-1\" *ngIf=\"showDates\">\n              <!-- Start Date: always render; show placeholder when no value -->\n              <lib-field-placeholder [value]=\"entry.startDate?.trim() ? entry.startDate : undefined\"\n                [placeholder]=\"'Start Date'\" valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-start-date'\"\n                [compact]=\"true\" [tooltip]=\"dateTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n\n              <span class=\"date-separator\">-</span>\n\n              <!-- End Date / Present: always render; show placeholder when no end date -->\n              <lib-field-placeholder [value]=\"entry.isPresent\n                           ? 'Present'\n                           : (entry.endDate?.trim() ? entry.endDate : undefined)\" [placeholder]=\"'End Date'\"\n                valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-end-date'\" [compact]=\"true\"\n                [tooltip]=\"dateTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n            </div>\n            <div class=\"location-row mobile-order-4\" *ngIf=\"showLocation\">\n              <lib-field-placeholder [value]=\"entry.city\" [placeholder]=\"'City'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-city'\" [compact]=\"true\"\n                [tooltip]=\"locationTooltip\" [tooltipPosition]=\"tooltipPosition\"></lib-field-placeholder>\n              <lib-field-placeholder [value]=\"entry.region\" [placeholder]=\"'Region'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-region'\" [compact]=\"true\"\n                [tooltip]=\"locationTooltip\" [tooltipPosition]=\"tooltipPosition\"></lib-field-placeholder>\n              <lib-field-placeholder [value]=\"entry.country\" [placeholder]=\"'Country'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-country'\" [compact]=\"true\"\n                [tooltip]=\"locationTooltip\" [tooltipPosition]=\"tooltipPosition\"></lib-field-placeholder>\n            </div>\n          </div>\n        </div>\n        <div class=\"descriptions-container\">\n          <div *ngIf=\"showLoader && !loaderForAllEntries\" class=\"loader-container\">\n            <al-loader [status]=\"loaderStatus\" [size]=\"loaderSize\" [showText]=\"true\"\n              [dataTestId]=\"'entry-' + i + '-loader'\">\n            </al-loader>\n          </div>\n\n          <div *ngIf=\"!showLoader || loaderForAllEntries\">\n            <div *ngFor=\"let desc of entry.descriptions; let descIndex = index\" class=\"description-item\" [class.collapsed]=\"isCollapsed\">\n              <label *ngIf=\"showDescriptionLabel\" class=\"description-label\">Description</label>\n              <lib-field-placeholder [value]=\"desc\" [placeholder]=\"'Missing item'\" [padded]=\"true\"\n                valueClass=\"font-text-base\" [testId]=\"'entry-' + i + '-desc-' + descIndex\"\n                [tooltip]=\"descriptionTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n            </div>\n          </div>\n          <div class=\"reapply-button-container\" *ngIf=\"showReapplyButton\"><al-button *ngIf=\"!isReapplied(i)\"\n              [label]=\"'Re-apply'\" [buttonType]=\"'icon-label'\" [leftIcon]=\"'refresh'\" [category]=\"'gradient'\"\n              [size]=\"'xs'\" [dataTestId]=\"'entry-' + i + '-reapply'\"\n              (onClick)=\"onReapplyClick(entry, i)\"></al-button><al-button *ngIf=\"isReapplied(i)\" [label]=\"'Undo'\"\n              [buttonType]=\"'icon-label'\" [leftIcon]=\"'undo'\" [category]=\"'grey'\" [size]=\"'xs'\"\n              [dataTestId]=\"'entry-' + i + '-undo'\" (onClick)=\"onUndoClick(entry, i)\"></al-button></div>\n          <hr *ngIf=\"i < entries.length - 1\" class=\"entry-separator\" [class.with-timeline-separator]=\"showTimeline\" />\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"resume-entry-projection\"><ng-content></ng-content></div>\n  <div *ngIf=\"skills && skills.length > 0\" class=\"skill-section-common\">\n    <div class=\"skill-list-items\">\n      <ul>\n        <li *ngFor=\"let skill of skills\" class=\"list-items\">{{ skill }}</li>\n      </ul>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"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\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.resume-entries-container{display:flex;flex-direction:column;width:100%;background-color:#fff;container-type:inline-size;container-name:resume-entries}.resume-entry{display:flex;flex-direction:column;width:100%;position:relative;cursor:pointer}.resume-entry.is-hidden{opacity:.3}.resume-entry.is-hidden .description-item ::ng-deep .value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.resume-entry.with-timeline{display:flex;flex-direction:row;flex-wrap:nowrap;gap:12px;position:relative}.resume-entry.with-timeline .entry-separator{flex-basis:100%;order:10}.resume-entry.with-timeline .timeline-indicator{z-index:0}.resume-entry.with-timeline .resume-entry-content{flex:1;min-width:0}.resume-entry-content{display:flex;flex-direction:column;flex:1;width:100%;gap:12px;padding-top:8px}.timeline-indicator{display:flex;padding:12px 0 0 8px;flex-direction:column;align-items:center;align-self:stretch;position:relative;flex-shrink:0;width:20px;min-width:20px;max-width:20px}.timeline-dot{width:10px;height:10px;border-radius:50%;background-color:#bbc7f6;z-index:1;flex-shrink:0}.timeline-line{width:2px;flex:1;background-color:#bbc7f6;min-height:calc(100% - 14px)}.entry-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.header-left{display:flex;flex-direction:column;gap:4px;flex:1}.mobile-order-2,.mobile-order-3{min-height:28px}.mobile-order-2 ::ng-deep lib-field-placeholder .value-text,.mobile-order-2 ::ng-deep lib-field-placeholder .placeholder-text,.mobile-order-3 ::ng-deep lib-field-placeholder .value-text,.mobile-order-3 ::ng-deep lib-field-placeholder .placeholder-text{white-space:normal;word-wrap:break-word}.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}@container resume-entries (max-width: 400px){.mobile-order-1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mobile-order-1.date-range ::ng-deep lib-field-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-1.date-range ::ng-deep lib-field-placeholder .value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-4{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mobile-order-4.location-row ::ng-deep lib-field-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-4.location-row ::ng-deep lib-field-placeholder .value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}}@container resume-entries (max-width: 500px){.entry-header{flex-direction:column;gap:4px;display:flex}.header-left,.header-right{display:contents}.entry-header .mobile-order-1{order:1}.entry-header .mobile-order-2{order:2}.entry-header .mobile-order-3{order:3}.entry-header .mobile-order-4{order:4}.mobile-order-1,.mobile-order-2,.mobile-order-3,.mobile-order-4{width:100%}.date-range{align-items:flex-start;flex-wrap:nowrap}.location-row{align-items:flex-start}}@media (max-width: 767px){.entry-header{flex-direction:column;gap:4px;display:flex}.header-left,.header-right{display:contents}.entry-header .mobile-order-1{order:1}.entry-header .mobile-order-2{order:2}.entry-header .mobile-order-3{order:3}.entry-header .mobile-order-4{order:4}.mobile-order-1,.mobile-order-2,.mobile-order-3,.mobile-order-4{width:100%}.date-range{align-items:flex-start;flex-wrap:nowrap}.location-row{align-items:flex-start}}.date-range{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px}.date-range ::ng-deep lib-field-placeholder .value-text,.date-range ::ng-deep lib-field-placeholder .placeholder-text{white-space:nowrap}.location-row{display:flex;flex-direction:row;align-items:center;gap:4px}.date-separator{color:#666;font-weight:500;font-size:16px}.date-icon{color:#94a3b8;font-size:14px;margin-left:4px}.descriptions-container{display:flex;flex-direction:column;gap:8px}.description-item{display:flex;flex-direction:column;gap:4px}.description-item.collapsed .value-text{display:-webkit-box!important;-webkit-line-clamp:1!important;line-clamp:1!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:normal!important}.description-label{color:#a2a6b8;font-family:Roboto,sans-serif;font-size:12px;font-style:normal;font-weight:400;letter-spacing:.06px;padding-top:4px;line-height:10px}.content-right{display:flex;flex-direction:row;gap:8px;align-items:flex-start;flex-wrap:wrap}.resume-entry-projection{display:block;width:100%}.reapply-button-container{display:flex;justify-content:flex-end;align-items:center}.loader-container{display:flex;justify-content:center;align-items:center;padding:24px 0;min-height:80px}.entry-loader-container{display:flex;justify-content:center;align-items:center;width:100%}.entry-separator{border:none;border-top:1px solid #E5E9FC;margin-top:0;margin-bottom:0;width:100%;height:0;display:block;clear:both;flex-shrink:0}.skill-section-common{padding:8px 0 20px}.skill-section-common .ai_skill_summary{margin-top:8px}.skill-section-common .list-items{font-weight:400;font-size:15px;font-style:normal;letter-spacing:.15px;font-family:Roboto,sans-serif;color:#717793}.skill-section-common p,.skill-section-common .suggestion-container{margin:12px 0}.skill-section-common p.skill-list-items{width:100%}.skill-section-common .skill-list-items ul{padding:0;display:flex;flex-wrap:wrap}.skill-section-common .skill-list-items ul li{margin-left:24px;margin-right:24px;height:24px;text-align:left;max-width:200px;min-width:200px;overflow-y:clip;text-overflow:ellipsis;white-space:nowrap}.skill-section-common .skill-list-items table p{margin:0!important}.skill-section-common .skill-list-items table ul{padding:0;display:flex;flex-direction:column}.skill-section-common .skill-list-items table ul li{margin-left:24px;text-align:left;max-width:100%;white-space:break-spaces!important;word-break:break-word}\n"] }]
+            args: [{ selector: 'al-resume-entries', standalone: true, imports: [CommonModule, FieldPlaceholderComponent, ButtonComponent, LoaderComponent, MatTooltipModule], template: "<div class=\"resume-entries-container\">\n  <div *ngFor=\"let entry of entries; let i = index\" class=\"resume-entry\" [class.with-timeline]=\"showTimeline\"\n    [class.is-hidden]=\"isSectionHidden\">\n    <div *ngIf=\"showLoader && loaderForAllEntries\" class=\"entry-loader-container\"><al-loader [status]=\"loaderStatus\"\n        [size]=\"loaderSize\" [showText]=\"true\" [dataTestId]=\"'entry-' + i + '-loader'\"></al-loader></div><ng-container\n      *ngIf=\"!showLoader || !loaderForAllEntries\">\n      <div *ngIf=\"showTimeline\" class=\"timeline-indicator\">\n        <div class=\"timeline-dot\"></div>\n        <div class=\"timeline-line\"></div>\n      </div>\n      <div class=\"resume-entry-content\">\n        <div *ngIf=\"showHeader\" class=\"entry-header\">\n          <div class=\"header-left\">\n            <!-- Company / Institution: always on top, shows placeholder when no value -->\n            <div *ngIf=\"showCompany\" class=\"mobile-order-2\">\n              <lib-field-placeholder\n                [value]=\"entry.companyName?.trim() ? entry.companyName : (entry.institution?.trim() ? entry.institution : undefined)\"\n                [placeholder]=\"'Company Name / Institution'\" valueClass=\"font-text-lg-bold\"\n                [testId]=\"'entry-' + i + '-company'\" [compact]=\"true\"\n                [tooltip]=\"companyTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n            </div>\n\n            <!-- Job title / Course name: always below company line -->\n            <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\">\n              <lib-field-placeholder [value]=\"entry.jobTitle || entry.courseName\"\n                [placeholder]=\"'Job title / Course name'\" valueClass=\"font-title-text\"\n                [testId]=\"'entry-' + i + '-title'\" [compact]=\"true\"\n                [tooltip]=\"jobTitleTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n            </div>\n          </div>\n          <div class=\"header-right\">\n            <div class=\"date-range mobile-order-1\" *ngIf=\"showDates\">\n              <!-- Start Date: always render; show placeholder when no value -->\n              <lib-field-placeholder [value]=\"entry.startDate?.trim() ? entry.startDate : undefined\"\n                [placeholder]=\"'Start Date'\" valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-start-date'\"\n                [compact]=\"true\" [tooltip]=\"dateTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n\n              <span class=\"date-separator\">-</span>\n\n              <!-- End Date / Present: always render; show placeholder when no end date -->\n              <lib-field-placeholder [value]=\"entry.isPresent\n                           ? 'Present'\n                           : (entry.endDate?.trim() ? entry.endDate : undefined)\" [placeholder]=\"'End Date'\"\n                valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-end-date'\" [compact]=\"true\"\n                [tooltip]=\"dateTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n            </div>\n            <div class=\"location-row mobile-order-4\" *ngIf=\"showLocation\">\n              <lib-field-placeholder [value]=\"entry.city\" [placeholder]=\"'City'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-city'\" [compact]=\"true\"\n                [tooltip]=\"locationTooltip\" [tooltipPosition]=\"tooltipPosition\"></lib-field-placeholder>\n              <lib-field-placeholder [value]=\"entry.region\" [placeholder]=\"'Region'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-region'\" [compact]=\"true\"\n                [tooltip]=\"locationTooltip\" [tooltipPosition]=\"tooltipPosition\"></lib-field-placeholder>\n              <lib-field-placeholder [value]=\"entry.country\" [placeholder]=\"'Country'\" valueClass=\"font-location-text\"\n                [testId]=\"'entry-' + i + '-country'\" [compact]=\"true\"\n                [tooltip]=\"locationTooltip\" [tooltipPosition]=\"tooltipPosition\"></lib-field-placeholder>\n            </div>\n          </div>\n        </div>\n        <div class=\"descriptions-container\">\n          <div *ngIf=\"showLoader && !loaderForAllEntries\" class=\"loader-container\">\n            <al-loader [status]=\"loaderStatus\" [size]=\"loaderSize\" [showText]=\"true\"\n              [dataTestId]=\"'entry-' + i + '-loader'\">\n            </al-loader>\n          </div>\n\n          <div *ngIf=\"!showLoader || loaderForAllEntries\">\n            <div *ngFor=\"let desc of entry.descriptions; let descIndex = index\" class=\"description-item\" [class.collapsed]=\"isCollapsed\">\n              <label *ngIf=\"showDescriptionLabel\" class=\"description-label\">Description</label>\n              <lib-field-placeholder [value]=\"desc\" [placeholder]=\"'Missing item'\" [padded]=\"true\"\n                valueClass=\"font-text-base\" [testId]=\"'entry-' + i + '-desc-' + descIndex\"\n                [tooltip]=\"descriptionTooltip\" [tooltipPosition]=\"tooltipPosition\">\n              </lib-field-placeholder>\n            </div>\n          </div>\n          <div class=\"reapply-button-container\" *ngIf=\"showReapplyButton\"><al-button *ngIf=\"!isReapplied(i)\"\n              [label]=\"'Re-apply'\" [buttonType]=\"'icon-label'\" [leftIcon]=\"'refresh'\" [category]=\"'gradient'\"\n              [size]=\"'xs'\" [dataTestId]=\"'entry-' + i + '-reapply'\"\n              (onClick)=\"onReapplyClick(entry, i)\"></al-button><al-button *ngIf=\"isReapplied(i)\" [label]=\"'Undo'\"\n              [buttonType]=\"'icon-label'\" [leftIcon]=\"'undo'\" [category]=\"'grey'\" [size]=\"'xs'\"\n              [dataTestId]=\"'entry-' + i + '-undo'\" (onClick)=\"onUndoClick(entry, i)\"></al-button></div>\n          <hr *ngIf=\"i < entries.length - 1\" class=\"entry-separator\" [class.with-timeline-separator]=\"showTimeline\" />\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"resume-entry-projection\"><ng-content></ng-content></div>\n  <div *ngIf=\"skills && skills.length > 0\" class=\"skill-section-common\">\n    <div class=\"skill-list-items\">\n      <ul>\n        <li *ngFor=\"let skill of skills\" class=\"list-items\">{{ skill }}</li>\n      </ul>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"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\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.resume-entries-container{display:flex;flex-direction:column;width:100%;background-color:#fff;container-type:inline-size;container-name:resume-entries}.resume-entry{display:flex;flex-direction:column;width:100%;position:relative;cursor:pointer}.resume-entry.is-hidden{opacity:.3}.resume-entry.is-hidden .description-item ::ng-deep .value-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.resume-entry.with-timeline{display:flex;flex-direction:row;flex-wrap:nowrap;gap:12px;position:relative}.resume-entry.with-timeline .entry-separator{flex-basis:100%;order:10}.resume-entry.with-timeline .timeline-indicator{z-index:0}.resume-entry.with-timeline .resume-entry-content{flex:1;min-width:0}.resume-entry-content{display:flex;flex-direction:column;flex:1;width:100%;gap:12px;padding-top:4px}.timeline-indicator{display:flex;padding:12px 0 0 8px;flex-direction:column;align-items:center;align-self:stretch;position:relative;flex-shrink:0;width:20px;min-width:20px;max-width:20px}.timeline-dot{width:10px;height:10px;border-radius:50%;background-color:#bbc7f6;z-index:1;flex-shrink:0}.timeline-line{width:2px;flex:1;background-color:#bbc7f6;min-height:calc(100% - 14px)}.entry-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.header-left{display:flex;flex-direction:column;gap:4px;flex:1}.mobile-order-2,.mobile-order-3{min-height:28px}.mobile-order-2 ::ng-deep lib-field-placeholder .value-text,.mobile-order-2 ::ng-deep lib-field-placeholder .placeholder-text,.mobile-order-3 ::ng-deep lib-field-placeholder .value-text,.mobile-order-3 ::ng-deep lib-field-placeholder .placeholder-text{white-space:normal;word-wrap:break-word}.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}@container resume-entries (max-width: 400px){.mobile-order-1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mobile-order-1.date-range ::ng-deep lib-field-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-1.date-range ::ng-deep lib-field-placeholder .value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-4{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mobile-order-4.location-row ::ng-deep lib-field-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}.mobile-order-4.location-row ::ng-deep lib-field-placeholder .value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%}}@container resume-entries (max-width: 500px){.entry-header{flex-direction:column;gap:4px;display:flex}.header-left,.header-right{display:contents}.entry-header .mobile-order-1{order:1}.entry-header .mobile-order-2{order:2}.entry-header .mobile-order-3{order:3}.entry-header .mobile-order-4{order:4}.mobile-order-1,.mobile-order-2,.mobile-order-3,.mobile-order-4{width:100%}.date-range{align-items:flex-start;flex-wrap:nowrap}.location-row{align-items:flex-start}}@media (max-width: 767px){.entry-header{flex-direction:column;gap:4px;display:flex}.header-left,.header-right{display:contents}.entry-header .mobile-order-1{order:1}.entry-header .mobile-order-2{order:2}.entry-header .mobile-order-3{order:3}.entry-header .mobile-order-4{order:4}.mobile-order-1,.mobile-order-2,.mobile-order-3,.mobile-order-4{width:100%}.date-range{align-items:flex-start;flex-wrap:nowrap}.location-row{align-items:flex-start}}.date-range{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px}.date-range ::ng-deep lib-field-placeholder .value-text,.date-range ::ng-deep lib-field-placeholder .placeholder-text{white-space:nowrap}.location-row{display:flex;flex-direction:row;align-items:center;gap:4px}.date-separator{color:#666;font-weight:500;font-size:16px}.date-icon{color:#94a3b8;font-size:14px;margin-left:4px}.descriptions-container{display:flex;flex-direction:column;gap:8px}.description-item{display:flex;flex-direction:column;gap:4px}.description-item.collapsed .value-text{display:-webkit-box!important;-webkit-line-clamp:1!important;line-clamp:1!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:normal!important}.description-label{color:#a2a6b8;font-family:Roboto,sans-serif;font-size:12px;font-style:normal;font-weight:400;letter-spacing:.06px;padding-top:4px;line-height:10px}.content-right{display:flex;flex-direction:row;gap:8px;align-items:flex-start;flex-wrap:wrap}.resume-entry-projection{display:block;width:100%}.reapply-button-container{display:flex;justify-content:flex-end;align-items:center}.loader-container{display:flex;justify-content:center;align-items:center;padding:24px 0;min-height:80px}.entry-loader-container{display:flex;justify-content:center;align-items:center;width:100%}.entry-separator{border:none;border-top:1px solid #E5E9FC;margin-top:0;margin-bottom:0;width:100%;height:0;display:block;clear:both;flex-shrink:0}.skill-section-common{padding:8px 0 20px}.skill-section-common .ai_skill_summary{margin-top:8px}.skill-section-common .list-items{font-weight:400;font-size:15px;font-style:normal;letter-spacing:.15px;font-family:Roboto,sans-serif;color:#717793}.skill-section-common p,.skill-section-common .suggestion-container{margin:12px 0}.skill-section-common p.skill-list-items{width:100%}.skill-section-common .skill-list-items ul{padding:0;display:flex;flex-wrap:wrap}.skill-section-common .skill-list-items ul li{margin-left:24px;margin-right:24px;height:24px;text-align:left;max-width:200px;min-width:200px;overflow-y:clip;text-overflow:ellipsis;white-space:nowrap}.skill-section-common .skill-list-items table p{margin:0!important}.skill-section-common .skill-list-items table ul{padding:0;display:flex;flex-direction:column}.skill-section-common .skill-list-items table ul li{margin-left:24px;text-align:left;max-width:100%;white-space:break-spaces!important;word-break:break-word}\n"] }]
         }], propDecorators: { entries: [{
                 type: Input
             }], showHeader: [{