@allsorter/ui-components 0.0.369 → 0.0.372
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 +274 -275
- package/fesm2022/allsorter-ui-components.mjs.map +1 -1
- package/lib/ai-apply-bar/ai-apply-bar.component.d.ts +4 -1
- package/lib/custom-editor/custom-editor.component.d.ts +3 -14
- package/lib/editable-form-wrapper/editable-form-wrapper.component.d.ts +33 -2
- package/lib/experience-section/experience-section.component.d.ts +2 -2
- package/lib/newresumeheader/newresumeheader.component.d.ts +19 -0
- package/lib/styles/typography-classes.scss +1 -1
- package/lib/{app-toolbar/app-toolbar.component.d.ts → toolbar-left/toolbar-left.component.d.ts} +1 -1
- package/lib/{app-toolbar/app-toolbar.module.d.ts → toolbar-left/toolbar-left.module.d.ts} +1 -1
- package/lib/{app-toolbar-right/app-toolbar-right.component.d.ts → toolbar-right/toolbar-right.component.d.ts} +1 -1
- package/lib/{app-toolbar-right/app-toolbar-right.module.d.ts → toolbar-right/toolbar-right.module.d.ts} +1 -1
- package/lib/utils/image-utils.d.ts +8 -0
- package/package.json +1 -1
- package/public-api.d.ts +4 -4
- package/src/lib/ai-apply-bar/ai-apply-bar.component.html +14 -14
- package/src/lib/ai-apply-bar/ai-apply-bar.component.scss +4 -16
- package/src/lib/button/button.component.scss +8 -5
- package/src/lib/candidate-section/candidate-section.component.scss +25 -0
- package/src/lib/custom-editor/custom-editor.component.scss +2 -1
- package/src/lib/editable-form-wrapper/editable-form-wrapper.component.html +19 -7
- package/src/lib/editable-form-wrapper/editable-form-wrapper.component.scss +9 -1
- package/src/lib/experience-section/experience-section.component.html +4 -4
- package/src/lib/field-placeholder/field-placeholder.component.html +3 -3
- package/src/lib/field-placeholder/field-placeholder.component.scss +20 -61
- package/src/lib/input/input.component.html +1 -1
- package/src/lib/input/input.component.scss +4 -4
- package/src/lib/newresumeheader/newresumeheader.component.html +5 -4
- package/src/lib/styles/typography-classes.scss +1 -1
- package/src/lib/test-styling/test-styling.component.html +187 -0
- package/src/lib/test-styling/test-styling.component.scss +17 -0
- package/src/lib/{app-toolbar-right/app-toolbar-right.component.html → toolbar-right/toolbar-right.component.html} +2 -2
- /package/src/lib/{app-toolbar/app-toolbar.component.html → toolbar-left/toolbar-left.component.html} +0 -0
- /package/src/lib/{app-toolbar/app-toolbar.component.scss → toolbar-left/toolbar-left.component.scss} +0 -0
- /package/src/lib/{app-toolbar-right/app-toolbar-right.component.scss → toolbar-right/toolbar-right.component.scss} +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, EventEmitter, Input, Output, ViewChild, NgModule, forwardRef, HostBinding, ElementRef,
|
|
2
|
+
import { Injectable, Component, EventEmitter, Input, Output, ViewChild, NgModule, forwardRef, HostBinding, ElementRef, Renderer2, ViewEncapsulation, Inject, HostListener, TemplateRef, ContentChildren, Optional, ContentChild, ChangeDetectionStrategy } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/material/icon';
|
|
@@ -35,11 +35,9 @@ import * as i2$4 from '@angular/material/button-toggle';
|
|
|
35
35
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
36
36
|
import * as i2$5 from '@angular/material/slide-toggle';
|
|
37
37
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
38
|
-
import { take } from 'rxjs/operators';
|
|
39
|
-
import * as i1$2 from '@angular/router';
|
|
40
38
|
import * as i2$6 from '@angular/material/tabs';
|
|
41
39
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
42
|
-
import * as i1$
|
|
40
|
+
import * as i1$2 from '@angular/material/dialog';
|
|
43
41
|
import { MatDialogModule } from '@angular/material/dialog';
|
|
44
42
|
|
|
45
43
|
class AllsorterLibService {
|
|
@@ -456,7 +454,13 @@ class ButtonComponent {
|
|
|
456
454
|
'multi-drag-drop', 'arrow_downward',
|
|
457
455
|
'subrole', 'subrole_active',
|
|
458
456
|
'hide_section', 'unhide_section',
|
|
459
|
-
'edit_icon', 'handle', 'search'
|
|
457
|
+
'edit_icon', 'handle', 'search',
|
|
458
|
+
'add-section', 'add_left-icon_section', 'add-right_icon_section',
|
|
459
|
+
'font_case_icon',
|
|
460
|
+
'retry_AI_icon',
|
|
461
|
+
'ordering_icon',
|
|
462
|
+
'collapse_icon',
|
|
463
|
+
'collapse_icon'
|
|
460
464
|
]);
|
|
461
465
|
this.stateClasses = {
|
|
462
466
|
default: 'btn-default',
|
|
@@ -481,11 +485,11 @@ class ButtonComponent {
|
|
|
481
485
|
this.menuTrigger?.closeMenu();
|
|
482
486
|
}
|
|
483
487
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, deps: [{ token: i1.MatIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
484
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, isStandalone: true, selector: "al-button", inputs: { state: "state", disabled: "disabled", color: "color", category: "category", outline: "outline", labelText: "labelText", label: "label", arialabel: "arialabel", iconOnly: "iconOnly", leftIcon: "leftIcon", rightIcon: "rightIcon", icon: "icon", iconOutlined: "iconOutlined", outlined: "outlined", size: "size", buttonType: "buttonType", fontClass: "fontClass", dataTestId: "dataTestId", tooltip: "tooltip", tooltipPosition: "tooltipPosition", dropdownItems: "dropdownItems", dropdownOptions: "dropdownOptions", hasDropDown: "hasDropDown", dropdown: "dropdown", hasDropdown: "hasDropdown", isDropdown: "isDropdown" }, outputs: { onClick: "onClick", onHover: "onHover", onMouseLeave: "onMouseLeave", optionSelect: "optionSelect" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Regular button types -->\n<ng-container *ngIf=\"!(hasDropDown || buttonType === 'dropdown'); else dropdownTpl\">\n <button mat-flat-button class=\"btn custom-button\" [class]=\"effectiveFontClass\" [attr.data-test-id]=\"dataTestId\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-circle': buttonType === 'icon-circle',\n 'blue': color === 'blue',\n 'green': color === 'green',\n 'grey': color === 'grey',\n 'error': color === 'error',\n 'success': color === 'success',\n 'gradient': color === 'gradient',\n 'white': color === 'white',\n 'btn-outlined': outline,\n 'btn-default': effectiveState === 'default',\n 'btn-hover': effectiveState === 'hover',\n 'btn-pressed': effectiveState === 'pressed',\n 'btn-disabled': effectiveState === 'disabled'\n }\" [disabled]=\"isDisabled\" [matTooltip]=\"hasTooltip ? tooltip : null\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!hasTooltip\" (click)=\"onClick.emit($event)\" (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\" [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\">\n\n <!-- Left Icon (only if provided; for icon-circle prefer `icon` over `leftIcon`) -->\n <ng-container *ngIf=\"(buttonType === 'icon-circle' ? (icon || leftIcon) : leftIcon)?.trim() as leftIconText\">\n <ng-container *ngIf=\"getLeftSvgIconName() as svgIconName; else leftIconFont\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"left-icon\"></mat-icon>\n </ng-container>\n <ng-template #leftIconFont>\n <mat-icon [fontSet]=\"getLeftIconFontSet()\" class=\"left-icon\">\n {{ getLeftIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n\n <!-- Label (hidden when iconOnly is true) -->\n <span *ngIf=\"!iconOnly && buttonType !== 'icon-circle'\" class=\"button-label\">\n {{ labelText || '' }}\n </span>\n\n <!-- Right icon (only if provided) -->\n <ng-container *ngIf=\"rightIcon?.trim() as rightIconText\">\n <ng-container *ngIf=\"getRightSvgIconName() as svgIconName; else rightIconFont\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"right-icon\"></mat-icon>\n </ng-container>\n <ng-template #rightIconFont>\n <mat-icon [fontSet]=\"getRightIconFontSet()\" class=\"right-icon\">\n {{ getRightIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n </button>\n</ng-container>\n\n<!-- Dropdown button template -->\n<ng-template #dropdownTpl>\n <button mat-flat-button class=\"btn custom-button\" [class]=\"effectiveFontClass\" [attr.data-test-id]=\"dataTestId\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-label': true,\n 'blue': color === 'blue',\n 'green': color === 'green',\n 'grey': color === 'grey',\n 'error': color === 'error',\n 'success': color === 'success',\n 'gradient': color === 'gradient',\n 'white': color === 'white',\n 'btn-outlined': outline,\n 'btn-default': effectiveState === 'default',\n 'btn-hover': effectiveState === 'hover',\n 'btn-pressed': effectiveState === 'pressed',\n 'btn-disabled': effectiveState === 'disabled'\n }\" [disabled]=\"isDisabled\" [matTooltip]=\"hasTooltip ? tooltip : null\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!hasTooltip\" (mouseenter)=\"onHover.emit($event)\" (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\" [style.gap.px]=\"computeGap()\"\n [matMenuTriggerFor]=\"menu\">\n\n <!-- Left Icon (optional) -->\n <ng-container *ngIf=\"leftIcon?.trim() as leftIconText\">\n <ng-container *ngIf=\"getSvgIconName(leftIcon) as svgIconName; else leftIconFontDropdown\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"left-icon\"></mat-icon>\n </ng-container>\n <ng-template #leftIconFontDropdown>\n <mat-icon [fontSet]=\"getLeftIconFontSet()\" class=\"left-icon\">\n {{ getLeftIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n\n <!-- Label -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\">\n {{ labelText || '' }}\n </span>\n\n <!-- Dropdown arrow icon -->\n <mat-icon class=\"right-icon\">arrow_drop_down</mat-icon>\n </button>\n</ng-template>\n\n<!-- Mat Menu kept outside conditional to avoid portal reattachment across toggles -->\n<mat-menu #menu=\"matMenu\" panelClass=\"custom-dropdown-menu\">\n <button mat-menu-item *ngFor=\"let opt of dropdownItems\" (click)=\"selectOption(opt)\" [ngClass]=\"effectiveFontClass\">\n {{ opt.label || opt }}\n </button>\n</mat-menu>\n\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+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\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=network_node\";.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:140%;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}.material-icons-outlined{font-family:Material Icons Outlined;font-weight:400;font-style:normal;font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.mdc-button.btn{border-radius:4px;display:flex;align-items:center;cursor:pointer;border:none;transition:background .2s,border .2s,transform .1s;min-width:auto!important;gap:8px;height:auto!important}.mdc-button.btn-primary1{background-color:#5473e8;color:#fff}.mdc-button.btn-primary2{background-color:#37c1ce;color:#fff}.mdc-button.btn-secondary{background-color:#717793;color:#fff}.mdc-button.btn-destructive{background-color:#e854a4;color:#fff}.mdc-button.btn-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.btn-primary2:hover{background-color:#4bc7d3!important}.mdc-button.btn-primary2:active{background-color:#299da8!important}.mdc-button.btn-primary2:outlined{background-color:#fff;border-radius:4px;border:1px solid #37C1CE}.mdc-button.btn-primary1:hover{background-color:#6581ea!important}.mdc-button.btn-primary1:active{background-color:#1e46df!important}.mdc-button.btn-primary1:outlined{background-color:#fff;border-radius:4px;border:1px solid #5473E8}.mdc-button.btn-secondary:hover{background-color:#4b4f62!important}.mdc-button.btn-secondary:active{background-color:#252831!important}.mdc-button.btn-secondary:outlined{background-color:#fff;border-radius:4px;border:1px solid #383B4A}.mdc-button.btn-destructive:hover{background-color:#ef87bf!important}.mdc-button.btn-destructive:active{background-color:#e22a8e!important}.mdc-button.btn-destructive:outlined{background-color:#fff;border-radius:4px;border:1px solid #E854A4}.mdc-button.btn-gradient:hover{background:linear-gradient(0deg,#fafafd4d,#fafafd4d),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)!important}.mdc-button.btn-gradient:active{background:linear-gradient(0deg,#383b4a80,#383b4a80),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)!important}.mdc-button.btn-disabled{border:none!important;opacity:.4;cursor:not-allowed;pointer-events:none}.blue{background-color:#5473e8!important;color:#fff}.blue.btn-hover,.blue:hover{background-color:#6581ea!important}.blue.btn-pressed,.blue:active{background-color:#1e46df!important}.green{background-color:#37c1ce!important;color:#fff}.green.btn-hover,.green:hover{background-color:#4bc7d3!important}.green.btn-pressed,.green:active{background-color:#299da8!important}.grey{background-color:#717793!important;color:#fff}.grey.btn-hover,.grey:hover{background-color:#4b4f62!important}.grey.btn-pressed,.grey:active{background-color:#252831!important}.error{background-color:#e854a4!important;color:#fff!important}.error.btn-hover,.error:hover{background-color:#ef87bf!important;color:#fff!important}.error.btn-pressed,.error:active{background-color:#e22a8e!important;color:#fff!important}.success{background-color:#00ad83!important;color:#fff!important}.success.btn-hover,.success:hover{background-color:#009873!important;color:#fff!important}.success.btn-pressed,.success:active{background-color:#007f61!important;color:#fff!important}.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff!important}.gradient.btn-hover,.gradient:hover{opacity:.9}.gradient.btn-pressed,.gradient:active{opacity:.8}.white{background-color:#fff!important;color:#383b4a!important}.white.btn-hover,.white:hover{background-color:#ecedf1!important}.white.btn-pressed,.white:active{background-color:#dee0e6!important}.blue.btn-outlined{background-color:#fff!important;color:#5473e8!important;box-shadow:inset 0 0 0 1px #5473e8!important}.blue.btn-outlined.btn-hover,.blue.btn-outlined:hover{background-color:#6581ea!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.blue.btn-outlined.btn-pressed,.blue.btn-outlined:active{background-color:#1e46df!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.green.btn-outlined{background-color:#fff!important;color:#37c1ce!important;box-shadow:inset 0 0 0 1px #37c1ce!important}.green.btn-outlined.btn-hover,.green.btn-outlined:hover{background-color:#4bc7d3!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.green.btn-outlined.btn-pressed,.green.btn-outlined:active{background-color:#299da8!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.grey.btn-outlined{background-color:#fff!important;color:#383b4a!important;box-shadow:inset 0 0 0 1px #383b4a!important}.grey.btn-outlined.btn-hover,.grey.btn-outlined:hover{background-color:#4b4f62!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.grey.btn-outlined.btn-pressed,.grey.btn-outlined:active{background-color:#252831!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined{background-color:#fff!important;color:#e854a4!important;box-shadow:inset 0 0 0 1px #e854a4!important}.error.btn-outlined.btn-hover,.error.btn-outlined:hover{background-color:#ef87bf!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined.btn-pressed,.error.btn-outlined:active{background-color:#e22a8e!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined mat-icon,.error.btn-outlined .button-label{color:#e854a4!important}.error.btn-outlined:hover mat-icon,.error.btn-outlined:hover .button-label,.error.btn-outlined:active mat-icon,.error.btn-outlined:active .button-label{color:#fff!important}.success.btn-outlined{background-color:#fff!important;color:#00ad83!important;box-shadow:inset 0 0 0 1px #00ad83!important}.success.btn-outlined.btn-hover,.success.btn-outlined:hover{background-color:#009873!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.success.btn-outlined.btn-pressed,.success.btn-outlined:active{background-color:#007f61!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.success.btn-outlined mat-icon,.success.btn-outlined .button-label{color:#00ad83!important}.success.btn-outlined:hover mat-icon,.success.btn-outlined:hover .button-label,.success.btn-outlined:active mat-icon,.success.btn-outlined:active .button-label{color:#fff!important}.white.btn-outlined{background-color:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 1px #fff!important}.white.btn-outlined.btn-hover,.white.btn-outlined:hover,.white.btn-outlined.btn-pressed,.white.btn-outlined:active{background-color:transparent!important;color:#fff!important}.btn.custom-button>*+*{margin-left:8px}.two-icon-label{padding:4px 12px!important}button.two-icon-label .mat-icon{width:20px!important;height:20px!important}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format(\"woff2\")}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.left-icon{order:0}.right-icon{order:2}mat-icon.mat-icon{margin:0!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;vertical-align:middle}.left-icon,.right-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0}.left-icon ::ng-deep svg,.right-icon ::ng-deep svg{fill:currentColor!important}.white.btn-outlined .left-icon ::ng-deep svg,.white.btn-outlined .right-icon ::ng-deep svg{fill:currentColor!important}.size-header{font-size:20px;padding:4px 12px!important}.size-xs{font-size:12px;padding:8px 12px!important}.size-sm{font-size:14px;padding:8px 12px!important}.size-base{font-size:14px;padding:10px 16px!important}.size-l{font-size:16px;padding:12px 20px!important}.size-xl{font-size:16px;padding:14px 24px!important}.size-header .mat-icon{font-size:20px;height:20px;width:20px;display:inline-flex!important;align-items:center!important;justify-content:center!important}.size-header .mat-icon ::ng-deep svg{width:20px!important;height:20px!important}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px;height:16px;width:16px}.size-l .mat-icon,.size-xl .mat-icon{font-size:20px;height:20px;width:20px}.btn.size-header{gap:4px!important;padding:4px 12px!important}::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,::ng-deep .custom-dropdown-menu.mat-menu-panel{padding:0;border-radius:8px;box-shadow:0 2px 6px #00000026;border:1px solid rgba(0,0,0,.12)}::ng-deep .custom-dropdown-menu .mat-mdc-menu-content,::ng-deep .custom-dropdown-menu .mat-menu-content{padding:0}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item{font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.04px;height:56px;padding:16px 24px;color:var(--Gray-700, #414651);transition:background .2s ease-in-out}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,::ng-deep .custom-dropdown-menu .mat-menu-item:hover{background:#f7f9fe!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:focus,::ng-deep .custom-dropdown-menu .mat-menu-item:focus,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.cdk-keyboard-focused,::ng-deep .custom-dropdown-menu .mat-menu-item.cdk-keyboard-focused{background:#e5e9fc!important;outline:none}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:active,::ng-deep .custom-dropdown-menu .mat-menu-item:active{background:#f7f9fe!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true],::ng-deep .custom-dropdown-menu .mat-menu-item[aria-selected=true],::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted,::ng-deep .custom-dropdown-menu .mat-menu-item.mat-menu-item-highlighted{background:#f7f9fe!important;color:#5473e8!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true] .mat-mdc-menu-item-text,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true] span,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span{color:#5473e8!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item+.mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item+.mat-menu-item{border-top:1px solid #EAECEE}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #ffffff !important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content,::ng-deep .mat-menu-panel .mat-menu-content{background-color:#fff!important}::ng-deep .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item{color:var(--Gray-700, #414651)!important;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;--mat-menu-item-label-text-color: var(--Gray-700, #414651) !important;--mdc-list-list-item-label-text-color: var(--Gray-700, #414651) !important}::ng-deep .mat-mdc-menu-item .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item span{color:var(--Gray-700, #414651)!important;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}.cdk-overlay-pane{z-index:1000!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface,.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface,.cdk-overlay-pane .mat-menu-panel{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #fff !important}.mat-mdc-menu-panel,.mdc-menu-surface,.mat-menu-panel{--mdc-theme-surface: #ffffff !important;background-color:#fff!important}.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface{--mdc-menu-container-color: #fff !important}.cdk-overlay-pane .mat-menu-panel,.cdk-overlay-pane .mat-mdc-menu-content,.cdk-overlay-pane .mat-menu-content{background:#fff!important}button.icon-circle{width:auto!important;height:auto!important;border-radius:50%!important;aspect-ratio:1/1;display:inline-flex;align-items:center;vertical-align:middle;line-height:0!important;min-width:0!important;justify-content:center;padding:6px!important}.size-small.icon-circle{padding:4px!important}.size-medium.icon-circle{padding:8px!important}.size-large.icon-circle{padding:12px!important}.size-header.icon-circle{padding:4px!important}.size-header.icon-circle .mat-icon{width:10px;height:10px;font-size:10px}.size-xs.icon-circle{padding:4px!important}.size-xs.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-xs.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-sm.icon-circle{padding:10px!important;height:32px!important;width:32px!important}.size-sm.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-sm.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-base.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-l.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-xl.icon-circle{padding:14px!important}.size-xl.icon-circle .mat-icon{width:20px;height:20px;font-size:20px}.icon-xs{padding:4px!important}.mdc-button.blue{background-color:#5473e8;color:#fff}.mdc-button.blue:hover{background-color:#6581ea}.mdc-button.blue:active{background-color:#1e46df}.mdc-button.green{background-color:#37c1ce;color:#fff}.mdc-button.green:hover{background-color:#4bc7d3}.mdc-button.green:active{background-color:#299da8}.mdc-button.grey{background-color:#717793;color:#fff}.mdc-button.grey:hover{background-color:#4b4f62}.mdc-button.grey:active{background-color:#252831}.mdc-button.error{background-color:#e854a4;color:#fff!important}.mdc-button.error:hover{background-color:#ef87bf;color:#fff!important}.mdc-button.error:active{background-color:#e22a8e;color:#fff!important}.mdc-button.success{background-color:#00ad83;color:#fff!important}.mdc-button.success:hover{background-color:#009873;color:#fff!important}.mdc-button.success:active{background-color:#007f61;color:#fff!important}.mdc-button.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.gradient:hover{background:linear-gradient(0deg,#fafafd4d,#fafafd4d),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.gradient:active{background:linear-gradient(0deg,#383b4a80,#383b4a80),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.disabled,.mdc-button:disabled{opacity:.4;cursor:not-allowed!important;pointer-events:none}.mdc-button.blue-no-outline{background-color:#fff;color:#5473e8;border:1px solid #5473E8}.mdc-button.blue-no-outline:hover{background-color:#6581ea;color:#fff}.mdc-button.blue-no-outline:active{background-color:#1e46df;color:#fff}.mdc-button.white-colour-outline{background-color:transparent;color:#fff;border:1px solid #fff}.mdc-button.white-colour-outline:hover,.mdc-button.white-colour-outline:active{background-color:transparent;color:#fff}.mdc-button.green-no-outline{background-color:#fff;color:#37c1ce;border:1px solid #37C1CE}.mdc-button.green-no-outline:hover{background-color:#4bc7d3;color:#fff}.mdc-button.green-no-outline:active{background-color:#299da8;color:#fff}.mdc-button.grey-no-outline{background-color:#fff;color:#383b4a;border:1px solid #383B4A}.mdc-button.grey-no-outline:hover{background-color:#4b4f62;color:#fff}.mdc-button.grey-no-outline:active{background-color:#252831;color:#fff}.mdc-button.error-no-outline{background-color:#fff;color:#e854a4;border:1px solid #E854A4}.mdc-button.error-no-outline:hover{background-color:#ef87bf;color:#fff}.mdc-button.error-no-outline:active{background-color:#e22a8e;color:#fff}.mdc-button.blue-colour-outline{background-color:#fff;color:#5473e8;box-shadow:inset 0 0 0 1px #5473e8}.mdc-button.blue-colour-outline:hover{background-color:#6581ea;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.blue-colour-outline:active{background-color:#1e46df;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.green-colour-outline{background-color:#fff;color:#37c1ce;box-shadow:inset 0 0 0 1px #37c1ce}.mdc-button.green-colour-outline:hover{background-color:#4bc7d3;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.green-colour-outline:active{background-color:#299da8;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.grey-colour-outline{background-color:#fff;color:#383b4a;box-shadow:inset 0 0 0 1px #383b4a}.mdc-button.grey-colour-outline:hover{background-color:#4b4f62;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.grey-colour-outline:active{background-color:#252831;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline{background-color:#fff;color:#e854a4!important;box-shadow:inset 0 0 0 1px #e854a4}.mdc-button.error-colour-outline:hover{background-color:#ef87bf;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline:active{background-color:#e22a8e;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline mat-icon,.mdc-button.error-colour-outline .button-label{color:#e854a4!important}.mdc-button.error-colour-outline:hover mat-icon,.mdc-button.error-colour-outline:hover .button-label,.mdc-button.error-colour-outline:active mat-icon,.mdc-button.error-colour-outline:active .button-label{color:#fff!important}.mdc-button.success-colour-outline{background-color:#fff;color:#00ad83!important;box-shadow:inset 0 0 0 1px #00ad83}.mdc-button.success-colour-outline:hover{background-color:#009873;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.success-colour-outline:active{background-color:#007f61;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.success-colour-outline mat-icon,.mdc-button.success-colour-outline .button-label{color:#00ad83!important}.mdc-button.success-colour-outline:hover mat-icon,.mdc-button.success-colour-outline:hover .button-label,.mdc-button.success-colour-outline:active mat-icon,.mdc-button.success-colour-outline:active .button-label{color:#fff!important}::ng-deep .cdk-overlay-pane{border-radius:8px!important;box-shadow:0 2px 6px #00000026!important}::ng-deep .mat-mdc-menu-panel{padding:4px 0!important;background-color:#fff!important;min-width:180px!important;border-radius:8px!important;box-shadow:none!important}::ng-deep .mat-mdc-menu-item{font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.04px;color:var(--Gray-700, #414651);padding:12px 16px;border-radius:0!important;transition:background .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f7f9fe!important}::ng-deep .mat-mdc-menu-item:focus,::ng-deep .mat-mdc-menu-item.cdk-keyboard-focused{background-color:#e5e9fc!important;outline:none}::ng-deep .mat-mdc-menu-item[aria-selected=true],::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted{background-color:#f7f9fe!important;color:#5473e8!important}::ng-deep .mat-mdc-menu-item[aria-selected=true] .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item[aria-selected=true] span,::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span{color:#5473e8!important}.size-header .button-label{display:none!important}.size-header .mat-icon,.size-header .left-icon,.size-header .right-icon{display:inline-flex!important;visibility:visible!important;opacity:1!important}.size-header ::ng-deep .mdc-button__label{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px}::ng-deep .mat-mdc-button-touch-target{display:none!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: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
488
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, isStandalone: true, selector: "al-button", inputs: { state: "state", disabled: "disabled", color: "color", category: "category", outline: "outline", labelText: "labelText", label: "label", arialabel: "arialabel", iconOnly: "iconOnly", leftIcon: "leftIcon", rightIcon: "rightIcon", icon: "icon", iconOutlined: "iconOutlined", outlined: "outlined", size: "size", buttonType: "buttonType", fontClass: "fontClass", dataTestId: "dataTestId", tooltip: "tooltip", tooltipPosition: "tooltipPosition", dropdownItems: "dropdownItems", dropdownOptions: "dropdownOptions", hasDropDown: "hasDropDown", dropdown: "dropdown", hasDropdown: "hasDropdown", isDropdown: "isDropdown" }, outputs: { onClick: "onClick", onHover: "onHover", onMouseLeave: "onMouseLeave", optionSelect: "optionSelect" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Regular button types -->\n<ng-container *ngIf=\"!(hasDropDown || buttonType === 'dropdown'); else dropdownTpl\">\n <button mat-flat-button class=\"btn custom-button\" [class]=\"effectiveFontClass\" [attr.data-test-id]=\"dataTestId\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-circle': buttonType === 'icon-circle',\n 'blue': color === 'blue',\n 'green': color === 'green',\n 'grey': color === 'grey',\n 'error': color === 'error',\n 'success': color === 'success',\n 'gradient': color === 'gradient',\n 'white': color === 'white',\n 'btn-outlined': outline,\n 'btn-default': effectiveState === 'default',\n 'btn-hover': effectiveState === 'hover',\n 'btn-pressed': effectiveState === 'pressed',\n 'btn-disabled': effectiveState === 'disabled'\n }\" [disabled]=\"isDisabled\" [matTooltip]=\"hasTooltip ? tooltip : null\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!hasTooltip\" (click)=\"onClick.emit($event)\" (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\" [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\">\n\n <!-- Left Icon (only if provided; for icon-circle prefer `icon` over `leftIcon`) -->\n <ng-container *ngIf=\"(buttonType === 'icon-circle' ? (icon || leftIcon) : leftIcon)?.trim() as leftIconText\">\n <ng-container *ngIf=\"getLeftSvgIconName() as svgIconName; else leftIconFont\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"left-icon\"></mat-icon>\n </ng-container>\n <ng-template #leftIconFont>\n <mat-icon [fontSet]=\"getLeftIconFontSet()\" class=\"left-icon\">\n {{ getLeftIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n\n <!-- Label (hidden when iconOnly is true) -->\n <span *ngIf=\"!iconOnly && buttonType !== 'icon-circle'\" class=\"button-label\">\n {{ labelText || '' }}\n </span>\n\n <!-- Right icon (only if provided) -->\n <ng-container *ngIf=\"rightIcon?.trim() as rightIconText\">\n <ng-container *ngIf=\"getRightSvgIconName() as svgIconName; else rightIconFont\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"right-icon\"></mat-icon>\n </ng-container>\n <ng-template #rightIconFont>\n <mat-icon [fontSet]=\"getRightIconFontSet()\" class=\"right-icon\">\n {{ getRightIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n </button>\n</ng-container>\n\n<!-- Dropdown button template -->\n<ng-template #dropdownTpl>\n <button mat-flat-button class=\"btn custom-button\" [class]=\"effectiveFontClass\" [attr.data-test-id]=\"dataTestId\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-label': true,\n 'blue': color === 'blue',\n 'green': color === 'green',\n 'grey': color === 'grey',\n 'error': color === 'error',\n 'success': color === 'success',\n 'gradient': color === 'gradient',\n 'white': color === 'white',\n 'btn-outlined': outline,\n 'btn-default': effectiveState === 'default',\n 'btn-hover': effectiveState === 'hover',\n 'btn-pressed': effectiveState === 'pressed',\n 'btn-disabled': effectiveState === 'disabled'\n }\" [disabled]=\"isDisabled\" [matTooltip]=\"hasTooltip ? tooltip : null\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!hasTooltip\" (mouseenter)=\"onHover.emit($event)\" (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\" [style.gap.px]=\"computeGap()\"\n [matMenuTriggerFor]=\"menu\">\n\n <!-- Left Icon (optional) -->\n <ng-container *ngIf=\"leftIcon?.trim() as leftIconText\">\n <ng-container *ngIf=\"getSvgIconName(leftIcon) as svgIconName; else leftIconFontDropdown\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"left-icon\"></mat-icon>\n </ng-container>\n <ng-template #leftIconFontDropdown>\n <mat-icon [fontSet]=\"getLeftIconFontSet()\" class=\"left-icon\">\n {{ getLeftIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n\n <!-- Label -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\">\n {{ labelText || '' }}\n </span>\n\n <!-- Dropdown arrow icon -->\n <mat-icon class=\"right-icon\">arrow_drop_down</mat-icon>\n </button>\n</ng-template>\n\n<!-- Mat Menu kept outside conditional to avoid portal reattachment across toggles -->\n<mat-menu #menu=\"matMenu\" panelClass=\"custom-dropdown-menu\">\n <button mat-menu-item *ngFor=\"let opt of dropdownItems\" (click)=\"selectOption(opt)\" [ngClass]=\"effectiveFontClass\">\n {{ opt.label || opt }}\n </button>\n</mat-menu>\n\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+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\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=network_node\";.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}.material-icons-outlined{font-family:Material Icons Outlined;font-weight:400;font-style:normal;font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.mdc-button.btn{border-radius:8px;display:flex;align-items:center;cursor:pointer;border:none;transition:background .2s,border .2s,transform .1s;min-width:auto!important;gap:8px;height:auto!important}.mdc-button.btn-primary1{background-color:#5473e8;color:#fff}.mdc-button.btn-primary2{background-color:#37c1ce;color:#fff}.mdc-button.btn-secondary{background-color:#717793;color:#fff}.mdc-button.btn-destructive{background-color:#e854a4;color:#fff}.mdc-button.btn-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.btn-primary2:hover{background-color:#4bc7d3!important}.mdc-button.btn-primary2:active{background-color:#299da8!important}.mdc-button.btn-primary2:outlined{background-color:#fff;border-radius:4px;border:1px solid #37C1CE}.mdc-button.btn-primary1:hover{background-color:#6581ea!important}.mdc-button.btn-primary1:active{background-color:#1e46df!important}.mdc-button.btn-primary1:outlined{background-color:#fff;border-radius:4px;border:1px solid #5473E8}.mdc-button.btn-secondary:hover{background-color:#4b4f62!important}.mdc-button.btn-secondary:active{background-color:#252831!important}.mdc-button.btn-secondary:outlined{background-color:#fff;border-radius:4px;border:1px solid #383B4A}.mdc-button.btn-destructive:hover{background-color:#ef87bf!important}.mdc-button.btn-destructive:active{background-color:#e22a8e!important}.mdc-button.btn-destructive:outlined{background-color:#fff;border-radius:4px;border:1px solid #E854A4}.mdc-button.btn-gradient:hover{background:linear-gradient(0deg,#fafafd4d,#fafafd4d),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)!important}.mdc-button.btn-gradient:active{background:linear-gradient(0deg,#383b4a80,#383b4a80),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)!important}.mdc-button.btn-disabled{border:none!important;opacity:.4;cursor:not-allowed;pointer-events:none}.blue{background-color:#5473e8!important;color:#fff}.blue.btn-hover,.blue:hover{background-color:#6581ea!important}.blue.btn-pressed,.blue:active{background-color:#1e46df!important}.green{background-color:#37c1ce!important;color:#fff}.green.btn-hover,.green:hover{background-color:#4bc7d3!important}.green.btn-pressed,.green:active{background-color:#299da8!important}.grey{background-color:#717793!important;color:#fff}.grey.btn-hover,.grey:hover{background-color:#4b4f62!important}.grey.btn-pressed,.grey:active{background-color:#252831!important}.error{background-color:#e854a4!important;color:#fff!important}.error.btn-hover,.error:hover{background-color:#ef87bf!important;color:#fff!important}.error.btn-pressed,.error:active{background-color:#e22a8e!important;color:#fff!important}.success{background-color:#00ad83!important;color:#fff!important}.success.btn-hover,.success:hover{background-color:#009873!important;color:#fff!important}.success.btn-pressed,.success:active{background-color:#007f61!important;color:#fff!important}.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff!important}.gradient.btn-hover,.gradient:hover{opacity:.9}.gradient.btn-pressed,.gradient:active{opacity:.8}.white{background-color:#fff!important;color:#383b4a!important}.white.btn-hover,.white:hover{background-color:#ecedf1!important}.white.btn-pressed,.white:active{background-color:#dee0e6!important}.blue.btn-outlined{background-color:#fff!important;color:#5473e8!important;box-shadow:inset 0 0 0 1px #5473e8!important}.blue.btn-outlined.btn-hover,.blue.btn-outlined:hover{background-color:#6581ea!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.blue.btn-outlined.btn-pressed,.blue.btn-outlined:active{background-color:#1e46df!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.green.btn-outlined{background-color:#fff!important;color:#37c1ce!important;box-shadow:inset 0 0 0 1px #37c1ce!important}.green.btn-outlined.btn-hover,.green.btn-outlined:hover{background-color:#4bc7d3!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.green.btn-outlined.btn-pressed,.green.btn-outlined:active{background-color:#299da8!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.grey.btn-outlined{background-color:#fff!important;color:#383b4a!important;box-shadow:inset 0 0 0 1px #383b4a!important}.grey.btn-outlined.btn-hover,.grey.btn-outlined:hover{background-color:#4b4f62!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.grey.btn-outlined.btn-pressed,.grey.btn-outlined:active{background-color:#252831!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined{background-color:#fff!important;color:#e854a4!important;box-shadow:inset 0 0 0 1px #e854a4!important}.error.btn-outlined.btn-hover,.error.btn-outlined:hover{background-color:#ef87bf!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined.btn-pressed,.error.btn-outlined:active{background-color:#e22a8e!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined mat-icon,.error.btn-outlined .button-label{color:#e854a4!important}.error.btn-outlined:hover mat-icon,.error.btn-outlined:hover .button-label,.error.btn-outlined:active mat-icon,.error.btn-outlined:active .button-label{color:#fff!important}.success.btn-outlined{background-color:#fff!important;color:#00ad83!important;box-shadow:inset 0 0 0 1px #00ad83!important}.success.btn-outlined.btn-hover,.success.btn-outlined:hover{background-color:#009873!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.success.btn-outlined.btn-pressed,.success.btn-outlined:active{background-color:#007f61!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.success.btn-outlined mat-icon,.success.btn-outlined .button-label{color:#00ad83!important}.success.btn-outlined:hover mat-icon,.success.btn-outlined:hover .button-label,.success.btn-outlined:active mat-icon,.success.btn-outlined:active .button-label{color:#fff!important}.white.btn-outlined{background-color:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 1px #fff!important}.white.btn-outlined.btn-hover,.white.btn-outlined:hover,.white.btn-outlined.btn-pressed,.white.btn-outlined:active{background-color:transparent!important;color:#fff!important}.btn.custom-button>*+*{margin-left:8px}.two-icon-label{padding:4px 12px!important}button.two-icon-label .mat-icon{width:20px!important;height:20px!important}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format(\"woff2\")}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.left-icon{order:0}.right-icon{order:2}mat-icon.mat-icon{margin:0!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;vertical-align:middle}.left-icon,.right-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0}.left-icon ::ng-deep svg,.right-icon ::ng-deep svg{fill:currentColor!important}.white.btn-outlined .left-icon ::ng-deep svg,.white.btn-outlined .right-icon ::ng-deep svg{fill:currentColor!important}.size-header{font-size:20px;padding:4px 6px!important;gap:4px!important;border-radius:4px!important}.size-xs{font-size:12px;padding:8px 12px!important}.size-sm{font-size:14px;padding:8px 12px!important}.size-base{font-size:14px;padding:10px 16px!important}.size-l{font-size:16px;padding:12px 20px!important}.size-xl{font-size:16px;padding:14px 24px!important}.size-header .mat-icon{font-size:20px;height:20px;width:20px;display:inline-flex!important;align-items:center!important;justify-content:center!important}.size-header .mat-icon ::ng-deep svg{width:20px!important;height:20px!important}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px;height:16px;width:16px}.size-l .mat-icon,.size-xl .mat-icon{font-size:20px;height:20px;width:20px}.btn.size-header{gap:4px!important;padding:4px 6px!important}::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,::ng-deep .custom-dropdown-menu.mat-menu-panel{padding:0;border-radius:8px;box-shadow:0 2px 6px #00000026;border:1px solid rgba(0,0,0,.12)}::ng-deep .custom-dropdown-menu .mat-mdc-menu-content,::ng-deep .custom-dropdown-menu .mat-menu-content{padding:0}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item{font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.04px;height:56px;padding:16px 24px;color:var(--Gray-700, #414651);transition:background .2s ease-in-out}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,::ng-deep .custom-dropdown-menu .mat-menu-item:hover{background:#f7f9fe!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:focus,::ng-deep .custom-dropdown-menu .mat-menu-item:focus,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.cdk-keyboard-focused,::ng-deep .custom-dropdown-menu .mat-menu-item.cdk-keyboard-focused{background:#e5e9fc!important;outline:none}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:active,::ng-deep .custom-dropdown-menu .mat-menu-item:active{background:#f7f9fe!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true],::ng-deep .custom-dropdown-menu .mat-menu-item[aria-selected=true],::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted,::ng-deep .custom-dropdown-menu .mat-menu-item.mat-menu-item-highlighted{background:#f7f9fe!important;color:#5473e8!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true] .mat-mdc-menu-item-text,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true] span,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span{color:#5473e8!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item+.mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item+.mat-menu-item{border-top:1px solid #EAECEE}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #ffffff !important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content,::ng-deep .mat-menu-panel .mat-menu-content{background-color:#fff!important}::ng-deep .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item{color:var(--Gray-700, #414651)!important;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;--mat-menu-item-label-text-color: var(--Gray-700, #414651) !important;--mdc-list-list-item-label-text-color: var(--Gray-700, #414651) !important}::ng-deep .mat-mdc-menu-item .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item span{color:var(--Gray-700, #414651)!important;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}.cdk-overlay-pane{z-index:1000!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface,.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface,.cdk-overlay-pane .mat-menu-panel{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #fff !important}.mat-mdc-menu-panel,.mdc-menu-surface,.mat-menu-panel{--mdc-theme-surface: #ffffff !important;background-color:#fff!important}.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface{--mdc-menu-container-color: #fff !important}.cdk-overlay-pane .mat-menu-panel,.cdk-overlay-pane .mat-mdc-menu-content,.cdk-overlay-pane .mat-menu-content{background:#fff!important}button.icon-circle{width:auto!important;height:auto!important;border-radius:50%!important;aspect-ratio:1/1;display:inline-flex;align-items:center;vertical-align:middle;line-height:0!important;min-width:0!important;justify-content:center;padding:6px!important}.size-small.icon-circle{padding:4px!important}.size-medium.icon-circle{padding:8px!important}.size-large.icon-circle{padding:12px!important}.size-header.icon-circle{padding:4px!important}.size-header.icon-circle .mat-icon{width:10px;height:10px;font-size:10px}.size-xs.icon-circle{padding:4px!important}.size-xs.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-xs.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-sm.icon-circle{padding:10px!important;height:32px!important;width:32px!important}.size-sm.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-sm.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-base.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-l.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-xl.icon-circle{padding:14px!important}.size-xl.icon-circle .mat-icon{width:20px;height:20px;font-size:20px}.icon-xs{padding:4px!important}.mdc-button.blue{background-color:#5473e8;color:#fff}.mdc-button.blue:hover{background-color:#6581ea}.mdc-button.blue:active{background-color:#1e46df}.mdc-button.green{background-color:#37c1ce;color:#fff}.mdc-button.green:hover{background-color:#4bc7d3}.mdc-button.green:active{background-color:#299da8}.mdc-button.grey{background-color:#717793;color:#fff}.mdc-button.grey:hover{background-color:#4b4f62}.mdc-button.grey:active{background-color:#252831}.mdc-button.error{background-color:#e854a4;color:#fff!important}.mdc-button.error:hover{background-color:#ef87bf;color:#fff!important}.mdc-button.error:active{background-color:#e22a8e;color:#fff!important}.mdc-button.success{background-color:#00ad83;color:#fff!important}.mdc-button.success:hover{background-color:#009873;color:#fff!important}.mdc-button.success:active{background-color:#007f61;color:#fff!important}.mdc-button.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.gradient:hover{background:linear-gradient(0deg,#fafafd4d,#fafafd4d),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.gradient:active{background:linear-gradient(0deg,#383b4a80,#383b4a80),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.disabled,.mdc-button:disabled{opacity:.4;cursor:not-allowed!important;pointer-events:none}.mdc-button.blue-no-outline{background-color:#fff;color:#5473e8;border:1px solid #5473E8}.mdc-button.blue-no-outline:hover{background-color:#6581ea;color:#fff}.mdc-button.blue-no-outline:active{background-color:#1e46df;color:#fff}.mdc-button.white-colour-outline{background-color:transparent;color:#fff;border:1px solid #fff}.mdc-button.white-colour-outline:hover,.mdc-button.white-colour-outline:active{background-color:transparent;color:#fff}.mdc-button.green-no-outline{background-color:#fff;color:#37c1ce;border:1px solid #37C1CE}.mdc-button.green-no-outline:hover{background-color:#4bc7d3;color:#fff}.mdc-button.green-no-outline:active{background-color:#299da8;color:#fff}.mdc-button.grey-no-outline{background-color:#fff;color:#383b4a;border:1px solid #383B4A}.mdc-button.grey-no-outline:hover{background-color:#4b4f62;color:#fff}.mdc-button.grey-no-outline:active{background-color:#252831;color:#fff}.mdc-button.error-no-outline{background-color:#fff;color:#e854a4;border:1px solid #E854A4}.mdc-button.error-no-outline:hover{background-color:#ef87bf;color:#fff}.mdc-button.error-no-outline:active{background-color:#e22a8e;color:#fff}.mdc-button.blue-colour-outline{background-color:#fff;color:#5473e8;box-shadow:inset 0 0 0 1px #5473e8}.mdc-button.blue-colour-outline:hover{background-color:#6581ea;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.blue-colour-outline:active{background-color:#1e46df;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.green-colour-outline{background-color:#fff;color:#37c1ce;box-shadow:inset 0 0 0 1px #37c1ce}.mdc-button.green-colour-outline:hover{background-color:#4bc7d3;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.green-colour-outline:active{background-color:#299da8;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.grey-colour-outline{background-color:#fff;color:#383b4a;box-shadow:inset 0 0 0 1px #383b4a}.mdc-button.grey-colour-outline:hover{background-color:#4b4f62;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.grey-colour-outline:active{background-color:#252831;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline{background-color:#fff;color:#e854a4!important;box-shadow:inset 0 0 0 1px #e854a4}.mdc-button.error-colour-outline:hover{background-color:#ef87bf;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline:active{background-color:#e22a8e;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline mat-icon,.mdc-button.error-colour-outline .button-label{color:#e854a4!important}.mdc-button.error-colour-outline:hover mat-icon,.mdc-button.error-colour-outline:hover .button-label,.mdc-button.error-colour-outline:active mat-icon,.mdc-button.error-colour-outline:active .button-label{color:#fff!important}.mdc-button.success-colour-outline{background-color:#fff;color:#00ad83!important;box-shadow:inset 0 0 0 1px #00ad83}.mdc-button.success-colour-outline:hover{background-color:#009873;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.success-colour-outline:active{background-color:#007f61;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.success-colour-outline mat-icon,.mdc-button.success-colour-outline .button-label{color:#00ad83!important}.mdc-button.success-colour-outline:hover mat-icon,.mdc-button.success-colour-outline:hover .button-label,.mdc-button.success-colour-outline:active mat-icon,.mdc-button.success-colour-outline:active .button-label{color:#fff!important}::ng-deep .cdk-overlay-pane{border-radius:8px!important;box-shadow:0 2px 6px #00000026!important}::ng-deep .mat-mdc-menu-panel{padding:4px 0!important;background-color:#fff!important;min-width:180px!important;border-radius:8px!important;box-shadow:none!important}::ng-deep .mat-mdc-menu-item{font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.04px;color:var(--Gray-700, #414651);padding:12px 16px;border-radius:0!important;transition:background .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f7f9fe!important}::ng-deep .mat-mdc-menu-item:focus,::ng-deep .mat-mdc-menu-item.cdk-keyboard-focused{background-color:#e5e9fc!important;outline:none}::ng-deep .mat-mdc-menu-item[aria-selected=true],::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted{background-color:#f7f9fe!important;color:#5473e8!important}::ng-deep .mat-mdc-menu-item[aria-selected=true] .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item[aria-selected=true] span,::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span{color:#5473e8!important}.size-header .button-label{display:none!important}.size-header .mat-icon,.size-header .left-icon,.size-header .right-icon{display:inline-flex!important;visibility:visible!important;opacity:1!important}.size-header ::ng-deep .mdc-button__label{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px}::ng-deep .mat-mdc-button-touch-target{display:none!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: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
485
489
|
}
|
|
486
490
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
487
491
|
type: Component,
|
|
488
|
-
args: [{ selector: 'al-button', imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule], standalone: true, template: "<!-- Regular button types -->\n<ng-container *ngIf=\"!(hasDropDown || buttonType === 'dropdown'); else dropdownTpl\">\n <button mat-flat-button class=\"btn custom-button\" [class]=\"effectiveFontClass\" [attr.data-test-id]=\"dataTestId\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-circle': buttonType === 'icon-circle',\n 'blue': color === 'blue',\n 'green': color === 'green',\n 'grey': color === 'grey',\n 'error': color === 'error',\n 'success': color === 'success',\n 'gradient': color === 'gradient',\n 'white': color === 'white',\n 'btn-outlined': outline,\n 'btn-default': effectiveState === 'default',\n 'btn-hover': effectiveState === 'hover',\n 'btn-pressed': effectiveState === 'pressed',\n 'btn-disabled': effectiveState === 'disabled'\n }\" [disabled]=\"isDisabled\" [matTooltip]=\"hasTooltip ? tooltip : null\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!hasTooltip\" (click)=\"onClick.emit($event)\" (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\" [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\">\n\n <!-- Left Icon (only if provided; for icon-circle prefer `icon` over `leftIcon`) -->\n <ng-container *ngIf=\"(buttonType === 'icon-circle' ? (icon || leftIcon) : leftIcon)?.trim() as leftIconText\">\n <ng-container *ngIf=\"getLeftSvgIconName() as svgIconName; else leftIconFont\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"left-icon\"></mat-icon>\n </ng-container>\n <ng-template #leftIconFont>\n <mat-icon [fontSet]=\"getLeftIconFontSet()\" class=\"left-icon\">\n {{ getLeftIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n\n <!-- Label (hidden when iconOnly is true) -->\n <span *ngIf=\"!iconOnly && buttonType !== 'icon-circle'\" class=\"button-label\">\n {{ labelText || '' }}\n </span>\n\n <!-- Right icon (only if provided) -->\n <ng-container *ngIf=\"rightIcon?.trim() as rightIconText\">\n <ng-container *ngIf=\"getRightSvgIconName() as svgIconName; else rightIconFont\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"right-icon\"></mat-icon>\n </ng-container>\n <ng-template #rightIconFont>\n <mat-icon [fontSet]=\"getRightIconFontSet()\" class=\"right-icon\">\n {{ getRightIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n </button>\n</ng-container>\n\n<!-- Dropdown button template -->\n<ng-template #dropdownTpl>\n <button mat-flat-button class=\"btn custom-button\" [class]=\"effectiveFontClass\" [attr.data-test-id]=\"dataTestId\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-label': true,\n 'blue': color === 'blue',\n 'green': color === 'green',\n 'grey': color === 'grey',\n 'error': color === 'error',\n 'success': color === 'success',\n 'gradient': color === 'gradient',\n 'white': color === 'white',\n 'btn-outlined': outline,\n 'btn-default': effectiveState === 'default',\n 'btn-hover': effectiveState === 'hover',\n 'btn-pressed': effectiveState === 'pressed',\n 'btn-disabled': effectiveState === 'disabled'\n }\" [disabled]=\"isDisabled\" [matTooltip]=\"hasTooltip ? tooltip : null\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!hasTooltip\" (mouseenter)=\"onHover.emit($event)\" (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\" [style.gap.px]=\"computeGap()\"\n [matMenuTriggerFor]=\"menu\">\n\n <!-- Left Icon (optional) -->\n <ng-container *ngIf=\"leftIcon?.trim() as leftIconText\">\n <ng-container *ngIf=\"getSvgIconName(leftIcon) as svgIconName; else leftIconFontDropdown\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"left-icon\"></mat-icon>\n </ng-container>\n <ng-template #leftIconFontDropdown>\n <mat-icon [fontSet]=\"getLeftIconFontSet()\" class=\"left-icon\">\n {{ getLeftIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n\n <!-- Label -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\">\n {{ labelText || '' }}\n </span>\n\n <!-- Dropdown arrow icon -->\n <mat-icon class=\"right-icon\">arrow_drop_down</mat-icon>\n </button>\n</ng-template>\n\n<!-- Mat Menu kept outside conditional to avoid portal reattachment across toggles -->\n<mat-menu #menu=\"matMenu\" panelClass=\"custom-dropdown-menu\">\n <button mat-menu-item *ngFor=\"let opt of dropdownItems\" (click)=\"selectOption(opt)\" [ngClass]=\"effectiveFontClass\">\n {{ opt.label || opt }}\n </button>\n</mat-menu>\n\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+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\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=network_node\";.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:140%;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}.material-icons-outlined{font-family:Material Icons Outlined;font-weight:400;font-style:normal;font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.mdc-button.btn{border-radius:4px;display:flex;align-items:center;cursor:pointer;border:none;transition:background .2s,border .2s,transform .1s;min-width:auto!important;gap:8px;height:auto!important}.mdc-button.btn-primary1{background-color:#5473e8;color:#fff}.mdc-button.btn-primary2{background-color:#37c1ce;color:#fff}.mdc-button.btn-secondary{background-color:#717793;color:#fff}.mdc-button.btn-destructive{background-color:#e854a4;color:#fff}.mdc-button.btn-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.btn-primary2:hover{background-color:#4bc7d3!important}.mdc-button.btn-primary2:active{background-color:#299da8!important}.mdc-button.btn-primary2:outlined{background-color:#fff;border-radius:4px;border:1px solid #37C1CE}.mdc-button.btn-primary1:hover{background-color:#6581ea!important}.mdc-button.btn-primary1:active{background-color:#1e46df!important}.mdc-button.btn-primary1:outlined{background-color:#fff;border-radius:4px;border:1px solid #5473E8}.mdc-button.btn-secondary:hover{background-color:#4b4f62!important}.mdc-button.btn-secondary:active{background-color:#252831!important}.mdc-button.btn-secondary:outlined{background-color:#fff;border-radius:4px;border:1px solid #383B4A}.mdc-button.btn-destructive:hover{background-color:#ef87bf!important}.mdc-button.btn-destructive:active{background-color:#e22a8e!important}.mdc-button.btn-destructive:outlined{background-color:#fff;border-radius:4px;border:1px solid #E854A4}.mdc-button.btn-gradient:hover{background:linear-gradient(0deg,#fafafd4d,#fafafd4d),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)!important}.mdc-button.btn-gradient:active{background:linear-gradient(0deg,#383b4a80,#383b4a80),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)!important}.mdc-button.btn-disabled{border:none!important;opacity:.4;cursor:not-allowed;pointer-events:none}.blue{background-color:#5473e8!important;color:#fff}.blue.btn-hover,.blue:hover{background-color:#6581ea!important}.blue.btn-pressed,.blue:active{background-color:#1e46df!important}.green{background-color:#37c1ce!important;color:#fff}.green.btn-hover,.green:hover{background-color:#4bc7d3!important}.green.btn-pressed,.green:active{background-color:#299da8!important}.grey{background-color:#717793!important;color:#fff}.grey.btn-hover,.grey:hover{background-color:#4b4f62!important}.grey.btn-pressed,.grey:active{background-color:#252831!important}.error{background-color:#e854a4!important;color:#fff!important}.error.btn-hover,.error:hover{background-color:#ef87bf!important;color:#fff!important}.error.btn-pressed,.error:active{background-color:#e22a8e!important;color:#fff!important}.success{background-color:#00ad83!important;color:#fff!important}.success.btn-hover,.success:hover{background-color:#009873!important;color:#fff!important}.success.btn-pressed,.success:active{background-color:#007f61!important;color:#fff!important}.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff!important}.gradient.btn-hover,.gradient:hover{opacity:.9}.gradient.btn-pressed,.gradient:active{opacity:.8}.white{background-color:#fff!important;color:#383b4a!important}.white.btn-hover,.white:hover{background-color:#ecedf1!important}.white.btn-pressed,.white:active{background-color:#dee0e6!important}.blue.btn-outlined{background-color:#fff!important;color:#5473e8!important;box-shadow:inset 0 0 0 1px #5473e8!important}.blue.btn-outlined.btn-hover,.blue.btn-outlined:hover{background-color:#6581ea!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.blue.btn-outlined.btn-pressed,.blue.btn-outlined:active{background-color:#1e46df!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.green.btn-outlined{background-color:#fff!important;color:#37c1ce!important;box-shadow:inset 0 0 0 1px #37c1ce!important}.green.btn-outlined.btn-hover,.green.btn-outlined:hover{background-color:#4bc7d3!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.green.btn-outlined.btn-pressed,.green.btn-outlined:active{background-color:#299da8!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.grey.btn-outlined{background-color:#fff!important;color:#383b4a!important;box-shadow:inset 0 0 0 1px #383b4a!important}.grey.btn-outlined.btn-hover,.grey.btn-outlined:hover{background-color:#4b4f62!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.grey.btn-outlined.btn-pressed,.grey.btn-outlined:active{background-color:#252831!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined{background-color:#fff!important;color:#e854a4!important;box-shadow:inset 0 0 0 1px #e854a4!important}.error.btn-outlined.btn-hover,.error.btn-outlined:hover{background-color:#ef87bf!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined.btn-pressed,.error.btn-outlined:active{background-color:#e22a8e!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined mat-icon,.error.btn-outlined .button-label{color:#e854a4!important}.error.btn-outlined:hover mat-icon,.error.btn-outlined:hover .button-label,.error.btn-outlined:active mat-icon,.error.btn-outlined:active .button-label{color:#fff!important}.success.btn-outlined{background-color:#fff!important;color:#00ad83!important;box-shadow:inset 0 0 0 1px #00ad83!important}.success.btn-outlined.btn-hover,.success.btn-outlined:hover{background-color:#009873!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.success.btn-outlined.btn-pressed,.success.btn-outlined:active{background-color:#007f61!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.success.btn-outlined mat-icon,.success.btn-outlined .button-label{color:#00ad83!important}.success.btn-outlined:hover mat-icon,.success.btn-outlined:hover .button-label,.success.btn-outlined:active mat-icon,.success.btn-outlined:active .button-label{color:#fff!important}.white.btn-outlined{background-color:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 1px #fff!important}.white.btn-outlined.btn-hover,.white.btn-outlined:hover,.white.btn-outlined.btn-pressed,.white.btn-outlined:active{background-color:transparent!important;color:#fff!important}.btn.custom-button>*+*{margin-left:8px}.two-icon-label{padding:4px 12px!important}button.two-icon-label .mat-icon{width:20px!important;height:20px!important}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format(\"woff2\")}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.left-icon{order:0}.right-icon{order:2}mat-icon.mat-icon{margin:0!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;vertical-align:middle}.left-icon,.right-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0}.left-icon ::ng-deep svg,.right-icon ::ng-deep svg{fill:currentColor!important}.white.btn-outlined .left-icon ::ng-deep svg,.white.btn-outlined .right-icon ::ng-deep svg{fill:currentColor!important}.size-header{font-size:20px;padding:4px 12px!important}.size-xs{font-size:12px;padding:8px 12px!important}.size-sm{font-size:14px;padding:8px 12px!important}.size-base{font-size:14px;padding:10px 16px!important}.size-l{font-size:16px;padding:12px 20px!important}.size-xl{font-size:16px;padding:14px 24px!important}.size-header .mat-icon{font-size:20px;height:20px;width:20px;display:inline-flex!important;align-items:center!important;justify-content:center!important}.size-header .mat-icon ::ng-deep svg{width:20px!important;height:20px!important}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px;height:16px;width:16px}.size-l .mat-icon,.size-xl .mat-icon{font-size:20px;height:20px;width:20px}.btn.size-header{gap:4px!important;padding:4px 12px!important}::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,::ng-deep .custom-dropdown-menu.mat-menu-panel{padding:0;border-radius:8px;box-shadow:0 2px 6px #00000026;border:1px solid rgba(0,0,0,.12)}::ng-deep .custom-dropdown-menu .mat-mdc-menu-content,::ng-deep .custom-dropdown-menu .mat-menu-content{padding:0}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item{font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.04px;height:56px;padding:16px 24px;color:var(--Gray-700, #414651);transition:background .2s ease-in-out}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,::ng-deep .custom-dropdown-menu .mat-menu-item:hover{background:#f7f9fe!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:focus,::ng-deep .custom-dropdown-menu .mat-menu-item:focus,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.cdk-keyboard-focused,::ng-deep .custom-dropdown-menu .mat-menu-item.cdk-keyboard-focused{background:#e5e9fc!important;outline:none}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:active,::ng-deep .custom-dropdown-menu .mat-menu-item:active{background:#f7f9fe!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true],::ng-deep .custom-dropdown-menu .mat-menu-item[aria-selected=true],::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted,::ng-deep .custom-dropdown-menu .mat-menu-item.mat-menu-item-highlighted{background:#f7f9fe!important;color:#5473e8!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true] .mat-mdc-menu-item-text,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true] span,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span{color:#5473e8!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item+.mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item+.mat-menu-item{border-top:1px solid #EAECEE}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #ffffff !important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content,::ng-deep .mat-menu-panel .mat-menu-content{background-color:#fff!important}::ng-deep .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item{color:var(--Gray-700, #414651)!important;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;--mat-menu-item-label-text-color: var(--Gray-700, #414651) !important;--mdc-list-list-item-label-text-color: var(--Gray-700, #414651) !important}::ng-deep .mat-mdc-menu-item .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item span{color:var(--Gray-700, #414651)!important;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}.cdk-overlay-pane{z-index:1000!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface,.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface,.cdk-overlay-pane .mat-menu-panel{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #fff !important}.mat-mdc-menu-panel,.mdc-menu-surface,.mat-menu-panel{--mdc-theme-surface: #ffffff !important;background-color:#fff!important}.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface{--mdc-menu-container-color: #fff !important}.cdk-overlay-pane .mat-menu-panel,.cdk-overlay-pane .mat-mdc-menu-content,.cdk-overlay-pane .mat-menu-content{background:#fff!important}button.icon-circle{width:auto!important;height:auto!important;border-radius:50%!important;aspect-ratio:1/1;display:inline-flex;align-items:center;vertical-align:middle;line-height:0!important;min-width:0!important;justify-content:center;padding:6px!important}.size-small.icon-circle{padding:4px!important}.size-medium.icon-circle{padding:8px!important}.size-large.icon-circle{padding:12px!important}.size-header.icon-circle{padding:4px!important}.size-header.icon-circle .mat-icon{width:10px;height:10px;font-size:10px}.size-xs.icon-circle{padding:4px!important}.size-xs.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-xs.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-sm.icon-circle{padding:10px!important;height:32px!important;width:32px!important}.size-sm.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-sm.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-base.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-l.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-xl.icon-circle{padding:14px!important}.size-xl.icon-circle .mat-icon{width:20px;height:20px;font-size:20px}.icon-xs{padding:4px!important}.mdc-button.blue{background-color:#5473e8;color:#fff}.mdc-button.blue:hover{background-color:#6581ea}.mdc-button.blue:active{background-color:#1e46df}.mdc-button.green{background-color:#37c1ce;color:#fff}.mdc-button.green:hover{background-color:#4bc7d3}.mdc-button.green:active{background-color:#299da8}.mdc-button.grey{background-color:#717793;color:#fff}.mdc-button.grey:hover{background-color:#4b4f62}.mdc-button.grey:active{background-color:#252831}.mdc-button.error{background-color:#e854a4;color:#fff!important}.mdc-button.error:hover{background-color:#ef87bf;color:#fff!important}.mdc-button.error:active{background-color:#e22a8e;color:#fff!important}.mdc-button.success{background-color:#00ad83;color:#fff!important}.mdc-button.success:hover{background-color:#009873;color:#fff!important}.mdc-button.success:active{background-color:#007f61;color:#fff!important}.mdc-button.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.gradient:hover{background:linear-gradient(0deg,#fafafd4d,#fafafd4d),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.gradient:active{background:linear-gradient(0deg,#383b4a80,#383b4a80),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.disabled,.mdc-button:disabled{opacity:.4;cursor:not-allowed!important;pointer-events:none}.mdc-button.blue-no-outline{background-color:#fff;color:#5473e8;border:1px solid #5473E8}.mdc-button.blue-no-outline:hover{background-color:#6581ea;color:#fff}.mdc-button.blue-no-outline:active{background-color:#1e46df;color:#fff}.mdc-button.white-colour-outline{background-color:transparent;color:#fff;border:1px solid #fff}.mdc-button.white-colour-outline:hover,.mdc-button.white-colour-outline:active{background-color:transparent;color:#fff}.mdc-button.green-no-outline{background-color:#fff;color:#37c1ce;border:1px solid #37C1CE}.mdc-button.green-no-outline:hover{background-color:#4bc7d3;color:#fff}.mdc-button.green-no-outline:active{background-color:#299da8;color:#fff}.mdc-button.grey-no-outline{background-color:#fff;color:#383b4a;border:1px solid #383B4A}.mdc-button.grey-no-outline:hover{background-color:#4b4f62;color:#fff}.mdc-button.grey-no-outline:active{background-color:#252831;color:#fff}.mdc-button.error-no-outline{background-color:#fff;color:#e854a4;border:1px solid #E854A4}.mdc-button.error-no-outline:hover{background-color:#ef87bf;color:#fff}.mdc-button.error-no-outline:active{background-color:#e22a8e;color:#fff}.mdc-button.blue-colour-outline{background-color:#fff;color:#5473e8;box-shadow:inset 0 0 0 1px #5473e8}.mdc-button.blue-colour-outline:hover{background-color:#6581ea;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.blue-colour-outline:active{background-color:#1e46df;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.green-colour-outline{background-color:#fff;color:#37c1ce;box-shadow:inset 0 0 0 1px #37c1ce}.mdc-button.green-colour-outline:hover{background-color:#4bc7d3;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.green-colour-outline:active{background-color:#299da8;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.grey-colour-outline{background-color:#fff;color:#383b4a;box-shadow:inset 0 0 0 1px #383b4a}.mdc-button.grey-colour-outline:hover{background-color:#4b4f62;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.grey-colour-outline:active{background-color:#252831;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline{background-color:#fff;color:#e854a4!important;box-shadow:inset 0 0 0 1px #e854a4}.mdc-button.error-colour-outline:hover{background-color:#ef87bf;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline:active{background-color:#e22a8e;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline mat-icon,.mdc-button.error-colour-outline .button-label{color:#e854a4!important}.mdc-button.error-colour-outline:hover mat-icon,.mdc-button.error-colour-outline:hover .button-label,.mdc-button.error-colour-outline:active mat-icon,.mdc-button.error-colour-outline:active .button-label{color:#fff!important}.mdc-button.success-colour-outline{background-color:#fff;color:#00ad83!important;box-shadow:inset 0 0 0 1px #00ad83}.mdc-button.success-colour-outline:hover{background-color:#009873;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.success-colour-outline:active{background-color:#007f61;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.success-colour-outline mat-icon,.mdc-button.success-colour-outline .button-label{color:#00ad83!important}.mdc-button.success-colour-outline:hover mat-icon,.mdc-button.success-colour-outline:hover .button-label,.mdc-button.success-colour-outline:active mat-icon,.mdc-button.success-colour-outline:active .button-label{color:#fff!important}::ng-deep .cdk-overlay-pane{border-radius:8px!important;box-shadow:0 2px 6px #00000026!important}::ng-deep .mat-mdc-menu-panel{padding:4px 0!important;background-color:#fff!important;min-width:180px!important;border-radius:8px!important;box-shadow:none!important}::ng-deep .mat-mdc-menu-item{font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.04px;color:var(--Gray-700, #414651);padding:12px 16px;border-radius:0!important;transition:background .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f7f9fe!important}::ng-deep .mat-mdc-menu-item:focus,::ng-deep .mat-mdc-menu-item.cdk-keyboard-focused{background-color:#e5e9fc!important;outline:none}::ng-deep .mat-mdc-menu-item[aria-selected=true],::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted{background-color:#f7f9fe!important;color:#5473e8!important}::ng-deep .mat-mdc-menu-item[aria-selected=true] .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item[aria-selected=true] span,::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span{color:#5473e8!important}.size-header .button-label{display:none!important}.size-header .mat-icon,.size-header .left-icon,.size-header .right-icon{display:inline-flex!important;visibility:visible!important;opacity:1!important}.size-header ::ng-deep .mdc-button__label{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px}::ng-deep .mat-mdc-button-touch-target{display:none!important}\n"] }]
|
|
492
|
+
args: [{ selector: 'al-button', imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule], standalone: true, template: "<!-- Regular button types -->\n<ng-container *ngIf=\"!(hasDropDown || buttonType === 'dropdown'); else dropdownTpl\">\n <button mat-flat-button class=\"btn custom-button\" [class]=\"effectiveFontClass\" [attr.data-test-id]=\"dataTestId\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-circle': buttonType === 'icon-circle',\n 'blue': color === 'blue',\n 'green': color === 'green',\n 'grey': color === 'grey',\n 'error': color === 'error',\n 'success': color === 'success',\n 'gradient': color === 'gradient',\n 'white': color === 'white',\n 'btn-outlined': outline,\n 'btn-default': effectiveState === 'default',\n 'btn-hover': effectiveState === 'hover',\n 'btn-pressed': effectiveState === 'pressed',\n 'btn-disabled': effectiveState === 'disabled'\n }\" [disabled]=\"isDisabled\" [matTooltip]=\"hasTooltip ? tooltip : null\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!hasTooltip\" (click)=\"onClick.emit($event)\" (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\" [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\">\n\n <!-- Left Icon (only if provided; for icon-circle prefer `icon` over `leftIcon`) -->\n <ng-container *ngIf=\"(buttonType === 'icon-circle' ? (icon || leftIcon) : leftIcon)?.trim() as leftIconText\">\n <ng-container *ngIf=\"getLeftSvgIconName() as svgIconName; else leftIconFont\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"left-icon\"></mat-icon>\n </ng-container>\n <ng-template #leftIconFont>\n <mat-icon [fontSet]=\"getLeftIconFontSet()\" class=\"left-icon\">\n {{ getLeftIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n\n <!-- Label (hidden when iconOnly is true) -->\n <span *ngIf=\"!iconOnly && buttonType !== 'icon-circle'\" class=\"button-label\">\n {{ labelText || '' }}\n </span>\n\n <!-- Right icon (only if provided) -->\n <ng-container *ngIf=\"rightIcon?.trim() as rightIconText\">\n <ng-container *ngIf=\"getRightSvgIconName() as svgIconName; else rightIconFont\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"right-icon\"></mat-icon>\n </ng-container>\n <ng-template #rightIconFont>\n <mat-icon [fontSet]=\"getRightIconFontSet()\" class=\"right-icon\">\n {{ getRightIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n </button>\n</ng-container>\n\n<!-- Dropdown button template -->\n<ng-template #dropdownTpl>\n <button mat-flat-button class=\"btn custom-button\" [class]=\"effectiveFontClass\" [attr.data-test-id]=\"dataTestId\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-label': true,\n 'blue': color === 'blue',\n 'green': color === 'green',\n 'grey': color === 'grey',\n 'error': color === 'error',\n 'success': color === 'success',\n 'gradient': color === 'gradient',\n 'white': color === 'white',\n 'btn-outlined': outline,\n 'btn-default': effectiveState === 'default',\n 'btn-hover': effectiveState === 'hover',\n 'btn-pressed': effectiveState === 'pressed',\n 'btn-disabled': effectiveState === 'disabled'\n }\" [disabled]=\"isDisabled\" [matTooltip]=\"hasTooltip ? tooltip : null\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!hasTooltip\" (mouseenter)=\"onHover.emit($event)\" (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\" [style.gap.px]=\"computeGap()\"\n [matMenuTriggerFor]=\"menu\">\n\n <!-- Left Icon (optional) -->\n <ng-container *ngIf=\"leftIcon?.trim() as leftIconText\">\n <ng-container *ngIf=\"getSvgIconName(leftIcon) as svgIconName; else leftIconFontDropdown\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"left-icon\"></mat-icon>\n </ng-container>\n <ng-template #leftIconFontDropdown>\n <mat-icon [fontSet]=\"getLeftIconFontSet()\" class=\"left-icon\">\n {{ getLeftIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n\n <!-- Label -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\">\n {{ labelText || '' }}\n </span>\n\n <!-- Dropdown arrow icon -->\n <mat-icon class=\"right-icon\">arrow_drop_down</mat-icon>\n </button>\n</ng-template>\n\n<!-- Mat Menu kept outside conditional to avoid portal reattachment across toggles -->\n<mat-menu #menu=\"matMenu\" panelClass=\"custom-dropdown-menu\">\n <button mat-menu-item *ngFor=\"let opt of dropdownItems\" (click)=\"selectOption(opt)\" [ngClass]=\"effectiveFontClass\">\n {{ opt.label || opt }}\n </button>\n</mat-menu>\n\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+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\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=network_node\";.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}.material-icons-outlined{font-family:Material Icons Outlined;font-weight:400;font-style:normal;font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.mdc-button.btn{border-radius:8px;display:flex;align-items:center;cursor:pointer;border:none;transition:background .2s,border .2s,transform .1s;min-width:auto!important;gap:8px;height:auto!important}.mdc-button.btn-primary1{background-color:#5473e8;color:#fff}.mdc-button.btn-primary2{background-color:#37c1ce;color:#fff}.mdc-button.btn-secondary{background-color:#717793;color:#fff}.mdc-button.btn-destructive{background-color:#e854a4;color:#fff}.mdc-button.btn-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.btn-primary2:hover{background-color:#4bc7d3!important}.mdc-button.btn-primary2:active{background-color:#299da8!important}.mdc-button.btn-primary2:outlined{background-color:#fff;border-radius:4px;border:1px solid #37C1CE}.mdc-button.btn-primary1:hover{background-color:#6581ea!important}.mdc-button.btn-primary1:active{background-color:#1e46df!important}.mdc-button.btn-primary1:outlined{background-color:#fff;border-radius:4px;border:1px solid #5473E8}.mdc-button.btn-secondary:hover{background-color:#4b4f62!important}.mdc-button.btn-secondary:active{background-color:#252831!important}.mdc-button.btn-secondary:outlined{background-color:#fff;border-radius:4px;border:1px solid #383B4A}.mdc-button.btn-destructive:hover{background-color:#ef87bf!important}.mdc-button.btn-destructive:active{background-color:#e22a8e!important}.mdc-button.btn-destructive:outlined{background-color:#fff;border-radius:4px;border:1px solid #E854A4}.mdc-button.btn-gradient:hover{background:linear-gradient(0deg,#fafafd4d,#fafafd4d),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)!important}.mdc-button.btn-gradient:active{background:linear-gradient(0deg,#383b4a80,#383b4a80),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)!important}.mdc-button.btn-disabled{border:none!important;opacity:.4;cursor:not-allowed;pointer-events:none}.blue{background-color:#5473e8!important;color:#fff}.blue.btn-hover,.blue:hover{background-color:#6581ea!important}.blue.btn-pressed,.blue:active{background-color:#1e46df!important}.green{background-color:#37c1ce!important;color:#fff}.green.btn-hover,.green:hover{background-color:#4bc7d3!important}.green.btn-pressed,.green:active{background-color:#299da8!important}.grey{background-color:#717793!important;color:#fff}.grey.btn-hover,.grey:hover{background-color:#4b4f62!important}.grey.btn-pressed,.grey:active{background-color:#252831!important}.error{background-color:#e854a4!important;color:#fff!important}.error.btn-hover,.error:hover{background-color:#ef87bf!important;color:#fff!important}.error.btn-pressed,.error:active{background-color:#e22a8e!important;color:#fff!important}.success{background-color:#00ad83!important;color:#fff!important}.success.btn-hover,.success:hover{background-color:#009873!important;color:#fff!important}.success.btn-pressed,.success:active{background-color:#007f61!important;color:#fff!important}.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff!important}.gradient.btn-hover,.gradient:hover{opacity:.9}.gradient.btn-pressed,.gradient:active{opacity:.8}.white{background-color:#fff!important;color:#383b4a!important}.white.btn-hover,.white:hover{background-color:#ecedf1!important}.white.btn-pressed,.white:active{background-color:#dee0e6!important}.blue.btn-outlined{background-color:#fff!important;color:#5473e8!important;box-shadow:inset 0 0 0 1px #5473e8!important}.blue.btn-outlined.btn-hover,.blue.btn-outlined:hover{background-color:#6581ea!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.blue.btn-outlined.btn-pressed,.blue.btn-outlined:active{background-color:#1e46df!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.green.btn-outlined{background-color:#fff!important;color:#37c1ce!important;box-shadow:inset 0 0 0 1px #37c1ce!important}.green.btn-outlined.btn-hover,.green.btn-outlined:hover{background-color:#4bc7d3!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.green.btn-outlined.btn-pressed,.green.btn-outlined:active{background-color:#299da8!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.grey.btn-outlined{background-color:#fff!important;color:#383b4a!important;box-shadow:inset 0 0 0 1px #383b4a!important}.grey.btn-outlined.btn-hover,.grey.btn-outlined:hover{background-color:#4b4f62!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.grey.btn-outlined.btn-pressed,.grey.btn-outlined:active{background-color:#252831!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined{background-color:#fff!important;color:#e854a4!important;box-shadow:inset 0 0 0 1px #e854a4!important}.error.btn-outlined.btn-hover,.error.btn-outlined:hover{background-color:#ef87bf!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined.btn-pressed,.error.btn-outlined:active{background-color:#e22a8e!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined mat-icon,.error.btn-outlined .button-label{color:#e854a4!important}.error.btn-outlined:hover mat-icon,.error.btn-outlined:hover .button-label,.error.btn-outlined:active mat-icon,.error.btn-outlined:active .button-label{color:#fff!important}.success.btn-outlined{background-color:#fff!important;color:#00ad83!important;box-shadow:inset 0 0 0 1px #00ad83!important}.success.btn-outlined.btn-hover,.success.btn-outlined:hover{background-color:#009873!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.success.btn-outlined.btn-pressed,.success.btn-outlined:active{background-color:#007f61!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.success.btn-outlined mat-icon,.success.btn-outlined .button-label{color:#00ad83!important}.success.btn-outlined:hover mat-icon,.success.btn-outlined:hover .button-label,.success.btn-outlined:active mat-icon,.success.btn-outlined:active .button-label{color:#fff!important}.white.btn-outlined{background-color:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 1px #fff!important}.white.btn-outlined.btn-hover,.white.btn-outlined:hover,.white.btn-outlined.btn-pressed,.white.btn-outlined:active{background-color:transparent!important;color:#fff!important}.btn.custom-button>*+*{margin-left:8px}.two-icon-label{padding:4px 12px!important}button.two-icon-label .mat-icon{width:20px!important;height:20px!important}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format(\"woff2\")}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.left-icon{order:0}.right-icon{order:2}mat-icon.mat-icon{margin:0!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;vertical-align:middle}.left-icon,.right-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0}.left-icon ::ng-deep svg,.right-icon ::ng-deep svg{fill:currentColor!important}.white.btn-outlined .left-icon ::ng-deep svg,.white.btn-outlined .right-icon ::ng-deep svg{fill:currentColor!important}.size-header{font-size:20px;padding:4px 6px!important;gap:4px!important;border-radius:4px!important}.size-xs{font-size:12px;padding:8px 12px!important}.size-sm{font-size:14px;padding:8px 12px!important}.size-base{font-size:14px;padding:10px 16px!important}.size-l{font-size:16px;padding:12px 20px!important}.size-xl{font-size:16px;padding:14px 24px!important}.size-header .mat-icon{font-size:20px;height:20px;width:20px;display:inline-flex!important;align-items:center!important;justify-content:center!important}.size-header .mat-icon ::ng-deep svg{width:20px!important;height:20px!important}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px;height:16px;width:16px}.size-l .mat-icon,.size-xl .mat-icon{font-size:20px;height:20px;width:20px}.btn.size-header{gap:4px!important;padding:4px 6px!important}::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,::ng-deep .custom-dropdown-menu.mat-menu-panel{padding:0;border-radius:8px;box-shadow:0 2px 6px #00000026;border:1px solid rgba(0,0,0,.12)}::ng-deep .custom-dropdown-menu .mat-mdc-menu-content,::ng-deep .custom-dropdown-menu .mat-menu-content{padding:0}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item{font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.04px;height:56px;padding:16px 24px;color:var(--Gray-700, #414651);transition:background .2s ease-in-out}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,::ng-deep .custom-dropdown-menu .mat-menu-item:hover{background:#f7f9fe!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:focus,::ng-deep .custom-dropdown-menu .mat-menu-item:focus,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.cdk-keyboard-focused,::ng-deep .custom-dropdown-menu .mat-menu-item.cdk-keyboard-focused{background:#e5e9fc!important;outline:none}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:active,::ng-deep .custom-dropdown-menu .mat-menu-item:active{background:#f7f9fe!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true],::ng-deep .custom-dropdown-menu .mat-menu-item[aria-selected=true],::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted,::ng-deep .custom-dropdown-menu .mat-menu-item.mat-menu-item-highlighted{background:#f7f9fe!important;color:#5473e8!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true] .mat-mdc-menu-item-text,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true] span,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span{color:#5473e8!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item+.mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item+.mat-menu-item{border-top:1px solid #EAECEE}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #ffffff !important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content,::ng-deep .mat-menu-panel .mat-menu-content{background-color:#fff!important}::ng-deep .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item{color:var(--Gray-700, #414651)!important;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;--mat-menu-item-label-text-color: var(--Gray-700, #414651) !important;--mdc-list-list-item-label-text-color: var(--Gray-700, #414651) !important}::ng-deep .mat-mdc-menu-item .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item span{color:var(--Gray-700, #414651)!important;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}.cdk-overlay-pane{z-index:1000!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface,.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface,.cdk-overlay-pane .mat-menu-panel{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #fff !important}.mat-mdc-menu-panel,.mdc-menu-surface,.mat-menu-panel{--mdc-theme-surface: #ffffff !important;background-color:#fff!important}.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface{--mdc-menu-container-color: #fff !important}.cdk-overlay-pane .mat-menu-panel,.cdk-overlay-pane .mat-mdc-menu-content,.cdk-overlay-pane .mat-menu-content{background:#fff!important}button.icon-circle{width:auto!important;height:auto!important;border-radius:50%!important;aspect-ratio:1/1;display:inline-flex;align-items:center;vertical-align:middle;line-height:0!important;min-width:0!important;justify-content:center;padding:6px!important}.size-small.icon-circle{padding:4px!important}.size-medium.icon-circle{padding:8px!important}.size-large.icon-circle{padding:12px!important}.size-header.icon-circle{padding:4px!important}.size-header.icon-circle .mat-icon{width:10px;height:10px;font-size:10px}.size-xs.icon-circle{padding:4px!important}.size-xs.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-xs.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-sm.icon-circle{padding:10px!important;height:32px!important;width:32px!important}.size-sm.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-sm.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-base.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-l.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-xl.icon-circle{padding:14px!important}.size-xl.icon-circle .mat-icon{width:20px;height:20px;font-size:20px}.icon-xs{padding:4px!important}.mdc-button.blue{background-color:#5473e8;color:#fff}.mdc-button.blue:hover{background-color:#6581ea}.mdc-button.blue:active{background-color:#1e46df}.mdc-button.green{background-color:#37c1ce;color:#fff}.mdc-button.green:hover{background-color:#4bc7d3}.mdc-button.green:active{background-color:#299da8}.mdc-button.grey{background-color:#717793;color:#fff}.mdc-button.grey:hover{background-color:#4b4f62}.mdc-button.grey:active{background-color:#252831}.mdc-button.error{background-color:#e854a4;color:#fff!important}.mdc-button.error:hover{background-color:#ef87bf;color:#fff!important}.mdc-button.error:active{background-color:#e22a8e;color:#fff!important}.mdc-button.success{background-color:#00ad83;color:#fff!important}.mdc-button.success:hover{background-color:#009873;color:#fff!important}.mdc-button.success:active{background-color:#007f61;color:#fff!important}.mdc-button.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.gradient:hover{background:linear-gradient(0deg,#fafafd4d,#fafafd4d),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.gradient:active{background:linear-gradient(0deg,#383b4a80,#383b4a80),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.disabled,.mdc-button:disabled{opacity:.4;cursor:not-allowed!important;pointer-events:none}.mdc-button.blue-no-outline{background-color:#fff;color:#5473e8;border:1px solid #5473E8}.mdc-button.blue-no-outline:hover{background-color:#6581ea;color:#fff}.mdc-button.blue-no-outline:active{background-color:#1e46df;color:#fff}.mdc-button.white-colour-outline{background-color:transparent;color:#fff;border:1px solid #fff}.mdc-button.white-colour-outline:hover,.mdc-button.white-colour-outline:active{background-color:transparent;color:#fff}.mdc-button.green-no-outline{background-color:#fff;color:#37c1ce;border:1px solid #37C1CE}.mdc-button.green-no-outline:hover{background-color:#4bc7d3;color:#fff}.mdc-button.green-no-outline:active{background-color:#299da8;color:#fff}.mdc-button.grey-no-outline{background-color:#fff;color:#383b4a;border:1px solid #383B4A}.mdc-button.grey-no-outline:hover{background-color:#4b4f62;color:#fff}.mdc-button.grey-no-outline:active{background-color:#252831;color:#fff}.mdc-button.error-no-outline{background-color:#fff;color:#e854a4;border:1px solid #E854A4}.mdc-button.error-no-outline:hover{background-color:#ef87bf;color:#fff}.mdc-button.error-no-outline:active{background-color:#e22a8e;color:#fff}.mdc-button.blue-colour-outline{background-color:#fff;color:#5473e8;box-shadow:inset 0 0 0 1px #5473e8}.mdc-button.blue-colour-outline:hover{background-color:#6581ea;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.blue-colour-outline:active{background-color:#1e46df;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.green-colour-outline{background-color:#fff;color:#37c1ce;box-shadow:inset 0 0 0 1px #37c1ce}.mdc-button.green-colour-outline:hover{background-color:#4bc7d3;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.green-colour-outline:active{background-color:#299da8;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.grey-colour-outline{background-color:#fff;color:#383b4a;box-shadow:inset 0 0 0 1px #383b4a}.mdc-button.grey-colour-outline:hover{background-color:#4b4f62;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.grey-colour-outline:active{background-color:#252831;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline{background-color:#fff;color:#e854a4!important;box-shadow:inset 0 0 0 1px #e854a4}.mdc-button.error-colour-outline:hover{background-color:#ef87bf;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline:active{background-color:#e22a8e;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline mat-icon,.mdc-button.error-colour-outline .button-label{color:#e854a4!important}.mdc-button.error-colour-outline:hover mat-icon,.mdc-button.error-colour-outline:hover .button-label,.mdc-button.error-colour-outline:active mat-icon,.mdc-button.error-colour-outline:active .button-label{color:#fff!important}.mdc-button.success-colour-outline{background-color:#fff;color:#00ad83!important;box-shadow:inset 0 0 0 1px #00ad83}.mdc-button.success-colour-outline:hover{background-color:#009873;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.success-colour-outline:active{background-color:#007f61;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.success-colour-outline mat-icon,.mdc-button.success-colour-outline .button-label{color:#00ad83!important}.mdc-button.success-colour-outline:hover mat-icon,.mdc-button.success-colour-outline:hover .button-label,.mdc-button.success-colour-outline:active mat-icon,.mdc-button.success-colour-outline:active .button-label{color:#fff!important}::ng-deep .cdk-overlay-pane{border-radius:8px!important;box-shadow:0 2px 6px #00000026!important}::ng-deep .mat-mdc-menu-panel{padding:4px 0!important;background-color:#fff!important;min-width:180px!important;border-radius:8px!important;box-shadow:none!important}::ng-deep .mat-mdc-menu-item{font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.04px;color:var(--Gray-700, #414651);padding:12px 16px;border-radius:0!important;transition:background .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f7f9fe!important}::ng-deep .mat-mdc-menu-item:focus,::ng-deep .mat-mdc-menu-item.cdk-keyboard-focused{background-color:#e5e9fc!important;outline:none}::ng-deep .mat-mdc-menu-item[aria-selected=true],::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted{background-color:#f7f9fe!important;color:#5473e8!important}::ng-deep .mat-mdc-menu-item[aria-selected=true] .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item[aria-selected=true] span,::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span{color:#5473e8!important}.size-header .button-label{display:none!important}.size-header .mat-icon,.size-header .left-icon,.size-header .right-icon{display:inline-flex!important;visibility:visible!important;opacity:1!important}.size-header ::ng-deep .mdc-button__label{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px}::ng-deep .mat-mdc-button-touch-target{display:none!important}\n"] }]
|
|
489
493
|
}], ctorParameters: () => [{ type: i1.MatIconRegistry }], propDecorators: { state: [{
|
|
490
494
|
type: Input
|
|
491
495
|
}], disabled: [{
|
|
@@ -949,7 +953,7 @@ class InputComponent {
|
|
|
949
953
|
: event instanceof Date
|
|
950
954
|
? event
|
|
951
955
|
: new Date(event);
|
|
952
|
-
this.selectedDate = dateValue;
|
|
956
|
+
this.selectedDate = dateValue; // Default typography on host so inner content can inherit,
|
|
953
957
|
this.onChange(dateValue.toISOString().split("T")[0]);
|
|
954
958
|
this.onTouched();
|
|
955
959
|
// Emit the original event (could be Moment or Date) for parent component compatibility
|
|
@@ -1008,7 +1012,7 @@ class InputComponent {
|
|
|
1008
1012
|
useExisting: forwardRef(() => InputComponent),
|
|
1009
1013
|
multi: true
|
|
1010
1014
|
}
|
|
1011
|
-
], 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 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:8px!important;border-bottom-left-radius:8px!important}::ng-deep .al-input-size-large .mdc-notched-outline__trailing{border-top-right-radius:8px!important;border-bottom-right-radius:8px!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:11px!important}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:10px!important}::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:14px!important}::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:7px!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"] }] }); }
|
|
1015
|
+
], 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:8px!important;border-bottom-left-radius:8px!important}::ng-deep .al-input-size-large .mdc-notched-outline__trailing{border-top-right-radius:8px!important;border-bottom-right-radius:8px!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"] }] }); }
|
|
1012
1016
|
}
|
|
1013
1017
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputComponent, decorators: [{
|
|
1014
1018
|
type: Component,
|
|
@@ -1031,7 +1035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1031
1035
|
useExisting: forwardRef(() => InputComponent),
|
|
1032
1036
|
multi: true
|
|
1033
1037
|
}
|
|
1034
|
-
], template: "<!-- Standard floating label layout for all inputs including date picker -->\n<mat-form-field 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:8px!important;border-bottom-left-radius:8px!important}::ng-deep .al-input-size-large .mdc-notched-outline__trailing{border-top-right-radius:8px!important;border-bottom-right-radius:8px!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:11px!important}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:10px!important}::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:14px!important}::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:7px!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"] }]
|
|
1038
|
+
], 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:8px!important;border-bottom-left-radius:8px!important}::ng-deep .al-input-size-large .mdc-notched-outline__trailing{border-top-right-radius:8px!important;border-bottom-right-radius:8px!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"] }]
|
|
1035
1039
|
}], propDecorators: { labelText: [{
|
|
1036
1040
|
type: Input
|
|
1037
1041
|
}], label: [{
|
|
@@ -1478,7 +1482,7 @@ class CheckboxComponent {
|
|
|
1478
1482
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
1479
1483
|
multi: true
|
|
1480
1484
|
}
|
|
1481
|
-
], 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:140%;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"] }] }); }
|
|
1485
|
+
], 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"] }] }); }
|
|
1482
1486
|
}
|
|
1483
1487
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1484
1488
|
type: Component,
|
|
@@ -1487,7 +1491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1487
1491
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
1488
1492
|
multi: true
|
|
1489
1493
|
}
|
|
1490
|
-
], 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:140%;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"] }]
|
|
1494
|
+
], 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"] }]
|
|
1491
1495
|
}], propDecorators: { checked: [{
|
|
1492
1496
|
type: Input
|
|
1493
1497
|
}], disabled: [{
|
|
@@ -1560,7 +1564,9 @@ const TABLE_ICONS = {
|
|
|
1560
1564
|
};
|
|
1561
1565
|
const LEFT_AND_RIGHT_ICON_CONSTANTS = {
|
|
1562
1566
|
'subrole': `<svg xmlns="http://www.w3.org/2000/svg"width="14"height="14"viewBox="0 0 14 14"fill="none"> <path d="M2.33333 13.3333C1.68889 13.3333 1.13889 13.1056 0.683333 12.65C0.227778 12.1944 0 11.6444 0 11C0 10.3556 0.227778 9.80555 0.683333 9.35C1.13889 8.89444 1.68889 8.66667 2.33333 8.66667C2.53333 8.66667 2.72778 8.69167 2.91667 8.74167C3.10556 8.79167 3.28333 8.86111 3.45 8.95L6 6.4V4.56667C5.51111 4.42222 5.11111 4.14722 4.8 3.74167C4.48889 3.33611 4.33333 2.86667 4.33333 2.33333C4.33333 1.68889 4.56111 1.13889 5.01667 0.683333C5.47222 0.227778 6.02222 0 6.66667 0C7.31111 0 7.86111 0.227778 8.31667 0.683333C8.77222 1.13889 9 1.68889 9 2.33333C9 2.86667 8.84444 3.33611 8.53333 3.74167C8.22222 4.14722 7.82222 4.42222 7.33333 4.56667V6.4L9.9 8.95C10.0667 8.86111 10.2417 8.79167 10.425 8.74167C10.6083 8.69167 10.8 8.66667 11 8.66667C11.6444 8.66667 12.1944 8.89444 12.65 9.35C13.1056 9.80555 13.3333 10.3556 13.3333 11C13.3333 11.6444 13.1056 12.1944 12.65 12.65C12.1944 13.1056 11.6444 13.3333 11 13.3333C10.3556 13.3333 9.80555 13.1056 9.35 12.65C8.89444 12.1944 8.66667 11.6444 8.66667 11C8.66667 10.8 8.69167 10.6056 8.74167 10.4167C8.79167 10.2278 8.86111 10.05 8.95 9.88333L6.66667 7.6L4.38333 9.88333C4.47222 10.05 4.54167 10.2278 4.59167 10.4167C4.64167 10.6056 4.66667 10.8 4.66667 11C4.66667 11.6444 4.43889 12.1944 3.98333 12.65C3.52778 13.1056 2.97778 13.3333 2.33333 13.3333ZM11 12C11.2778 12 11.5139 11.9028 11.7083 11.7083C11.9028 11.5139 12 11.2778 12 11C12 10.7222 11.9028 10.4861 11.7083 10.2917C11.5139 10.0972 11.2778 10 11 10C10.7222 10 10.4861 10.0972 10.2917 10.2917C10.0972 10.4861 10 10.7222 10 11C10 11.2778 10.0972 11.5139 10.2917 11.7083C10.4861 11.9028 10.7222 12 11 12ZM6.66667 3.33333C6.94444 3.33333 7.18056 3.23611 7.375 3.04167C7.56944 2.84722 7.66667 2.61111 7.66667 2.33333C7.66667 2.05556 7.56944 1.81944 7.375 1.625C7.18056 1.43056 6.94444 1.33333 6.66667 1.33333C6.38889 1.33333 6.15278 1.43056 5.95833 1.625C5.76389 1.81944 5.66667 2.05556 5.66667 2.33333C5.66667 2.61111 5.76389 2.84722 5.95833 3.04167C6.15278 3.23611 6.38889 3.33333 6.66667 3.33333ZM2.33333 12C2.61111 12 2.84722 11.9028 3.04167 11.7083C3.23611 11.5139 3.33333 11.2778 3.33333 11C3.33333 10.7222 3.23611 10.4861 3.04167 10.2917C2.84722 10.0972 2.61111 10 2.33333 10C2.05556 10 1.81944 10.0972 1.625 10.2917C1.43056 10.4861 1.33333 10.7222 1.33333 11C1.33333 11.2778 1.43056 11.5139 1.625 11.7083C1.81944 11.9028 2.05556 12 2.33333 12Z"fill="white"/> </svg>`,
|
|
1563
|
-
'subrole_active': `<svg
|
|
1567
|
+
'subrole_active': `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1568
|
+
<path d="M15.5556 16.875C15.1042 16.875 14.6991 16.7448 14.3403 16.4844C13.9815 16.224 13.7326 15.8912 13.5938 15.4861H10C9.23611 15.4861 8.58218 15.2141 8.03819 14.6701C7.49421 14.1262 7.22222 13.4722 7.22222 12.7083C7.22222 11.9444 7.49421 11.2905 8.03819 10.7465C8.58218 10.2025 9.23611 9.93056 10 9.93056H11.3889C11.7708 9.93056 12.0978 9.79456 12.3698 9.52257C12.6418 9.25058 12.7778 8.92361 12.7778 8.54167C12.7778 8.15972 12.6418 7.83275 12.3698 7.56076C12.0978 7.28877 11.7708 7.15278 11.3889 7.15278H7.79514C7.64468 7.55787 7.39294 7.89063 7.03993 8.15104C6.68692 8.41146 6.28472 8.54167 5.83333 8.54167C5.25463 8.54167 4.76273 8.33912 4.35764 7.93403C3.95255 7.52894 3.75 7.03704 3.75 6.45833C3.75 5.87963 3.95255 5.38773 4.35764 4.98264C4.76273 4.57755 5.25463 4.375 5.83333 4.375C6.28472 4.375 6.68692 4.50521 7.03993 4.76563C7.39294 5.02604 7.64468 5.3588 7.79514 5.76389H11.3889C12.1528 5.76389 12.8067 6.03588 13.3507 6.57986C13.8947 7.12384 14.1667 7.77778 14.1667 8.54167C14.1667 9.30556 13.8947 9.95949 13.3507 10.5035C12.8067 11.0475 12.1528 11.3194 11.3889 11.3194H10C9.61806 11.3194 9.29109 11.4554 9.0191 11.7274C8.74711 11.9994 8.61111 12.3264 8.61111 12.7083C8.61111 13.0903 8.74711 13.4172 9.0191 13.6892C9.29109 13.9612 9.61806 14.0972 10 14.0972H13.5938C13.7442 13.6921 13.9959 13.3594 14.349 13.099C14.702 12.8385 15.1042 12.7083 15.5556 12.7083C16.1343 12.7083 16.6262 12.9109 17.0313 13.316C17.4363 13.7211 17.6389 14.213 17.6389 14.7917C17.6389 15.3704 17.4363 15.8623 17.0313 16.2674C16.6262 16.6725 16.1343 16.875 15.5556 16.875ZM5.83333 7.15278C6.03009 7.15278 6.19502 7.08623 6.32813 6.95313C6.46123 6.82002 6.52778 6.65509 6.52778 6.45833C6.52778 6.26157 6.46123 6.09664 6.32813 5.96354C6.19502 5.83044 6.03009 5.76389 5.83333 5.76389C5.63657 5.76389 5.47164 5.83044 5.33854 5.96354C5.20544 6.09664 5.13889 6.26157 5.13889 6.45833C5.13889 6.65509 5.20544 6.82002 5.33854 6.95313C5.47164 7.08623 5.63657 7.15278 5.83333 7.15278Z" fill="#717793"/>
|
|
1569
|
+
</svg>`,
|
|
1564
1570
|
'hide_section': `<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"viewBox="0 0 16 16"fill="none"> <path d="M8 3.98337C10.5267 3.98337 12.78 5.40337 13.88 7.65003C13.4867 8.46337 12.9333 9.16337 12.2733 9.73003L13.2133 10.67C14.14 9.85003 14.8733 8.82337 15.3333 7.65003C14.18 4.72337 11.3333 2.65003 8 2.65003C7.15333 2.65003 6.34 2.78337 5.57333 3.03003L6.67333 4.13003C7.10667 4.04337 7.54667 3.98337 8 3.98337ZM7.28667 4.74337L8.66667 6.12337C9.04667 6.29003 9.35333 6.5967 9.52 6.9767L10.9 8.3567C10.9533 8.13003 10.9933 7.89003 10.9933 7.64337C11 5.99003 9.65333 4.65003 8 4.65003C7.75333 4.65003 7.52 4.68337 7.28667 4.74337ZM1.34 2.56337L3.12667 4.35003C2.04 5.20337 1.18 6.3367 0.666667 7.65003C1.82 10.5767 4.66667 12.65 8 12.65C9.01333 12.65 9.98667 12.4567 10.88 12.1034L13.16 14.3834L14.1 13.4434L2.28 1.6167L1.34 2.56337ZM6.34 7.56337L8.08 9.30337C8.05333 9.31003 8.02667 9.3167 8 9.3167C7.08 9.3167 6.33333 8.57003 6.33333 7.65003C6.33333 7.6167 6.34 7.5967 6.34 7.56337ZM4.07333 5.2967L5.24 6.46337C5.08667 6.83003 5 7.23003 5 7.65003C5 9.30337 6.34667 10.65 8 10.65C8.42 10.65 8.82 10.5634 9.18 10.41L9.83333 11.0634C9.24667 11.2234 8.63333 11.3167 8 11.3167C5.47333 11.3167 3.22 9.8967 2.12 7.65003C2.58667 6.6967 3.26667 5.91003 4.07333 5.2967Z"fill="#717793"/> </svg>`,
|
|
1565
1571
|
'unhide_section': `<svg xmlns="http://www.w3.org/2000/svg"width="16"height="11"viewBox="0 0 16 11"fill="none"> <path d="M7.63889 1.38889C10.2708 1.38889 12.6181 2.86806 13.7639 5.20833C12.6181 7.54861 10.2708 9.02778 7.63889 9.02778C5.00695 9.02778 2.65972 7.54861 1.51389 5.20833C2.65972 2.86806 5.00695 1.38889 7.63889 1.38889ZM7.63889 0C4.16667 0 1.20139 2.15972 0 5.20833C1.20139 8.25695 4.16667 10.4167 7.63889 10.4167C11.1111 10.4167 14.0764 8.25695 15.2778 5.20833C14.0764 2.15972 11.1111 0 7.63889 0ZM7.63889 3.47222C8.59722 3.47222 9.375 4.25 9.375 5.20833C9.375 6.16667 8.59722 6.94445 7.63889 6.94445C6.68056 6.94445 5.90278 6.16667 5.90278 5.20833C5.90278 4.25 6.68056 3.47222 7.63889 3.47222ZM7.63889 2.08333C5.91667 2.08333 4.51389 3.48611 4.51389 5.20833C4.51389 6.93056 5.91667 8.33333 7.63889 8.33333C9.36111 8.33333 10.7639 6.93056 10.7639 5.20833C10.7639 3.48611 9.36111 2.08333 7.63889 2.08333Z"fill="#717793"/> </svg>`,
|
|
1566
1572
|
'edit_icon': `<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"viewBox="0 0 16 16"fill="none"> <path d="M9.37248 6.01333L9.98581 6.62667L3.94581 12.6667H3.33248V12.0533L9.37248 6.01333ZM11.7725 2C11.6058 2 11.4325 2.06667 11.3058 2.19333L10.0858 3.41333L12.5858 5.91333L13.8058 4.69333C14.0658 4.43333 14.0658 4.01333 13.8058 3.75333L12.2458 2.19333C12.1125 2.06 11.9458 2 11.7725 2ZM9.37248 4.12667L1.99915 11.5V14H4.49915L11.8725 6.62667L9.37248 4.12667Z"fill="#717793"/> </svg>`,
|
|
@@ -1573,29 +1579,25 @@ const LEFT_AND_RIGHT_ICON_CONSTANTS = {
|
|
|
1573
1579
|
'subrole-icon-grey': `<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"viewBox="0 0 16 16"fill="none"> <path d="M3.66659 14.6666C3.02214 14.6666 2.47214 14.4389 2.01659 13.9833C1.56103 13.5278 1.33325 12.9778 1.33325 12.3333C1.33325 11.6889 1.56103 11.1389 2.01659 10.6833C2.47214 10.2278 3.02214 9.99998 3.66659 9.99998C3.86659 9.99998 4.06103 10.025 4.24992 10.075C4.43881 10.125 4.61659 10.1944 4.78325 10.2833L7.33325 7.73331V5.89998C6.84436 5.75554 6.44436 5.48054 6.13325 5.07498C5.82214 4.66942 5.66658 4.19998 5.66658 3.66665C5.66658 3.0222 5.89436 2.4722 6.34992 2.01665C6.80547 1.56109 7.35547 1.33331 7.99992 1.33331C8.64436 1.33331 9.19436 1.56109 9.64992 2.01665C10.1055 2.4722 10.3333 3.0222 10.3333 3.66665C10.3333 4.19998 10.1777 4.66942 9.86658 5.07498C9.55547 5.48054 9.15547 5.75554 8.66658 5.89998V7.73331L11.2333 10.2833C11.3999 10.1944 11.5749 10.125 11.7583 10.075C11.9416 10.025 12.1333 9.99998 12.3333 9.99998C12.9777 9.99998 13.5277 10.2278 13.9833 10.6833C14.4388 11.1389 14.6666 11.6889 14.6666 12.3333C14.6666 12.9778 14.4388 13.5278 13.9833 13.9833C13.5277 14.4389 12.9777 14.6666 12.3333 14.6666C11.6888 14.6666 11.1388 14.4389 10.6833 13.9833C10.2277 13.5278 9.99992 12.9778 9.99992 12.3333C9.99992 12.1333 10.0249 11.9389 10.0749 11.75C10.1249 11.5611 10.1944 11.3833 10.2833 11.2166L7.99992 8.93331L5.71659 11.2166C5.80547 11.3833 5.87492 11.5611 5.92492 11.75C5.97492 11.9389 5.99992 12.1333 5.99992 12.3333C5.99992 12.9778 5.77214 13.5278 5.31659 13.9833C4.86103 14.4389 4.31103 14.6666 3.66659 14.6666ZM12.3333 13.3333C12.611 13.3333 12.8471 13.2361 13.0416 13.0416C13.236 12.8472 13.3333 12.6111 13.3333 12.3333C13.3333 12.0555 13.236 11.8194 13.0416 11.625C12.8471 11.4305 12.611 11.3333 12.3333 11.3333C12.0555 11.3333 11.8194 11.4305 11.6249 11.625C11.4305 11.8194 11.3333 12.0555 11.3333 12.3333C11.3333 12.6111 11.4305 12.8472 11.6249 13.0416C11.8194 13.2361 12.0555 13.3333 12.3333 13.3333ZM7.99992 4.66665C8.2777 4.66665 8.51381 4.56942 8.70825 4.37498C8.9027 4.18054 8.99992 3.94442 8.99992 3.66665C8.99992 3.38887 8.9027 3.15276 8.70825 2.95831C8.51381 2.76387 8.2777 2.66665 7.99992 2.66665C7.72214 2.66665 7.48603 2.76387 7.29158 2.95831C7.09714 3.15276 6.99992 3.38887 6.99992 3.66665C6.99992 3.94442 7.09714 4.18054 7.29158 4.37498C7.48603 4.56942 7.72214 4.66665 7.99992 4.66665ZM3.66659 13.3333C3.94436 13.3333 4.18047 13.2361 4.37492 13.0416C4.56936 12.8472 4.66658 12.6111 4.66658 12.3333C4.66658 12.0555 4.56936 11.8194 4.37492 11.625C4.18047 11.4305 3.94436 11.3333 3.66659 11.3333C3.38881 11.3333 3.1527 11.4305 2.95825 11.625C2.76381 11.8194 2.66659 12.0555 2.66659 12.3333C2.66659 12.6111 2.76381 12.8472 2.95825 13.0416C3.1527 13.2361 3.38881 13.3333 3.66659 13.3333Z"fill="#717793"/> </svg>`
|
|
1574
1580
|
};
|
|
1575
1581
|
const Candidate_Section_ICON = {
|
|
1576
|
-
'candidate_name': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
'
|
|
1580
|
-
<path d="M13.6624 1.96216V3.21216H15.8893L13.7799 5.34091C13.026 4.77152 12.1072 4.46306 11.1624 4.46216C9.99365 4.46216 8.9024 4.92466 8.07615 5.75153C7.66774 6.15502 7.34349 6.63557 7.1222 7.16533C6.90092 7.69508 6.787 8.26349 6.78706 8.8376C6.78712 9.41171 6.90115 9.9801 7.12254 10.5098C7.34393 11.0395 7.66828 11.52 8.07678 11.9234C8.62053 12.4672 9.26803 12.8578 9.99053 13.0559C10.0618 13.0015 10.1418 12.9447 10.2055 12.8809C10.4675 12.6145 10.6557 12.2845 10.7518 11.9234C10.0713 11.8397 9.43854 11.53 8.9549 11.044C8.3649 10.4547 8.0374 9.67216 8.0374 8.83716C8.0374 8.00216 8.36553 7.22091 8.95615 6.63091C9.5449 6.03903 10.3274 5.71216 11.1624 5.71216C11.9974 5.71216 12.7793 6.04028 13.3687 6.63091C13.6602 6.91957 13.8915 7.26322 14.0492 7.64194C14.2069 8.02066 14.2879 8.42691 14.2874 8.83716C14.2874 9.37778 14.1343 9.88091 13.8774 10.3409C13.9374 10.6634 13.9749 11.0022 13.9749 11.3372C13.9749 11.6492 13.9489 11.9555 13.8968 12.2559C14.0218 12.154 14.133 12.0384 14.2487 11.9234C15.0749 11.0959 15.5374 10.0059 15.5374 8.83716C15.5374 7.88091 15.2224 6.97216 14.6587 6.21966L16.7874 4.11091V6.33716H18.0374V1.96216H13.6624ZM9.83428 7.11841C9.76303 7.17278 9.68303 7.22966 9.61928 7.29341C9.34928 7.56466 9.17303 7.89341 9.07303 8.25153C9.75428 8.33903 10.3762 8.63653 10.8699 9.13028C11.4605 9.71966 11.7887 10.5022 11.7887 11.3365C11.7887 12.1709 11.4605 12.9528 10.8699 13.5428C10.2799 14.1353 9.4974 14.4622 8.6624 14.4622C7.8274 14.4622 7.04553 14.134 6.45615 13.5434C6.16437 13.255 5.93287 12.9113 5.77514 12.5326C5.61741 12.1538 5.53659 11.7475 5.5374 11.3372C5.5374 10.7965 5.69053 10.2934 5.9474 9.83341C5.88536 9.50488 5.85273 9.17148 5.8499 8.83716C5.8499 8.52549 5.87594 8.21924 5.92803 7.91841C5.80303 8.02028 5.6924 8.13591 5.57615 8.25153C4.75115 9.07716 4.2874 10.1684 4.2874 11.3372C4.2874 12.2934 4.6024 13.2022 5.16615 13.9547L4.1124 15.009L2.8624 13.759L1.9624 14.6378L3.2124 15.8878L1.9624 17.1378L2.8624 18.0378L4.1124 16.7878L5.3624 18.0378L6.24053 17.1378L4.99053 15.8878L6.04553 14.834C6.79871 15.4043 7.71769 15.7127 8.6624 15.7122C9.83115 15.7122 10.9224 15.2497 11.7487 14.4228C12.5749 13.5972 13.0374 12.5059 13.0374 11.3372C13.0374 10.1684 12.5749 9.07841 11.748 8.25091C11.2043 7.70716 10.5568 7.31653 9.83428 7.11841Z" fill="#37C1CE"/>
|
|
1581
|
-
</svg>`,
|
|
1582
|
-
'candidate_phonenumber': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1583
|
-
<path d="M5.45 4.16667C5.5 4.90833 5.625 5.63333 5.825 6.325L4.825 7.325C4.48333 6.325 4.26667 5.26667 4.19167 4.16667H5.45ZM13.6667 14.1833C14.375 14.3833 15.1 14.5083 15.8333 14.5583V15.8C14.7333 15.725 13.675 15.5083 12.6667 15.175L13.6667 14.1833ZM6.25 2.5H3.33333C2.875 2.5 2.5 2.875 2.5 3.33333C2.5 11.1583 8.84167 17.5 16.6667 17.5C17.125 17.5 17.5 17.125 17.5 16.6667V13.7583C17.5 13.3 17.125 12.925 16.6667 12.925C15.6333 12.925 14.625 12.7583 13.6917 12.45C13.6083 12.4167 13.5167 12.4083 13.4333 12.4083C13.2167 12.4083 13.0083 12.4917 12.8417 12.65L11.0083 14.4833C8.65 13.275 6.71667 11.35 5.51667 8.99167L7.35 7.15833C7.58333 6.925 7.65 6.6 7.55833 6.30833C7.25 5.375 7.08333 4.375 7.08333 3.33333C7.08333 2.875 6.70833 2.5 6.25 2.5Z" fill="#37C1CE"/>
|
|
1584
|
-
</svg>`,
|
|
1585
|
-
'candidate_email': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1586
|
-
<path d="M18.3337 5.00004C18.3337 4.08337 17.5837 3.33337 16.667 3.33337H3.33366C2.41699 3.33337 1.66699 4.08337 1.66699 5.00004V15C1.66699 15.9167 2.41699 16.6667 3.33366 16.6667H16.667C17.5837 16.6667 18.3337 15.9167 18.3337 15V5.00004ZM16.667 5.00004L10.0003 9.16671L3.33366 5.00004H16.667ZM16.667 15H3.33366V6.66671L10.0003 10.8334L16.667 6.66671V15Z" fill="#37C1CE"/>
|
|
1587
|
-
</svg>`,
|
|
1582
|
+
'candidate_name': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10.0002 5.00004C10.9168 5.00004 11.6668 5.75004 11.6668 6.66671C11.6668 7.58337 10.9168 8.33337 10.0002 8.33337C9.0835 8.33337 8.3335 7.58337 8.3335 6.66671C8.3335 5.75004 9.0835 5.00004 10.0002 5.00004ZM10.0002 13.3334C12.2502 13.3334 14.8335 14.4084 15.0002 15H5.00016C5.19183 14.4 7.7585 13.3334 10.0002 13.3334ZM10.0002 3.33337C8.1585 3.33337 6.66683 4.82504 6.66683 6.66671C6.66683 8.50837 8.1585 10 10.0002 10C11.8418 10 13.3335 8.50837 13.3335 6.66671C13.3335 4.82504 11.8418 3.33337 10.0002 3.33337ZM10.0002 11.6667C7.77516 11.6667 3.3335 12.7834 3.3335 15V16.6667H16.6668V15C16.6668 12.7834 12.2252 11.6667 10.0002 11.6667Z" fill="#37C1CE"/></svg>`,
|
|
1583
|
+
'candidate_gender': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M13.6624 1.96216V3.21216H15.8893L13.7799 5.34091C13.026 4.77152 12.1072 4.46306 11.1624 4.46216C9.99365 4.46216 8.9024 4.92466 8.07615 5.75153C7.66774 6.15502 7.34349 6.63557 7.1222 7.16533C6.90092 7.69508 6.787 8.26349 6.78706 8.8376C6.78712 9.41171 6.90115 9.9801 7.12254 10.5098C7.34393 11.0395 7.66828 11.52 8.07678 11.9234C8.62053 12.4672 9.26803 12.8578 9.99053 13.0559C10.0618 13.0015 10.1418 12.9447 10.2055 12.8809C10.4675 12.6145 10.6557 12.2845 10.7518 11.9234C10.0713 11.8397 9.43854 11.53 8.9549 11.044C8.3649 10.4547 8.0374 9.67216 8.0374 8.83716C8.0374 8.00216 8.36553 7.22091 8.95615 6.63091C9.5449 6.03903 10.3274 5.71216 11.1624 5.71216C11.9974 5.71216 12.7793 6.04028 13.3687 6.63091C13.6602 6.91957 13.8915 7.26322 14.0492 7.64194C14.2069 8.02066 14.2879 8.42691 14.2874 8.83716C14.2874 9.37778 14.1343 9.88091 13.8774 10.3409C13.9374 10.6634 13.9749 11.0022 13.9749 11.3372C13.9749 11.6492 13.9489 11.9555 13.8968 12.2559C14.0218 12.154 14.133 12.0384 14.2487 11.9234C15.0749 11.0959 15.5374 10.0059 15.5374 8.83716C15.5374 7.88091 15.2224 6.97216 14.6587 6.21966L16.7874 4.11091V6.33716H18.0374V1.96216H13.6624ZM9.83428 7.11841C9.76303 7.17278 9.68303 7.22966 9.61928 7.29341C9.34928 7.56466 9.17303 7.89341 9.07303 8.25153C9.75428 8.33903 10.3762 8.63653 10.8699 9.13028C11.4605 9.71966 11.7887 10.5022 11.7887 11.3365C11.7887 12.1709 11.4605 12.9528 10.8699 13.5428C10.2799 14.1353 9.4974 14.4622 8.6624 14.4622C7.8274 14.4622 7.04553 14.134 6.45615 13.5434C6.16437 13.255 5.93287 12.9113 5.77514 12.5326C5.61741 12.1538 5.53659 11.7475 5.5374 11.3372C5.5374 10.7965 5.69053 10.2934 5.9474 9.83341C5.88536 9.50488 5.85273 9.17148 5.8499 8.83716C5.8499 8.52549 5.87594 8.21924 5.92803 7.91841C5.80303 8.02028 5.6924 8.13591 5.57615 8.25153C4.75115 9.07716 4.2874 10.1684 4.2874 11.3372C4.2874 12.2934 4.6024 13.2022 5.16615 13.9547L4.1124 15.009L2.8624 13.759L1.9624 14.6378L3.2124 15.8878L1.9624 17.1378L2.8624 18.0378L4.1124 16.7878L5.3624 18.0378L6.24053 17.1378L4.99053 15.8878L6.04553 14.834C6.79871 15.4043 7.71769 15.7127 8.6624 15.7122C9.83115 15.7122 10.9224 15.2497 11.7487 14.4228C12.5749 13.5972 13.0374 12.5059 13.0374 11.3372C13.0374 10.1684 12.5749 9.07841 11.748 8.25091C11.2043 7.70716 10.5568 7.31653 9.83428 7.11841Z" fill="#37C1CE"/></svg>`,
|
|
1584
|
+
'candidate_phonenumber': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5.45 4.16667C5.5 4.90833 5.625 5.63333 5.825 6.325L4.825 7.325C4.48333 6.325 4.26667 5.26667 4.19167 4.16667H5.45ZM13.6667 14.1833C14.375 14.3833 15.1 14.5083 15.8333 14.5583V15.8C14.7333 15.725 13.675 15.5083 12.6667 15.175L13.6667 14.1833ZM6.25 2.5H3.33333C2.875 2.5 2.5 2.875 2.5 3.33333C2.5 11.1583 8.84167 17.5 16.6667 17.5C17.125 17.5 17.5 17.125 17.5 16.6667V13.7583C17.5 13.3 17.125 12.925 16.6667 12.925C15.6333 12.925 14.625 12.7583 13.6917 12.45C13.6083 12.4167 13.5167 12.4083 13.4333 12.4083C13.2167 12.4083 13.0083 12.4917 12.8417 12.65L11.0083 14.4833C8.65 13.275 6.71667 11.35 5.51667 8.99167L7.35 7.15833C7.58333 6.925 7.65 6.6 7.55833 6.30833C7.25 5.375 7.08333 4.375 7.08333 3.33333C7.08333 2.875 6.70833 2.5 6.25 2.5Z" fill="#37C1CE"/></svg>`,
|
|
1585
|
+
'candidate_email': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M18.3337 5.00004C18.3337 4.08337 17.5837 3.33337 16.667 3.33337H3.33366C2.41699 3.33337 1.66699 4.08337 1.66699 5.00004V15C1.66699 15.9167 2.41699 16.6667 3.33366 16.6667H16.667C17.5837 16.6667 18.3337 15.9167 18.3337 15V5.00004ZM16.667 5.00004L10.0003 9.16671L3.33366 5.00004H16.667ZM16.667 15H3.33366V6.66671L10.0003 10.8334L16.667 6.66671V15Z" fill="#37C1CE"/></svg>`,
|
|
1588
1586
|
'candidate_linkedin': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1589
1587
|
<path d="M4.15243 5.9975C5.15943 5.9975 5.97577 5.18116 5.97577 4.17416C5.97577 3.16716 5.15943 2.35083 4.15243 2.35083C3.14544 2.35083 2.3291 3.16716 2.3291 4.17416C2.3291 5.18116 3.14544 5.9975 4.15243 5.9975Z" fill="#37C1CE"/>
|
|
1590
1588
|
<path d="M7.69744 7.37915V17.495H10.8383V12.4925C10.8383 11.1725 11.0866 9.89415 12.7233 9.89415C14.3374 9.89415 14.3574 11.4033 14.3574 12.5758V17.4958H17.4999V11.9483C17.4999 9.22332 16.9133 7.12915 13.7283 7.12915C12.1991 7.12915 11.1741 7.96832 10.7549 8.76248H10.7124V7.37915H7.69744ZM2.5791 7.37915H5.72493V17.495H2.5791V7.37915Z" fill="#37C1CE"/>
|
|
1591
1589
|
</svg>`,
|
|
1592
|
-
'candidate_address': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"
|
|
1593
|
-
'candidate_experience': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
</svg>`,
|
|
1590
|
+
'candidate_address': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M9.99984 1.66663C6.77484 1.66663 4.1665 4.27496 4.1665 7.49996C4.1665 11.875 9.99984 18.3333 9.99984 18.3333C9.99984 18.3333 15.8332 11.875 15.8332 7.49996C15.8332 4.27496 13.2248 1.66663 9.99984 1.66663ZM5.83317 7.49996C5.83317 5.19996 7.69984 3.33329 9.99984 3.33329C12.2998 3.33329 14.1665 5.19996 14.1665 7.49996C14.1665 9.89996 11.7665 13.4916 9.99984 15.7333C8.2665 13.5083 5.83317 9.87496 5.83317 7.49996Z" fill="#37C1CE"/><path d="M9.99984 9.58329C11.1504 9.58329 12.0832 8.65055 12.0832 7.49996C12.0832 6.34937 11.1504 5.41663 9.99984 5.41663C8.84924 5.41663 7.9165 6.34937 7.9165 7.49996C7.9165 8.65055 8.84924 9.58329 9.99984 9.58329Z" fill="#37C1CE"/></svg>`,
|
|
1591
|
+
'candidate_experience': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M9.9915 1.66663C5.3915 1.66663 1.6665 5.39996 1.6665 9.99996C1.6665 14.6 5.3915 18.3333 9.9915 18.3333C14.5998 18.3333 18.3332 14.6 18.3332 9.99996C18.3332 5.39996 14.5998 1.66663 9.9915 1.66663ZM9.99984 16.6666C6.3165 16.6666 3.33317 13.6833 3.33317 9.99996C3.33317 6.31663 6.3165 3.33329 9.99984 3.33329C13.6832 3.33329 16.6665 6.31663 16.6665 9.99996C16.6665 13.6833 13.6832 16.6666 9.99984 16.6666ZM10.4165 5.83329H9.1665V10.8333L13.5415 13.4583L14.1665 12.4333L10.4165 10.2083V5.83329Z" fill="#37C1CE"/></svg>`,
|
|
1592
|
+
'candidate_most_recent': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M11.6665 5.41671V3.75004H8.33317V5.41671H11.6665ZM3.33317 7.08337V16.25H16.6665V7.08337H3.33317ZM16.6665 5.41671C17.5915 5.41671 18.3332 6.15837 18.3332 7.08337V16.25C18.3332 17.175 17.5915 17.9167 16.6665 17.9167H3.33317C2.40817 17.9167 1.6665 17.175 1.6665 16.25L1.67484 7.08337C1.67484 6.15837 2.40817 5.41671 3.33317 5.41671H6.6665V3.75004C6.6665 2.82504 7.40817 2.08337 8.33317 2.08337H11.6665C12.5915 2.08337 13.3332 2.82504 13.3332 3.75004V5.41671H16.6665Z" fill="#37C1CE"/></svg>`,
|
|
1593
|
+
};
|
|
1594
|
+
const NewResume_Header_Component_ICON = {
|
|
1595
|
+
'add-right_icon_section': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M11.6665 5.41665V3.74998H8.33317V5.41665H11.6665ZM3.33317 7.08331V16.25H16.6665V7.08331H3.33317ZM16.6665 5.41665C17.5915 5.41665 18.3332 6.15831 18.3332 7.08331V16.25C18.3332 17.175 17.5915 17.9166 16.6665 17.9166H3.33317C2.40817 17.9166 1.6665 17.175 1.6665 16.25L1.67484 7.08331C1.67484 6.15831 2.40817 5.41665 3.33317 5.41665H6.6665V3.74998C6.6665 2.82498 7.40817 2.08331 8.33317 2.08331H11.6665C12.5915 2.08331 13.3332 2.82498 13.3332 3.74998V5.41665H16.6665Z"fill="white"/> </svg>`,
|
|
1596
|
+
'add_left-icon_section': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M15.8332 10.8334H10.8332V15.8334H9.1665V10.8334H4.1665V9.16669H9.1665V4.16669H10.8332V9.16669H15.8332V10.8334Z"fill="white"/> </svg>`,
|
|
1597
|
+
'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>`,
|
|
1598
|
+
'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>`,
|
|
1599
|
+
'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>`,
|
|
1600
|
+
'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>`
|
|
1599
1601
|
};
|
|
1600
1602
|
/**
|
|
1601
1603
|
* Gets an icon from Candidate_Section_ICON and converts it to a data URL format
|
|
@@ -1695,6 +1697,16 @@ class NewResumeHeaderComponent {
|
|
|
1695
1697
|
this.iconRegistry.addSvgIconLiteral('visibility_off', this.sanitizer.bypassSecurityTrustHtml(VISIBILITY_OFF_ICON_SVG));
|
|
1696
1698
|
// Register edit icon from image-utils
|
|
1697
1699
|
this.iconRegistry.addSvgIconLiteral('edit_icon', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['edit_icon']));
|
|
1700
|
+
// Register add left and right icons from image-utils
|
|
1701
|
+
this.iconRegistry.addSvgIconLiteral('add_left-icon_section', this.sanitizer.bypassSecurityTrustHtml(NewResume_Header_Component_ICON['add_left-icon_section']));
|
|
1702
|
+
this.iconRegistry.addSvgIconLiteral('add-right_icon_section', this.sanitizer.bypassSecurityTrustHtml(NewResume_Header_Component_ICON['add-right_icon_section']));
|
|
1703
|
+
// Register font_case_icon from image-utils
|
|
1704
|
+
this.iconRegistry.addSvgIconLiteral('font_case_icon', this.sanitizer.bypassSecurityTrustHtml(NewResume_Header_Component_ICON['font_case_icon']));
|
|
1705
|
+
this.iconRegistry.addSvgIconLiteral('retry_AI_icon', this.sanitizer.bypassSecurityTrustHtml(NewResume_Header_Component_ICON['retry_AI_icon']));
|
|
1706
|
+
// Register ordering_icon from image-utils
|
|
1707
|
+
this.iconRegistry.addSvgIconLiteral('ordering_icon', this.sanitizer.bypassSecurityTrustHtml(NewResume_Header_Component_ICON['ordering_icon']));
|
|
1708
|
+
// Register collapse_icon from image-utils
|
|
1709
|
+
this.iconRegistry.addSvgIconLiteral('collapse_icon', this.sanitizer.bypassSecurityTrustHtml(NewResume_Header_Component_ICON['collapse_icon']));
|
|
1698
1710
|
if (!iconsRegistered$3) {
|
|
1699
1711
|
iconsRegistered$3 = true;
|
|
1700
1712
|
console.log('Visibility icons registered successfully');
|
|
@@ -1741,6 +1753,70 @@ class NewResumeHeaderComponent {
|
|
|
1741
1753
|
this.headerCheckboxChecked = checked;
|
|
1742
1754
|
this.headerCheckboxChange.emit(checked);
|
|
1743
1755
|
}
|
|
1756
|
+
/**
|
|
1757
|
+
* Resolves the left and right icon names for a button based on its configuration.
|
|
1758
|
+
* This centralizes all icon mapping logic, making it easier to maintain.
|
|
1759
|
+
*
|
|
1760
|
+
* @param btn - The HeaderButton configuration
|
|
1761
|
+
* @returns An object with leftIcon and rightIcon properties
|
|
1762
|
+
*/
|
|
1763
|
+
getButtonIcons(btn) {
|
|
1764
|
+
// Check if this is an "add" button that should use special icons
|
|
1765
|
+
const isAddButton = btn.leftIcon === 'add' || btn.dataTestId === 'add-education-button';
|
|
1766
|
+
if (isAddButton) {
|
|
1767
|
+
return {
|
|
1768
|
+
leftIcon: 'add_left-icon_section',
|
|
1769
|
+
rightIcon: 'add-right_icon_section'
|
|
1770
|
+
};
|
|
1771
|
+
}
|
|
1772
|
+
// Check if this is a "menu" button - keep the menu icon as is
|
|
1773
|
+
if (btn.leftIcon === 'font_case_icon') {
|
|
1774
|
+
return {
|
|
1775
|
+
leftIcon: 'font_case_icon',
|
|
1776
|
+
rightIcon: btn.rightIcon
|
|
1777
|
+
};
|
|
1778
|
+
}
|
|
1779
|
+
// Return the button's original icon configuration
|
|
1780
|
+
return {
|
|
1781
|
+
leftIcon: btn.leftIcon,
|
|
1782
|
+
rightIcon: btn.rightIcon
|
|
1783
|
+
};
|
|
1784
|
+
}
|
|
1785
|
+
/**
|
|
1786
|
+
* Gets the tooltip text for a button based on its configuration.
|
|
1787
|
+
* Tooltips follow title case (e.g., "Menu", "Add Section").
|
|
1788
|
+
*
|
|
1789
|
+
* @param btn - The HeaderButton configuration
|
|
1790
|
+
* @returns The tooltip text or undefined
|
|
1791
|
+
*/
|
|
1792
|
+
getButtonTooltip(btn) {
|
|
1793
|
+
// Check if this is an "add" button that should have a specific tooltip
|
|
1794
|
+
const isAddButton = btn.leftIcon === 'add' || btn.dataTestId === 'add-education-button';
|
|
1795
|
+
if (isAddButton) {
|
|
1796
|
+
return 'Add Section';
|
|
1797
|
+
}
|
|
1798
|
+
// Check if this is a "font_case_icon" button
|
|
1799
|
+
if (btn.leftIcon === 'font_case_icon') {
|
|
1800
|
+
return 'Font Case';
|
|
1801
|
+
}
|
|
1802
|
+
// Check if this is a "retry_AI_icon" button
|
|
1803
|
+
if (btn.leftIcon === 'retry_AI_icon' || btn.dataTestId === 'refresh-button') {
|
|
1804
|
+
return 'Retry initial Extraction';
|
|
1805
|
+
}
|
|
1806
|
+
// Check if this is a "collapse_icon" button
|
|
1807
|
+
if (btn.leftIcon === 'collapse_icon' || btn.dataTestId === 'collapse-button') {
|
|
1808
|
+
return 'Collapse Description';
|
|
1809
|
+
}
|
|
1810
|
+
// Check if this is an "ordering_icon" button
|
|
1811
|
+
if (btn.leftIcon === 'ordering_icon') {
|
|
1812
|
+
return 'Education Ordering';
|
|
1813
|
+
}
|
|
1814
|
+
// Check if this is the "Run Deep Extraction" button
|
|
1815
|
+
if (btn.dataTestId === 'header-run-deep-extraction') {
|
|
1816
|
+
return 'Deep Extraction';
|
|
1817
|
+
}
|
|
1818
|
+
return undefined;
|
|
1819
|
+
}
|
|
1744
1820
|
onButtonClick(btn, event) {
|
|
1745
1821
|
// If button has a custom onClick handler, call it
|
|
1746
1822
|
if (btn.onClick) {
|
|
@@ -1893,7 +1969,7 @@ class NewResumeHeaderComponent {
|
|
|
1893
1969
|
}
|
|
1894
1970
|
}
|
|
1895
1971
|
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 }); }
|
|
1896
|
-
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 }], usesOnChanges: true, ngImport: i0, template: "<al-general-container [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\" [padding]=\"'0'\"\n [width]=\"'100%'\">\n <cdk-accordion class=\"example-accordion\">\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n <div class=\"example-accordion-item-header\" [ngClass]=\"{'header-hidden': isSectionHidden}\">\n <!-- Normal header layout (shows when section is NOT hidden) -->\n <ng-container *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\">\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n <div left>\n <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\">\n <span class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">\n expand_less\n </span>\n <span class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">\n expand_more\n </span>\n </button>\n <ng-content select=\"[header-left]\"></ng-content>\n </div>\n <div center>\n <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\">\n <span *ngIf=\"!isTitleEditing\" class=\"title-text\" (click)=\"onTitleClick()\">\n {{ title || 'Click to edit' }}\n </span>\n <input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n class=\"title-input onfocus-input-text\" />\n <ng-content select=\"[header-center-left]\"></ng-content>\n </div>\n <mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\" matTooltipPosition=\"above\"\n (click)=\"onTitleClick()\">\n </mat-icon>\n </div>\n </div>\n <div center>\n <ng-content select=\"[header-center-center]\"></ng-content>\n <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) -->\n <ng-container *ngIf=\"isLargeScreen\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </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()\">\n <al-button buttonType=\"icon-label\" iconOnly size=\"header\" category=\"grey\" leftIcon=\"more_vert\"\n aria-label=\"More options\" [dataTestId]=\"'resume-header-more-menu'\">\n </al-button>\n </div>\n <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n <div class=\"fit-panel\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <div right>\n <ng-content select=\"[header-center-right]\"></ng-content>\n <!-- Eye icon - uses actual isHidden value from config, always visible -->\n <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"eyeConfig\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </al-responsive-columns>\n </div>\n <div right>\n <al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n (change)=\"onHeaderCheckboxChange($event)\">\n </al-checkbox>\n <ng-content select=\"[header-right]\"></ng-content>\n </div>\n </al-responsive-columns>\n </ng-container>\n\n <!-- Hidden header layout (shows when section IS hidden) -->\n <ng-template #hiddenHeaderLayout>\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n <div left>\n <!-- Toggle button hidden when section is hidden -->\n <ng-content select=\"[header-left]\"></ng-content>\n </div>\n <div center>\n <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\">\n <span class=\"title-text header-text-turncate\">{{ title }}</span>\n </div>\n </div>\n </div>\n <div center>\n <div class=\"hidden-write\">Section hidden</div>\n </div>\n <div right>\n <ng-content select=\"[header-center-right]\"></ng-content>\n <!-- Eye icon - uses actual isHidden value from config, always visible -->\n <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"eyeConfig\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </al-responsive-columns>\n </div>\n <div right>\n <!-- Checkbox hidden when section is hidden -->\n <ng-content select=\"[header-right]\"></ng-content>\n </div>\n </al-responsive-columns>\n </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\" class=\"pop-out-panel\">\n <div class=\"pop-out-content\">\n <al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\" [buttonType]=\"'icon-label'\"\n [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\"\n [dataTestId]=\"'pop-out-run-deep-extraction'\" [title]=\"popOutButtonLabel\">\n </al-button>\n <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n <button type=\"button\" class=\"pop-out-close\" (click)=\"dismissPopOut()\" aria-label=\"Close pop-out panel\">\n <span class=\"material-icons-outlined\">close</span>\n </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>\n </cdk-accordion>\n</al-general-container>\n\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n <ng-container *ngFor=\"let btn of buttonConfig\">\n <al-button *ngIf=\"!btn.displayCondition || btn.displayCondition()\" [color]=\"btn.color\" [outline]=\"btn.outline\"\n [size]=\"btn.size\" [iconOutlined]=\"btn.iconOutlined\" [labelText]=\"btn.labelText\" [leftIcon]=\"btn.leftIcon\"\n [rightIcon]=\"btn.rightIcon\" [dataTestId]=\"btn.dataTestId\" [hasDropDown]=\"btn.hasDropDown\"\n [dropdownItems]=\"btn.dropdownItems\" [buttonType]=\"'icon-label'\" [iconOnly]=\"!btn.labelText\"\n (onClick)=\"onButtonClick(btn, $event)\" (optionSelect)=\"onDropdownSelect(btn, $event)\">\n </al-button>\n </ng-container>\n</ng-template>\n\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n 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;\">\n <mat-icon 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'\">\n </mat-icon>\n </div>\n</ng-template>\n", styles: ["@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\";.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}.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% - 110px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;align-items:center}.pop-out-content al-button{flex-shrink:0;align-self:center}.pop-out-content al-button .button-label{display:inline-block!important;visibility:visible!important;opacity:1!important}.pop-out-message{flex:1;color:#fff;font-size:12px;line-height:1.5;font-family:Roboto,sans-serif;font-weight:400;min-width:0;letter-spacing:.06px}.pop-out-message ::ng-deep a,.pop-out-link{color:var(--Base-Blue, #5473E8);font-family:Roboto;font-size:12px;font-style:normal;font-weight:400;line-height:136%;letter-spacing:.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:24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:#717793}.edit-input-group:hover mat-icon.edit-icon{opacity:1;visibility:visible}.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"] }] }); }
|
|
1972
|
+
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 }], usesOnChanges: true, ngImport: i0, template: "<al-general-container [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\" [padding]=\"'0'\"\n [width]=\"'100%'\">\n <cdk-accordion class=\"example-accordion\">\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n <div class=\"example-accordion-item-header\" [ngClass]=\"{'header-hidden': isSectionHidden}\">\n <!-- Normal header layout (shows when section is NOT hidden) -->\n <ng-container *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\">\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n <div left>\n <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\">\n <span class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">\n expand_less\n </span>\n <span class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">\n expand_more\n </span>\n </button>\n <ng-content select=\"[header-left]\"></ng-content>\n </div>\n <div center>\n <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\">\n <span *ngIf=\"!isTitleEditing\" class=\"title-text\" (click)=\"onTitleClick()\">\n {{ title || 'Click to edit' }}\n </span>\n <input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n class=\"title-input onfocus-input-text\" />\n <ng-content select=\"[header-center-left]\"></ng-content>\n </div>\n <mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\" matTooltipPosition=\"above\"\n (click)=\"onTitleClick()\">\n </mat-icon>\n </div>\n </div>\n <div center>\n <ng-content select=\"[header-center-center]\"></ng-content>\n <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) -->\n <ng-container *ngIf=\"isLargeScreen\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </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()\">\n <al-button buttonType=\"icon-label\" iconOnly size=\"header\" category=\"grey\" leftIcon=\"more_vert\"\n aria-label=\"More options\" [dataTestId]=\"'resume-header-more-menu'\">\n </al-button>\n </div>\n <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n <div class=\"fit-panel\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <div right>\n <ng-content select=\"[header-center-right]\"></ng-content>\n <!-- Eye icon - uses actual isHidden value from config, always visible -->\n <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"eyeConfig\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </al-responsive-columns>\n </div>\n <div right>\n <al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n (change)=\"onHeaderCheckboxChange($event)\">\n </al-checkbox>\n <ng-content select=\"[header-right]\"></ng-content>\n </div>\n </al-responsive-columns>\n </ng-container>\n\n <!-- Hidden header layout (shows when section IS hidden) -->\n <ng-template #hiddenHeaderLayout>\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n <div left>\n <!-- Toggle button hidden when section is hidden -->\n <ng-content select=\"[header-left]\"></ng-content>\n </div>\n <div center>\n <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\">\n <span class=\"title-text header-text-turncate\">{{ title }}</span>\n </div>\n </div>\n </div>\n <div center>\n <div class=\"hidden-write\">Section hidden</div>\n </div>\n <div right>\n <ng-content select=\"[header-center-right]\"></ng-content>\n <!-- Eye icon - uses actual isHidden value from config, always visible -->\n <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"eyeConfig\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </al-responsive-columns>\n </div>\n <div right>\n <!-- Checkbox hidden when section is hidden -->\n <ng-content select=\"[header-right]\"></ng-content>\n </div>\n </al-responsive-columns>\n </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\" class=\"pop-out-panel\">\n <div class=\"pop-out-content\">\n <al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\" [buttonType]=\"'icon-label'\"\n [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\"\n [dataTestId]=\"'pop-out-run-deep-extraction'\" [title]=\"popOutButtonLabel\">\n </al-button>\n <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n <button type=\"button\" class=\"pop-out-close\" (click)=\"dismissPopOut()\" aria-label=\"Close pop-out panel\">\n <span class=\"material-icons-outlined\">close</span>\n </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>\n </cdk-accordion>\n</al-general-container>\n\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n <ng-container *ngFor=\"let btn of buttonConfig\">\n <al-button *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)\" (optionSelect)=\"onDropdownSelect(btn, $event)\">\n </al-button>\n </ng-container>\n</ng-template>\n\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n 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;\">\n <mat-icon 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'\">\n </mat-icon>\n </div>\n</ng-template>\n", styles: ["@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\";.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}.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% - 110px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;align-items:center}.pop-out-content al-button{flex-shrink:0;align-self:center}.pop-out-content al-button .button-label{display:inline-block!important;visibility:visible!important;opacity:1!important}.pop-out-message{flex:1;color:#fff;font-size:12px;line-height:1.5;font-family:Roboto,sans-serif;font-weight:400;min-width:0;letter-spacing:.06px}.pop-out-message ::ng-deep a,.pop-out-link{color:var(--Base-Blue, #5473E8);font-family:Roboto;font-size:12px;font-style:normal;font-weight:400;line-height:136%;letter-spacing:.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:24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:#717793}.edit-input-group:hover mat-icon.edit-icon{opacity:1;visibility:visible}.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"] }] }); }
|
|
1897
1973
|
}
|
|
1898
1974
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderComponent, decorators: [{
|
|
1899
1975
|
type: Component,
|
|
@@ -1907,7 +1983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1907
1983
|
ResponsiveColumnsComponent,
|
|
1908
1984
|
CheckboxModule,
|
|
1909
1985
|
ButtonComponent
|
|
1910
|
-
], template: "<al-general-container [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\" [padding]=\"'0'\"\n [width]=\"'100%'\">\n <cdk-accordion class=\"example-accordion\">\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n <div class=\"example-accordion-item-header\" [ngClass]=\"{'header-hidden': isSectionHidden}\">\n <!-- Normal header layout (shows when section is NOT hidden) -->\n <ng-container *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\">\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n <div left>\n <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\">\n <span class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">\n expand_less\n </span>\n <span class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">\n expand_more\n </span>\n </button>\n <ng-content select=\"[header-left]\"></ng-content>\n </div>\n <div center>\n <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\">\n <span *ngIf=\"!isTitleEditing\" class=\"title-text\" (click)=\"onTitleClick()\">\n {{ title || 'Click to edit' }}\n </span>\n <input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n class=\"title-input onfocus-input-text\" />\n <ng-content select=\"[header-center-left]\"></ng-content>\n </div>\n <mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\" matTooltipPosition=\"above\"\n (click)=\"onTitleClick()\">\n </mat-icon>\n </div>\n </div>\n <div center>\n <ng-content select=\"[header-center-center]\"></ng-content>\n <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) -->\n <ng-container *ngIf=\"isLargeScreen\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </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()\">\n <al-button buttonType=\"icon-label\" iconOnly size=\"header\" category=\"grey\" leftIcon=\"more_vert\"\n aria-label=\"More options\" [dataTestId]=\"'resume-header-more-menu'\">\n </al-button>\n </div>\n <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n <div class=\"fit-panel\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <div right>\n <ng-content select=\"[header-center-right]\"></ng-content>\n <!-- Eye icon - uses actual isHidden value from config, always visible -->\n <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"eyeConfig\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </al-responsive-columns>\n </div>\n <div right>\n <al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n (change)=\"onHeaderCheckboxChange($event)\">\n </al-checkbox>\n <ng-content select=\"[header-right]\"></ng-content>\n </div>\n </al-responsive-columns>\n </ng-container>\n\n <!-- Hidden header layout (shows when section IS hidden) -->\n <ng-template #hiddenHeaderLayout>\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n <div left>\n <!-- Toggle button hidden when section is hidden -->\n <ng-content select=\"[header-left]\"></ng-content>\n </div>\n <div center>\n <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\">\n <span class=\"title-text header-text-turncate\">{{ title }}</span>\n </div>\n </div>\n </div>\n <div center>\n <div class=\"hidden-write\">Section hidden</div>\n </div>\n <div right>\n <ng-content select=\"[header-center-right]\"></ng-content>\n <!-- Eye icon - uses actual isHidden value from config, always visible -->\n <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"eyeConfig\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </al-responsive-columns>\n </div>\n <div right>\n <!-- Checkbox hidden when section is hidden -->\n <ng-content select=\"[header-right]\"></ng-content>\n </div>\n </al-responsive-columns>\n </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\" class=\"pop-out-panel\">\n <div class=\"pop-out-content\">\n <al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\" [buttonType]=\"'icon-label'\"\n [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\"\n [dataTestId]=\"'pop-out-run-deep-extraction'\" [title]=\"popOutButtonLabel\">\n </al-button>\n <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n <button type=\"button\" class=\"pop-out-close\" (click)=\"dismissPopOut()\" aria-label=\"Close pop-out panel\">\n <span class=\"material-icons-outlined\">close</span>\n </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>\n </cdk-accordion>\n</al-general-container>\n\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n <ng-container *ngFor=\"let btn of buttonConfig\">\n <al-button *ngIf=\"!btn.displayCondition || btn.displayCondition()\" [color]=\"btn.color\" [outline]=\"btn.outline\"\n [size]=\"btn.size\" [iconOutlined]=\"btn.iconOutlined\" [labelText]=\"btn.labelText\" [leftIcon]=\"btn.leftIcon\"\n [rightIcon]=\"btn.rightIcon\" [dataTestId]=\"btn.dataTestId\" [hasDropDown]=\"btn.hasDropDown\"\n [dropdownItems]=\"btn.dropdownItems\" [buttonType]=\"'icon-label'\" [iconOnly]=\"!btn.labelText\"\n (onClick)=\"onButtonClick(btn, $event)\" (optionSelect)=\"onDropdownSelect(btn, $event)\">\n </al-button>\n </ng-container>\n</ng-template>\n\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n 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;\">\n <mat-icon 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'\">\n </mat-icon>\n </div>\n</ng-template>\n", styles: ["@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\";.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}.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% - 110px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;align-items:center}.pop-out-content al-button{flex-shrink:0;align-self:center}.pop-out-content al-button .button-label{display:inline-block!important;visibility:visible!important;opacity:1!important}.pop-out-message{flex:1;color:#fff;font-size:12px;line-height:1.5;font-family:Roboto,sans-serif;font-weight:400;min-width:0;letter-spacing:.06px}.pop-out-message ::ng-deep a,.pop-out-link{color:var(--Base-Blue, #5473E8);font-family:Roboto;font-size:12px;font-style:normal;font-weight:400;line-height:136%;letter-spacing:.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:24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:#717793}.edit-input-group:hover mat-icon.edit-icon{opacity:1;visibility:visible}.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"] }]
|
|
1986
|
+
], template: "<al-general-container [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\" [padding]=\"'0'\"\n [width]=\"'100%'\">\n <cdk-accordion class=\"example-accordion\">\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n <div class=\"example-accordion-item-header\" [ngClass]=\"{'header-hidden': isSectionHidden}\">\n <!-- Normal header layout (shows when section is NOT hidden) -->\n <ng-container *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\">\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n <div left>\n <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\">\n <span class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">\n expand_less\n </span>\n <span class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">\n expand_more\n </span>\n </button>\n <ng-content select=\"[header-left]\"></ng-content>\n </div>\n <div center>\n <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\">\n <span *ngIf=\"!isTitleEditing\" class=\"title-text\" (click)=\"onTitleClick()\">\n {{ title || 'Click to edit' }}\n </span>\n <input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n class=\"title-input onfocus-input-text\" />\n <ng-content select=\"[header-center-left]\"></ng-content>\n </div>\n <mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\" matTooltipPosition=\"above\"\n (click)=\"onTitleClick()\">\n </mat-icon>\n </div>\n </div>\n <div center>\n <ng-content select=\"[header-center-center]\"></ng-content>\n <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) -->\n <ng-container *ngIf=\"isLargeScreen\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </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()\">\n <al-button buttonType=\"icon-label\" iconOnly size=\"header\" category=\"grey\" leftIcon=\"more_vert\"\n aria-label=\"More options\" [dataTestId]=\"'resume-header-more-menu'\">\n </al-button>\n </div>\n <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n <div class=\"fit-panel\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <div right>\n <ng-content select=\"[header-center-right]\"></ng-content>\n <!-- Eye icon - uses actual isHidden value from config, always visible -->\n <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"eyeConfig\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </al-responsive-columns>\n </div>\n <div right>\n <al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n (change)=\"onHeaderCheckboxChange($event)\">\n </al-checkbox>\n <ng-content select=\"[header-right]\"></ng-content>\n </div>\n </al-responsive-columns>\n </ng-container>\n\n <!-- Hidden header layout (shows when section IS hidden) -->\n <ng-template #hiddenHeaderLayout>\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n <div left>\n <!-- Toggle button hidden when section is hidden -->\n <ng-content select=\"[header-left]\"></ng-content>\n </div>\n <div center>\n <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\">\n <span class=\"title-text header-text-turncate\">{{ title }}</span>\n </div>\n </div>\n </div>\n <div center>\n <div class=\"hidden-write\">Section hidden</div>\n </div>\n <div right>\n <ng-content select=\"[header-center-right]\"></ng-content>\n <!-- Eye icon - uses actual isHidden value from config, always visible -->\n <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"eyeConfig\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </al-responsive-columns>\n </div>\n <div right>\n <!-- Checkbox hidden when section is hidden -->\n <ng-content select=\"[header-right]\"></ng-content>\n </div>\n </al-responsive-columns>\n </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\" class=\"pop-out-panel\">\n <div class=\"pop-out-content\">\n <al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\" [buttonType]=\"'icon-label'\"\n [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\"\n [dataTestId]=\"'pop-out-run-deep-extraction'\" [title]=\"popOutButtonLabel\">\n </al-button>\n <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n <button type=\"button\" class=\"pop-out-close\" (click)=\"dismissPopOut()\" aria-label=\"Close pop-out panel\">\n <span class=\"material-icons-outlined\">close</span>\n </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>\n </cdk-accordion>\n</al-general-container>\n\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n <ng-container *ngFor=\"let btn of buttonConfig\">\n <al-button *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)\" (optionSelect)=\"onDropdownSelect(btn, $event)\">\n </al-button>\n </ng-container>\n</ng-template>\n\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n 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;\">\n <mat-icon 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'\">\n </mat-icon>\n </div>\n</ng-template>\n", styles: ["@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\";.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}.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% - 110px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;align-items:center}.pop-out-content al-button{flex-shrink:0;align-self:center}.pop-out-content al-button .button-label{display:inline-block!important;visibility:visible!important;opacity:1!important}.pop-out-message{flex:1;color:#fff;font-size:12px;line-height:1.5;font-family:Roboto,sans-serif;font-weight:400;min-width:0;letter-spacing:.06px}.pop-out-message ::ng-deep a,.pop-out-link{color:var(--Base-Blue, #5473E8);font-family:Roboto;font-size:12px;font-style:normal;font-weight:400;line-height:136%;letter-spacing:.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:24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:#717793}.edit-input-group:hover mat-icon.edit-icon{opacity:1;visibility:visible}.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"] }]
|
|
1911
1987
|
}], ctorParameters: () => [{ type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i1.MatIconRegistry }], propDecorators: { title: [{
|
|
1912
1988
|
type: Input
|
|
1913
1989
|
}], showHeaderCheckbox: [{
|
|
@@ -2178,11 +2254,11 @@ class FieldPlaceholderComponent {
|
|
|
2178
2254
|
return !!icon && !icon.includes('/') && !icon.includes('.');
|
|
2179
2255
|
}
|
|
2180
2256
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2181
|
-
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]\"\n [attr.data-test-id]=\"testId\">\n <span [innerHTML]=\"value ? value : placeholder\"></span>\n </span>\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}: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:140%;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}.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:18px;color:#768fed}.field-row{display:flex;align-items:center;gap:8px}.field-row-compact{leading-trim:both;text-edge:cap;font-style:normal;line-height:140%;letter-spacing:.04px;height:28px}.field-row-padded{padding-top:8px;padding-bottom:8px}.field-icon{display:flex;align-items:center;justify-content:center}.field-icon img,.field-icon mat-icon{width:20px;height:20px;object-fit:contain;font-size:20px;line-height:20px;display:inline-flex;align-items:center;justify-content:center;color:#37c1ce}\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"] }] }); }
|
|
2257
|
+
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}: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}.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}\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"] }] }); }
|
|
2182
2258
|
}
|
|
2183
2259
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldPlaceholderComponent, decorators: [{
|
|
2184
2260
|
type: Component,
|
|
2185
|
-
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]\"\n [attr.data-test-id]=\"testId\">\n <span [innerHTML]=\"value ? value : placeholder\"></span>\n </span>\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}: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:140%;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}.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:18px;color:#768fed}.field-row{display:flex;align-items:center;gap:8px}.field-row-compact{leading-trim:both;text-edge:cap;font-style:normal;line-height:140%;letter-spacing:.04px;height:28px}.field-row-padded{padding-top:8px;padding-bottom:8px}.field-icon{display:flex;align-items:center;justify-content:center}.field-icon img,.field-icon mat-icon{width:20px;height:20px;object-fit:contain;font-size:20px;line-height:20px;display:inline-flex;align-items:center;justify-content:center;color:#37c1ce}\n"] }]
|
|
2261
|
+
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}: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}.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}\n"] }]
|
|
2186
2262
|
}], propDecorators: { value: [{
|
|
2187
2263
|
type: Input
|
|
2188
2264
|
}], placeholder: [{
|
|
@@ -2285,11 +2361,11 @@ class CandidateSectionComponent {
|
|
|
2285
2361
|
return getIconCandidateSection('candidate_most_recent');
|
|
2286
2362
|
}
|
|
2287
2363
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CandidateSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2288
|
-
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:140%;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}.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}}\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"] }] }); }
|
|
2364
|
+
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"] }] }); }
|
|
2289
2365
|
}
|
|
2290
2366
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CandidateSectionComponent, decorators: [{
|
|
2291
2367
|
type: Component,
|
|
2292
|
-
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:140%;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}.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}}\n"] }]
|
|
2368
|
+
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"] }]
|
|
2293
2369
|
}], propDecorators: { useCustomHeader: [{
|
|
2294
2370
|
type: Input
|
|
2295
2371
|
}], candidateDetails: [{
|
|
@@ -2389,7 +2465,7 @@ class RadioComponent {
|
|
|
2389
2465
|
useExisting: forwardRef(() => RadioComponent),
|
|
2390
2466
|
multi: true
|
|
2391
2467
|
}
|
|
2392
|
-
], ngImport: i0, template: "<mat-radio-button [value]=\"value\" [name]=\"name\" [checked]=\"checked\" [disabled]=\"disabled\" [color]=\"color\"\n [labelPosition]=\"labelPosition\" [required]=\"required\" [attr.data-testid]=\"dataTestId\" [ngClass]=\"getColorClass()\"\n [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!tooltip\"\n (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\" (blur)=\"handleBlur($event)\">\n <div class=\"radio-label-wrapper\" *ngIf=\"showLabels\">\n <div class=\"radio-label-main-row\" *ngIf=\"labelText\">\n <div class=\"radio-label-main\">\n {{ labelText }}\n </div>\n <button *ngIf=\"showHelperIcon\" type=\"button\" class=\"radio-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=\"radio-label-helper\">\n {{ helperText }}\n </div>\n </div>\n\n <ng-content></ng-content>\n</mat-radio-button>\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}: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,.radio-label-main,::ng-deep .mat-mdc-radio-button .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,.radio-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:140%;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-radio-button.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__ripple{background-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-primary.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-primary.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-green .mdc-radio__ripple{background-color:#37c1cecc!important}::ng-deep .mat-mdc-radio-button.mat-green .mdc-radio__ripple,::ng-deep .mat-mdc-radio-button.mat-green:hover .mdc-radio__ripple{background-color:#37c1ce3d!important}::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-error .mdc-radio__ripple{background-color:#e854a41f!important}::ng-deep .mat-mdc-radio-button.mat-error .mdc-radio__ripple,::ng-deep .mat-mdc-radio-button.mat-error:hover .mdc-radio__ripple{background-color:#e854a43d!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .mdc-radio__background .mdc-radio__outer-circle{border-color:#c3c5d1!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .mdc-radio__background .mdc-radio__inner-circle{border-color:#dee0e6!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#dee0e6!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#dee0e6!important}::ng-deep .mat-mdc-radio-button .mdc-radio__ripple{background-color:#5473e81f!important}::ng-deep .mat-mdc-radio-button:hover .mdc-radio__ripple{background-color:#5473e83d!important}::ng-deep .mat-mdc-radio-button .mdc-form-field>label{color:#4b4f62!important}.radio-label-wrapper{display:flex;flex-direction:column;margin-top:12px}.radio-label-main-row{display:flex;align-items:center;gap:4px}.radio-label-main{color:#4b4f62!important}.radio-label-helper{color:#a2a6b8!important;margin-top:0!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .radio-label-main,::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .radio-label-helper{color:#c3c5d1!important;cursor:not-allowed}.radio-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}.radio-helper-icon:disabled{border-color:#dee0e6;color:#dee0e6;cursor:not-allowed}::ng-deep .mat-mdc-radio-button.mat-primary .mat-ripple-element{background-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-green .mat-ripple-element{background-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-green:hover .mat-ripple-element,::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mat-ripple-element{background-color:#37c1ceb3!important}::ng-deep .mat-mdc-radio-button.mat-error .mat-ripple-element{background-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-error:hover .mat-ripple-element,::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mat-ripple-element{background-color:#e854a4b3!important}::ng-deep .mat-mdc-radio-button.mat-primary .mat-ripple-element:after{background-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-green .mat-ripple-element:after{background-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-green:hover .mat-ripple-element:after{background-color:#37c1ceb3!important}::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mat-ripple-element:after{background-color:#37c1ceb3!important}::ng-deep .mat-mdc-radio-button.mat-error .mat-ripple-element:after{background-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-error:hover .mat-ripple-element:after{background-color:#e854a4b3!important}::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mat-ripple-element:after{background-color:#e854a4b3!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: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
2468
|
+
], ngImport: i0, template: "<mat-radio-button [value]=\"value\" [name]=\"name\" [checked]=\"checked\" [disabled]=\"disabled\" [color]=\"color\"\n [labelPosition]=\"labelPosition\" [required]=\"required\" [attr.data-testid]=\"dataTestId\" [ngClass]=\"getColorClass()\"\n [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!tooltip\"\n (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\" (blur)=\"handleBlur($event)\">\n <div class=\"radio-label-wrapper\" *ngIf=\"showLabels\">\n <div class=\"radio-label-main-row\" *ngIf=\"labelText\">\n <div class=\"radio-label-main\">\n {{ labelText }}\n </div>\n <button *ngIf=\"showHelperIcon\" type=\"button\" class=\"radio-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=\"radio-label-helper\">\n {{ helperText }}\n </div>\n </div>\n\n <ng-content></ng-content>\n</mat-radio-button>\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}: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,.radio-label-main,::ng-deep .mat-mdc-radio-button .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,.radio-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-radio-button.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__ripple{background-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-primary.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-primary.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-green .mdc-radio__ripple{background-color:#37c1cecc!important}::ng-deep .mat-mdc-radio-button.mat-green .mdc-radio__ripple,::ng-deep .mat-mdc-radio-button.mat-green:hover .mdc-radio__ripple{background-color:#37c1ce3d!important}::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-error .mdc-radio__ripple{background-color:#e854a41f!important}::ng-deep .mat-mdc-radio-button.mat-error .mdc-radio__ripple,::ng-deep .mat-mdc-radio-button.mat-error:hover .mdc-radio__ripple{background-color:#e854a43d!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .mdc-radio__background .mdc-radio__outer-circle{border-color:#c3c5d1!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .mdc-radio__background .mdc-radio__inner-circle{border-color:#dee0e6!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#dee0e6!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#dee0e6!important}::ng-deep .mat-mdc-radio-button .mdc-radio__ripple{background-color:#5473e81f!important}::ng-deep .mat-mdc-radio-button:hover .mdc-radio__ripple{background-color:#5473e83d!important}::ng-deep .mat-mdc-radio-button .mdc-form-field>label{color:#4b4f62!important}.radio-label-wrapper{display:flex;flex-direction:column;margin-top:12px}.radio-label-main-row{display:flex;align-items:center;gap:4px}.radio-label-main{color:#4b4f62!important}.radio-label-helper{color:#a2a6b8!important;margin-top:0!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .radio-label-main,::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .radio-label-helper{color:#c3c5d1!important;cursor:not-allowed}.radio-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}.radio-helper-icon:disabled{border-color:#dee0e6;color:#dee0e6;cursor:not-allowed}::ng-deep .mat-mdc-radio-button.mat-primary .mat-ripple-element{background-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-green .mat-ripple-element{background-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-green:hover .mat-ripple-element,::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mat-ripple-element{background-color:#37c1ceb3!important}::ng-deep .mat-mdc-radio-button.mat-error .mat-ripple-element{background-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-error:hover .mat-ripple-element,::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mat-ripple-element{background-color:#e854a4b3!important}::ng-deep .mat-mdc-radio-button.mat-primary .mat-ripple-element:after{background-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-green .mat-ripple-element:after{background-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-green:hover .mat-ripple-element:after{background-color:#37c1ceb3!important}::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mat-ripple-element:after{background-color:#37c1ceb3!important}::ng-deep .mat-mdc-radio-button.mat-error .mat-ripple-element:after{background-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-error:hover .mat-ripple-element:after{background-color:#e854a4b3!important}::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mat-ripple-element:after{background-color:#e854a4b3!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: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
2393
2469
|
}
|
|
2394
2470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, decorators: [{
|
|
2395
2471
|
type: Component,
|
|
@@ -2399,7 +2475,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2399
2475
|
useExisting: forwardRef(() => RadioComponent),
|
|
2400
2476
|
multi: true
|
|
2401
2477
|
}
|
|
2402
|
-
], template: "<mat-radio-button [value]=\"value\" [name]=\"name\" [checked]=\"checked\" [disabled]=\"disabled\" [color]=\"color\"\n [labelPosition]=\"labelPosition\" [required]=\"required\" [attr.data-testid]=\"dataTestId\" [ngClass]=\"getColorClass()\"\n [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!tooltip\"\n (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\" (blur)=\"handleBlur($event)\">\n <div class=\"radio-label-wrapper\" *ngIf=\"showLabels\">\n <div class=\"radio-label-main-row\" *ngIf=\"labelText\">\n <div class=\"radio-label-main\">\n {{ labelText }}\n </div>\n <button *ngIf=\"showHelperIcon\" type=\"button\" class=\"radio-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=\"radio-label-helper\">\n {{ helperText }}\n </div>\n </div>\n\n <ng-content></ng-content>\n</mat-radio-button>\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}: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,.radio-label-main,::ng-deep .mat-mdc-radio-button .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,.radio-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:140%;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-radio-button.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__ripple{background-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-primary.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-primary.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-green .mdc-radio__ripple{background-color:#37c1cecc!important}::ng-deep .mat-mdc-radio-button.mat-green .mdc-radio__ripple,::ng-deep .mat-mdc-radio-button.mat-green:hover .mdc-radio__ripple{background-color:#37c1ce3d!important}::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-error .mdc-radio__ripple{background-color:#e854a41f!important}::ng-deep .mat-mdc-radio-button.mat-error .mdc-radio__ripple,::ng-deep .mat-mdc-radio-button.mat-error:hover .mdc-radio__ripple{background-color:#e854a43d!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .mdc-radio__background .mdc-radio__outer-circle{border-color:#c3c5d1!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .mdc-radio__background .mdc-radio__inner-circle{border-color:#dee0e6!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#dee0e6!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#dee0e6!important}::ng-deep .mat-mdc-radio-button .mdc-radio__ripple{background-color:#5473e81f!important}::ng-deep .mat-mdc-radio-button:hover .mdc-radio__ripple{background-color:#5473e83d!important}::ng-deep .mat-mdc-radio-button .mdc-form-field>label{color:#4b4f62!important}.radio-label-wrapper{display:flex;flex-direction:column;margin-top:12px}.radio-label-main-row{display:flex;align-items:center;gap:4px}.radio-label-main{color:#4b4f62!important}.radio-label-helper{color:#a2a6b8!important;margin-top:0!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .radio-label-main,::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .radio-label-helper{color:#c3c5d1!important;cursor:not-allowed}.radio-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}.radio-helper-icon:disabled{border-color:#dee0e6;color:#dee0e6;cursor:not-allowed}::ng-deep .mat-mdc-radio-button.mat-primary .mat-ripple-element{background-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-green .mat-ripple-element{background-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-green:hover .mat-ripple-element,::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mat-ripple-element{background-color:#37c1ceb3!important}::ng-deep .mat-mdc-radio-button.mat-error .mat-ripple-element{background-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-error:hover .mat-ripple-element,::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mat-ripple-element{background-color:#e854a4b3!important}::ng-deep .mat-mdc-radio-button.mat-primary .mat-ripple-element:after{background-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-green .mat-ripple-element:after{background-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-green:hover .mat-ripple-element:after{background-color:#37c1ceb3!important}::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mat-ripple-element:after{background-color:#37c1ceb3!important}::ng-deep .mat-mdc-radio-button.mat-error .mat-ripple-element:after{background-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-error:hover .mat-ripple-element:after{background-color:#e854a4b3!important}::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mat-ripple-element:after{background-color:#e854a4b3!important}\n"] }]
|
|
2478
|
+
], template: "<mat-radio-button [value]=\"value\" [name]=\"name\" [checked]=\"checked\" [disabled]=\"disabled\" [color]=\"color\"\n [labelPosition]=\"labelPosition\" [required]=\"required\" [attr.data-testid]=\"dataTestId\" [ngClass]=\"getColorClass()\"\n [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!tooltip\"\n (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\" (blur)=\"handleBlur($event)\">\n <div class=\"radio-label-wrapper\" *ngIf=\"showLabels\">\n <div class=\"radio-label-main-row\" *ngIf=\"labelText\">\n <div class=\"radio-label-main\">\n {{ labelText }}\n </div>\n <button *ngIf=\"showHelperIcon\" type=\"button\" class=\"radio-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=\"radio-label-helper\">\n {{ helperText }}\n </div>\n </div>\n\n <ng-content></ng-content>\n</mat-radio-button>\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}: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,.radio-label-main,::ng-deep .mat-mdc-radio-button .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,.radio-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-radio-button.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__ripple{background-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-primary.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-primary.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-green .mdc-radio__ripple{background-color:#37c1cecc!important}::ng-deep .mat-mdc-radio-button.mat-green .mdc-radio__ripple,::ng-deep .mat-mdc-radio-button.mat-green:hover .mdc-radio__ripple{background-color:#37c1ce3d!important}::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-error .mdc-radio__ripple{background-color:#e854a41f!important}::ng-deep .mat-mdc-radio-button.mat-error .mdc-radio__ripple,::ng-deep .mat-mdc-radio-button.mat-error:hover .mdc-radio__ripple{background-color:#e854a43d!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .mdc-radio__background .mdc-radio__outer-circle{border-color:#c3c5d1!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .mdc-radio__background .mdc-radio__inner-circle{border-color:#dee0e6!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#dee0e6!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#dee0e6!important}::ng-deep .mat-mdc-radio-button .mdc-radio__ripple{background-color:#5473e81f!important}::ng-deep .mat-mdc-radio-button:hover .mdc-radio__ripple{background-color:#5473e83d!important}::ng-deep .mat-mdc-radio-button .mdc-form-field>label{color:#4b4f62!important}.radio-label-wrapper{display:flex;flex-direction:column;margin-top:12px}.radio-label-main-row{display:flex;align-items:center;gap:4px}.radio-label-main{color:#4b4f62!important}.radio-label-helper{color:#a2a6b8!important;margin-top:0!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .radio-label-main,::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .radio-label-helper{color:#c3c5d1!important;cursor:not-allowed}.radio-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}.radio-helper-icon:disabled{border-color:#dee0e6;color:#dee0e6;cursor:not-allowed}::ng-deep .mat-mdc-radio-button.mat-primary .mat-ripple-element{background-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-green .mat-ripple-element{background-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-green:hover .mat-ripple-element,::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mat-ripple-element{background-color:#37c1ceb3!important}::ng-deep .mat-mdc-radio-button.mat-error .mat-ripple-element{background-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-error:hover .mat-ripple-element,::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mat-ripple-element{background-color:#e854a4b3!important}::ng-deep .mat-mdc-radio-button.mat-primary .mat-ripple-element:after{background-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-green .mat-ripple-element:after{background-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-green:hover .mat-ripple-element:after{background-color:#37c1ceb3!important}::ng-deep .mat-mdc-radio-button.mat-green.mat-mdc-radio-checked .mat-ripple-element:after{background-color:#37c1ceb3!important}::ng-deep .mat-mdc-radio-button.mat-error .mat-ripple-element:after{background-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-error:hover .mat-ripple-element:after{background-color:#e854a4b3!important}::ng-deep .mat-mdc-radio-button.mat-error.mat-mdc-radio-checked .mat-ripple-element:after{background-color:#e854a4b3!important}\n"] }]
|
|
2403
2479
|
}], propDecorators: { value: [{
|
|
2404
2480
|
type: Input
|
|
2405
2481
|
}], name: [{
|
|
@@ -2496,11 +2572,11 @@ class ToggleButtonsComponent {
|
|
|
2496
2572
|
return 8;
|
|
2497
2573
|
}
|
|
2498
2574
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2499
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ToggleButtonsComponent, isStandalone: true, selector: "al-toggle-buttons", inputs: { buttons: "buttons", selectedId: "selectedId", disabled: "disabled", size: "size", type: "type", multiple: "multiple", vertical: "vertical", dataTestId: "dataTestId" }, outputs: { selectionChange: "selectionChange", buttonClick: "buttonClick" }, ngImport: i0, template: "<mat-button-toggle-group [value]=\"getSelectedValue()\" [disabled]=\"disabled\" [multiple]=\"multiple\" [vertical]=\"vertical\"\n (change)=\"onSelectionChange($event.value)\" [ngClass]=\"[getSizeClass(), vertical ? 'al-toggle-vertical' : '']\">\n\n <mat-button-toggle *ngFor=\"let button of buttons\" [value]=\"button.id\" [disabled]=\"button.disabled\"\n [attr.aria-label]=\"button.label\" [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap(button)\" [attr.data-testid]=\"button.dataTestId || dataTestId\">\n\n <!-- Icon (shown based on type) -->\n <mat-icon *ngIf=\"(type === 'default' || type === 'icon-only') && button.icon?.trim()\" class=\"button-icon\">{{\n button.icon }}</mat-icon>\n\n <!-- Label (shown based on type) -->\n <span *ngIf=\"(type === 'default' || type === 'text-only') && button.label?.trim()\" class=\"button-label\">{{\n button.label }}</span>\n </mat-button-toggle>\n\n</mat-button-toggle-group>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+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}: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,.button-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{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:140%;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}mat-button-toggle-group{display:flex;border-radius:4px;border:1px solid #C3C5D1;background:#fff;overflow:hidden;box-shadow:none!important;width:fit-content;align-items:stretch}mat-button-toggle-group[vertical=true],mat-button-toggle-group.mat-button-toggle-group-vertical{flex-direction:column}mat-button-toggle{border:none;background:transparent;cursor:pointer;transition:all .2s ease;position:relative;flex:0 0 auto;width:fit-content;min-width:fit-content;border-radius:0;color:#a2a6b8;font-family:var(--Body-Medium-Font, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}mat-button-toggle:hover:not(.mat-button-toggle-disabled){background-color:#ecedf1}mat-button-toggle.mat-button-toggle-checked,mat-button-toggle[aria-pressed=true],mat-button-toggle.mat-button-toggle-checked:hover{background-color:#ecedf1!important;color:#4b4f62!important;font-weight:400}.al-toggle-buttons-size-sm mat-button-toggle.mat-button-toggle-checked,.al-toggle-buttons-size-md mat-button-toggle.mat-button-toggle-checked,.al-toggle-buttons-size-lg mat-button-toggle.mat-button-toggle-checked{background-color:#ecedf1!important;color:#4b4f62!important}mat-button-toggle.mat-button-toggle-disabled{opacity:.5;cursor:not-allowed;color:#a2a6b8}.button-icon{font-size:14px;line-height:1;margin-right:8px}mat-button-toggle .mat-icon{font-size:14px;width:14px;height:14px}.button-label{color:#4b4f62;white-space:nowrap;line-height:19px}mat-button-toggle.mat-button-toggle-checked .button-label{color:#4b4f62!important;font-weight:400}::ng-deep .al-toggle-buttons[type=icon-only] .button-icon,::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .button-icon{margin-right:0!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .button-icon{width:100%!important;height:100%!important;margin:0!important;padding:0!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .mat-icon{width:20px!important;height:20px!important;font-size:20px!important;line-height:20px!important}.al-toggle-buttons-size-sm mat-button-toggle{height:32px!important;padding:8px 12px!important;border:1px solid #C3C5D1!important;background:#fff!important}.al-toggle-buttons-size-md mat-button-toggle{height:36px!important;padding:8px 12px!important;border:1px solid #C3C5D1!important;background:#fff!important}.al-toggle-buttons-size-lg mat-button-toggle{height:40px!important;padding:8px 12px!important;border:1px solid #C3C5D1!important;background:#fff!important}.al-toggle-buttons-size-sm .button-icon,.al-toggle-buttons-size-sm mat-button-toggle .mat-icon,.al-toggle-buttons-size-md .button-icon,.al-toggle-buttons-size-md mat-button-toggle .mat-icon{font-size:14px;width:14px;height:14px}.al-toggle-buttons-size-lg .button-icon,.al-toggle-buttons-size-lg mat-button-toggle .mat-icon{font-size:16px;width:16px;height:16px}mat-button-toggle-group .mat-button-toggle{border:none!important;border-radius:0!important;border-top:none!important;border-bottom:none!important;outline:none!important;box-shadow:none!important}mat-button-toggle-group .mat-button-toggle:first-child{border-radius:0!important;border-left:none!important}mat-button-toggle-group .mat-button-toggle:last-child{border-radius:0!important;border-right:none!important}mat-button-toggle-group .mat-button-toggle:not(:last-child){border-right:1px solid #C3C5D1!important}mat-button-toggle-group.al-toggle-vertical,mat-button-toggle-group.mat-button-toggle-group-vertical{flex-direction:column!important}mat-button-toggle-group.al-toggle-vertical .mat-button-toggle,mat-button-toggle-group.mat-button-toggle-group-vertical .mat-button-toggle{border-right:0!important;border-bottom:1px solid #C3C5D1!important;width:100%!important}mat-button-toggle-group.al-toggle-vertical .mat-button-toggle:last-child,mat-button-toggle-group.mat-button-toggle-group-vertical .mat-button-toggle:last-child{border-bottom:none!important}mat-button-toggle-group .mat-button-toggle *,mat-button-toggle-group .mat-button-toggle-appearance-standard,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-label-content,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-button,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-ripple{border:none!important;box-shadow:none!important;padding:0!important}mat-button-toggle-group .mat-button-toggle:focus .mat-button-toggle-focus-overlay{display:none!important}.mat-button-toggle-checked .mat-button-toggle-label-content:before,.mat-button-toggle-checked .mat-button-toggle-label-content:after,.mat-button-toggle-checked:before,.mat-button-toggle-checked:after,.mat-button-toggle-checked .mat-icon:not(.button-icon),.mat-button-toggle-checked .material-icons:not(.button-icon){display:none!important}.mat-button-toggle-checked .button-icon{display:inline-flex!important}.mat-button-toggle-checked .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{background-image:none!important}::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:20px!important}::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none!important}mat-button-toggle:focus-visible{outline:2px solid #5473E8;outline-offset:2px}\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: MatButtonToggleModule }, { kind: "directive", type: i2$4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }] }); }
|
|
2575
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ToggleButtonsComponent, isStandalone: true, selector: "al-toggle-buttons", inputs: { buttons: "buttons", selectedId: "selectedId", disabled: "disabled", size: "size", type: "type", multiple: "multiple", vertical: "vertical", dataTestId: "dataTestId" }, outputs: { selectionChange: "selectionChange", buttonClick: "buttonClick" }, ngImport: i0, template: "<mat-button-toggle-group [value]=\"getSelectedValue()\" [disabled]=\"disabled\" [multiple]=\"multiple\" [vertical]=\"vertical\"\n (change)=\"onSelectionChange($event.value)\" [ngClass]=\"[getSizeClass(), vertical ? 'al-toggle-vertical' : '']\">\n\n <mat-button-toggle *ngFor=\"let button of buttons\" [value]=\"button.id\" [disabled]=\"button.disabled\"\n [attr.aria-label]=\"button.label\" [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap(button)\" [attr.data-testid]=\"button.dataTestId || dataTestId\">\n\n <!-- Icon (shown based on type) -->\n <mat-icon *ngIf=\"(type === 'default' || type === 'icon-only') && button.icon?.trim()\" class=\"button-icon\">{{\n button.icon }}</mat-icon>\n\n <!-- Label (shown based on type) -->\n <span *ngIf=\"(type === 'default' || type === 'text-only') && button.label?.trim()\" class=\"button-label\">{{\n button.label }}</span>\n </mat-button-toggle>\n\n</mat-button-toggle-group>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+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}: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,.button-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{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}mat-button-toggle-group{display:flex;border-radius:4px;border:1px solid #C3C5D1;background:#fff;overflow:hidden;box-shadow:none!important;width:fit-content;align-items:stretch}mat-button-toggle-group[vertical=true],mat-button-toggle-group.mat-button-toggle-group-vertical{flex-direction:column}mat-button-toggle{border:none;background:transparent;cursor:pointer;transition:all .2s ease;position:relative;flex:0 0 auto;width:fit-content;min-width:fit-content;border-radius:0;color:#a2a6b8;font-family:var(--Body-Medium-Font, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}mat-button-toggle:hover:not(.mat-button-toggle-disabled){background-color:#ecedf1}mat-button-toggle.mat-button-toggle-checked,mat-button-toggle[aria-pressed=true],mat-button-toggle.mat-button-toggle-checked:hover{background-color:#ecedf1!important;color:#4b4f62!important;font-weight:400}.al-toggle-buttons-size-sm mat-button-toggle.mat-button-toggle-checked,.al-toggle-buttons-size-md mat-button-toggle.mat-button-toggle-checked,.al-toggle-buttons-size-lg mat-button-toggle.mat-button-toggle-checked{background-color:#ecedf1!important;color:#4b4f62!important}mat-button-toggle.mat-button-toggle-disabled{opacity:.5;cursor:not-allowed;color:#a2a6b8}.button-icon{font-size:14px;line-height:1;margin-right:8px}mat-button-toggle .mat-icon{font-size:14px;width:14px;height:14px}.button-label{color:#4b4f62;white-space:nowrap;line-height:19px}mat-button-toggle.mat-button-toggle-checked .button-label{color:#4b4f62!important;font-weight:400}::ng-deep .al-toggle-buttons[type=icon-only] .button-icon,::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .button-icon{margin-right:0!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .button-icon{width:100%!important;height:100%!important;margin:0!important;padding:0!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .mat-icon{width:20px!important;height:20px!important;font-size:20px!important;line-height:20px!important}.al-toggle-buttons-size-sm mat-button-toggle{height:32px!important;padding:8px 12px!important;border:1px solid #C3C5D1!important;background:#fff!important}.al-toggle-buttons-size-md mat-button-toggle{height:36px!important;padding:8px 12px!important;border:1px solid #C3C5D1!important;background:#fff!important}.al-toggle-buttons-size-lg mat-button-toggle{height:40px!important;padding:8px 12px!important;border:1px solid #C3C5D1!important;background:#fff!important}.al-toggle-buttons-size-sm .button-icon,.al-toggle-buttons-size-sm mat-button-toggle .mat-icon,.al-toggle-buttons-size-md .button-icon,.al-toggle-buttons-size-md mat-button-toggle .mat-icon{font-size:14px;width:14px;height:14px}.al-toggle-buttons-size-lg .button-icon,.al-toggle-buttons-size-lg mat-button-toggle .mat-icon{font-size:16px;width:16px;height:16px}mat-button-toggle-group .mat-button-toggle{border:none!important;border-radius:0!important;border-top:none!important;border-bottom:none!important;outline:none!important;box-shadow:none!important}mat-button-toggle-group .mat-button-toggle:first-child{border-radius:0!important;border-left:none!important}mat-button-toggle-group .mat-button-toggle:last-child{border-radius:0!important;border-right:none!important}mat-button-toggle-group .mat-button-toggle:not(:last-child){border-right:1px solid #C3C5D1!important}mat-button-toggle-group.al-toggle-vertical,mat-button-toggle-group.mat-button-toggle-group-vertical{flex-direction:column!important}mat-button-toggle-group.al-toggle-vertical .mat-button-toggle,mat-button-toggle-group.mat-button-toggle-group-vertical .mat-button-toggle{border-right:0!important;border-bottom:1px solid #C3C5D1!important;width:100%!important}mat-button-toggle-group.al-toggle-vertical .mat-button-toggle:last-child,mat-button-toggle-group.mat-button-toggle-group-vertical .mat-button-toggle:last-child{border-bottom:none!important}mat-button-toggle-group .mat-button-toggle *,mat-button-toggle-group .mat-button-toggle-appearance-standard,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-label-content,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-button,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-ripple{border:none!important;box-shadow:none!important;padding:0!important}mat-button-toggle-group .mat-button-toggle:focus .mat-button-toggle-focus-overlay{display:none!important}.mat-button-toggle-checked .mat-button-toggle-label-content:before,.mat-button-toggle-checked .mat-button-toggle-label-content:after,.mat-button-toggle-checked:before,.mat-button-toggle-checked:after,.mat-button-toggle-checked .mat-icon:not(.button-icon),.mat-button-toggle-checked .material-icons:not(.button-icon){display:none!important}.mat-button-toggle-checked .button-icon{display:inline-flex!important}.mat-button-toggle-checked .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{background-image:none!important}::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:20px!important}::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none!important}mat-button-toggle:focus-visible{outline:2px solid #5473E8;outline-offset:2px}\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: MatButtonToggleModule }, { kind: "directive", type: i2$4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }] }); }
|
|
2500
2576
|
}
|
|
2501
2577
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonsComponent, decorators: [{
|
|
2502
2578
|
type: Component,
|
|
2503
|
-
args: [{ selector: 'al-toggle-buttons', standalone: true, imports: [CommonModule, MatButtonToggleModule, MatIconModule, FormsModule], template: "<mat-button-toggle-group [value]=\"getSelectedValue()\" [disabled]=\"disabled\" [multiple]=\"multiple\" [vertical]=\"vertical\"\n (change)=\"onSelectionChange($event.value)\" [ngClass]=\"[getSizeClass(), vertical ? 'al-toggle-vertical' : '']\">\n\n <mat-button-toggle *ngFor=\"let button of buttons\" [value]=\"button.id\" [disabled]=\"button.disabled\"\n [attr.aria-label]=\"button.label\" [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap(button)\" [attr.data-testid]=\"button.dataTestId || dataTestId\">\n\n <!-- Icon (shown based on type) -->\n <mat-icon *ngIf=\"(type === 'default' || type === 'icon-only') && button.icon?.trim()\" class=\"button-icon\">{{\n button.icon }}</mat-icon>\n\n <!-- Label (shown based on type) -->\n <span *ngIf=\"(type === 'default' || type === 'text-only') && button.label?.trim()\" class=\"button-label\">{{\n button.label }}</span>\n </mat-button-toggle>\n\n</mat-button-toggle-group>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+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}: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,.button-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{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:140%;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}mat-button-toggle-group{display:flex;border-radius:4px;border:1px solid #C3C5D1;background:#fff;overflow:hidden;box-shadow:none!important;width:fit-content;align-items:stretch}mat-button-toggle-group[vertical=true],mat-button-toggle-group.mat-button-toggle-group-vertical{flex-direction:column}mat-button-toggle{border:none;background:transparent;cursor:pointer;transition:all .2s ease;position:relative;flex:0 0 auto;width:fit-content;min-width:fit-content;border-radius:0;color:#a2a6b8;font-family:var(--Body-Medium-Font, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}mat-button-toggle:hover:not(.mat-button-toggle-disabled){background-color:#ecedf1}mat-button-toggle.mat-button-toggle-checked,mat-button-toggle[aria-pressed=true],mat-button-toggle.mat-button-toggle-checked:hover{background-color:#ecedf1!important;color:#4b4f62!important;font-weight:400}.al-toggle-buttons-size-sm mat-button-toggle.mat-button-toggle-checked,.al-toggle-buttons-size-md mat-button-toggle.mat-button-toggle-checked,.al-toggle-buttons-size-lg mat-button-toggle.mat-button-toggle-checked{background-color:#ecedf1!important;color:#4b4f62!important}mat-button-toggle.mat-button-toggle-disabled{opacity:.5;cursor:not-allowed;color:#a2a6b8}.button-icon{font-size:14px;line-height:1;margin-right:8px}mat-button-toggle .mat-icon{font-size:14px;width:14px;height:14px}.button-label{color:#4b4f62;white-space:nowrap;line-height:19px}mat-button-toggle.mat-button-toggle-checked .button-label{color:#4b4f62!important;font-weight:400}::ng-deep .al-toggle-buttons[type=icon-only] .button-icon,::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .button-icon{margin-right:0!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .button-icon{width:100%!important;height:100%!important;margin:0!important;padding:0!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .mat-icon{width:20px!important;height:20px!important;font-size:20px!important;line-height:20px!important}.al-toggle-buttons-size-sm mat-button-toggle{height:32px!important;padding:8px 12px!important;border:1px solid #C3C5D1!important;background:#fff!important}.al-toggle-buttons-size-md mat-button-toggle{height:36px!important;padding:8px 12px!important;border:1px solid #C3C5D1!important;background:#fff!important}.al-toggle-buttons-size-lg mat-button-toggle{height:40px!important;padding:8px 12px!important;border:1px solid #C3C5D1!important;background:#fff!important}.al-toggle-buttons-size-sm .button-icon,.al-toggle-buttons-size-sm mat-button-toggle .mat-icon,.al-toggle-buttons-size-md .button-icon,.al-toggle-buttons-size-md mat-button-toggle .mat-icon{font-size:14px;width:14px;height:14px}.al-toggle-buttons-size-lg .button-icon,.al-toggle-buttons-size-lg mat-button-toggle .mat-icon{font-size:16px;width:16px;height:16px}mat-button-toggle-group .mat-button-toggle{border:none!important;border-radius:0!important;border-top:none!important;border-bottom:none!important;outline:none!important;box-shadow:none!important}mat-button-toggle-group .mat-button-toggle:first-child{border-radius:0!important;border-left:none!important}mat-button-toggle-group .mat-button-toggle:last-child{border-radius:0!important;border-right:none!important}mat-button-toggle-group .mat-button-toggle:not(:last-child){border-right:1px solid #C3C5D1!important}mat-button-toggle-group.al-toggle-vertical,mat-button-toggle-group.mat-button-toggle-group-vertical{flex-direction:column!important}mat-button-toggle-group.al-toggle-vertical .mat-button-toggle,mat-button-toggle-group.mat-button-toggle-group-vertical .mat-button-toggle{border-right:0!important;border-bottom:1px solid #C3C5D1!important;width:100%!important}mat-button-toggle-group.al-toggle-vertical .mat-button-toggle:last-child,mat-button-toggle-group.mat-button-toggle-group-vertical .mat-button-toggle:last-child{border-bottom:none!important}mat-button-toggle-group .mat-button-toggle *,mat-button-toggle-group .mat-button-toggle-appearance-standard,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-label-content,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-button,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-ripple{border:none!important;box-shadow:none!important;padding:0!important}mat-button-toggle-group .mat-button-toggle:focus .mat-button-toggle-focus-overlay{display:none!important}.mat-button-toggle-checked .mat-button-toggle-label-content:before,.mat-button-toggle-checked .mat-button-toggle-label-content:after,.mat-button-toggle-checked:before,.mat-button-toggle-checked:after,.mat-button-toggle-checked .mat-icon:not(.button-icon),.mat-button-toggle-checked .material-icons:not(.button-icon){display:none!important}.mat-button-toggle-checked .button-icon{display:inline-flex!important}.mat-button-toggle-checked .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{background-image:none!important}::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:20px!important}::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none!important}mat-button-toggle:focus-visible{outline:2px solid #5473E8;outline-offset:2px}\n"] }]
|
|
2579
|
+
args: [{ selector: 'al-toggle-buttons', standalone: true, imports: [CommonModule, MatButtonToggleModule, MatIconModule, FormsModule], template: "<mat-button-toggle-group [value]=\"getSelectedValue()\" [disabled]=\"disabled\" [multiple]=\"multiple\" [vertical]=\"vertical\"\n (change)=\"onSelectionChange($event.value)\" [ngClass]=\"[getSizeClass(), vertical ? 'al-toggle-vertical' : '']\">\n\n <mat-button-toggle *ngFor=\"let button of buttons\" [value]=\"button.id\" [disabled]=\"button.disabled\"\n [attr.aria-label]=\"button.label\" [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap(button)\" [attr.data-testid]=\"button.dataTestId || dataTestId\">\n\n <!-- Icon (shown based on type) -->\n <mat-icon *ngIf=\"(type === 'default' || type === 'icon-only') && button.icon?.trim()\" class=\"button-icon\">{{\n button.icon }}</mat-icon>\n\n <!-- Label (shown based on type) -->\n <span *ngIf=\"(type === 'default' || type === 'text-only') && button.label?.trim()\" class=\"button-label\">{{\n button.label }}</span>\n </mat-button-toggle>\n\n</mat-button-toggle-group>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+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}: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,.button-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{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}mat-button-toggle-group{display:flex;border-radius:4px;border:1px solid #C3C5D1;background:#fff;overflow:hidden;box-shadow:none!important;width:fit-content;align-items:stretch}mat-button-toggle-group[vertical=true],mat-button-toggle-group.mat-button-toggle-group-vertical{flex-direction:column}mat-button-toggle{border:none;background:transparent;cursor:pointer;transition:all .2s ease;position:relative;flex:0 0 auto;width:fit-content;min-width:fit-content;border-radius:0;color:#a2a6b8;font-family:var(--Body-Medium-Font, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}mat-button-toggle:hover:not(.mat-button-toggle-disabled){background-color:#ecedf1}mat-button-toggle.mat-button-toggle-checked,mat-button-toggle[aria-pressed=true],mat-button-toggle.mat-button-toggle-checked:hover{background-color:#ecedf1!important;color:#4b4f62!important;font-weight:400}.al-toggle-buttons-size-sm mat-button-toggle.mat-button-toggle-checked,.al-toggle-buttons-size-md mat-button-toggle.mat-button-toggle-checked,.al-toggle-buttons-size-lg mat-button-toggle.mat-button-toggle-checked{background-color:#ecedf1!important;color:#4b4f62!important}mat-button-toggle.mat-button-toggle-disabled{opacity:.5;cursor:not-allowed;color:#a2a6b8}.button-icon{font-size:14px;line-height:1;margin-right:8px}mat-button-toggle .mat-icon{font-size:14px;width:14px;height:14px}.button-label{color:#4b4f62;white-space:nowrap;line-height:19px}mat-button-toggle.mat-button-toggle-checked .button-label{color:#4b4f62!important;font-weight:400}::ng-deep .al-toggle-buttons[type=icon-only] .button-icon,::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .button-icon{margin-right:0!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .button-icon{width:100%!important;height:100%!important;margin:0!important;padding:0!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .mat-icon{width:20px!important;height:20px!important;font-size:20px!important;line-height:20px!important}.al-toggle-buttons-size-sm mat-button-toggle{height:32px!important;padding:8px 12px!important;border:1px solid #C3C5D1!important;background:#fff!important}.al-toggle-buttons-size-md mat-button-toggle{height:36px!important;padding:8px 12px!important;border:1px solid #C3C5D1!important;background:#fff!important}.al-toggle-buttons-size-lg mat-button-toggle{height:40px!important;padding:8px 12px!important;border:1px solid #C3C5D1!important;background:#fff!important}.al-toggle-buttons-size-sm .button-icon,.al-toggle-buttons-size-sm mat-button-toggle .mat-icon,.al-toggle-buttons-size-md .button-icon,.al-toggle-buttons-size-md mat-button-toggle .mat-icon{font-size:14px;width:14px;height:14px}.al-toggle-buttons-size-lg .button-icon,.al-toggle-buttons-size-lg mat-button-toggle .mat-icon{font-size:16px;width:16px;height:16px}mat-button-toggle-group .mat-button-toggle{border:none!important;border-radius:0!important;border-top:none!important;border-bottom:none!important;outline:none!important;box-shadow:none!important}mat-button-toggle-group .mat-button-toggle:first-child{border-radius:0!important;border-left:none!important}mat-button-toggle-group .mat-button-toggle:last-child{border-radius:0!important;border-right:none!important}mat-button-toggle-group .mat-button-toggle:not(:last-child){border-right:1px solid #C3C5D1!important}mat-button-toggle-group.al-toggle-vertical,mat-button-toggle-group.mat-button-toggle-group-vertical{flex-direction:column!important}mat-button-toggle-group.al-toggle-vertical .mat-button-toggle,mat-button-toggle-group.mat-button-toggle-group-vertical .mat-button-toggle{border-right:0!important;border-bottom:1px solid #C3C5D1!important;width:100%!important}mat-button-toggle-group.al-toggle-vertical .mat-button-toggle:last-child,mat-button-toggle-group.mat-button-toggle-group-vertical .mat-button-toggle:last-child{border-bottom:none!important}mat-button-toggle-group .mat-button-toggle *,mat-button-toggle-group .mat-button-toggle-appearance-standard,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-label-content,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-button,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-ripple{border:none!important;box-shadow:none!important;padding:0!important}mat-button-toggle-group .mat-button-toggle:focus .mat-button-toggle-focus-overlay{display:none!important}.mat-button-toggle-checked .mat-button-toggle-label-content:before,.mat-button-toggle-checked .mat-button-toggle-label-content:after,.mat-button-toggle-checked:before,.mat-button-toggle-checked:after,.mat-button-toggle-checked .mat-icon:not(.button-icon),.mat-button-toggle-checked .material-icons:not(.button-icon){display:none!important}.mat-button-toggle-checked .button-icon{display:inline-flex!important}.mat-button-toggle-checked .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{background-image:none!important}::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:20px!important}::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none!important}mat-button-toggle:focus-visible{outline:2px solid #5473E8;outline-offset:2px}\n"] }]
|
|
2504
2580
|
}], propDecorators: { buttons: [{
|
|
2505
2581
|
type: Input
|
|
2506
2582
|
}], selectedId: [{
|
|
@@ -2636,7 +2712,7 @@ class SlideToggleComponent {
|
|
|
2636
2712
|
useExisting: forwardRef(() => SlideToggleComponent),
|
|
2637
2713
|
multi: true
|
|
2638
2714
|
}
|
|
2639
|
-
], viewQueries: [{ propertyName: "element", first: true, predicate: ["slideToggle"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"slide-toggle-container\" [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\">\n <mat-slide-toggle #slideToggle [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\" [required]=\"required\"\n [color]=\"color\" (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\" (blur)=\"handleBlur($event)\"\n class=\"custom-slide-toggle\" [class.slide-toggle-small]=\"size === 'small'\"\n [class.slide-toggle-medium]=\"size === 'medium'\" [class.slide-toggle-large]=\"size === 'large'\"\n [attr.data-testid]=\"dataTestId\">\n <div *ngIf=\"showLabels\" class=\"slide-toggle-labels\">\n <div *ngIf=\"labelText\" class=\"slide-toggle-label-main\">\n {{ labelText }}\n </div>\n <div *ngIf=\"helperText\" class=\"slide-toggle-label-helper\">\n {{ helperText }}\n </div>\n </div>\n <ng-content></ng-content>\n </mat-slide-toggle>\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,.slide-toggle-label-main,.custom-slide-toggle .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,.slide-toggle-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:140%;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}.slide-toggle-container{position:relative;display:inline-block}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch{width:52px!important;height:32px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch__track{width:52px!important;height:32px!important;border-radius:16px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch__handle{width:22px!important;height:22px!important;border-radius:50%!important;top:16px!important;left:4px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch{width:40px!important;height:24px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch__track{width:40px!important;height:24px!important;border-radius:12px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch__handle{width:18px!important;height:18px!important;border-radius:50%!important;top:12px!important;left:3px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch{width:64px!important;height:40px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch__track{width:64px!important;height:40px!important;border-radius:20px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch__handle{width:28px!important;height:28px!important;border-radius:50%!important;top:20px!important;left:6px!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(2px)!important;top:5px!important}::ng-deep .custom-slide-toggle.slide-toggle-small.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(7px)!important;top:3px!important}::ng-deep .custom-slide-toggle.slide-toggle-large.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(-7px)!important;top:6px!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#768fed!important;border-color:#768fed!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#768fed!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#768fed!important;border-color:#768fed!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#768fed!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-green.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#37c1ce!important;border-color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-green.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#37c1ce!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-error.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#e854a4!important;border-color:#e854a4!important}::ng-deep .custom-slide-toggle.mat-error.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#e854a4!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled .mdc-switch__track{background-color:#dee0e6!important;border-color:#dee0e6!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#dee0e6!important;border-color:#dee0e6!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled .mdc-switch__handle{background-color:#dee0e6!important}.custom-slide-toggle .mdc-switch__track{border-color:#c3c5d1!important}::ng-deep .custom-slide-toggle:not(.mat-mdc-slide-toggle-checked) .mdc-switch__track{border:2px solid #C3C5D1!important;background-color:#fff!important}.custom-slide-toggle .mdc-switch__ripple{background-color:#5473e81f!important}.custom-slide-toggle:hover .mdc-switch__ripple{background-color:#5473e83d!important}.custom-slide-toggle .mdc-form-field>label{color:#4b4f62!important}.slide-toggle-label-main{color:#4b4f62!important;margin-left:8px}.slide-toggle-label-helper{color:#a2a6b8!important;margin-top:4px!important;margin-left:8px}.custom-slide-toggle .mdc-switch__handle{transition:transform .2s ease!important}.custom-slide-toggle .mdc-switch__track{transition:background-color .2s ease,border-color .2s ease!important}.slide-toggle-custom-icon{font-size:18px!important;color:#768fed!important;display:flex!important;align-items:center!important;justify-content:center!important;width:24px!important;height:24px!important;font-family:Material Icons!important;font-weight:400!important;font-style:normal!important;line-height:1!important;letter-spacing:normal!important;text-transform:none!important;white-space:nowrap!important;word-wrap:normal!important;direction:ltr!important;-webkit-font-feature-settings:\"liga\"!important;-webkit-font-smoothing:antialiased!important;text-rendering:optimizeLegibility!important;-moz-osx-font-smoothing:grayscale!important}::ng-deep .custom-slide-toggle.slide-toggle-small .slide-toggle-custom-icon{font-size:14px!important;width:18px!important;height:18px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .slide-toggle-custom-icon{font-size:18px!important;width:24px!important;height:24px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .slide-toggle-custom-icon{font-size:22px!important;width:28px!important;height:28px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon{position:relative!important;border-radius:50%!important;transition:all .2s ease!important;cursor:pointer!important;padding:4px!important;margin:-4px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}::ng-deep .custom-slide-toggle .mdc-switch__handle:hover .slide-toggle-custom-icon{background-color:#71779326!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:hover,::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:focus{background-color:#71779326!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:active{background-color:#71779340!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:before{content:\"\"!important;position:absolute!important;top:50%!important;left:50%!important;width:calc(100% + 8px)!important;height:calc(100% + 8px)!important;background-color:#71779326!important;border-radius:50%!important;transform:translate(-50%,-50%) scale(0)!important;transition:transform .3s ease!important;pointer-events:none!important;z-index:-1!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:active:before{transform:translate(-50%,-50%) scale(1)!important}::ng-deep .mdc-switch__icon{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mat-slide-toggle-thumb{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mdc-switch__handle{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mdc-switch__icon--on,::ng-deep .mdc-switch__icon--off{display:none!important}::ng-deep .mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle:after{background:#e5e9fc!important}::ng-deep .mdc-switch--selected:enabled .mdc-switch__handle:after{background:#e5e9fc!important}::ng-deep .mdc-switch:not(.mdc-switch--selected):enabled:focus:not(:active) .mdc-switch__handle:after{background:#717793!important}::ng-deep .mdc-switch:not(.mdc-switch--selected):enabled:focus:not(:active) .mdc-switch__track:before{background:#fff!important}::ng-deep .custom-slide-toggle.mat-error .mdc-switch:enabled:focus:not(:active) .mdc-switch__track:after{background:#e854a4!important}::ng-deep .mdc-switch__track:after{background-color:#e854a4!important}::ng-deep .custom-slide-toggle.mat-green .mdc-switch__track:after{background-color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-primary .mdc-switch__track:after{background-color:#768fed!important}::ng-deep .mdc-switch__track:before{background-color:#fff!important}::ng-deep .custom-slide-toggle:not(.mat-mdc-slide-toggle-checked) .slide-toggle-custom-icon{color:#fff!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#768fed!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#768fed!important}::ng-deep .custom-slide-toggle.mat-green.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-error.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#e854a4!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
2715
|
+
], viewQueries: [{ propertyName: "element", first: true, predicate: ["slideToggle"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"slide-toggle-container\" [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\">\n <mat-slide-toggle #slideToggle [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\" [required]=\"required\"\n [color]=\"color\" (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\" (blur)=\"handleBlur($event)\"\n class=\"custom-slide-toggle\" [class.slide-toggle-small]=\"size === 'small'\"\n [class.slide-toggle-medium]=\"size === 'medium'\" [class.slide-toggle-large]=\"size === 'large'\"\n [attr.data-testid]=\"dataTestId\">\n <div *ngIf=\"showLabels\" class=\"slide-toggle-labels\">\n <div *ngIf=\"labelText\" class=\"slide-toggle-label-main\">\n {{ labelText }}\n </div>\n <div *ngIf=\"helperText\" class=\"slide-toggle-label-helper\">\n {{ helperText }}\n </div>\n </div>\n <ng-content></ng-content>\n </mat-slide-toggle>\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,.slide-toggle-label-main,.custom-slide-toggle .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,.slide-toggle-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}.slide-toggle-container{position:relative;display:inline-block}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch{width:52px!important;height:32px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch__track{width:52px!important;height:32px!important;border-radius:16px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch__handle{width:22px!important;height:22px!important;border-radius:50%!important;top:16px!important;left:4px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch{width:40px!important;height:24px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch__track{width:40px!important;height:24px!important;border-radius:12px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch__handle{width:18px!important;height:18px!important;border-radius:50%!important;top:12px!important;left:3px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch{width:64px!important;height:40px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch__track{width:64px!important;height:40px!important;border-radius:20px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch__handle{width:28px!important;height:28px!important;border-radius:50%!important;top:20px!important;left:6px!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(2px)!important;top:5px!important}::ng-deep .custom-slide-toggle.slide-toggle-small.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(7px)!important;top:3px!important}::ng-deep .custom-slide-toggle.slide-toggle-large.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(-7px)!important;top:6px!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#768fed!important;border-color:#768fed!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#768fed!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#768fed!important;border-color:#768fed!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#768fed!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-green.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#37c1ce!important;border-color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-green.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#37c1ce!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-error.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#e854a4!important;border-color:#e854a4!important}::ng-deep .custom-slide-toggle.mat-error.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#e854a4!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled .mdc-switch__track{background-color:#dee0e6!important;border-color:#dee0e6!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#dee0e6!important;border-color:#dee0e6!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled .mdc-switch__handle{background-color:#dee0e6!important}.custom-slide-toggle .mdc-switch__track{border-color:#c3c5d1!important}::ng-deep .custom-slide-toggle:not(.mat-mdc-slide-toggle-checked) .mdc-switch__track{border:2px solid #C3C5D1!important;background-color:#fff!important}.custom-slide-toggle .mdc-switch__ripple{background-color:#5473e81f!important}.custom-slide-toggle:hover .mdc-switch__ripple{background-color:#5473e83d!important}.custom-slide-toggle .mdc-form-field>label{color:#4b4f62!important}.slide-toggle-label-main{color:#4b4f62!important;margin-left:8px}.slide-toggle-label-helper{color:#a2a6b8!important;margin-top:4px!important;margin-left:8px}.custom-slide-toggle .mdc-switch__handle{transition:transform .2s ease!important}.custom-slide-toggle .mdc-switch__track{transition:background-color .2s ease,border-color .2s ease!important}.slide-toggle-custom-icon{font-size:18px!important;color:#768fed!important;display:flex!important;align-items:center!important;justify-content:center!important;width:24px!important;height:24px!important;font-family:Material Icons!important;font-weight:400!important;font-style:normal!important;line-height:1!important;letter-spacing:normal!important;text-transform:none!important;white-space:nowrap!important;word-wrap:normal!important;direction:ltr!important;-webkit-font-feature-settings:\"liga\"!important;-webkit-font-smoothing:antialiased!important;text-rendering:optimizeLegibility!important;-moz-osx-font-smoothing:grayscale!important}::ng-deep .custom-slide-toggle.slide-toggle-small .slide-toggle-custom-icon{font-size:14px!important;width:18px!important;height:18px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .slide-toggle-custom-icon{font-size:18px!important;width:24px!important;height:24px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .slide-toggle-custom-icon{font-size:22px!important;width:28px!important;height:28px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon{position:relative!important;border-radius:50%!important;transition:all .2s ease!important;cursor:pointer!important;padding:4px!important;margin:-4px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}::ng-deep .custom-slide-toggle .mdc-switch__handle:hover .slide-toggle-custom-icon{background-color:#71779326!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:hover,::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:focus{background-color:#71779326!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:active{background-color:#71779340!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:before{content:\"\"!important;position:absolute!important;top:50%!important;left:50%!important;width:calc(100% + 8px)!important;height:calc(100% + 8px)!important;background-color:#71779326!important;border-radius:50%!important;transform:translate(-50%,-50%) scale(0)!important;transition:transform .3s ease!important;pointer-events:none!important;z-index:-1!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:active:before{transform:translate(-50%,-50%) scale(1)!important}::ng-deep .mdc-switch__icon{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mat-slide-toggle-thumb{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mdc-switch__handle{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mdc-switch__icon--on,::ng-deep .mdc-switch__icon--off{display:none!important}::ng-deep .mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle:after{background:#e5e9fc!important}::ng-deep .mdc-switch--selected:enabled .mdc-switch__handle:after{background:#e5e9fc!important}::ng-deep .mdc-switch:not(.mdc-switch--selected):enabled:focus:not(:active) .mdc-switch__handle:after{background:#717793!important}::ng-deep .mdc-switch:not(.mdc-switch--selected):enabled:focus:not(:active) .mdc-switch__track:before{background:#fff!important}::ng-deep .custom-slide-toggle.mat-error .mdc-switch:enabled:focus:not(:active) .mdc-switch__track:after{background:#e854a4!important}::ng-deep .mdc-switch__track:after{background-color:#e854a4!important}::ng-deep .custom-slide-toggle.mat-green .mdc-switch__track:after{background-color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-primary .mdc-switch__track:after{background-color:#768fed!important}::ng-deep .mdc-switch__track:before{background-color:#fff!important}::ng-deep .custom-slide-toggle:not(.mat-mdc-slide-toggle-checked) .slide-toggle-custom-icon{color:#fff!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#768fed!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#768fed!important}::ng-deep .custom-slide-toggle.mat-green.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-error.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#e854a4!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
2640
2716
|
}
|
|
2641
2717
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SlideToggleComponent, decorators: [{
|
|
2642
2718
|
type: Component,
|
|
@@ -2646,7 +2722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2646
2722
|
useExisting: forwardRef(() => SlideToggleComponent),
|
|
2647
2723
|
multi: true
|
|
2648
2724
|
}
|
|
2649
|
-
], template: "<div class=\"slide-toggle-container\" [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\">\n <mat-slide-toggle #slideToggle [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\" [required]=\"required\"\n [color]=\"color\" (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\" (blur)=\"handleBlur($event)\"\n class=\"custom-slide-toggle\" [class.slide-toggle-small]=\"size === 'small'\"\n [class.slide-toggle-medium]=\"size === 'medium'\" [class.slide-toggle-large]=\"size === 'large'\"\n [attr.data-testid]=\"dataTestId\">\n <div *ngIf=\"showLabels\" class=\"slide-toggle-labels\">\n <div *ngIf=\"labelText\" class=\"slide-toggle-label-main\">\n {{ labelText }}\n </div>\n <div *ngIf=\"helperText\" class=\"slide-toggle-label-helper\">\n {{ helperText }}\n </div>\n </div>\n <ng-content></ng-content>\n </mat-slide-toggle>\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,.slide-toggle-label-main,.custom-slide-toggle .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,.slide-toggle-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:140%;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}.slide-toggle-container{position:relative;display:inline-block}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch{width:52px!important;height:32px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch__track{width:52px!important;height:32px!important;border-radius:16px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch__handle{width:22px!important;height:22px!important;border-radius:50%!important;top:16px!important;left:4px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch{width:40px!important;height:24px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch__track{width:40px!important;height:24px!important;border-radius:12px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch__handle{width:18px!important;height:18px!important;border-radius:50%!important;top:12px!important;left:3px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch{width:64px!important;height:40px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch__track{width:64px!important;height:40px!important;border-radius:20px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch__handle{width:28px!important;height:28px!important;border-radius:50%!important;top:20px!important;left:6px!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(2px)!important;top:5px!important}::ng-deep .custom-slide-toggle.slide-toggle-small.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(7px)!important;top:3px!important}::ng-deep .custom-slide-toggle.slide-toggle-large.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(-7px)!important;top:6px!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#768fed!important;border-color:#768fed!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#768fed!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#768fed!important;border-color:#768fed!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#768fed!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-green.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#37c1ce!important;border-color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-green.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#37c1ce!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-error.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#e854a4!important;border-color:#e854a4!important}::ng-deep .custom-slide-toggle.mat-error.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#e854a4!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled .mdc-switch__track{background-color:#dee0e6!important;border-color:#dee0e6!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#dee0e6!important;border-color:#dee0e6!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled .mdc-switch__handle{background-color:#dee0e6!important}.custom-slide-toggle .mdc-switch__track{border-color:#c3c5d1!important}::ng-deep .custom-slide-toggle:not(.mat-mdc-slide-toggle-checked) .mdc-switch__track{border:2px solid #C3C5D1!important;background-color:#fff!important}.custom-slide-toggle .mdc-switch__ripple{background-color:#5473e81f!important}.custom-slide-toggle:hover .mdc-switch__ripple{background-color:#5473e83d!important}.custom-slide-toggle .mdc-form-field>label{color:#4b4f62!important}.slide-toggle-label-main{color:#4b4f62!important;margin-left:8px}.slide-toggle-label-helper{color:#a2a6b8!important;margin-top:4px!important;margin-left:8px}.custom-slide-toggle .mdc-switch__handle{transition:transform .2s ease!important}.custom-slide-toggle .mdc-switch__track{transition:background-color .2s ease,border-color .2s ease!important}.slide-toggle-custom-icon{font-size:18px!important;color:#768fed!important;display:flex!important;align-items:center!important;justify-content:center!important;width:24px!important;height:24px!important;font-family:Material Icons!important;font-weight:400!important;font-style:normal!important;line-height:1!important;letter-spacing:normal!important;text-transform:none!important;white-space:nowrap!important;word-wrap:normal!important;direction:ltr!important;-webkit-font-feature-settings:\"liga\"!important;-webkit-font-smoothing:antialiased!important;text-rendering:optimizeLegibility!important;-moz-osx-font-smoothing:grayscale!important}::ng-deep .custom-slide-toggle.slide-toggle-small .slide-toggle-custom-icon{font-size:14px!important;width:18px!important;height:18px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .slide-toggle-custom-icon{font-size:18px!important;width:24px!important;height:24px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .slide-toggle-custom-icon{font-size:22px!important;width:28px!important;height:28px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon{position:relative!important;border-radius:50%!important;transition:all .2s ease!important;cursor:pointer!important;padding:4px!important;margin:-4px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}::ng-deep .custom-slide-toggle .mdc-switch__handle:hover .slide-toggle-custom-icon{background-color:#71779326!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:hover,::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:focus{background-color:#71779326!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:active{background-color:#71779340!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:before{content:\"\"!important;position:absolute!important;top:50%!important;left:50%!important;width:calc(100% + 8px)!important;height:calc(100% + 8px)!important;background-color:#71779326!important;border-radius:50%!important;transform:translate(-50%,-50%) scale(0)!important;transition:transform .3s ease!important;pointer-events:none!important;z-index:-1!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:active:before{transform:translate(-50%,-50%) scale(1)!important}::ng-deep .mdc-switch__icon{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mat-slide-toggle-thumb{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mdc-switch__handle{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mdc-switch__icon--on,::ng-deep .mdc-switch__icon--off{display:none!important}::ng-deep .mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle:after{background:#e5e9fc!important}::ng-deep .mdc-switch--selected:enabled .mdc-switch__handle:after{background:#e5e9fc!important}::ng-deep .mdc-switch:not(.mdc-switch--selected):enabled:focus:not(:active) .mdc-switch__handle:after{background:#717793!important}::ng-deep .mdc-switch:not(.mdc-switch--selected):enabled:focus:not(:active) .mdc-switch__track:before{background:#fff!important}::ng-deep .custom-slide-toggle.mat-error .mdc-switch:enabled:focus:not(:active) .mdc-switch__track:after{background:#e854a4!important}::ng-deep .mdc-switch__track:after{background-color:#e854a4!important}::ng-deep .custom-slide-toggle.mat-green .mdc-switch__track:after{background-color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-primary .mdc-switch__track:after{background-color:#768fed!important}::ng-deep .mdc-switch__track:before{background-color:#fff!important}::ng-deep .custom-slide-toggle:not(.mat-mdc-slide-toggle-checked) .slide-toggle-custom-icon{color:#fff!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#768fed!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#768fed!important}::ng-deep .custom-slide-toggle.mat-green.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-error.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#e854a4!important}\n"] }]
|
|
2725
|
+
], template: "<div class=\"slide-toggle-container\" [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\">\n <mat-slide-toggle #slideToggle [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\" [required]=\"required\"\n [color]=\"color\" (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\" (blur)=\"handleBlur($event)\"\n class=\"custom-slide-toggle\" [class.slide-toggle-small]=\"size === 'small'\"\n [class.slide-toggle-medium]=\"size === 'medium'\" [class.slide-toggle-large]=\"size === 'large'\"\n [attr.data-testid]=\"dataTestId\">\n <div *ngIf=\"showLabels\" class=\"slide-toggle-labels\">\n <div *ngIf=\"labelText\" class=\"slide-toggle-label-main\">\n {{ labelText }}\n </div>\n <div *ngIf=\"helperText\" class=\"slide-toggle-label-helper\">\n {{ helperText }}\n </div>\n </div>\n <ng-content></ng-content>\n </mat-slide-toggle>\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,.slide-toggle-label-main,.custom-slide-toggle .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,.slide-toggle-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}.slide-toggle-container{position:relative;display:inline-block}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch{width:52px!important;height:32px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch__track{width:52px!important;height:32px!important;border-radius:16px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch__handle{width:22px!important;height:22px!important;border-radius:50%!important;top:16px!important;left:4px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch{width:40px!important;height:24px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch__track{width:40px!important;height:24px!important;border-radius:12px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch__handle{width:18px!important;height:18px!important;border-radius:50%!important;top:12px!important;left:3px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch{width:64px!important;height:40px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch__track{width:64px!important;height:40px!important;border-radius:20px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch__handle{width:28px!important;height:28px!important;border-radius:50%!important;top:20px!important;left:6px!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(2px)!important;top:5px!important}::ng-deep .custom-slide-toggle.slide-toggle-small.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(7px)!important;top:3px!important}::ng-deep .custom-slide-toggle.slide-toggle-large.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(-7px)!important;top:6px!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#768fed!important;border-color:#768fed!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#768fed!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#768fed!important;border-color:#768fed!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#768fed!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-green.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#37c1ce!important;border-color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-green.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#37c1ce!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-error.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#e854a4!important;border-color:#e854a4!important}::ng-deep .custom-slide-toggle.mat-error.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#e854a4!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled .mdc-switch__track{background-color:#dee0e6!important;border-color:#dee0e6!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#dee0e6!important;border-color:#dee0e6!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled .mdc-switch__handle{background-color:#dee0e6!important}.custom-slide-toggle .mdc-switch__track{border-color:#c3c5d1!important}::ng-deep .custom-slide-toggle:not(.mat-mdc-slide-toggle-checked) .mdc-switch__track{border:2px solid #C3C5D1!important;background-color:#fff!important}.custom-slide-toggle .mdc-switch__ripple{background-color:#5473e81f!important}.custom-slide-toggle:hover .mdc-switch__ripple{background-color:#5473e83d!important}.custom-slide-toggle .mdc-form-field>label{color:#4b4f62!important}.slide-toggle-label-main{color:#4b4f62!important;margin-left:8px}.slide-toggle-label-helper{color:#a2a6b8!important;margin-top:4px!important;margin-left:8px}.custom-slide-toggle .mdc-switch__handle{transition:transform .2s ease!important}.custom-slide-toggle .mdc-switch__track{transition:background-color .2s ease,border-color .2s ease!important}.slide-toggle-custom-icon{font-size:18px!important;color:#768fed!important;display:flex!important;align-items:center!important;justify-content:center!important;width:24px!important;height:24px!important;font-family:Material Icons!important;font-weight:400!important;font-style:normal!important;line-height:1!important;letter-spacing:normal!important;text-transform:none!important;white-space:nowrap!important;word-wrap:normal!important;direction:ltr!important;-webkit-font-feature-settings:\"liga\"!important;-webkit-font-smoothing:antialiased!important;text-rendering:optimizeLegibility!important;-moz-osx-font-smoothing:grayscale!important}::ng-deep .custom-slide-toggle.slide-toggle-small .slide-toggle-custom-icon{font-size:14px!important;width:18px!important;height:18px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .slide-toggle-custom-icon{font-size:18px!important;width:24px!important;height:24px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .slide-toggle-custom-icon{font-size:22px!important;width:28px!important;height:28px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon{position:relative!important;border-radius:50%!important;transition:all .2s ease!important;cursor:pointer!important;padding:4px!important;margin:-4px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}::ng-deep .custom-slide-toggle .mdc-switch__handle:hover .slide-toggle-custom-icon{background-color:#71779326!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:hover,::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:focus{background-color:#71779326!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:active{background-color:#71779340!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:before{content:\"\"!important;position:absolute!important;top:50%!important;left:50%!important;width:calc(100% + 8px)!important;height:calc(100% + 8px)!important;background-color:#71779326!important;border-radius:50%!important;transform:translate(-50%,-50%) scale(0)!important;transition:transform .3s ease!important;pointer-events:none!important;z-index:-1!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:active:before{transform:translate(-50%,-50%) scale(1)!important}::ng-deep .mdc-switch__icon{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mat-slide-toggle-thumb{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mdc-switch__handle{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mdc-switch__icon--on,::ng-deep .mdc-switch__icon--off{display:none!important}::ng-deep .mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle:after{background:#e5e9fc!important}::ng-deep .mdc-switch--selected:enabled .mdc-switch__handle:after{background:#e5e9fc!important}::ng-deep .mdc-switch:not(.mdc-switch--selected):enabled:focus:not(:active) .mdc-switch__handle:after{background:#717793!important}::ng-deep .mdc-switch:not(.mdc-switch--selected):enabled:focus:not(:active) .mdc-switch__track:before{background:#fff!important}::ng-deep .custom-slide-toggle.mat-error .mdc-switch:enabled:focus:not(:active) .mdc-switch__track:after{background:#e854a4!important}::ng-deep .mdc-switch__track:after{background-color:#e854a4!important}::ng-deep .custom-slide-toggle.mat-green .mdc-switch__track:after{background-color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-primary .mdc-switch__track:after{background-color:#768fed!important}::ng-deep .mdc-switch__track:before{background-color:#fff!important}::ng-deep .custom-slide-toggle:not(.mat-mdc-slide-toggle-checked) .slide-toggle-custom-icon{color:#fff!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#768fed!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#768fed!important}::ng-deep .custom-slide-toggle.mat-green.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-error.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#e854a4!important}\n"] }]
|
|
2650
2726
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { checked: [{
|
|
2651
2727
|
type: Input
|
|
2652
2728
|
}], disabled: [{
|
|
@@ -2753,11 +2829,11 @@ class IconButtonComponent {
|
|
|
2753
2829
|
return getEffectiveFontSet(this.icon, this.iconOutlined);
|
|
2754
2830
|
}
|
|
2755
2831
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconButtonComponent, deps: [{ token: i1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2756
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: IconButtonComponent, isStandalone: true, selector: "al-icon-button", inputs: { icon: "icon", customColour: "customColour", iconOutlined: "iconOutlined", size: "size", colour: "colour", disabled: "disabled", dataTestId: "dataTestId" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button type=\"button\" class=\"icon-btn\" [ngClass]=\"[\n 'icon-btn',\n 'size-' + size,\n 'color-' + colour,\n iconOutlined ? 'icon-outlined' : '',\n disabled ? 'icon-btn-disabled' : ''\n ]\" [disabled]=\"disabled\" (click)=\"handleClick($event)\" [attr.aria-label]=\"icon\"\n [attr.data-test-id]=\"effectiveDataTestId\">\n <mat-icon [fontSet]=\"getEffectiveFontSet()\" class=\"icon-btn-icon\"\n [ngStyle]=\"customColour ? { color: customColour } : null\">{{ getEffectiveIconName()\n }}</mat-icon>\n</button>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=network_node\";@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:140%;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}.icon-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;transition:background .18s,box-shadow .18s;outline:none;padding:0;min-width:0;min-height:0}.icon-btn-disabled{opacity:.4;pointer-events:none}.icon-btn-icon{font-size:20px;width:20px;height:20px}.size-xs .icon-btn-icon{font-size:12px;width:12px;height:12px}.size-sm .icon-btn-icon,.size-base .icon-btn-icon{font-size:16px;width:16px;height:16px}.size-l .icon-btn-icon{font-size:20px;width:20px;height:20px}.size-xl .icon-btn-icon{font-size:24px;width:24px;height:24px}.size-header .icon-btn-icon{font-size:20px;width:20px;height:20px}.color-blue,.color-blue .icon-btn-icon{color:#5473e8}.color-green,.color-green .icon-btn-icon{color:#37c1ce}.color-grey,.color-grey .icon-btn-icon{color:#383b4a}.color-error,.color-error .icon-btn-icon{color:#e854a4}.color-success,.color-success .icon-btn-icon{color:#00ad83}.color-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%)!important;color:#fff}.color-gradient .icon-btn-icon{color:#fff!important}.icon-outlined{background:none!important}.material-symbols-outlined{font-family:Material Symbols Outlined!important;font-weight:400;font-style:normal;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}mat-icon.material-symbols-outlined,.icon-btn-icon.material-symbols-outlined{font-family:Material Symbols Outlined!important;font-weight:400!important;font-style:normal!important;font-feature-settings:\"liga\"!important;-webkit-font-feature-settings:\"liga\"!important;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
2832
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: IconButtonComponent, isStandalone: true, selector: "al-icon-button", inputs: { icon: "icon", customColour: "customColour", iconOutlined: "iconOutlined", size: "size", colour: "colour", disabled: "disabled", dataTestId: "dataTestId" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button type=\"button\" class=\"icon-btn\" [ngClass]=\"[\n 'icon-btn',\n 'size-' + size,\n 'color-' + colour,\n iconOutlined ? 'icon-outlined' : '',\n disabled ? 'icon-btn-disabled' : ''\n ]\" [disabled]=\"disabled\" (click)=\"handleClick($event)\" [attr.aria-label]=\"icon\"\n [attr.data-test-id]=\"effectiveDataTestId\">\n <mat-icon [fontSet]=\"getEffectiveFontSet()\" class=\"icon-btn-icon\"\n [ngStyle]=\"customColour ? { color: customColour } : null\">{{ getEffectiveIconName()\n }}</mat-icon>\n</button>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=network_node\";@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}.icon-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;transition:background .18s,box-shadow .18s;outline:none;padding:0;min-width:0;min-height:0}.icon-btn-disabled{opacity:.4;pointer-events:none}.icon-btn-icon{font-size:20px;width:20px;height:20px}.size-xs .icon-btn-icon{font-size:12px;width:12px;height:12px}.size-sm .icon-btn-icon,.size-base .icon-btn-icon{font-size:16px;width:16px;height:16px}.size-l .icon-btn-icon{font-size:20px;width:20px;height:20px}.size-xl .icon-btn-icon{font-size:24px;width:24px;height:24px}.size-header .icon-btn-icon{font-size:20px;width:20px;height:20px}.color-blue,.color-blue .icon-btn-icon{color:#5473e8}.color-green,.color-green .icon-btn-icon{color:#37c1ce}.color-grey,.color-grey .icon-btn-icon{color:#383b4a}.color-error,.color-error .icon-btn-icon{color:#e854a4}.color-success,.color-success .icon-btn-icon{color:#00ad83}.color-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%)!important;color:#fff}.color-gradient .icon-btn-icon{color:#fff!important}.icon-outlined{background:none!important}.material-symbols-outlined{font-family:Material Symbols Outlined!important;font-weight:400;font-style:normal;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}mat-icon.material-symbols-outlined,.icon-btn-icon.material-symbols-outlined{font-family:Material Symbols Outlined!important;font-weight:400!important;font-style:normal!important;font-feature-settings:\"liga\"!important;-webkit-font-feature-settings:\"liga\"!important;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
2757
2833
|
}
|
|
2758
2834
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
2759
2835
|
type: Component,
|
|
2760
|
-
args: [{ selector: 'al-icon-button', standalone: true, imports: [CommonModule, MatIconModule], template: "<button type=\"button\" class=\"icon-btn\" [ngClass]=\"[\n 'icon-btn',\n 'size-' + size,\n 'color-' + colour,\n iconOutlined ? 'icon-outlined' : '',\n disabled ? 'icon-btn-disabled' : ''\n ]\" [disabled]=\"disabled\" (click)=\"handleClick($event)\" [attr.aria-label]=\"icon\"\n [attr.data-test-id]=\"effectiveDataTestId\">\n <mat-icon [fontSet]=\"getEffectiveFontSet()\" class=\"icon-btn-icon\"\n [ngStyle]=\"customColour ? { color: customColour } : null\">{{ getEffectiveIconName()\n }}</mat-icon>\n</button>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=network_node\";@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:140%;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}.icon-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;transition:background .18s,box-shadow .18s;outline:none;padding:0;min-width:0;min-height:0}.icon-btn-disabled{opacity:.4;pointer-events:none}.icon-btn-icon{font-size:20px;width:20px;height:20px}.size-xs .icon-btn-icon{font-size:12px;width:12px;height:12px}.size-sm .icon-btn-icon,.size-base .icon-btn-icon{font-size:16px;width:16px;height:16px}.size-l .icon-btn-icon{font-size:20px;width:20px;height:20px}.size-xl .icon-btn-icon{font-size:24px;width:24px;height:24px}.size-header .icon-btn-icon{font-size:20px;width:20px;height:20px}.color-blue,.color-blue .icon-btn-icon{color:#5473e8}.color-green,.color-green .icon-btn-icon{color:#37c1ce}.color-grey,.color-grey .icon-btn-icon{color:#383b4a}.color-error,.color-error .icon-btn-icon{color:#e854a4}.color-success,.color-success .icon-btn-icon{color:#00ad83}.color-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%)!important;color:#fff}.color-gradient .icon-btn-icon{color:#fff!important}.icon-outlined{background:none!important}.material-symbols-outlined{font-family:Material Symbols Outlined!important;font-weight:400;font-style:normal;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}mat-icon.material-symbols-outlined,.icon-btn-icon.material-symbols-outlined{font-family:Material Symbols Outlined!important;font-weight:400!important;font-style:normal!important;font-feature-settings:\"liga\"!important;-webkit-font-feature-settings:\"liga\"!important;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24!important}\n"] }]
|
|
2836
|
+
args: [{ selector: 'al-icon-button', standalone: true, imports: [CommonModule, MatIconModule], template: "<button type=\"button\" class=\"icon-btn\" [ngClass]=\"[\n 'icon-btn',\n 'size-' + size,\n 'color-' + colour,\n iconOutlined ? 'icon-outlined' : '',\n disabled ? 'icon-btn-disabled' : ''\n ]\" [disabled]=\"disabled\" (click)=\"handleClick($event)\" [attr.aria-label]=\"icon\"\n [attr.data-test-id]=\"effectiveDataTestId\">\n <mat-icon [fontSet]=\"getEffectiveFontSet()\" class=\"icon-btn-icon\"\n [ngStyle]=\"customColour ? { color: customColour } : null\">{{ getEffectiveIconName()\n }}</mat-icon>\n</button>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=network_node\";@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}.icon-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;transition:background .18s,box-shadow .18s;outline:none;padding:0;min-width:0;min-height:0}.icon-btn-disabled{opacity:.4;pointer-events:none}.icon-btn-icon{font-size:20px;width:20px;height:20px}.size-xs .icon-btn-icon{font-size:12px;width:12px;height:12px}.size-sm .icon-btn-icon,.size-base .icon-btn-icon{font-size:16px;width:16px;height:16px}.size-l .icon-btn-icon{font-size:20px;width:20px;height:20px}.size-xl .icon-btn-icon{font-size:24px;width:24px;height:24px}.size-header .icon-btn-icon{font-size:20px;width:20px;height:20px}.color-blue,.color-blue .icon-btn-icon{color:#5473e8}.color-green,.color-green .icon-btn-icon{color:#37c1ce}.color-grey,.color-grey .icon-btn-icon{color:#383b4a}.color-error,.color-error .icon-btn-icon{color:#e854a4}.color-success,.color-success .icon-btn-icon{color:#00ad83}.color-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%)!important;color:#fff}.color-gradient .icon-btn-icon{color:#fff!important}.icon-outlined{background:none!important}.material-symbols-outlined{font-family:Material Symbols Outlined!important;font-weight:400;font-style:normal;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}mat-icon.material-symbols-outlined,.icon-btn-icon.material-symbols-outlined{font-family:Material Symbols Outlined!important;font-weight:400!important;font-style:normal!important;font-feature-settings:\"liga\"!important;-webkit-font-feature-settings:\"liga\"!important;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24!important}\n"] }]
|
|
2761
2837
|
}], ctorParameters: () => [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }], propDecorators: { icon: [{
|
|
2762
2838
|
type: Input
|
|
2763
2839
|
}], customColour: [{
|
|
@@ -2796,6 +2872,9 @@ class AiApplyBarComponent {
|
|
|
2796
2872
|
this.applyDisabled = false;
|
|
2797
2873
|
// Close button
|
|
2798
2874
|
this.showClose = true;
|
|
2875
|
+
this.iconOutlined = false;
|
|
2876
|
+
this.closeButtonTooltip = 'Close';
|
|
2877
|
+
this.closeButtonTooltipPosition = 'above';
|
|
2799
2878
|
// Helper text (second row)
|
|
2800
2879
|
this.showHelperText = false;
|
|
2801
2880
|
this.helperText = 'Action will be applied globally to all sections';
|
|
@@ -2811,11 +2890,11 @@ class AiApplyBarComponent {
|
|
|
2811
2890
|
this.valueChange.emit(v);
|
|
2812
2891
|
}
|
|
2813
2892
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiApplyBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2814
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AiApplyBarComponent, isStandalone: true, selector: "al-ai-apply-bar", inputs: { dataTestId: "dataTestId", showChevron: "showChevron", showChevronButton: "showChevronButton", placeholder: "placeholder", options: "options", value: "value", disabled: "disabled", applyLabel: "applyLabel", applyDisabled: "applyDisabled", showClose: "showClose", showHelperText: "showHelperText", helperText: "helperText" }, outputs: { valueChange: "valueChange", applyClick: "applyClick", closeClick: "closeClick", chevronClick: "chevronClick" }, ngImport: i0, template: "<div class=\"ai-apply-wrap\" [attr.data-test-id]=\"dataTestId\">\n <div class=\"ai-apply-rail\">\n <div class=\"ai-apply-row\">\n <div class=\"ai-apply-input\">\n <al-input
|
|
2893
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AiApplyBarComponent, isStandalone: true, selector: "al-ai-apply-bar", inputs: { dataTestId: "dataTestId", showChevron: "showChevron", showChevronButton: "showChevronButton", placeholder: "placeholder", options: "options", value: "value", disabled: "disabled", applyLabel: "applyLabel", applyDisabled: "applyDisabled", showClose: "showClose", iconOutlined: "iconOutlined", closeButtonTooltip: "closeButtonTooltip", closeButtonTooltipPosition: "closeButtonTooltipPosition", showHelperText: "showHelperText", helperText: "helperText" }, outputs: { valueChange: "valueChange", applyClick: "applyClick", closeClick: "closeClick", chevronClick: "chevronClick" }, ngImport: i0, template: "<div class=\"ai-apply-wrap\" [attr.data-test-id]=\"dataTestId\">\n <div class=\"ai-apply-rail\">\n <div class=\"ai-apply-row\">\n <div class=\"ai-apply-input\">\n <al-input\n [labelText]=\"''\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [type]=\"'text'\"\n [disabled]=\"disabled\"\n [helperText]=\"false\"\n [leftIcon]=\"''\"\n [rightIcon]=\"'expand_more'\"\n [hasDropDown]=\"true\"\n [searchfilter]=\"true\"\n [multipleSelect]=\"false\"\n [options]=\"options\"\n [size]=\"'base'\"\n [types]=\"'plain'\"\n (change)=\"onValueChange($event)\">\n </al-input>\n </div>\n\n <div class=\"ai-apply-button\">\n <al-button [label]=\"applyLabel\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'base'\"\n [state]=\"applyDisabled ? 'disabled' : 'default'\" (onClick)=\"applyClick.emit()\">\n </al-button>\n <al-icon-button *ngIf=\"showChevronButton\" icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\"\n [size]=\"'xl'\" [disabled]=\"applyDisabled\" (onClick)=\"chevronClick.emit()\"\n [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button>\n </div>\n </div>\n\n <div class=\"ai-apply-helper\" *ngIf=\"showHelperText\">\n {{ helperText }}\n </div>\n </div>\n <div class=\"ai-apply-close\" *ngIf=\"showClose\">\n <al-button [buttonType]=\"'icon-circle'\" [color]=\"'grey'\" [outline]=\"false\" [size]=\"'base'\" [iconOnly]=\"true\"\n [iconOutlined]=\"iconOutlined\" [icon]=\"'close'\" [tooltip]=\"closeButtonTooltip\"\n [tooltipPosition]=\"closeButtonTooltipPosition\" aria-label=\"Close\" (onClick)=\"closeClick.emit()\"></al-button>\n </div>\n</div>\n", styles: [":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}: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 ::ng-deep .mat-mdc-select-arrow{display:none!important}.ai-apply-wrap{position:relative;display:inline-flex;align-items:stretch;width:100%;overflow:hidden;gap:8px}.ai-apply-rail{background:#717793cc;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 8px #0000001f;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ai-apply-row,.ai-apply-button{display:flex;align-items:center;gap:4px;height:40px}.ai-apply-button al-button{height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-button al-icon-button{height:24px!important;min-height:24px!important;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-input{flex:1 1 auto;display:flex;align-items:center}.ai-apply-input ::ng-deep al-input{width:100%}.ai-apply-input ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.ai-apply-input ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.ai-apply-input ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.ai-apply-input ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.ai-apply-input ::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}.ai-apply-helper{color:#ffffffb3;font-size:12px;line-height:16px}.ai-apply-close{position:relative;margin-left:auto;z-index:2;display:flex;align-items:start;margin-top:8px}.ai-apply-close ::ng-deep al-button button.white.btn-outlined:hover{background-color:#4b4f62!important;box-shadow:none!important;border:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { 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: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColour", "iconOutlined", "size", "colour", "disabled", "dataTestId"], outputs: ["onClick"] }] }); }
|
|
2815
2894
|
}
|
|
2816
2895
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiApplyBarComponent, decorators: [{
|
|
2817
2896
|
type: Component,
|
|
2818
|
-
args: [{ selector: 'al-ai-apply-bar', standalone: true, imports: [CommonModule, InputComponent, ButtonComponent, IconButtonComponent], template: "<div class=\"ai-apply-wrap\" [attr.data-test-id]=\"dataTestId\">\n <div class=\"ai-apply-rail\">\n <div class=\"ai-apply-row\">\n <div class=\"ai-apply-input\">\n <al-input
|
|
2897
|
+
args: [{ selector: 'al-ai-apply-bar', standalone: true, imports: [CommonModule, InputComponent, ButtonComponent, IconButtonComponent], template: "<div class=\"ai-apply-wrap\" [attr.data-test-id]=\"dataTestId\">\n <div class=\"ai-apply-rail\">\n <div class=\"ai-apply-row\">\n <div class=\"ai-apply-input\">\n <al-input\n [labelText]=\"''\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [type]=\"'text'\"\n [disabled]=\"disabled\"\n [helperText]=\"false\"\n [leftIcon]=\"''\"\n [rightIcon]=\"'expand_more'\"\n [hasDropDown]=\"true\"\n [searchfilter]=\"true\"\n [multipleSelect]=\"false\"\n [options]=\"options\"\n [size]=\"'base'\"\n [types]=\"'plain'\"\n (change)=\"onValueChange($event)\">\n </al-input>\n </div>\n\n <div class=\"ai-apply-button\">\n <al-button [label]=\"applyLabel\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'base'\"\n [state]=\"applyDisabled ? 'disabled' : 'default'\" (onClick)=\"applyClick.emit()\">\n </al-button>\n <al-icon-button *ngIf=\"showChevronButton\" icon=\"chevron_right\" [iconOutlined]=\"true\" [customColour]=\"'#ffffff'\"\n [size]=\"'xl'\" [disabled]=\"applyDisabled\" (onClick)=\"chevronClick.emit()\"\n [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"></al-icon-button>\n </div>\n </div>\n\n <div class=\"ai-apply-helper\" *ngIf=\"showHelperText\">\n {{ helperText }}\n </div>\n </div>\n <div class=\"ai-apply-close\" *ngIf=\"showClose\">\n <al-button [buttonType]=\"'icon-circle'\" [color]=\"'grey'\" [outline]=\"false\" [size]=\"'base'\" [iconOnly]=\"true\"\n [iconOutlined]=\"iconOutlined\" [icon]=\"'close'\" [tooltip]=\"closeButtonTooltip\"\n [tooltipPosition]=\"closeButtonTooltipPosition\" aria-label=\"Close\" (onClick)=\"closeClick.emit()\"></al-button>\n </div>\n</div>\n", styles: [":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}: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 ::ng-deep .mat-mdc-select-arrow{display:none!important}.ai-apply-wrap{position:relative;display:inline-flex;align-items:stretch;width:100%;overflow:hidden;gap:8px}.ai-apply-rail{background:#717793cc;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 8px #0000001f;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ai-apply-row,.ai-apply-button{display:flex;align-items:center;gap:4px;height:40px}.ai-apply-button al-button{height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-button al-icon-button{height:24px!important;min-height:24px!important;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.ai-apply-input{flex:1 1 auto;display:flex;align-items:center}.ai-apply-input ::ng-deep al-input{width:100%}.ai-apply-input ::ng-deep .al-input-size-base .mat-mdc-form-field-infix{min-height:40px!important}.ai-apply-input ::ng-deep .al-input-field .mat-mdc-text-field-wrapper{height:40px}.ai-apply-input ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:8px;border:0!important;overflow:hidden}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline{border-radius:8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__leading{border-radius:8px 0 0 8px!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__trailing{border-radius:0 8px 8px 0!important}.ai-apply-input ::ng-deep .al-input-field .mdc-notched-outline__notch{border-radius:0!important}.ai-apply-input ::ng-deep .mat-mdc-select-placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-select-value-text{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]{color:#4b4f62!important}.ai-apply-input ::ng-deep input[matInput]::placeholder{color:#4b4f62!important;opacity:1!important}.ai-apply-input ::ng-deep .mat-mdc-form-field:has(.mat-mdc-form-field-label:empty) .mat-mdc-form-field-label{display:none!important}.ai-apply-input ::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}.ai-apply-helper{color:#ffffffb3;font-size:12px;line-height:16px}.ai-apply-close{position:relative;margin-left:auto;z-index:2;display:flex;align-items:start;margin-top:8px}.ai-apply-close ::ng-deep al-button button.white.btn-outlined:hover{background-color:#4b4f62!important;box-shadow:none!important;border:none!important}\n"] }]
|
|
2819
2898
|
}], propDecorators: { dataTestId: [{
|
|
2820
2899
|
type: Input
|
|
2821
2900
|
}], showChevron: [{
|
|
@@ -2836,6 +2915,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2836
2915
|
type: Input
|
|
2837
2916
|
}], showClose: [{
|
|
2838
2917
|
type: Input
|
|
2918
|
+
}], iconOutlined: [{
|
|
2919
|
+
type: Input
|
|
2920
|
+
}], closeButtonTooltip: [{
|
|
2921
|
+
type: Input
|
|
2922
|
+
}], closeButtonTooltipPosition: [{
|
|
2923
|
+
type: Input
|
|
2839
2924
|
}], showHelperText: [{
|
|
2840
2925
|
type: Input
|
|
2841
2926
|
}], helperText: [{
|
|
@@ -3800,17 +3885,10 @@ class BulletUtils {
|
|
|
3800
3885
|
}
|
|
3801
3886
|
|
|
3802
3887
|
class CustomEditorComponent {
|
|
3803
|
-
constructor(
|
|
3804
|
-
this.
|
|
3805
|
-
this.route = route;
|
|
3888
|
+
constructor(renderer, iconRegistry, sanitizer) {
|
|
3889
|
+
this.renderer = renderer;
|
|
3806
3890
|
this.iconRegistry = iconRegistry;
|
|
3807
3891
|
this.sanitizer = sanitizer;
|
|
3808
|
-
this.renderer = renderer;
|
|
3809
|
-
this.resumeService = resumeService;
|
|
3810
|
-
this.http = http;
|
|
3811
|
-
this.callForAI = callForAI;
|
|
3812
|
-
this.store = store;
|
|
3813
|
-
this.wsService = wsService;
|
|
3814
3892
|
this.isVisible = true;
|
|
3815
3893
|
this.dataTestId = '';
|
|
3816
3894
|
// Editor labels inputs
|
|
@@ -3879,35 +3957,12 @@ class CustomEditorComponent {
|
|
|
3879
3957
|
this.checkPreserveOriginalScreenforButtons = false;
|
|
3880
3958
|
this.summaryAIBackGroundCheck = false;
|
|
3881
3959
|
this.overlayIdCounter = 1;
|
|
3882
|
-
this.summaryAndSkill = [
|
|
3883
|
-
"COMPUTER_SKILL",
|
|
3884
|
-
"LANGUAGE_SKILL",
|
|
3885
|
-
"SOFT_SKILL",
|
|
3886
|
-
"PROFESSION_SKILL",
|
|
3887
|
-
"SUMMARY",
|
|
3888
|
-
"CERTIFICATION",
|
|
3889
|
-
"AI_COVEREMAIL",
|
|
3890
|
-
"AI_SUMMARY",
|
|
3891
|
-
"AI_SKILL",
|
|
3892
|
-
];
|
|
3893
|
-
this.extraAndCoverSheet = ["EXTRA_SECTION", "COVER_SHEET"];
|
|
3894
3960
|
// Responsive styling dropdown
|
|
3895
3961
|
this.isSmallScreen = false;
|
|
3896
3962
|
this.showStylingDropdown = false;
|
|
3897
3963
|
this.showTextFormattingDropdown = false;
|
|
3898
3964
|
// List of registered SVG icon names
|
|
3899
3965
|
this.registeredSvgIcons = new Set(['delete', 'table']);
|
|
3900
|
-
if (this.route) {
|
|
3901
|
-
const resumeIdParam = this.route.snapshot?.paramMap?.get("resumeId");
|
|
3902
|
-
this.resumeId = resumeIdParam ? Number(resumeIdParam) : 0;
|
|
3903
|
-
}
|
|
3904
|
-
if (this.store) {
|
|
3905
|
-
this.store
|
|
3906
|
-
.select((state) => state?.currentActiveForm)
|
|
3907
|
-
.subscribe((editSection) => {
|
|
3908
|
-
this.editSection$ = editSection;
|
|
3909
|
-
});
|
|
3910
|
-
}
|
|
3911
3966
|
// Get base path dynamically
|
|
3912
3967
|
const basePath = this.getBasePath();
|
|
3913
3968
|
// Register SVG icons for custom editor
|
|
@@ -4446,22 +4501,12 @@ class CustomEditorComponent {
|
|
|
4446
4501
|
this.updateTagHierarchy();
|
|
4447
4502
|
}
|
|
4448
4503
|
transformData(data) {
|
|
4449
|
-
|
|
4450
|
-
data = BulletUtils.onPasteBulletHandlerOriginalResume(data);
|
|
4451
|
-
}
|
|
4452
|
-
else {
|
|
4453
|
-
data = BulletUtils.onPasteBulletHandler(data);
|
|
4454
|
-
}
|
|
4504
|
+
data = BulletUtils.onPasteBulletHandler(data);
|
|
4455
4505
|
data = BulletUtils.cleanSpans(data);
|
|
4456
4506
|
return data;
|
|
4457
4507
|
}
|
|
4458
4508
|
applyBulletUtilsTransformations(data) {
|
|
4459
|
-
|
|
4460
|
-
data = BulletUtils.onPasteBulletHandlerOriginalResume(data);
|
|
4461
|
-
}
|
|
4462
|
-
else {
|
|
4463
|
-
data = BulletUtils.onPasteBulletHandler(data);
|
|
4464
|
-
}
|
|
4509
|
+
data = BulletUtils.onPasteBulletHandler(data);
|
|
4465
4510
|
return data;
|
|
4466
4511
|
}
|
|
4467
4512
|
getSelectedLiTags() {
|
|
@@ -4587,12 +4632,7 @@ class CustomEditorComponent {
|
|
|
4587
4632
|
transformToBullets(event) {
|
|
4588
4633
|
this.autoBulletDisable = true;
|
|
4589
4634
|
event.preventDefault();
|
|
4590
|
-
|
|
4591
|
-
this.transformToBulletsAlgorithmOverride();
|
|
4592
|
-
}
|
|
4593
|
-
else {
|
|
4594
|
-
this.transformToBulletByAI();
|
|
4595
|
-
}
|
|
4635
|
+
this.transformToBulletsAlgorithmOverride();
|
|
4596
4636
|
}
|
|
4597
4637
|
transformToBulletsAlgorithmOverride() {
|
|
4598
4638
|
if (!this.isAutoBullet) {
|
|
@@ -4608,32 +4648,6 @@ class CustomEditorComponent {
|
|
|
4608
4648
|
}
|
|
4609
4649
|
this.autoBulletDisable = false;
|
|
4610
4650
|
}
|
|
4611
|
-
transformToBulletByAI() {
|
|
4612
|
-
if (!this.resumeService || !this.callForAI) {
|
|
4613
|
-
this.transformToBulletsAlgorithmOverride();
|
|
4614
|
-
return;
|
|
4615
|
-
}
|
|
4616
|
-
this.ApplyAIinQuill.emit();
|
|
4617
|
-
this.FormValue = this.editorReference.nativeElement.innerHTML;
|
|
4618
|
-
this.saveHistory();
|
|
4619
|
-
this.isLoadingAI = true;
|
|
4620
|
-
this.editorReference.nativeElement.innerHTML = "<p>Awaiting response from AI...</p>";
|
|
4621
|
-
if (this.summaryAndSkill.includes(this.editScreenSection)) {
|
|
4622
|
-
this.callForAI.callToAISummaryAndSkills(this.actionType?.action, "AI_BULLET", this.FormValue, this.resumeId, this.editScreenSection);
|
|
4623
|
-
if (this.store && this.actionType?.action) {
|
|
4624
|
-
this.store.dispatch(this.actionType.action.transformToBulletsByAI({
|
|
4625
|
-
data: this.FormValue,
|
|
4626
|
-
resumeId: this.resumeId,
|
|
4627
|
-
}));
|
|
4628
|
-
}
|
|
4629
|
-
}
|
|
4630
|
-
else if (this.extraAndCoverSheet.includes(this.editScreenSection)) {
|
|
4631
|
-
this.callForAI.callToAIExtraAndCoverSection(this.actionType?.action, this.actionId, "AI_BULLET", this.FormValue, this.sectionId, this.resumeId, this.editScreenSection, true);
|
|
4632
|
-
}
|
|
4633
|
-
else {
|
|
4634
|
-
this.callForAI.callToAIEduAndExp(this.actionType?.action, this.actionId, "AI_BULLET", this.FormValue, this.sectionId, this.resumeId, this.editScreenSection, "");
|
|
4635
|
-
}
|
|
4636
|
-
}
|
|
4637
4651
|
transformToSkillsBullets(event) {
|
|
4638
4652
|
event.preventDefault();
|
|
4639
4653
|
if (!this.isSkillBullet) {
|
|
@@ -4912,58 +4926,9 @@ class CustomEditorComponent {
|
|
|
4912
4926
|
}
|
|
4913
4927
|
// AI operations
|
|
4914
4928
|
updateAIToolInMemory(tool) {
|
|
4915
|
-
if (this.resumeService) {
|
|
4916
|
-
this.resumeService.aiToolInMemory = tool;
|
|
4917
|
-
}
|
|
4918
4929
|
}
|
|
4919
4930
|
useAITool(event) {
|
|
4920
|
-
|
|
4921
|
-
console.warn('AI services not available');
|
|
4922
|
-
return;
|
|
4923
|
-
}
|
|
4924
|
-
event.preventDefault();
|
|
4925
|
-
this.FormValue = this.editorReference.nativeElement.innerHTML;
|
|
4926
|
-
let processableData;
|
|
4927
|
-
const tools = this.resumeService.AITools?.filter((tl) => tl.viewValue === this.resumeService.aiDropdown?.viewValue) || [];
|
|
4928
|
-
const section = tools.length > 0 ?
|
|
4929
|
-
JSON.parse(this.resumeService.otherFeature?.filter((p) => p.identifier === tools[0].identifier)[0]?.data || '{}')?.section : null;
|
|
4930
|
-
const fullJSONFlag = tools.length > 0 && ['experience', 'education', 'certification'].some((x) => x === section);
|
|
4931
|
-
if (fullJSONFlag) {
|
|
4932
|
-
processableData = JSON.parse(JSON.stringify(this.jsonData));
|
|
4933
|
-
}
|
|
4934
|
-
else {
|
|
4935
|
-
processableData = this.FormValue;
|
|
4936
|
-
}
|
|
4937
|
-
this.ApplyAIinQuill.emit();
|
|
4938
|
-
this.saveHistory();
|
|
4939
|
-
this.isLoadingAI = true;
|
|
4940
|
-
this.editorReference.nativeElement.innerHTML = "<p>Awaiting response from AI...</p>";
|
|
4941
|
-
if (this.summaryAndSkill.includes(this.editScreenSection)) {
|
|
4942
|
-
this.callForAI.callToAISummaryAndSkills(this.actionType?.action, this.resumeService.aiDropdown?.identifier, processableData, this.resumeId, this.editScreenSection);
|
|
4943
|
-
}
|
|
4944
|
-
else if (this.extraAndCoverSheet.includes(this.editScreenSection)) {
|
|
4945
|
-
this.callForAI.callToAIExtraAndCoverSection(this.actionType?.action, this.actionId, this.resumeService.aiDropdown?.identifier, processableData, this.sectionId, this.resumeId, this.editScreenSection, true);
|
|
4946
|
-
}
|
|
4947
|
-
else {
|
|
4948
|
-
if (!fullJSONFlag) {
|
|
4949
|
-
this.callForAI.callToAIEduAndExp(this.actionType?.action, this.actionId, this.resumeService.aiDropdown?.identifier, processableData, this.sectionId, this.resumeId, this.editScreenSection, "");
|
|
4950
|
-
}
|
|
4951
|
-
else {
|
|
4952
|
-
// Handle full JSON for exp, edu, cert
|
|
4953
|
-
switch (section) {
|
|
4954
|
-
case 'experience':
|
|
4955
|
-
this.processExperienceData(processableData);
|
|
4956
|
-
break;
|
|
4957
|
-
case 'education':
|
|
4958
|
-
this.processEducationData(processableData);
|
|
4959
|
-
break;
|
|
4960
|
-
case 'certification':
|
|
4961
|
-
this.processCertificationData(processableData);
|
|
4962
|
-
break;
|
|
4963
|
-
}
|
|
4964
|
-
this.callForAI.callToAIEduAndExp(this.actionType?.action, this.actionId, this.resumeService.aiDropdown?.identifier, JSON.stringify(processableData), this.sectionId, this.resumeId, this.editScreenSection, "");
|
|
4965
|
-
}
|
|
4966
|
-
}
|
|
4931
|
+
console.warn('AI services not available');
|
|
4967
4932
|
}
|
|
4968
4933
|
processExperienceData(processableData) {
|
|
4969
4934
|
processableData.selectedValue = this.formJsonData?.value?.selectedValue;
|
|
@@ -5028,77 +4993,21 @@ class CustomEditorComponent {
|
|
|
5028
4993
|
}
|
|
5029
4994
|
}
|
|
5030
4995
|
verifyModelLatencyAndStatusBefore(event) {
|
|
5031
|
-
|
|
5032
|
-
this.useAITool(event);
|
|
5033
|
-
return;
|
|
5034
|
-
}
|
|
5035
|
-
this.listenToSocket(event);
|
|
5036
|
-
const userType = this.router?.url?.includes('C2R') ? 'C2R' : 'NORMAL';
|
|
5037
|
-
this.wsService.sendMessage(this.resumeService?.aiDropdown?.identifier, userType);
|
|
4996
|
+
this.useAITool(event);
|
|
5038
4997
|
}
|
|
5039
4998
|
listenToSocket(event) {
|
|
5040
|
-
|
|
5041
|
-
this.useAITool(event);
|
|
5042
|
-
return;
|
|
5043
|
-
}
|
|
5044
|
-
this.wsService.getMessages().pipe(take(1)).subscribe((msg) => {
|
|
5045
|
-
if (msg?.result?.modelStatus === 'DOWN') {
|
|
5046
|
-
if (this.resumeService?.toastMessage) {
|
|
5047
|
-
this.resumeService.toastMessage.emit({
|
|
5048
|
-
failureMessage: 'Could not perform AI operation at the moment. Please try again after some time.'
|
|
5049
|
-
});
|
|
5050
|
-
}
|
|
5051
|
-
return;
|
|
5052
|
-
}
|
|
5053
|
-
if (msg?.result?.latency > 2.0) {
|
|
5054
|
-
if (this.resumeService?.toastMessage) {
|
|
5055
|
-
this.resumeService.toastMessage.emit({
|
|
5056
|
-
failureMessage: 'Processing may take longer than usual. Thank you.',
|
|
5057
|
-
type: 'ai-latency'
|
|
5058
|
-
});
|
|
5059
|
-
}
|
|
5060
|
-
}
|
|
5061
|
-
this.useAITool(event);
|
|
5062
|
-
});
|
|
4999
|
+
this.useAITool(event);
|
|
5063
5000
|
}
|
|
5064
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomEditorComponent, deps: [{ token:
|
|
5065
|
-
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", 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 }], 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\">\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 Screens Only) -->\n <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n [class.hide-on-small]=\"true\" (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\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 <!-- Auto Bullet Button -->\n <button *ngIf=\"autobullet\" class=\"ms-3 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=\"ms-3 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 Screens Only) -->\n <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n [class.hide-on-small]=\"true\" (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\n <!-- Table Component -->\n <app-table *ngIf=\"showTable\" [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=\"ms-3 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=\"ms-3 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=\"ms-3 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=\"ms-3 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 </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>", 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:140%;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}.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}@media (max-width: 1499px){.toolbar .format-button.hide-on-small{display:none!important}}.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}@media (min-width: 1500px){.toolbar .styling-dropdown{display:none}}.toolbar .styling-dropdown .styling-text{color:#4b4f62;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}@media (min-width: 1500px){.toolbar .text-formatting-dropdown{display:none}}.toolbar .text-formatting-dropdown .text-formatting-text{color:#4b4f62;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:#fff;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}.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}.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"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5001
|
+
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 }); }
|
|
5002
|
+
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", 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 }], 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\">\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 Screens Only) -->\n <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n [class.hide-on-small]=\"true\" (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\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 <!-- Auto Bullet Button -->\n <button *ngIf=\"autobullet\" class=\"ms-3 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=\"ms-3 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 Screens Only) -->\n <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n [class.hide-on-small]=\"true\" (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\n <!-- Table Component -->\n <app-table *ngIf=\"showTable\" [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=\"ms-3 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=\"ms-3 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=\"ms-3 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=\"ms-3 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 </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>", 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}.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}@media (max-width: 1499px){.toolbar .format-button.hide-on-small{display:none!important}}.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}@media (min-width: 1500px){.toolbar .styling-dropdown{display:none}}.toolbar .styling-dropdown .styling-text{color:#4b4f62;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}@media (min-width: 1500px){.toolbar .text-formatting-dropdown{display:none}}.toolbar .text-formatting-dropdown .text-formatting-text{color:#4b4f62;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:#fff;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}.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"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5066
5003
|
}
|
|
5067
5004
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomEditorComponent, decorators: [{
|
|
5068
5005
|
type: Component,
|
|
5069
|
-
args: [{ selector: 'app-custom-editor', standalone: true, imports: [CommonModule, TableComponent, MatTooltipModule, MatIconModule], 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\">\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 Screens Only) -->\n <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n [class.hide-on-small]=\"true\" (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\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 <!-- Auto Bullet Button -->\n <button *ngIf=\"autobullet\" class=\"ms-3 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=\"ms-3 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 Screens Only) -->\n <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n [class.hide-on-small]=\"true\" (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\n <!-- Table Component -->\n <app-table *ngIf=\"showTable\" [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=\"ms-3 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=\"ms-3 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=\"ms-3 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=\"ms-3 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 </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>", 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:140%;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}.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}@media (max-width: 1499px){.toolbar .format-button.hide-on-small{display:none!important}}.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}@media (min-width: 1500px){.toolbar .styling-dropdown{display:none}}.toolbar .styling-dropdown .styling-text{color:#4b4f62;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}@media (min-width: 1500px){.toolbar .text-formatting-dropdown{display:none}}.toolbar .text-formatting-dropdown .text-formatting-text{color:#4b4f62;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:#fff;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}.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}.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"] }]
|
|
5070
|
-
}], ctorParameters: () => [{ type:
|
|
5071
|
-
type: Optional
|
|
5072
|
-
}] }, { type: i1$2.ActivatedRoute, decorators: [{
|
|
5073
|
-
type: Optional
|
|
5074
|
-
}] }, { type: i1.MatIconRegistry }, { type: i2.DomSanitizer }, { type: i0.Renderer2, decorators: [{
|
|
5075
|
-
type: Optional
|
|
5076
|
-
}] }, { type: undefined, decorators: [{
|
|
5077
|
-
type: Optional
|
|
5078
|
-
}, {
|
|
5079
|
-
type: Inject,
|
|
5080
|
-
args: ['ResumeService']
|
|
5081
|
-
}] }, { type: undefined, decorators: [{
|
|
5082
|
-
type: Optional
|
|
5083
|
-
}, {
|
|
5084
|
-
type: Inject,
|
|
5085
|
-
args: ['Service']
|
|
5086
|
-
}] }, { type: undefined, decorators: [{
|
|
5087
|
-
type: Optional
|
|
5088
|
-
}, {
|
|
5006
|
+
args: [{ selector: 'app-custom-editor', standalone: true, imports: [CommonModule, TableComponent, MatTooltipModule, MatIconModule], 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\">\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 Screens Only) -->\n <button *ngFor=\"let item of toolbarConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n [class.hide-on-small]=\"true\" (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\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 <!-- Auto Bullet Button -->\n <button *ngIf=\"autobullet\" class=\"ms-3 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=\"ms-3 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 Screens Only) -->\n <button *ngFor=\"let item of textFormattingConfig\" class=\"format-button\" [class.active]=\"getActiveState(item.type)\"\n [class.hide-on-small]=\"true\" (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\n <!-- Table Component -->\n <app-table *ngIf=\"showTable\" [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=\"ms-3 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=\"ms-3 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=\"ms-3 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=\"ms-3 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 </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>", 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}.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}@media (max-width: 1499px){.toolbar .format-button.hide-on-small{display:none!important}}.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}@media (min-width: 1500px){.toolbar .styling-dropdown{display:none}}.toolbar .styling-dropdown .styling-text{color:#4b4f62;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}@media (min-width: 1500px){.toolbar .text-formatting-dropdown{display:none}}.toolbar .text-formatting-dropdown .text-formatting-text{color:#4b4f62;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:#fff;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}.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"] }]
|
|
5007
|
+
}], ctorParameters: () => [{ type: i0.Renderer2, decorators: [{
|
|
5089
5008
|
type: Inject,
|
|
5090
|
-
args: [
|
|
5091
|
-
}] }, { type:
|
|
5092
|
-
type: Optional
|
|
5093
|
-
}, {
|
|
5094
|
-
type: Inject,
|
|
5095
|
-
args: ['Store']
|
|
5096
|
-
}] }, { type: undefined, decorators: [{
|
|
5097
|
-
type: Optional
|
|
5098
|
-
}, {
|
|
5099
|
-
type: Inject,
|
|
5100
|
-
args: ['WebSocketService']
|
|
5101
|
-
}] }], propDecorators: { editorReference: [{
|
|
5009
|
+
args: [Renderer2]
|
|
5010
|
+
}] }, { type: i1.MatIconRegistry }, { type: i2.DomSanitizer }], propDecorators: { editorReference: [{
|
|
5102
5011
|
type: ViewChild,
|
|
5103
5012
|
args: ['editorReference', {
|
|
5104
5013
|
static: true
|
|
@@ -5415,7 +5324,7 @@ class DateRangeComponent {
|
|
|
5415
5324
|
useExisting: forwardRef(() => DateRangeComponent),
|
|
5416
5325
|
multi: true
|
|
5417
5326
|
}
|
|
5418
|
-
], ngImport: i0, template: "<mat-form-field class=\"mat_form\" [ngClass]=\"[getSizeClass(), getCategoryClass()]\" appearance=\"outline\"\n [attr.data-test-id]=\"dataTestId\">\n\n <mat-label>{{ labelText }}</mat-label>\n\n <mat-date-range-input [rangePicker]=\"picker\">\n <input matStartDate [placeholder]=\"startPlaceholder\" [value]=\"startDate\" [disabled]=\"disabled\" [required]=\"required\"\n [min]=\"minDate\" [max]=\"endDate || maxDate\" (dateInput)=\"onStartDateChange($event)\"\n (dateChange)=\"onStartDateChange($event)\" [attr.data-testid]=\"dataTestId ? dataTestId + '-start' : null\">\n <input matEndDate [placeholder]=\"endPlaceholder\" [value]=\"endDate\" [disabled]=\"disabled\" [required]=\"required\"\n [min]=\"startDate || minDate\" [max]=\"maxDate\" (dateInput)=\"onEndDateChange($event)\"\n (dateChange)=\"onEndDateChange($event)\" [attr.data-testid]=\"dataTestId ? dataTestId + '-end' : null\">\n </mat-date-range-input>\n\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\" [disabled]=\"disabled\">\n </mat-datepicker-toggle>\n\n <mat-date-range-picker #picker [startAt]=\"startAt\" [opened]=\"opened\" [touchUi]=\"touchUi\"\n (openedChange)=\"onOpenedChange($event)\" (selectedChange)=\"onDateRangeChange($event)\">\n </mat-date-range-picker>\n\n\n</mat-form-field>\n\n<!-- Range display and validation -->\n<div *ngIf=\"startDate || endDate\" class=\"range-display\" [ngClass]=\"getSizeClass()\">\n <span class=\"range-text\" [class.invalid]=\"!isRangeValid\">\n {{ displayText }}\n </span>\n <span *ngIf=\"!isRangeValid\" class=\"error-message\">\n End date must be after start date\n </span>\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\";: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}.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:140%;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{--elevation-1: 0 1px 5px 1px rgba(113, 119, 147, .1);--elevation-2: 0 2px 10px 2px rgba(113, 119, 147, .1);--elevation-3: 0 4px 15px 3px rgba(113, 119, 147, .12);--elevation-4: 0 6px 10px 4px rgba(113, 119, 147, .15);--elevation-5: 0 5px 15px 5px rgba(113, 119, 147, .2);--elevation-6: 0 2px 4px 0 rgba(24, 43, 125, .15)}.elevation-1{box-shadow:var(--elevation-1)}.elevation-2{box-shadow:var(--elevation-2)}.elevation-3{box-shadow:var(--elevation-3)}.elevation-4{box-shadow:var(--elevation-4)}.elevation-5{box-shadow:var(--elevation-5)}.elevation-6{box-shadow:var(--elevation-6)}.mat_form{width:100%}.range-display{margin-top:var(--space-8);padding:var(--space-8) var(--space-12);background:var(--color-grey-50);border-radius:var(--radius-4);border:1px solid var(--color-grey-200)}.range-text{font-size:14px;color:var(--color-grey-700);font-weight:500}.range-text.invalid{color:var(--color-error-500)}.error-message{display:block;font-size:12px;color:var(--color-error-500);margin-top:var(--space-4)}.clear-button{color:var(--color-grey-500);margin-left:var(--space-4)}.clear-button:hover{color:var(--color-error-500)}.range-text{display:none!important}::ng-deep .al-date-range-size-small .mat-mdc-form-field-infix,::ng-deep .al-date-range-size-medium .mat-mdc-form-field-infix,::ng-deep .al-date-range-size-large .mat-mdc-form-field-infix{padding:0 12px!important;display:flex;align-items:center}::ng-deep .al-date-range-size-small .mat-mdc-form-field-infix{min-height:34px!important;height:34px!important}::ng-deep .al-date-range-size-medium .mat-mdc-form-field-infix{min-height:40px!important;height:40px!important}::ng-deep .al-date-range-size-large .mat-mdc-form-field-infix{min-height:48px!important;height:48px!important}::ng-deep .al-date-range-category-default{--mdc-outlined-text-field-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-focus-outline-color: #5473E8 !important;--mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-outline-width: 1px !important;--mdc-outlined-text-field-focus-outline-width: 1px !important;--mdc-outlined-text-field-hover-outline-width: 1px !important}::ng-deep .al-date-range-category-disabled{--mdc-outlined-text-field-outline-color: var(--color-grey-300) !important;--mdc-outlined-text-field-focus-outline-color: var(--color-grey-300) !important;--mdc-outlined-text-field-hover-outline-color: var(--color-grey-300) !important;--mdc-outlined-text-field-outline-width: 1px !important;--mdc-outlined-text-field-focus-outline-width: 1px !important;--mdc-outlined-text-field-hover-outline-width: 1px !important}::ng-deep .mat_form .mat-mdc-form-field-flex,::ng-deep .mat_form .mat-mdc-text-field-wrapper,::ng-deep .mat_form .mat-mdc-form-field-infix{background-color:#f7f9fe!important}::ng-deep .mat_form .mat-mdc-form-field-subscript-wrapper{background-color:transparent!important;display:none!important}::ng-deep .mat_form .mat-mdc-form-field-subscript-wrapper{display:block!important}::ng-deep .mat_form .mat-mdc-form-field-focus-overlay{background-color:#f7f9fe!important}::ng-deep .mat_form .mat-mdc-form-field .mdc-notched-outline{box-shadow:none!important}::ng-deep .mat_form .mdc-notched-outline__leading,::ng-deep .mat_form .mdc-notched-outline__notch,::ng-deep .mat_form .mdc-notched-outline__trailing{border-color:#c3c5d1!important;border-width:1px!important}::ng-deep .mat_form .mat-mdc-form-field:hover .mdc-notched-outline__leading,::ng-deep .mat_form .mat-mdc-form-field:hover .mdc-notched-outline__notch,::ng-deep .mat_form .mat-mdc-form-field:hover .mdc-notched-outline__trailing{border-color:#c3c5d1!important;border-width:1px!important}::ng-deep .mat_form .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat_form .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat_form .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:#5473e8!important;border-width:1px!important}::ng-deep .mat_form .mat-mdc-form-field:active .mdc-notched-outline__leading,::ng-deep .mat_form .mat-mdc-form-field:active .mdc-notched-outline__notch,::ng-deep .mat_form .mat-mdc-form-field:active .mdc-notched-outline__trailing{border-color:#5473e8!important;border-width:1px!important}::ng-deep .mat_form .mdc-notched-outline__leading{border-right:none!important}::ng-deep .mat_form .mdc-notched-outline__notch{border-left:none!important;border-right:none!important}::ng-deep .al-date-range-size-small mat-icon{height:16px!important;width:16px!important;font-size:16px!important}::ng-deep .al-date-range-size-medium mat-icon{height:24px!important;width:24px!important;font-size:24px!important}::ng-deep .al-date-range-size-large mat-icon{height:24px!important;width:24px!important;font-size:24px!important}::ng-deep .al-date-range-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:13px!important}::ng-deep .al-date-range-size-medium .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:16px!important}::ng-deep .al-date-range-size-large .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:20px!important}::ng-deep .al-date-range-size-small .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -22.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-date-range-size-medium .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -24.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-date-range-size-large .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -29.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{padding:var(--space-8)!important;height:40px!important;width:40px!important}::ng-deep .al-date-range-size-small .mat-mdc-icon-button.mat-mdc-button-base{padding:0!important;height:24px!important;width:24px!important}::ng-deep .al-date-range-size-medium .mat-mdc-icon-button.mat-mdc-button-base{padding:0!important;height:24px!important;width:24px!important}::ng-deep .al-date-range-size-large .mat-mdc-icon-button.mat-mdc-button-base{padding:var(--space-8)!important;height:24px!important;width:24px!important}::ng-deep .al-date-range-size-small .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .al-date-range-size-medium .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .al-date-range-size-large .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:#5473e8!important}::ng-deep .mat_form .mat-mdc-form-field-suffix{margin-right:12px!important}::ng-deep .mat_form .mat-datepicker-toggle{margin-right:12px!important}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-left:0!important}\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: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }] }); }
|
|
5327
|
+
], ngImport: i0, template: "<mat-form-field class=\"mat_form\" [ngClass]=\"[getSizeClass(), getCategoryClass()]\" appearance=\"outline\"\n [attr.data-test-id]=\"dataTestId\">\n\n <mat-label>{{ labelText }}</mat-label>\n\n <mat-date-range-input [rangePicker]=\"picker\">\n <input matStartDate [placeholder]=\"startPlaceholder\" [value]=\"startDate\" [disabled]=\"disabled\" [required]=\"required\"\n [min]=\"minDate\" [max]=\"endDate || maxDate\" (dateInput)=\"onStartDateChange($event)\"\n (dateChange)=\"onStartDateChange($event)\" [attr.data-testid]=\"dataTestId ? dataTestId + '-start' : null\">\n <input matEndDate [placeholder]=\"endPlaceholder\" [value]=\"endDate\" [disabled]=\"disabled\" [required]=\"required\"\n [min]=\"startDate || minDate\" [max]=\"maxDate\" (dateInput)=\"onEndDateChange($event)\"\n (dateChange)=\"onEndDateChange($event)\" [attr.data-testid]=\"dataTestId ? dataTestId + '-end' : null\">\n </mat-date-range-input>\n\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\" [disabled]=\"disabled\">\n </mat-datepicker-toggle>\n\n <mat-date-range-picker #picker [startAt]=\"startAt\" [opened]=\"opened\" [touchUi]=\"touchUi\"\n (openedChange)=\"onOpenedChange($event)\" (selectedChange)=\"onDateRangeChange($event)\">\n </mat-date-range-picker>\n\n\n</mat-form-field>\n\n<!-- Range display and validation -->\n<div *ngIf=\"startDate || endDate\" class=\"range-display\" [ngClass]=\"getSizeClass()\">\n <span class=\"range-text\" [class.invalid]=\"!isRangeValid\">\n {{ displayText }}\n </span>\n <span *ngIf=\"!isRangeValid\" class=\"error-message\">\n End date must be after start date\n </span>\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\";: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}.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}:root{--elevation-1: 0 1px 5px 1px rgba(113, 119, 147, .1);--elevation-2: 0 2px 10px 2px rgba(113, 119, 147, .1);--elevation-3: 0 4px 15px 3px rgba(113, 119, 147, .12);--elevation-4: 0 6px 10px 4px rgba(113, 119, 147, .15);--elevation-5: 0 5px 15px 5px rgba(113, 119, 147, .2);--elevation-6: 0 2px 4px 0 rgba(24, 43, 125, .15)}.elevation-1{box-shadow:var(--elevation-1)}.elevation-2{box-shadow:var(--elevation-2)}.elevation-3{box-shadow:var(--elevation-3)}.elevation-4{box-shadow:var(--elevation-4)}.elevation-5{box-shadow:var(--elevation-5)}.elevation-6{box-shadow:var(--elevation-6)}.mat_form{width:100%}.range-display{margin-top:var(--space-8);padding:var(--space-8) var(--space-12);background:var(--color-grey-50);border-radius:var(--radius-4);border:1px solid var(--color-grey-200)}.range-text{font-size:14px;color:var(--color-grey-700);font-weight:500}.range-text.invalid{color:var(--color-error-500)}.error-message{display:block;font-size:12px;color:var(--color-error-500);margin-top:var(--space-4)}.clear-button{color:var(--color-grey-500);margin-left:var(--space-4)}.clear-button:hover{color:var(--color-error-500)}.range-text{display:none!important}::ng-deep .al-date-range-size-small .mat-mdc-form-field-infix,::ng-deep .al-date-range-size-medium .mat-mdc-form-field-infix,::ng-deep .al-date-range-size-large .mat-mdc-form-field-infix{padding:0 12px!important;display:flex;align-items:center}::ng-deep .al-date-range-size-small .mat-mdc-form-field-infix{min-height:34px!important;height:34px!important}::ng-deep .al-date-range-size-medium .mat-mdc-form-field-infix{min-height:40px!important;height:40px!important}::ng-deep .al-date-range-size-large .mat-mdc-form-field-infix{min-height:48px!important;height:48px!important}::ng-deep .al-date-range-category-default{--mdc-outlined-text-field-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-focus-outline-color: #5473E8 !important;--mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-outline-width: 1px !important;--mdc-outlined-text-field-focus-outline-width: 1px !important;--mdc-outlined-text-field-hover-outline-width: 1px !important}::ng-deep .al-date-range-category-disabled{--mdc-outlined-text-field-outline-color: var(--color-grey-300) !important;--mdc-outlined-text-field-focus-outline-color: var(--color-grey-300) !important;--mdc-outlined-text-field-hover-outline-color: var(--color-grey-300) !important;--mdc-outlined-text-field-outline-width: 1px !important;--mdc-outlined-text-field-focus-outline-width: 1px !important;--mdc-outlined-text-field-hover-outline-width: 1px !important}::ng-deep .mat_form .mat-mdc-form-field-flex,::ng-deep .mat_form .mat-mdc-text-field-wrapper,::ng-deep .mat_form .mat-mdc-form-field-infix{background-color:#f7f9fe!important}::ng-deep .mat_form .mat-mdc-form-field-subscript-wrapper{background-color:transparent!important;display:none!important}::ng-deep .mat_form .mat-mdc-form-field-subscript-wrapper{display:block!important}::ng-deep .mat_form .mat-mdc-form-field-focus-overlay{background-color:#f7f9fe!important}::ng-deep .mat_form .mat-mdc-form-field .mdc-notched-outline{box-shadow:none!important}::ng-deep .mat_form .mdc-notched-outline__leading,::ng-deep .mat_form .mdc-notched-outline__notch,::ng-deep .mat_form .mdc-notched-outline__trailing{border-color:#c3c5d1!important;border-width:1px!important}::ng-deep .mat_form .mat-mdc-form-field:hover .mdc-notched-outline__leading,::ng-deep .mat_form .mat-mdc-form-field:hover .mdc-notched-outline__notch,::ng-deep .mat_form .mat-mdc-form-field:hover .mdc-notched-outline__trailing{border-color:#c3c5d1!important;border-width:1px!important}::ng-deep .mat_form .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat_form .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat_form .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:#5473e8!important;border-width:1px!important}::ng-deep .mat_form .mat-mdc-form-field:active .mdc-notched-outline__leading,::ng-deep .mat_form .mat-mdc-form-field:active .mdc-notched-outline__notch,::ng-deep .mat_form .mat-mdc-form-field:active .mdc-notched-outline__trailing{border-color:#5473e8!important;border-width:1px!important}::ng-deep .mat_form .mdc-notched-outline__leading{border-right:none!important}::ng-deep .mat_form .mdc-notched-outline__notch{border-left:none!important;border-right:none!important}::ng-deep .al-date-range-size-small mat-icon{height:16px!important;width:16px!important;font-size:16px!important}::ng-deep .al-date-range-size-medium mat-icon{height:24px!important;width:24px!important;font-size:24px!important}::ng-deep .al-date-range-size-large mat-icon{height:24px!important;width:24px!important;font-size:24px!important}::ng-deep .al-date-range-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:13px!important}::ng-deep .al-date-range-size-medium .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:16px!important}::ng-deep .al-date-range-size-large .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:20px!important}::ng-deep .al-date-range-size-small .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -22.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-date-range-size-medium .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -24.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-date-range-size-large .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -29.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{padding:var(--space-8)!important;height:40px!important;width:40px!important}::ng-deep .al-date-range-size-small .mat-mdc-icon-button.mat-mdc-button-base{padding:0!important;height:24px!important;width:24px!important}::ng-deep .al-date-range-size-medium .mat-mdc-icon-button.mat-mdc-button-base{padding:0!important;height:24px!important;width:24px!important}::ng-deep .al-date-range-size-large .mat-mdc-icon-button.mat-mdc-button-base{padding:var(--space-8)!important;height:24px!important;width:24px!important}::ng-deep .al-date-range-size-small .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .al-date-range-size-medium .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .al-date-range-size-large .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:#5473e8!important}::ng-deep .mat_form .mat-mdc-form-field-suffix{margin-right:12px!important}::ng-deep .mat_form .mat-datepicker-toggle{margin-right:12px!important}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-left:0!important}\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: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }] }); }
|
|
5419
5328
|
}
|
|
5420
5329
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeComponent, decorators: [{
|
|
5421
5330
|
type: Component,
|
|
@@ -5435,7 +5344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5435
5344
|
useExisting: forwardRef(() => DateRangeComponent),
|
|
5436
5345
|
multi: true
|
|
5437
5346
|
}
|
|
5438
|
-
], template: "<mat-form-field class=\"mat_form\" [ngClass]=\"[getSizeClass(), getCategoryClass()]\" appearance=\"outline\"\n [attr.data-test-id]=\"dataTestId\">\n\n <mat-label>{{ labelText }}</mat-label>\n\n <mat-date-range-input [rangePicker]=\"picker\">\n <input matStartDate [placeholder]=\"startPlaceholder\" [value]=\"startDate\" [disabled]=\"disabled\" [required]=\"required\"\n [min]=\"minDate\" [max]=\"endDate || maxDate\" (dateInput)=\"onStartDateChange($event)\"\n (dateChange)=\"onStartDateChange($event)\" [attr.data-testid]=\"dataTestId ? dataTestId + '-start' : null\">\n <input matEndDate [placeholder]=\"endPlaceholder\" [value]=\"endDate\" [disabled]=\"disabled\" [required]=\"required\"\n [min]=\"startDate || minDate\" [max]=\"maxDate\" (dateInput)=\"onEndDateChange($event)\"\n (dateChange)=\"onEndDateChange($event)\" [attr.data-testid]=\"dataTestId ? dataTestId + '-end' : null\">\n </mat-date-range-input>\n\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\" [disabled]=\"disabled\">\n </mat-datepicker-toggle>\n\n <mat-date-range-picker #picker [startAt]=\"startAt\" [opened]=\"opened\" [touchUi]=\"touchUi\"\n (openedChange)=\"onOpenedChange($event)\" (selectedChange)=\"onDateRangeChange($event)\">\n </mat-date-range-picker>\n\n\n</mat-form-field>\n\n<!-- Range display and validation -->\n<div *ngIf=\"startDate || endDate\" class=\"range-display\" [ngClass]=\"getSizeClass()\">\n <span class=\"range-text\" [class.invalid]=\"!isRangeValid\">\n {{ displayText }}\n </span>\n <span *ngIf=\"!isRangeValid\" class=\"error-message\">\n End date must be after start date\n </span>\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\";: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}.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:140%;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{--elevation-1: 0 1px 5px 1px rgba(113, 119, 147, .1);--elevation-2: 0 2px 10px 2px rgba(113, 119, 147, .1);--elevation-3: 0 4px 15px 3px rgba(113, 119, 147, .12);--elevation-4: 0 6px 10px 4px rgba(113, 119, 147, .15);--elevation-5: 0 5px 15px 5px rgba(113, 119, 147, .2);--elevation-6: 0 2px 4px 0 rgba(24, 43, 125, .15)}.elevation-1{box-shadow:var(--elevation-1)}.elevation-2{box-shadow:var(--elevation-2)}.elevation-3{box-shadow:var(--elevation-3)}.elevation-4{box-shadow:var(--elevation-4)}.elevation-5{box-shadow:var(--elevation-5)}.elevation-6{box-shadow:var(--elevation-6)}.mat_form{width:100%}.range-display{margin-top:var(--space-8);padding:var(--space-8) var(--space-12);background:var(--color-grey-50);border-radius:var(--radius-4);border:1px solid var(--color-grey-200)}.range-text{font-size:14px;color:var(--color-grey-700);font-weight:500}.range-text.invalid{color:var(--color-error-500)}.error-message{display:block;font-size:12px;color:var(--color-error-500);margin-top:var(--space-4)}.clear-button{color:var(--color-grey-500);margin-left:var(--space-4)}.clear-button:hover{color:var(--color-error-500)}.range-text{display:none!important}::ng-deep .al-date-range-size-small .mat-mdc-form-field-infix,::ng-deep .al-date-range-size-medium .mat-mdc-form-field-infix,::ng-deep .al-date-range-size-large .mat-mdc-form-field-infix{padding:0 12px!important;display:flex;align-items:center}::ng-deep .al-date-range-size-small .mat-mdc-form-field-infix{min-height:34px!important;height:34px!important}::ng-deep .al-date-range-size-medium .mat-mdc-form-field-infix{min-height:40px!important;height:40px!important}::ng-deep .al-date-range-size-large .mat-mdc-form-field-infix{min-height:48px!important;height:48px!important}::ng-deep .al-date-range-category-default{--mdc-outlined-text-field-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-focus-outline-color: #5473E8 !important;--mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-outline-width: 1px !important;--mdc-outlined-text-field-focus-outline-width: 1px !important;--mdc-outlined-text-field-hover-outline-width: 1px !important}::ng-deep .al-date-range-category-disabled{--mdc-outlined-text-field-outline-color: var(--color-grey-300) !important;--mdc-outlined-text-field-focus-outline-color: var(--color-grey-300) !important;--mdc-outlined-text-field-hover-outline-color: var(--color-grey-300) !important;--mdc-outlined-text-field-outline-width: 1px !important;--mdc-outlined-text-field-focus-outline-width: 1px !important;--mdc-outlined-text-field-hover-outline-width: 1px !important}::ng-deep .mat_form .mat-mdc-form-field-flex,::ng-deep .mat_form .mat-mdc-text-field-wrapper,::ng-deep .mat_form .mat-mdc-form-field-infix{background-color:#f7f9fe!important}::ng-deep .mat_form .mat-mdc-form-field-subscript-wrapper{background-color:transparent!important;display:none!important}::ng-deep .mat_form .mat-mdc-form-field-subscript-wrapper{display:block!important}::ng-deep .mat_form .mat-mdc-form-field-focus-overlay{background-color:#f7f9fe!important}::ng-deep .mat_form .mat-mdc-form-field .mdc-notched-outline{box-shadow:none!important}::ng-deep .mat_form .mdc-notched-outline__leading,::ng-deep .mat_form .mdc-notched-outline__notch,::ng-deep .mat_form .mdc-notched-outline__trailing{border-color:#c3c5d1!important;border-width:1px!important}::ng-deep .mat_form .mat-mdc-form-field:hover .mdc-notched-outline__leading,::ng-deep .mat_form .mat-mdc-form-field:hover .mdc-notched-outline__notch,::ng-deep .mat_form .mat-mdc-form-field:hover .mdc-notched-outline__trailing{border-color:#c3c5d1!important;border-width:1px!important}::ng-deep .mat_form .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat_form .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat_form .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:#5473e8!important;border-width:1px!important}::ng-deep .mat_form .mat-mdc-form-field:active .mdc-notched-outline__leading,::ng-deep .mat_form .mat-mdc-form-field:active .mdc-notched-outline__notch,::ng-deep .mat_form .mat-mdc-form-field:active .mdc-notched-outline__trailing{border-color:#5473e8!important;border-width:1px!important}::ng-deep .mat_form .mdc-notched-outline__leading{border-right:none!important}::ng-deep .mat_form .mdc-notched-outline__notch{border-left:none!important;border-right:none!important}::ng-deep .al-date-range-size-small mat-icon{height:16px!important;width:16px!important;font-size:16px!important}::ng-deep .al-date-range-size-medium mat-icon{height:24px!important;width:24px!important;font-size:24px!important}::ng-deep .al-date-range-size-large mat-icon{height:24px!important;width:24px!important;font-size:24px!important}::ng-deep .al-date-range-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:13px!important}::ng-deep .al-date-range-size-medium .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:16px!important}::ng-deep .al-date-range-size-large .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:20px!important}::ng-deep .al-date-range-size-small .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -22.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-date-range-size-medium .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -24.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-date-range-size-large .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -29.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{padding:var(--space-8)!important;height:40px!important;width:40px!important}::ng-deep .al-date-range-size-small .mat-mdc-icon-button.mat-mdc-button-base{padding:0!important;height:24px!important;width:24px!important}::ng-deep .al-date-range-size-medium .mat-mdc-icon-button.mat-mdc-button-base{padding:0!important;height:24px!important;width:24px!important}::ng-deep .al-date-range-size-large .mat-mdc-icon-button.mat-mdc-button-base{padding:var(--space-8)!important;height:24px!important;width:24px!important}::ng-deep .al-date-range-size-small .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .al-date-range-size-medium .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .al-date-range-size-large .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:#5473e8!important}::ng-deep .mat_form .mat-mdc-form-field-suffix{margin-right:12px!important}::ng-deep .mat_form .mat-datepicker-toggle{margin-right:12px!important}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-left:0!important}\n"] }]
|
|
5347
|
+
], template: "<mat-form-field class=\"mat_form\" [ngClass]=\"[getSizeClass(), getCategoryClass()]\" appearance=\"outline\"\n [attr.data-test-id]=\"dataTestId\">\n\n <mat-label>{{ labelText }}</mat-label>\n\n <mat-date-range-input [rangePicker]=\"picker\">\n <input matStartDate [placeholder]=\"startPlaceholder\" [value]=\"startDate\" [disabled]=\"disabled\" [required]=\"required\"\n [min]=\"minDate\" [max]=\"endDate || maxDate\" (dateInput)=\"onStartDateChange($event)\"\n (dateChange)=\"onStartDateChange($event)\" [attr.data-testid]=\"dataTestId ? dataTestId + '-start' : null\">\n <input matEndDate [placeholder]=\"endPlaceholder\" [value]=\"endDate\" [disabled]=\"disabled\" [required]=\"required\"\n [min]=\"startDate || minDate\" [max]=\"maxDate\" (dateInput)=\"onEndDateChange($event)\"\n (dateChange)=\"onEndDateChange($event)\" [attr.data-testid]=\"dataTestId ? dataTestId + '-end' : null\">\n </mat-date-range-input>\n\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\" [disabled]=\"disabled\">\n </mat-datepicker-toggle>\n\n <mat-date-range-picker #picker [startAt]=\"startAt\" [opened]=\"opened\" [touchUi]=\"touchUi\"\n (openedChange)=\"onOpenedChange($event)\" (selectedChange)=\"onDateRangeChange($event)\">\n </mat-date-range-picker>\n\n\n</mat-form-field>\n\n<!-- Range display and validation -->\n<div *ngIf=\"startDate || endDate\" class=\"range-display\" [ngClass]=\"getSizeClass()\">\n <span class=\"range-text\" [class.invalid]=\"!isRangeValid\">\n {{ displayText }}\n </span>\n <span *ngIf=\"!isRangeValid\" class=\"error-message\">\n End date must be after start date\n </span>\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\";: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}.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}:root{--elevation-1: 0 1px 5px 1px rgba(113, 119, 147, .1);--elevation-2: 0 2px 10px 2px rgba(113, 119, 147, .1);--elevation-3: 0 4px 15px 3px rgba(113, 119, 147, .12);--elevation-4: 0 6px 10px 4px rgba(113, 119, 147, .15);--elevation-5: 0 5px 15px 5px rgba(113, 119, 147, .2);--elevation-6: 0 2px 4px 0 rgba(24, 43, 125, .15)}.elevation-1{box-shadow:var(--elevation-1)}.elevation-2{box-shadow:var(--elevation-2)}.elevation-3{box-shadow:var(--elevation-3)}.elevation-4{box-shadow:var(--elevation-4)}.elevation-5{box-shadow:var(--elevation-5)}.elevation-6{box-shadow:var(--elevation-6)}.mat_form{width:100%}.range-display{margin-top:var(--space-8);padding:var(--space-8) var(--space-12);background:var(--color-grey-50);border-radius:var(--radius-4);border:1px solid var(--color-grey-200)}.range-text{font-size:14px;color:var(--color-grey-700);font-weight:500}.range-text.invalid{color:var(--color-error-500)}.error-message{display:block;font-size:12px;color:var(--color-error-500);margin-top:var(--space-4)}.clear-button{color:var(--color-grey-500);margin-left:var(--space-4)}.clear-button:hover{color:var(--color-error-500)}.range-text{display:none!important}::ng-deep .al-date-range-size-small .mat-mdc-form-field-infix,::ng-deep .al-date-range-size-medium .mat-mdc-form-field-infix,::ng-deep .al-date-range-size-large .mat-mdc-form-field-infix{padding:0 12px!important;display:flex;align-items:center}::ng-deep .al-date-range-size-small .mat-mdc-form-field-infix{min-height:34px!important;height:34px!important}::ng-deep .al-date-range-size-medium .mat-mdc-form-field-infix{min-height:40px!important;height:40px!important}::ng-deep .al-date-range-size-large .mat-mdc-form-field-infix{min-height:48px!important;height:48px!important}::ng-deep .al-date-range-category-default{--mdc-outlined-text-field-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-focus-outline-color: #5473E8 !important;--mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-outline-width: 1px !important;--mdc-outlined-text-field-focus-outline-width: 1px !important;--mdc-outlined-text-field-hover-outline-width: 1px !important}::ng-deep .al-date-range-category-disabled{--mdc-outlined-text-field-outline-color: var(--color-grey-300) !important;--mdc-outlined-text-field-focus-outline-color: var(--color-grey-300) !important;--mdc-outlined-text-field-hover-outline-color: var(--color-grey-300) !important;--mdc-outlined-text-field-outline-width: 1px !important;--mdc-outlined-text-field-focus-outline-width: 1px !important;--mdc-outlined-text-field-hover-outline-width: 1px !important}::ng-deep .mat_form .mat-mdc-form-field-flex,::ng-deep .mat_form .mat-mdc-text-field-wrapper,::ng-deep .mat_form .mat-mdc-form-field-infix{background-color:#f7f9fe!important}::ng-deep .mat_form .mat-mdc-form-field-subscript-wrapper{background-color:transparent!important;display:none!important}::ng-deep .mat_form .mat-mdc-form-field-subscript-wrapper{display:block!important}::ng-deep .mat_form .mat-mdc-form-field-focus-overlay{background-color:#f7f9fe!important}::ng-deep .mat_form .mat-mdc-form-field .mdc-notched-outline{box-shadow:none!important}::ng-deep .mat_form .mdc-notched-outline__leading,::ng-deep .mat_form .mdc-notched-outline__notch,::ng-deep .mat_form .mdc-notched-outline__trailing{border-color:#c3c5d1!important;border-width:1px!important}::ng-deep .mat_form .mat-mdc-form-field:hover .mdc-notched-outline__leading,::ng-deep .mat_form .mat-mdc-form-field:hover .mdc-notched-outline__notch,::ng-deep .mat_form .mat-mdc-form-field:hover .mdc-notched-outline__trailing{border-color:#c3c5d1!important;border-width:1px!important}::ng-deep .mat_form .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .mat_form .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .mat_form .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:#5473e8!important;border-width:1px!important}::ng-deep .mat_form .mat-mdc-form-field:active .mdc-notched-outline__leading,::ng-deep .mat_form .mat-mdc-form-field:active .mdc-notched-outline__notch,::ng-deep .mat_form .mat-mdc-form-field:active .mdc-notched-outline__trailing{border-color:#5473e8!important;border-width:1px!important}::ng-deep .mat_form .mdc-notched-outline__leading{border-right:none!important}::ng-deep .mat_form .mdc-notched-outline__notch{border-left:none!important;border-right:none!important}::ng-deep .al-date-range-size-small mat-icon{height:16px!important;width:16px!important;font-size:16px!important}::ng-deep .al-date-range-size-medium mat-icon{height:24px!important;width:24px!important;font-size:24px!important}::ng-deep .al-date-range-size-large mat-icon{height:24px!important;width:24px!important;font-size:24px!important}::ng-deep .al-date-range-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:13px!important}::ng-deep .al-date-range-size-medium .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:16px!important}::ng-deep .al-date-range-size-large .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:20px!important}::ng-deep .al-date-range-size-small .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -22.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-date-range-size-medium .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -24.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-date-range-size-large .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -29.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{padding:var(--space-8)!important;height:40px!important;width:40px!important}::ng-deep .al-date-range-size-small .mat-mdc-icon-button.mat-mdc-button-base{padding:0!important;height:24px!important;width:24px!important}::ng-deep .al-date-range-size-medium .mat-mdc-icon-button.mat-mdc-button-base{padding:0!important;height:24px!important;width:24px!important}::ng-deep .al-date-range-size-large .mat-mdc-icon-button.mat-mdc-button-base{padding:var(--space-8)!important;height:24px!important;width:24px!important}::ng-deep .al-date-range-size-small .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .al-date-range-size-medium .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .al-date-range-size-large .mat-mdc-button-touch-target{height:24px!important;width:24px!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label{color:#5473e8!important}::ng-deep .mat_form .mat-mdc-form-field-suffix{margin-right:12px!important}::ng-deep .mat_form .mat-datepicker-toggle{margin-right:12px!important}::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding-left:0!important}\n"] }]
|
|
5439
5348
|
}], propDecorators: { dataTestId: [{
|
|
5440
5349
|
type: Input
|
|
5441
5350
|
}], formControlName: [{
|
|
@@ -5575,11 +5484,11 @@ class TabsComponent {
|
|
|
5575
5484
|
}
|
|
5576
5485
|
}
|
|
5577
5486
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5578
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TabsComponent, isStandalone: true, selector: "al-tabs", inputs: { selectedIndex: "selectedIndex", size: "size" }, queries: [{ propertyName: "tabComponents", predicate: AlTabComponent, descendants: true }], ngImport: i0, template: "<mat-tab-group [selectedIndex]=\"selectedIndex\" [class]=\"'tabs-' + size\" mat-align-tabs=\"start\" headerPosition=\"above\">\n <mat-tab *ngFor=\"let tab of tabComponents; let i = index\" [label]=\"tab.labelText\">\n <ng-container [ngTemplateOutlet]=\"tab.templateRef\"></ng-container>\n </mat-tab>\n <!-- Debug info -->\n <div *ngIf=\"!tabComponents || tabComponents.length === 0\" style=\"padding: 20px; color: red;\">\n No tabs found. Tab components: {{ tabComponents?.length || 0 }}\n </div>\n</mat-tab-group>\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}: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,:host ::ng-deep .mat-mdc-tab:not(.mat-mdc-tab-disabled){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:140%;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}:host{display:block}:host ::ng-deep .tabs-small .mat-mdc-tab-header{height:32px;background-color:#fff}:host ::ng-deep .tabs-small .mat-mdc-tab{border:1px solid #DEE0E6;min-width:130px!important;width:auto!important;flex:0 0 auto!important;padding:0 32px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important}:host ::ng-deep .tabs-small .mat-mdc-tab:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .tabs-small .mat-mdc-tab:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .tabs-small .mat-mdc-tab:not(:first-child):not(:last-child){border-left:none!important;border-right:none!important}:host ::ng-deep .tabs-medium .mat-mdc-tab-header{height:36px;background-color:#fff}:host ::ng-deep .tabs-medium .mat-mdc-tab{border:1px solid #DEE0E6;min-width:130px!important;width:auto!important;flex:0 0 auto!important;padding:0 36px!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}:host ::ng-deep .tabs-medium .mat-mdc-tab:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .tabs-medium .mat-mdc-tab:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .tabs-medium .mat-mdc-tab:not(:first-child):not(:last-child){border-left:none!important;border-right:none!important}:host ::ng-deep .tabs-large .mat-mdc-tab-header{height:40px;background-color:#fff}:host ::ng-deep .tabs-large .mat-mdc-tab{border:1px solid #DEE0E6;min-width:130px!important;width:auto!important;flex:0 0 auto!important;padding:0 40px!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important}:host ::ng-deep .tabs-large .mat-mdc-tab:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .tabs-large .mat-mdc-tab:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .tabs-large .mat-mdc-tab:not(:first-child):not(:last-child){border-left:none!important;border-right:none!important}:host ::ng-deep .mat-mdc-tab-body-wrapper{padding:16px;min-height:100px;background-color:#fff}:host ::ng-deep .mat-mdc-tab:not(.mat-mdc-tab-disabled){color:#4b4f62}:host ::ng-deep .mat-mdc-tab:not(.mat-mdc-tab-disabled):hover{background-color:#ecedf1}:host ::ng-deep .mat-mdc-tab.mat-mdc-tab-active{background-color:#d1d3db!important;color:#383b4a;font-weight:500}:host ::ng-deep .mat-mdc-tab.mat-mdc-tab-active,:host ::ng-deep .mat-mdc-tab.mdc-tab--active{background-color:#d1d3db!important}:host ::ng-deep .mat-mdc-tab.mat-mdc-tab-active .mdc-tab__text-label,:host ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label,:host ::ng-deep .mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:#383b4a!important}:host ::ng-deep .mat-mdc-tab .mdc-tab-indicator{display:none!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: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2$6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] }); }
|
|
5487
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TabsComponent, isStandalone: true, selector: "al-tabs", inputs: { selectedIndex: "selectedIndex", size: "size" }, queries: [{ propertyName: "tabComponents", predicate: AlTabComponent, descendants: true }], ngImport: i0, template: "<mat-tab-group [selectedIndex]=\"selectedIndex\" [class]=\"'tabs-' + size\" mat-align-tabs=\"start\" headerPosition=\"above\">\n <mat-tab *ngFor=\"let tab of tabComponents; let i = index\" [label]=\"tab.labelText\">\n <ng-container [ngTemplateOutlet]=\"tab.templateRef\"></ng-container>\n </mat-tab>\n <!-- Debug info -->\n <div *ngIf=\"!tabComponents || tabComponents.length === 0\" style=\"padding: 20px; color: red;\">\n No tabs found. Tab components: {{ tabComponents?.length || 0 }}\n </div>\n</mat-tab-group>\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}: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,:host ::ng-deep .mat-mdc-tab:not(.mat-mdc-tab-disabled){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}:host{display:block}:host ::ng-deep .tabs-small .mat-mdc-tab-header{height:32px;background-color:#fff}:host ::ng-deep .tabs-small .mat-mdc-tab{border:1px solid #DEE0E6;min-width:130px!important;width:auto!important;flex:0 0 auto!important;padding:0 32px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important}:host ::ng-deep .tabs-small .mat-mdc-tab:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .tabs-small .mat-mdc-tab:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .tabs-small .mat-mdc-tab:not(:first-child):not(:last-child){border-left:none!important;border-right:none!important}:host ::ng-deep .tabs-medium .mat-mdc-tab-header{height:36px;background-color:#fff}:host ::ng-deep .tabs-medium .mat-mdc-tab{border:1px solid #DEE0E6;min-width:130px!important;width:auto!important;flex:0 0 auto!important;padding:0 36px!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}:host ::ng-deep .tabs-medium .mat-mdc-tab:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .tabs-medium .mat-mdc-tab:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .tabs-medium .mat-mdc-tab:not(:first-child):not(:last-child){border-left:none!important;border-right:none!important}:host ::ng-deep .tabs-large .mat-mdc-tab-header{height:40px;background-color:#fff}:host ::ng-deep .tabs-large .mat-mdc-tab{border:1px solid #DEE0E6;min-width:130px!important;width:auto!important;flex:0 0 auto!important;padding:0 40px!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important}:host ::ng-deep .tabs-large .mat-mdc-tab:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .tabs-large .mat-mdc-tab:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .tabs-large .mat-mdc-tab:not(:first-child):not(:last-child){border-left:none!important;border-right:none!important}:host ::ng-deep .mat-mdc-tab-body-wrapper{padding:16px;min-height:100px;background-color:#fff}:host ::ng-deep .mat-mdc-tab:not(.mat-mdc-tab-disabled){color:#4b4f62}:host ::ng-deep .mat-mdc-tab:not(.mat-mdc-tab-disabled):hover{background-color:#ecedf1}:host ::ng-deep .mat-mdc-tab.mat-mdc-tab-active{background-color:#d1d3db!important;color:#383b4a;font-weight:500}:host ::ng-deep .mat-mdc-tab.mat-mdc-tab-active,:host ::ng-deep .mat-mdc-tab.mdc-tab--active{background-color:#d1d3db!important}:host ::ng-deep .mat-mdc-tab.mat-mdc-tab-active .mdc-tab__text-label,:host ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label,:host ::ng-deep .mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:#383b4a!important}:host ::ng-deep .mat-mdc-tab .mdc-tab-indicator{display:none!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: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2$6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] }); }
|
|
5579
5488
|
}
|
|
5580
5489
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsComponent, decorators: [{
|
|
5581
5490
|
type: Component,
|
|
5582
|
-
args: [{ selector: 'al-tabs', standalone: true, imports: [CommonModule, MatTabsModule, AlTabComponent], template: "<mat-tab-group [selectedIndex]=\"selectedIndex\" [class]=\"'tabs-' + size\" mat-align-tabs=\"start\" headerPosition=\"above\">\n <mat-tab *ngFor=\"let tab of tabComponents; let i = index\" [label]=\"tab.labelText\">\n <ng-container [ngTemplateOutlet]=\"tab.templateRef\"></ng-container>\n </mat-tab>\n <!-- Debug info -->\n <div *ngIf=\"!tabComponents || tabComponents.length === 0\" style=\"padding: 20px; color: red;\">\n No tabs found. Tab components: {{ tabComponents?.length || 0 }}\n </div>\n</mat-tab-group>\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}: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,:host ::ng-deep .mat-mdc-tab:not(.mat-mdc-tab-disabled){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:140%;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}:host{display:block}:host ::ng-deep .tabs-small .mat-mdc-tab-header{height:32px;background-color:#fff}:host ::ng-deep .tabs-small .mat-mdc-tab{border:1px solid #DEE0E6;min-width:130px!important;width:auto!important;flex:0 0 auto!important;padding:0 32px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important}:host ::ng-deep .tabs-small .mat-mdc-tab:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .tabs-small .mat-mdc-tab:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .tabs-small .mat-mdc-tab:not(:first-child):not(:last-child){border-left:none!important;border-right:none!important}:host ::ng-deep .tabs-medium .mat-mdc-tab-header{height:36px;background-color:#fff}:host ::ng-deep .tabs-medium .mat-mdc-tab{border:1px solid #DEE0E6;min-width:130px!important;width:auto!important;flex:0 0 auto!important;padding:0 36px!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}:host ::ng-deep .tabs-medium .mat-mdc-tab:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .tabs-medium .mat-mdc-tab:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .tabs-medium .mat-mdc-tab:not(:first-child):not(:last-child){border-left:none!important;border-right:none!important}:host ::ng-deep .tabs-large .mat-mdc-tab-header{height:40px;background-color:#fff}:host ::ng-deep .tabs-large .mat-mdc-tab{border:1px solid #DEE0E6;min-width:130px!important;width:auto!important;flex:0 0 auto!important;padding:0 40px!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important}:host ::ng-deep .tabs-large .mat-mdc-tab:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .tabs-large .mat-mdc-tab:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .tabs-large .mat-mdc-tab:not(:first-child):not(:last-child){border-left:none!important;border-right:none!important}:host ::ng-deep .mat-mdc-tab-body-wrapper{padding:16px;min-height:100px;background-color:#fff}:host ::ng-deep .mat-mdc-tab:not(.mat-mdc-tab-disabled){color:#4b4f62}:host ::ng-deep .mat-mdc-tab:not(.mat-mdc-tab-disabled):hover{background-color:#ecedf1}:host ::ng-deep .mat-mdc-tab.mat-mdc-tab-active{background-color:#d1d3db!important;color:#383b4a;font-weight:500}:host ::ng-deep .mat-mdc-tab.mat-mdc-tab-active,:host ::ng-deep .mat-mdc-tab.mdc-tab--active{background-color:#d1d3db!important}:host ::ng-deep .mat-mdc-tab.mat-mdc-tab-active .mdc-tab__text-label,:host ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label,:host ::ng-deep .mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:#383b4a!important}:host ::ng-deep .mat-mdc-tab .mdc-tab-indicator{display:none!important}\n"] }]
|
|
5491
|
+
args: [{ selector: 'al-tabs', standalone: true, imports: [CommonModule, MatTabsModule, AlTabComponent], template: "<mat-tab-group [selectedIndex]=\"selectedIndex\" [class]=\"'tabs-' + size\" mat-align-tabs=\"start\" headerPosition=\"above\">\n <mat-tab *ngFor=\"let tab of tabComponents; let i = index\" [label]=\"tab.labelText\">\n <ng-container [ngTemplateOutlet]=\"tab.templateRef\"></ng-container>\n </mat-tab>\n <!-- Debug info -->\n <div *ngIf=\"!tabComponents || tabComponents.length === 0\" style=\"padding: 20px; color: red;\">\n No tabs found. Tab components: {{ tabComponents?.length || 0 }}\n </div>\n</mat-tab-group>\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}: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,:host ::ng-deep .mat-mdc-tab:not(.mat-mdc-tab-disabled){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}:host{display:block}:host ::ng-deep .tabs-small .mat-mdc-tab-header{height:32px;background-color:#fff}:host ::ng-deep .tabs-small .mat-mdc-tab{border:1px solid #DEE0E6;min-width:130px!important;width:auto!important;flex:0 0 auto!important;padding:0 32px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important}:host ::ng-deep .tabs-small .mat-mdc-tab:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .tabs-small .mat-mdc-tab:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .tabs-small .mat-mdc-tab:not(:first-child):not(:last-child){border-left:none!important;border-right:none!important}:host ::ng-deep .tabs-medium .mat-mdc-tab-header{height:36px;background-color:#fff}:host ::ng-deep .tabs-medium .mat-mdc-tab{border:1px solid #DEE0E6;min-width:130px!important;width:auto!important;flex:0 0 auto!important;padding:0 36px!important;height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}:host ::ng-deep .tabs-medium .mat-mdc-tab:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .tabs-medium .mat-mdc-tab:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .tabs-medium .mat-mdc-tab:not(:first-child):not(:last-child){border-left:none!important;border-right:none!important}:host ::ng-deep .tabs-large .mat-mdc-tab-header{height:40px;background-color:#fff}:host ::ng-deep .tabs-large .mat-mdc-tab{border:1px solid #DEE0E6;min-width:130px!important;width:auto!important;flex:0 0 auto!important;padding:0 40px!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important}:host ::ng-deep .tabs-large .mat-mdc-tab:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .tabs-large .mat-mdc-tab:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .tabs-large .mat-mdc-tab:not(:first-child):not(:last-child){border-left:none!important;border-right:none!important}:host ::ng-deep .mat-mdc-tab-body-wrapper{padding:16px;min-height:100px;background-color:#fff}:host ::ng-deep .mat-mdc-tab:not(.mat-mdc-tab-disabled){color:#4b4f62}:host ::ng-deep .mat-mdc-tab:not(.mat-mdc-tab-disabled):hover{background-color:#ecedf1}:host ::ng-deep .mat-mdc-tab.mat-mdc-tab-active{background-color:#d1d3db!important;color:#383b4a;font-weight:500}:host ::ng-deep .mat-mdc-tab.mat-mdc-tab-active,:host ::ng-deep .mat-mdc-tab.mdc-tab--active{background-color:#d1d3db!important}:host ::ng-deep .mat-mdc-tab.mat-mdc-tab-active .mdc-tab__text-label,:host ::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label,:host ::ng-deep .mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:#383b4a!important}:host ::ng-deep .mat-mdc-tab .mdc-tab-indicator{display:none!important}\n"] }]
|
|
5583
5492
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tabComponents: [{
|
|
5584
5493
|
type: ContentChildren,
|
|
5585
5494
|
args: [AlTabComponent, { descendants: true }]
|
|
@@ -5748,13 +5657,13 @@ class ModalComponent {
|
|
|
5748
5657
|
const basePath = this.getBasePath();
|
|
5749
5658
|
return `${basePath}/images/Success.svg`;
|
|
5750
5659
|
}
|
|
5751
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalComponent, deps: [{ token: i1$
|
|
5752
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ModalComponent, isStandalone: true, selector: "al-modal", inputs: { titleText: "titleText", userMessage: "userMessage", leftIcon: "leftIcon", rightIcon: "rightIcon", closeIcon: "closeIcon", showHeader: "showHeader", cancelLabel: "cancelLabel", submitLabel: "submitLabel", cancelCategory: "cancelCategory", submitCategory: "submitCategory", buttonSize: "buttonSize", cancelIcon: "cancelIcon", submitIcon: "submitIcon", showCancelButton: "showCancelButton", showSubmitButton: "showSubmitButton", showFooter: "showFooter", buttonAlignment: "buttonAlignment", messageAlignment: "messageAlignment", useCustomHeader: "useCustomHeader", customHeaderTitle: "customHeaderTitle", customHeaderDescription: "customHeaderDescription", customHeaderIcon: "customHeaderIcon", customActionLabel: "customActionLabel", customActionIcon: "customActionIcon", customActionRightIcon: "customActionRightIcon", templatingGuidePrefix: "templatingGuidePrefix", templatingGuideLabel: "templatingGuideLabel", templatingGuideHref: "templatingGuideHref", modalType: "modalType", feedbackVariant: "feedbackVariant", feedbackIcon: "feedbackIcon" }, outputs: { cancel: "cancel", submit: "submit", close: "close", requestTemplate: "requestTemplate", onHover: "onHover", onMouseLeave: "onMouseLeave", optionSelect: "optionSelect" }, ngImport: i0, template: "<div class=\"modal-container\">\n <!-- Feedback Modal Type - Success, Warning, or Error -->\n <div *ngIf=\"modalType === 'feedback'\" class=\"modal-body\">\n <div mat-dialog-content>\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:24px;padding-top:8px;\">\n <!-- Feedback Icon (hardcoded by variant, optional single override via feedbackIcon) -->\n <mat-icon *ngIf=\"feedbackIcon\" class=\"feedback-icon\" [ngClass]=\"{\n 'success': feedbackVariant === 'success',\n 'warning': feedbackVariant === 'warning',\n 'error': feedbackVariant === 'error'\n }\">{{ feedbackIcon }}</mat-icon>\n <img *ngIf=\"!feedbackIcon && feedbackVariant === 'success'\" [src]=\"getSuccessIconPath()\" alt=\"Success\"\n class=\"feedback-icon success feedback-icon-image\" />\n <img *ngIf=\"!feedbackIcon && feedbackVariant === 'warning'\" [src]=\"getWarningIconPath()\" alt=\"Warning\"\n class=\"feedback-icon warning feedback-icon-image\" />\n <img *ngIf=\"!feedbackIcon && feedbackVariant === 'error'\" [src]=\"getErrorIconPath()\" alt=\"Error\"\n class=\"feedback-icon error feedback-icon-image\" />\n\n <div style=\"color:#4b4f62;font-weight:500;\">{{ userMessage || getDefaultMessage() }}</div>\n </div>\n </div>\n\n <div *ngIf=\"showFooter\" mat-dialog-actions class=\"modal-actions\"\n [style.justify-content]=\"buttonAlignment === 'left' ? 'flex-start' : buttonAlignment === 'right' ? 'flex-end' : 'center'\">\n <al-button *ngIf=\"showSubmitAction\" [category]=\"submitCategory\" [size]=\"buttonSize\" [iconOutlined]=\"false\"\n [labelText]=\"submitLabel || 'Ok'\" [leftIcon]=\"submitIcon\" [rightIcon]=\"''\" [dataTestId]=\"'submit-btn'\"\n [hasDropDown]=\"false\" [dropdownItems]=\"[]\" (onClick)=\"onSubmit()\"></al-button>\n </div>\n </div>\n\n <!-- Regular Modal for Generic Type -->\n <div *ngIf=\"modalType !== 'feedback'\">\n <!-- Default Header -->\n <h2 *ngIf=\"!useCustomHeader && showHeader\" mat-dialog-title class=\"modal-title\">\n <span class=\"title-content\">\n <mat-icon *ngIf=\"leftIcon\" class=\"title-icon\">{{ leftIcon }}</mat-icon>\n {{ titleText }}\n <mat-icon *ngIf=\"rightIcon\" class=\"title-icon\">{{ rightIcon }}</mat-icon>\n </span>\n <al-icon-button *ngIf=\"closeIcon\" [icon]=\"'close'\" [iconOutlined]=\"false\" [customColour]=\"'#ffffff'\"\n [colour]=\"'blue'\" [size]=\"'base'\" [disabled]=\"false\" (onClick)=\"onClose()\"\n [dataTestId]=\"'close-btn'\"></al-icon-button>\n </h2>\n\n <!-- Custom Header -->\n <div *ngIf=\"useCustomHeader && showHeader\" class=\"custom-header\">\n <!-- Left side content -->\n <div class=\"custom-header-left\">\n <!-- Icon and Title -->\n <div class=\"custom-header-title-section\">\n <div *ngIf=\"customHeaderIcon\" class=\"custom-header-icon\">\n <mat-icon>{{ customHeaderIcon }}</mat-icon>\n </div>\n <h2 class=\"custom-header-title\">{{ customHeaderTitle }}</h2>\n </div>\n\n <!-- Description paragraph -->\n <p class=\"custom-header-description\">{{ customHeaderDescription }}</p>\n\n <!-- Templating guide link/text -->\n <span class=\"templating-guide-prefix\">{{ templatingGuidePrefix }}</span>\n <a class=\"templating-guide-link\" [href]=\"templatingGuideHref\">{{ templatingGuideLabel }}</a>\n <span class=\"templating-guide-suffix\">.</span>\n </div>\n\n <!-- Right side content -->\n <div class=\"custom-header-right\">\n <!-- Close button -->\n <al-icon-button *ngIf=\"closeIcon\" class=\"custom-close\" [icon]=\"'close'\" [iconOutlined]=\"false\"\n [customColour]=\"'#ffffff'\" [colour]=\"'blue'\" [size]=\"'base'\" [disabled]=\"false\" (onClick)=\"onClose()\"\n [dataTestId]=\"'close-btn'\"></al-icon-button>\n\n <!-- Action button -->\n <al-button [category]=\"submitCategory\" [size]=\"'xs'\" [iconOutlined]=\"false\" [labelText]=\"customActionLabel\"\n [leftIcon]=\"customActionIcon\" [rightIcon]=\"customActionRightIcon\" [dataTestId]=\"'custom-action-btn'\"\n [hasDropDown]=\"false\" [dropdownItems]=\"[]\" (onClick)=\"onRequestTemplate()\"></al-button>\n </div>\n </div>\n\n <div class=\"modal-body\">\n <div mat-dialog-content>\n <p *ngIf=\"userMessage && !hasProjectedContent\" class=\"modal-message\" [style.text-align]=\"messageAlignment\">{{\n userMessage }}</p>\n <ng-content></ng-content>\n </div>\n\n <div *ngIf=\"showFooter\" mat-dialog-actions class=\"modal-actions\"\n [style.justify-content]=\"buttonAlignment === 'left' ? 'flex-start' : buttonAlignment === 'right' ? 'flex-end' : 'center'\">\n <al-button *ngIf=\"showCancelAction\" [category]=\"cancelCategory\" [size]=\"buttonSize\" [iconOutlined]=\"false\"\n [labelText]=\"cancelLabel\" [leftIcon]=\"cancelIcon\" [rightIcon]=\"''\" [dataTestId]=\"'cancel-btn'\"\n [hasDropDown]=\"false\" [dropdownItems]=\"[]\" (onClick)=\"onCancel()\"></al-button>\n\n <al-button *ngIf=\"showSubmitAction\" [category]=\"submitCategory\" [size]=\"buttonSize\" [iconOutlined]=\"false\"\n [labelText]=\"submitLabel\" [leftIcon]=\"submitIcon\" [rightIcon]=\"''\" [dataTestId]=\"'submit-btn'\"\n [hasDropDown]=\"false\" [dropdownItems]=\"[]\" (onClick)=\"onSubmit()\"></al-button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".modal-container{padding:0;background:#fff;border-radius:16px;box-shadow:0 6px 10px 4px #71779326;display:flex;flex-direction:column;max-height:90vh;overflow:auto}.modal-title{color:#fff;margin:0;padding:12px 24px;font-family:Roboto,sans-serif;background-color:#4b4f62;border-radius:8px 8px 0 0;font-size:16px;font-weight:600;line-height:24px;display:flex;align-items:center;justify-content:space-between}.modal-title .title-content{display:flex;align-items:center;gap:8px;flex:1}.modal-title .title-icon{font-size:16px;width:16px;height:16px;color:#fff}.custom-header{background-color:#4b4f62;border-radius:16px 16px 0 0;padding:36px 64px;min-height:auto;gap:24px;display:flex;align-items:end;justify-content:space-between;position:relative}.custom-header-left{flex:1 1 auto;max-width:calc(100% - 260px)}.custom-header-title-section{display:flex;align-items:center;margin-bottom:8px}.custom-header-icon{display:flex;align-items:center;justify-content:center;margin-right:12px}.custom-header-icon mat-icon{color:#fff;font-size:32px;width:32px;height:32px}.custom-header-icon span{color:#fff;font-weight:700;font-size:16px}.custom-header-title{color:#fff;margin:0;font-family:Roboto,sans-serif;font-size:32px;font-style:normal;font-weight:400;line-height:120%;letter-spacing:-.032px}.custom-header-description{color:#ffffffd9;margin:0 0 4px;font-size:18px;line-height:1.5;font-family:Roboto,sans-serif}.templating-guide-link{display:inline;margin-top:4px;color:#37c1ce;text-decoration:underline}.templating-guide-prefix,.templating-guide-suffix{color:#fff}.custom-header-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:end;gap:46px}.custom-header-right .custom-close{position:absolute;top:24px;right:24px}.modal-body{padding:24px;flex:1;overflow-y:auto}.custom-header+.modal-body{padding:32px 64px}.modal-message{font-size:16px;color:#4b5563;margin:0 0 16px;line-height:1.5;font-family:Roboto,sans-serif}.modal-actions{display:flex;gap:8px;justify-content:center;align-items:center;margin:24px 0 0;box-sizing:border-box}.feedback-icon{font-size:72px;width:72px;height:72px}.feedback-icon.success{color:#4caf50}.feedback-icon.warning{color:#f6c000}.feedback-icon.error{color:#f44336}.feedback-icon-image{width:72px;height:72px;object-fit:contain}\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: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { 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"] }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColour", "iconOutlined", "size", "colour", "disabled", "dataTestId"], outputs: ["onClick"] }] }); }
|
|
5660
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalComponent, deps: [{ token: i1$2.MatDialogRef, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5661
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ModalComponent, isStandalone: true, selector: "al-modal", inputs: { titleText: "titleText", userMessage: "userMessage", leftIcon: "leftIcon", rightIcon: "rightIcon", closeIcon: "closeIcon", showHeader: "showHeader", cancelLabel: "cancelLabel", submitLabel: "submitLabel", cancelCategory: "cancelCategory", submitCategory: "submitCategory", buttonSize: "buttonSize", cancelIcon: "cancelIcon", submitIcon: "submitIcon", showCancelButton: "showCancelButton", showSubmitButton: "showSubmitButton", showFooter: "showFooter", buttonAlignment: "buttonAlignment", messageAlignment: "messageAlignment", useCustomHeader: "useCustomHeader", customHeaderTitle: "customHeaderTitle", customHeaderDescription: "customHeaderDescription", customHeaderIcon: "customHeaderIcon", customActionLabel: "customActionLabel", customActionIcon: "customActionIcon", customActionRightIcon: "customActionRightIcon", templatingGuidePrefix: "templatingGuidePrefix", templatingGuideLabel: "templatingGuideLabel", templatingGuideHref: "templatingGuideHref", modalType: "modalType", feedbackVariant: "feedbackVariant", feedbackIcon: "feedbackIcon" }, outputs: { cancel: "cancel", submit: "submit", close: "close", requestTemplate: "requestTemplate", onHover: "onHover", onMouseLeave: "onMouseLeave", optionSelect: "optionSelect" }, ngImport: i0, template: "<div class=\"modal-container\">\n <!-- Feedback Modal Type - Success, Warning, or Error -->\n <div *ngIf=\"modalType === 'feedback'\" class=\"modal-body\">\n <div mat-dialog-content>\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:24px;padding-top:8px;\">\n <!-- Feedback Icon (hardcoded by variant, optional single override via feedbackIcon) -->\n <mat-icon *ngIf=\"feedbackIcon\" class=\"feedback-icon\" [ngClass]=\"{\n 'success': feedbackVariant === 'success',\n 'warning': feedbackVariant === 'warning',\n 'error': feedbackVariant === 'error'\n }\">{{ feedbackIcon }}</mat-icon>\n <img *ngIf=\"!feedbackIcon && feedbackVariant === 'success'\" [src]=\"getSuccessIconPath()\" alt=\"Success\"\n class=\"feedback-icon success feedback-icon-image\" />\n <img *ngIf=\"!feedbackIcon && feedbackVariant === 'warning'\" [src]=\"getWarningIconPath()\" alt=\"Warning\"\n class=\"feedback-icon warning feedback-icon-image\" />\n <img *ngIf=\"!feedbackIcon && feedbackVariant === 'error'\" [src]=\"getErrorIconPath()\" alt=\"Error\"\n class=\"feedback-icon error feedback-icon-image\" />\n\n <div style=\"color:#4b4f62;font-weight:500;\">{{ userMessage || getDefaultMessage() }}</div>\n </div>\n </div>\n\n <div *ngIf=\"showFooter\" mat-dialog-actions class=\"modal-actions\"\n [style.justify-content]=\"buttonAlignment === 'left' ? 'flex-start' : buttonAlignment === 'right' ? 'flex-end' : 'center'\">\n <al-button *ngIf=\"showSubmitAction\" [category]=\"submitCategory\" [size]=\"buttonSize\" [iconOutlined]=\"false\"\n [labelText]=\"submitLabel || 'Ok'\" [leftIcon]=\"submitIcon\" [rightIcon]=\"''\" [dataTestId]=\"'submit-btn'\"\n [hasDropDown]=\"false\" [dropdownItems]=\"[]\" (onClick)=\"onSubmit()\"></al-button>\n </div>\n </div>\n\n <!-- Regular Modal for Generic Type -->\n <div *ngIf=\"modalType !== 'feedback'\">\n <!-- Default Header -->\n <h2 *ngIf=\"!useCustomHeader && showHeader\" mat-dialog-title class=\"modal-title\">\n <span class=\"title-content\">\n <mat-icon *ngIf=\"leftIcon\" class=\"title-icon\">{{ leftIcon }}</mat-icon>\n {{ titleText }}\n <mat-icon *ngIf=\"rightIcon\" class=\"title-icon\">{{ rightIcon }}</mat-icon>\n </span>\n <al-icon-button *ngIf=\"closeIcon\" [icon]=\"'close'\" [iconOutlined]=\"false\" [customColour]=\"'#ffffff'\"\n [colour]=\"'blue'\" [size]=\"'base'\" [disabled]=\"false\" (onClick)=\"onClose()\"\n [dataTestId]=\"'close-btn'\"></al-icon-button>\n </h2>\n\n <!-- Custom Header -->\n <div *ngIf=\"useCustomHeader && showHeader\" class=\"custom-header\">\n <!-- Left side content -->\n <div class=\"custom-header-left\">\n <!-- Icon and Title -->\n <div class=\"custom-header-title-section\">\n <div *ngIf=\"customHeaderIcon\" class=\"custom-header-icon\">\n <mat-icon>{{ customHeaderIcon }}</mat-icon>\n </div>\n <h2 class=\"custom-header-title\">{{ customHeaderTitle }}</h2>\n </div>\n\n <!-- Description paragraph -->\n <p class=\"custom-header-description\">{{ customHeaderDescription }}</p>\n\n <!-- Templating guide link/text -->\n <span class=\"templating-guide-prefix\">{{ templatingGuidePrefix }}</span>\n <a class=\"templating-guide-link\" [href]=\"templatingGuideHref\">{{ templatingGuideLabel }}</a>\n <span class=\"templating-guide-suffix\">.</span>\n </div>\n\n <!-- Right side content -->\n <div class=\"custom-header-right\">\n <!-- Close button -->\n <al-icon-button *ngIf=\"closeIcon\" class=\"custom-close\" [icon]=\"'close'\" [iconOutlined]=\"false\"\n [customColour]=\"'#ffffff'\" [colour]=\"'blue'\" [size]=\"'base'\" [disabled]=\"false\" (onClick)=\"onClose()\"\n [dataTestId]=\"'close-btn'\"></al-icon-button>\n\n <!-- Action button -->\n <al-button [category]=\"submitCategory\" [size]=\"'xs'\" [iconOutlined]=\"false\" [labelText]=\"customActionLabel\"\n [leftIcon]=\"customActionIcon\" [rightIcon]=\"customActionRightIcon\" [dataTestId]=\"'custom-action-btn'\"\n [hasDropDown]=\"false\" [dropdownItems]=\"[]\" (onClick)=\"onRequestTemplate()\"></al-button>\n </div>\n </div>\n\n <div class=\"modal-body\">\n <div mat-dialog-content>\n <p *ngIf=\"userMessage && !hasProjectedContent\" class=\"modal-message\" [style.text-align]=\"messageAlignment\">{{\n userMessage }}</p>\n <ng-content></ng-content>\n </div>\n\n <div *ngIf=\"showFooter\" mat-dialog-actions class=\"modal-actions\"\n [style.justify-content]=\"buttonAlignment === 'left' ? 'flex-start' : buttonAlignment === 'right' ? 'flex-end' : 'center'\">\n <al-button *ngIf=\"showCancelAction\" [category]=\"cancelCategory\" [size]=\"buttonSize\" [iconOutlined]=\"false\"\n [labelText]=\"cancelLabel\" [leftIcon]=\"cancelIcon\" [rightIcon]=\"''\" [dataTestId]=\"'cancel-btn'\"\n [hasDropDown]=\"false\" [dropdownItems]=\"[]\" (onClick)=\"onCancel()\"></al-button>\n\n <al-button *ngIf=\"showSubmitAction\" [category]=\"submitCategory\" [size]=\"buttonSize\" [iconOutlined]=\"false\"\n [labelText]=\"submitLabel\" [leftIcon]=\"submitIcon\" [rightIcon]=\"''\" [dataTestId]=\"'submit-btn'\"\n [hasDropDown]=\"false\" [dropdownItems]=\"[]\" (onClick)=\"onSubmit()\"></al-button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".modal-container{padding:0;background:#fff;border-radius:16px;box-shadow:0 6px 10px 4px #71779326;display:flex;flex-direction:column;max-height:90vh;overflow:auto}.modal-title{color:#fff;margin:0;padding:12px 24px;font-family:Roboto,sans-serif;background-color:#4b4f62;border-radius:8px 8px 0 0;font-size:16px;font-weight:600;line-height:24px;display:flex;align-items:center;justify-content:space-between}.modal-title .title-content{display:flex;align-items:center;gap:8px;flex:1}.modal-title .title-icon{font-size:16px;width:16px;height:16px;color:#fff}.custom-header{background-color:#4b4f62;border-radius:16px 16px 0 0;padding:36px 64px;min-height:auto;gap:24px;display:flex;align-items:end;justify-content:space-between;position:relative}.custom-header-left{flex:1 1 auto;max-width:calc(100% - 260px)}.custom-header-title-section{display:flex;align-items:center;margin-bottom:8px}.custom-header-icon{display:flex;align-items:center;justify-content:center;margin-right:12px}.custom-header-icon mat-icon{color:#fff;font-size:32px;width:32px;height:32px}.custom-header-icon span{color:#fff;font-weight:700;font-size:16px}.custom-header-title{color:#fff;margin:0;font-family:Roboto,sans-serif;font-size:32px;font-style:normal;font-weight:400;line-height:120%;letter-spacing:-.032px}.custom-header-description{color:#ffffffd9;margin:0 0 4px;font-size:18px;line-height:1.5;font-family:Roboto,sans-serif}.templating-guide-link{display:inline;margin-top:4px;color:#37c1ce;text-decoration:underline}.templating-guide-prefix,.templating-guide-suffix{color:#fff}.custom-header-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:end;gap:46px}.custom-header-right .custom-close{position:absolute;top:24px;right:24px}.modal-body{padding:24px;flex:1;overflow-y:auto}.custom-header+.modal-body{padding:32px 64px}.modal-message{font-size:16px;color:#4b5563;margin:0 0 16px;line-height:1.5;font-family:Roboto,sans-serif}.modal-actions{display:flex;gap:8px;justify-content:center;align-items:center;margin:24px 0 0;box-sizing:border-box}.feedback-icon{font-size:72px;width:72px;height:72px}.feedback-icon.success{color:#4caf50}.feedback-icon.warning{color:#f6c000}.feedback-icon.error{color:#f44336}.feedback-icon-image{width:72px;height:72px;object-fit:contain}\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: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { 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"] }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColour", "iconOutlined", "size", "colour", "disabled", "dataTestId"], outputs: ["onClick"] }] }); }
|
|
5753
5662
|
}
|
|
5754
5663
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalComponent, decorators: [{
|
|
5755
5664
|
type: Component,
|
|
5756
5665
|
args: [{ selector: 'al-modal', standalone: true, imports: [CommonModule, MatDialogModule, MatButtonModule, MatIconModule, ButtonComponent, IconButtonComponent], template: "<div class=\"modal-container\">\n <!-- Feedback Modal Type - Success, Warning, or Error -->\n <div *ngIf=\"modalType === 'feedback'\" class=\"modal-body\">\n <div mat-dialog-content>\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:24px;padding-top:8px;\">\n <!-- Feedback Icon (hardcoded by variant, optional single override via feedbackIcon) -->\n <mat-icon *ngIf=\"feedbackIcon\" class=\"feedback-icon\" [ngClass]=\"{\n 'success': feedbackVariant === 'success',\n 'warning': feedbackVariant === 'warning',\n 'error': feedbackVariant === 'error'\n }\">{{ feedbackIcon }}</mat-icon>\n <img *ngIf=\"!feedbackIcon && feedbackVariant === 'success'\" [src]=\"getSuccessIconPath()\" alt=\"Success\"\n class=\"feedback-icon success feedback-icon-image\" />\n <img *ngIf=\"!feedbackIcon && feedbackVariant === 'warning'\" [src]=\"getWarningIconPath()\" alt=\"Warning\"\n class=\"feedback-icon warning feedback-icon-image\" />\n <img *ngIf=\"!feedbackIcon && feedbackVariant === 'error'\" [src]=\"getErrorIconPath()\" alt=\"Error\"\n class=\"feedback-icon error feedback-icon-image\" />\n\n <div style=\"color:#4b4f62;font-weight:500;\">{{ userMessage || getDefaultMessage() }}</div>\n </div>\n </div>\n\n <div *ngIf=\"showFooter\" mat-dialog-actions class=\"modal-actions\"\n [style.justify-content]=\"buttonAlignment === 'left' ? 'flex-start' : buttonAlignment === 'right' ? 'flex-end' : 'center'\">\n <al-button *ngIf=\"showSubmitAction\" [category]=\"submitCategory\" [size]=\"buttonSize\" [iconOutlined]=\"false\"\n [labelText]=\"submitLabel || 'Ok'\" [leftIcon]=\"submitIcon\" [rightIcon]=\"''\" [dataTestId]=\"'submit-btn'\"\n [hasDropDown]=\"false\" [dropdownItems]=\"[]\" (onClick)=\"onSubmit()\"></al-button>\n </div>\n </div>\n\n <!-- Regular Modal for Generic Type -->\n <div *ngIf=\"modalType !== 'feedback'\">\n <!-- Default Header -->\n <h2 *ngIf=\"!useCustomHeader && showHeader\" mat-dialog-title class=\"modal-title\">\n <span class=\"title-content\">\n <mat-icon *ngIf=\"leftIcon\" class=\"title-icon\">{{ leftIcon }}</mat-icon>\n {{ titleText }}\n <mat-icon *ngIf=\"rightIcon\" class=\"title-icon\">{{ rightIcon }}</mat-icon>\n </span>\n <al-icon-button *ngIf=\"closeIcon\" [icon]=\"'close'\" [iconOutlined]=\"false\" [customColour]=\"'#ffffff'\"\n [colour]=\"'blue'\" [size]=\"'base'\" [disabled]=\"false\" (onClick)=\"onClose()\"\n [dataTestId]=\"'close-btn'\"></al-icon-button>\n </h2>\n\n <!-- Custom Header -->\n <div *ngIf=\"useCustomHeader && showHeader\" class=\"custom-header\">\n <!-- Left side content -->\n <div class=\"custom-header-left\">\n <!-- Icon and Title -->\n <div class=\"custom-header-title-section\">\n <div *ngIf=\"customHeaderIcon\" class=\"custom-header-icon\">\n <mat-icon>{{ customHeaderIcon }}</mat-icon>\n </div>\n <h2 class=\"custom-header-title\">{{ customHeaderTitle }}</h2>\n </div>\n\n <!-- Description paragraph -->\n <p class=\"custom-header-description\">{{ customHeaderDescription }}</p>\n\n <!-- Templating guide link/text -->\n <span class=\"templating-guide-prefix\">{{ templatingGuidePrefix }}</span>\n <a class=\"templating-guide-link\" [href]=\"templatingGuideHref\">{{ templatingGuideLabel }}</a>\n <span class=\"templating-guide-suffix\">.</span>\n </div>\n\n <!-- Right side content -->\n <div class=\"custom-header-right\">\n <!-- Close button -->\n <al-icon-button *ngIf=\"closeIcon\" class=\"custom-close\" [icon]=\"'close'\" [iconOutlined]=\"false\"\n [customColour]=\"'#ffffff'\" [colour]=\"'blue'\" [size]=\"'base'\" [disabled]=\"false\" (onClick)=\"onClose()\"\n [dataTestId]=\"'close-btn'\"></al-icon-button>\n\n <!-- Action button -->\n <al-button [category]=\"submitCategory\" [size]=\"'xs'\" [iconOutlined]=\"false\" [labelText]=\"customActionLabel\"\n [leftIcon]=\"customActionIcon\" [rightIcon]=\"customActionRightIcon\" [dataTestId]=\"'custom-action-btn'\"\n [hasDropDown]=\"false\" [dropdownItems]=\"[]\" (onClick)=\"onRequestTemplate()\"></al-button>\n </div>\n </div>\n\n <div class=\"modal-body\">\n <div mat-dialog-content>\n <p *ngIf=\"userMessage && !hasProjectedContent\" class=\"modal-message\" [style.text-align]=\"messageAlignment\">{{\n userMessage }}</p>\n <ng-content></ng-content>\n </div>\n\n <div *ngIf=\"showFooter\" mat-dialog-actions class=\"modal-actions\"\n [style.justify-content]=\"buttonAlignment === 'left' ? 'flex-start' : buttonAlignment === 'right' ? 'flex-end' : 'center'\">\n <al-button *ngIf=\"showCancelAction\" [category]=\"cancelCategory\" [size]=\"buttonSize\" [iconOutlined]=\"false\"\n [labelText]=\"cancelLabel\" [leftIcon]=\"cancelIcon\" [rightIcon]=\"''\" [dataTestId]=\"'cancel-btn'\"\n [hasDropDown]=\"false\" [dropdownItems]=\"[]\" (onClick)=\"onCancel()\"></al-button>\n\n <al-button *ngIf=\"showSubmitAction\" [category]=\"submitCategory\" [size]=\"buttonSize\" [iconOutlined]=\"false\"\n [labelText]=\"submitLabel\" [leftIcon]=\"submitIcon\" [rightIcon]=\"''\" [dataTestId]=\"'submit-btn'\"\n [hasDropDown]=\"false\" [dropdownItems]=\"[]\" (onClick)=\"onSubmit()\"></al-button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".modal-container{padding:0;background:#fff;border-radius:16px;box-shadow:0 6px 10px 4px #71779326;display:flex;flex-direction:column;max-height:90vh;overflow:auto}.modal-title{color:#fff;margin:0;padding:12px 24px;font-family:Roboto,sans-serif;background-color:#4b4f62;border-radius:8px 8px 0 0;font-size:16px;font-weight:600;line-height:24px;display:flex;align-items:center;justify-content:space-between}.modal-title .title-content{display:flex;align-items:center;gap:8px;flex:1}.modal-title .title-icon{font-size:16px;width:16px;height:16px;color:#fff}.custom-header{background-color:#4b4f62;border-radius:16px 16px 0 0;padding:36px 64px;min-height:auto;gap:24px;display:flex;align-items:end;justify-content:space-between;position:relative}.custom-header-left{flex:1 1 auto;max-width:calc(100% - 260px)}.custom-header-title-section{display:flex;align-items:center;margin-bottom:8px}.custom-header-icon{display:flex;align-items:center;justify-content:center;margin-right:12px}.custom-header-icon mat-icon{color:#fff;font-size:32px;width:32px;height:32px}.custom-header-icon span{color:#fff;font-weight:700;font-size:16px}.custom-header-title{color:#fff;margin:0;font-family:Roboto,sans-serif;font-size:32px;font-style:normal;font-weight:400;line-height:120%;letter-spacing:-.032px}.custom-header-description{color:#ffffffd9;margin:0 0 4px;font-size:18px;line-height:1.5;font-family:Roboto,sans-serif}.templating-guide-link{display:inline;margin-top:4px;color:#37c1ce;text-decoration:underline}.templating-guide-prefix,.templating-guide-suffix{color:#fff}.custom-header-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:end;gap:46px}.custom-header-right .custom-close{position:absolute;top:24px;right:24px}.modal-body{padding:24px;flex:1;overflow-y:auto}.custom-header+.modal-body{padding:32px 64px}.modal-message{font-size:16px;color:#4b5563;margin:0 0 16px;line-height:1.5;font-family:Roboto,sans-serif}.modal-actions{display:flex;gap:8px;justify-content:center;align-items:center;margin:24px 0 0;box-sizing:border-box}.feedback-icon{font-size:72px;width:72px;height:72px}.feedback-icon.success{color:#4caf50}.feedback-icon.warning{color:#f6c000}.feedback-icon.error{color:#f44336}.feedback-icon-image{width:72px;height:72px;object-fit:contain}\n"] }]
|
|
5757
|
-
}], ctorParameters: () => [{ type: i1$
|
|
5666
|
+
}], ctorParameters: () => [{ type: i1$2.MatDialogRef, decorators: [{
|
|
5758
5667
|
type: Optional
|
|
5759
5668
|
}] }, { type: i0.ElementRef }], propDecorators: { titleText: [{
|
|
5760
5669
|
type: Input
|
|
@@ -5988,7 +5897,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5988
5897
|
}] } });
|
|
5989
5898
|
|
|
5990
5899
|
class EditableFormWrapperComponent {
|
|
5991
|
-
|
|
5900
|
+
/**
|
|
5901
|
+
* Test id for e2e/qa automation.
|
|
5902
|
+
*/
|
|
5903
|
+
static randomId() {
|
|
5904
|
+
return 'form_' + Math.random().toString(36).slice(2);
|
|
5905
|
+
}
|
|
5906
|
+
/**
|
|
5907
|
+
* Handle left button click - toggle state and emit event
|
|
5908
|
+
*/
|
|
5909
|
+
handleLeftButtonClick(event) {
|
|
5910
|
+
event.stopPropagation();
|
|
5911
|
+
this.isLeftButtonActive = !this.isLeftButtonActive;
|
|
5912
|
+
this.cdr.markForCheck();
|
|
5913
|
+
this.cdr.detectChanges();
|
|
5914
|
+
this.leftButtonClick.emit(event);
|
|
5915
|
+
}
|
|
5916
|
+
/**
|
|
5917
|
+
* Toggle the left button state and emit the click event
|
|
5918
|
+
* @deprecated Use handleLeftButtonClick instead
|
|
5919
|
+
*/
|
|
5920
|
+
onLeftButtonClick(event) {
|
|
5921
|
+
this.handleLeftButtonClick(event);
|
|
5922
|
+
}
|
|
5923
|
+
constructor(cdr) {
|
|
5924
|
+
this.cdr = cdr;
|
|
5992
5925
|
/**
|
|
5993
5926
|
* Test id for e2e/qa automation. If not provided, a random id will be used.
|
|
5994
5927
|
*/
|
|
@@ -6008,6 +5941,19 @@ class EditableFormWrapperComponent {
|
|
|
6008
5941
|
* @default true
|
|
6009
5942
|
*/
|
|
6010
5943
|
this.showDeleteButton = true;
|
|
5944
|
+
/**
|
|
5945
|
+
* Custom CSS class for the left button container (appears when button is active)
|
|
5946
|
+
*/
|
|
5947
|
+
this.leftContainerClass = '';
|
|
5948
|
+
/**
|
|
5949
|
+
* Custom inline styles for the left button container
|
|
5950
|
+
*/
|
|
5951
|
+
this.leftContainerStyle = {};
|
|
5952
|
+
/**
|
|
5953
|
+
* Selector or element reference for the scroll container.
|
|
5954
|
+
* If not provided, defaults to window scrolling.
|
|
5955
|
+
*/
|
|
5956
|
+
this.scrollContainer = null;
|
|
6011
5957
|
/**
|
|
6012
5958
|
* Emitted when the left (edit) button is clicked.
|
|
6013
5959
|
*/
|
|
@@ -6020,12 +5966,11 @@ class EditableFormWrapperComponent {
|
|
|
6020
5966
|
* Emitted when the delete button is clicked.
|
|
6021
5967
|
*/
|
|
6022
5968
|
this.deleteButtonClick = new EventEmitter();
|
|
6023
|
-
|
|
6024
|
-
|
|
6025
|
-
|
|
6026
|
-
|
|
6027
|
-
|
|
6028
|
-
return 'form_' + Math.random().toString(36).slice(2);
|
|
5969
|
+
/**
|
|
5970
|
+
* Toggle state for the left button (controls visibility of ai-apply-bar)
|
|
5971
|
+
*/
|
|
5972
|
+
this.isLeftButtonActive = false;
|
|
5973
|
+
this.scrollContainerElement = null;
|
|
6029
5974
|
}
|
|
6030
5975
|
ngAfterViewInit() {
|
|
6031
5976
|
if (this.wrapperRef && (this.buttonGroupRef || this.leftButtonRef)) {
|
|
@@ -6033,19 +5978,62 @@ class EditableFormWrapperComponent {
|
|
|
6033
5978
|
}
|
|
6034
5979
|
}
|
|
6035
5980
|
ngOnDestroy() {
|
|
6036
|
-
if (this.scrollListener) {
|
|
6037
|
-
|
|
5981
|
+
if (this.scrollListener && this.scrollContainerElement) {
|
|
5982
|
+
if (this.scrollContainerElement === window) {
|
|
5983
|
+
window.removeEventListener('scroll', this.scrollListener);
|
|
5984
|
+
}
|
|
5985
|
+
else {
|
|
5986
|
+
this.scrollContainerElement.removeEventListener('scroll', this.scrollListener);
|
|
5987
|
+
}
|
|
6038
5988
|
}
|
|
6039
5989
|
}
|
|
6040
5990
|
setupScrollBehavior() {
|
|
6041
5991
|
const wrapper = this.wrapperRef.nativeElement;
|
|
6042
5992
|
const buttonGroup = this.buttonGroupRef?.nativeElement;
|
|
6043
5993
|
const leftButton = this.leftButtonRef?.nativeElement;
|
|
5994
|
+
// Determine scroll container
|
|
5995
|
+
if (this.scrollContainer) {
|
|
5996
|
+
if (typeof this.scrollContainer === 'string') {
|
|
5997
|
+
const element = document.querySelector(this.scrollContainer);
|
|
5998
|
+
if (element) {
|
|
5999
|
+
this.scrollContainerElement = element;
|
|
6000
|
+
}
|
|
6001
|
+
else {
|
|
6002
|
+
console.warn(`Scroll container with selector "${this.scrollContainer}" not found. Falling back to window.`);
|
|
6003
|
+
this.scrollContainerElement = window;
|
|
6004
|
+
}
|
|
6005
|
+
}
|
|
6006
|
+
else {
|
|
6007
|
+
this.scrollContainerElement = this.scrollContainer;
|
|
6008
|
+
}
|
|
6009
|
+
}
|
|
6010
|
+
else {
|
|
6011
|
+
this.scrollContainerElement = window;
|
|
6012
|
+
}
|
|
6044
6013
|
const handleScroll = () => {
|
|
6045
6014
|
const rect = wrapper.getBoundingClientRect();
|
|
6046
6015
|
const sectionHeight = wrapper.offsetHeight;
|
|
6047
|
-
//
|
|
6048
|
-
|
|
6016
|
+
// Get container dimensions
|
|
6017
|
+
let containerHeight;
|
|
6018
|
+
let containerScrollTop;
|
|
6019
|
+
let containerRect;
|
|
6020
|
+
if (this.scrollContainerElement === window) {
|
|
6021
|
+
containerHeight = window.innerHeight;
|
|
6022
|
+
containerScrollTop = window.scrollY || window.pageYOffset;
|
|
6023
|
+
containerRect = { top: 0, bottom: containerHeight };
|
|
6024
|
+
}
|
|
6025
|
+
else {
|
|
6026
|
+
const container = this.scrollContainerElement;
|
|
6027
|
+
containerHeight = container.clientHeight;
|
|
6028
|
+
containerScrollTop = container.scrollTop;
|
|
6029
|
+
const containerBoundingRect = container.getBoundingClientRect();
|
|
6030
|
+
containerRect = {
|
|
6031
|
+
top: containerBoundingRect.top,
|
|
6032
|
+
bottom: containerBoundingRect.bottom
|
|
6033
|
+
};
|
|
6034
|
+
}
|
|
6035
|
+
// Calculate container center relative to viewport
|
|
6036
|
+
const containerCenterY = containerRect.top + (containerHeight / 2);
|
|
6049
6037
|
const sectionTopY = rect.top;
|
|
6050
6038
|
const sectionBottomY = rect.bottom;
|
|
6051
6039
|
// Handle right button group (save/delete)
|
|
@@ -6055,10 +6043,10 @@ class EditableFormWrapperComponent {
|
|
|
6055
6043
|
const minY = clampPadding;
|
|
6056
6044
|
const maxY = sectionHeight - buttonGroupHeight - clampPadding;
|
|
6057
6045
|
let targetY;
|
|
6058
|
-
if (
|
|
6059
|
-
targetY =
|
|
6046
|
+
if (containerCenterY > sectionTopY && containerCenterY < sectionBottomY) {
|
|
6047
|
+
targetY = containerCenterY - sectionTopY - (buttonGroupHeight / 2);
|
|
6060
6048
|
}
|
|
6061
|
-
else if (
|
|
6049
|
+
else if (containerCenterY <= sectionTopY) {
|
|
6062
6050
|
targetY = minY;
|
|
6063
6051
|
}
|
|
6064
6052
|
else {
|
|
@@ -6074,10 +6062,10 @@ class EditableFormWrapperComponent {
|
|
|
6074
6062
|
const minY = clampPadding;
|
|
6075
6063
|
const maxY = sectionHeight - leftButtonHeight - clampPadding;
|
|
6076
6064
|
let targetY;
|
|
6077
|
-
if (
|
|
6078
|
-
targetY =
|
|
6065
|
+
if (containerCenterY > sectionTopY && containerCenterY < sectionBottomY) {
|
|
6066
|
+
targetY = containerCenterY - sectionTopY - (leftButtonHeight / 2);
|
|
6079
6067
|
}
|
|
6080
|
-
else if (
|
|
6068
|
+
else if (containerCenterY <= sectionTopY) {
|
|
6081
6069
|
targetY = minY;
|
|
6082
6070
|
}
|
|
6083
6071
|
else {
|
|
@@ -6088,16 +6076,21 @@ class EditableFormWrapperComponent {
|
|
|
6088
6076
|
}
|
|
6089
6077
|
};
|
|
6090
6078
|
this.scrollListener = handleScroll;
|
|
6091
|
-
|
|
6079
|
+
if (this.scrollContainerElement === window) {
|
|
6080
|
+
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
6081
|
+
}
|
|
6082
|
+
else {
|
|
6083
|
+
this.scrollContainerElement.addEventListener('scroll', handleScroll, { passive: true });
|
|
6084
|
+
}
|
|
6092
6085
|
handleScroll(); // Initial position
|
|
6093
6086
|
}
|
|
6094
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditableFormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6095
|
-
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" }, 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\"><al-button [buttonType]=\"'icon-circle'\" [iconOnly]=\"true\"\n [leftIcon]=\"'auto_fix_high'\" [arialabel]=\"'Edit'\" [size]=\"'base'\" [category]=\"'gradient'\"\n (onClick)=\"leftButtonClick.emit($event)\"></al-button></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'\"\n [category]=\"'green'\" (onClick)=\"saveButtonClick.emit($event)\"></al-button><al-button *ngIf=\"showDeleteButton\" class=\"fab warn\" [buttonType]=\"'icon-circle'\"\n [iconOnly]=\"true\" [leftIcon]=\"'close'\" [arialabel]=\"'Delete'\" [size]=\"'base'\" [category]=\"'error'\"\n (onClick)=\"deleteButtonClick.emit($event)\"></al-button>\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:140%;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}.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:32px!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:2;background-color:#fff;border-radius:50%;will-change:transform;transition:transform .1s ease-out}.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
|
|
6087
|
+
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 }); }
|
|
6088
|
+
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]=\"'close'\" [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}.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:32px!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 }); }
|
|
6096
6089
|
}
|
|
6097
6090
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditableFormWrapperComponent, decorators: [{
|
|
6098
6091
|
type: Component,
|
|
6099
|
-
args: [{ selector: 'al-form', standalone: true, imports: [CommonModule, MatIconModule, MatButtonModule, ButtonComponent], template: "<div class=\"al-form-wrapper\" #wrapper [attr.data-test-id]=\"testId\">\n <div *ngIf=\"showLeftButton\" #leftButton class=\"fab left\"><al-button [buttonType]=\"'icon-circle'\" [iconOnly]=\"true\"\n [leftIcon]=\"'auto_fix_high'\" [arialabel]=\"'Edit'\" [size]=\"'base'\" [category]=\"'gradient'\"\n (onClick)=\"leftButtonClick.emit($event)\"></al-button></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'\"\n [category]=\"'green'\" (onClick)=\"saveButtonClick.emit($event)\"></al-button><al-button *ngIf=\"showDeleteButton\" class=\"fab warn\" [buttonType]=\"'icon-circle'\"\n [iconOnly]=\"true\" [leftIcon]=\"'close'\" [arialabel]=\"'Delete'\" [size]=\"'base'\" [category]=\"'error'\"\n (onClick)=\"deleteButtonClick.emit($event)\"></al-button>\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:140%;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}.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:32px!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:2;background-color:#fff;border-radius:50%;will-change:transform;transition:transform .1s ease-out}.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"] }]
|
|
6100
|
-
}], propDecorators: { testId: [{
|
|
6092
|
+
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]=\"'close'\" [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}.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:32px!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"] }]
|
|
6093
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { testId: [{
|
|
6101
6094
|
type: Input
|
|
6102
6095
|
}], showLeftButton: [{
|
|
6103
6096
|
type: Input
|
|
@@ -6105,6 +6098,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6105
6098
|
type: Input
|
|
6106
6099
|
}], showDeleteButton: [{
|
|
6107
6100
|
type: Input
|
|
6101
|
+
}], leftContainerClass: [{
|
|
6102
|
+
type: Input
|
|
6103
|
+
}], leftContainerStyle: [{
|
|
6104
|
+
type: Input
|
|
6105
|
+
}], scrollContainer: [{
|
|
6106
|
+
type: Input
|
|
6108
6107
|
}], leftButtonClick: [{
|
|
6109
6108
|
type: Output
|
|
6110
6109
|
}], saveButtonClick: [{
|
|
@@ -6205,11 +6204,11 @@ class ResumeEntriesComponent {
|
|
|
6205
6204
|
return this.reappliedEntries.has(index);
|
|
6206
6205
|
}
|
|
6207
6206
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResumeEntriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6208
|
-
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:140%;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}.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%}@media (max-width: 767px){.entry-header{flex-direction:column;gap:12px;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"] }] }); }
|
|
6207
|
+
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}.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%}@media (max-width: 767px){.entry-header{flex-direction:column;gap:12px;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"] }] }); }
|
|
6209
6208
|
}
|
|
6210
6209
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResumeEntriesComponent, decorators: [{
|
|
6211
6210
|
type: Component,
|
|
6212
|
-
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:140%;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}.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%}@media (max-width: 767px){.entry-header{flex-direction:column;gap:12px;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"] }]
|
|
6211
|
+
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}.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%}@media (max-width: 767px){.entry-header{flex-direction:column;gap:12px;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"] }]
|
|
6213
6212
|
}], propDecorators: { entries: [{
|
|
6214
6213
|
type: Input
|
|
6215
6214
|
}], showHeader: [{
|
|
@@ -6341,11 +6340,11 @@ class AppToolbarLeftComponent {
|
|
|
6341
6340
|
this.sendMessage();
|
|
6342
6341
|
}
|
|
6343
6342
|
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 }); }
|
|
6344
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppToolbarLeftComponent, isStandalone: true, selector: "
|
|
6343
|
+
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\" [attr.title]=\"requiredIcon.handle.title\"\n (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\" [attr.title]=\"requiredIcon.edit.title\"\n (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\" [attr.title]=\"requiredIcon.search.title\"\n (click)=\"onSearchClick($event)\"><mat-icon svgIcon=\"search\" class=\"search-icon\"></mat-icon></button></div>\n </div>\n</div>", styles: [".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:#6b7280;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}.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:#6b7280}.handle-icon mat-icon,.edit-icon mat-icon,.search-icon mat-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.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"] }] }); }
|
|
6345
6344
|
}
|
|
6346
6345
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppToolbarLeftComponent, decorators: [{
|
|
6347
6346
|
type: Component,
|
|
6348
|
-
args: [{ selector: '
|
|
6347
|
+
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\" [attr.title]=\"requiredIcon.handle.title\"\n (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\" [attr.title]=\"requiredIcon.edit.title\"\n (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\" [attr.title]=\"requiredIcon.search.title\"\n (click)=\"onSearchClick($event)\"><mat-icon svgIcon=\"search\" class=\"search-icon\"></mat-icon></button></div>\n </div>\n</div>", styles: [".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:#6b7280;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}.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:#6b7280}.handle-icon mat-icon,.edit-icon mat-icon,.search-icon mat-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.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"] }]
|
|
6349
6348
|
}], ctorParameters: () => [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }], propDecorators: { variant: [{
|
|
6350
6349
|
type: Input
|
|
6351
6350
|
}], overrideConfig: [{
|
|
@@ -6497,11 +6496,11 @@ class AppToolbarRightComponent {
|
|
|
6497
6496
|
this.setSubroleEvent.emit(!this.currentObj['subrole']);
|
|
6498
6497
|
}
|
|
6499
6498
|
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 }); }
|
|
6500
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppToolbarRightComponent, selector: "
|
|
6499
|
+
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'\" 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"] }] }); }
|
|
6501
6500
|
}
|
|
6502
6501
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppToolbarRightComponent, decorators: [{
|
|
6503
6502
|
type: Component,
|
|
6504
|
-
args: [{ selector: '
|
|
6503
|
+
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 [attr.title]=\"requiredIcon.sr.title\" (click)=\"setSubrole()\"><mat-icon\n [svgIcon]=\"currentObj['subrole'] ? 'subrole_active' : 'subrole'\" 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"] }]
|
|
6505
6504
|
}], ctorParameters: () => [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }], propDecorators: { alwaysShowIcons: [{
|
|
6506
6505
|
type: Input
|
|
6507
6506
|
}], checked: [{
|
|
@@ -6622,11 +6621,11 @@ class ExperienceSectionComponent {
|
|
|
6622
6621
|
this.undoClick.emit(data);
|
|
6623
6622
|
}
|
|
6624
6623
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ExperienceSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6625
|
-
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><
|
|
6624
|
+
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"] }] }); }
|
|
6626
6625
|
}
|
|
6627
6626
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ExperienceSectionComponent, decorators: [{
|
|
6628
6627
|
type: Component,
|
|
6629
|
-
args: [{ selector: 'al-experience-section', standalone: true, imports: [CommonModule, ResponsiveColumnsComponent, ResumeEntriesComponent, AppToolbarLeftComponent, AppToolbarRightModule], template: "<al-responsive-columns [gap]=\"gap\" [padding]=\"padding\" [leftWidth]=\"leftWidth\" [rightWidth]=\"rightWidth\"\n [stackAt]=\"stackAt\">\n <div left><
|
|
6628
|
+
args: [{ selector: 'al-experience-section', standalone: true, imports: [CommonModule, ResponsiveColumnsComponent, ResumeEntriesComponent, AppToolbarLeftComponent, AppToolbarRightModule], 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>" }]
|
|
6630
6629
|
}], propDecorators: { entries: [{
|
|
6631
6630
|
type: Input
|
|
6632
6631
|
}], showHeader: [{
|