@allsorter/ui-components 0.0.382 → 0.0.386
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.
- package/fesm2022/allsorter-ui-components.mjs +148 -160
- package/fesm2022/allsorter-ui-components.mjs.map +1 -1
- package/lib/candidate-section/candidate-section.component.d.ts +16 -1
- package/lib/custom-editor/custom-editor.component.d.ts +2 -7
- package/lib/newresumeheader/newresumeheader.component.d.ts +0 -1
- package/lib/responsive-layout/responsive-layout.component.d.ts +4 -1
- package/lib/resume-entries/resume-entries.component.d.ts +6 -2
- package/lib/resume-header/resume-header.model.d.ts +4 -0
- package/lib/toolbar-right/toolbar-right.module.d.ts +2 -1
- package/lib/utils/image-utils.d.ts +1 -0
- package/package.json +1 -1
- package/src/lib/ai-wrapper/ai-wrapper.component.html +2 -2
- package/src/lib/ai-wrapper/ai-wrapper.component.scss +7 -7
- package/src/lib/candidate-section/candidate-section.component.html +1 -1
- package/src/lib/candidate-section/candidate-section.component.scss +15 -9
- package/src/lib/checkbox/checkbox.component.scss +4 -48
- package/src/lib/custom-editor/custom-editor.component.html +15 -14
- package/src/lib/custom-editor/custom-editor.component.scss +32 -9
- package/src/lib/editable-form-wrapper/editable-form-wrapper.component.scss +39 -0
- package/src/lib/field-placeholder/field-placeholder.component.html +1 -1
- package/src/lib/field-placeholder/field-placeholder.component.scss +14 -3
- package/src/lib/input/input.component.scss +47 -11
- package/src/lib/newresumeheader/newresumeheader.component.html +29 -8
- package/src/lib/newresumeheader/newresumeheader.component.scss +9 -0
- package/src/lib/responsive-layout/responsive-layout.component.scss +0 -2
- package/src/lib/resume-entries/resume-entries.component.html +25 -23
- package/src/lib/resume-entries/resume-entries.component.scss +35 -32
- package/src/lib/test-styling/test-styling.component.html +3 -3
- package/src/lib/toolbar-left/toolbar-left.component.html +6 -6
- package/src/lib/toolbar-left/toolbar-left.component.scss +4 -0
- package/src/lib/toolbar-right/toolbar-right.component.html +7 -5
|
@@ -335,8 +335,12 @@ class ButtonComponent {
|
|
|
335
335
|
const leftIconPresent = !!(this.leftIcon && this.leftIcon.toString().trim());
|
|
336
336
|
const rightIconPresent = !!(this.rightIcon && this.rightIcon.toString().trim());
|
|
337
337
|
const iconCount = (leftIconPresent ? 1 : 0) + (rightIconPresent ? 1 : 0);
|
|
338
|
+
// If labelText exists and iconOnly is false, gap should be 0
|
|
339
|
+
if (this.labelText && !this.iconOnly) {
|
|
340
|
+
return 0;
|
|
341
|
+
}
|
|
338
342
|
// Header size logic
|
|
339
|
-
if (this.size === 'header') {
|
|
343
|
+
if (this.size === 'header' || this.size === 'xl' || this.size === 'l' || this.size === 'sm' || this.size === 'xs') {
|
|
340
344
|
// 0 gap for icon-only buttons with single icon
|
|
341
345
|
return 0;
|
|
342
346
|
}
|
|
@@ -459,7 +463,7 @@ class ButtonComponent {
|
|
|
459
463
|
'retry_AI_icon',
|
|
460
464
|
'ordering_icon',
|
|
461
465
|
'collapse_icon',
|
|
462
|
-
'
|
|
466
|
+
'add_education_icon'
|
|
463
467
|
]);
|
|
464
468
|
this.stateClasses = {
|
|
465
469
|
default: 'btn-default',
|
|
@@ -1011,7 +1015,7 @@ class InputComponent {
|
|
|
1011
1015
|
useExisting: forwardRef(() => InputComponent),
|
|
1012
1016
|
multi: true
|
|
1013
1017
|
}
|
|
1014
|
-
], 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:34px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-infix{padding:8px 0!important;min-height:24px!important}::ng-deep .al-input-size-large .mat-mdc-form-field-infix{padding:16px 0!important;min-height:48px!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-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:24px!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(-20px) 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(-35px) 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:34px!important;width:34px!important;padding:4px!important}::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle{height:34px!important;width:34px!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:34px!important;width:34px!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"] }] }); }
|
|
1018
|
+
], 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"] }] }); }
|
|
1015
1019
|
}
|
|
1016
1020
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputComponent, decorators: [{
|
|
1017
1021
|
type: Component,
|
|
@@ -1034,7 +1038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1034
1038
|
useExisting: forwardRef(() => InputComponent),
|
|
1035
1039
|
multi: true
|
|
1036
1040
|
}
|
|
1037
|
-
], 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:34px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-infix{padding:8px 0!important;min-height:24px!important}::ng-deep .al-input-size-large .mat-mdc-form-field-infix{padding:16px 0!important;min-height:48px!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-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:24px!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(-20px) 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(-35px) 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:34px!important;width:34px!important;padding:4px!important}::ng-deep .al-input-field.al-input-size-small .mat-mdc-form-field .mat-datepicker-toggle{height:34px!important;width:34px!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:34px!important;width:34px!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"] }]
|
|
1041
|
+
], 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"] }]
|
|
1038
1042
|
}], propDecorators: { labelText: [{
|
|
1039
1043
|
type: Input
|
|
1040
1044
|
}], label: [{
|
|
@@ -1481,7 +1485,7 @@ class CheckboxComponent {
|
|
|
1481
1485
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
1482
1486
|
multi: true
|
|
1483
1487
|
}
|
|
1484
|
-
], ngImport: i0, template: "<mat-checkbox [checked]=\"checked\" [disabled]=\"disabled\" [labelPosition]=\"labelPosition\" [name]=\"name\"\n touchTargetSize=\"none\" [attr.data-testid]=\"dataTestId\" [required]=\"required\" [value]=\"value\" [color]=\"color\"\n [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!tooltip\"\n (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\" (blur)=\"handleBlur($event)\"\n (indeterminateChange)=\"handleIndeterminateChange($event)\">\n <div class=\"checkbox-label-wrapper\" *ngIf=\"showLabels\">\n <div class=\"checkbox-label-main-row\" *ngIf=\"labelText\">\n <div class=\"checkbox-label-main\">\n {{ labelText }}\n </div>\n <button *ngIf=\"showHelperIcon\" type=\"button\" class=\"checkbox-helper-icon\"\n [matTooltip]=\"helperIconTooltip || helperText\" [matTooltipPosition]=\"tooltipPosition\" [disabled]=\"disabled\"\n (click)=\"onHelperIconClick($event)\">\n ?\n </button>\n </div>\n\n <div *ngIf=\"helperText\" class=\"checkbox-label-helper\">\n {{ helperText }}\n </div>\n </div>\n\n <ng-content></ng-content>\n</mat-checkbox>", 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}: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,.checkbox-label-main,::ng-deep .mat-mdc-checkbox .mdc-form-field>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,.checkbox-label-helper{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}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#5473e8!important;border-color:#5473e8!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-mdc-checkbox.mat-primary.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#5473e8!important;border-color:#5473e8!important}::ng-deep .mat-mdc-checkbox.mat-green.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#37c1ce!important;border-color:#37c1ce!important}::ng-deep .mat-mdc-checkbox.mat-error.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#e854a4!important;border-color:#e854a4!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled:not(.mat-mdc-checkbox-checked) .mdc-checkbox__background{border:2px solid #C3C5D1!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#dee0e6!important;border-color:#c3c5d1!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border-color:#717793!important}::ng-deep .mat-mdc-checkbox:not(.mat-mdc-checkbox-checked) .mdc-checkbox__background{border:2px solid #717793!important;background-color:transparent!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple{background-color:transparent!important;opacity:1!important;transition:background-color .2s ease!important}::ng-deep .mat-mdc-checkbox:hover:not(.mat-mdc-checkbox-disabled) .mdc-checkbox__ripple{background-color:#5473e81f!important}::ng-deep .mat-mdc-checkbox.mat-focused .mdc-checkbox__ripple{background-color:#5473e81f!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border-radius:2px!important}::ng-deep .mat-mdc-checkbox .mdc-form-field>label{color:#4b4f62!important}.checkbox-label-wrapper{display:flex;flex-direction:column;margin-top:12px}.checkbox-label-main-row{display:flex;align-items:center;gap:4px}.checkbox-label-main{color:#4b4f62!important}.checkbox-label-helper{color:#a2a6b8!important;margin-top:0!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .checkbox-label-main,::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .checkbox-label-helper{color:#c3c5d1!important;cursor:not-allowed}.checkbox-helper-icon{width:20px;height:20px;border-radius:50%;border:1px solid #C3C5D1;background-color:#fff;color:#717793;font-size:12px;display:inline-flex;align-items:center;justify-content:center;padding:0;margin-left:4px;cursor:pointer}.checkbox-helper-icon:disabled{border-color:#dee0e6;color:#dee0e6;cursor:not-allowed}::ng-deep .mat-mdc-checkbox.mat-primary .mat-ripple-element{background-color:#5473e8cc!important}::ng-deep .mat-mdc-checkbox.mat-green .mat-ripple-element{background-color:#37c1cecc!important}::ng-deep .mat-mdc-checkbox.mat-error .mat-ripple-element{background-color:#e854a4cc!important}::ng-deep .mdc-checkbox .mdc-checkbox__native-control{width:18px!important;height:18px!important;top:0!important;left:0!important}::ng-deep .mdc-checkbox{--mdc-checkbox-state-layer-size: 18px !important;padding:0!important}::ng-deep .mat-mdc-checkbox-touch-target{width:24px!important;height:24px!important}::ng-deep .mdc-checkbox .mdc-checkbox__ripple{width:36px!important;height:36px!important;border-radius:50%!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;opacity:1!important;pointer-events:none!important}::ng-deep mat-checkbox .mat-internal-form-field{gap:0!important}:host(.has-labels) ::ng-deep mat-checkbox .mat-internal-form-field{gap:8px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
1488
|
+
], ngImport: i0, template: "<mat-checkbox [checked]=\"checked\" [disabled]=\"disabled\" [labelPosition]=\"labelPosition\" [name]=\"name\"\n touchTargetSize=\"none\" [attr.data-testid]=\"dataTestId\" [required]=\"required\" [value]=\"value\" [color]=\"color\"\n [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!tooltip\"\n (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\" (blur)=\"handleBlur($event)\"\n (indeterminateChange)=\"handleIndeterminateChange($event)\">\n <div class=\"checkbox-label-wrapper\" *ngIf=\"showLabels\">\n <div class=\"checkbox-label-main-row\" *ngIf=\"labelText\">\n <div class=\"checkbox-label-main\">\n {{ labelText }}\n </div>\n <button *ngIf=\"showHelperIcon\" type=\"button\" class=\"checkbox-helper-icon\"\n [matTooltip]=\"helperIconTooltip || helperText\" [matTooltipPosition]=\"tooltipPosition\" [disabled]=\"disabled\"\n (click)=\"onHelperIconClick($event)\">\n ?\n </button>\n </div>\n\n <div *ngIf=\"helperText\" class=\"checkbox-label-helper\">\n {{ helperText }}\n </div>\n </div>\n\n <ng-content></ng-content>\n</mat-checkbox>", 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}: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,.checkbox-label-main,::ng-deep .mat-mdc-checkbox .mdc-form-field>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,.checkbox-label-helper{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}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#5473e8!important;border-color:#5473e8!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-mdc-checkbox.mat-primary.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#5473e8!important;border-color:#5473e8!important}::ng-deep .mat-mdc-checkbox.mat-green.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#37c1ce!important;border-color:#37c1ce!important}::ng-deep .mat-mdc-checkbox.mat-error.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#e854a4!important;border-color:#e854a4!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled:not(.mat-mdc-checkbox-checked) .mdc-checkbox__background{border:2px solid #C3C5D1!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#dee0e6!important;border-color:#c3c5d1!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border-color:#717793!important}::ng-deep .mat-mdc-checkbox:not(.mat-mdc-checkbox-checked) .mdc-checkbox__background{border:2px solid #717793!important;background-color:transparent!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple{background-color:transparent!important;opacity:1!important;transition:background-color .2s ease!important}::ng-deep .mat-mdc-checkbox:hover:not(.mat-mdc-checkbox-disabled) .mdc-checkbox__ripple{background-color:#5473e81f!important}::ng-deep .mat-mdc-checkbox.mat-focused .mdc-checkbox__ripple{background-color:#5473e81f!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border-radius:2px!important}::ng-deep .mat-mdc-checkbox .mdc-form-field>label{color:#4b4f62!important}.checkbox-label-wrapper{display:flex;flex-direction:column;justify-content:center}.checkbox-label-main-row{display:flex;align-items:center;gap:4px}.checkbox-label-main{color:#4b4f62!important}.checkbox-label-helper{color:#a2a6b8!important;margin-top:0!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .checkbox-label-main,::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .checkbox-label-helper{color:#c3c5d1!important;cursor:not-allowed}.checkbox-helper-icon{width:20px;height:20px;border-radius:50%;border:1px solid #C3C5D1;background-color:#fff;color:#717793;font-size:12px;display:inline-flex;align-items:center;justify-content:center;padding:0;margin-left:4px;cursor:pointer}.checkbox-helper-icon:disabled{border-color:#dee0e6;color:#dee0e6;cursor:not-allowed}::ng-deep .mat-mdc-checkbox.mat-primary .mat-ripple-element{background-color:#5473e8cc!important}::ng-deep .mat-mdc-checkbox.mat-green .mat-ripple-element{background-color:#37c1cecc!important}::ng-deep .mat-mdc-checkbox.mat-error .mat-ripple-element{background-color:#e854a4cc!important}::ng-deep .mdc-checkbox .mdc-checkbox__native-control{width:18px!important;height:18px!important;top:0!important;left:0!important}::ng-deep .mdc-checkbox{--mdc-checkbox-state-layer-size: 18px !important;padding:0!important}::ng-deep .mat-mdc-checkbox-touch-target{width:24px!important;height:24px!important}::ng-deep .mdc-checkbox .mdc-checkbox__ripple{width:36px!important;height:36px!important;border-radius:50%!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;opacity:1!important;pointer-events:none!important}::ng-deep mat-checkbox .mat-internal-form-field{gap:0!important;align-items:flex-start!important}:host(.has-labels) ::ng-deep mat-checkbox .mat-internal-form-field{gap:8px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
1485
1489
|
}
|
|
1486
1490
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1487
1491
|
type: Component,
|
|
@@ -1490,7 +1494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1490
1494
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
1491
1495
|
multi: true
|
|
1492
1496
|
}
|
|
1493
|
-
], template: "<mat-checkbox [checked]=\"checked\" [disabled]=\"disabled\" [labelPosition]=\"labelPosition\" [name]=\"name\"\n touchTargetSize=\"none\" [attr.data-testid]=\"dataTestId\" [required]=\"required\" [value]=\"value\" [color]=\"color\"\n [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!tooltip\"\n (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\" (blur)=\"handleBlur($event)\"\n (indeterminateChange)=\"handleIndeterminateChange($event)\">\n <div class=\"checkbox-label-wrapper\" *ngIf=\"showLabels\">\n <div class=\"checkbox-label-main-row\" *ngIf=\"labelText\">\n <div class=\"checkbox-label-main\">\n {{ labelText }}\n </div>\n <button *ngIf=\"showHelperIcon\" type=\"button\" class=\"checkbox-helper-icon\"\n [matTooltip]=\"helperIconTooltip || helperText\" [matTooltipPosition]=\"tooltipPosition\" [disabled]=\"disabled\"\n (click)=\"onHelperIconClick($event)\">\n ?\n </button>\n </div>\n\n <div *ngIf=\"helperText\" class=\"checkbox-label-helper\">\n {{ helperText }}\n </div>\n </div>\n\n <ng-content></ng-content>\n</mat-checkbox>", 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}: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,.checkbox-label-main,::ng-deep .mat-mdc-checkbox .mdc-form-field>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,.checkbox-label-helper{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}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#5473e8!important;border-color:#5473e8!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-mdc-checkbox.mat-primary.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#5473e8!important;border-color:#5473e8!important}::ng-deep .mat-mdc-checkbox.mat-green.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#37c1ce!important;border-color:#37c1ce!important}::ng-deep .mat-mdc-checkbox.mat-error.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#e854a4!important;border-color:#e854a4!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled:not(.mat-mdc-checkbox-checked) .mdc-checkbox__background{border:2px solid #C3C5D1!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#dee0e6!important;border-color:#c3c5d1!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border-color:#717793!important}::ng-deep .mat-mdc-checkbox:not(.mat-mdc-checkbox-checked) .mdc-checkbox__background{border:2px solid #717793!important;background-color:transparent!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple{background-color:transparent!important;opacity:1!important;transition:background-color .2s ease!important}::ng-deep .mat-mdc-checkbox:hover:not(.mat-mdc-checkbox-disabled) .mdc-checkbox__ripple{background-color:#5473e81f!important}::ng-deep .mat-mdc-checkbox.mat-focused .mdc-checkbox__ripple{background-color:#5473e81f!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border-radius:2px!important}::ng-deep .mat-mdc-checkbox .mdc-form-field>label{color:#4b4f62!important}.checkbox-label-wrapper{display:flex;flex-direction:column;margin-top:12px}.checkbox-label-main-row{display:flex;align-items:center;gap:4px}.checkbox-label-main{color:#4b4f62!important}.checkbox-label-helper{color:#a2a6b8!important;margin-top:0!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .checkbox-label-main,::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .checkbox-label-helper{color:#c3c5d1!important;cursor:not-allowed}.checkbox-helper-icon{width:20px;height:20px;border-radius:50%;border:1px solid #C3C5D1;background-color:#fff;color:#717793;font-size:12px;display:inline-flex;align-items:center;justify-content:center;padding:0;margin-left:4px;cursor:pointer}.checkbox-helper-icon:disabled{border-color:#dee0e6;color:#dee0e6;cursor:not-allowed}::ng-deep .mat-mdc-checkbox.mat-primary .mat-ripple-element{background-color:#5473e8cc!important}::ng-deep .mat-mdc-checkbox.mat-green .mat-ripple-element{background-color:#37c1cecc!important}::ng-deep .mat-mdc-checkbox.mat-error .mat-ripple-element{background-color:#e854a4cc!important}::ng-deep .mdc-checkbox .mdc-checkbox__native-control{width:18px!important;height:18px!important;top:0!important;left:0!important}::ng-deep .mdc-checkbox{--mdc-checkbox-state-layer-size: 18px !important;padding:0!important}::ng-deep .mat-mdc-checkbox-touch-target{width:24px!important;height:24px!important}::ng-deep .mdc-checkbox .mdc-checkbox__ripple{width:36px!important;height:36px!important;border-radius:50%!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;opacity:1!important;pointer-events:none!important}::ng-deep mat-checkbox .mat-internal-form-field{gap:0!important}:host(.has-labels) ::ng-deep mat-checkbox .mat-internal-form-field{gap:8px!important}\n"] }]
|
|
1497
|
+
], template: "<mat-checkbox [checked]=\"checked\" [disabled]=\"disabled\" [labelPosition]=\"labelPosition\" [name]=\"name\"\n touchTargetSize=\"none\" [attr.data-testid]=\"dataTestId\" [required]=\"required\" [value]=\"value\" [color]=\"color\"\n [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!tooltip\"\n (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\" (blur)=\"handleBlur($event)\"\n (indeterminateChange)=\"handleIndeterminateChange($event)\">\n <div class=\"checkbox-label-wrapper\" *ngIf=\"showLabels\">\n <div class=\"checkbox-label-main-row\" *ngIf=\"labelText\">\n <div class=\"checkbox-label-main\">\n {{ labelText }}\n </div>\n <button *ngIf=\"showHelperIcon\" type=\"button\" class=\"checkbox-helper-icon\"\n [matTooltip]=\"helperIconTooltip || helperText\" [matTooltipPosition]=\"tooltipPosition\" [disabled]=\"disabled\"\n (click)=\"onHelperIconClick($event)\">\n ?\n </button>\n </div>\n\n <div *ngIf=\"helperText\" class=\"checkbox-label-helper\">\n {{ helperText }}\n </div>\n </div>\n\n <ng-content></ng-content>\n</mat-checkbox>", 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}: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,.checkbox-label-main,::ng-deep .mat-mdc-checkbox .mdc-form-field>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,.checkbox-label-helper{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}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#5473e8!important;border-color:#5473e8!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-mdc-checkbox.mat-primary.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#5473e8!important;border-color:#5473e8!important}::ng-deep .mat-mdc-checkbox.mat-green.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#37c1ce!important;border-color:#37c1ce!important}::ng-deep .mat-mdc-checkbox.mat-error.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#e854a4!important;border-color:#e854a4!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled:not(.mat-mdc-checkbox-checked) .mdc-checkbox__background{border:2px solid #C3C5D1!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#dee0e6!important;border-color:#c3c5d1!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border-color:#717793!important}::ng-deep .mat-mdc-checkbox:not(.mat-mdc-checkbox-checked) .mdc-checkbox__background{border:2px solid #717793!important;background-color:transparent!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple{background-color:transparent!important;opacity:1!important;transition:background-color .2s ease!important}::ng-deep .mat-mdc-checkbox:hover:not(.mat-mdc-checkbox-disabled) .mdc-checkbox__ripple{background-color:#5473e81f!important}::ng-deep .mat-mdc-checkbox.mat-focused .mdc-checkbox__ripple{background-color:#5473e81f!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border-radius:2px!important}::ng-deep .mat-mdc-checkbox .mdc-form-field>label{color:#4b4f62!important}.checkbox-label-wrapper{display:flex;flex-direction:column;justify-content:center}.checkbox-label-main-row{display:flex;align-items:center;gap:4px}.checkbox-label-main{color:#4b4f62!important}.checkbox-label-helper{color:#a2a6b8!important;margin-top:0!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .checkbox-label-main,::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .checkbox-label-helper{color:#c3c5d1!important;cursor:not-allowed}.checkbox-helper-icon{width:20px;height:20px;border-radius:50%;border:1px solid #C3C5D1;background-color:#fff;color:#717793;font-size:12px;display:inline-flex;align-items:center;justify-content:center;padding:0;margin-left:4px;cursor:pointer}.checkbox-helper-icon:disabled{border-color:#dee0e6;color:#dee0e6;cursor:not-allowed}::ng-deep .mat-mdc-checkbox.mat-primary .mat-ripple-element{background-color:#5473e8cc!important}::ng-deep .mat-mdc-checkbox.mat-green .mat-ripple-element{background-color:#37c1cecc!important}::ng-deep .mat-mdc-checkbox.mat-error .mat-ripple-element{background-color:#e854a4cc!important}::ng-deep .mdc-checkbox .mdc-checkbox__native-control{width:18px!important;height:18px!important;top:0!important;left:0!important}::ng-deep .mdc-checkbox{--mdc-checkbox-state-layer-size: 18px !important;padding:0!important}::ng-deep .mat-mdc-checkbox-touch-target{width:24px!important;height:24px!important}::ng-deep .mdc-checkbox .mdc-checkbox__ripple{width:36px!important;height:36px!important;border-radius:50%!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;opacity:1!important;pointer-events:none!important}::ng-deep mat-checkbox .mat-internal-form-field{gap:0!important;align-items:flex-start!important}:host(.has-labels) ::ng-deep mat-checkbox .mat-internal-form-field{gap:8px!important}\n"] }]
|
|
1494
1498
|
}], propDecorators: { checked: [{
|
|
1495
1499
|
type: Input
|
|
1496
1500
|
}], disabled: [{
|
|
@@ -1551,7 +1555,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1551
1555
|
}] });
|
|
1552
1556
|
|
|
1553
1557
|
const TABLE_ICONS = {
|
|
1554
|
-
'table': `<svg
|
|
1558
|
+
'table': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
1559
|
+
<path d="M4 7.25V5.125C4 4.56141 4.19901 4.02091 4.55324 3.6224C4.90748 3.22388 5.38792 3 5.88889 3H19.1111C19.6121 3 20.0925 3.22388 20.4468 3.6224C20.801 4.02091 21 4.56141 21 5.125V7.25M4 7.25V13.625M4 7.25H9.66667M21 7.25V13.625M21 7.25H9.66667M4 13.625V17.875C4 18.4386 4.19901 18.9791 4.55324 19.3776C4.90748 19.7761 5.38792 20 5.88889 20H9.66667M4 13.625H9.66667M9.66667 7.25V13.625M21 13.625V17.875C21 18.4386 20.801 18.9791 20.4468 19.3776C20.0925 19.7761 19.6121 20 19.1111 20H9.66667M21 13.625H9.66667M9.66667 20V13.625M15.3333 7.25V20" stroke="#4B4F62" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1560
|
+
</svg>`,
|
|
1555
1561
|
'add-table': `<svg width="25"height="25"viewBox="0 0 25 25"fill="none"xmlns="http://www.w3.org/2000/svg"> <rect x="0.25"y="0.25"width="24.5"height="24.5"rx="1.75"fill="white"/> <rect x="0.25"y="0.25"width="24.5"height="24.5"rx="1.75"stroke="#4B4F62"stroke-width="0.5"/> <path d="M11.75 17.1524V17.1523L11.7508 15.2507L9.84915 15.2515H9.84909C9.7505 15.2515 9.65287 15.2321 9.56178 15.1944C9.47069 15.1567 9.38792 15.1014 9.31821 15.0316C9.24849 14.9619 9.19319 14.8792 9.15546 14.7881C9.11772 14.697 9.09831 14.5993 9.09831 14.5007C9.0983 14.4022 9.11772 14.3045 9.15546 14.2134C9.19319 14.1223 9.24849 14.0396 9.31821 13.9699C9.38792 13.9001 9.47069 13.8448 9.56178 13.8071C9.65287 13.7694 9.7505 13.75 9.84909 13.75L9.84915 13.75L11.7508 13.7508L11.75 11.8492L11.75 11.8491C11.75 11.65 11.8291 11.459 11.9699 11.3182C12.1107 11.1774 12.3016 11.0983 12.5007 11.0983C12.6999 11.0983 12.8908 11.1774 13.0316 11.3182C13.1724 11.459 13.2515 11.65 13.2515 11.8491L13.2515 11.8492L13.2507 13.7508L15.1522 13.75L15.1523 13.75L15.1524 13.875L11.75 17.1524ZM11.75 17.1524C11.75 17.251 11.7694 17.3486 11.8071 17.4397C11.8448 17.5308 11.9001 17.6136 11.9699 17.6833C12.0396 17.753 12.1223 17.8083 12.2134 17.846C12.3045 17.8838 12.4022 17.9032 12.5007 17.9032C12.5993 17.9032 12.697 17.8838 12.7881 17.846C12.8792 17.8083 12.9619 17.753 13.0316 17.6833C13.1014 17.6136 13.1567 17.5308 13.1944 17.4397C13.2321 17.3486 13.2515 17.251 13.2515 17.1524V17.1523M11.75 17.1524L13.2515 17.1523M13.2515 17.1523L13.2507 15.2507M13.2515 17.1523L13.2507 15.2507M13.2507 15.2507L15.1522 15.2515L13.2507 15.2507Z"fill="#4B4F62"stroke="#4B4F62"stroke-width="0.25"/> <path fill-rule="evenodd"clip-rule="evenodd"d="M5.21222 5.35953C5.39167 5.16021 5.61117 5.07129 5.8148 5.07129H19.1371C19.3407 5.07129 19.5602 5.16021 19.7397 5.35953C19.9222 5.56231 20.0403 5.85783 20.0403 6.18516V7.29904H15.3307H9.62117H4.91162V6.18516C4.91162 5.85783 5.02965 5.56231 5.21222 5.35953ZM16.3307 9.29904H20.0403V13.6407H17.9333C17.9772 13.9207 18.0001 14.2077 18.0001 14.5001C18.0001 14.8912 17.9592 15.2727 17.8817 15.6407H20.0403V18.8684C20.0403 19.1957 19.9222 19.4913 19.7397 19.694C19.5602 19.8934 19.3407 19.9823 19.1371 19.9823H16.3307V18.4468C15.7672 18.9939 15.0869 19.4213 14.3307 19.6881V19.9823H12.9463C12.7991 19.9941 12.6503 20.0001 12.5001 20.0001C12.3498 20.0001 12.201 19.9941 12.0538 19.9823H10.6212V19.6708C9.86272 19.3952 9.18209 18.9574 8.62117 18.3994V19.9823H5.8148C5.61117 19.9823 5.39167 19.8934 5.21222 19.694C5.02965 19.4913 4.91162 19.1957 4.91162 18.8684V15.6407H7.11847C7.04087 15.2727 7.00006 14.8912 7.00006 14.5001C7.00006 14.2077 7.02287 13.9207 7.06682 13.6407H4.91162V9.29904H8.62117V10.6009C9.18209 10.0429 9.86272 9.60507 10.6212 9.32941V9.29904H10.707C11.269 9.10532 11.8722 9.00012 12.5001 9.00012C13.1279 9.00012 13.7311 9.10532 14.2932 9.29904H14.3307V9.31214C15.0869 9.57895 15.7672 10.0064 16.3307 10.5535V9.29904ZM19.1371 21.9823H15.3307H9.62117H5.8148C5.00893 21.9823 4.26026 21.6258 3.72588 21.0322C3.19462 20.4422 2.91162 19.6623 2.91162 18.8684V14.6407V8.29904V6.18516C2.91162 5.39123 3.19462 4.6114 3.72588 4.02133C4.26026 3.42779 5.00893 3.07129 5.8148 3.07129H19.1371C19.943 3.07129 20.6916 3.42779 21.226 4.02133C21.7573 4.6114 22.0403 5.39122 22.0403 6.18516V8.29904V14.6407V18.8684C22.0403 19.6623 21.7573 20.4422 21.226 21.0322C20.6916 21.6258 19.943 21.9823 19.1371 21.9823Z"fill="#4B4F62"/> </svg>`,
|
|
1556
1562
|
'delete-table': `<svg width="25"height="25"viewBox="0 0 25 25"fill="none"xmlns="http://www.w3.org/2000/svg"> <rect x="0.25"y="0.25"width="24.5"height="24.5"rx="1.75"fill="white"/> <rect x="0.25"y="0.25"width="24.5"height="24.5"rx="1.75"stroke="#4B4F62"stroke-width="0.5"/> <path d="M13.8449 16.907L13.8449 16.907L12.5008 15.5617L11.1567 16.907L11.1567 16.907C11.087 16.9767 11.0042 17.032 10.9131 17.0698C10.822 17.1075 10.7244 17.1269 10.6258 17.1269C10.5272 17.1269 10.4296 17.1075 10.3385 17.0698C10.2474 17.032 10.1646 16.9767 10.0949 16.907C10.0252 16.8373 9.96988 16.7545 9.93215 16.6634C9.89442 16.5723 9.875 16.4747 9.875 16.3761C9.875 16.2775 9.89442 16.1799 9.93215 16.0888C9.96988 15.9977 10.0252 15.9149 10.0949 15.8452L10.0949 15.8452L11.4402 14.5011L10.0949 13.157L10.0949 13.157C9.9541 13.0162 9.875 12.8252 9.875 12.6261C9.875 12.427 9.9541 12.236 10.0949 12.0952C10.2357 11.9544 10.4267 11.8753 10.6258 11.8753C10.8249 11.8753 11.0159 11.9544 11.1567 12.0952L11.1567 12.0953L12.5008 13.4405L13.8448 12.0953L13.8449 12.0953L13.9333 12.1836L13.8449 16.907ZM13.8449 16.907C13.9146 16.9767 13.9974 17.032 14.0885 17.0698C14.1796 17.1075 14.2772 17.1269 14.3758 17.1269C14.4744 17.1269 14.572 17.1075 14.6631 17.0698C14.7542 17.032 14.837 16.9767 14.9067 16.907C14.9764 16.8373 15.0317 16.7545 15.0694 16.6634C15.1072 16.5723 15.1266 16.4747 15.1266 16.3761C15.1266 16.2775 15.1072 16.1799 15.0694 16.0888C15.0317 15.9977 14.9764 15.9149 14.9067 15.8452L14.9066 15.8452M13.8449 16.907L14.9066 15.8452M14.9066 15.8452L13.5614 14.5011M14.9066 15.8452L13.5614 14.5011M13.5614 14.5011L14.9066 13.1571L13.5614 14.5011Z"fill="#4B4F62"stroke="#4B4F62"stroke-width="0.25"/> <path fill-rule="evenodd"clip-rule="evenodd"d="M5.21222 5.35953C5.39167 5.16021 5.61117 5.07129 5.8148 5.07129H19.1371C19.3407 5.07129 19.5602 5.16021 19.7397 5.35953C19.9222 5.56231 20.0403 5.85783 20.0403 6.18516V7.29904H15.3307H9.62117H4.91162V6.18516C4.91162 5.85783 5.02965 5.56231 5.21222 5.35953ZM16.3307 9.29904H20.0403V13.6407H17.9333C17.9772 13.9207 18.0001 14.2077 18.0001 14.5001C18.0001 14.8912 17.9592 15.2727 17.8817 15.6407H20.0403V18.8684C20.0403 19.1957 19.9222 19.4913 19.7397 19.694C19.5602 19.8934 19.3407 19.9823 19.1371 19.9823H16.3307V18.4468C15.7672 18.9939 15.0869 19.4213 14.3307 19.6881V19.9823H12.9463C12.7991 19.9941 12.6503 20.0001 12.5001 20.0001C12.3498 20.0001 12.201 19.9941 12.0538 19.9823H10.6212V19.6708C9.86272 19.3952 9.18209 18.9574 8.62117 18.3994V19.9823H5.8148C5.61117 19.9823 5.39167 19.8934 5.21222 19.694C5.02965 19.4913 4.91162 19.1957 4.91162 18.8684V15.6407H7.11847C7.04087 15.2727 7.00006 14.8912 7.00006 14.5001C7.00006 14.2077 7.02287 13.9207 7.06682 13.6407H4.91162V9.29904H8.62117V10.6009C9.18209 10.0429 9.86272 9.60507 10.6212 9.32941V9.29904H10.707C11.269 9.10532 11.8722 9.00012 12.5001 9.00012C13.1279 9.00012 13.7311 9.10532 14.2932 9.29904H14.3307V9.31214C15.0869 9.57895 15.7672 10.0064 16.3307 10.5535V9.29904ZM19.1371 21.9823H15.3307H9.62117H5.8148C5.00893 21.9823 4.26026 21.6258 3.72588 21.0322C3.19462 20.4422 2.91162 19.6623 2.91162 18.8684V14.6407V8.29904V6.18516C2.91162 5.39123 3.19462 4.6114 3.72588 4.02133C4.26026 3.42779 5.00893 3.07129 5.8148 3.07129H19.1371C19.943 3.07129 20.6916 3.42779 21.226 4.02133C21.7573 4.6114 22.0403 5.39122 22.0403 6.18516V8.29904V14.6407V18.8684C22.0403 19.6623 21.7573 20.4422 21.226 21.0322C20.6916 21.6258 19.943 21.9823 19.1371 21.9823Z"fill="#4B4F62"/> </svg>`,
|
|
1557
1563
|
'column-left': `<svg width="25"height="25"viewBox="0 0 25 25"fill="none"xmlns="http://www.w3.org/2000/svg"> <rect x="0.25"y="0.25"width="24.5"height="24.5"rx="1.75"fill="white"/> <rect x="0.25"y="0.25"width="24.5"height="24.5"rx="1.75"stroke="#4B4F62"stroke-width="0.5"/> <path d="M13.8571 3C13.3772 3 12.917 3.20018 12.5776 3.5565C12.2383 3.91282 12.0476 4.39609 12.0476 4.9V20.1C12.0476 20.6039 12.2383 21.0872 12.5776 21.4435C12.917 21.7998 13.3772 22 13.8571 22H22V3H13.8571ZM20.1905 10.6V14.4H13.8571V10.6H20.1905ZM20.1905 16.3V20.1H13.8571V16.3H20.1905ZM20.1905 4.9V8.7H13.8571V4.9H20.1905ZM10.2381 12.5C10.2381 11.9753 9.81277 11.55 9.28809 11.55H7.52381V9.60476C7.52381 9.10508 7.11873 8.7 6.61905 8.7C6.11936 8.7 5.71429 9.10508 5.71429 9.60476V11.55H3.95C3.42533 11.55 3 11.9753 3 12.5C3 13.0247 3.42533 13.45 3.95 13.45H5.71429V15.3952C5.71429 15.8949 6.11936 16.3 6.61905 16.3C7.11873 16.3 7.52381 15.8949 7.52381 15.3952V13.45H9.2881C9.81277 13.45 10.2381 13.0247 10.2381 12.5Z"fill="#4B4F62"/> </svg>`,
|
|
@@ -1599,7 +1605,10 @@ const NewResume_Header_Component_ICON = {
|
|
|
1599
1605
|
'font_case_icon': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M1 15.6184L5.3216 4.11548H7.39053L11.7041 15.6184H9.71509L8.6942 12.6894H4.0355L2.98879 15.6184H1ZM4.6213 11.0386H8.08284L6.40373 6.27228H6.29882L4.6213 11.0386ZM14.8728 15.8847C13.9675 15.8847 13.2618 15.6495 12.7559 15.1791C12.25 14.7087 11.997 14.0563 11.997 13.222C11.997 12.4409 12.2899 11.8152 12.8757 11.3448C13.4615 10.8744 14.2337 10.6391 15.1923 10.6391C15.5473 10.6391 15.9112 10.6746 16.284 10.7457C16.6568 10.8167 17.0118 10.9143 17.3491 11.0386V10.7989C17.3491 10.2683 17.1709 9.83829 16.8144 9.50882C16.458 9.17953 15.9841 9.01489 15.3928 9.01489C14.9929 9.01489 14.6331 9.09477 14.3136 9.25453C13.9941 9.4143 13.7012 9.66282 13.4349 10.0001L12.2367 9.06814C12.5917 8.58885 13.0488 8.22051 13.608 7.96311C14.1672 7.70572 14.784 7.57702 15.4586 7.57702C16.5947 7.57702 17.4689 7.8566 18.0814 8.41577C18.6938 8.97495 19 9.76045 19 10.7723V15.6184H17.3491V14.6599H17.2692C16.9675 15.0859 16.6213 15.3965 16.2308 15.5918C15.8402 15.7871 15.3876 15.8847 14.8728 15.8847ZM15.154 14.4735C15.7637 14.4735 16.282 14.2649 16.7087 13.8477C17.1357 13.4306 17.3491 12.9309 17.3491 12.3486C17.1006 12.2031 16.821 12.0948 16.5104 12.0238C16.1997 11.9528 15.8691 11.9173 15.5185 11.9173C14.9283 11.9173 14.4822 12.0282 14.1805 12.2501C13.8787 12.472 13.7278 12.7966 13.7278 13.2239C13.7278 13.5954 13.8609 13.8965 14.1272 14.1273C14.3935 14.3581 14.7357 14.4735 15.154 14.4735Z"fill="white"/> </svg>`,
|
|
1600
1606
|
'retry_AI_icon': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M17.9609 8.10742H13.0674V12.8115C13.0673 12.8672 13.0529 12.9137 13.0225 12.9492C12.992 12.9845 12.9521 13.0019 12.9043 13.002H11.9873C11.9398 13.0019 11.9005 12.9842 11.8701 12.9492C11.8396 12.9137 11.8243 12.8672 11.8242 12.8115V7.8584C11.8243 7.83763 11.8277 7.81873 11.832 7.80078V6.55566H15.457C14.8857 5.64188 14.1245 4.91315 13.1748 4.36914C12.2252 3.82499 11.1759 3.55189 10.0273 3.55176C8.23037 3.55176 6.70222 4.17986 5.44434 5.43359C4.18666 6.68726 3.55762 8.20911 3.55762 10C3.55762 11.7909 4.18666 13.3127 5.44434 14.5664C6.70222 15.8201 8.23037 16.4482 10.0273 16.4482C11.7042 16.4481 13.1421 15.8953 14.3398 14.791C15.5376 13.6866 16.2256 12.3276 16.4053 10.7158H18C17.8357 12.7837 16.9945 14.5154 15.4766 15.9092C13.9585 17.3027 12.1418 17.9998 10.0273 18C7.7986 18 5.90273 17.2225 4.3418 15.667C2.78067 14.1114 2.00005 12.2228 2 10.002C2.00001 7.78111 2.78067 5.89175 4.3418 4.33496C5.90273 2.77828 7.79859 2 10.0273 2C11.3478 2.00013 12.5589 2.296 13.6592 2.88672C14.759 3.47763 15.674 4.25894 16.4033 5.23047V2H17.9609V8.10742ZM9.08984 7.66797C9.15921 7.66812 9.21381 7.68911 9.25293 7.72949C9.29203 7.77006 9.31897 7.81831 9.33203 7.87402L10.8887 12.7734C10.893 12.7936 10.8955 12.8166 10.8955 12.8418C10.8954 12.8822 10.8824 12.9207 10.8564 12.9561C10.8304 12.9862 10.7977 13.0018 10.7588 13.002H10.0771C10.0122 13.0019 9.96411 12.9844 9.93359 12.9492C9.90305 12.9137 9.88373 12.8791 9.875 12.8486L9.59277 11.9961H7.74707L7.46484 12.8486C7.45612 12.8791 7.43777 12.9137 7.40723 12.9492C7.37672 12.9846 7.32786 13.0019 7.2627 13.002H6.58203C6.54295 13.0019 6.50949 12.9864 6.4834 12.9561C6.45742 12.9207 6.4444 12.8822 6.44434 12.8418C6.44435 12.8166 6.44685 12.7936 6.45117 12.7734L8.00879 7.87402C8.02189 7.81823 8.04868 7.77008 8.08789 7.72949C8.1271 7.68903 8.18139 7.66802 8.25098 7.66797H9.08984ZM7.98926 11.0127H9.34473L8.66992 8.81836L7.98926 11.0127Z"fill="white"/> </svg>`,
|
|
1601
1607
|
'ordering_icon': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M2.0835 14.1666H3.75016V14.5833H2.91683V15.4166H3.75016V15.8333H2.0835V16.6666H4.5835V13.3333H2.0835V14.1666ZM2.91683 6.66665H3.75016V3.33331H2.0835V4.16665H2.91683V6.66665ZM2.0835 9.16665H3.5835L2.0835 10.9166V11.6666H4.5835V10.8333H3.0835L4.5835 9.08331V8.33331H2.0835V9.16665ZM6.25016 4.16665V5.83331H17.9168V4.16665H6.25016ZM6.25016 15.8333H17.9168V14.1666H6.25016V15.8333ZM6.25016 10.8333H17.9168V9.16665H6.25016V10.8333Z"fill="white"/> </svg>`,
|
|
1602
|
-
'collapse_icon': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M6.66683 15.8333H9.16683V19.1666H10.8335V15.8333H13.3335L10.0002 12.5L6.66683 15.8333ZM13.3335 4.16665H10.8335V0.833313H9.16683V4.16665H6.66683L10.0002 7.49998L13.3335 4.16665ZM3.3335 9.16665V10.8333H16.6668V9.16665H3.3335Z"fill="white"/> </svg
|
|
1608
|
+
'collapse_icon': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M6.66683 15.8333H9.16683V19.1666H10.8335V15.8333H13.3335L10.0002 12.5L6.66683 15.8333ZM13.3335 4.16665H10.8335V0.833313H9.16683V4.16665H6.66683L10.0002 7.49998L13.3335 4.16665ZM3.3335 9.16665V10.8333H16.6668V9.16665H3.3335Z"fill="white"/> </svg>`,
|
|
1609
|
+
'add_education_icon': `<svg width="19" height="15" viewBox="0 0 19 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1610
|
+
<path d="M9.16667 0L0 5L3.33333 6.81667V11.8167L9.16667 15L15 11.8167V6.81667L16.6667 5.90833V11.6667H18.3333V5L9.16667 0ZM14.85 5L9.16667 8.1L3.48333 5L9.16667 1.9L14.85 5ZM13.3333 10.825L9.16667 13.1L5 10.825V7.725L9.16667 10L13.3333 7.725V10.825Z" fill="white"/>
|
|
1611
|
+
</svg>`
|
|
1603
1612
|
};
|
|
1604
1613
|
/**
|
|
1605
1614
|
* Gets an icon from Candidate_Section_ICON and converts it to a data URL format
|
|
@@ -1710,6 +1719,7 @@ class NewResumeHeaderComponent {
|
|
|
1710
1719
|
this.iconRegistry.addSvgIconLiteral('ordering_icon', this.sanitizer.bypassSecurityTrustHtml(NewResume_Header_Component_ICON['ordering_icon']));
|
|
1711
1720
|
// Register collapse_icon from image-utils
|
|
1712
1721
|
this.iconRegistry.addSvgIconLiteral('collapse_icon', this.sanitizer.bypassSecurityTrustHtml(NewResume_Header_Component_ICON['collapse_icon']));
|
|
1722
|
+
this.iconRegistry.addSvgIconLiteral('add_education_icon', this.sanitizer.bypassSecurityTrustHtml(NewResume_Header_Component_ICON['add_education_icon']));
|
|
1713
1723
|
if (!iconsRegistered$4) {
|
|
1714
1724
|
iconsRegistered$4 = true;
|
|
1715
1725
|
console.log('Visibility icons registered successfully');
|
|
@@ -1765,13 +1775,13 @@ class NewResumeHeaderComponent {
|
|
|
1765
1775
|
*/
|
|
1766
1776
|
getButtonIcons(btn) {
|
|
1767
1777
|
// Check if this is an "add" button that should use special icons
|
|
1768
|
-
const isAddButton = btn.leftIcon === 'add' || btn.dataTestId === 'add-education-button';
|
|
1769
|
-
if (isAddButton) {
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
}
|
|
1778
|
+
// const isAddButton = btn.leftIcon === 'add' || btn.dataTestId === 'add-education-button';
|
|
1779
|
+
// if (isAddButton) {
|
|
1780
|
+
// return {
|
|
1781
|
+
// leftIcon: 'add_left-icon_section',
|
|
1782
|
+
// rightIcon: 'add-right_icon_section'
|
|
1783
|
+
// };
|
|
1784
|
+
// }
|
|
1775
1785
|
// Check if this is a "menu" button - keep the menu icon as is
|
|
1776
1786
|
if (btn.leftIcon === 'font_case_icon') {
|
|
1777
1787
|
return {
|
|
@@ -1792,34 +1802,34 @@ class NewResumeHeaderComponent {
|
|
|
1792
1802
|
* @param btn - The HeaderButton configuration
|
|
1793
1803
|
* @returns The tooltip text or undefined
|
|
1794
1804
|
*/
|
|
1795
|
-
getButtonTooltip(btn) {
|
|
1796
|
-
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
}
|
|
1805
|
+
// getButtonTooltip(btn: HeaderButton): string | undefined {
|
|
1806
|
+
// // Check if this is an "add" button that should have a specific tooltip
|
|
1807
|
+
// const isAddButton = btn.leftIcon === 'add' || btn.dataTestId === 'add-education-button';
|
|
1808
|
+
// if (isAddButton) {
|
|
1809
|
+
// return 'Add Section';
|
|
1810
|
+
// }
|
|
1811
|
+
// // Check if this is a "font_case_icon" button
|
|
1812
|
+
// if (btn.leftIcon === 'font_case_icon') {
|
|
1813
|
+
// return 'Font Case';
|
|
1814
|
+
// }
|
|
1815
|
+
// // Check if this is a "retry_AI_icon" button
|
|
1816
|
+
// if (btn.leftIcon === 'retry_AI_icon' || btn.dataTestId === 'refresh-button') {
|
|
1817
|
+
// return 'Retry initial Extraction';
|
|
1818
|
+
// }
|
|
1819
|
+
// // Check if this is a "collapse_icon" button
|
|
1820
|
+
// if (btn.leftIcon === 'collapse_icon' || btn.dataTestId === 'collapse-button') {
|
|
1821
|
+
// return 'Collapse Description';
|
|
1822
|
+
// }
|
|
1823
|
+
// // Check if this is an "ordering_icon" button
|
|
1824
|
+
// if (btn.leftIcon === 'ordering_icon') {
|
|
1825
|
+
// return 'Education Ordering';
|
|
1826
|
+
// }
|
|
1827
|
+
// // Check if this is the "Run Deep Extraction" button
|
|
1828
|
+
// if (btn.dataTestId === 'header-run-deep-extraction') {
|
|
1829
|
+
// return 'Deep Extraction';
|
|
1830
|
+
// }
|
|
1831
|
+
// return undefined;
|
|
1832
|
+
// }
|
|
1823
1833
|
onButtonClick(btn, event) {
|
|
1824
1834
|
// If button has a custom onClick handler, call it
|
|
1825
1835
|
if (btn.onClick) {
|
|
@@ -2031,7 +2041,7 @@ class NewResumeHeaderComponent {
|
|
|
2031
2041
|
}
|
|
2032
2042
|
}
|
|
2033
2043
|
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 }); }
|
|
2034
|
-
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 [ngClass]=\"{'header-hidden': isSectionHidden}\">\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><button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center\"\n [attr.aria-expanded]=\"accordionItem.expanded\"\n [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\"><span\n class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">expand_less </span><span\n class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">expand_more\n </span></button><ng-content select=\"[header-left]\"></ng-content></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]=\"getButtonTooltip(btn)\"\n [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}.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"] }] }); }
|
|
2044
|
+
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"] }] }); }
|
|
2035
2045
|
}
|
|
2036
2046
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderComponent, decorators: [{
|
|
2037
2047
|
type: Component,
|
|
@@ -2045,7 +2055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2045
2055
|
ResponsiveColumnsComponent,
|
|
2046
2056
|
CheckboxModule,
|
|
2047
2057
|
ButtonComponent
|
|
2048
|
-
], 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 [ngClass]=\"{'header-hidden': isSectionHidden}\">\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><button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center\"\n [attr.aria-expanded]=\"accordionItem.expanded\"\n [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\"><span\n class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">expand_less </span><span\n class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">expand_more\n </span></button><ng-content select=\"[header-left]\"></ng-content></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]=\"getButtonTooltip(btn)\"\n [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}.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"] }]
|
|
2058
|
+
], 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"] }]
|
|
2049
2059
|
}], ctorParameters: () => [{ type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i1.MatIconRegistry }], propDecorators: { title: [{
|
|
2050
2060
|
type: Input
|
|
2051
2061
|
}], showHeaderCheckbox: [{
|
|
@@ -2325,11 +2335,11 @@ class FieldPlaceholderComponent {
|
|
|
2325
2335
|
return !!icon && !icon.includes('/') && !icon.includes('.');
|
|
2326
2336
|
}
|
|
2327
2337
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2328
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FieldPlaceholderComponent, isStandalone: true, selector: "lib-field-placeholder", inputs: { value: "value", placeholder: "placeholder", tooltip: "tooltip", tooltipPosition: "tooltipPosition", testId: "testId", valueClass: "valueClass", placeholderClass: "placeholderClass", icon: "icon", iconAlt: "iconAlt", iconFont: "iconFont", compact: "compact", padded: "padded" }, ngImport: i0, template: "<div class=\"field-row\" [class.field-row-compact]=\"compact === true\" [class.field-row-padded]=\"padded === true\">\n <ng-container *ngIf=\"icon\">\n <span class=\"field-icon\">\n <ng-container *ngIf=\"isMaterialIcon(icon); else imageIcon\">\n <mat-icon [fontSet]=\"iconFont\">{{ icon }}</mat-icon>\n </ng-container>\n <ng-template #imageIcon>\n <img [src]=\"icon\" [alt]=\"iconAlt || 'icon'\" />\n </ng-template>\n </span>\n </ng-container>\n <span [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\"\n [ngClass]=\"value ? ['value-text', valueClass] : ['placeholder-text', placeholderClass]\" [attr.data-test-id]=\"testId\"\n [innerHTML]=\"value ? value : placeholder\">\n </span>\n\n</div>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@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=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}.placeholder-text{padding:4px 8px;letter-spacing:.25px;border-radius:4px;background-color:#e5e9fc;width:max-content;font-family:Open Sans,Arial,sans-serif;font-size:14px;font-weight:400;line-height:20px;color:#768fed}.field-row{display:flex;align-items:center;gap:8px}.field-row-compact{font-style:normal;line-height:140%;letter-spacing:.04px;height:28px}.field-row-padded{padding-top:8px;padding-bottom:8px}.field-icon{display:flex;align-items:center;justify-content:center}.field-icon,.field-icon img,.field-icon mat-icon{width:20px;height:20px;object-fit:contain;font-size:20px;line-height:20px;display:inline-flex;align-items:center;justify-content:center;color:#37c1ce}.value-text{display:inline;color:#717793!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
|
|
2338
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FieldPlaceholderComponent, isStandalone: true, selector: "lib-field-placeholder", inputs: { value: "value", placeholder: "placeholder", tooltip: "tooltip", tooltipPosition: "tooltipPosition", testId: "testId", valueClass: "valueClass", placeholderClass: "placeholderClass", icon: "icon", iconAlt: "iconAlt", iconFont: "iconFont", compact: "compact", padded: "padded" }, ngImport: i0, template: "<div class=\"field-row\" [class.field-row-compact]=\"compact === true\" [class.field-row-padded]=\"padded === true\">\n <ng-container *ngIf=\"icon\">\n <span class=\"field-icon\">\n <ng-container *ngIf=\"isMaterialIcon(icon); else imageIcon\">\n <mat-icon [fontSet]=\"iconFont\">{{ icon }}</mat-icon>\n </ng-container>\n <ng-template #imageIcon>\n <img [src]=\"icon\" [alt]=\"iconAlt || 'icon'\" />\n </ng-template>\n </span>\n </ng-container>\n <span [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!tooltip\"\n [ngClass]=\"value ? ['value-text', valueClass] : ['placeholder-text', placeholderClass]\" [attr.data-test-id]=\"testId\"\n [innerHTML]=\"value ? value : placeholder\">\n </span>\n\n</div>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@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=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}.placeholder-text{padding:4px 8px;letter-spacing:.25px;border-radius:4px;background-color:#e5e9fc;width:max-content;font-family:Open Sans,Arial,sans-serif;font-size:14px;font-weight:400;line-height:20px;color:#768fed}.field-row{display:flex;align-items:center;gap:8px}.field-row-compact{font-style:normal;line-height:140%;letter-spacing:.04px;min-height:28px;align-items:flex-start}.field-row-padded{padding-top:8px;padding-bottom:8px}.field-icon{display:flex;align-items:center;justify-content:center}.field-icon,.field-icon img,.field-icon mat-icon{width:20px;height:20px;object-fit:contain;font-size:20px;line-height:20px;display:inline-flex;align-items:center;justify-content:center;color:#37c1ce}.value-text{color:#717793!important}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
|
|
2329
2339
|
}
|
|
2330
2340
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldPlaceholderComponent, decorators: [{
|
|
2331
2341
|
type: Component,
|
|
2332
|
-
args: [{ selector: 'lib-field-placeholder', standalone: true, imports: [CommonModule, MatTooltipModule, MatIconModule], template: "<div class=\"field-row\" [class.field-row-compact]=\"compact === true\" [class.field-row-padded]=\"padded === true\">\n <ng-container *ngIf=\"icon\">\n <span class=\"field-icon\">\n <ng-container *ngIf=\"isMaterialIcon(icon); else imageIcon\">\n <mat-icon [fontSet]=\"iconFont\">{{ icon }}</mat-icon>\n </ng-container>\n <ng-template #imageIcon>\n <img [src]=\"icon\" [alt]=\"iconAlt || 'icon'\" />\n </ng-template>\n </span>\n </ng-container>\n <span [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\"\n [ngClass]=\"value ? ['value-text', valueClass] : ['placeholder-text', placeholderClass]\" [attr.data-test-id]=\"testId\"\n [innerHTML]=\"value ? value : placeholder\">\n </span>\n\n</div>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@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=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}.placeholder-text{padding:4px 8px;letter-spacing:.25px;border-radius:4px;background-color:#e5e9fc;width:max-content;font-family:Open Sans,Arial,sans-serif;font-size:14px;font-weight:400;line-height:20px;color:#768fed}.field-row{display:flex;align-items:center;gap:8px}.field-row-compact{font-style:normal;line-height:140%;letter-spacing:.04px;height:28px}.field-row-padded{padding-top:8px;padding-bottom:8px}.field-icon{display:flex;align-items:center;justify-content:center}.field-icon,.field-icon img,.field-icon mat-icon{width:20px;height:20px;object-fit:contain;font-size:20px;line-height:20px;display:inline-flex;align-items:center;justify-content:center;color:#37c1ce}.value-text{display:inline;color:#717793!important}\n"] }]
|
|
2342
|
+
args: [{ selector: 'lib-field-placeholder', standalone: true, imports: [CommonModule, MatTooltipModule, MatIconModule], template: "<div class=\"field-row\" [class.field-row-compact]=\"compact === true\" [class.field-row-padded]=\"padded === true\">\n <ng-container *ngIf=\"icon\">\n <span class=\"field-icon\">\n <ng-container *ngIf=\"isMaterialIcon(icon); else imageIcon\">\n <mat-icon [fontSet]=\"iconFont\">{{ icon }}</mat-icon>\n </ng-container>\n <ng-template #imageIcon>\n <img [src]=\"icon\" [alt]=\"iconAlt || 'icon'\" />\n </ng-template>\n </span>\n </ng-container>\n <span [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!tooltip\"\n [ngClass]=\"value ? ['value-text', valueClass] : ['placeholder-text', placeholderClass]\" [attr.data-test-id]=\"testId\"\n [innerHTML]=\"value ? value : placeholder\">\n </span>\n\n</div>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@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=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}.placeholder-text{padding:4px 8px;letter-spacing:.25px;border-radius:4px;background-color:#e5e9fc;width:max-content;font-family:Open Sans,Arial,sans-serif;font-size:14px;font-weight:400;line-height:20px;color:#768fed}.field-row{display:flex;align-items:center;gap:8px}.field-row-compact{font-style:normal;line-height:140%;letter-spacing:.04px;min-height:28px;align-items:flex-start}.field-row-padded{padding-top:8px;padding-bottom:8px}.field-icon{display:flex;align-items:center;justify-content:center}.field-icon,.field-icon img,.field-icon mat-icon{width:20px;height:20px;object-fit:contain;font-size:20px;line-height:20px;display:inline-flex;align-items:center;justify-content:center;color:#37c1ce}.value-text{color:#717793!important}.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}\n"] }]
|
|
2333
2343
|
}], propDecorators: { value: [{
|
|
2334
2344
|
type: Input
|
|
2335
2345
|
}], placeholder: [{
|
|
@@ -2359,8 +2369,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2359
2369
|
// Wrapper for Angular Material mat-checkbox (template for candidate section)
|
|
2360
2370
|
class CandidateSectionComponent {
|
|
2361
2371
|
constructor() {
|
|
2372
|
+
/**
|
|
2373
|
+
* When true, layout switches from 3 columns to "2-column" stacked layout.
|
|
2374
|
+
* This is driven by the container width (not screen size) and uses a 600px breakpoint.
|
|
2375
|
+
*/
|
|
2376
|
+
this.isNarrowLayout = false;
|
|
2362
2377
|
this.useCustomHeader = false;
|
|
2363
2378
|
}
|
|
2379
|
+
ngAfterViewInit() {
|
|
2380
|
+
// Initial measurement
|
|
2381
|
+
this.updateLayoutBreakpoint();
|
|
2382
|
+
// Watch container size so layout responds to container width, not viewport width
|
|
2383
|
+
if (this.candidateContainer?.nativeElement && typeof ResizeObserver !== 'undefined') {
|
|
2384
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
2385
|
+
this.updateLayoutBreakpoint();
|
|
2386
|
+
});
|
|
2387
|
+
this.resizeObserver.observe(this.candidateContainer.nativeElement);
|
|
2388
|
+
}
|
|
2389
|
+
}
|
|
2390
|
+
ngOnDestroy() {
|
|
2391
|
+
if (this.resizeObserver) {
|
|
2392
|
+
this.resizeObserver.disconnect();
|
|
2393
|
+
this.resizeObserver = undefined;
|
|
2394
|
+
}
|
|
2395
|
+
}
|
|
2396
|
+
/**
|
|
2397
|
+
* Sets isNarrowLayout based on the current container width.
|
|
2398
|
+
* Uses 600px as the breakpoint where the layout switches from 3 to 2 columns.
|
|
2399
|
+
*/
|
|
2400
|
+
updateLayoutBreakpoint() {
|
|
2401
|
+
let width = 0;
|
|
2402
|
+
if (this.candidateContainer?.nativeElement) {
|
|
2403
|
+
const el = this.candidateContainer.nativeElement;
|
|
2404
|
+
width = el.offsetWidth || el.clientWidth || 0;
|
|
2405
|
+
}
|
|
2406
|
+
// Fallback to window width if container width is not available
|
|
2407
|
+
if (!width && typeof window !== 'undefined') {
|
|
2408
|
+
width = window.innerWidth;
|
|
2409
|
+
}
|
|
2410
|
+
this.isNarrowLayout = width < 600;
|
|
2411
|
+
}
|
|
2364
2412
|
shouldShow(...keys) {
|
|
2365
2413
|
if (keys.length === 0) {
|
|
2366
2414
|
// If no specific keys are provided, default to visible unless force-show is explicitly false
|
|
@@ -2432,12 +2480,15 @@ class CandidateSectionComponent {
|
|
|
2432
2480
|
return getIconCandidateSection('candidate_most_recent');
|
|
2433
2481
|
}
|
|
2434
2482
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CandidateSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2435
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CandidateSectionComponent, selector: "al-candidate-section", inputs: { useCustomHeader: "useCustomHeader", candidateDetails: "candidateDetails", getFieldNotHidden: "getFieldNotHidden", getForceShowAllFields: "getForceShowAllFields", resumeService: "resumeService", fieldVisibilityKeys: "fieldVisibilityKeys" }, ngImport: i0, template: "<div class=\"candidate-container\">\n <div class=\"columns-wrapper\">\n <div class=\"column first-column\">\n <div class=\"container\" data-test-id=\"candidate-section-name-container\"\n [ngClass]=\"shouldShowFor('name', []) ? '' : 'not-in-template'\"><lib-field-placeholder [icon]=\"getIconName()\"\n [value]=\"candidateDetails?.firstName && candidateDetails?.lastName ? candidateDetails?.firstName + ' ' + candidateDetails?.lastName : candidateDetails?.firstName || candidateDetails?.lastName\"\n [placeholder]=\"'Name'\" [tooltip]=\"candidateDetails?.firstName + ' ' + candidateDetails?.lastName\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-name'\" [valueClass]=\"'typo-description'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div class=\"container\" data-test-id=\"candidate-section-gender-container\"\n [ngClass]=\"shouldShowFor('gender', []) ? '' : 'not-in-template'\"><lib-field-placeholder [icon]=\"getIconGender()\"\n [value]=\"candidateDetails?.userAssignedGender\" [placeholder]=\"'Gender'\"\n [tooltip]=\"candidateDetails?.userAssignedGender\" tooltipPosition=\"right\" [testId]=\"'candidate-section-gender'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n <div class=\"container\" data-test-id=\"candidate-section-phone-container\"\n [ngClass]=\"shouldShowFor('phone', []) ? '' : 'not-in-template'\"><lib-field-placeholder [icon]=\"getIconPhone()\"\n [value]=\"candidateDetails?.phoneNumber\" [placeholder]=\"'Phone Number'\"\n [tooltip]=\"candidateDetails?.phoneNumber\" tooltipPosition=\"right\" [testId]=\"'candidate-section-phone'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n <div class=\"container\" data-test-id=\"candidate-section-email-container\"\n [ngClass]=\"shouldShowFor('email', []) ? '' : 'not-in-template'\"><lib-field-placeholder [icon]=\"getIconEmail()\"\n [value]=\"candidateDetails?.emailAddress\" [placeholder]=\"'Email Address'\"\n [tooltip]=\"candidateDetails?.emailAddress\" tooltipPosition=\"right\" [testId]=\"'candidate-section-email'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n <div class=\"container\" data-test-id=\"candidate-section-linkedin-container\"\n [ngClass]=\"shouldShowFor('linkedin', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [icon]=\"getIconLinkedIn()\" iconAlt=\"LinkedIn\" [value]=\"candidateDetails?.linkedin\" [placeholder]=\"'LinkedIn'\"\n [tooltip]=\"candidateDetails?.linkedin\" tooltipPosition=\"right\" [testId]=\"'candidate-section-linkedin'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n </div>\n <div class=\"column second-column\">\n <div data-test-id=\"candidate-section-address-container\"\n [ngClass]=\"shouldShowFor('address', []) ? '' : 'not-in-template'\">\n <div [ngClass]=\"shouldShowFor('addressStreet', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [icon]=\"getIconAddress()\" [value]=\"candidateDetails?.street\" [placeholder]=\"'Street'\"\n [tooltip]=\"candidateDetails?.street\" tooltipPosition=\"right\" [testId]=\"'candidate-section-address-street'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressCity', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.city\" [placeholder]=\"'City'\" [tooltip]=\"candidateDetails?.city\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-address-city'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressRegion', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.region\" [placeholder]=\"'Region'\" [tooltip]=\"candidateDetails?.region\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-address-region'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressRegionCode', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.regionCode\" [placeholder]=\"'Region Code'\"\n [tooltip]=\"candidateDetails?.regionCode\" tooltipPosition=\"right\"\n [testId]=\"'candidate-section-address-region-code'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressCountry', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.country\" [placeholder]=\"'Country'\" [tooltip]=\"candidateDetails?.country\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-address-country'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressPostCode', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.postCode\" [placeholder]=\"'Post Code'\" [tooltip]=\"candidateDetails?.postCode\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-address-post-code'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n </div>\n </div>\n </div>\n <div class=\"column third-column\">\n <div class=\"container most-recent-container\" data-test-id=\"candidate-section-current-employer-container\">\n <div [ngClass]=\"shouldShowFor('currentJob', []) || shouldShowFor('currentEmployer', []) ? '' : 'not-in-template'\">\n <lib-field-placeholder [icon]=\"getIconMostRecent()\"\n [value]=\"(getCurrentJob() || getCurrentEmployer()) ? 'Most Recently : <span class=\\'most-recent-inline\\'>' + (getCurrentJob() ? '<span class=\\'total-exp-value\\'>' + getCurrentJob() + '</span>' : '') + (getCurrentEmployer() ? (getCurrentJob() ? ' at <span class=\\'total-exp-value\\'>' + getCurrentEmployer() + '</span>' : '<span class=\\'total-exp-value\\'>' + getCurrentEmployer() + '</span>') : '') + '</span>' : ''\"\n [placeholder]=\"'Current Job'\"\n [tooltip]=\"(getCurrentJob() || getCurrentEmployer()) ? 'Most Recently : ' + getCurrentJob() + (getCurrentEmployer() ? ' at ' + getCurrentEmployer() : '') : 'Current Job'\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-current-job'\" [valueClass]=\"'typo-description'\"\n [compact]=\"true\"></lib-field-placeholder>\n <div class=\"most-recent-details\">\n <div class=\"current-job-title\" *ngIf=\"getCurrentJob()\">{{getCurrentJob()}}</div>\n <div class=\"current-employer\" *ngIf=\"getCurrentEmployer()\">{{getCurrentEmployer()}}</div>\n </div>\n </div>\n </div>\n <div class=\"total-exp-parent container\" data-test-id=\"candidate-section-total-exp-parent\"\n [ngClass]=\"shouldShowFor('experience', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [icon]=\"getIconExperience()\"\n [value]=\"getTotalExpYears() ? 'Total Exp - <span class=\\'total-exp-value\\'>' + getTotalExpYears() + '</span> yrs' : ''\"\n [placeholder]=\"'Total Exp'\"\n [tooltip]=\"getTotalExpYears() ? 'Total Exp - ' + getTotalExpYears() + ' yrs' : 'Total Exp'\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-total-exp-value'\" [valueClass]=\"'typo-description'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n </div>\n</div>", 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}: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{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}.candidate-container{display:flex;flex-direction:row;gap:16px;padding-top:8px}.columns-wrapper{display:flex;flex-direction:row;gap:24px;flex:1 1 0}.value-text,.placeholder-text{display:flex;align-items:center;height:100%;line-height:normal!important;position:relative;top:2px}.columns-wrapper .first-column{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;flex:1 0 0}.columns-wrapper .second-column{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.third-column{display:flex;flex-direction:column;gap:12px}.column{display:flex;flex-direction:column;flex:1 0 0}.column.has-value{gap:24px}.column.no-value{gap:8px}.container{display:flex;flex-direction:column;gap:16px}::ng-deep .total-exp-value{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.035px}.most-recent-details{display:none}.current-job-title{display:flex;align-items:center;height:28px;font-weight:700;color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif;font-size:14px;line-height:140%;letter-spacing:.035px}.current-employer{display:flex;align-items:center;height:28px;font-style:italic;color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif;font-size:14px;line-height:140%;letter-spacing:.035px}@media (min-width: 1500px){.most-recent-container ::ng-deep .field-row .value-text span.most-recent-inline{display:none}.most-recent-details{display:flex;flex-direction:column;gap:0;padding-left:28px}}@media (max-width: 1499px){.candidate-container{display:flex;flex-direction:column;gap:16px;padding-top:8px}.columns-wrapper{display:flex;flex-direction:row;gap:24px}.third-column{display:flex;flex-direction:column;gap:8px;width:100%;order:2}.third-column .most-recent-container{order:1}.third-column .total-exp-parent{order:2}}::ng-deep .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;min-height:28px!important;display:flex!important;top:2px!important;position:relative!important;align-items:center!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] }); }
|
|
2483
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CandidateSectionComponent, selector: "al-candidate-section", inputs: { useCustomHeader: "useCustomHeader", candidateDetails: "candidateDetails", getFieldNotHidden: "getFieldNotHidden", getForceShowAllFields: "getForceShowAllFields", resumeService: "resumeService", fieldVisibilityKeys: "fieldVisibilityKeys" }, viewQueries: [{ propertyName: "candidateContainer", first: true, predicate: ["candidateContainer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"candidate-container\" #candidateContainer [ngClass]=\"{ 'narrow-layout': isNarrowLayout }\">\n <div class=\"columns-wrapper\">\n <div class=\"column first-column\">\n <div class=\"container\" data-test-id=\"candidate-section-name-container\"\n [ngClass]=\"shouldShowFor('name', []) ? '' : 'not-in-template'\"><lib-field-placeholder [icon]=\"getIconName()\"\n [value]=\"candidateDetails?.firstName && candidateDetails?.lastName ? candidateDetails?.firstName + ' ' + candidateDetails?.lastName : candidateDetails?.firstName || candidateDetails?.lastName\"\n [placeholder]=\"'Name'\" [tooltip]=\"candidateDetails?.firstName + ' ' + candidateDetails?.lastName\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-name'\" [valueClass]=\"'typo-description'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div class=\"container\" data-test-id=\"candidate-section-gender-container\"\n [ngClass]=\"shouldShowFor('gender', []) ? '' : 'not-in-template'\"><lib-field-placeholder [icon]=\"getIconGender()\"\n [value]=\"candidateDetails?.userAssignedGender\" [placeholder]=\"'Gender'\"\n [tooltip]=\"candidateDetails?.userAssignedGender\" tooltipPosition=\"right\" [testId]=\"'candidate-section-gender'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n <div class=\"container\" data-test-id=\"candidate-section-phone-container\"\n [ngClass]=\"shouldShowFor('phone', []) ? '' : 'not-in-template'\"><lib-field-placeholder [icon]=\"getIconPhone()\"\n [value]=\"candidateDetails?.phoneNumber\" [placeholder]=\"'Phone Number'\"\n [tooltip]=\"candidateDetails?.phoneNumber\" tooltipPosition=\"right\" [testId]=\"'candidate-section-phone'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n <div class=\"container\" data-test-id=\"candidate-section-email-container\"\n [ngClass]=\"shouldShowFor('email', []) ? '' : 'not-in-template'\"><lib-field-placeholder [icon]=\"getIconEmail()\"\n [value]=\"candidateDetails?.emailAddress\" [placeholder]=\"'Email Address'\"\n [tooltip]=\"candidateDetails?.emailAddress\" tooltipPosition=\"right\" [testId]=\"'candidate-section-email'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n <div class=\"container\" data-test-id=\"candidate-section-linkedin-container\"\n [ngClass]=\"shouldShowFor('linkedin', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [icon]=\"getIconLinkedIn()\" iconAlt=\"LinkedIn\" [value]=\"candidateDetails?.linkedin\" [placeholder]=\"'LinkedIn'\"\n [tooltip]=\"candidateDetails?.linkedin\" tooltipPosition=\"right\" [testId]=\"'candidate-section-linkedin'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n </div>\n <div class=\"column second-column\">\n <div data-test-id=\"candidate-section-address-container\"\n [ngClass]=\"shouldShowFor('address', []) ? '' : 'not-in-template'\">\n <div [ngClass]=\"shouldShowFor('addressStreet', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [icon]=\"getIconAddress()\" [value]=\"candidateDetails?.street\" [placeholder]=\"'Street'\"\n [tooltip]=\"candidateDetails?.street\" tooltipPosition=\"right\" [testId]=\"'candidate-section-address-street'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressCity', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.city\" [placeholder]=\"'City'\" [tooltip]=\"candidateDetails?.city\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-address-city'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressRegion', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.region\" [placeholder]=\"'Region'\" [tooltip]=\"candidateDetails?.region\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-address-region'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressRegionCode', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.regionCode\" [placeholder]=\"'Region Code'\"\n [tooltip]=\"candidateDetails?.regionCode\" tooltipPosition=\"right\"\n [testId]=\"'candidate-section-address-region-code'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressCountry', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.country\" [placeholder]=\"'Country'\" [tooltip]=\"candidateDetails?.country\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-address-country'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressPostCode', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.postCode\" [placeholder]=\"'Post Code'\" [tooltip]=\"candidateDetails?.postCode\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-address-post-code'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n </div>\n </div>\n </div>\n <div class=\"column third-column\">\n <div class=\"container most-recent-container\" data-test-id=\"candidate-section-current-employer-container\">\n <div [ngClass]=\"shouldShowFor('currentJob', []) || shouldShowFor('currentEmployer', []) ? '' : 'not-in-template'\">\n <lib-field-placeholder [icon]=\"getIconMostRecent()\"\n [value]=\"(getCurrentJob() || getCurrentEmployer()) ? 'Most Recently : <span class=\\'most-recent-inline\\'>' + (getCurrentJob() ? '<span class=\\'total-exp-value\\'>' + getCurrentJob() + '</span>' : '') + (getCurrentEmployer() ? (getCurrentJob() ? ' at <span class=\\'total-exp-value\\'>' + getCurrentEmployer() + '</span>' : '<span class=\\'total-exp-value\\'>' + getCurrentEmployer() + '</span>') : '') + '</span>' : ''\"\n [placeholder]=\"'Current Job'\"\n [tooltip]=\"(getCurrentJob() || getCurrentEmployer()) ? 'Most Recently : ' + getCurrentJob() + (getCurrentEmployer() ? ' at ' + getCurrentEmployer() : '') : 'Current Job'\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-current-job'\" [valueClass]=\"'typo-description'\"\n [compact]=\"true\"></lib-field-placeholder>\n <div class=\"most-recent-details\">\n <div class=\"current-job-title\" *ngIf=\"getCurrentJob()\">{{getCurrentJob()}}</div>\n <div class=\"current-employer\" *ngIf=\"getCurrentEmployer()\">{{getCurrentEmployer()}}</div>\n </div>\n </div>\n </div>\n <div class=\"total-exp-parent container\" data-test-id=\"candidate-section-total-exp-parent\"\n [ngClass]=\"shouldShowFor('experience', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [icon]=\"getIconExperience()\"\n [value]=\"getTotalExpYears() ? 'Total Exp - <span class=\\'total-exp-value\\'>' + getTotalExpYears() + '</span> yrs' : ''\"\n [placeholder]=\"'Total Exp'\"\n [tooltip]=\"getTotalExpYears() ? 'Total Exp - ' + getTotalExpYears() + ' yrs' : 'Total Exp'\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-total-exp-value'\" [valueClass]=\"'typo-description'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n </div>\n</div>", 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}: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{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}.candidate-container{display:flex;flex-direction:row;gap:16px;padding-top:8px}.columns-wrapper{display:flex;flex-direction:row;gap:24px;flex:1 1 0}.value-text,.placeholder-text{display:flex;align-items:center;height:100%;line-height:normal!important;position:relative;top:2px}.columns-wrapper .first-column{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;flex:1 0 0}.columns-wrapper .second-column{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.columns-wrapper .second-column [data-test-id=candidate-section-address-container]{display:flex;flex-direction:column;row-gap:4px}.third-column{display:flex;flex-direction:column;gap:12px}.column{display:flex;flex-direction:column;flex:1 0 0}.column.has-value{gap:24px}.column.no-value{gap:8px}.container{display:flex;flex-direction:column;gap:16px}::ng-deep .total-exp-value{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.035px}.most-recent-details{display:none}.current-job-title{display:flex;align-items:center;height:28px;font-weight:700;color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif;font-size:14px;line-height:140%;letter-spacing:.035px}.current-employer{display:flex;align-items:center;height:28px;font-style:italic;color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif;font-size:14px;line-height:140%;letter-spacing:.035px}@media (min-width: 1500px){.most-recent-container ::ng-deep .field-row .value-text span.most-recent-inline{display:none}.most-recent-details{display:flex;flex-direction:column;gap:0;padding-left:28px}}.candidate-container.narrow-layout{display:flex;flex-direction:column;gap:16px;padding-top:8px}.candidate-container.narrow-layout .columns-wrapper{display:flex;flex-direction:row;gap:24px}.candidate-container.narrow-layout .third-column{display:flex;flex-direction:column;gap:8px;width:100%;order:2}.candidate-container.narrow-layout .third-column .most-recent-container{order:1}.candidate-container.narrow-layout .third-column .total-exp-parent{order:2}::ng-deep .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;min-height:28px!important;display:flex!important;top:2px!important;position:relative!important;align-items:center!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] }); }
|
|
2436
2484
|
}
|
|
2437
2485
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CandidateSectionComponent, decorators: [{
|
|
2438
2486
|
type: Component,
|
|
2439
|
-
args: [{ selector: 'al-candidate-section', template: "<div class=\"candidate-container\">\n <div class=\"columns-wrapper\">\n <div class=\"column first-column\">\n <div class=\"container\" data-test-id=\"candidate-section-name-container\"\n [ngClass]=\"shouldShowFor('name', []) ? '' : 'not-in-template'\"><lib-field-placeholder [icon]=\"getIconName()\"\n [value]=\"candidateDetails?.firstName && candidateDetails?.lastName ? candidateDetails?.firstName + ' ' + candidateDetails?.lastName : candidateDetails?.firstName || candidateDetails?.lastName\"\n [placeholder]=\"'Name'\" [tooltip]=\"candidateDetails?.firstName + ' ' + candidateDetails?.lastName\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-name'\" [valueClass]=\"'typo-description'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div class=\"container\" data-test-id=\"candidate-section-gender-container\"\n [ngClass]=\"shouldShowFor('gender', []) ? '' : 'not-in-template'\"><lib-field-placeholder [icon]=\"getIconGender()\"\n [value]=\"candidateDetails?.userAssignedGender\" [placeholder]=\"'Gender'\"\n [tooltip]=\"candidateDetails?.userAssignedGender\" tooltipPosition=\"right\" [testId]=\"'candidate-section-gender'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n <div class=\"container\" data-test-id=\"candidate-section-phone-container\"\n [ngClass]=\"shouldShowFor('phone', []) ? '' : 'not-in-template'\"><lib-field-placeholder [icon]=\"getIconPhone()\"\n [value]=\"candidateDetails?.phoneNumber\" [placeholder]=\"'Phone Number'\"\n [tooltip]=\"candidateDetails?.phoneNumber\" tooltipPosition=\"right\" [testId]=\"'candidate-section-phone'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n <div class=\"container\" data-test-id=\"candidate-section-email-container\"\n [ngClass]=\"shouldShowFor('email', []) ? '' : 'not-in-template'\"><lib-field-placeholder [icon]=\"getIconEmail()\"\n [value]=\"candidateDetails?.emailAddress\" [placeholder]=\"'Email Address'\"\n [tooltip]=\"candidateDetails?.emailAddress\" tooltipPosition=\"right\" [testId]=\"'candidate-section-email'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n <div class=\"container\" data-test-id=\"candidate-section-linkedin-container\"\n [ngClass]=\"shouldShowFor('linkedin', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [icon]=\"getIconLinkedIn()\" iconAlt=\"LinkedIn\" [value]=\"candidateDetails?.linkedin\" [placeholder]=\"'LinkedIn'\"\n [tooltip]=\"candidateDetails?.linkedin\" tooltipPosition=\"right\" [testId]=\"'candidate-section-linkedin'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n </div>\n <div class=\"column second-column\">\n <div data-test-id=\"candidate-section-address-container\"\n [ngClass]=\"shouldShowFor('address', []) ? '' : 'not-in-template'\">\n <div [ngClass]=\"shouldShowFor('addressStreet', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [icon]=\"getIconAddress()\" [value]=\"candidateDetails?.street\" [placeholder]=\"'Street'\"\n [tooltip]=\"candidateDetails?.street\" tooltipPosition=\"right\" [testId]=\"'candidate-section-address-street'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressCity', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.city\" [placeholder]=\"'City'\" [tooltip]=\"candidateDetails?.city\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-address-city'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressRegion', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.region\" [placeholder]=\"'Region'\" [tooltip]=\"candidateDetails?.region\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-address-region'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressRegionCode', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.regionCode\" [placeholder]=\"'Region Code'\"\n [tooltip]=\"candidateDetails?.regionCode\" tooltipPosition=\"right\"\n [testId]=\"'candidate-section-address-region-code'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressCountry', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.country\" [placeholder]=\"'Country'\" [tooltip]=\"candidateDetails?.country\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-address-country'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressPostCode', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.postCode\" [placeholder]=\"'Post Code'\" [tooltip]=\"candidateDetails?.postCode\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-address-post-code'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n </div>\n </div>\n </div>\n <div class=\"column third-column\">\n <div class=\"container most-recent-container\" data-test-id=\"candidate-section-current-employer-container\">\n <div [ngClass]=\"shouldShowFor('currentJob', []) || shouldShowFor('currentEmployer', []) ? '' : 'not-in-template'\">\n <lib-field-placeholder [icon]=\"getIconMostRecent()\"\n [value]=\"(getCurrentJob() || getCurrentEmployer()) ? 'Most Recently : <span class=\\'most-recent-inline\\'>' + (getCurrentJob() ? '<span class=\\'total-exp-value\\'>' + getCurrentJob() + '</span>' : '') + (getCurrentEmployer() ? (getCurrentJob() ? ' at <span class=\\'total-exp-value\\'>' + getCurrentEmployer() + '</span>' : '<span class=\\'total-exp-value\\'>' + getCurrentEmployer() + '</span>') : '') + '</span>' : ''\"\n [placeholder]=\"'Current Job'\"\n [tooltip]=\"(getCurrentJob() || getCurrentEmployer()) ? 'Most Recently : ' + getCurrentJob() + (getCurrentEmployer() ? ' at ' + getCurrentEmployer() : '') : 'Current Job'\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-current-job'\" [valueClass]=\"'typo-description'\"\n [compact]=\"true\"></lib-field-placeholder>\n <div class=\"most-recent-details\">\n <div class=\"current-job-title\" *ngIf=\"getCurrentJob()\">{{getCurrentJob()}}</div>\n <div class=\"current-employer\" *ngIf=\"getCurrentEmployer()\">{{getCurrentEmployer()}}</div>\n </div>\n </div>\n </div>\n <div class=\"total-exp-parent container\" data-test-id=\"candidate-section-total-exp-parent\"\n [ngClass]=\"shouldShowFor('experience', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [icon]=\"getIconExperience()\"\n [value]=\"getTotalExpYears() ? 'Total Exp - <span class=\\'total-exp-value\\'>' + getTotalExpYears() + '</span> yrs' : ''\"\n [placeholder]=\"'Total Exp'\"\n [tooltip]=\"getTotalExpYears() ? 'Total Exp - ' + getTotalExpYears() + ' yrs' : 'Total Exp'\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-total-exp-value'\" [valueClass]=\"'typo-description'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n </div>\n</div>", 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}: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{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}.candidate-container{display:flex;flex-direction:row;gap:16px;padding-top:8px}.columns-wrapper{display:flex;flex-direction:row;gap:24px;flex:1 1 0}.value-text,.placeholder-text{display:flex;align-items:center;height:100%;line-height:normal!important;position:relative;top:2px}.columns-wrapper .first-column{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;flex:1 0 0}.columns-wrapper .second-column{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.third-column{display:flex;flex-direction:column;gap:12px}.column{display:flex;flex-direction:column;flex:1 0 0}.column.has-value{gap:24px}.column.no-value{gap:8px}.container{display:flex;flex-direction:column;gap:16px}::ng-deep .total-exp-value{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.035px}.most-recent-details{display:none}.current-job-title{display:flex;align-items:center;height:28px;font-weight:700;color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif;font-size:14px;line-height:140%;letter-spacing:.035px}.current-employer{display:flex;align-items:center;height:28px;font-style:italic;color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif;font-size:14px;line-height:140%;letter-spacing:.035px}@media (min-width: 1500px){.most-recent-container ::ng-deep .field-row .value-text span.most-recent-inline{display:none}.most-recent-details{display:flex;flex-direction:column;gap:0;padding-left:28px}}@media (max-width: 1499px){.candidate-container{display:flex;flex-direction:column;gap:16px;padding-top:8px}.columns-wrapper{display:flex;flex-direction:row;gap:24px}.third-column{display:flex;flex-direction:column;gap:8px;width:100%;order:2}.third-column .most-recent-container{order:1}.third-column .total-exp-parent{order:2}}::ng-deep .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;min-height:28px!important;display:flex!important;top:2px!important;position:relative!important;align-items:center!important}\n"] }]
|
|
2440
|
-
}], propDecorators: {
|
|
2487
|
+
args: [{ selector: 'al-candidate-section', template: "<div class=\"candidate-container\" #candidateContainer [ngClass]=\"{ 'narrow-layout': isNarrowLayout }\">\n <div class=\"columns-wrapper\">\n <div class=\"column first-column\">\n <div class=\"container\" data-test-id=\"candidate-section-name-container\"\n [ngClass]=\"shouldShowFor('name', []) ? '' : 'not-in-template'\"><lib-field-placeholder [icon]=\"getIconName()\"\n [value]=\"candidateDetails?.firstName && candidateDetails?.lastName ? candidateDetails?.firstName + ' ' + candidateDetails?.lastName : candidateDetails?.firstName || candidateDetails?.lastName\"\n [placeholder]=\"'Name'\" [tooltip]=\"candidateDetails?.firstName + ' ' + candidateDetails?.lastName\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-name'\" [valueClass]=\"'typo-description'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div class=\"container\" data-test-id=\"candidate-section-gender-container\"\n [ngClass]=\"shouldShowFor('gender', []) ? '' : 'not-in-template'\"><lib-field-placeholder [icon]=\"getIconGender()\"\n [value]=\"candidateDetails?.userAssignedGender\" [placeholder]=\"'Gender'\"\n [tooltip]=\"candidateDetails?.userAssignedGender\" tooltipPosition=\"right\" [testId]=\"'candidate-section-gender'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n <div class=\"container\" data-test-id=\"candidate-section-phone-container\"\n [ngClass]=\"shouldShowFor('phone', []) ? '' : 'not-in-template'\"><lib-field-placeholder [icon]=\"getIconPhone()\"\n [value]=\"candidateDetails?.phoneNumber\" [placeholder]=\"'Phone Number'\"\n [tooltip]=\"candidateDetails?.phoneNumber\" tooltipPosition=\"right\" [testId]=\"'candidate-section-phone'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n <div class=\"container\" data-test-id=\"candidate-section-email-container\"\n [ngClass]=\"shouldShowFor('email', []) ? '' : 'not-in-template'\"><lib-field-placeholder [icon]=\"getIconEmail()\"\n [value]=\"candidateDetails?.emailAddress\" [placeholder]=\"'Email Address'\"\n [tooltip]=\"candidateDetails?.emailAddress\" tooltipPosition=\"right\" [testId]=\"'candidate-section-email'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n <div class=\"container\" data-test-id=\"candidate-section-linkedin-container\"\n [ngClass]=\"shouldShowFor('linkedin', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [icon]=\"getIconLinkedIn()\" iconAlt=\"LinkedIn\" [value]=\"candidateDetails?.linkedin\" [placeholder]=\"'LinkedIn'\"\n [tooltip]=\"candidateDetails?.linkedin\" tooltipPosition=\"right\" [testId]=\"'candidate-section-linkedin'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n </div>\n <div class=\"column second-column\">\n <div data-test-id=\"candidate-section-address-container\"\n [ngClass]=\"shouldShowFor('address', []) ? '' : 'not-in-template'\">\n <div [ngClass]=\"shouldShowFor('addressStreet', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [icon]=\"getIconAddress()\" [value]=\"candidateDetails?.street\" [placeholder]=\"'Street'\"\n [tooltip]=\"candidateDetails?.street\" tooltipPosition=\"right\" [testId]=\"'candidate-section-address-street'\"\n [valueClass]=\"'typo-description'\" [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressCity', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.city\" [placeholder]=\"'City'\" [tooltip]=\"candidateDetails?.city\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-address-city'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressRegion', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.region\" [placeholder]=\"'Region'\" [tooltip]=\"candidateDetails?.region\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-address-region'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressRegionCode', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.regionCode\" [placeholder]=\"'Region Code'\"\n [tooltip]=\"candidateDetails?.regionCode\" tooltipPosition=\"right\"\n [testId]=\"'candidate-section-address-region-code'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressCountry', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.country\" [placeholder]=\"'Country'\" [tooltip]=\"candidateDetails?.country\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-address-country'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div [ngClass]=\"shouldShowFor('addressPostCode', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [value]=\"candidateDetails?.postCode\" [placeholder]=\"'Post Code'\" [tooltip]=\"candidateDetails?.postCode\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-address-post-code'\" [valueClass]=\"'typo-description'\"\n [icon]=\"'data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3C%2Fsvg%3E'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n </div>\n </div>\n </div>\n <div class=\"column third-column\">\n <div class=\"container most-recent-container\" data-test-id=\"candidate-section-current-employer-container\">\n <div [ngClass]=\"shouldShowFor('currentJob', []) || shouldShowFor('currentEmployer', []) ? '' : 'not-in-template'\">\n <lib-field-placeholder [icon]=\"getIconMostRecent()\"\n [value]=\"(getCurrentJob() || getCurrentEmployer()) ? 'Most Recently : <span class=\\'most-recent-inline\\'>' + (getCurrentJob() ? '<span class=\\'total-exp-value\\'>' + getCurrentJob() + '</span>' : '') + (getCurrentEmployer() ? (getCurrentJob() ? ' at <span class=\\'total-exp-value\\'>' + getCurrentEmployer() + '</span>' : '<span class=\\'total-exp-value\\'>' + getCurrentEmployer() + '</span>') : '') + '</span>' : ''\"\n [placeholder]=\"'Current Job'\"\n [tooltip]=\"(getCurrentJob() || getCurrentEmployer()) ? 'Most Recently : ' + getCurrentJob() + (getCurrentEmployer() ? ' at ' + getCurrentEmployer() : '') : 'Current Job'\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-current-job'\" [valueClass]=\"'typo-description'\"\n [compact]=\"true\"></lib-field-placeholder>\n <div class=\"most-recent-details\">\n <div class=\"current-job-title\" *ngIf=\"getCurrentJob()\">{{getCurrentJob()}}</div>\n <div class=\"current-employer\" *ngIf=\"getCurrentEmployer()\">{{getCurrentEmployer()}}</div>\n </div>\n </div>\n </div>\n <div class=\"total-exp-parent container\" data-test-id=\"candidate-section-total-exp-parent\"\n [ngClass]=\"shouldShowFor('experience', []) ? '' : 'not-in-template'\"><lib-field-placeholder\n [icon]=\"getIconExperience()\"\n [value]=\"getTotalExpYears() ? 'Total Exp - <span class=\\'total-exp-value\\'>' + getTotalExpYears() + '</span> yrs' : ''\"\n [placeholder]=\"'Total Exp'\"\n [tooltip]=\"getTotalExpYears() ? 'Total Exp - ' + getTotalExpYears() + ' yrs' : 'Total Exp'\"\n tooltipPosition=\"right\" [testId]=\"'candidate-section-total-exp-value'\" [valueClass]=\"'typo-description'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n </div>\n</div>", 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}: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{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}.candidate-container{display:flex;flex-direction:row;gap:16px;padding-top:8px}.columns-wrapper{display:flex;flex-direction:row;gap:24px;flex:1 1 0}.value-text,.placeholder-text{display:flex;align-items:center;height:100%;line-height:normal!important;position:relative;top:2px}.columns-wrapper .first-column{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;flex:1 0 0}.columns-wrapper .second-column{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.columns-wrapper .second-column [data-test-id=candidate-section-address-container]{display:flex;flex-direction:column;row-gap:4px}.third-column{display:flex;flex-direction:column;gap:12px}.column{display:flex;flex-direction:column;flex:1 0 0}.column.has-value{gap:24px}.column.no-value{gap:8px}.container{display:flex;flex-direction:column;gap:16px}::ng-deep .total-exp-value{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif;font-size:14px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.035px}.most-recent-details{display:none}.current-job-title{display:flex;align-items:center;height:28px;font-weight:700;color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif;font-size:14px;line-height:140%;letter-spacing:.035px}.current-employer{display:flex;align-items:center;height:28px;font-style:italic;color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif;font-size:14px;line-height:140%;letter-spacing:.035px}@media (min-width: 1500px){.most-recent-container ::ng-deep .field-row .value-text span.most-recent-inline{display:none}.most-recent-details{display:flex;flex-direction:column;gap:0;padding-left:28px}}.candidate-container.narrow-layout{display:flex;flex-direction:column;gap:16px;padding-top:8px}.candidate-container.narrow-layout .columns-wrapper{display:flex;flex-direction:row;gap:24px}.candidate-container.narrow-layout .third-column{display:flex;flex-direction:column;gap:8px;width:100%;order:2}.candidate-container.narrow-layout .third-column .most-recent-container{order:1}.candidate-container.narrow-layout .third-column .total-exp-parent{order:2}::ng-deep .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;min-height:28px!important;display:flex!important;top:2px!important;position:relative!important;align-items:center!important}\n"] }]
|
|
2488
|
+
}], propDecorators: { candidateContainer: [{
|
|
2489
|
+
type: ViewChild,
|
|
2490
|
+
args: ['candidateContainer', { static: true }]
|
|
2491
|
+
}], useCustomHeader: [{
|
|
2441
2492
|
type: Input
|
|
2442
2493
|
}], candidateDetails: [{
|
|
2443
2494
|
type: Input
|
|
@@ -3074,6 +3125,9 @@ class ResponsiveLayoutComponent {
|
|
|
3074
3125
|
this.countDesktop = Number(v);
|
|
3075
3126
|
}
|
|
3076
3127
|
}
|
|
3128
|
+
get hasMinCols2() {
|
|
3129
|
+
return this.minColumns === 2;
|
|
3130
|
+
}
|
|
3077
3131
|
// Expose CSS variables on host for SCSS to pick up.
|
|
3078
3132
|
get cssGap() {
|
|
3079
3133
|
return typeof this.gap === 'string' ? this.gap : `$ {
|
|
@@ -3117,7 +3171,7 @@ class ResponsiveLayoutComponent {
|
|
|
3117
3171
|
return this.dataTestId || null;
|
|
3118
3172
|
}
|
|
3119
3173
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResponsiveLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3120
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResponsiveLayoutComponent, isStandalone: true, selector: "app-flex-grid", inputs: { dataTestId: "dataTestId", type: "type", gap: "gap", marginBottom: "marginBottom", countMobile: "countMobile", countMobileSm: "countMobileSm", countTablet: "countTablet", countDesktop: "countDesktop", mobRow: "mobRow", mobCols: "mobCols", rows: "rows", tabRow: "tabRow", desktop: "desktop" }, host: { properties: { "style.--gap": "this.cssGap", "style.--count-mobile": "this.cssCountMobile", "style.--count-mobile-sm": "this.cssCountMobileSm", "style.--count-tablet": "this.cssCountTablet", "style.--count-desktop": "this.cssCountDesktop", "style.--mb": "this.cssMarginBottom", "class.row": "this.isRow", "class.col": "this.isCol", "attr.data-testid": "this.dataTestIdAttr" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:grid;gap:var(--gap, 8px);width:100%;--current-count: var(--count-desktop, 4);container-type:inline-size;container-name:flex-grid}:host(.row){grid-auto-flow:row;grid-template-columns:repeat(var(--current-count),minmax(0,1fr));margin-bottom:var(--mb, 16px)}:host(.col){grid-auto-flow:row;grid-template-columns:repeat(var(--current-count),minmax(0,1fr))}@media (max-width: 767.98px){:host{--current-count: var(--count-mobile, 1)}}@media (min-width: 768px) and (max-width: 1023.98px){:host{--current-count: var(--count-tablet, 2)}}@media (min-width: 1024px){:host{--current-count: var(--count-desktop, 3)}}@container flex-grid (max-width: 600px){:host(.row),:host(.col){--current-count: 1 !important;grid-template-columns:1fr!important}}@container form-wrapper (max-width: 600px){:host(.row),:host(.col){--current-count: 1 !important;grid-template-columns:1fr!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
3174
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResponsiveLayoutComponent, isStandalone: true, selector: "app-flex-grid", inputs: { dataTestId: "dataTestId", type: "type", gap: "gap", marginBottom: "marginBottom", countMobile: "countMobile", countMobileSm: "countMobileSm", countTablet: "countTablet", countDesktop: "countDesktop", mobRow: "mobRow", mobCols: "mobCols", rows: "rows", tabRow: "tabRow", desktop: "desktop", minColumns: "minColumns" }, host: { properties: { "class.min-cols-2": "this.hasMinCols2", "style.--gap": "this.cssGap", "style.--count-mobile": "this.cssCountMobile", "style.--count-mobile-sm": "this.cssCountMobileSm", "style.--count-tablet": "this.cssCountTablet", "style.--count-desktop": "this.cssCountDesktop", "style.--mb": "this.cssMarginBottom", "class.row": "this.isRow", "class.col": "this.isCol", "attr.data-testid": "this.dataTestIdAttr" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:grid;gap:var(--gap, 8px);width:100%;--current-count: var(--count-desktop, 4);container-type:inline-size;container-name:flex-grid}:host(.row){grid-auto-flow:row;grid-template-columns:repeat(var(--current-count),minmax(0,1fr));margin-bottom:var(--mb, 16px)}:host(.col){grid-auto-flow:row;grid-template-columns:repeat(var(--current-count),minmax(0,1fr))}@media (max-width: 767.98px){:host{--current-count: var(--count-mobile, 1)}}@media (min-width: 768px) and (max-width: 1023.98px){:host{--current-count: var(--count-tablet, 2)}}@media (min-width: 1024px){:host{--current-count: var(--count-desktop, 3)}}@container flex-grid (max-width: 600px){:host(.row),:host(.col){--current-count: 1 !important;grid-template-columns:1fr!important}}@container form-wrapper (max-width: 600px){:host(.row),:host(.col){--current-count: 1 !important;grid-template-columns:1fr!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
3121
3175
|
}
|
|
3122
3176
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResponsiveLayoutComponent, decorators: [{
|
|
3123
3177
|
type: Component,
|
|
@@ -3148,6 +3202,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3148
3202
|
type: Input
|
|
3149
3203
|
}], desktop: [{
|
|
3150
3204
|
type: Input
|
|
3205
|
+
}], minColumns: [{
|
|
3206
|
+
type: Input
|
|
3207
|
+
}], hasMinCols2: [{
|
|
3208
|
+
type: HostBinding,
|
|
3209
|
+
args: ['class.min-cols-2']
|
|
3151
3210
|
}], cssGap: [{
|
|
3152
3211
|
type: HostBinding,
|
|
3153
3212
|
args: ['style.--gap']
|
|
@@ -3206,10 +3265,8 @@ class TableComponent {
|
|
|
3206
3265
|
this.iconRegistry.addSvgIconLiteral('delete-row', this.sanitizer.bypassSecurityTrustHtml(TABLE_ICONS['delete-row']));
|
|
3207
3266
|
this.iconRegistry.addSvgIconLiteral('delete-column', this.sanitizer.bypassSecurityTrustHtml(TABLE_ICONS['delete-column']));
|
|
3208
3267
|
}
|
|
3209
|
-
ngOnInit() {
|
|
3210
|
-
}
|
|
3211
|
-
ngAfterViewInit() {
|
|
3212
|
-
}
|
|
3268
|
+
ngOnInit() { }
|
|
3269
|
+
ngAfterViewInit() { }
|
|
3213
3270
|
toggleTableDropdown() {
|
|
3214
3271
|
this.showTableDropdown = !this.showTableDropdown;
|
|
3215
3272
|
}
|
|
@@ -3225,21 +3282,7 @@ class TableComponent {
|
|
|
3225
3282
|
}, 100);
|
|
3226
3283
|
return;
|
|
3227
3284
|
}
|
|
3228
|
-
const tableHTML = `
|
|
3229
|
-
<table style="border-collapse: collapse; width: 100%;">
|
|
3230
|
-
<tbody>
|
|
3231
|
-
<tr height=34>
|
|
3232
|
-
<td></td>
|
|
3233
|
-
<td></td>
|
|
3234
|
-
</tr>
|
|
3235
|
-
<tr height=34>
|
|
3236
|
-
<td></td>
|
|
3237
|
-
<td></td>
|
|
3238
|
-
</tr>
|
|
3239
|
-
</tbody>
|
|
3240
|
-
</table>
|
|
3241
|
-
<br>
|
|
3242
|
-
`;
|
|
3285
|
+
const tableHTML = ` <table style="border-collapse: collapse; width: 100%;"><tbody><tr height=34><td></td><td></td></tr><tr height=34><td></td><td></td></tr></tbody></table><br>`;
|
|
3243
3286
|
// Focus the editor first
|
|
3244
3287
|
editorElement.focus();
|
|
3245
3288
|
// Execute the command in the context of the editor
|
|
@@ -3442,11 +3485,11 @@ class TableComponent {
|
|
|
3442
3485
|
}
|
|
3443
3486
|
}
|
|
3444
3487
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, deps: [{ token: i1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3445
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { getEditorElement: "getEditorElement", saveHistoryMethod: "saveHistoryMethod", textChangeMethod: "textChangeMethod" }, ngImport: i0, template: "<div class=\"table-controls\"><button class=\"format-button table-button\" (click)=\"toggleTableDropdown()\"\n title=\"Table Operations\" type=\"button\"><mat-icon svgIcon=\"table\" class=\"table-icon\"></mat-icon></button>\n <div *ngIf=\"showTableDropdown\" class=\"table-dropdown\">\n <div class=\"table-row\"><button type=\"button\" class=\"table-btn\" (click)=\"addTable($event)\" title=\"Add table\"\n matTooltip=\"Add Table\" matTooltipPosition=\"above\"><mat-icon svgIcon=\"add-table\"></mat-icon></button><button\n type=\"button\" class=\"table-btn\" (click)=\"deleteTable($event)\" title=\"Delete table\" matTooltip=\"Delete Table\"\n matTooltipPosition=\"above\"><mat-icon svgIcon=\"delete-table\"></mat-icon></button><button type=\"button\"\n class=\"table-btn\" (click)=\"addColumnLeft($event)\" title=\"Column left\" matTooltip=\"Add Column Left\"\n matTooltipPosition=\"above\"><mat-icon svgIcon=\"column-left\"></mat-icon></button><button type=\"button\"\n class=\"table-btn\" (click)=\"addColumnRight($event)\" title=\"Column right\" matTooltip=\"Add Column Right\"\n matTooltipPosition=\"above\"><mat-icon svgIcon=\"column-right\"></mat-icon></button></div>\n <div class=\"table-row\"><button type=\"button\" class=\"table-btn\" (click)=\"addRowAbove($event)\" title=\"Row top\"\n matTooltip=\"Add Row Above\" matTooltipPosition=\"above\"><mat-icon svgIcon=\"row-top\"></mat-icon></button><button type=\"button\" class=\"table-btn\"\n (click)=\"addRowBelow($event)\" title=\"Row bottom\" matTooltip=\"Add Row Below\" matTooltipPosition=\"above\"><mat-icon svgIcon=\"row-bottom\"></mat-icon></button><button type=\"button\" class=\"table-btn\"\n (click)=\"deleteCurrentRow($event)\" title=\"Delete row\" matTooltip=\"Delete Current Row\"\n matTooltipPosition=\"above\"><mat-icon svgIcon=\"delete-row\"></mat-icon></button><button\n type=\"button\" class=\"table-btn\" (click)=\"deleteCurrentColumn($event)\" title=\"Delete column\"\n matTooltip=\"Delete Current Column\" matTooltipPosition=\"above\"><mat-icon\n svgIcon=\"delete-column\"></mat-icon></button></div>\n </div>\n</div>", styles: [".table-controls{position:relative;display:flex}.table-dropdown{position:absolute;top:100%;left:0;background-color:#fff;flex-direction:column;width:auto;border-radius:4px;box-shadow:0 2px 4px #182b7d26;z-index:1000;min-width:140px;padding:8px;margin-top:4px}.table-row{display:flex;gap:6px}.table-row:last-child{margin-bottom:0}.table-btn{display:flex;align-items:center;justify-content:center;background-color:#fff;width:28px;height:28px;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;padding:0}.table-btn .material-icons,.table-btn mat-icon{font-size:20px;color:#717793;width:20px;height:20px}.table-button mat-icon,.table-button .table-icon{font-size:20px;width:20px;height:20px;color:#4b4f62
|
|
3488
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { getEditorElement: "getEditorElement", saveHistoryMethod: "saveHistoryMethod", textChangeMethod: "textChangeMethod" }, ngImport: i0, template: "<div class=\"table-controls\"><button class=\"format-button table-button\" (click)=\"toggleTableDropdown()\"\n title=\"Table Operations\" type=\"button\"><mat-icon svgIcon=\"table\" class=\"table-icon\"></mat-icon></button>\n <div *ngIf=\"showTableDropdown\" class=\"table-dropdown\">\n <div class=\"table-row\"><button type=\"button\" class=\"table-btn\" (click)=\"addTable($event)\" title=\"Add table\"\n matTooltip=\"Add Table\" matTooltipPosition=\"above\"><mat-icon svgIcon=\"add-table\"></mat-icon></button><button\n type=\"button\" class=\"table-btn\" (click)=\"deleteTable($event)\" title=\"Delete table\" matTooltip=\"Delete Table\"\n matTooltipPosition=\"above\"><mat-icon svgIcon=\"delete-table\"></mat-icon></button><button type=\"button\"\n class=\"table-btn\" (click)=\"addColumnLeft($event)\" title=\"Column left\" matTooltip=\"Add Column Left\"\n matTooltipPosition=\"above\"><mat-icon svgIcon=\"column-left\"></mat-icon></button><button type=\"button\"\n class=\"table-btn\" (click)=\"addColumnRight($event)\" title=\"Column right\" matTooltip=\"Add Column Right\"\n matTooltipPosition=\"above\"><mat-icon svgIcon=\"column-right\"></mat-icon></button></div>\n <div class=\"table-row\"><button type=\"button\" class=\"table-btn\" (click)=\"addRowAbove($event)\" title=\"Row top\"\n matTooltip=\"Add Row Above\" matTooltipPosition=\"above\"><mat-icon svgIcon=\"row-top\"></mat-icon></button><button type=\"button\" class=\"table-btn\"\n (click)=\"addRowBelow($event)\" title=\"Row bottom\" matTooltip=\"Add Row Below\" matTooltipPosition=\"above\"><mat-icon svgIcon=\"row-bottom\"></mat-icon></button><button type=\"button\" class=\"table-btn\"\n (click)=\"deleteCurrentRow($event)\" title=\"Delete row\" matTooltip=\"Delete Current Row\"\n matTooltipPosition=\"above\"><mat-icon svgIcon=\"delete-row\"></mat-icon></button><button\n type=\"button\" class=\"table-btn\" (click)=\"deleteCurrentColumn($event)\" title=\"Delete column\"\n matTooltip=\"Delete Current Column\" matTooltipPosition=\"above\"><mat-icon\n svgIcon=\"delete-column\"></mat-icon></button></div>\n </div>\n</div>", styles: [".table-controls{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:24px}.table-controls .table-button,.table-controls .format-button{width:24px;min-width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center}.table-dropdown{position:absolute;top:100%;left:0;background-color:#fff;flex-direction:column;width:auto;border-radius:4px;box-shadow:0 2px 4px #182b7d26;z-index:1000;min-width:140px;padding:8px;margin-top:4px}.table-row{display:flex;gap:6px}.table-row:last-child{margin-bottom:0}.table-btn{display:flex;align-items:center;justify-content:center;background-color:#fff;width:28px;height:28px;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;padding:0}.table-btn .material-icons,.table-btn mat-icon{font-size:20px;color:#717793;width:20px;height:20px}.table-button mat-icon,.table-button .table-icon{display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;width:20px;height:20px;color:#4b4f62}.table-button mat-icon svg{width:100%;height:100%}.table-button{position:relative}@import url(https://fonts.googleapis.com/icon?family=Material+Icons);\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
|
|
3446
3489
|
}
|
|
3447
3490
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, decorators: [{
|
|
3448
3491
|
type: Component,
|
|
3449
|
-
args: [{ selector: 'app-table', standalone: true, imports: [CommonModule, MatTooltipModule, MatIconModule], template: "<div class=\"table-controls\"><button class=\"format-button table-button\" (click)=\"toggleTableDropdown()\"\n title=\"Table Operations\" type=\"button\"><mat-icon svgIcon=\"table\" class=\"table-icon\"></mat-icon></button>\n <div *ngIf=\"showTableDropdown\" class=\"table-dropdown\">\n <div class=\"table-row\"><button type=\"button\" class=\"table-btn\" (click)=\"addTable($event)\" title=\"Add table\"\n matTooltip=\"Add Table\" matTooltipPosition=\"above\"><mat-icon svgIcon=\"add-table\"></mat-icon></button><button\n type=\"button\" class=\"table-btn\" (click)=\"deleteTable($event)\" title=\"Delete table\" matTooltip=\"Delete Table\"\n matTooltipPosition=\"above\"><mat-icon svgIcon=\"delete-table\"></mat-icon></button><button type=\"button\"\n class=\"table-btn\" (click)=\"addColumnLeft($event)\" title=\"Column left\" matTooltip=\"Add Column Left\"\n matTooltipPosition=\"above\"><mat-icon svgIcon=\"column-left\"></mat-icon></button><button type=\"button\"\n class=\"table-btn\" (click)=\"addColumnRight($event)\" title=\"Column right\" matTooltip=\"Add Column Right\"\n matTooltipPosition=\"above\"><mat-icon svgIcon=\"column-right\"></mat-icon></button></div>\n <div class=\"table-row\"><button type=\"button\" class=\"table-btn\" (click)=\"addRowAbove($event)\" title=\"Row top\"\n matTooltip=\"Add Row Above\" matTooltipPosition=\"above\"><mat-icon svgIcon=\"row-top\"></mat-icon></button><button type=\"button\" class=\"table-btn\"\n (click)=\"addRowBelow($event)\" title=\"Row bottom\" matTooltip=\"Add Row Below\" matTooltipPosition=\"above\"><mat-icon svgIcon=\"row-bottom\"></mat-icon></button><button type=\"button\" class=\"table-btn\"\n (click)=\"deleteCurrentRow($event)\" title=\"Delete row\" matTooltip=\"Delete Current Row\"\n matTooltipPosition=\"above\"><mat-icon svgIcon=\"delete-row\"></mat-icon></button><button\n type=\"button\" class=\"table-btn\" (click)=\"deleteCurrentColumn($event)\" title=\"Delete column\"\n matTooltip=\"Delete Current Column\" matTooltipPosition=\"above\"><mat-icon\n svgIcon=\"delete-column\"></mat-icon></button></div>\n </div>\n</div>", styles: [".table-controls{position:relative;display:flex}.table-dropdown{position:absolute;top:100%;left:0;background-color:#fff;flex-direction:column;width:auto;border-radius:4px;box-shadow:0 2px 4px #182b7d26;z-index:1000;min-width:140px;padding:8px;margin-top:4px}.table-row{display:flex;gap:6px}.table-row:last-child{margin-bottom:0}.table-btn{display:flex;align-items:center;justify-content:center;background-color:#fff;width:28px;height:28px;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;padding:0}.table-btn .material-icons,.table-btn mat-icon{font-size:20px;color:#717793;width:20px;height:20px}.table-button mat-icon,.table-button .table-icon{font-size:20px;width:20px;height:20px;color:#4b4f62
|
|
3492
|
+
args: [{ selector: 'app-table', standalone: true, imports: [CommonModule, MatTooltipModule, MatIconModule], template: "<div class=\"table-controls\"><button class=\"format-button table-button\" (click)=\"toggleTableDropdown()\"\n title=\"Table Operations\" type=\"button\"><mat-icon svgIcon=\"table\" class=\"table-icon\"></mat-icon></button>\n <div *ngIf=\"showTableDropdown\" class=\"table-dropdown\">\n <div class=\"table-row\"><button type=\"button\" class=\"table-btn\" (click)=\"addTable($event)\" title=\"Add table\"\n matTooltip=\"Add Table\" matTooltipPosition=\"above\"><mat-icon svgIcon=\"add-table\"></mat-icon></button><button\n type=\"button\" class=\"table-btn\" (click)=\"deleteTable($event)\" title=\"Delete table\" matTooltip=\"Delete Table\"\n matTooltipPosition=\"above\"><mat-icon svgIcon=\"delete-table\"></mat-icon></button><button type=\"button\"\n class=\"table-btn\" (click)=\"addColumnLeft($event)\" title=\"Column left\" matTooltip=\"Add Column Left\"\n matTooltipPosition=\"above\"><mat-icon svgIcon=\"column-left\"></mat-icon></button><button type=\"button\"\n class=\"table-btn\" (click)=\"addColumnRight($event)\" title=\"Column right\" matTooltip=\"Add Column Right\"\n matTooltipPosition=\"above\"><mat-icon svgIcon=\"column-right\"></mat-icon></button></div>\n <div class=\"table-row\"><button type=\"button\" class=\"table-btn\" (click)=\"addRowAbove($event)\" title=\"Row top\"\n matTooltip=\"Add Row Above\" matTooltipPosition=\"above\"><mat-icon svgIcon=\"row-top\"></mat-icon></button><button type=\"button\" class=\"table-btn\"\n (click)=\"addRowBelow($event)\" title=\"Row bottom\" matTooltip=\"Add Row Below\" matTooltipPosition=\"above\"><mat-icon svgIcon=\"row-bottom\"></mat-icon></button><button type=\"button\" class=\"table-btn\"\n (click)=\"deleteCurrentRow($event)\" title=\"Delete row\" matTooltip=\"Delete Current Row\"\n matTooltipPosition=\"above\"><mat-icon svgIcon=\"delete-row\"></mat-icon></button><button\n type=\"button\" class=\"table-btn\" (click)=\"deleteCurrentColumn($event)\" title=\"Delete column\"\n matTooltip=\"Delete Current Column\" matTooltipPosition=\"above\"><mat-icon\n svgIcon=\"delete-column\"></mat-icon></button></div>\n </div>\n</div>", styles: [".table-controls{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:24px}.table-controls .table-button,.table-controls .format-button{width:24px;min-width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center}.table-dropdown{position:absolute;top:100%;left:0;background-color:#fff;flex-direction:column;width:auto;border-radius:4px;box-shadow:0 2px 4px #182b7d26;z-index:1000;min-width:140px;padding:8px;margin-top:4px}.table-row{display:flex;gap:6px}.table-row:last-child{margin-bottom:0}.table-btn{display:flex;align-items:center;justify-content:center;background-color:#fff;width:28px;height:28px;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;padding:0}.table-btn .material-icons,.table-btn mat-icon{font-size:20px;color:#717793;width:20px;height:20px}.table-button mat-icon,.table-button .table-icon{display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;width:20px;height:20px;color:#4b4f62}.table-button mat-icon svg{width:100%;height:100%}.table-button{position:relative}@import url(https://fonts.googleapis.com/icon?family=Material+Icons);\n"] }]
|
|
3450
3493
|
}], ctorParameters: () => [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }], propDecorators: { getEditorElement: [{
|
|
3451
3494
|
type: Input
|
|
3452
3495
|
}], saveHistoryMethod: [{
|
|
@@ -3992,6 +4035,7 @@ class CustomEditorComponent {
|
|
|
3992
4035
|
this.showTable = true;
|
|
3993
4036
|
this.contentChangeFromQuill = new EventEmitter();
|
|
3994
4037
|
this.ApplyAIinQuill = new EventEmitter();
|
|
4038
|
+
this.onAutoBullet = new EventEmitter();
|
|
3995
4039
|
// Generic configuration approach
|
|
3996
4040
|
this.toolbarConfig = [{
|
|
3997
4041
|
type: 'bold', icon: 'format_bold', title: 'Bold', command: 'bold'
|
|
@@ -5042,80 +5086,12 @@ class CustomEditorComponent {
|
|
|
5042
5086
|
editorId: this.editorId
|
|
5043
5087
|
});
|
|
5044
5088
|
}
|
|
5045
|
-
processExperienceData(processableData) {
|
|
5046
|
-
processableData.selectedValue = this.formJsonData?.value?.selectedValue;
|
|
5047
|
-
processableData.city = this.formJsonData?.value?.city;
|
|
5048
|
-
processableData.companyName = this.formJsonData?.value?.companyName;
|
|
5049
|
-
processableData.country = this.formJsonData?.value?.country;
|
|
5050
|
-
processableData.current = this.formJsonData?.value?.current;
|
|
5051
|
-
processableData.end = this.formJsonData?.value?.end;
|
|
5052
|
-
processableData.experienceDescription = this.FormValue;
|
|
5053
|
-
processableData.jobTitle = this.formJsonData?.value?.jobTitle;
|
|
5054
|
-
processableData.region = this.formJsonData?.value?.region;
|
|
5055
|
-
processableData.start = this.formJsonData?.value?.start;
|
|
5056
|
-
processableData.subrole = this.formJsonData?.value?.subrole;
|
|
5057
|
-
delete processableData.startDate;
|
|
5058
|
-
delete processableData.endDate;
|
|
5059
|
-
this.processDates(processableData);
|
|
5060
|
-
}
|
|
5061
|
-
processEducationData(processableData) {
|
|
5062
|
-
processableData.courseTitle = this.formJsonData?.value?.courseTitle;
|
|
5063
|
-
processableData.current = this.formJsonData?.value?.current;
|
|
5064
|
-
processableData.eduDetails = this.FormValue;
|
|
5065
|
-
processableData.eduDescription = this.formJsonData?.value?.eduDescription;
|
|
5066
|
-
processableData.eduLocation = this.formJsonData?.value?.eduLocation;
|
|
5067
|
-
processableData.end = this.formJsonData?.value?.end;
|
|
5068
|
-
processableData.schoolName = this.formJsonData?.value?.schoolName;
|
|
5069
|
-
processableData.start = this.formJsonData?.value?.start;
|
|
5070
|
-
processableData.typeOfDegree = this.formJsonData?.value?.typeOfDegree;
|
|
5071
|
-
delete processableData.startDate;
|
|
5072
|
-
delete processableData.endDate;
|
|
5073
|
-
this.processDates(processableData);
|
|
5074
|
-
}
|
|
5075
|
-
processCertificationData(processableData) {
|
|
5076
|
-
processableData.selectedValue = this.formJsonData?.value?.selectedValue;
|
|
5077
|
-
processableData.certInstitute = this.formJsonData?.value?.certInstitute;
|
|
5078
|
-
processableData.certLocation = this.formJsonData?.value?.certLocation;
|
|
5079
|
-
processableData.certTitle = this.formJsonData?.value?.certTitle;
|
|
5080
|
-
processableData.current = this.formJsonData?.value?.current;
|
|
5081
|
-
processableData.details = this.FormValue;
|
|
5082
|
-
processableData.description = this.formJsonData?.value?.description;
|
|
5083
|
-
processableData.end = this.formJsonData?.value?.end;
|
|
5084
|
-
processableData.start = this.formJsonData?.value?.start;
|
|
5085
|
-
delete processableData.startDate;
|
|
5086
|
-
delete processableData.endDate;
|
|
5087
|
-
this.processDates(processableData);
|
|
5088
|
-
}
|
|
5089
|
-
processDates(processableData) {
|
|
5090
|
-
if (!processableData.start || processableData.start === 'Invalid Date') {
|
|
5091
|
-
processableData.start = "";
|
|
5092
|
-
}
|
|
5093
|
-
else {
|
|
5094
|
-
const stDate = new Date(processableData.start);
|
|
5095
|
-
stDate.setHours(5);
|
|
5096
|
-
processableData.start = stDate;
|
|
5097
|
-
}
|
|
5098
|
-
if (!processableData.end || processableData.end === 'Invalid Date') {
|
|
5099
|
-
processableData.end = "";
|
|
5100
|
-
}
|
|
5101
|
-
else {
|
|
5102
|
-
const edDate = new Date(processableData.end);
|
|
5103
|
-
edDate.setHours(5);
|
|
5104
|
-
processableData.end = edDate;
|
|
5105
|
-
}
|
|
5106
|
-
}
|
|
5107
|
-
verifyModelLatencyAndStatusBefore(event) {
|
|
5108
|
-
this.useAITool(event);
|
|
5109
|
-
}
|
|
5110
|
-
listenToSocket(event) {
|
|
5111
|
-
this.useAITool(event);
|
|
5112
|
-
}
|
|
5113
5089
|
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 }); }
|
|
5114
|
-
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" }, 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\">\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\"\n [matTooltip]=\"item.title\" 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)=\"transformToBullets($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)=\"transformToSkillsBullets($event)\" [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\"\n [class.active]=\"getActiveState(item.type)\"\n (click)=\"handleTextFormattingClick($event, item)\" [title]=\"item.title\" type=\"button\"\n [matTooltip]=\"item.title\" 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)=\"transformToBullets($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)=\"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\" (click)=\"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\" (click)=\"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'\" [color]=\"'gradient'\" [size]=\"'xs'\"\n [disabled]=\"isLoadingAI\" (onClick)=\"useAITool($event)\" [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:15px;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:4px;position:relative;min-width:24px;height:24px}.toolbar .format-button .material-icons,.toolbar .format-button mat-icon{font-size:20px;color:#4b4f62;transition:none;width:20px;height:20px}.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:#fff;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;min-width:24px;height:24px;border-radius:4px;background-color:#fff;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{margin-right:0;font-size:24px;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;border-radius:4px;flex-shrink:0;white-space:nowrap;background-color:#fff;border:1px solid transparent;min-width:24px;height:24px;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{margin-right:0;font-size:18px;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{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 }); }
|
|
5090
|
+
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(); onAutoBullet.emit()\"\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($event)\" [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 (click)=\"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(); onAutoBullet.emit()\" [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\" (click)=\"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\" (click)=\"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 }); }
|
|
5115
5091
|
}
|
|
5116
5092
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomEditorComponent, decorators: [{
|
|
5117
5093
|
type: Component,
|
|
5118
|
-
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\">\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\"\n [matTooltip]=\"item.title\" 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)=\"transformToBullets($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)=\"transformToSkillsBullets($event)\" [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\"\n [class.active]=\"getActiveState(item.type)\"\n (click)=\"handleTextFormattingClick($event, item)\" [title]=\"item.title\" type=\"button\"\n [matTooltip]=\"item.title\" 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)=\"transformToBullets($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)=\"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\" (click)=\"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\" (click)=\"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'\" [color]=\"'gradient'\" [size]=\"'xs'\"\n [disabled]=\"isLoadingAI\" (onClick)=\"useAITool($event)\" [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:15px;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:4px;position:relative;min-width:24px;height:24px}.toolbar .format-button .material-icons,.toolbar .format-button mat-icon{font-size:20px;color:#4b4f62;transition:none;width:20px;height:20px}.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:#fff;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;min-width:24px;height:24px;border-radius:4px;background-color:#fff;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{margin-right:0;font-size:24px;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;border-radius:4px;flex-shrink:0;white-space:nowrap;background-color:#fff;border:1px solid transparent;min-width:24px;height:24px;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{margin-right:0;font-size:18px;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{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"] }]
|
|
5094
|
+
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(); onAutoBullet.emit()\"\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($event)\" [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 (click)=\"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(); onAutoBullet.emit()\" [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\" (click)=\"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\" (click)=\"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"] }]
|
|
5119
5095
|
}], ctorParameters: () => [{ type: i0.Renderer2, decorators: [{
|
|
5120
5096
|
type: Inject,
|
|
5121
5097
|
args: [Renderer2]
|
|
@@ -5215,6 +5191,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5215
5191
|
type: Output
|
|
5216
5192
|
}], ApplyAIinQuill: [{
|
|
5217
5193
|
type: Output
|
|
5194
|
+
}], onAutoBullet: [{
|
|
5195
|
+
type: Output
|
|
5218
5196
|
}], toolbarConfig: [{
|
|
5219
5197
|
type: Input
|
|
5220
5198
|
}], textFormattingConfig: [{
|
|
@@ -5259,7 +5237,7 @@ class CustomEditorDemoComponent {
|
|
|
5259
5237
|
</ul>
|
|
5260
5238
|
</div>
|
|
5261
5239
|
</div>
|
|
5262
|
-
`, isInline: true, styles: [".demo-container{max-width:800px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}h2{color:#333;margin-bottom:16px}.demo-description{color:#666;margin-bottom:24px;line-height:1.5}.demo-instructions{margin-top:24px;padding:16px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #37c1ce}.demo-instructions h3{margin-top:0;color:#333}.demo-instructions ul{margin-bottom:0;padding-left:20px}.demo-instructions li{margin-bottom:8px;color:#555}\n"], dependencies: [{ kind: "component", type: CustomEditorComponent, selector: "app-custom-editor", inputs: ["bold", "italic", "underline", "list", "isVisible", "dataTestId", "showLabels", "leftLabelText", "rightLabelText", "initialValue", "contentFromParent", "editScreenSection", "actionType", "historyControls", "autobullet", "skillsBullet", "jsonData", "formJsonData", "editorId", "sectionId", "actionId", "undoCustom", "redoCustom", "undoSkill", "redoSkill", "matOptionAI", "hideTableOption", "hideAutoBulletOption", "hideAIOption", "showAIButton", "insertTablebtn", "insertRowAbovebtn", "insertRowBelowbtn", "insertColumnLeftbtn", "insertColumnRightbtn", "deleteTablebtn", "deleteRowAbovebtn", "deleteRowBelowbtn", "deleteColumnLeftbtn", "deleteColumnRightbtn", "showTable", "toolbarConfig", "textFormattingConfig"], outputs: ["contentChangeFromQuill", "ApplyAIinQuill"] }] }); }
|
|
5240
|
+
`, isInline: true, styles: [".demo-container{max-width:800px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}h2{color:#333;margin-bottom:16px}.demo-description{color:#666;margin-bottom:24px;line-height:1.5}.demo-instructions{margin-top:24px;padding:16px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #37c1ce}.demo-instructions h3{margin-top:0;color:#333}.demo-instructions ul{margin-bottom:0;padding-left:20px}.demo-instructions li{margin-bottom:8px;color:#555}\n"], dependencies: [{ kind: "component", type: CustomEditorComponent, selector: "app-custom-editor", inputs: ["bold", "italic", "underline", "list", "isVisible", "dataTestId", "showLabels", "leftLabelText", "rightLabelText", "initialValue", "contentFromParent", "editScreenSection", "actionType", "historyControls", "autobullet", "skillsBullet", "jsonData", "formJsonData", "editorId", "sectionId", "actionId", "undoCustom", "redoCustom", "undoSkill", "redoSkill", "matOptionAI", "hideTableOption", "hideAutoBulletOption", "hideAIOption", "showAIButton", "insertTablebtn", "insertRowAbovebtn", "insertRowBelowbtn", "insertColumnLeftbtn", "insertColumnRightbtn", "deleteTablebtn", "deleteRowAbovebtn", "deleteRowBelowbtn", "deleteColumnLeftbtn", "deleteColumnRightbtn", "showTable", "toolbarConfig", "textFormattingConfig"], outputs: ["contentChangeFromQuill", "ApplyAIinQuill", "onAutoBullet"] }] }); }
|
|
5263
5241
|
}
|
|
5264
5242
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomEditorDemoComponent, decorators: [{
|
|
5265
5243
|
type: Component,
|
|
@@ -6174,7 +6152,7 @@ class EditableFormWrapperComponent {
|
|
|
6174
6152
|
const finalY = Math.max(minY, Math.min(targetY, maxY));
|
|
6175
6153
|
buttonGroup.style.transform = `translateY(${finalY}px)`;
|
|
6176
6154
|
}
|
|
6177
|
-
// Handle left button (edit)
|
|
6155
|
+
// Handle left button (edit) — subtract 20px from transform so it aligns with the gap between Save and Discard on the right
|
|
6178
6156
|
if (leftButton) {
|
|
6179
6157
|
const leftButtonHeight = leftButton.offsetHeight;
|
|
6180
6158
|
const clampPadding = 36;
|
|
@@ -6191,7 +6169,8 @@ class EditableFormWrapperComponent {
|
|
|
6191
6169
|
targetY = maxY;
|
|
6192
6170
|
}
|
|
6193
6171
|
const finalY = Math.max(minY, Math.min(targetY, maxY));
|
|
6194
|
-
|
|
6172
|
+
const leftFinalY = Math.max(minY, Math.min(finalY - 18, maxY));
|
|
6173
|
+
leftButton.style.transform = `translateY(${leftFinalY}px)`;
|
|
6195
6174
|
}
|
|
6196
6175
|
};
|
|
6197
6176
|
this.scrollListener = handleScroll;
|
|
@@ -6204,11 +6183,11 @@ class EditableFormWrapperComponent {
|
|
|
6204
6183
|
handleScroll(); // Initial position
|
|
6205
6184
|
}
|
|
6206
6185
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditableFormWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6207
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditableFormWrapperComponent, isStandalone: true, selector: "al-form", inputs: { testId: "testId", showLeftButton: "showLeftButton", showSaveButton: "showSaveButton", showDeleteButton: "showDeleteButton", leftContainerClass: "leftContainerClass", leftContainerStyle: "leftContainerStyle", scrollContainer: "scrollContainer" }, outputs: { leftButtonClick: "leftButtonClick", saveButtonClick: "saveButtonClick", deleteButtonClick: "deleteButtonClick" }, viewQueries: [{ propertyName: "wrapperRef", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "buttonGroupRef", first: true, predicate: ["buttonGroup"], descendants: true }, { propertyName: "leftButtonRef", first: true, predicate: ["leftButton"], descendants: true }], ngImport: i0, template: "<div class=\"al-form-wrapper\" #wrapper [attr.data-test-id]=\"testId\">\n <div *ngIf=\"showLeftButton\" #leftButton class=\"fab left\">\n <al-button [buttonType]=\"'icon-circle'\" [iconOnly]=\"true\"\n [leftIcon]=\"isLeftButtonActive ? 'close' : 'auto_fix_high'\"\n [arialabel]=\"isLeftButtonActive ? 'Close' : 'Edit'\"\n [size]=\"'base'\"\n [color]=\"isLeftButtonActive ? 'grey' : 'gradient'\"\n (onClick)=\"handleLeftButtonClick($event)\">\n </al-button>\n <div *ngIf=\"isLeftButtonActive\"\n class=\"left-button-container\"\n [ngClass]=\"leftContainerClass\"\n [ngStyle]=\"leftContainerStyle\">\n <ng-content select=\"[leftButtonContent]\"></ng-content>\n </div>\n </div>\n <div class=\"inner\"><ng-content></ng-content></div>\n <div class=\"fab-group right\" #buttonGroup><al-button *ngIf=\"showSaveButton\" class=\"fab\" [buttonType]=\"'icon-circle'\"\n [iconOnly]=\"true\" [leftIcon]=\"'save'\" [arialabel]=\"'Save'\" [size]=\"'base'\" iconOutlined=\"true\"\n [color]=\"'green'\" (onClick)=\"saveButtonClick.emit($event)\"></al-button><al-button *ngIf=\"showDeleteButton\" class=\"fab warn\" [buttonType]=\"'icon-circle'\"\n [iconOnly]=\"true\" [leftIcon]=\"'cancel'\" [arialabel]=\"'Delete'\" [size]=\"'base'\" [color]=\"'error'\" iconOutlined=\"true\"\n (onClick)=\"deleteButtonClick.emit($event)\"></al-button>\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}:host{display:block;position:relative;padding:0}:host ::ng-deep .al-form__grid{display:grid;gap:16px;margin-top:16px}:host ::ng-deep .al-form__grid.cols-1{grid-template-columns:1fr}:host ::ng-deep .al-form__grid.cols-2{grid-template-columns:1fr 1fr}:host ::ng-deep .al-form__grid.cols-3{grid-template-columns:1fr 1fr 1fr}:host ::ng-deep .al-form__grid .full{grid-column:1/-1}.al-form-wrapper{position:relative;border-radius:16px;background:transparent;width:100%;max-width:100%;box-sizing:border-box;overflow:visible;container-type:inline-size;container-name:form-wrapper}.al-form-wrapper:before{content:\"\";position:absolute;inset:0;border:1px solid var(--Base-Blue, #6581EA);border-radius:10px;box-shadow:0 0 0 6px #5473e814;pointer-events:none;z-index:1}.al-form-wrapper>.inner{position:relative;padding:24px!important;border-radius:10px;background:#fff;box-sizing:border-box;z-index:0}.al-form-wrapper>.inner>:first-child{margin-top:0!important}.al-form-wrapper>.inner>:last-child{margin-bottom:0!important}.al-form__header{display:flex;gap:10px;align-items:baseline}.al-form__title{font-weight:600;color:#222}.al-form__hint{color:#7a818f}.al-form__paragraph{margin:6px 0 0;color:#3a3f4a}.al-form__demo-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}@media (max-width: 767.98px){.al-form__demo-form{grid-template-columns:1fr}}.al-form__demo-form .full{grid-column:1/-1}.al-form__field{display:flex;flex-direction:column;gap:6px}.al-form__field label{font-size:12px;color:#5a6170}.al-form__control{width:100%;padding:10px 12px;border:1px solid #d9def4;border-radius:10px;background:#fff;color:#2a2f3a;outline:none;box-sizing:border-box;box-shadow:0 1px #5877ff0f,inset 0 0 0 2px #5877ff08;transition:box-shadow .15s ease,border-color .15s ease}.al-form__control:focus{border-color:#5877ff99;box-shadow:0 0 0 3px #5877ff24}select.al-form__control{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7a86ff 50%),linear-gradient(135deg,#7a86ff 50%,transparent 50%);background-position:calc(100% - 18px) calc(1em + 2px),calc(100% - 13px) calc(1em + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}.fab.left{position:absolute;left:-16px;top:0;z-index:10;background-color:#fff;border-radius:50%;will-change:transform;transition:transform .1s ease-out}.fab.left .left-button-container{position:absolute;left:56px;top:0;z-index:1;pointer-events:auto}.fab-group.right{position:absolute;right:-16px;top:0;display:flex;flex-direction:column;border-radius:50%;gap:8px;z-index:2;background-color:#fff;will-change:transform;transition:transform .1s ease-out}:host ::ng-deep app-flex-grid+app-flex-grid{margin-top:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
6186
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditableFormWrapperComponent, isStandalone: true, selector: "al-form", inputs: { testId: "testId", showLeftButton: "showLeftButton", showSaveButton: "showSaveButton", showDeleteButton: "showDeleteButton", leftContainerClass: "leftContainerClass", leftContainerStyle: "leftContainerStyle", scrollContainer: "scrollContainer" }, outputs: { leftButtonClick: "leftButtonClick", saveButtonClick: "saveButtonClick", deleteButtonClick: "deleteButtonClick" }, viewQueries: [{ propertyName: "wrapperRef", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "buttonGroupRef", first: true, predicate: ["buttonGroup"], descendants: true }, { propertyName: "leftButtonRef", first: true, predicate: ["leftButton"], descendants: true }], ngImport: i0, template: "<div class=\"al-form-wrapper\" #wrapper [attr.data-test-id]=\"testId\">\n <div *ngIf=\"showLeftButton\" #leftButton class=\"fab left\">\n <al-button [buttonType]=\"'icon-circle'\" [iconOnly]=\"true\"\n [leftIcon]=\"isLeftButtonActive ? 'close' : 'auto_fix_high'\"\n [arialabel]=\"isLeftButtonActive ? 'Close' : 'Edit'\"\n [size]=\"'base'\"\n [color]=\"isLeftButtonActive ? 'grey' : 'gradient'\"\n (onClick)=\"handleLeftButtonClick($event)\">\n </al-button>\n <div *ngIf=\"isLeftButtonActive\"\n class=\"left-button-container\"\n [ngClass]=\"leftContainerClass\"\n [ngStyle]=\"leftContainerStyle\">\n <ng-content select=\"[leftButtonContent]\"></ng-content>\n </div>\n </div>\n <div class=\"inner\"><ng-content></ng-content></div>\n <div class=\"fab-group right\" #buttonGroup><al-button *ngIf=\"showSaveButton\" class=\"fab\" [buttonType]=\"'icon-circle'\"\n [iconOnly]=\"true\" [leftIcon]=\"'save'\" [arialabel]=\"'Save'\" [size]=\"'base'\" iconOutlined=\"true\"\n [color]=\"'green'\" (onClick)=\"saveButtonClick.emit($event)\"></al-button><al-button *ngIf=\"showDeleteButton\" class=\"fab warn\" [buttonType]=\"'icon-circle'\"\n [iconOnly]=\"true\" [leftIcon]=\"'cancel'\" [arialabel]=\"'Delete'\" [size]=\"'base'\" [color]=\"'error'\" iconOutlined=\"true\"\n (onClick)=\"deleteButtonClick.emit($event)\"></al-button>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";@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}:host{display:block;position:relative;padding:0}:host ::ng-deep .al-form__grid{display:grid;gap:16px;margin-top:16px}:host ::ng-deep .al-form__grid.cols-1{grid-template-columns:1fr}:host ::ng-deep .al-form__grid.cols-2{grid-template-columns:1fr 1fr}:host ::ng-deep .al-form__grid.cols-3{grid-template-columns:1fr 1fr 1fr}:host ::ng-deep .al-form__grid .full{grid-column:1/-1}.al-form-wrapper{position:relative;border-radius:16px;background:transparent;width:100%;max-width:100%;box-sizing:border-box;overflow:visible;container-type:inline-size;container-name:form-wrapper}.al-form-wrapper:before{content:\"\";position:absolute;inset:0;border:1px solid var(--Base-Blue, #6581EA);border-radius:10px;box-shadow:0 0 0 6px #5473e814;pointer-events:none;z-index:1}.al-form-wrapper>.inner{position:relative;padding:24px!important;border-radius:10px;background:#fff;box-sizing:border-box;z-index:0}.al-form-wrapper>.inner>:first-child{margin-top:0!important}.al-form-wrapper>.inner>:last-child{margin-bottom:0!important}.al-form__header{display:flex;gap:10px;align-items:baseline}.al-form__title{font-weight:600;color:#222}.al-form__hint{color:#7a818f}.al-form__paragraph{margin:6px 0 0;color:#3a3f4a}.al-form__demo-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}@media (max-width: 767.98px){.al-form__demo-form{grid-template-columns:1fr}}.al-form__demo-form .full{grid-column:1/-1}.al-form__field{display:flex;flex-direction:column;gap:6px}.al-form__field label{font-size:12px;color:#5a6170}.al-form__control{width:100%;padding:10px 12px;border:1px solid #d9def4;border-radius:10px;background:#fff;color:#2a2f3a;outline:none;box-sizing:border-box;box-shadow:0 1px #5877ff0f,inset 0 0 0 2px #5877ff08;transition:box-shadow .15s ease,border-color .15s ease}.al-form__control:focus{border-color:#5877ff99;box-shadow:0 0 0 3px #5877ff24}select.al-form__control{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7a86ff 50%),linear-gradient(135deg,#7a86ff 50%,transparent 50%);background-position:calc(100% - 18px) calc(1em + 2px),calc(100% - 13px) calc(1em + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}.fab.left{position:absolute;left:-16px;top:0;z-index:10;background-color:#fff;border-radius:50%;will-change:transform;transition:transform .1s ease-out}.fab.left .left-button-container{position:absolute;left:56px;top:0;z-index:1;pointer-events:auto}.fab-group.right{position:absolute;right:-16px;top:0;display:flex;flex-direction:column;border-radius:50%;gap:8px;z-index:2;background-color:#fff;will-change:transform;transition:transform .1s ease-out}:host ::ng-deep app-flex-grid+app-flex-grid{margin-top:16px}:host ::ng-deep app-flex-grid.row{align-items:center}:host ::ng-deep app-flex-grid al-checkbox .checkbox-label-wrapper{margin-top:0;justify-content:center}@media (max-width: 767.98px){:host ::ng-deep app-flex-grid.row.min-cols-2,:host ::ng-deep app-flex-grid.col.min-cols-2{--current-count: 2 !important;grid-template-columns:repeat(2,minmax(0,1fr))!important}}@container form-wrapper (max-width: 600px){:host ::ng-deep app-flex-grid.row.min-cols-2,:host ::ng-deep app-flex-grid.col.min-cols-2{--current-count: 2 !important;grid-template-columns:repeat(2,minmax(0,1fr))!important}}@container form-wrapper (min-width: 600px){:host ::ng-deep app-flex-grid.row.min-cols-2>*:nth-child(1){order:1}:host ::ng-deep app-flex-grid.row.min-cols-2>*:nth-child(2){order:4}:host ::ng-deep app-flex-grid.row.min-cols-2>*:nth-child(3){order:2}:host ::ng-deep app-flex-grid.row.min-cols-2>*:nth-child(4){order:3}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
6208
6187
|
}
|
|
6209
6188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditableFormWrapperComponent, decorators: [{
|
|
6210
6189
|
type: Component,
|
|
6211
|
-
args: [{ selector: 'al-form', standalone: true, imports: [CommonModule, MatIconModule, MatButtonModule, ButtonComponent], changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"al-form-wrapper\" #wrapper [attr.data-test-id]=\"testId\">\n <div *ngIf=\"showLeftButton\" #leftButton class=\"fab left\">\n <al-button [buttonType]=\"'icon-circle'\" [iconOnly]=\"true\"\n [leftIcon]=\"isLeftButtonActive ? 'close' : 'auto_fix_high'\"\n [arialabel]=\"isLeftButtonActive ? 'Close' : 'Edit'\"\n [size]=\"'base'\"\n [color]=\"isLeftButtonActive ? 'grey' : 'gradient'\"\n (onClick)=\"handleLeftButtonClick($event)\">\n </al-button>\n <div *ngIf=\"isLeftButtonActive\"\n class=\"left-button-container\"\n [ngClass]=\"leftContainerClass\"\n [ngStyle]=\"leftContainerStyle\">\n <ng-content select=\"[leftButtonContent]\"></ng-content>\n </div>\n </div>\n <div class=\"inner\"><ng-content></ng-content></div>\n <div class=\"fab-group right\" #buttonGroup><al-button *ngIf=\"showSaveButton\" class=\"fab\" [buttonType]=\"'icon-circle'\"\n [iconOnly]=\"true\" [leftIcon]=\"'save'\" [arialabel]=\"'Save'\" [size]=\"'base'\" iconOutlined=\"true\"\n [color]=\"'green'\" (onClick)=\"saveButtonClick.emit($event)\"></al-button><al-button *ngIf=\"showDeleteButton\" class=\"fab warn\" [buttonType]=\"'icon-circle'\"\n [iconOnly]=\"true\" [leftIcon]=\"'cancel'\" [arialabel]=\"'Delete'\" [size]=\"'base'\" [color]=\"'error'\" iconOutlined=\"true\"\n (onClick)=\"deleteButtonClick.emit($event)\"></al-button>\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}:host{display:block;position:relative;padding:0}:host ::ng-deep .al-form__grid{display:grid;gap:16px;margin-top:16px}:host ::ng-deep .al-form__grid.cols-1{grid-template-columns:1fr}:host ::ng-deep .al-form__grid.cols-2{grid-template-columns:1fr 1fr}:host ::ng-deep .al-form__grid.cols-3{grid-template-columns:1fr 1fr 1fr}:host ::ng-deep .al-form__grid .full{grid-column:1/-1}.al-form-wrapper{position:relative;border-radius:16px;background:transparent;width:100%;max-width:100%;box-sizing:border-box;overflow:visible;container-type:inline-size;container-name:form-wrapper}.al-form-wrapper:before{content:\"\";position:absolute;inset:0;border:1px solid var(--Base-Blue, #6581EA);border-radius:10px;box-shadow:0 0 0 6px #5473e814;pointer-events:none;z-index:1}.al-form-wrapper>.inner{position:relative;padding:24px!important;border-radius:10px;background:#fff;box-sizing:border-box;z-index:0}.al-form-wrapper>.inner>:first-child{margin-top:0!important}.al-form-wrapper>.inner>:last-child{margin-bottom:0!important}.al-form__header{display:flex;gap:10px;align-items:baseline}.al-form__title{font-weight:600;color:#222}.al-form__hint{color:#7a818f}.al-form__paragraph{margin:6px 0 0;color:#3a3f4a}.al-form__demo-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}@media (max-width: 767.98px){.al-form__demo-form{grid-template-columns:1fr}}.al-form__demo-form .full{grid-column:1/-1}.al-form__field{display:flex;flex-direction:column;gap:6px}.al-form__field label{font-size:12px;color:#5a6170}.al-form__control{width:100%;padding:10px 12px;border:1px solid #d9def4;border-radius:10px;background:#fff;color:#2a2f3a;outline:none;box-sizing:border-box;box-shadow:0 1px #5877ff0f,inset 0 0 0 2px #5877ff08;transition:box-shadow .15s ease,border-color .15s ease}.al-form__control:focus{border-color:#5877ff99;box-shadow:0 0 0 3px #5877ff24}select.al-form__control{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7a86ff 50%),linear-gradient(135deg,#7a86ff 50%,transparent 50%);background-position:calc(100% - 18px) calc(1em + 2px),calc(100% - 13px) calc(1em + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}.fab.left{position:absolute;left:-16px;top:0;z-index:10;background-color:#fff;border-radius:50%;will-change:transform;transition:transform .1s ease-out}.fab.left .left-button-container{position:absolute;left:56px;top:0;z-index:1;pointer-events:auto}.fab-group.right{position:absolute;right:-16px;top:0;display:flex;flex-direction:column;border-radius:50%;gap:8px;z-index:2;background-color:#fff;will-change:transform;transition:transform .1s ease-out}:host ::ng-deep app-flex-grid+app-flex-grid{margin-top:16px}\n"] }]
|
|
6190
|
+
args: [{ selector: 'al-form', standalone: true, imports: [CommonModule, MatIconModule, MatButtonModule, ButtonComponent], changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"al-form-wrapper\" #wrapper [attr.data-test-id]=\"testId\">\n <div *ngIf=\"showLeftButton\" #leftButton class=\"fab left\">\n <al-button [buttonType]=\"'icon-circle'\" [iconOnly]=\"true\"\n [leftIcon]=\"isLeftButtonActive ? 'close' : 'auto_fix_high'\"\n [arialabel]=\"isLeftButtonActive ? 'Close' : 'Edit'\"\n [size]=\"'base'\"\n [color]=\"isLeftButtonActive ? 'grey' : 'gradient'\"\n (onClick)=\"handleLeftButtonClick($event)\">\n </al-button>\n <div *ngIf=\"isLeftButtonActive\"\n class=\"left-button-container\"\n [ngClass]=\"leftContainerClass\"\n [ngStyle]=\"leftContainerStyle\">\n <ng-content select=\"[leftButtonContent]\"></ng-content>\n </div>\n </div>\n <div class=\"inner\"><ng-content></ng-content></div>\n <div class=\"fab-group right\" #buttonGroup><al-button *ngIf=\"showSaveButton\" class=\"fab\" [buttonType]=\"'icon-circle'\"\n [iconOnly]=\"true\" [leftIcon]=\"'save'\" [arialabel]=\"'Save'\" [size]=\"'base'\" iconOutlined=\"true\"\n [color]=\"'green'\" (onClick)=\"saveButtonClick.emit($event)\"></al-button><al-button *ngIf=\"showDeleteButton\" class=\"fab warn\" [buttonType]=\"'icon-circle'\"\n [iconOnly]=\"true\" [leftIcon]=\"'cancel'\" [arialabel]=\"'Delete'\" [size]=\"'base'\" [color]=\"'error'\" iconOutlined=\"true\"\n (onClick)=\"deleteButtonClick.emit($event)\"></al-button>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";@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}:host{display:block;position:relative;padding:0}:host ::ng-deep .al-form__grid{display:grid;gap:16px;margin-top:16px}:host ::ng-deep .al-form__grid.cols-1{grid-template-columns:1fr}:host ::ng-deep .al-form__grid.cols-2{grid-template-columns:1fr 1fr}:host ::ng-deep .al-form__grid.cols-3{grid-template-columns:1fr 1fr 1fr}:host ::ng-deep .al-form__grid .full{grid-column:1/-1}.al-form-wrapper{position:relative;border-radius:16px;background:transparent;width:100%;max-width:100%;box-sizing:border-box;overflow:visible;container-type:inline-size;container-name:form-wrapper}.al-form-wrapper:before{content:\"\";position:absolute;inset:0;border:1px solid var(--Base-Blue, #6581EA);border-radius:10px;box-shadow:0 0 0 6px #5473e814;pointer-events:none;z-index:1}.al-form-wrapper>.inner{position:relative;padding:24px!important;border-radius:10px;background:#fff;box-sizing:border-box;z-index:0}.al-form-wrapper>.inner>:first-child{margin-top:0!important}.al-form-wrapper>.inner>:last-child{margin-bottom:0!important}.al-form__header{display:flex;gap:10px;align-items:baseline}.al-form__title{font-weight:600;color:#222}.al-form__hint{color:#7a818f}.al-form__paragraph{margin:6px 0 0;color:#3a3f4a}.al-form__demo-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}@media (max-width: 767.98px){.al-form__demo-form{grid-template-columns:1fr}}.al-form__demo-form .full{grid-column:1/-1}.al-form__field{display:flex;flex-direction:column;gap:6px}.al-form__field label{font-size:12px;color:#5a6170}.al-form__control{width:100%;padding:10px 12px;border:1px solid #d9def4;border-radius:10px;background:#fff;color:#2a2f3a;outline:none;box-sizing:border-box;box-shadow:0 1px #5877ff0f,inset 0 0 0 2px #5877ff08;transition:box-shadow .15s ease,border-color .15s ease}.al-form__control:focus{border-color:#5877ff99;box-shadow:0 0 0 3px #5877ff24}select.al-form__control{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7a86ff 50%),linear-gradient(135deg,#7a86ff 50%,transparent 50%);background-position:calc(100% - 18px) calc(1em + 2px),calc(100% - 13px) calc(1em + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}.fab.left{position:absolute;left:-16px;top:0;z-index:10;background-color:#fff;border-radius:50%;will-change:transform;transition:transform .1s ease-out}.fab.left .left-button-container{position:absolute;left:56px;top:0;z-index:1;pointer-events:auto}.fab-group.right{position:absolute;right:-16px;top:0;display:flex;flex-direction:column;border-radius:50%;gap:8px;z-index:2;background-color:#fff;will-change:transform;transition:transform .1s ease-out}:host ::ng-deep app-flex-grid+app-flex-grid{margin-top:16px}:host ::ng-deep app-flex-grid.row{align-items:center}:host ::ng-deep app-flex-grid al-checkbox .checkbox-label-wrapper{margin-top:0;justify-content:center}@media (max-width: 767.98px){:host ::ng-deep app-flex-grid.row.min-cols-2,:host ::ng-deep app-flex-grid.col.min-cols-2{--current-count: 2 !important;grid-template-columns:repeat(2,minmax(0,1fr))!important}}@container form-wrapper (max-width: 600px){:host ::ng-deep app-flex-grid.row.min-cols-2,:host ::ng-deep app-flex-grid.col.min-cols-2{--current-count: 2 !important;grid-template-columns:repeat(2,minmax(0,1fr))!important}}@container form-wrapper (min-width: 600px){:host ::ng-deep app-flex-grid.row.min-cols-2>*:nth-child(1){order:1}:host ::ng-deep app-flex-grid.row.min-cols-2>*:nth-child(2){order:4}:host ::ng-deep app-flex-grid.row.min-cols-2>*:nth-child(3){order:2}:host ::ng-deep app-flex-grid.row.min-cols-2>*:nth-child(4){order:3}}\n"] }]
|
|
6212
6191
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { testId: [{
|
|
6213
6192
|
type: Input
|
|
6214
6193
|
}], showLeftButton: [{
|
|
@@ -6297,9 +6276,13 @@ class ResumeEntriesComponent {
|
|
|
6297
6276
|
/**
|
|
6298
6277
|
* When true, the resume entries section is visually de-emphasised (lower opacity),
|
|
6299
6278
|
* but the first line of each description remains visible (truncated with ellipsis).
|
|
6300
|
-
* This mirrors the
|
|
6279
|
+
* This mirrors the "section hidden" behaviour in the header without fully removing content.
|
|
6301
6280
|
*/
|
|
6302
6281
|
this.isSectionHidden = false;
|
|
6282
|
+
/**
|
|
6283
|
+
* When true, the description items are collapsed (truncated with ellipsis).
|
|
6284
|
+
*/
|
|
6285
|
+
this.isCollapsed = false;
|
|
6303
6286
|
/** Event emitted when the reapply button is clicked for a specific entry */
|
|
6304
6287
|
this.reapplyClick = new EventEmitter();
|
|
6305
6288
|
/** Event emitted when the undo button is clicked for a specific entry */
|
|
@@ -6323,11 +6306,11 @@ class ResumeEntriesComponent {
|
|
|
6323
6306
|
return this.reappliedEntries.has(index);
|
|
6324
6307
|
}
|
|
6325
6308
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResumeEntriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6326
|
-
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" }, 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\" [matTooltip]=\"companyTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!companyTooltip\">\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 </lib-field-placeholder>\n </div>\n\n <!-- Job title / Course name: always below company line -->\n <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\" [matTooltip]=\"jobTitleTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!jobTitleTooltip\">\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 </lib-field-placeholder>\n </div>\n </div>\n <div class=\"header-right\">\n <div class=\"date-range mobile-order-1\" *ngIf=\"showDates\" [matTooltip]=\"dateTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!dateTooltip\">\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\">\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 </lib-field-placeholder>\n </div>\n <div class=\"location-row mobile-order-4\" *ngIf=\"showLocation\" [matTooltip]=\"locationTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!locationTooltip\"><lib-field-placeholder\n [value]=\"entry.city\" [placeholder]=\"'City'\" valueClass=\"font-location-text\"\n [testId]=\"'entry-' + i + '-city'\" [compact]=\"true\"></lib-field-placeholder><lib-field-placeholder\n [value]=\"entry.region\" [placeholder]=\"'Region'\" valueClass=\"font-location-text\"\n [testId]=\"'entry-' + i + '-region'\" [compact]=\"true\"></lib-field-placeholder><lib-field-placeholder\n [value]=\"entry.country\" [placeholder]=\"'Country'\" valueClass=\"font-location-text\"\n [testId]=\"'entry-' + i + '-country'\" [compact]=\"true\"></lib-field-placeholder></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\"\n [matTooltip]=\"descriptionTooltip\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!descriptionTooltip\">\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 </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>", 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)}.resume-entry:last-child .timeline-line{display:none}.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}.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:30%}@container resume-entries (max-width: 400px){.mobile-order-2,.mobile-order-3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mobile-order-2 ::ng-deep lib-field-placeholder,.mobile-order-3 ::ng-deep lib-field-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;width:100%}.mobile-order-2 ::ng-deep lib-field-placeholder .value-text,.mobile-order-3 ::ng-deep lib-field-placeholder .value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%}.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,.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,.location-row{align-items:flex-start}}.date-range{display:flex;flex-direction:row;align-items:center;gap:8px}.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 ::ng-deep .value-text{color:#717793}.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 }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
6309
|
+
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 }] }); }
|
|
6327
6310
|
}
|
|
6328
6311
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResumeEntriesComponent, decorators: [{
|
|
6329
6312
|
type: Component,
|
|
6330
|
-
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\" [matTooltip]=\"companyTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!companyTooltip\">\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 </lib-field-placeholder>\n </div>\n\n <!-- Job title / Course name: always below company line -->\n <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\" [matTooltip]=\"jobTitleTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!jobTitleTooltip\">\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 </lib-field-placeholder>\n </div>\n </div>\n <div class=\"header-right\">\n <div class=\"date-range mobile-order-1\" *ngIf=\"showDates\" [matTooltip]=\"dateTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!dateTooltip\">\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\">\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 </lib-field-placeholder>\n </div>\n <div class=\"location-row mobile-order-4\" *ngIf=\"showLocation\" [matTooltip]=\"locationTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!locationTooltip\"><lib-field-placeholder\n [value]=\"entry.city\" [placeholder]=\"'City'\" valueClass=\"font-location-text\"\n [testId]=\"'entry-' + i + '-city'\" [compact]=\"true\"></lib-field-placeholder><lib-field-placeholder\n [value]=\"entry.region\" [placeholder]=\"'Region'\" valueClass=\"font-location-text\"\n [testId]=\"'entry-' + i + '-region'\" [compact]=\"true\"></lib-field-placeholder><lib-field-placeholder\n [value]=\"entry.country\" [placeholder]=\"'Country'\" valueClass=\"font-location-text\"\n [testId]=\"'entry-' + i + '-country'\" [compact]=\"true\"></lib-field-placeholder></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\"\n [matTooltip]=\"descriptionTooltip\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!descriptionTooltip\">\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 </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>", 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)}.resume-entry:last-child .timeline-line{display:none}.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}.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:30%}@container resume-entries (max-width: 400px){.mobile-order-2,.mobile-order-3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mobile-order-2 ::ng-deep lib-field-placeholder,.mobile-order-3 ::ng-deep lib-field-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;width:100%}.mobile-order-2 ::ng-deep lib-field-placeholder .value-text,.mobile-order-3 ::ng-deep lib-field-placeholder .value-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%}.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,.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,.location-row{align-items:flex-start}}.date-range{display:flex;flex-direction:row;align-items:center;gap:8px}.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 ::ng-deep .value-text{color:#717793}.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"] }]
|
|
6313
|
+
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"] }]
|
|
6331
6314
|
}], propDecorators: { entries: [{
|
|
6332
6315
|
type: Input
|
|
6333
6316
|
}], showHeader: [{
|
|
@@ -6370,6 +6353,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6370
6353
|
type: Input
|
|
6371
6354
|
}], isSectionHidden: [{
|
|
6372
6355
|
type: Input
|
|
6356
|
+
}], isCollapsed: [{
|
|
6357
|
+
type: Input
|
|
6373
6358
|
}], reapplyClick: [{
|
|
6374
6359
|
type: Output
|
|
6375
6360
|
}], undoClick: [{
|
|
@@ -6459,11 +6444,11 @@ class AppToolbarLeftComponent {
|
|
|
6459
6444
|
this.sendMessage();
|
|
6460
6445
|
}
|
|
6461
6446
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppToolbarLeftComponent, deps: [{ token: i1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6462
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppToolbarLeftComponent, isStandalone: true, selector: "toolbar-left", inputs: { variant: "variant", overrideConfig: "overrideConfig", content: "content", isExtractionAnalysisActive: "isExtractionAnalysisActive", showSearch: "showSearch" }, outputs: { editEvent: "editEvent" }, ngImport: i0, template: "<div class=\"toolbar-container\">\n <div class=\"icon-wrapper\"><button type=\"button\" class=\"toolbar-icon toolbar-icon--handle\"\n [attr.aria-label]=\"requiredIcon.handle.title\" [
|
|
6447
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppToolbarLeftComponent, isStandalone: true, selector: "toolbar-left", inputs: { variant: "variant", overrideConfig: "overrideConfig", content: "content", isExtractionAnalysisActive: "isExtractionAnalysisActive", showSearch: "showSearch" }, outputs: { editEvent: "editEvent" }, ngImport: i0, template: "<div class=\"toolbar-container\">\n <div class=\"icon-wrapper\"><button type=\"button\" class=\"toolbar-icon toolbar-icon--handle\"\n [attr.aria-label]=\"requiredIcon.handle.title\" [matTooltip]=\"requiredIcon.handle.title\"\n matTooltipPosition=\"left\" (click)=\"$event.stopPropagation()\"><mat-icon svgIcon=\"handle\" class=\"handle-icon\"></mat-icon></button></div>\n <div class=\"toolbar-icons\">\n <div class=\"icon-wrapper\"><button type=\"button\" class=\"toolbar-icon toolbar-icon--edit\"\n [attr.aria-label]=\"requiredIcon.edit.title\" [matTooltip]=\"requiredIcon.edit.title\"\n matTooltipPosition=\"left\" (click)=\"editSelectedSection()\"><mat-icon svgIcon=\"edit_icon\" class=\"edit-icon\"></mat-icon></button></div>\n <div class=\"icon-wrapper\"><button type=\"button\" class=\"toolbar-icon toolbar-icon--search\"\n [attr.aria-label]=\"requiredIcon.search.title\" [matTooltip]=\"requiredIcon.search.title\"\n matTooltipPosition=\"left\" (click)=\"onSearchClick($event)\"><mat-icon svgIcon=\"search\" class=\"search-icon\"></mat-icon></button></div>\n </div>\n</div>", styles: [":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}.toolbar-container{background-color:transparent;border-radius:8px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:12px;transition:background-color .2s ease}.toolbar-container:hover{background-color:#e5e9fc}.toolbar-icon{border-radius:8px;color:#a2a6b8;background:transparent;transition:background .2s,color .2s;cursor:pointer}.toolbar-icon:focus,.toolbar-icon:hover,.toolbar-icon.active{color:#374151}.toolbar-icon--handle,.toolbar-icon--edit,.toolbar-icon--search{border:none;background:transparent;padding:0;display:inline-flex;align-items:center;justify-content:center}.toolbar-icon--handle{cursor:grab}.toolbar-icon--handle:active{cursor:grabbing}.icon-wrapper{position:relative;display:flex;width:20px;height:20px;padding:2px;justify-content:center;align-items:center;flex-shrink:0;aspect-ratio:1/1;background-color:transparent;border-radius:4px;margin:0 auto;box-sizing:border-box}.icon-wrapper:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;background-color:transparent;border-radius:4px;transition:width .2s ease,height .2s ease,background-color .2s ease;z-index:0;pointer-events:none}.icon-wrapper:hover:before{width:22px;height:22px;background-color:#bbc7f6}.icon-wrapper ::ng-deep al-icon-button,.icon-wrapper button{position:relative;z-index:1}.handle-icon,.edit-icon,.search-icon{width:20px;height:20px;font-size:20px;color:#a2a6b8}.handle-icon mat-icon,.edit-icon mat-icon,.search-icon mat-icon{width:20px;height:20px;font-size:20px;color:#a2a6b8}.handle-icon mat-icon ::ng-deep svg,.edit-icon mat-icon ::ng-deep svg,.search-icon mat-icon ::ng-deep svg{width:20px;height:20px}.icon-wrapper .toolbar-icon{width:20px;height:20px;margin:0 auto}.toolbar-icons{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s}.toolbar-container:hover .toolbar-icons{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .15s ease,transform .15s ease,visibility 0s}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] }); }
|
|
6463
6448
|
}
|
|
6464
6449
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppToolbarLeftComponent, decorators: [{
|
|
6465
6450
|
type: Component,
|
|
6466
|
-
args: [{ selector: 'toolbar-left', standalone: true, imports: [CommonModule, MatIconModule, IconButtonComponent], template: "<div class=\"toolbar-container\">\n <div class=\"icon-wrapper\"><button type=\"button\" class=\"toolbar-icon toolbar-icon--handle\"\n [attr.aria-label]=\"requiredIcon.handle.title\" [
|
|
6451
|
+
args: [{ selector: 'toolbar-left', standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule, IconButtonComponent], template: "<div class=\"toolbar-container\">\n <div class=\"icon-wrapper\"><button type=\"button\" class=\"toolbar-icon toolbar-icon--handle\"\n [attr.aria-label]=\"requiredIcon.handle.title\" [matTooltip]=\"requiredIcon.handle.title\"\n matTooltipPosition=\"left\" (click)=\"$event.stopPropagation()\"><mat-icon svgIcon=\"handle\" class=\"handle-icon\"></mat-icon></button></div>\n <div class=\"toolbar-icons\">\n <div class=\"icon-wrapper\"><button type=\"button\" class=\"toolbar-icon toolbar-icon--edit\"\n [attr.aria-label]=\"requiredIcon.edit.title\" [matTooltip]=\"requiredIcon.edit.title\"\n matTooltipPosition=\"left\" (click)=\"editSelectedSection()\"><mat-icon svgIcon=\"edit_icon\" class=\"edit-icon\"></mat-icon></button></div>\n <div class=\"icon-wrapper\"><button type=\"button\" class=\"toolbar-icon toolbar-icon--search\"\n [attr.aria-label]=\"requiredIcon.search.title\" [matTooltip]=\"requiredIcon.search.title\"\n matTooltipPosition=\"left\" (click)=\"onSearchClick($event)\"><mat-icon svgIcon=\"search\" class=\"search-icon\"></mat-icon></button></div>\n </div>\n</div>", styles: [":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}.toolbar-container{background-color:transparent;border-radius:8px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:12px;transition:background-color .2s ease}.toolbar-container:hover{background-color:#e5e9fc}.toolbar-icon{border-radius:8px;color:#a2a6b8;background:transparent;transition:background .2s,color .2s;cursor:pointer}.toolbar-icon:focus,.toolbar-icon:hover,.toolbar-icon.active{color:#374151}.toolbar-icon--handle,.toolbar-icon--edit,.toolbar-icon--search{border:none;background:transparent;padding:0;display:inline-flex;align-items:center;justify-content:center}.toolbar-icon--handle{cursor:grab}.toolbar-icon--handle:active{cursor:grabbing}.icon-wrapper{position:relative;display:flex;width:20px;height:20px;padding:2px;justify-content:center;align-items:center;flex-shrink:0;aspect-ratio:1/1;background-color:transparent;border-radius:4px;margin:0 auto;box-sizing:border-box}.icon-wrapper:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;background-color:transparent;border-radius:4px;transition:width .2s ease,height .2s ease,background-color .2s ease;z-index:0;pointer-events:none}.icon-wrapper:hover:before{width:22px;height:22px;background-color:#bbc7f6}.icon-wrapper ::ng-deep al-icon-button,.icon-wrapper button{position:relative;z-index:1}.handle-icon,.edit-icon,.search-icon{width:20px;height:20px;font-size:20px;color:#a2a6b8}.handle-icon mat-icon,.edit-icon mat-icon,.search-icon mat-icon{width:20px;height:20px;font-size:20px;color:#a2a6b8}.handle-icon mat-icon ::ng-deep svg,.edit-icon mat-icon ::ng-deep svg,.search-icon mat-icon ::ng-deep svg{width:20px;height:20px}.icon-wrapper .toolbar-icon{width:20px;height:20px;margin:0 auto}.toolbar-icons{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s}.toolbar-container:hover .toolbar-icons{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .15s ease,transform .15s ease,visibility 0s}\n"] }]
|
|
6467
6452
|
}], ctorParameters: () => [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }], propDecorators: { variant: [{
|
|
6468
6453
|
type: Input
|
|
6469
6454
|
}], overrideConfig: [{
|
|
@@ -6615,11 +6600,11 @@ class AppToolbarRightComponent {
|
|
|
6615
6600
|
this.setSubroleEvent.emit(!this.currentObj['subrole']);
|
|
6616
6601
|
}
|
|
6617
6602
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppToolbarRightComponent, deps: [{ token: i1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6618
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppToolbarRightComponent, selector: "toolbar-right", inputs: { alwaysShowIcons: "alwaysShowIcons", checked: "checked", overrideConfig: "overrideConfig", currentObj: "currentObj" }, outputs: { checkboxChange: "checkboxChange", visibilityToggle: "visibilityToggle", hideShowEvent: "hideShowEvent", checkboxEvent: "checkboxEvent", setSubroleEvent: "setSubroleEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toolbar-right-container\">\n <div class=\"icon-wrapper\"><al-checkbox *ngIf=\"requiredIcon.checkbox.display\" [checked]=\"checked\" [showLabels]=\"false\"\n (change)=\"onCheckboxChange($event)\" (mouseenter)=\"onCheckboxHover(true)\"\n (mouseleave)=\"onCheckboxHover(false)\"></al-checkbox></div>\n <div class=\"toolbar-right-icons\" [ngClass]=\"{'always-visible': showIcons}\">\n <div class=\"icon-wrapper\" *ngIf=\"requiredIcon.sr.display\"><button type=\"button\"\n class=\"toolbar-icon toolbar-icon--subrole\" [attr.aria-label]=\"requiredIcon.sr.title\"\n [attr.title]=\"requiredIcon.sr.title\" (click)=\"setSubrole()\"><mat-icon\n [svgIcon]=\"currentObj['subrole'] ? 'subrole_active' : 'subrole-icon-grey'\" class=\"subrole-icon\"></mat-icon></button>\n </div>\n <div class=\"icon-wrapper\"><button *ngIf=\"requiredIcon.eye.display\" type=\"button\"\n class=\"toolbar-icon toolbar-icon--eye eye-icon\" [attr.aria-label]=\"eyeLabel\" [attr.title]=\"eyeTitle\"\n (click)=\"onToggleVisibility()\"><mat-icon [svgIcon]=\"eyeSvgIcon\" class=\"eye-icon\"></mat-icon></button></div>\n </div>\n</div>\n", styles: [".toolbar-right-container{background-color:transparent;border-radius:8px;padding:8px 6px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px!important;transition:background-color .3s ease-in-out}.toolbar-right-container ::ng-deep .mat-ripple-element{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.toolbar-right-container ::ng-deep .mat-ripple{display:none!important;visibility:hidden!important;pointer-events:none!important}.toolbar-right-container ::ng-deep .mdc-ripple-surface{--mdc-ripple-fg-opacity: 0 !important;--mdc-ripple-hover-opacity: 0 !important;--mdc-ripple-press-opacity: 0 !important;--mdc-ripple-focus-opacity: 0 !important}.toolbar-right-container ::ng-deep .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mdc-checkbox:hover .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mdc-checkbox:focus .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox:hover .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox:focus .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox.mat-focused .mdc-checkbox__ripple{display:none!important;opacity:0!important;visibility:hidden!important;background-color:transparent!important;pointer-events:none!important;animation:none!important;transform:scale(0)!important}.toolbar-right-container ::ng-deep [class*=ripple],.toolbar-right-container ::ng-deep [class*=Ripple]{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.toolbar-right-container ::ng-deep .mdc-checkbox__native-control:before,.toolbar-right-container ::ng-deep .mdc-checkbox__native-control:after{display:none!important}.toolbar-right-container:hover{background-color:#e5e9fc}al-icon-button{margin:0 auto!important;display:flex;align-items:center;justify-content:center}.icon-wrapper al-checkbox{width:20px!important;height:20px!important;margin:0 auto!important;padding:0!important;display:flex;align-items:center;justify-content:center;background:none!important;border-radius:2px}.icon-wrapper al-checkbox ::ng-deep *{border-radius:2px!important}.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__ripple{display:none!important;opacity:0!important;visibility:hidden!important;background-color:transparent!important;pointer-events:none!important;animation:none!important;transform:scale(0)!important}.icon-wrapper al-checkbox ::ng-deep .mat-ripple-element{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.icon-wrapper al-checkbox ::ng-deep .mat-ripple{display:none!important;visibility:hidden!important;pointer-events:none!important}.icon-wrapper al-checkbox ::ng-deep .mdc-ripple-surface{--mdc-ripple-fg-opacity: 0 !important;--mdc-ripple-hover-opacity: 0 !important;--mdc-ripple-press-opacity: 0 !important;--mdc-ripple-focus-opacity: 0 !important}.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__native-control:before,.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__native-control:after{display:none!important;content:none!important}: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-icon-button{color:#4b4f62!important;background:transparent!important}:host ::ng-deep al-icon-button:hover,:host ::ng-deep al-icon-button:focus{background:transparent!important;color:#4b4f62!important}.toolbar-right-icons{display:flex;flex-direction:column;align-items:center;gap:12px;visibility:hidden;opacity:0;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.icon-wrapper{position:relative;display:flex;width:20px;height:20px;padding:2px;justify-content:center;align-items:center;flex-shrink:0;aspect-ratio:1/1;background-color:transparent;border-radius:4px;margin:0 auto;box-sizing:border-box}.icon-wrapper:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;background-color:transparent;border-radius:4px;transition:width .2s ease,height .2s ease,background-color .2s ease;z-index:0;pointer-events:none;padding:0;box-sizing:border-box}.icon-wrapper ::ng-deep al-icon-button,.icon-wrapper ::ng-deep al-checkbox,.icon-wrapper button{position:relative;z-index:1}.toolbar-right-container>.icon-wrapper:first-child:hover:before{background-color:transparent;width:20px;height:20px;padding:0}.toolbar-right-icons .icon-wrapper:hover:before{width:24px;height:24px;background-color:#bbc7f6}.toolbar-right-container:has(.toolbar-right-icons .icon-wrapper:has(.eye-icon):hover)>.icon-wrapper:first-child:before{width:24px;height:24px;background-color:#bbc7f6}.toolbar-right-container:hover .toolbar-right-icons,.toolbar-right-icons.always-visible{visibility:visible;opacity:1}.toolbar-icon{border:none;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;width:20px;height:20px;margin:0 auto}.toolbar-icon:after{display:none!important}.toolbar-icon ::ng-deep .mat-ripple-element{display:none!important}.toolbar-icon ::ng-deep .mat-ripple{display:none!important}.subrole-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.subrole-icon mat-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.eye-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.eye-icon mat-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.icon-wrapper al-icon-button{width:20px;height:20px;margin:0 auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
6603
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppToolbarRightComponent, selector: "toolbar-right", inputs: { alwaysShowIcons: "alwaysShowIcons", checked: "checked", overrideConfig: "overrideConfig", currentObj: "currentObj" }, outputs: { checkboxChange: "checkboxChange", visibilityToggle: "visibilityToggle", hideShowEvent: "hideShowEvent", checkboxEvent: "checkboxEvent", setSubroleEvent: "setSubroleEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toolbar-right-container\">\n <div class=\"icon-wrapper\"><al-checkbox *ngIf=\"requiredIcon.checkbox.display\" [checked]=\"checked\" [showLabels]=\"false\"\n (change)=\"onCheckboxChange($event)\" (mouseenter)=\"onCheckboxHover(true)\"\n (mouseleave)=\"onCheckboxHover(false)\"></al-checkbox></div>\n <div class=\"toolbar-right-icons\" [ngClass]=\"{'always-visible': showIcons}\">\n <div class=\"icon-wrapper\" *ngIf=\"requiredIcon.sr.display\"><button type=\"button\"\n class=\"toolbar-icon toolbar-icon--subrole\" [attr.aria-label]=\"requiredIcon.sr.title\"\n [matTooltip]=\"requiredIcon.sr.title\" matTooltipPosition=\"right\" (click)=\"setSubrole()\"><mat-icon\n [svgIcon]=\"currentObj['subrole'] ? 'subrole_active' : 'subrole-icon-grey'\"\n class=\"subrole-icon\"></mat-icon></button>\n </div>\n <div class=\"icon-wrapper\"><button *ngIf=\"requiredIcon.eye.display\" type=\"button\"\n class=\"toolbar-icon toolbar-icon--eye eye-icon\" [attr.aria-label]=\"eyeLabel\" [matTooltip]=\"eyeTitle\"\n matTooltipPosition=\"right\" (click)=\"onToggleVisibility()\"><mat-icon [svgIcon]=\"eyeSvgIcon\"\n class=\"eye-icon\"></mat-icon></button></div>\n </div>\n</div>", styles: [".toolbar-right-container{background-color:transparent;border-radius:8px;padding:8px 6px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px!important;transition:background-color .3s ease-in-out}.toolbar-right-container ::ng-deep .mat-ripple-element{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.toolbar-right-container ::ng-deep .mat-ripple{display:none!important;visibility:hidden!important;pointer-events:none!important}.toolbar-right-container ::ng-deep .mdc-ripple-surface{--mdc-ripple-fg-opacity: 0 !important;--mdc-ripple-hover-opacity: 0 !important;--mdc-ripple-press-opacity: 0 !important;--mdc-ripple-focus-opacity: 0 !important}.toolbar-right-container ::ng-deep .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mdc-checkbox:hover .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mdc-checkbox:focus .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox:hover .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox:focus .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox.mat-focused .mdc-checkbox__ripple{display:none!important;opacity:0!important;visibility:hidden!important;background-color:transparent!important;pointer-events:none!important;animation:none!important;transform:scale(0)!important}.toolbar-right-container ::ng-deep [class*=ripple],.toolbar-right-container ::ng-deep [class*=Ripple]{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.toolbar-right-container ::ng-deep .mdc-checkbox__native-control:before,.toolbar-right-container ::ng-deep .mdc-checkbox__native-control:after{display:none!important}.toolbar-right-container:hover{background-color:#e5e9fc}al-icon-button{margin:0 auto!important;display:flex;align-items:center;justify-content:center}.icon-wrapper al-checkbox{width:20px!important;height:20px!important;margin:0 auto!important;padding:0!important;display:flex;align-items:center;justify-content:center;background:none!important;border-radius:2px}.icon-wrapper al-checkbox ::ng-deep *{border-radius:2px!important}.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__ripple{display:none!important;opacity:0!important;visibility:hidden!important;background-color:transparent!important;pointer-events:none!important;animation:none!important;transform:scale(0)!important}.icon-wrapper al-checkbox ::ng-deep .mat-ripple-element{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.icon-wrapper al-checkbox ::ng-deep .mat-ripple{display:none!important;visibility:hidden!important;pointer-events:none!important}.icon-wrapper al-checkbox ::ng-deep .mdc-ripple-surface{--mdc-ripple-fg-opacity: 0 !important;--mdc-ripple-hover-opacity: 0 !important;--mdc-ripple-press-opacity: 0 !important;--mdc-ripple-focus-opacity: 0 !important}.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__native-control:before,.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__native-control:after{display:none!important;content:none!important}: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-icon-button{color:#4b4f62!important;background:transparent!important}:host ::ng-deep al-icon-button:hover,:host ::ng-deep al-icon-button:focus{background:transparent!important;color:#4b4f62!important}.toolbar-right-icons{display:flex;flex-direction:column;align-items:center;gap:12px;visibility:hidden;opacity:0;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.icon-wrapper{position:relative;display:flex;width:20px;height:20px;padding:2px;justify-content:center;align-items:center;flex-shrink:0;aspect-ratio:1/1;background-color:transparent;border-radius:4px;margin:0 auto;box-sizing:border-box}.icon-wrapper:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;background-color:transparent;border-radius:4px;transition:width .2s ease,height .2s ease,background-color .2s ease;z-index:0;pointer-events:none;padding:0;box-sizing:border-box}.icon-wrapper ::ng-deep al-icon-button,.icon-wrapper ::ng-deep al-checkbox,.icon-wrapper button{position:relative;z-index:1}.toolbar-right-container>.icon-wrapper:first-child:hover:before{background-color:transparent;width:20px;height:20px;padding:0}.toolbar-right-icons .icon-wrapper:hover:before{width:24px;height:24px;background-color:#bbc7f6}.toolbar-right-container:has(.toolbar-right-icons .icon-wrapper:has(.eye-icon):hover)>.icon-wrapper:first-child:before{width:24px;height:24px;background-color:#bbc7f6}.toolbar-right-container:hover .toolbar-right-icons,.toolbar-right-icons.always-visible{visibility:visible;opacity:1}.toolbar-icon{border:none;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;width:20px;height:20px;margin:0 auto}.toolbar-icon:after{display:none!important}.toolbar-icon ::ng-deep .mat-ripple-element{display:none!important}.toolbar-icon ::ng-deep .mat-ripple{display:none!important}.subrole-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.subrole-icon mat-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.eye-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.eye-icon mat-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.icon-wrapper al-icon-button{width:20px;height:20px;margin:0 auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
6619
6604
|
}
|
|
6620
6605
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppToolbarRightComponent, decorators: [{
|
|
6621
6606
|
type: Component,
|
|
6622
|
-
args: [{ selector: 'toolbar-right', template: "<div class=\"toolbar-right-container\">\n <div class=\"icon-wrapper\"><al-checkbox *ngIf=\"requiredIcon.checkbox.display\" [checked]=\"checked\" [showLabels]=\"false\"\n (change)=\"onCheckboxChange($event)\" (mouseenter)=\"onCheckboxHover(true)\"\n (mouseleave)=\"onCheckboxHover(false)\"></al-checkbox></div>\n <div class=\"toolbar-right-icons\" [ngClass]=\"{'always-visible': showIcons}\">\n <div class=\"icon-wrapper\" *ngIf=\"requiredIcon.sr.display\"><button type=\"button\"\n class=\"toolbar-icon toolbar-icon--subrole\" [attr.aria-label]=\"requiredIcon.sr.title\"\n [
|
|
6607
|
+
args: [{ selector: 'toolbar-right', template: "<div class=\"toolbar-right-container\">\n <div class=\"icon-wrapper\"><al-checkbox *ngIf=\"requiredIcon.checkbox.display\" [checked]=\"checked\" [showLabels]=\"false\"\n (change)=\"onCheckboxChange($event)\" (mouseenter)=\"onCheckboxHover(true)\"\n (mouseleave)=\"onCheckboxHover(false)\"></al-checkbox></div>\n <div class=\"toolbar-right-icons\" [ngClass]=\"{'always-visible': showIcons}\">\n <div class=\"icon-wrapper\" *ngIf=\"requiredIcon.sr.display\"><button type=\"button\"\n class=\"toolbar-icon toolbar-icon--subrole\" [attr.aria-label]=\"requiredIcon.sr.title\"\n [matTooltip]=\"requiredIcon.sr.title\" matTooltipPosition=\"right\" (click)=\"setSubrole()\"><mat-icon\n [svgIcon]=\"currentObj['subrole'] ? 'subrole_active' : 'subrole-icon-grey'\"\n class=\"subrole-icon\"></mat-icon></button>\n </div>\n <div class=\"icon-wrapper\"><button *ngIf=\"requiredIcon.eye.display\" type=\"button\"\n class=\"toolbar-icon toolbar-icon--eye eye-icon\" [attr.aria-label]=\"eyeLabel\" [matTooltip]=\"eyeTitle\"\n matTooltipPosition=\"right\" (click)=\"onToggleVisibility()\"><mat-icon [svgIcon]=\"eyeSvgIcon\"\n class=\"eye-icon\"></mat-icon></button></div>\n </div>\n</div>", styles: [".toolbar-right-container{background-color:transparent;border-radius:8px;padding:8px 6px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px!important;transition:background-color .3s ease-in-out}.toolbar-right-container ::ng-deep .mat-ripple-element{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.toolbar-right-container ::ng-deep .mat-ripple{display:none!important;visibility:hidden!important;pointer-events:none!important}.toolbar-right-container ::ng-deep .mdc-ripple-surface{--mdc-ripple-fg-opacity: 0 !important;--mdc-ripple-hover-opacity: 0 !important;--mdc-ripple-press-opacity: 0 !important;--mdc-ripple-focus-opacity: 0 !important}.toolbar-right-container ::ng-deep .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mdc-checkbox:hover .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mdc-checkbox:focus .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox:hover .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox:focus .mdc-checkbox__ripple,.toolbar-right-container ::ng-deep .mat-mdc-checkbox.mat-focused .mdc-checkbox__ripple{display:none!important;opacity:0!important;visibility:hidden!important;background-color:transparent!important;pointer-events:none!important;animation:none!important;transform:scale(0)!important}.toolbar-right-container ::ng-deep [class*=ripple],.toolbar-right-container ::ng-deep [class*=Ripple]{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.toolbar-right-container ::ng-deep .mdc-checkbox__native-control:before,.toolbar-right-container ::ng-deep .mdc-checkbox__native-control:after{display:none!important}.toolbar-right-container:hover{background-color:#e5e9fc}al-icon-button{margin:0 auto!important;display:flex;align-items:center;justify-content:center}.icon-wrapper al-checkbox{width:20px!important;height:20px!important;margin:0 auto!important;padding:0!important;display:flex;align-items:center;justify-content:center;background:none!important;border-radius:2px}.icon-wrapper al-checkbox ::ng-deep *{border-radius:2px!important}.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__ripple{display:none!important;opacity:0!important;visibility:hidden!important;background-color:transparent!important;pointer-events:none!important;animation:none!important;transform:scale(0)!important}.icon-wrapper al-checkbox ::ng-deep .mat-ripple-element{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;animation:none!important}.icon-wrapper al-checkbox ::ng-deep .mat-ripple{display:none!important;visibility:hidden!important;pointer-events:none!important}.icon-wrapper al-checkbox ::ng-deep .mdc-ripple-surface{--mdc-ripple-fg-opacity: 0 !important;--mdc-ripple-hover-opacity: 0 !important;--mdc-ripple-press-opacity: 0 !important;--mdc-ripple-focus-opacity: 0 !important}.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__native-control:before,.icon-wrapper al-checkbox ::ng-deep .mdc-checkbox__native-control:after{display:none!important;content:none!important}: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-icon-button{color:#4b4f62!important;background:transparent!important}:host ::ng-deep al-icon-button:hover,:host ::ng-deep al-icon-button:focus{background:transparent!important;color:#4b4f62!important}.toolbar-right-icons{display:flex;flex-direction:column;align-items:center;gap:12px;visibility:hidden;opacity:0;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.icon-wrapper{position:relative;display:flex;width:20px;height:20px;padding:2px;justify-content:center;align-items:center;flex-shrink:0;aspect-ratio:1/1;background-color:transparent;border-radius:4px;margin:0 auto;box-sizing:border-box}.icon-wrapper:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;background-color:transparent;border-radius:4px;transition:width .2s ease,height .2s ease,background-color .2s ease;z-index:0;pointer-events:none;padding:0;box-sizing:border-box}.icon-wrapper ::ng-deep al-icon-button,.icon-wrapper ::ng-deep al-checkbox,.icon-wrapper button{position:relative;z-index:1}.toolbar-right-container>.icon-wrapper:first-child:hover:before{background-color:transparent;width:20px;height:20px;padding:0}.toolbar-right-icons .icon-wrapper:hover:before{width:24px;height:24px;background-color:#bbc7f6}.toolbar-right-container:has(.toolbar-right-icons .icon-wrapper:has(.eye-icon):hover)>.icon-wrapper:first-child:before{width:24px;height:24px;background-color:#bbc7f6}.toolbar-right-container:hover .toolbar-right-icons,.toolbar-right-icons.always-visible{visibility:visible;opacity:1}.toolbar-icon{border:none;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;width:20px;height:20px;margin:0 auto}.toolbar-icon:after{display:none!important}.toolbar-icon ::ng-deep .mat-ripple-element{display:none!important}.toolbar-icon ::ng-deep .mat-ripple{display:none!important}.subrole-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.subrole-icon mat-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.eye-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.eye-icon mat-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.icon-wrapper al-icon-button{width:20px;height:20px;margin:0 auto}\n"] }]
|
|
6623
6608
|
}], ctorParameters: () => [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }], propDecorators: { alwaysShowIcons: [{
|
|
6624
6609
|
type: Input
|
|
6625
6610
|
}], checked: [{
|
|
@@ -6645,11 +6630,13 @@ class AppToolbarRightModule {
|
|
|
6645
6630
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AppToolbarRightModule, declarations: [AppToolbarRightComponent], imports: [CommonModule,
|
|
6646
6631
|
CheckboxModule,
|
|
6647
6632
|
IconButtonComponent, // Standalone component
|
|
6648
|
-
MatIconModule
|
|
6633
|
+
MatIconModule,
|
|
6634
|
+
MatTooltipModule], exports: [AppToolbarRightComponent] }); }
|
|
6649
6635
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppToolbarRightModule, imports: [CommonModule,
|
|
6650
6636
|
CheckboxModule,
|
|
6651
6637
|
IconButtonComponent, // Standalone component
|
|
6652
|
-
MatIconModule
|
|
6638
|
+
MatIconModule,
|
|
6639
|
+
MatTooltipModule] }); }
|
|
6653
6640
|
}
|
|
6654
6641
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppToolbarRightModule, decorators: [{
|
|
6655
6642
|
type: NgModule,
|
|
@@ -6659,7 +6646,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6659
6646
|
CommonModule,
|
|
6660
6647
|
CheckboxModule,
|
|
6661
6648
|
IconButtonComponent, // Standalone component
|
|
6662
|
-
MatIconModule
|
|
6649
|
+
MatIconModule,
|
|
6650
|
+
MatTooltipModule
|
|
6663
6651
|
],
|
|
6664
6652
|
exports: [AppToolbarRightComponent]
|
|
6665
6653
|
}]
|
|
@@ -6740,7 +6728,7 @@ class ExperienceSectionComponent {
|
|
|
6740
6728
|
this.undoClick.emit(data);
|
|
6741
6729
|
}
|
|
6742
6730
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ExperienceSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6743
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ExperienceSectionComponent, isStandalone: true, selector: "al-experience-section", 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", gap: "gap", padding: "padding", leftWidth: "leftWidth", rightWidth: "rightWidth", stackAt: "stackAt", variant: "variant", content: "content", isExtractionAnalysisActive: "isExtractionAnalysisActive", showSearch: "showSearch", overrideConfig: "overrideConfig", checked: "checked", alwaysShowIcons: "alwaysShowIcons", overrideConfigRight: "overrideConfigRight", currentObj: "currentObj" }, outputs: { editEvent: "editEvent", reapplyClick: "reapplyClick", undoClick: "undoClick", checkboxChange: "checkboxChange", visibilityToggle: "visibilityToggle", hideShowEvent: "hideShowEvent", checkboxEvent: "checkboxEvent", setSubroleEvent: "setSubroleEvent" }, ngImport: i0, template: "<al-responsive-columns [gap]=\"gap\" [padding]=\"padding\" [leftWidth]=\"leftWidth\" [rightWidth]=\"rightWidth\"\n [stackAt]=\"stackAt\">\n <div left><toolbar-left [variant]=\"variant\" [content]=\"content\"\n [isExtractionAnalysisActive]=\"isExtractionAnalysisActive\" [showSearch]=\"showSearch\"\n [overrideConfig]=\"overrideConfig\" (editEvent)=\"onEditEvent($event)\"></toolbar-left></div>\n <div center><al-resume-entries [entries]=\"entries\" [showHeader]=\"showHeader\"\n [showDescriptionLabel]=\"showDescriptionLabel\" [showCompany]=\"showCompany\" [showJobTitle]=\"showJobTitle\"\n [showDates]=\"showDates\" [showLocation]=\"showLocation\" [showTimeline]=\"showTimeline\"\n [showReapplyButton]=\"showReapplyButton\" [showLoader]=\"showLoader\" [loaderForAllEntries]=\"loaderForAllEntries\"\n [loaderStatus]=\"loaderStatus\" [loaderSize]=\"loaderSize\" [skills]=\"skills\" [companyTooltip]=\"companyTooltip\"\n [jobTitleTooltip]=\"jobTitleTooltip\" [dateTooltip]=\"dateTooltip\" [locationTooltip]=\"locationTooltip\"\n [descriptionTooltip]=\"descriptionTooltip\" [tooltipPosition]=\"tooltipPosition\" [isSectionHidden]=\"isSectionHidden\"\n (reapplyClick)=\"onReapplyClick($event)\" (undoClick)=\"onUndoClick($event)\"></al-resume-entries>\n </div>\n <div right><toolbar-right [checked]=\"checked\" [alwaysShowIcons]=\"alwaysShowIcons\"\n [overrideConfig]=\"overrideConfigRight\" [currentObj]=\"currentObj\" (checkboxChange)=\"onCheckboxChange($event)\"\n (visibilityToggle)=\"onVisibilityToggle($event)\" (hideShowEvent)=\"onHideShowEvent($event)\"\n (checkboxEvent)=\"onCheckboxEvent($event)\" (setSubroleEvent)=\"onSetSubroleEvent($event)\"></toolbar-right>\n </div>\n</al-responsive-columns>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ResponsiveColumnsComponent, selector: "al-responsive-columns", inputs: ["dataTestId", "gap", "padding", "leftWidth", "rightWidth", "stackAt"] }, { kind: "component", type: ResumeEntriesComponent, selector: "al-resume-entries", inputs: ["entries", "showHeader", "showDescriptionLabel", "showCompany", "showJobTitle", "showDates", "showLocation", "showTimeline", "showReapplyButton", "showLoader", "loaderForAllEntries", "loaderStatus", "loaderSize", "skills", "companyTooltip", "jobTitleTooltip", "dateTooltip", "locationTooltip", "descriptionTooltip", "tooltipPosition", "isSectionHidden"], outputs: ["reapplyClick", "undoClick"] }, { kind: "component", type: AppToolbarLeftComponent, selector: "toolbar-left", inputs: ["variant", "overrideConfig", "content", "isExtractionAnalysisActive", "showSearch"], outputs: ["editEvent"] }, { kind: "ngmodule", type: AppToolbarRightModule }, { kind: "component", type: AppToolbarRightComponent, selector: "toolbar-right", inputs: ["alwaysShowIcons", "checked", "overrideConfig", "currentObj"], outputs: ["checkboxChange", "visibilityToggle", "hideShowEvent", "checkboxEvent", "setSubroleEvent"] }] }); }
|
|
6731
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ExperienceSectionComponent, isStandalone: true, selector: "al-experience-section", 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", gap: "gap", padding: "padding", leftWidth: "leftWidth", rightWidth: "rightWidth", stackAt: "stackAt", variant: "variant", content: "content", isExtractionAnalysisActive: "isExtractionAnalysisActive", showSearch: "showSearch", overrideConfig: "overrideConfig", checked: "checked", alwaysShowIcons: "alwaysShowIcons", overrideConfigRight: "overrideConfigRight", currentObj: "currentObj" }, outputs: { editEvent: "editEvent", reapplyClick: "reapplyClick", undoClick: "undoClick", checkboxChange: "checkboxChange", visibilityToggle: "visibilityToggle", hideShowEvent: "hideShowEvent", checkboxEvent: "checkboxEvent", setSubroleEvent: "setSubroleEvent" }, ngImport: i0, template: "<al-responsive-columns [gap]=\"gap\" [padding]=\"padding\" [leftWidth]=\"leftWidth\" [rightWidth]=\"rightWidth\"\n [stackAt]=\"stackAt\">\n <div left><toolbar-left [variant]=\"variant\" [content]=\"content\"\n [isExtractionAnalysisActive]=\"isExtractionAnalysisActive\" [showSearch]=\"showSearch\"\n [overrideConfig]=\"overrideConfig\" (editEvent)=\"onEditEvent($event)\"></toolbar-left></div>\n <div center><al-resume-entries [entries]=\"entries\" [showHeader]=\"showHeader\"\n [showDescriptionLabel]=\"showDescriptionLabel\" [showCompany]=\"showCompany\" [showJobTitle]=\"showJobTitle\"\n [showDates]=\"showDates\" [showLocation]=\"showLocation\" [showTimeline]=\"showTimeline\"\n [showReapplyButton]=\"showReapplyButton\" [showLoader]=\"showLoader\" [loaderForAllEntries]=\"loaderForAllEntries\"\n [loaderStatus]=\"loaderStatus\" [loaderSize]=\"loaderSize\" [skills]=\"skills\" [companyTooltip]=\"companyTooltip\"\n [jobTitleTooltip]=\"jobTitleTooltip\" [dateTooltip]=\"dateTooltip\" [locationTooltip]=\"locationTooltip\"\n [descriptionTooltip]=\"descriptionTooltip\" [tooltipPosition]=\"tooltipPosition\" [isSectionHidden]=\"isSectionHidden\"\n (reapplyClick)=\"onReapplyClick($event)\" (undoClick)=\"onUndoClick($event)\"></al-resume-entries>\n </div>\n <div right><toolbar-right [checked]=\"checked\" [alwaysShowIcons]=\"alwaysShowIcons\"\n [overrideConfig]=\"overrideConfigRight\" [currentObj]=\"currentObj\" (checkboxChange)=\"onCheckboxChange($event)\"\n (visibilityToggle)=\"onVisibilityToggle($event)\" (hideShowEvent)=\"onHideShowEvent($event)\"\n (checkboxEvent)=\"onCheckboxEvent($event)\" (setSubroleEvent)=\"onSetSubroleEvent($event)\"></toolbar-right>\n </div>\n</al-responsive-columns>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ResponsiveColumnsComponent, selector: "al-responsive-columns", inputs: ["dataTestId", "gap", "padding", "leftWidth", "rightWidth", "stackAt"] }, { kind: "component", type: ResumeEntriesComponent, selector: "al-resume-entries", inputs: ["entries", "showHeader", "showDescriptionLabel", "showCompany", "showJobTitle", "showDates", "showLocation", "showTimeline", "showReapplyButton", "showLoader", "loaderForAllEntries", "loaderStatus", "loaderSize", "skills", "companyTooltip", "jobTitleTooltip", "dateTooltip", "locationTooltip", "descriptionTooltip", "tooltipPosition", "isSectionHidden", "isCollapsed"], outputs: ["reapplyClick", "undoClick"] }, { kind: "component", type: AppToolbarLeftComponent, selector: "toolbar-left", inputs: ["variant", "overrideConfig", "content", "isExtractionAnalysisActive", "showSearch"], outputs: ["editEvent"] }, { kind: "ngmodule", type: AppToolbarRightModule }, { kind: "component", type: AppToolbarRightComponent, selector: "toolbar-right", inputs: ["alwaysShowIcons", "checked", "overrideConfig", "currentObj"], outputs: ["checkboxChange", "visibilityToggle", "hideShowEvent", "checkboxEvent", "setSubroleEvent"] }] }); }
|
|
6744
6732
|
}
|
|
6745
6733
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ExperienceSectionComponent, decorators: [{
|
|
6746
6734
|
type: Component,
|
|
@@ -7180,11 +7168,11 @@ class AiWrapperComponent {
|
|
|
7180
7168
|
this.inputBlur.emit();
|
|
7181
7169
|
}
|
|
7182
7170
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiWrapperComponent, deps: [{ token: i1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7183
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AiWrapperComponent, isStandalone: true, selector: "al-ai-wrapper", inputs: { isAI: "isAI", inputPlaceholder: "inputPlaceholder", inputOptions: "inputOptions", inputValue: "inputValue", inputDisabled: "inputDisabled", showCloseButton: "showCloseButton", showHideButton: "showHideButton", showSubRoleButton: "showSubRoleButton", showYearMonthButton: "showYearMonthButton", showMoveButton: "showMoveButton", showDeleteButton: "showDeleteButton", showApplyButton: "showApplyButton", applyLabel: "applyLabel", applyDisabled: "applyDisabled", showChevronButton: "showChevronButton", showHelperText: "showHelperText", helperText: "helperText" }, outputs: { closeClick: "closeClick", aiTriggerClick: "aiTriggerClick", inputValueChange: "inputValueChange", hideClick: "hideClick", subRoleClick: "subRoleClick", yearMonthClick: "yearMonthClick", moveClick: "moveClick", deleteClick: "deleteClick", applyClick: "applyClick", chevronClick: "chevronClick", inputFocus: "inputFocus", inputBlur: "inputBlur" }, ngImport: i0, template: "<div class=\"al-ai-wrapper\">\n <div class=\"al-ai-wrapper__center\">\n <div *ngIf=\"showCloseButton\" class=\"al-ai-wrapper__close-button-wrapper\" [class.is-ai-mode]=\"isAI\"><al-button\n [buttonType]=\"'icon-circle'\" [color]=\"isAI ? 'grey' : 'grey'\" [outline]=\"false\" [size]=\"'base'\"\n [iconOnly]=\"true\" [iconOutlined]=\"false\" [icon]=\"'close'\" [disabled]=\"false\" [tooltip]=\"''\"\n [tooltipPosition]=\"'above'\" aria-label=\"Close\" (onClick)=\"onCloseClick()\"></al-button></div>\n <div class=\"al-ai-wrapper__hand-wrapper\" [class.is-ai-mode]=\"isAI\">\n <div class=\"al-ai-wrapper__gap\">\n <div class=\"al-ai-wrapper__toolbar\" [class.is-ai-mode]=\"isAI\" [class.no-helper-text]=\"isAI && !showHelperText\">\n <div class=\"al-ai-wrapper__content\" [class.is-ai-mode]=\"isAI\">\n <div *ngIf=\"!isAI\" class=\"al-ai-wrapper__vertical-tools\">\n <ng-content></ng-content>\n </div>\n <div *ngIf=\"isAI\" class=\"al-ai-wrapper__horizontal-ai\">\n <div class=\"al-ai-wrapper__ai-row\">\n <div class=\"al-ai-wrapper__input-container\"><al-input [labelText]=\"''\" [placeholder]=\"inputPlaceholder\"\n [value]=\"inputValue\" [type]=\"'text'\" [disabled]=\"inputDisabled\" [helperText]=\"false\" [leftIcon]=\"''\"\n [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\" [multipleSelect]=\"false\"\n [options]=\"inputOptions\" [size]=\"'base'\" [types]=\"'plain'\"\n (change)=\"onInputChange($event)\"></al-input></div>\n <div class=\"al-ai-wrapper__ai-actions\"><al-button *ngIf=\"showApplyButton\" [buttonType]=\"'icon-label'\"\n [color]=\"'gradient'\" [outline]=\"false\" [size]=\"'sm'\" [labelText]=\"applyLabel\"\n [disabled]=\"applyDisabled\" aria-label=\"Apply AI\"\n (onClick)=\"onApplyClick()\"></al-button><al-icon-button *ngIf=\"showChevronButton\"\n icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\" [size]=\"'xl'\"\n [disabled]=\"applyDisabled\" (onClick)=\"onChevronClick()\"\n [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button></div>\n </div>\n <div class=\"al-ai-wrapper__helper-text\" *ngIf=\"showHelperText\">\n {{ helperText }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [":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}:root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}.al-ai-wrapper{display:flex;align-items:flex-start;justify-content:flex-end;height:500px;max-height:500px;overflow:visible;padding:32px}.al-ai-wrapper__center{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.al-ai-wrapper__close-button-wrapper{position:absolute;z-index:100;top:0;left:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .5s ease;pointer-events:none}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button{pointer-events:auto}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button{transition:all .5s ease}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:hover{transform:scale(1.05)}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:active{transform:scale(.95)}.al-ai-wrapper__hand-wrapper{position:absolute;top:0;left:0;width:40px;height:40px;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:rotate(0);will-change:transform;z-index:1}.al-ai-wrapper__hand-wrapper.is-ai-mode{transform:rotate(90deg)}.al-ai-wrapper__gap{position:absolute;top:52px;left:50%;transform:translate(-50%);width:48px}.al-ai-wrapper__toolbar{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#717793cc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #0000001f;transition:height .7s cubic-bezier(.4,0,.2,1),padding .7s cubic-bezier(.4,0,.2,1);border-radius:8px;overflow:hidden;width:48px}.al-ai-wrapper__toolbar.is-ai-mode{height:auto;min-height:392px;width:80px;padding:8px;overflow:hidden;max-height:392px}.al-ai-wrapper__toolbar.is-ai-mode.no-helper-text{width:58px}.al-ai-wrapper__content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:center center;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:translateY(0) rotate(0);position:relative;will-change:transform;width:48px}.al-ai-wrapper__content.is-ai-mode{width:370px;height:auto;min-height:56px;position:absolute;top:50%;left:50%;margin-left:-185px;transform:translateY(-50%) rotate(-90deg);transform-origin:center center}.al-ai-wrapper__vertical-tools{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%;padding:12px 8px;gap:8px;animation:fadeInZoom .5s ease-out}.al-ai-wrapper__horizontal-ai{width:370px;display:flex;flex-direction:column;gap:4px;transform-origin:right center;padding-bottom:0;animation:aiBarExpand .5s cubic-bezier(.2,.8,.2,1);flex-shrink:0}.al-ai-wrapper__ai-row{display:flex;align-items:center;gap:4px;opacity:0;animation:aiBarContentFade .3s ease-out .2s forwards}.al-ai-wrapper__ai-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center;flex-shrink:0}.al-ai-wrapper__ai-icon mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.al-ai-wrapper__input-container{flex:1 1 auto;display:flex;align-items:center;min-width:0}.al-ai-wrapper__input-container ::ng-deep al-input{width:100%}.al-ai-wrapper__input-container ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.al-ai-wrapper__ai-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.al-ai-wrapper__action-button{padding:8px;color:#fff6;background:transparent;border:none;cursor:pointer;transition:color .2s ease;display:flex;align-items:center;justify-content:center;outline:none}.al-ai-wrapper__action-button:hover{color:#fff}.al-ai-wrapper__action-button mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.al-ai-wrapper__helper-text{color:#ffffffb3;font-size:12px;line-height:16px;padding:0;margin:0;width:100%;flex-shrink:0}@keyframes fadeInZoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes aiBarExpand{0%{opacity:0;transform:translate(16px) scaleX(.2)}60%{opacity:1;transform:translate(2px) scaleX(1.02)}to{opacity:1;transform:translate(0) scaleX(1)}}@keyframes aiBarContentFade{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColour", "iconOutlined", "size", "colour", "disabled", "dataTestId"], outputs: ["onClick"] }, { 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: InputComponent, selector: "al-input", inputs: ["labelText", "label", "placeholder", "value", "formControlName", "dataTestId", "type", "disabled", "helperText", "error", "errorMessage", "leftIcon", "rightIcon", "hasDropDown", "dropDown", "searchfilter", "multipleSelect", "options", "size", "types", "tooltip", "tooltipPosition", "matDatepicker", "dateType"], outputs: ["change", "valueChange", "onColorChange", "monthSelected", "yearSelected"] }] }); }
|
|
7171
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AiWrapperComponent, isStandalone: true, selector: "al-ai-wrapper", inputs: { isAI: "isAI", inputPlaceholder: "inputPlaceholder", inputOptions: "inputOptions", inputValue: "inputValue", inputDisabled: "inputDisabled", showCloseButton: "showCloseButton", showHideButton: "showHideButton", showSubRoleButton: "showSubRoleButton", showYearMonthButton: "showYearMonthButton", showMoveButton: "showMoveButton", showDeleteButton: "showDeleteButton", showApplyButton: "showApplyButton", applyLabel: "applyLabel", applyDisabled: "applyDisabled", showChevronButton: "showChevronButton", showHelperText: "showHelperText", helperText: "helperText" }, outputs: { closeClick: "closeClick", aiTriggerClick: "aiTriggerClick", inputValueChange: "inputValueChange", hideClick: "hideClick", subRoleClick: "subRoleClick", yearMonthClick: "yearMonthClick", moveClick: "moveClick", deleteClick: "deleteClick", applyClick: "applyClick", chevronClick: "chevronClick", inputFocus: "inputFocus", inputBlur: "inputBlur" }, ngImport: i0, template: "<div class=\"al-ai-wrapper\">\n <div class=\"al-ai-wrapper__center\">\n <div *ngIf=\"showCloseButton\" class=\"al-ai-wrapper__close-button-wrapper\" [class.is-ai-mode]=\"isAI\"><al-button\n [buttonType]=\"'icon-circle'\" [color]=\"isAI ? 'grey' : 'grey'\" [outline]=\"false\" [size]=\"'base'\"\n [iconOnly]=\"true\" [iconOutlined]=\"false\" [icon]=\"'close'\" [disabled]=\"false\" [tooltip]=\"''\"\n [tooltipPosition]=\"'above'\" aria-label=\"Close\" (onClick)=\"onCloseClick()\"></al-button></div>\n <div class=\"al-ai-wrapper__hand-wrapper\" [class.is-ai-mode]=\"isAI\">\n <div class=\"al-ai-wrapper__gap\">\n <div class=\"al-ai-wrapper__toolbar\" [class.is-ai-mode]=\"isAI\" [class.no-helper-text]=\"isAI && !showHelperText\">\n <div class=\"al-ai-wrapper__content\" [class.is-ai-mode]=\"isAI\">\n <div *ngIf=\"!isAI\" class=\"al-ai-wrapper__vertical-tools\">\n <ng-content></ng-content>\n </div>\n <div *ngIf=\"isAI\" class=\"al-ai-wrapper__horizontal-ai\">\n <div class=\"al-ai-wrapper__ai-row\">\n <div class=\"al-ai-wrapper__input-container\"><al-input [labelText]=\"''\" [placeholder]=\"inputPlaceholder\"\n [value]=\"inputValue\" [type]=\"'text'\" [disabled]=\"inputDisabled\" [helperText]=\"false\" [leftIcon]=\"''\"\n [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\" [multipleSelect]=\"false\"\n [options]=\"inputOptions\" [size]=\"'base'\" [types]=\"'plain'\"\n (change)=\"onInputChange($event)\"></al-input></div>\n <div class=\"al-ai-wrapper__ai-actions\"><al-button *ngIf=\"showApplyButton\" [buttonType]=\"'icon-label'\"\n [color]=\"'gradient'\" [outline]=\"false\" [size]=\"'base'\" [labelText]=\"applyLabel\"\n [disabled]=\"applyDisabled\" aria-label=\"Apply AI\"\n (onClick)=\"onApplyClick()\"></al-button><al-icon-button *ngIf=\"showChevronButton\"\n icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\" [size]=\"'xl'\"\n [disabled]=\"applyDisabled\" (onClick)=\"onChevronClick()\"\n [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button></div>\n </div>\n <div class=\"al-ai-wrapper__helper-text\" *ngIf=\"showHelperText\">\n {{ helperText }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [":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}:root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}.al-ai-wrapper{display:flex;align-items:flex-start;justify-content:flex-end;height:500px;max-height:500px;overflow:visible}.al-ai-wrapper__center{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.al-ai-wrapper__close-button-wrapper{position:absolute;z-index:100;top:0;left:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .5s ease;pointer-events:none}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button{pointer-events:auto}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button{transition:all .5s ease}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:hover{transform:scale(1.05)}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:active{transform:scale(.95)}.al-ai-wrapper__hand-wrapper{position:absolute;top:0;left:0;width:40px;height:40px;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:rotate(0);will-change:transform;z-index:1}.al-ai-wrapper__hand-wrapper.is-ai-mode{transform:rotate(90deg)}.al-ai-wrapper__gap{position:absolute;top:52px;left:50%;transform:translate(-50%);width:48px}.al-ai-wrapper__toolbar{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#717793cc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #0000001f;transition:height .7s cubic-bezier(.4,0,.2,1),padding .7s cubic-bezier(.4,0,.2,1);border-radius:8px;overflow:hidden;width:48px}.al-ai-wrapper__toolbar.is-ai-mode{height:auto;min-height:392px;width:80px;padding:8px;overflow:hidden;max-height:392px}.al-ai-wrapper__toolbar.is-ai-mode.no-helper-text{width:58px}.al-ai-wrapper__content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:center center;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:translateY(0) rotate(0);position:relative;will-change:transform;width:48px}.al-ai-wrapper__content.is-ai-mode{width:370px;height:auto;min-height:56px;position:absolute;top:50%;left:50%;margin-left:-185px;transform:translateY(-50%) rotate(-90deg);transform-origin:center center}.al-ai-wrapper__vertical-tools{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%;padding:12px 8px;gap:8px;animation:fadeInZoom .5s ease-out}.al-ai-wrapper__horizontal-ai{width:370px;display:flex;flex-direction:column;gap:4px;transform-origin:right center;padding-bottom:0;animation:aiBarExpand .5s cubic-bezier(.2,.8,.2,1);flex-shrink:0}.al-ai-wrapper__ai-row{display:flex;align-items:center;gap:4px;opacity:0;animation:aiBarContentFade .3s ease-out .2s forwards}.al-ai-wrapper__ai-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center;flex-shrink:0}.al-ai-wrapper__ai-icon mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.al-ai-wrapper__input-container{flex:1 1 auto;display:flex;align-items:center;min-width:0}.al-ai-wrapper__input-container ::ng-deep al-input{width:100%}.al-ai-wrapper__input-container ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:4px;border:0!important;overflow:hidden}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline{border-radius:4px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:4px 0 0 4px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 4px 4px 0!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.al-ai-wrapper__ai-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.al-ai-wrapper__action-button{padding:8px;color:#fff6;background:transparent;border:none;cursor:pointer;transition:color .2s ease;display:flex;align-items:center;justify-content:center;outline:none}.al-ai-wrapper__action-button:hover{color:#fff}.al-ai-wrapper__action-button mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.al-ai-wrapper__helper-text{color:#ffffffb3;font-size:12px;line-height:16px;padding:0;margin:0;width:100%;flex-shrink:0}@keyframes fadeInZoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes aiBarExpand{0%{opacity:0;transform:translate(16px) scaleX(.2)}60%{opacity:1;transform:translate(2px) scaleX(1.02)}to{opacity:1;transform:translate(0) scaleX(1)}}@keyframes aiBarContentFade{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColour", "iconOutlined", "size", "colour", "disabled", "dataTestId"], outputs: ["onClick"] }, { 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: InputComponent, selector: "al-input", inputs: ["labelText", "label", "placeholder", "value", "formControlName", "dataTestId", "type", "disabled", "helperText", "error", "errorMessage", "leftIcon", "rightIcon", "hasDropDown", "dropDown", "searchfilter", "multipleSelect", "options", "size", "types", "tooltip", "tooltipPosition", "matDatepicker", "dateType"], outputs: ["change", "valueChange", "onColorChange", "monthSelected", "yearSelected"] }] }); }
|
|
7184
7172
|
}
|
|
7185
7173
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiWrapperComponent, decorators: [{
|
|
7186
7174
|
type: Component,
|
|
7187
|
-
args: [{ selector: 'al-ai-wrapper', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatTooltipModule, IconButtonComponent, ButtonComponent, InputComponent], template: "<div class=\"al-ai-wrapper\">\n <div class=\"al-ai-wrapper__center\">\n <div *ngIf=\"showCloseButton\" class=\"al-ai-wrapper__close-button-wrapper\" [class.is-ai-mode]=\"isAI\"><al-button\n [buttonType]=\"'icon-circle'\" [color]=\"isAI ? 'grey' : 'grey'\" [outline]=\"false\" [size]=\"'base'\"\n [iconOnly]=\"true\" [iconOutlined]=\"false\" [icon]=\"'close'\" [disabled]=\"false\" [tooltip]=\"''\"\n [tooltipPosition]=\"'above'\" aria-label=\"Close\" (onClick)=\"onCloseClick()\"></al-button></div>\n <div class=\"al-ai-wrapper__hand-wrapper\" [class.is-ai-mode]=\"isAI\">\n <div class=\"al-ai-wrapper__gap\">\n <div class=\"al-ai-wrapper__toolbar\" [class.is-ai-mode]=\"isAI\" [class.no-helper-text]=\"isAI && !showHelperText\">\n <div class=\"al-ai-wrapper__content\" [class.is-ai-mode]=\"isAI\">\n <div *ngIf=\"!isAI\" class=\"al-ai-wrapper__vertical-tools\">\n <ng-content></ng-content>\n </div>\n <div *ngIf=\"isAI\" class=\"al-ai-wrapper__horizontal-ai\">\n <div class=\"al-ai-wrapper__ai-row\">\n <div class=\"al-ai-wrapper__input-container\"><al-input [labelText]=\"''\" [placeholder]=\"inputPlaceholder\"\n [value]=\"inputValue\" [type]=\"'text'\" [disabled]=\"inputDisabled\" [helperText]=\"false\" [leftIcon]=\"''\"\n [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\" [multipleSelect]=\"false\"\n [options]=\"inputOptions\" [size]=\"'base'\" [types]=\"'plain'\"\n (change)=\"onInputChange($event)\"></al-input></div>\n <div class=\"al-ai-wrapper__ai-actions\"><al-button *ngIf=\"showApplyButton\" [buttonType]=\"'icon-label'\"\n [color]=\"'gradient'\" [outline]=\"false\" [size]=\"'sm'\" [labelText]=\"applyLabel\"\n [disabled]=\"applyDisabled\" aria-label=\"Apply AI\"\n (onClick)=\"onApplyClick()\"></al-button><al-icon-button *ngIf=\"showChevronButton\"\n icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\" [size]=\"'xl'\"\n [disabled]=\"applyDisabled\" (onClick)=\"onChevronClick()\"\n [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button></div>\n </div>\n <div class=\"al-ai-wrapper__helper-text\" *ngIf=\"showHelperText\">\n {{ helperText }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [":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}:root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}.al-ai-wrapper{display:flex;align-items:flex-start;justify-content:flex-end;height:500px;max-height:500px;overflow:visible;padding:32px}.al-ai-wrapper__center{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.al-ai-wrapper__close-button-wrapper{position:absolute;z-index:100;top:0;left:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .5s ease;pointer-events:none}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button{pointer-events:auto}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button{transition:all .5s ease}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:hover{transform:scale(1.05)}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:active{transform:scale(.95)}.al-ai-wrapper__hand-wrapper{position:absolute;top:0;left:0;width:40px;height:40px;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:rotate(0);will-change:transform;z-index:1}.al-ai-wrapper__hand-wrapper.is-ai-mode{transform:rotate(90deg)}.al-ai-wrapper__gap{position:absolute;top:52px;left:50%;transform:translate(-50%);width:48px}.al-ai-wrapper__toolbar{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#717793cc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #0000001f;transition:height .7s cubic-bezier(.4,0,.2,1),padding .7s cubic-bezier(.4,0,.2,1);border-radius:8px;overflow:hidden;width:48px}.al-ai-wrapper__toolbar.is-ai-mode{height:auto;min-height:392px;width:80px;padding:8px;overflow:hidden;max-height:392px}.al-ai-wrapper__toolbar.is-ai-mode.no-helper-text{width:58px}.al-ai-wrapper__content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:center center;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:translateY(0) rotate(0);position:relative;will-change:transform;width:48px}.al-ai-wrapper__content.is-ai-mode{width:370px;height:auto;min-height:56px;position:absolute;top:50%;left:50%;margin-left:-185px;transform:translateY(-50%) rotate(-90deg);transform-origin:center center}.al-ai-wrapper__vertical-tools{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%;padding:12px 8px;gap:8px;animation:fadeInZoom .5s ease-out}.al-ai-wrapper__horizontal-ai{width:370px;display:flex;flex-direction:column;gap:4px;transform-origin:right center;padding-bottom:0;animation:aiBarExpand .5s cubic-bezier(.2,.8,.2,1);flex-shrink:0}.al-ai-wrapper__ai-row{display:flex;align-items:center;gap:4px;opacity:0;animation:aiBarContentFade .3s ease-out .2s forwards}.al-ai-wrapper__ai-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center;flex-shrink:0}.al-ai-wrapper__ai-icon mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.al-ai-wrapper__input-container{flex:1 1 auto;display:flex;align-items:center;min-width:0}.al-ai-wrapper__input-container ::ng-deep al-input{width:100%}.al-ai-wrapper__input-container ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.al-ai-wrapper__ai-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.al-ai-wrapper__action-button{padding:8px;color:#fff6;background:transparent;border:none;cursor:pointer;transition:color .2s ease;display:flex;align-items:center;justify-content:center;outline:none}.al-ai-wrapper__action-button:hover{color:#fff}.al-ai-wrapper__action-button mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.al-ai-wrapper__helper-text{color:#ffffffb3;font-size:12px;line-height:16px;padding:0;margin:0;width:100%;flex-shrink:0}@keyframes fadeInZoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes aiBarExpand{0%{opacity:0;transform:translate(16px) scaleX(.2)}60%{opacity:1;transform:translate(2px) scaleX(1.02)}to{opacity:1;transform:translate(0) scaleX(1)}}@keyframes aiBarContentFade{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}\n"] }]
|
|
7175
|
+
args: [{ selector: 'al-ai-wrapper', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatTooltipModule, IconButtonComponent, ButtonComponent, InputComponent], template: "<div class=\"al-ai-wrapper\">\n <div class=\"al-ai-wrapper__center\">\n <div *ngIf=\"showCloseButton\" class=\"al-ai-wrapper__close-button-wrapper\" [class.is-ai-mode]=\"isAI\"><al-button\n [buttonType]=\"'icon-circle'\" [color]=\"isAI ? 'grey' : 'grey'\" [outline]=\"false\" [size]=\"'base'\"\n [iconOnly]=\"true\" [iconOutlined]=\"false\" [icon]=\"'close'\" [disabled]=\"false\" [tooltip]=\"''\"\n [tooltipPosition]=\"'above'\" aria-label=\"Close\" (onClick)=\"onCloseClick()\"></al-button></div>\n <div class=\"al-ai-wrapper__hand-wrapper\" [class.is-ai-mode]=\"isAI\">\n <div class=\"al-ai-wrapper__gap\">\n <div class=\"al-ai-wrapper__toolbar\" [class.is-ai-mode]=\"isAI\" [class.no-helper-text]=\"isAI && !showHelperText\">\n <div class=\"al-ai-wrapper__content\" [class.is-ai-mode]=\"isAI\">\n <div *ngIf=\"!isAI\" class=\"al-ai-wrapper__vertical-tools\">\n <ng-content></ng-content>\n </div>\n <div *ngIf=\"isAI\" class=\"al-ai-wrapper__horizontal-ai\">\n <div class=\"al-ai-wrapper__ai-row\">\n <div class=\"al-ai-wrapper__input-container\"><al-input [labelText]=\"''\" [placeholder]=\"inputPlaceholder\"\n [value]=\"inputValue\" [type]=\"'text'\" [disabled]=\"inputDisabled\" [helperText]=\"false\" [leftIcon]=\"''\"\n [rightIcon]=\"'expand_more'\" [hasDropDown]=\"true\" [searchfilter]=\"true\" [multipleSelect]=\"false\"\n [options]=\"inputOptions\" [size]=\"'base'\" [types]=\"'plain'\"\n (change)=\"onInputChange($event)\"></al-input></div>\n <div class=\"al-ai-wrapper__ai-actions\"><al-button *ngIf=\"showApplyButton\" [buttonType]=\"'icon-label'\"\n [color]=\"'gradient'\" [outline]=\"false\" [size]=\"'base'\" [labelText]=\"applyLabel\"\n [disabled]=\"applyDisabled\" aria-label=\"Apply AI\"\n (onClick)=\"onApplyClick()\"></al-button><al-icon-button *ngIf=\"showChevronButton\"\n icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\" [size]=\"'xl'\"\n [disabled]=\"applyDisabled\" (onClick)=\"onChevronClick()\"\n [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button></div>\n </div>\n <div class=\"al-ai-wrapper__helper-text\" *ngIf=\"showHelperText\">\n {{ helperText }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [":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}:root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}.al-ai-wrapper{display:flex;align-items:flex-start;justify-content:flex-end;height:500px;max-height:500px;overflow:visible}.al-ai-wrapper__center{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.al-ai-wrapper__close-button-wrapper{position:absolute;z-index:100;top:0;left:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .5s ease;pointer-events:none}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button{pointer-events:auto}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button{transition:all .5s ease}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:hover{transform:scale(1.05)}.al-ai-wrapper__close-button-wrapper ::ng-deep al-button ::ng-deep button:active{transform:scale(.95)}.al-ai-wrapper__hand-wrapper{position:absolute;top:0;left:0;width:40px;height:40px;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:rotate(0);will-change:transform;z-index:1}.al-ai-wrapper__hand-wrapper.is-ai-mode{transform:rotate(90deg)}.al-ai-wrapper__gap{position:absolute;top:52px;left:50%;transform:translate(-50%);width:48px}.al-ai-wrapper__toolbar{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#717793cc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #0000001f;transition:height .7s cubic-bezier(.4,0,.2,1),padding .7s cubic-bezier(.4,0,.2,1);border-radius:8px;overflow:hidden;width:48px}.al-ai-wrapper__toolbar.is-ai-mode{height:auto;min-height:392px;width:80px;padding:8px;overflow:hidden;max-height:392px}.al-ai-wrapper__toolbar.is-ai-mode.no-helper-text{width:58px}.al-ai-wrapper__content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:center center;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:translateY(0) rotate(0);position:relative;will-change:transform;width:48px}.al-ai-wrapper__content.is-ai-mode{width:370px;height:auto;min-height:56px;position:absolute;top:50%;left:50%;margin-left:-185px;transform:translateY(-50%) rotate(-90deg);transform-origin:center center}.al-ai-wrapper__vertical-tools{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%;padding:12px 8px;gap:8px;animation:fadeInZoom .5s ease-out}.al-ai-wrapper__horizontal-ai{width:370px;display:flex;flex-direction:column;gap:4px;transform-origin:right center;padding-bottom:0;animation:aiBarExpand .5s cubic-bezier(.2,.8,.2,1);flex-shrink:0}.al-ai-wrapper__ai-row{display:flex;align-items:center;gap:4px;opacity:0;animation:aiBarContentFade .3s ease-out .2s forwards}.al-ai-wrapper__ai-icon{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center;flex-shrink:0}.al-ai-wrapper__ai-icon mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.al-ai-wrapper__input-container{flex:1 1 auto;display:flex;align-items:center;min-width:0}.al-ai-wrapper__input-container ::ng-deep al-input{width:100%}.al-ai-wrapper__input-container ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:4px;border:0!important;overflow:hidden}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline{border-radius:4px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:4px 0 0 4px!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 4px 4px 0!important}.al-ai-wrapper__input-container ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]{color:#4b4f62!important}.al-ai-wrapper__input-container ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.al-ai-wrapper__input-container ::ng-deep .mat-mdc-form-field:not(:has(.mat-mdc-form-field-label:not(:empty))) .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.al-ai-wrapper__ai-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.al-ai-wrapper__action-button{padding:8px;color:#fff6;background:transparent;border:none;cursor:pointer;transition:color .2s ease;display:flex;align-items:center;justify-content:center;outline:none}.al-ai-wrapper__action-button:hover{color:#fff}.al-ai-wrapper__action-button mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.al-ai-wrapper__helper-text{color:#ffffffb3;font-size:12px;line-height:16px;padding:0;margin:0;width:100%;flex-shrink:0}@keyframes fadeInZoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes aiBarExpand{0%{opacity:0;transform:translate(16px) scaleX(.2)}60%{opacity:1;transform:translate(2px) scaleX(1.02)}to{opacity:1;transform:translate(0) scaleX(1)}}@keyframes aiBarContentFade{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}:host ::ng-deep .mat-mdc-select-arrow{display:none!important}\n"] }]
|
|
7188
7176
|
}], ctorParameters: () => [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }], propDecorators: { isAI: [{
|
|
7189
7177
|
type: Input
|
|
7190
7178
|
}], inputPlaceholder: [{
|