@allsorter/ui-components 0.0.365 → 0.0.367
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 +839 -494
- package/fesm2022/allsorter-ui-components.mjs.map +1 -1
- package/lib/button/button.component.d.ts +9 -5
- package/lib/checkbox/checkbox.component.d.ts +6 -2
- package/lib/date-range/date-range.component.d.ts +4 -2
- package/lib/input/input.component.d.ts +10 -5
- package/lib/newresumeheader/newresumeheader.component.d.ts +65 -0
- package/lib/newresumeheader/newresumeheader.module.d.ts +8 -0
- package/lib/radio/radio.component.d.ts +6 -2
- package/lib/responsive-columns/responsive-columns.component.d.ts +1 -1
- package/lib/resume-header/resume-header.component.d.ts +3 -0
- package/lib/slide-toggle/slide-toggle.component.d.ts +2 -2
- package/lib/tabs/tabs.component.d.ts +4 -2
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
|
@@ -9,9 +9,9 @@ import { MatButtonModule } from '@angular/material/button';
|
|
|
9
9
|
import * as i4 from '@angular/material/menu';
|
|
10
10
|
import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
|
|
11
11
|
import * as i2 from '@angular/platform-browser';
|
|
12
|
-
import * as
|
|
12
|
+
import * as i3$1 from '@angular/forms';
|
|
13
13
|
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
14
|
-
import * as i3$
|
|
14
|
+
import * as i3$2 from '@angular/material/form-field';
|
|
15
15
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
16
16
|
import * as i4$1 from '@angular/material/input';
|
|
17
17
|
import { MatInputModule } from '@angular/material/input';
|
|
@@ -19,13 +19,13 @@ import * as i6 from '@angular/material/select';
|
|
|
19
19
|
import { MatSelectModule } from '@angular/material/select';
|
|
20
20
|
import * as i7 from '@angular/material/core';
|
|
21
21
|
import { MatOptionModule, MatNativeDateModule } from '@angular/material/core';
|
|
22
|
-
import * as i3$
|
|
22
|
+
import * as i3$3 from '@angular/material/datepicker';
|
|
23
23
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
24
|
-
import * as i3$
|
|
24
|
+
import * as i3$4 from '@angular/material/tooltip';
|
|
25
25
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
26
|
-
import * as
|
|
26
|
+
import * as i2$1 from '@angular/material/checkbox';
|
|
27
27
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
28
|
-
import * as
|
|
28
|
+
import * as i5 from '@angular/cdk/accordion';
|
|
29
29
|
import { CdkAccordionModule } from '@angular/cdk/accordion';
|
|
30
30
|
import * as i2$2 from '@angular/material/radio';
|
|
31
31
|
import { MatRadioModule } from '@angular/material/radio';
|
|
@@ -98,6 +98,13 @@ class ButtonComponent {
|
|
|
98
98
|
this.color = val;
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
|
+
/** DEPRECATED: label -> labelText */
|
|
102
|
+
set label(val) {
|
|
103
|
+
if (val !== undefined) {
|
|
104
|
+
console.warn('[al-button] "label" is deprecated. Use "labelText" instead.');
|
|
105
|
+
this.labelText = val;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
101
108
|
set icon(value) {
|
|
102
109
|
this._icon = value;
|
|
103
110
|
// If provided, mirror into leftIcon so all templates and types pick it up.
|
|
@@ -122,18 +129,25 @@ class ButtonComponent {
|
|
|
122
129
|
this.dropdownItems = opts;
|
|
123
130
|
}
|
|
124
131
|
}
|
|
125
|
-
/** DEPRECATED:
|
|
132
|
+
/** DEPRECATED: dropdown -> hasDropDown */
|
|
133
|
+
set dropdown(val) {
|
|
134
|
+
if (val !== undefined) {
|
|
135
|
+
console.warn('[al-button] "dropdown" is deprecated. Use "hasDropDown" instead.');
|
|
136
|
+
this.hasDropDown = val;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
/** DEPRECATED: hasDropdown -> hasDropDown */
|
|
126
140
|
set hasDropdown(val) {
|
|
127
141
|
if (val !== undefined) {
|
|
128
|
-
console.warn('[al-button] "hasDropdown" is deprecated. Use "
|
|
129
|
-
this.
|
|
142
|
+
console.warn('[al-button] "hasDropdown" is deprecated. Use "hasDropDown" instead.');
|
|
143
|
+
this.hasDropDown = val;
|
|
130
144
|
}
|
|
131
145
|
}
|
|
132
|
-
/** DEPRECATED: isDropdown ->
|
|
146
|
+
/** DEPRECATED: isDropdown -> hasDropDown */
|
|
133
147
|
set isDropdown(val) {
|
|
134
148
|
if (val !== undefined) {
|
|
135
|
-
console.warn('[al-button] "isDropdown" is deprecated. Use "
|
|
136
|
-
this.
|
|
149
|
+
console.warn('[al-button] "isDropdown" is deprecated. Use "hasDropDown" instead.');
|
|
150
|
+
this.hasDropDown = val;
|
|
137
151
|
}
|
|
138
152
|
}
|
|
139
153
|
selectOption(option) {
|
|
@@ -166,7 +180,7 @@ class ButtonComponent {
|
|
|
166
180
|
this.color = 'blue';
|
|
167
181
|
/** Button outline style (true = outlined, false = filled) */
|
|
168
182
|
this.outline = false;
|
|
169
|
-
this.
|
|
183
|
+
this.labelText = ' '; // Default label
|
|
170
184
|
this.arialabel = ' '; // Default label
|
|
171
185
|
this.iconOnly = false; // Toggle for icon-only button
|
|
172
186
|
this.leftIcon = null;
|
|
@@ -187,7 +201,7 @@ class ButtonComponent {
|
|
|
187
201
|
/** Dropdown items (new). */
|
|
188
202
|
this.dropdownItems = [];
|
|
189
203
|
/** Enable dropdown behavior. */
|
|
190
|
-
this.
|
|
204
|
+
this.hasDropDown = false;
|
|
191
205
|
/** Emits the selected dropdown option's value */
|
|
192
206
|
this.optionSelect = new EventEmitter();
|
|
193
207
|
this.stateClasses = {
|
|
@@ -201,8 +215,8 @@ class ButtonComponent {
|
|
|
201
215
|
}
|
|
202
216
|
ngOnChanges(changes) {
|
|
203
217
|
// If dropdown gets disabled due to control changes, ensure any open menu is closed
|
|
204
|
-
if (changes['
|
|
205
|
-
const dropdownEnabled = this.
|
|
218
|
+
if (changes['hasDropDown'] || changes['buttonType']) {
|
|
219
|
+
const dropdownEnabled = this.hasDropDown || this.buttonType === 'dropdown';
|
|
206
220
|
if (!dropdownEnabled) {
|
|
207
221
|
this.menuTrigger?.closeMenu();
|
|
208
222
|
}
|
|
@@ -213,11 +227,11 @@ class ButtonComponent {
|
|
|
213
227
|
this.menuTrigger?.closeMenu();
|
|
214
228
|
}
|
|
215
229
|
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 }); }
|
|
216
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, isStandalone: true, selector: "al-button", inputs: { state: "state", color: "color", category: "category", outline: "outline", label: "label", arialabel: "arialabel", iconOnly: "iconOnly", leftIcon: "leftIcon", rightIcon: "rightIcon", icon: "icon", iconOutlined: "iconOutlined", outlined: "outlined", size: "size", buttonType: "buttonType", fontClass: "fontClass", dataTestId: "dataTestId", dropdownItems: "dropdownItems", dropdownOptions: "dropdownOptions", 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=\"!(dropdown || buttonType === 'dropdown'); else dropdownTpl\">\n <button\n mat-flat-button\n class=\"btn custom-button\" [class]=\"effectiveFontClass\"\n [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': state === 'default',\n 'btn-hover': state === 'hover',\n 'btn-pressed': state === 'pressed',\n 'btn-disabled': state === 'disabled'\n }\"\n [disabled]=\"state === 'disabled'\"\n (click)=\"onClick.emit($event)\"\n (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\"\n [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\"\n >\n <!-- Left Icon (Only shown if leftIcon is set and not empty). If icon-circle, prefer 'icon' prop. -->\n <mat-icon *ngIf=\"(buttonType === 'icon-circle' ? (icon || leftIcon) : leftIcon)?.trim() as leftIconText\"\n [fontSet]=\"iconOutlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"left-icon\">{{ leftIconText }}</mat-icon>\n <!-- Label (Only shown if iconOnly is false) -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\">{{ label || '' }}</span>\n\n <!-- Right Icon (Only shown if rightIcon is set and not empty) -->\n <mat-icon *ngIf=\"rightIcon?.trim() as rightIconText\"\n [fontSet]=\"iconOutlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"right-icon\">{{ rightIconText }}</mat-icon>\n </button>\n </ng-container>\n\n <!-- Dropdown button template -->\n <ng-template #dropdownTpl>\n <button\n mat-flat-button\n class=\"btn custom-button\" [class]=\"effectiveFontClass\"\n [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': state === 'default',\n 'btn-hover': state === 'hover',\n 'btn-pressed': state === 'pressed',\n 'btn-disabled': state === 'disabled',\n\n }\"\n [disabled]=\"state === 'disabled'\"\n (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\"\n [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\"\n [matMenuTriggerFor]=\"menu\"\n >\n <!-- Left Icon (optional) -->\n <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\"\n [fontSet]=\"iconOutlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"left-icon\">{{ leftIconText }}</mat-icon>\n <!-- Label -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\">{{ label || '' }}</span>\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", 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\";.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;background-color:#d1d3db;color:#a2a6b8;cursor:not-allowed}.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}.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}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px;height:16px;width:16px}.size-l .mat-icon{font-size:20px;height:46px;width:20px}.size-xl .mat-icon{font-size:20px;height:50px;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;line-height:24px;height:56px;padding:16px 24px;color:#47515e}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,::ng-deep .custom-dropdown-menu .mat-menu-item:hover{background:#f5f6f7}::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:#000!important;--mat-menu-item-label-text-color: #000000 !important;--mdc-list-list-item-label-text-color: #000000 !important}::ng-deep .mat-mdc-menu-item .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item span{color:#000!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;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:12px;height:12px;font-size:12px}.size-sm.icon-circle{padding:8px!important}.size-sm.icon-circle .mat-icon{width:12px;height:12px;font-size:12px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{width:16px;height:16px;font-size:16px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{width:16px;height:16px;font-size: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{background-color:#d1d3db!important;color:#a2a6b8!important;cursor:not-allowed!important}.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:6px!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:6px!important;box-shadow:none!important}::ng-deep .mat-mdc-menu-item{font-family:Roboto,sans-serif;font-size:14px;color:#333;padding:12px 16px;border-radius:0!important;transition:background .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f5f5f5!important}.size-header ::ng-deep .mdc-button__label{display:none!important}::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"] }] }); }
|
|
230
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, isStandalone: true, selector: "al-button", inputs: { state: "state", 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", 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': state === 'default',\n 'btn-hover': state === 'hover',\n 'btn-pressed': state === 'pressed',\n 'btn-disabled': state === 'disabled'\n }\" [disabled]=\"state === 'disabled'\" (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 <!-- Left Icon (Only shown if leftIcon is set and not empty). If icon-circle, prefer 'icon' prop. -->\n <mat-icon *ngIf=\"(buttonType === 'icon-circle' ? (icon || leftIcon) : leftIcon)?.trim() as leftIconText\"\n [fontSet]=\"iconOutlined ? 'material-icons-outlined' : 'material-icons'\" class=\"left-icon\">{{ leftIconText\n }}</mat-icon>\n <!-- Label (Only shown if iconOnly is false) -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\">{{ labelText || '' }}</span>\n\n <!-- Right Icon (Only shown if rightIcon is set and not empty) -->\n <mat-icon *ngIf=\"rightIcon?.trim() as rightIconText\"\n [fontSet]=\"iconOutlined ? 'material-icons-outlined' : 'material-icons'\" class=\"right-icon\">{{ rightIconText\n }}</mat-icon>\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': state === 'default',\n 'btn-hover': state === 'hover',\n 'btn-pressed': state === 'pressed',\n 'btn-disabled': state === 'disabled',\n\n }\" [disabled]=\"state === 'disabled'\" (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 <!-- Left Icon (optional) -->\n <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\"\n [fontSet]=\"iconOutlined ? 'material-icons-outlined' : 'material-icons'\" class=\"left-icon\">{{ leftIconText\n }}</mat-icon>\n <!-- Label -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\">{{ labelText || '' }}</span>\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", 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\";.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;background-color:#d1d3db;color:#a2a6b8;cursor:not-allowed}.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}.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}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px;height:16px;width:16px}.size-l .mat-icon{font-size:20px;height:46px;width:20px}.size-xl .mat-icon{font-size:20px;height:50px;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;line-height:24px;height:56px;padding:16px 24px;color:#47515e}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,::ng-deep .custom-dropdown-menu .mat-menu-item:hover{background:#f5f6f7}::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:#000!important;--mat-menu-item-label-text-color: #000000 !important;--mdc-list-list-item-label-text-color: #000000 !important}::ng-deep .mat-mdc-menu-item .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item span{color:#000!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;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:12px;height:12px;font-size:12px}.size-sm.icon-circle{padding:8px!important}.size-sm.icon-circle .mat-icon{width:12px;height:12px;font-size:12px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{width:16px;height:16px;font-size:16px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{width:16px;height:16px;font-size: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{background-color:#d1d3db!important;color:#a2a6b8!important;cursor:not-allowed!important}.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:6px!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:6px!important;box-shadow:none!important}::ng-deep .mat-mdc-menu-item{font-family:Roboto,sans-serif;font-size:14px;color:#333;padding:12px 16px;border-radius:0!important;transition:background .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f5f5f5!important}.size-header ::ng-deep .mdc-button__label{display:none!important}::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"] }] }); }
|
|
217
231
|
}
|
|
218
232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
219
233
|
type: Component,
|
|
220
|
-
args: [{ selector: 'al-button', imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule], standalone: true, template: "<!-- Regular button types -->\n<ng-container *ngIf=\"!(dropdown || buttonType === 'dropdown'); else dropdownTpl\">\n <button\n mat-flat-button\n class=\"btn custom-button\" [class]=\"effectiveFontClass\"\n [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': state === 'default',\n 'btn-hover': state === 'hover',\n 'btn-pressed': state === 'pressed',\n 'btn-disabled': state === 'disabled'\n }\"\n [disabled]=\"state === 'disabled'\"\n (click)=\"onClick.emit($event)\"\n (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\"\n [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\"\n >\n <!-- Left Icon (Only shown if leftIcon is set and not empty). If icon-circle, prefer 'icon' prop. -->\n <mat-icon *ngIf=\"(buttonType === 'icon-circle' ? (icon || leftIcon) : leftIcon)?.trim() as leftIconText\"\n [fontSet]=\"iconOutlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"left-icon\">{{ leftIconText }}</mat-icon>\n <!-- Label (Only shown if iconOnly is false) -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\">{{ label || '' }}</span>\n\n <!-- Right Icon (Only shown if rightIcon is set and not empty) -->\n <mat-icon *ngIf=\"rightIcon?.trim() as rightIconText\"\n [fontSet]=\"iconOutlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"right-icon\">{{ rightIconText }}</mat-icon>\n </button>\n </ng-container>\n\n <!-- Dropdown button template -->\n <ng-template #dropdownTpl>\n <button\n mat-flat-button\n class=\"btn custom-button\" [class]=\"effectiveFontClass\"\n [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': state === 'default',\n 'btn-hover': state === 'hover',\n 'btn-pressed': state === 'pressed',\n 'btn-disabled': state === 'disabled',\n\n }\"\n [disabled]=\"state === 'disabled'\"\n (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\"\n [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\"\n [matMenuTriggerFor]=\"menu\"\n >\n <!-- Left Icon (optional) -->\n <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\"\n [fontSet]=\"iconOutlined ? 'material-icons-outlined' : 'material-icons'\"\n class=\"left-icon\">{{ leftIconText }}</mat-icon>\n <!-- Label -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\">{{ label || '' }}</span>\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", 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\";.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;background-color:#d1d3db;color:#a2a6b8;cursor:not-allowed}.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}.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}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px;height:16px;width:16px}.size-l .mat-icon{font-size:20px;height:46px;width:20px}.size-xl .mat-icon{font-size:20px;height:50px;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;line-height:24px;height:56px;padding:16px 24px;color:#47515e}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,::ng-deep .custom-dropdown-menu .mat-menu-item:hover{background:#f5f6f7}::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:#000!important;--mat-menu-item-label-text-color: #000000 !important;--mdc-list-list-item-label-text-color: #000000 !important}::ng-deep .mat-mdc-menu-item .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item span{color:#000!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;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:12px;height:12px;font-size:12px}.size-sm.icon-circle{padding:8px!important}.size-sm.icon-circle .mat-icon{width:12px;height:12px;font-size:12px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{width:16px;height:16px;font-size:16px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{width:16px;height:16px;font-size: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{background-color:#d1d3db!important;color:#a2a6b8!important;cursor:not-allowed!important}.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:6px!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:6px!important;box-shadow:none!important}::ng-deep .mat-mdc-menu-item{font-family:Roboto,sans-serif;font-size:14px;color:#333;padding:12px 16px;border-radius:0!important;transition:background .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f5f5f5!important}.size-header ::ng-deep .mdc-button__label{display:none!important}::ng-deep .mat-mdc-button-touch-target{display:none!important}\n"] }]
|
|
234
|
+
args: [{ selector: 'al-button', imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule], 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': state === 'default',\n 'btn-hover': state === 'hover',\n 'btn-pressed': state === 'pressed',\n 'btn-disabled': state === 'disabled'\n }\" [disabled]=\"state === 'disabled'\" (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 <!-- Left Icon (Only shown if leftIcon is set and not empty). If icon-circle, prefer 'icon' prop. -->\n <mat-icon *ngIf=\"(buttonType === 'icon-circle' ? (icon || leftIcon) : leftIcon)?.trim() as leftIconText\"\n [fontSet]=\"iconOutlined ? 'material-icons-outlined' : 'material-icons'\" class=\"left-icon\">{{ leftIconText\n }}</mat-icon>\n <!-- Label (Only shown if iconOnly is false) -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\">{{ labelText || '' }}</span>\n\n <!-- Right Icon (Only shown if rightIcon is set and not empty) -->\n <mat-icon *ngIf=\"rightIcon?.trim() as rightIconText\"\n [fontSet]=\"iconOutlined ? 'material-icons-outlined' : 'material-icons'\" class=\"right-icon\">{{ rightIconText\n }}</mat-icon>\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': state === 'default',\n 'btn-hover': state === 'hover',\n 'btn-pressed': state === 'pressed',\n 'btn-disabled': state === 'disabled',\n\n }\" [disabled]=\"state === 'disabled'\" (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 <!-- Left Icon (optional) -->\n <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\"\n [fontSet]=\"iconOutlined ? 'material-icons-outlined' : 'material-icons'\" class=\"left-icon\">{{ leftIconText\n }}</mat-icon>\n <!-- Label -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\">{{ labelText || '' }}</span>\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", 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\";.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;background-color:#d1d3db;color:#a2a6b8;cursor:not-allowed}.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}.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}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px;height:16px;width:16px}.size-l .mat-icon{font-size:20px;height:46px;width:20px}.size-xl .mat-icon{font-size:20px;height:50px;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;line-height:24px;height:56px;padding:16px 24px;color:#47515e}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,::ng-deep .custom-dropdown-menu .mat-menu-item:hover{background:#f5f6f7}::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:#000!important;--mat-menu-item-label-text-color: #000000 !important;--mdc-list-list-item-label-text-color: #000000 !important}::ng-deep .mat-mdc-menu-item .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item span{color:#000!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;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:12px;height:12px;font-size:12px}.size-sm.icon-circle{padding:8px!important}.size-sm.icon-circle .mat-icon{width:12px;height:12px;font-size:12px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{width:16px;height:16px;font-size:16px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{width:16px;height:16px;font-size: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{background-color:#d1d3db!important;color:#a2a6b8!important;cursor:not-allowed!important}.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:6px!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:6px!important;box-shadow:none!important}::ng-deep .mat-mdc-menu-item{font-family:Roboto,sans-serif;font-size:14px;color:#333;padding:12px 16px;border-radius:0!important;transition:background .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f5f5f5!important}.size-header ::ng-deep .mdc-button__label{display:none!important}::ng-deep .mat-mdc-button-touch-target{display:none!important}\n"] }]
|
|
221
235
|
}], ctorParameters: () => [{ type: i1.MatIconRegistry }], propDecorators: { state: [{
|
|
222
236
|
type: Input
|
|
223
237
|
}], color: [{
|
|
@@ -226,6 +240,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
226
240
|
type: Input
|
|
227
241
|
}], outline: [{
|
|
228
242
|
type: Input
|
|
243
|
+
}], labelText: [{
|
|
244
|
+
type: Input
|
|
229
245
|
}], label: [{
|
|
230
246
|
type: Input
|
|
231
247
|
}], arialabel: [{
|
|
@@ -260,6 +276,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
260
276
|
type: Input
|
|
261
277
|
}], dropdownOptions: [{
|
|
262
278
|
type: Input
|
|
279
|
+
}], hasDropDown: [{
|
|
280
|
+
type: Input
|
|
263
281
|
}], dropdown: [{
|
|
264
282
|
type: Input
|
|
265
283
|
}], hasDropdown: [{
|
|
@@ -294,20 +312,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
294
312
|
|
|
295
313
|
class InputComponent {
|
|
296
314
|
constructor() {
|
|
297
|
-
this.
|
|
315
|
+
this.labelText = '';
|
|
298
316
|
this.placeholder = '';
|
|
299
317
|
this.value = '';
|
|
300
318
|
this.formControlName = '';
|
|
301
319
|
this.dataTestId = '';
|
|
302
320
|
this.type = 'text';
|
|
303
321
|
this.disabled = false;
|
|
304
|
-
this.helperText =
|
|
305
|
-
this.helperTextLabel = '';
|
|
322
|
+
this.helperText = '';
|
|
306
323
|
this.error = false;
|
|
307
324
|
this.errorMessage = '';
|
|
308
325
|
this.leftIcon = '';
|
|
309
326
|
this.rightIcon = '';
|
|
310
|
-
this.
|
|
327
|
+
this.hasDropDown = false;
|
|
311
328
|
this.options = [];
|
|
312
329
|
this.size = 'base';
|
|
313
330
|
this.types = 'plain';
|
|
@@ -317,6 +334,8 @@ class InputComponent {
|
|
|
317
334
|
this.outlined = false;
|
|
318
335
|
// Date picker specific properties - matching Calendar component
|
|
319
336
|
this.selectedDate = null;
|
|
337
|
+
this.change = new EventEmitter();
|
|
338
|
+
/** DEPRECATED: valueChange -> change */
|
|
320
339
|
this.valueChange = new EventEmitter();
|
|
321
340
|
this.onColorChange = new EventEmitter();
|
|
322
341
|
this.monthSelected = new EventEmitter();
|
|
@@ -324,6 +343,20 @@ class InputComponent {
|
|
|
324
343
|
this.onChange = (value) => { };
|
|
325
344
|
this.onTouched = () => { };
|
|
326
345
|
}
|
|
346
|
+
/** DEPRECATED: label -> labelText */
|
|
347
|
+
set label(val) {
|
|
348
|
+
if (val !== undefined) {
|
|
349
|
+
console.warn('[al-input] "label" is deprecated. Use "labelText" instead.');
|
|
350
|
+
this.labelText = val;
|
|
351
|
+
}
|
|
352
|
+
}
|
|
353
|
+
/** DEPRECATED: dropDown -> hasDropDown */
|
|
354
|
+
set dropDown(val) {
|
|
355
|
+
if (val !== undefined) {
|
|
356
|
+
console.warn('[al-input] "dropDown" is deprecated. Use "hasDropDown" instead.');
|
|
357
|
+
this.hasDropDown = val;
|
|
358
|
+
}
|
|
359
|
+
}
|
|
327
360
|
get isDisabled() {
|
|
328
361
|
return this.disabled || this.types === 'disabled';
|
|
329
362
|
}
|
|
@@ -350,11 +383,15 @@ class InputComponent {
|
|
|
350
383
|
onInputChange(value) {
|
|
351
384
|
this.value = value;
|
|
352
385
|
this.onChange(value);
|
|
386
|
+
this.change.emit(value);
|
|
387
|
+
// Deprecated: emit to valueChange for backward compatibility
|
|
353
388
|
this.valueChange.emit(value);
|
|
354
389
|
}
|
|
355
390
|
onSelectionChange(value) {
|
|
356
391
|
this.value = value;
|
|
357
392
|
this.onChange(value);
|
|
393
|
+
this.change.emit(value);
|
|
394
|
+
// Deprecated: emit to valueChange for backward compatibility
|
|
358
395
|
this.valueChange.emit(value);
|
|
359
396
|
}
|
|
360
397
|
// Handle color picker change
|
|
@@ -362,6 +399,8 @@ class InputComponent {
|
|
|
362
399
|
const target = event.target;
|
|
363
400
|
this.value = target.value;
|
|
364
401
|
this.onChange(target.value);
|
|
402
|
+
this.change.emit(target.value);
|
|
403
|
+
// Deprecated: emit to valueChange for backward compatibility
|
|
365
404
|
this.valueChange.emit(target.value);
|
|
366
405
|
this.onColorChange.emit(target.value);
|
|
367
406
|
}
|
|
@@ -397,13 +436,13 @@ class InputComponent {
|
|
|
397
436
|
return 'al-input-category-' + this.types;
|
|
398
437
|
}
|
|
399
438
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
400
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputComponent, isStandalone: true, selector: "al-input", inputs: { label: "label", placeholder: "placeholder", value: "value", formControlName: "formControlName", dataTestId: "dataTestId", type: "type", disabled: "disabled", helperText: "helperText",
|
|
439
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputComponent, isStandalone: true, selector: "al-input", inputs: { labelText: "labelText", label: "label", placeholder: "placeholder", value: "value", formControlName: "formControlName", dataTestId: "dataTestId", type: "type", disabled: "disabled", helperText: "helperText", error: "error", errorMessage: "errorMessage", leftIcon: "leftIcon", rightIcon: "rightIcon", hasDropDown: "hasDropDown", dropDown: "dropDown", options: "options", size: "size", types: "types", tooltip: "tooltip", tooltipPosition: "tooltipPosition" }, outputs: { change: "change", valueChange: "valueChange", onColorChange: "onColorChange", monthSelected: "monthSelected", yearSelected: "yearSelected" }, providers: [
|
|
401
440
|
{
|
|
402
441
|
provide: NG_VALUE_ACCESSOR,
|
|
403
442
|
useExisting: forwardRef(() => InputComponent),
|
|
404
443
|
multi: true
|
|
405
444
|
}
|
|
406
|
-
], 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=\"label && !noBorder\">{{ label }}</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=\"dropDown; else regularInput\">\n <mat-select [disabled]=\"isDisabled\" [(ngModel)]=\"value\" (selectionChange)=\"onSelectionChange($event.value)\">\n <mat-option *ngFor=\"let option of options\" [value]=\"option\">{{ option }}</mat-option>\n </mat-select>\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]=\"label ? '' : placeholder\" [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]=\"dp\" [placeholder]=\"label ? '' : placeholder\" [disabled]=\"isDisabled\"\n [(ngModel)]=\"selectedDate\" (blur)=\"onTouched()\" />\n <mat-datepicker-toggle matSuffix [for]=\"dp\"></mat-datepicker-toggle>\n <mat-datepicker #dp 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]=\"label ? '' : placeholder\" [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 and not color picker -->\n <mat-icon *ngIf=\"!isDatePicker && !isColorPicker && 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 && helperTextLabel\">{{ helperTextLabel }}</mat-error>\n <mat-hint *ngIf=\"helperText && helperTextLabel\">{{ helperTextLabel }}</mat-hint>\n</mat-form-field>\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\";@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}\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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.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: MatDatepickerModule }, { kind: "component", type: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.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$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
445
|
+
], 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 <mat-select [disabled]=\"isDisabled\" [(ngModel)]=\"value\" (selectionChange)=\"onSelectionChange($event.value)\">\n <mat-option *ngFor=\"let option of options\" [value]=\"option\">{{ option }}</mat-option>\n </mat-select>\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]=\"labelText ? '' : placeholder\" [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]=\"dp\" [placeholder]=\"labelText ? '' : placeholder\" [disabled]=\"isDisabled\"\n [(ngModel)]=\"selectedDate\" (blur)=\"onTouched()\" />\n <mat-datepicker-toggle matSuffix [for]=\"dp\"></mat-datepicker-toggle>\n <mat-datepicker #dp 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]=\"labelText ? '' : placeholder\" [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 and not color picker -->\n <mat-icon *ngIf=\"!isDatePicker && !isColorPicker && 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>\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\";@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}\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: i3$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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$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: 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$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
407
446
|
}
|
|
408
447
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputComponent, decorators: [{
|
|
409
448
|
type: Component,
|
|
@@ -425,8 +464,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
425
464
|
useExisting: forwardRef(() => InputComponent),
|
|
426
465
|
multi: true
|
|
427
466
|
}
|
|
428
|
-
], 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=\"label && !noBorder\">{{ label }}</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=\"dropDown; else regularInput\">\n <mat-select [disabled]=\"isDisabled\" [(ngModel)]=\"value\" (selectionChange)=\"onSelectionChange($event.value)\">\n <mat-option *ngFor=\"let option of options\" [value]=\"option\">{{ option }}</mat-option>\n </mat-select>\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]=\"label ? '' : placeholder\" [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]=\"dp\" [placeholder]=\"label ? '' : placeholder\" [disabled]=\"isDisabled\"\n [(ngModel)]=\"selectedDate\" (blur)=\"onTouched()\" />\n <mat-datepicker-toggle matSuffix [for]=\"dp\"></mat-datepicker-toggle>\n <mat-datepicker #dp 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]=\"label ? '' : placeholder\" [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 and not color picker -->\n <mat-icon *ngIf=\"!isDatePicker && !isColorPicker && 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 && helperTextLabel\">{{ helperTextLabel }}</mat-error>\n <mat-hint *ngIf=\"helperText && helperTextLabel\">{{ helperTextLabel }}</mat-hint>\n</mat-form-field>\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\";@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}\n"] }]
|
|
429
|
-
}], propDecorators: {
|
|
467
|
+
], 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 <mat-select [disabled]=\"isDisabled\" [(ngModel)]=\"value\" (selectionChange)=\"onSelectionChange($event.value)\">\n <mat-option *ngFor=\"let option of options\" [value]=\"option\">{{ option }}</mat-option>\n </mat-select>\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]=\"labelText ? '' : placeholder\" [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]=\"dp\" [placeholder]=\"labelText ? '' : placeholder\" [disabled]=\"isDisabled\"\n [(ngModel)]=\"selectedDate\" (blur)=\"onTouched()\" />\n <mat-datepicker-toggle matSuffix [for]=\"dp\"></mat-datepicker-toggle>\n <mat-datepicker #dp 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]=\"labelText ? '' : placeholder\" [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 and not color picker -->\n <mat-icon *ngIf=\"!isDatePicker && !isColorPicker && 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>\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\";@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}\n"] }]
|
|
468
|
+
}], propDecorators: { labelText: [{
|
|
469
|
+
type: Input
|
|
470
|
+
}], label: [{
|
|
430
471
|
type: Input
|
|
431
472
|
}], placeholder: [{
|
|
432
473
|
type: Input
|
|
@@ -442,8 +483,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
442
483
|
type: Input
|
|
443
484
|
}], helperText: [{
|
|
444
485
|
type: Input
|
|
445
|
-
}], helperTextLabel: [{
|
|
446
|
-
type: Input
|
|
447
486
|
}], error: [{
|
|
448
487
|
type: Input
|
|
449
488
|
}], errorMessage: [{
|
|
@@ -452,6 +491,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
452
491
|
type: Input
|
|
453
492
|
}], rightIcon: [{
|
|
454
493
|
type: Input
|
|
494
|
+
}], hasDropDown: [{
|
|
495
|
+
type: Input
|
|
455
496
|
}], dropDown: [{
|
|
456
497
|
type: Input
|
|
457
498
|
}], options: [{
|
|
@@ -464,6 +505,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
464
505
|
type: Input
|
|
465
506
|
}], tooltipPosition: [{
|
|
466
507
|
type: Input
|
|
508
|
+
}], change: [{
|
|
509
|
+
type: Output
|
|
467
510
|
}], valueChange: [{
|
|
468
511
|
type: Output
|
|
469
512
|
}], onColorChange: [{
|
|
@@ -519,6 +562,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
519
562
|
}]
|
|
520
563
|
}] });
|
|
521
564
|
|
|
565
|
+
// Wrapper for Angular Material mat-checkbox
|
|
566
|
+
class CheckboxComponent {
|
|
567
|
+
constructor() {
|
|
568
|
+
this.checked = false;
|
|
569
|
+
this.disabled = false;
|
|
570
|
+
this.labelPosition = 'after';
|
|
571
|
+
this.name = '';
|
|
572
|
+
this.required = false;
|
|
573
|
+
this.color = 'primary';
|
|
574
|
+
this.labelText = '';
|
|
575
|
+
this.helperText = '';
|
|
576
|
+
this.showLabels = true;
|
|
577
|
+
this.showHelperIcon = false;
|
|
578
|
+
this.helperIconTooltip = '';
|
|
579
|
+
this.dataTestId = "";
|
|
580
|
+
this.tooltip = '';
|
|
581
|
+
this.tooltipPosition = 'right';
|
|
582
|
+
this.change = new EventEmitter();
|
|
583
|
+
this.indeterminateChange = new EventEmitter();
|
|
584
|
+
this.focus = new EventEmitter();
|
|
585
|
+
this.blur = new EventEmitter();
|
|
586
|
+
this.helperIconClick = new EventEmitter();
|
|
587
|
+
this.onChange = (_) => { };
|
|
588
|
+
this.onTouched = () => { };
|
|
589
|
+
}
|
|
590
|
+
get hasLabelsClass() {
|
|
591
|
+
return !!this.labelText && this.labelText.trim().length > 0;
|
|
592
|
+
}
|
|
593
|
+
writeValue(value) {
|
|
594
|
+
this.checked = !!value;
|
|
595
|
+
}
|
|
596
|
+
registerOnChange(fn) {
|
|
597
|
+
this.onChange = fn;
|
|
598
|
+
}
|
|
599
|
+
registerOnTouched(fn) {
|
|
600
|
+
this.onTouched = fn;
|
|
601
|
+
}
|
|
602
|
+
setDisabledState(isDisabled) {
|
|
603
|
+
this.disabled = isDisabled;
|
|
604
|
+
}
|
|
605
|
+
handleChange(event) {
|
|
606
|
+
this.checked = event.checked;
|
|
607
|
+
this.onChange(this.checked);
|
|
608
|
+
this.change.emit(this.checked);
|
|
609
|
+
}
|
|
610
|
+
handleFocus(event) {
|
|
611
|
+
this.focus.emit(event);
|
|
612
|
+
}
|
|
613
|
+
handleBlur(event) {
|
|
614
|
+
this.onTouched();
|
|
615
|
+
this.blur.emit(event);
|
|
616
|
+
}
|
|
617
|
+
handleIndeterminateChange(value) {
|
|
618
|
+
this.indeterminateChange.emit(value);
|
|
619
|
+
}
|
|
620
|
+
onHelperIconClick(event) {
|
|
621
|
+
event.stopPropagation();
|
|
622
|
+
if (this.disabled) {
|
|
623
|
+
return;
|
|
624
|
+
}
|
|
625
|
+
this.helperIconClick.emit();
|
|
626
|
+
}
|
|
627
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
628
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxComponent, selector: "al-checkbox", inputs: { checked: "checked", disabled: "disabled", labelPosition: "labelPosition", name: "name", required: "required", value: "value", color: "color", labelText: "labelText", helperText: "helperText", showLabels: "showLabels", showHelperIcon: "showHelperIcon", helperIconTooltip: "helperIconTooltip", dataTestId: "dataTestId", tooltip: "tooltip", tooltipPosition: "tooltipPosition" }, outputs: { change: "change", indeterminateChange: "indeterminateChange", focus: "focus", blur: "blur", helperIconClick: "helperIconClick" }, host: { properties: { "class.has-labels": "this.hasLabelsClass" } }, providers: [{
|
|
629
|
+
provide: NG_VALUE_ACCESSOR,
|
|
630
|
+
useExisting: forwardRef(() => CheckboxComponent),
|
|
631
|
+
multi: true
|
|
632
|
+
}
|
|
633
|
+
], 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 .mdc-checkbox__background{background-color:#dee0e6!important;border-color:#dee0e6!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#dee0e6!important;border-color:#dee0e6!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:#5473e81f!important}::ng-deep .mat-mdc-checkbox:hover .mdc-checkbox__ripple{background-color:transparent!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border-radius:4px!important}::ng-deep .mat-mdc-checkbox .mdc-form-field>label{color:#4b4f62!important}.checkbox-label-wrapper{display:flex;flex-direction:column}.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}::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$1.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$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
634
|
+
}
|
|
635
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
636
|
+
type: Component,
|
|
637
|
+
args: [{ selector: 'al-checkbox', providers: [{
|
|
638
|
+
provide: NG_VALUE_ACCESSOR,
|
|
639
|
+
useExisting: forwardRef(() => CheckboxComponent),
|
|
640
|
+
multi: true
|
|
641
|
+
}
|
|
642
|
+
], 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 .mdc-checkbox__background{background-color:#dee0e6!important;border-color:#dee0e6!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#dee0e6!important;border-color:#dee0e6!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:#5473e81f!important}::ng-deep .mat-mdc-checkbox:hover .mdc-checkbox__ripple{background-color:transparent!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border-radius:4px!important}::ng-deep .mat-mdc-checkbox .mdc-form-field>label{color:#4b4f62!important}.checkbox-label-wrapper{display:flex;flex-direction:column}.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}::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"] }]
|
|
643
|
+
}], propDecorators: { checked: [{
|
|
644
|
+
type: Input
|
|
645
|
+
}], disabled: [{
|
|
646
|
+
type: Input
|
|
647
|
+
}], labelPosition: [{
|
|
648
|
+
type: Input
|
|
649
|
+
}], name: [{
|
|
650
|
+
type: Input
|
|
651
|
+
}], required: [{
|
|
652
|
+
type: Input
|
|
653
|
+
}], value: [{
|
|
654
|
+
type: Input
|
|
655
|
+
}], color: [{
|
|
656
|
+
type: Input
|
|
657
|
+
}], labelText: [{
|
|
658
|
+
type: Input
|
|
659
|
+
}], helperText: [{
|
|
660
|
+
type: Input
|
|
661
|
+
}], showLabels: [{
|
|
662
|
+
type: Input
|
|
663
|
+
}], showHelperIcon: [{
|
|
664
|
+
type: Input
|
|
665
|
+
}], helperIconTooltip: [{
|
|
666
|
+
type: Input
|
|
667
|
+
}], hasLabelsClass: [{
|
|
668
|
+
type: HostBinding,
|
|
669
|
+
args: ['class.has-labels']
|
|
670
|
+
}], dataTestId: [{
|
|
671
|
+
type: Input
|
|
672
|
+
}], tooltip: [{
|
|
673
|
+
type: Input
|
|
674
|
+
}], tooltipPosition: [{
|
|
675
|
+
type: Input
|
|
676
|
+
}], change: [{
|
|
677
|
+
type: Output
|
|
678
|
+
}], indeterminateChange: [{
|
|
679
|
+
type: Output
|
|
680
|
+
}], focus: [{
|
|
681
|
+
type: Output
|
|
682
|
+
}], blur: [{
|
|
683
|
+
type: Output
|
|
684
|
+
}], helperIconClick: [{
|
|
685
|
+
type: Output
|
|
686
|
+
}] } });
|
|
687
|
+
|
|
688
|
+
class CheckboxModule {
|
|
689
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
690
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, declarations: [CheckboxComponent], imports: [CommonModule, MatCheckboxModule, MatTooltipModule], exports: [CheckboxComponent] }); }
|
|
691
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, imports: [CommonModule, MatCheckboxModule, MatTooltipModule] }); }
|
|
692
|
+
}
|
|
693
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, decorators: [{
|
|
694
|
+
type: NgModule,
|
|
695
|
+
args: [{
|
|
696
|
+
declarations: [CheckboxComponent],
|
|
697
|
+
imports: [CommonModule, MatCheckboxModule, MatTooltipModule],
|
|
698
|
+
exports: [CheckboxComponent]
|
|
699
|
+
}]
|
|
700
|
+
}] });
|
|
701
|
+
|
|
522
702
|
class ResumeHeaderComponent {
|
|
523
703
|
constructor(sanitizer) {
|
|
524
704
|
this.sanitizer = sanitizer;
|
|
@@ -561,6 +741,9 @@ class ResumeHeaderComponent {
|
|
|
561
741
|
window.addEventListener('resize', this.resizeListener);
|
|
562
742
|
// Check if pop-out should be shown
|
|
563
743
|
this.checkPopOutVisibility();
|
|
744
|
+
// Add click outside listener to close menu on small screens
|
|
745
|
+
this.clickOutsideListener = (event) => this.handleClickOutside(event);
|
|
746
|
+
document.addEventListener('click', this.clickOutsideListener);
|
|
564
747
|
}
|
|
565
748
|
ngAfterViewInit() {
|
|
566
749
|
// Calculate max container width
|
|
@@ -650,6 +833,10 @@ class ResumeHeaderComponent {
|
|
|
650
833
|
if (this.resizeListener) {
|
|
651
834
|
window.removeEventListener('resize', this.resizeListener);
|
|
652
835
|
}
|
|
836
|
+
// Remove click outside listener
|
|
837
|
+
if (this.clickOutsideListener) {
|
|
838
|
+
document.removeEventListener('click', this.clickOutsideListener);
|
|
839
|
+
}
|
|
653
840
|
// Clear any pending timeouts
|
|
654
841
|
this.clearHideTimeout();
|
|
655
842
|
}
|
|
@@ -660,17 +847,431 @@ class ResumeHeaderComponent {
|
|
|
660
847
|
this.isMenuVisible = true;
|
|
661
848
|
this.clearHideTimeout();
|
|
662
849
|
}
|
|
850
|
+
toggleMenu() {
|
|
851
|
+
this.isMenuVisible = !this.isMenuVisible;
|
|
852
|
+
this.clearHideTimeout();
|
|
853
|
+
}
|
|
854
|
+
handleClickOutside(event) {
|
|
855
|
+
if (this.isLargeScreen) {
|
|
856
|
+
return; // Only handle on small screens
|
|
857
|
+
}
|
|
858
|
+
const target = event.target;
|
|
859
|
+
const menuContainer = document.querySelector('.hover-menu-container');
|
|
860
|
+
if (menuContainer && !menuContainer.contains(target) && this.isMenuVisible) {
|
|
861
|
+
this.isMenuVisible = false;
|
|
862
|
+
}
|
|
863
|
+
}
|
|
663
864
|
startHideTimeout() {
|
|
664
865
|
this.clearHideTimeout();
|
|
665
866
|
this.hideTimeout = setTimeout(() => {
|
|
666
867
|
this.isMenuVisible = false;
|
|
667
868
|
}, 200);
|
|
668
869
|
}
|
|
669
|
-
clearHideTimeout() {
|
|
670
|
-
if (this.hideTimeout) {
|
|
671
|
-
clearTimeout(this.hideTimeout);
|
|
672
|
-
this.hideTimeout = null;
|
|
673
|
-
}
|
|
870
|
+
clearHideTimeout() {
|
|
871
|
+
if (this.hideTimeout) {
|
|
872
|
+
clearTimeout(this.hideTimeout);
|
|
873
|
+
this.hideTimeout = null;
|
|
874
|
+
}
|
|
875
|
+
}
|
|
876
|
+
onButtonClick(btn) {
|
|
877
|
+
if (btn.buttonType !== 'dropdown') {
|
|
878
|
+
this.buttonClicked.emit(btn);
|
|
879
|
+
}
|
|
880
|
+
}
|
|
881
|
+
onDropdownSelect(btn, value) {
|
|
882
|
+
if (btn.buttonType === 'dropdown') {
|
|
883
|
+
// Find the selected option
|
|
884
|
+
const selectedOption = btn.dropdownOptions?.find((option) => option.value === value);
|
|
885
|
+
// If the option has a custom function, call it
|
|
886
|
+
if (selectedOption?.function) {
|
|
887
|
+
selectedOption.function();
|
|
888
|
+
}
|
|
889
|
+
// Always emit the buttonClicked event for tracking
|
|
890
|
+
this.buttonClicked.emit({ ...btn, dropdownValue: value });
|
|
891
|
+
}
|
|
892
|
+
}
|
|
893
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResumeHeaderComponent, deps: [{ token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
894
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResumeHeaderComponent, isStandalone: true, selector: "al-resume-header", inputs: { hiddenSection: "hiddenSection", isLargeScreen: "isLargeScreen", inputHandlers: "inputHandlers", checked: "checked", checkboxConfig: "checkboxConfig", disabled: "disabled", buttonConfig: "buttonConfig", configEyeToggle: "configEyeToggle", accordionItem: "accordionItem", toggleEditIcon: "toggleEditIcon", showSection: "showSection", borderColor: "borderColor", dataTestId: "dataTestId", showPopOutPanel: "showPopOutPanel", popOutMessage: "popOutMessage", popOutButtonLabel: "popOutButtonLabel", popOutButtonIcon: "popOutButtonIcon", popOutButtonTooltip: "popOutButtonTooltip", popOutButtonTooltipPosition: "popOutButtonTooltipPosition" }, outputs: { focusField: "focusField", blurField: "blurField", enterKeyPressed: "enterKeyPressed", checkedCheckBoxChange: "checkedCheckBoxChange", buttonClicked: "buttonClicked", showHideToggleSection: "showHideToggleSection", sectionToggled: "sectionToggled", popOutButtonClick: "popOutButtonClick" }, viewQueries: [{ propertyName: "textInputSection", first: true, predicate: ["textInputSection"], descendants: true }], ngImport: i0, template: "<cdk-accordion class=\"example-accordion\">\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n\n <div class=\"example-accordion-item-header\" [ngStyle]=\"{ 'border-color': borderColor }\">\n <div class=\"left_side_header\" *ngIf=\"!hiddenSection?.headerSectionHidden; else hiddenHeaderLayout\">\n <div [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\">\n <button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center \"\n [attr.aria-expanded]=\"accordionItem.expanded\">\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 </div>\n\n <div class=\"edit-input-group\" [style.max-width.px]=\"maxContainerWidth\">\n <div class=\"content_width\" data-test-id=\"edu-section-title-input\">\n <div class=\"content_width\" data-test-id=\"edu-section-title-input\" *ngIf=\"!inputHandlers.headersLoading\">\n <input #textInputSection type=\"text\" [ngClass]=\"{\n 'focusout-input-text': !inputHandlers?.isFocused,\n 'onfocus-input-text': inputHandlers?.isFocused\n }\" [(ngModel)]=\"inputHandlers.shownTitle\" [attr.aria-label]=\"inputHandlers.shownTitle\"\n (focus)=\"focusField.emit('educationHeader')\" (focusout)=\"blurField.emit()\"\n (keypress)=\"enterKeyPressed.emit($event)\" (input)=\"adjustInputWidth($event)\"\n [style.width.px]=\"inputWidth\" [style.max-width.%]=\"100\"\n [disabled]=\"inputHandlers?.isDisabled?.() ?? false\" />\n </div>\n </div>\n <span *ngIf=\"!inputHandlers.headersLoading\" class=\"align-center\">\n <span class=\"material-symbols-outlined\" [attr.alt]=\"inputHandlers.iconAltText || 'edit-icon'\"\n (click)=\"toggleEditIcon?.('educationHeader')\"\n [matTooltip]=\"inputHandlers.tooltipText || 'This header can be edited'\"\n [matTooltipPosition]=\"inputHandlers.tooltipPosition || 'above'\"\n *ngIf=\"inputHandlers.getFieldNotHidden('')\">\n edit\n </span>\n </span>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Right side header (shows when section is NOT hidden) -->\n <div class=\"right_side_header\" *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngIf=\"isLargeScreen\">\n <al-button [labelText]=\"popOutButtonLabel || 'Run Deep Extraction'\" [leftIcon]=\"popOutButtonIcon\"\n [rightIcon]=\"'arrow_forward'\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'header'\"\n [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'header-run-deep-extraction'\"\n [title]=\"popOutButtonLabel || 'Run Deep Extraction'\" [matTooltip]=\"popOutButtonTooltip\"\n [matTooltipPosition]=\"popOutButtonTooltipPosition\">\n </al-button>\n <ng-container class=\"button-margin\"\n *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </ng-container>\n\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 <al-button [labelText]=\"popOutButtonLabel || 'Run Deep Extraction'\" [leftIcon]=\"popOutButtonIcon\"\n [rightIcon]=\"'arrow_forward'\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'header'\"\n [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'header-run-deep-extraction'\"\n [title]=\"popOutButtonLabel || ' Deep Extraction'\" [matTooltip]=\"popOutButtonTooltip\"\n [matTooltipPosition]=\"popOutButtonTooltipPosition\">\n </al-button>\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Eye icon for hiding section -->\n <ng-container *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: false, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"checkboxConfig?.sectionItems?.length\" class=\"mat-checkbox-margin\">\n <al-checkbox [checked]=\"checked\" [disabled]=\"disabled || checkboxConfig?.disabled ?? false\"\n [tooltip]=\"checkboxConfig?.tooltipText || 'Select All'\"\n [tooltipPosition]=\"checkboxConfig.tooltipPosition || 'above'\"\n [dataTestId]=\"'edu-section-select-all-checkbox'\" [showLabels]=\"false\"\n (change)=\"checkedCheckBoxChange.emit($event)\">\n </al-checkbox>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Hidden header layout (shows when section IS hidden) -->\n <ng-template #hiddenHeaderLayout>\n <div class=\"hide-header\">\n <span class=\"header-text-turncate\">{{ inputHandlers?.shownTitle }}</span>\n <div class=\"hidden-write\">Section hidden</div>\n\n <!-- \u2705 FIXED: Eye icon for showing section -->\n <ng-container *ngIf=\"hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"!eyeConfig['onClick']\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n </div>\n\n <!-- Pop-out Panel -->\n <div *ngIf=\"showPopOut\" class=\"pop-out-panel\">\n <div class=\"pop-out-content\">\n <al-button [labelText]=\"popOutButtonLabel || 'Run Deep Extraction'\" [leftIcon]=\"popOutButtonIcon\"\n [rightIcon]=\"'arrow_forward'\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'xs'\"\n [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'pop-out-run-deep-extraction'\"\n [title]=\"popOutButtonLabel || 'Run Deep Extraction'\">\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\n <!-- \u2705 FIXED: Accordion body (only shows when expanded AND not hidden) -->\n <div *ngIf=\"accordionItem.expanded && !hiddenSection?.headerSectionHidden\" class=\"example-accordion-item-body\"\n role=\"region\">\n Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Perferendis excepturi incidunt ipsum\n deleniti labore, tempore non nam doloribus blanditiis veritatis illo autem iure aliquid ullam\n rem tenetur deserunt velit culpa?\n </div>\n\n </cdk-accordion-item>\n</cdk-accordion>\n\n<!-- Header Buttons Template -->\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n <ng-container *ngFor=\"let btn of buttonConfig\">\n <al-button *ngIf=\"!btn.hidden && (!btn.displayCondition || btn.displayCondition())\" [category]=\"btn.category\"\n [buttonType]=\"btn.buttonType\" [labelText]=\"btn.label\" [leftIcon]=\"btn.leftIcon\" [rightIcon]=\"btn.rightIcon\"\n [state]=\"btn.state\" [size]=\"btn.size\" [outlined]=\"btn.outlined\" [iconOnly]=\"btn.iconOnly\"\n [dropdownOptions]=\"btn.buttonType === 'dropdown' ? btn.dropdownOptions : null\"\n (optionSelect)=\"onDropdownSelect(btn, $event)\" (onClick)=\"onButtonClick(btn)\" [attr.alt]=\"btn.alt\"\n [dataTestId]=\"btn.testId\" [matTooltip]=\"btn.tooltipText\" [matTooltipPosition]=\"btn.tooltipPosition || 'above'\">\n </al-button>\n </ng-container>\n</ng-template>\n\n<!-- \u2705 FIXED: Eye Icon Template with proper click handler -->\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n let-configEyeToggle=\"configEyeToggle\">\n <div *ngIf=\"configEyeToggle\" class=\"mat-checkbox-margin align-center\"\n [attr.data-test-id]=\"isHidden ? 'edu-section-show-eye-div' : 'edu-section-hide-eye-div'\">\n <span class=\"material-symbols-outlined delete-multiple mat-fab.mat-accent\"\n [matTooltip]=\"configEyeToggle.tooltips[isHidden ? 'collapse' : 'expand']\"\n [matTooltipPosition]=\"configEyeToggle.tooltips.position\"\n [attr.aria-label]=\"configEyeToggle.ariaLabels[isHidden ? 'collapsed' : 'expanded']\"\n (click)=\"showHideToggleSection.emit({ isHidden: isHidden, accordionItem: accordionItem, config: configEyeToggle })\"\n [attr.data-test-id]=\"isHidden ? 'edu-section-show-eye-icon' : 'edu-section-show-hide-eye-icon'\">\n {{ isHidden ? 'visibility' : 'visibility_off' }}\n </span>\n </div>\n</ng-template>", 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,.example-accordion-item{display:block}.example-accordion-item+.example-accordion-item{border-top:none}.example-accordion-item-header{display:flex;justify-content:space-between;align-items:center;background:#ecedf1;padding:8px 24px;gap:8px;border-bottom:2px solid #37c1ce;border-radius:8px;box-sizing:border-box}.left_side_header button{padding:0!important}.example-accordion-item-description{font-size:.85em;color:#999}.example-accordion-item-body{padding:16px}.example-accordion-item-header:hover{cursor:pointer;background-color:#eee}.icon-button{background:none;border:none;padding:0;cursor:pointer}.toggle-icon,.edit-icon{width:20px;height:20px}.input-header{display:flex;align-items:center;cursor:pointer}.onfocus-input-text{height:30px;padding-left:4px;background:#f4f8fc;border:none;border-radius:5px;font-size:16px;text-overflow:ellipsis;overflow:hidden;font-weight:400;font-family:Roboto,sans-serif;text-align:left}.focusout-input-text{color:#383b4a;background:transparent;display:flex;border:none;font-size:16px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Roboto,sans-serif;text-align:left}.onfocus-input-text,.focusout-input-text{min-width:100px;max-width:100%;padding:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}.content_width{flex:1}input:focus{outline:none;border:none;box-shadow:none}.toggle-button{border:none}.mat-mdc-menu-content,.mat-mdc-menu-panel{background-color:#fff!important}.mat-mdc-menu-item{min-height:36px!important;color:#54595e!important;font-size:14px!important}.mat-mdc-menu-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;outline:0;border-radius:var(--mat-menu-container-shape, var(--mat-app-corner-extra-small));background-color:#fff}::ng-deep .mdc-checkbox .mdc-checkbox__native-control{width:20px!important;height:20px!important}::ng-deep .mdc-checkbox{padding:0!important}::ng-deep .mdc-checkbox__background{top:0!important;left:0!important}::ng-deep .mat-mdc-checkbox .mat-internal-form-field{color:#717793!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}.left_side_header{display:flex;align-items:center;gap:16px;width:100%;padding-right:20px;min-width:0;overflow:hidden}.edit-input-group{display:inline-flex;align-items:center;gap:4px;min-width:fit-content;max-width:100%;overflow:visible;border-radius:4px;transition:background-color .2s ease;padding:0 8px}.edit-input-group:hover{background-color:#d1d3db}.edit-input-group .content_width{flex:1;min-width:0;max-width:calc(100% - 32px);overflow:hidden}.edit-input-group .material-symbols-outlined{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}.edit-input-group:hover .material-symbols-outlined{opacity:1;visibility:visible}.right_side_header{display:flex;align-items:center;gap:8px}.mat-checkbox-margin{margin-left:8px}.button-wrapper{display:flex;align-items:center;gap:8px}.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}.hide-header{display:flex;justify-content:space-between;width:100%;opacity:.7;background-color:#ecedf1;line-height:28px}.icon-wrapper{visibility:visible}.header-text-turncate{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;color:#a2a6b8;font-family:Roboto,sans-serif}.hidden-write{color:#a2a6b8;position:absolute;left:45%;font-weight:400;font-family:Roboto,sans-serif}.example-accordion-item-body{font-size:15px;font-weight:300;line-height:24px;color:#4b4f62;font-family:Roboto,sans-serif}.align-center{display:flex;align-items:center}.material-icons-outlined{color:#717793}.material-symbols-outlined{height:20px;width:20px;color:#717793;font-size:20px;cursor:pointer}.cdk-overlay-container .mat-mdc-tooltip,.cdk-overlay-container .mat-mdc-tooltip-panel,.mat-mdc-tooltip,.mat-mdc-tooltip-panel,.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface,.mat-mdc-tooltip .mdc-tooltip__surface{background-color:#4b4f62!important;color:#fff!important;font-size:13px!important;border-radius:4px!important;box-shadow:0 2px 8px #00000026!important;opacity:1!important}.cdk-overlay-container .mat-mdc-tooltip,.cdk-overlay-container .mat-mdc-tooltip-panel,.mat-mdc-tooltip,.mat-mdc-tooltip-panel,.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface,.mat-mdc-tooltip .mdc-tooltip__surface{background-color:#4b4f62!important;color:#fff!important;font-size:13px!important;border-radius:4px!important;box-shadow:0 2px 8px #00000026!important;opacity:1!important;transition:opacity .15s ease-in-out!important;transform:none!important}.cdk-overlay-container .mat-mdc-tooltip-panel{animation:none!important;transition:opacity .15s ease-in-out!important}.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface .mdc-tooltip__content,.mat-mdc-tooltip .mdc-tooltip__surface .mdc-tooltip__content{color:#fff!important;font-size:13px!important;font-weight:400!important;line-height:1.4!important;padding:8px 12px!important}.left_side_header input:focus,.left_side_header input{line-height:28px!important}.pop-out-panel{background-color:#717793;border-radius:12px;padding:12px 16px;position:relative;box-sizing:border-box;margin:8px auto;width:calc(100% - 120px)}.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}\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: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatIconModule }, { 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: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }, { 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"] }] }); }
|
|
895
|
+
}
|
|
896
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResumeHeaderComponent, decorators: [{
|
|
897
|
+
type: Component,
|
|
898
|
+
args: [{ selector: 'al-resume-header', standalone: true, imports: [
|
|
899
|
+
CommonModule,
|
|
900
|
+
FormsModule,
|
|
901
|
+
MatCheckboxModule,
|
|
902
|
+
MatTooltipModule,
|
|
903
|
+
MatMenuModule,
|
|
904
|
+
MatIconModule,
|
|
905
|
+
CdkAccordionModule,
|
|
906
|
+
ButtonComponent,
|
|
907
|
+
CheckboxModule
|
|
908
|
+
], template: "<cdk-accordion class=\"example-accordion\">\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n\n <div class=\"example-accordion-item-header\" [ngStyle]=\"{ 'border-color': borderColor }\">\n <div class=\"left_side_header\" *ngIf=\"!hiddenSection?.headerSectionHidden; else hiddenHeaderLayout\">\n <div [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\">\n <button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center \"\n [attr.aria-expanded]=\"accordionItem.expanded\">\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 </div>\n\n <div class=\"edit-input-group\" [style.max-width.px]=\"maxContainerWidth\">\n <div class=\"content_width\" data-test-id=\"edu-section-title-input\">\n <div class=\"content_width\" data-test-id=\"edu-section-title-input\" *ngIf=\"!inputHandlers.headersLoading\">\n <input #textInputSection type=\"text\" [ngClass]=\"{\n 'focusout-input-text': !inputHandlers?.isFocused,\n 'onfocus-input-text': inputHandlers?.isFocused\n }\" [(ngModel)]=\"inputHandlers.shownTitle\" [attr.aria-label]=\"inputHandlers.shownTitle\"\n (focus)=\"focusField.emit('educationHeader')\" (focusout)=\"blurField.emit()\"\n (keypress)=\"enterKeyPressed.emit($event)\" (input)=\"adjustInputWidth($event)\"\n [style.width.px]=\"inputWidth\" [style.max-width.%]=\"100\"\n [disabled]=\"inputHandlers?.isDisabled?.() ?? false\" />\n </div>\n </div>\n <span *ngIf=\"!inputHandlers.headersLoading\" class=\"align-center\">\n <span class=\"material-symbols-outlined\" [attr.alt]=\"inputHandlers.iconAltText || 'edit-icon'\"\n (click)=\"toggleEditIcon?.('educationHeader')\"\n [matTooltip]=\"inputHandlers.tooltipText || 'This header can be edited'\"\n [matTooltipPosition]=\"inputHandlers.tooltipPosition || 'above'\"\n *ngIf=\"inputHandlers.getFieldNotHidden('')\">\n edit\n </span>\n </span>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Right side header (shows when section is NOT hidden) -->\n <div class=\"right_side_header\" *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngIf=\"isLargeScreen\">\n <al-button [labelText]=\"popOutButtonLabel || 'Run Deep Extraction'\" [leftIcon]=\"popOutButtonIcon\"\n [rightIcon]=\"'arrow_forward'\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'header'\"\n [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'header-run-deep-extraction'\"\n [title]=\"popOutButtonLabel || 'Run Deep Extraction'\" [matTooltip]=\"popOutButtonTooltip\"\n [matTooltipPosition]=\"popOutButtonTooltipPosition\">\n </al-button>\n <ng-container class=\"button-margin\"\n *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </ng-container>\n\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 <al-button [labelText]=\"popOutButtonLabel || 'Run Deep Extraction'\" [leftIcon]=\"popOutButtonIcon\"\n [rightIcon]=\"'arrow_forward'\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'header'\"\n [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'header-run-deep-extraction'\"\n [title]=\"popOutButtonLabel || ' Deep Extraction'\" [matTooltip]=\"popOutButtonTooltip\"\n [matTooltipPosition]=\"popOutButtonTooltipPosition\">\n </al-button>\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Eye icon for hiding section -->\n <ng-container *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: false, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"checkboxConfig?.sectionItems?.length\" class=\"mat-checkbox-margin\">\n <al-checkbox [checked]=\"checked\" [disabled]=\"disabled || checkboxConfig?.disabled ?? false\"\n [tooltip]=\"checkboxConfig?.tooltipText || 'Select All'\"\n [tooltipPosition]=\"checkboxConfig.tooltipPosition || 'above'\"\n [dataTestId]=\"'edu-section-select-all-checkbox'\" [showLabels]=\"false\"\n (change)=\"checkedCheckBoxChange.emit($event)\">\n </al-checkbox>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Hidden header layout (shows when section IS hidden) -->\n <ng-template #hiddenHeaderLayout>\n <div class=\"hide-header\">\n <span class=\"header-text-turncate\">{{ inputHandlers?.shownTitle }}</span>\n <div class=\"hidden-write\">Section hidden</div>\n\n <!-- \u2705 FIXED: Eye icon for showing section -->\n <ng-container *ngIf=\"hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"!eyeConfig['onClick']\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n </div>\n\n <!-- Pop-out Panel -->\n <div *ngIf=\"showPopOut\" class=\"pop-out-panel\">\n <div class=\"pop-out-content\">\n <al-button [labelText]=\"popOutButtonLabel || 'Run Deep Extraction'\" [leftIcon]=\"popOutButtonIcon\"\n [rightIcon]=\"'arrow_forward'\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'xs'\"\n [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'pop-out-run-deep-extraction'\"\n [title]=\"popOutButtonLabel || 'Run Deep Extraction'\">\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\n <!-- \u2705 FIXED: Accordion body (only shows when expanded AND not hidden) -->\n <div *ngIf=\"accordionItem.expanded && !hiddenSection?.headerSectionHidden\" class=\"example-accordion-item-body\"\n role=\"region\">\n Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Perferendis excepturi incidunt ipsum\n deleniti labore, tempore non nam doloribus blanditiis veritatis illo autem iure aliquid ullam\n rem tenetur deserunt velit culpa?\n </div>\n\n </cdk-accordion-item>\n</cdk-accordion>\n\n<!-- Header Buttons Template -->\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n <ng-container *ngFor=\"let btn of buttonConfig\">\n <al-button *ngIf=\"!btn.hidden && (!btn.displayCondition || btn.displayCondition())\" [category]=\"btn.category\"\n [buttonType]=\"btn.buttonType\" [labelText]=\"btn.label\" [leftIcon]=\"btn.leftIcon\" [rightIcon]=\"btn.rightIcon\"\n [state]=\"btn.state\" [size]=\"btn.size\" [outlined]=\"btn.outlined\" [iconOnly]=\"btn.iconOnly\"\n [dropdownOptions]=\"btn.buttonType === 'dropdown' ? btn.dropdownOptions : null\"\n (optionSelect)=\"onDropdownSelect(btn, $event)\" (onClick)=\"onButtonClick(btn)\" [attr.alt]=\"btn.alt\"\n [dataTestId]=\"btn.testId\" [matTooltip]=\"btn.tooltipText\" [matTooltipPosition]=\"btn.tooltipPosition || 'above'\">\n </al-button>\n </ng-container>\n</ng-template>\n\n<!-- \u2705 FIXED: Eye Icon Template with proper click handler -->\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n let-configEyeToggle=\"configEyeToggle\">\n <div *ngIf=\"configEyeToggle\" class=\"mat-checkbox-margin align-center\"\n [attr.data-test-id]=\"isHidden ? 'edu-section-show-eye-div' : 'edu-section-hide-eye-div'\">\n <span class=\"material-symbols-outlined delete-multiple mat-fab.mat-accent\"\n [matTooltip]=\"configEyeToggle.tooltips[isHidden ? 'collapse' : 'expand']\"\n [matTooltipPosition]=\"configEyeToggle.tooltips.position\"\n [attr.aria-label]=\"configEyeToggle.ariaLabels[isHidden ? 'collapsed' : 'expanded']\"\n (click)=\"showHideToggleSection.emit({ isHidden: isHidden, accordionItem: accordionItem, config: configEyeToggle })\"\n [attr.data-test-id]=\"isHidden ? 'edu-section-show-eye-icon' : 'edu-section-show-hide-eye-icon'\">\n {{ isHidden ? 'visibility' : 'visibility_off' }}\n </span>\n </div>\n</ng-template>", 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,.example-accordion-item{display:block}.example-accordion-item+.example-accordion-item{border-top:none}.example-accordion-item-header{display:flex;justify-content:space-between;align-items:center;background:#ecedf1;padding:8px 24px;gap:8px;border-bottom:2px solid #37c1ce;border-radius:8px;box-sizing:border-box}.left_side_header button{padding:0!important}.example-accordion-item-description{font-size:.85em;color:#999}.example-accordion-item-body{padding:16px}.example-accordion-item-header:hover{cursor:pointer;background-color:#eee}.icon-button{background:none;border:none;padding:0;cursor:pointer}.toggle-icon,.edit-icon{width:20px;height:20px}.input-header{display:flex;align-items:center;cursor:pointer}.onfocus-input-text{height:30px;padding-left:4px;background:#f4f8fc;border:none;border-radius:5px;font-size:16px;text-overflow:ellipsis;overflow:hidden;font-weight:400;font-family:Roboto,sans-serif;text-align:left}.focusout-input-text{color:#383b4a;background:transparent;display:flex;border:none;font-size:16px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Roboto,sans-serif;text-align:left}.onfocus-input-text,.focusout-input-text{min-width:100px;max-width:100%;padding:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}.content_width{flex:1}input:focus{outline:none;border:none;box-shadow:none}.toggle-button{border:none}.mat-mdc-menu-content,.mat-mdc-menu-panel{background-color:#fff!important}.mat-mdc-menu-item{min-height:36px!important;color:#54595e!important;font-size:14px!important}.mat-mdc-menu-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;outline:0;border-radius:var(--mat-menu-container-shape, var(--mat-app-corner-extra-small));background-color:#fff}::ng-deep .mdc-checkbox .mdc-checkbox__native-control{width:20px!important;height:20px!important}::ng-deep .mdc-checkbox{padding:0!important}::ng-deep .mdc-checkbox__background{top:0!important;left:0!important}::ng-deep .mat-mdc-checkbox .mat-internal-form-field{color:#717793!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}.left_side_header{display:flex;align-items:center;gap:16px;width:100%;padding-right:20px;min-width:0;overflow:hidden}.edit-input-group{display:inline-flex;align-items:center;gap:4px;min-width:fit-content;max-width:100%;overflow:visible;border-radius:4px;transition:background-color .2s ease;padding:0 8px}.edit-input-group:hover{background-color:#d1d3db}.edit-input-group .content_width{flex:1;min-width:0;max-width:calc(100% - 32px);overflow:hidden}.edit-input-group .material-symbols-outlined{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}.edit-input-group:hover .material-symbols-outlined{opacity:1;visibility:visible}.right_side_header{display:flex;align-items:center;gap:8px}.mat-checkbox-margin{margin-left:8px}.button-wrapper{display:flex;align-items:center;gap:8px}.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}.hide-header{display:flex;justify-content:space-between;width:100%;opacity:.7;background-color:#ecedf1;line-height:28px}.icon-wrapper{visibility:visible}.header-text-turncate{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;color:#a2a6b8;font-family:Roboto,sans-serif}.hidden-write{color:#a2a6b8;position:absolute;left:45%;font-weight:400;font-family:Roboto,sans-serif}.example-accordion-item-body{font-size:15px;font-weight:300;line-height:24px;color:#4b4f62;font-family:Roboto,sans-serif}.align-center{display:flex;align-items:center}.material-icons-outlined{color:#717793}.material-symbols-outlined{height:20px;width:20px;color:#717793;font-size:20px;cursor:pointer}.cdk-overlay-container .mat-mdc-tooltip,.cdk-overlay-container .mat-mdc-tooltip-panel,.mat-mdc-tooltip,.mat-mdc-tooltip-panel,.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface,.mat-mdc-tooltip .mdc-tooltip__surface{background-color:#4b4f62!important;color:#fff!important;font-size:13px!important;border-radius:4px!important;box-shadow:0 2px 8px #00000026!important;opacity:1!important}.cdk-overlay-container .mat-mdc-tooltip,.cdk-overlay-container .mat-mdc-tooltip-panel,.mat-mdc-tooltip,.mat-mdc-tooltip-panel,.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface,.mat-mdc-tooltip .mdc-tooltip__surface{background-color:#4b4f62!important;color:#fff!important;font-size:13px!important;border-radius:4px!important;box-shadow:0 2px 8px #00000026!important;opacity:1!important;transition:opacity .15s ease-in-out!important;transform:none!important}.cdk-overlay-container .mat-mdc-tooltip-panel{animation:none!important;transition:opacity .15s ease-in-out!important}.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface .mdc-tooltip__content,.mat-mdc-tooltip .mdc-tooltip__surface .mdc-tooltip__content{color:#fff!important;font-size:13px!important;font-weight:400!important;line-height:1.4!important;padding:8px 12px!important}.left_side_header input:focus,.left_side_header input{line-height:28px!important}.pop-out-panel{background-color:#717793;border-radius:12px;padding:12px 16px;position:relative;box-sizing:border-box;margin:8px auto;width:calc(100% - 120px)}.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}\n"] }]
|
|
909
|
+
}], ctorParameters: () => [{ type: i2.DomSanitizer }], propDecorators: { hiddenSection: [{
|
|
910
|
+
type: Input
|
|
911
|
+
}], isLargeScreen: [{
|
|
912
|
+
type: Input
|
|
913
|
+
}], inputHandlers: [{
|
|
914
|
+
type: Input
|
|
915
|
+
}], focusField: [{
|
|
916
|
+
type: Output
|
|
917
|
+
}], blurField: [{
|
|
918
|
+
type: Output
|
|
919
|
+
}], enterKeyPressed: [{
|
|
920
|
+
type: Output
|
|
921
|
+
}], checked: [{
|
|
922
|
+
type: Input
|
|
923
|
+
}], checkboxConfig: [{
|
|
924
|
+
type: Input
|
|
925
|
+
}], checkedCheckBoxChange: [{
|
|
926
|
+
type: Output
|
|
927
|
+
}], disabled: [{
|
|
928
|
+
type: Input
|
|
929
|
+
}], buttonConfig: [{
|
|
930
|
+
type: Input
|
|
931
|
+
}], buttonClicked: [{
|
|
932
|
+
type: Output
|
|
933
|
+
}], configEyeToggle: [{
|
|
934
|
+
type: Input
|
|
935
|
+
}], accordionItem: [{
|
|
936
|
+
type: Input
|
|
937
|
+
}], showHideToggleSection: [{
|
|
938
|
+
type: Output
|
|
939
|
+
}], toggleEditIcon: [{
|
|
940
|
+
type: Input
|
|
941
|
+
}], showSection: [{
|
|
942
|
+
type: Input
|
|
943
|
+
}], sectionToggled: [{
|
|
944
|
+
type: Output
|
|
945
|
+
}], borderColor: [{
|
|
946
|
+
type: Input
|
|
947
|
+
}], dataTestId: [{
|
|
948
|
+
type: Input
|
|
949
|
+
}], showPopOutPanel: [{
|
|
950
|
+
type: Input
|
|
951
|
+
}], popOutMessage: [{
|
|
952
|
+
type: Input
|
|
953
|
+
}], popOutButtonLabel: [{
|
|
954
|
+
type: Input
|
|
955
|
+
}], popOutButtonIcon: [{
|
|
956
|
+
type: Input
|
|
957
|
+
}], popOutButtonTooltip: [{
|
|
958
|
+
type: Input
|
|
959
|
+
}], popOutButtonTooltipPosition: [{
|
|
960
|
+
type: Input
|
|
961
|
+
}], popOutButtonClick: [{
|
|
962
|
+
type: Output
|
|
963
|
+
}], textInputSection: [{
|
|
964
|
+
type: ViewChild,
|
|
965
|
+
args: ['textInputSection']
|
|
966
|
+
}] } });
|
|
967
|
+
|
|
968
|
+
class ResumeHeaderModule {
|
|
969
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResumeHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
970
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ResumeHeaderModule, imports: [CommonModule, ResumeHeaderComponent], exports: [ResumeHeaderComponent] }); }
|
|
971
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResumeHeaderModule, imports: [CommonModule, ResumeHeaderComponent] }); }
|
|
972
|
+
}
|
|
973
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResumeHeaderModule, decorators: [{
|
|
974
|
+
type: NgModule,
|
|
975
|
+
args: [{
|
|
976
|
+
imports: [CommonModule, ResumeHeaderComponent],
|
|
977
|
+
exports: [ResumeHeaderComponent],
|
|
978
|
+
}]
|
|
979
|
+
}] });
|
|
980
|
+
|
|
981
|
+
/**
|
|
982
|
+
* Color constants matching colors.scss
|
|
983
|
+
* These values should be kept in sync with src/lib/styles/colors.scss
|
|
984
|
+
*/
|
|
985
|
+
const COLORS = {
|
|
986
|
+
// Blue scale
|
|
987
|
+
blue: {
|
|
988
|
+
'50': '#E5E9FC',
|
|
989
|
+
'100': '#BBC7F6',
|
|
990
|
+
'200': '#98ABF1',
|
|
991
|
+
'300': '#768FED',
|
|
992
|
+
'400': '#6581EA',
|
|
993
|
+
'500': '#5473E8', // Base-Blue
|
|
994
|
+
'600': '#1E46DF',
|
|
995
|
+
'700': '#0F236F',
|
|
996
|
+
'800': '#071238',
|
|
997
|
+
'900': '#04091C',
|
|
998
|
+
},
|
|
999
|
+
// Green scale
|
|
1000
|
+
green: {
|
|
1001
|
+
'50': '#D7F3F5',
|
|
1002
|
+
'100': '#AFE6EB',
|
|
1003
|
+
'200': '#87DAE2',
|
|
1004
|
+
'300': '#5FCDD8',
|
|
1005
|
+
'400': '#4BC7D3',
|
|
1006
|
+
'500': '#37C1CE', // Base-Green
|
|
1007
|
+
'600': '#299DA8',
|
|
1008
|
+
'700': '#1F767E',
|
|
1009
|
+
'800': '#154E54',
|
|
1010
|
+
'900': '#0A272A',
|
|
1011
|
+
},
|
|
1012
|
+
// Grey scale
|
|
1013
|
+
grey: {
|
|
1014
|
+
'50': '#FAFBFB',
|
|
1015
|
+
'100': '#ECEDF1',
|
|
1016
|
+
'200': '#DEE0E6',
|
|
1017
|
+
'300': '#D1D3DB',
|
|
1018
|
+
'400': '#C3C5D1',
|
|
1019
|
+
'500': '#A2A6B8', // Base-Grey
|
|
1020
|
+
'600': '#717793',
|
|
1021
|
+
'700': '#4B4F62',
|
|
1022
|
+
'800': '#383B4A',
|
|
1023
|
+
'900': '#252831',
|
|
1024
|
+
},
|
|
1025
|
+
};
|
|
1026
|
+
// Border color options for general-container component
|
|
1027
|
+
const BORDER_COLORS = [
|
|
1028
|
+
COLORS.green['200'], // #87DAE2
|
|
1029
|
+
COLORS.blue['200'], // #98ABF1
|
|
1030
|
+
COLORS.grey['500'], // #A2A6B8
|
|
1031
|
+
COLORS.grey['700'], // #4B4F62
|
|
1032
|
+
COLORS.blue['500'], // #5473E8
|
|
1033
|
+
COLORS.green['500'], // #37C1CE
|
|
1034
|
+
];
|
|
1035
|
+
|
|
1036
|
+
class GeneralContainerComponent {
|
|
1037
|
+
constructor() {
|
|
1038
|
+
/** Background color of the container */
|
|
1039
|
+
this.backgroundColor = '#FFFFFF';
|
|
1040
|
+
/** Padding for the container */
|
|
1041
|
+
this.padding = '16px';
|
|
1042
|
+
/** Border position: 'none', 'top', 'bottom', or 'both' */
|
|
1043
|
+
this.borderPosition = 'none';
|
|
1044
|
+
/** Border color - one of the predefined colors */
|
|
1045
|
+
this.borderColor = BORDER_COLORS[0];
|
|
1046
|
+
/** Border radius */
|
|
1047
|
+
this.borderRadius = '8px';
|
|
1048
|
+
/** Enable box shadow */
|
|
1049
|
+
this.boxShadow = true;
|
|
1050
|
+
/** Available border colors for dropdown */
|
|
1051
|
+
this.borderColors = BORDER_COLORS;
|
|
1052
|
+
}
|
|
1053
|
+
get containerStyles() {
|
|
1054
|
+
const styles = {
|
|
1055
|
+
'background-color': this.backgroundColor,
|
|
1056
|
+
'padding': this.padding,
|
|
1057
|
+
'border-radius': this.borderRadius,
|
|
1058
|
+
};
|
|
1059
|
+
// Width and height
|
|
1060
|
+
if (this.width) {
|
|
1061
|
+
styles['width'] = this.width;
|
|
1062
|
+
}
|
|
1063
|
+
if (this.height) {
|
|
1064
|
+
styles['height'] = this.height;
|
|
1065
|
+
}
|
|
1066
|
+
// Box shadow
|
|
1067
|
+
if (this.boxShadow) {
|
|
1068
|
+
styles['box-shadow'] = this.customBoxShadow || '0 2px 4px 0 rgba(24, 43, 125, 0.15)';
|
|
1069
|
+
}
|
|
1070
|
+
// Auto-detect border position from border radius
|
|
1071
|
+
let effectiveBorderPosition = this.borderPosition;
|
|
1072
|
+
if (this.borderRadius === '0 0 16px 16px') {
|
|
1073
|
+
// Rounded bottom corners - apply bottom border
|
|
1074
|
+
effectiveBorderPosition = 'bottom';
|
|
1075
|
+
}
|
|
1076
|
+
else if (this.borderRadius === '16px 16px 0 0') {
|
|
1077
|
+
// Rounded top corners - apply top border
|
|
1078
|
+
effectiveBorderPosition = 'top';
|
|
1079
|
+
}
|
|
1080
|
+
// Border styles
|
|
1081
|
+
if (effectiveBorderPosition === 'top') {
|
|
1082
|
+
styles['border-top'] = `2px solid ${this.borderColor}`;
|
|
1083
|
+
styles['border-bottom'] = 'none';
|
|
1084
|
+
styles['border-left'] = 'none';
|
|
1085
|
+
styles['border-right'] = 'none';
|
|
1086
|
+
}
|
|
1087
|
+
else if (effectiveBorderPosition === 'bottom') {
|
|
1088
|
+
styles['border-bottom'] = `2px solid ${this.borderColor}`;
|
|
1089
|
+
styles['border-top'] = 'none';
|
|
1090
|
+
styles['border-left'] = 'none';
|
|
1091
|
+
styles['border-right'] = 'none';
|
|
1092
|
+
}
|
|
1093
|
+
else if (effectiveBorderPosition === 'both') {
|
|
1094
|
+
styles['border-top'] = `2px solid ${this.borderColor}`;
|
|
1095
|
+
styles['border-bottom'] = `2px solid ${this.borderColor}`;
|
|
1096
|
+
styles['border-left'] = 'none';
|
|
1097
|
+
styles['border-right'] = 'none';
|
|
1098
|
+
}
|
|
1099
|
+
else {
|
|
1100
|
+
styles['border'] = 'none';
|
|
1101
|
+
}
|
|
1102
|
+
return styles;
|
|
1103
|
+
}
|
|
1104
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GeneralContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1105
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GeneralContainerComponent, isStandalone: true, selector: "al-general-container", inputs: { backgroundColor: "backgroundColor", padding: "padding", width: "width", height: "height", borderPosition: "borderPosition", borderColor: "borderColor", borderRadius: "borderRadius", boxShadow: "boxShadow", customBoxShadow: "customBoxShadow" }, ngImport: i0, template: "<div class=\"general-container\" [ngStyle]=\"containerStyles\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;width:100%}.general-container{width:100%;min-height:100px;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
1106
|
+
}
|
|
1107
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GeneralContainerComponent, decorators: [{
|
|
1108
|
+
type: Component,
|
|
1109
|
+
args: [{ selector: 'al-general-container', standalone: true, imports: [CommonModule], template: "<div class=\"general-container\" [ngStyle]=\"containerStyles\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;width:100%}.general-container{width:100%;min-height:100px;box-sizing:border-box}\n"] }]
|
|
1110
|
+
}], propDecorators: { backgroundColor: [{
|
|
1111
|
+
type: Input
|
|
1112
|
+
}], padding: [{
|
|
1113
|
+
type: Input
|
|
1114
|
+
}], width: [{
|
|
1115
|
+
type: Input
|
|
1116
|
+
}], height: [{
|
|
1117
|
+
type: Input
|
|
1118
|
+
}], borderPosition: [{
|
|
1119
|
+
type: Input
|
|
1120
|
+
}], borderColor: [{
|
|
1121
|
+
type: Input
|
|
1122
|
+
}], borderRadius: [{
|
|
1123
|
+
type: Input
|
|
1124
|
+
}], boxShadow: [{
|
|
1125
|
+
type: Input
|
|
1126
|
+
}], customBoxShadow: [{
|
|
1127
|
+
type: Input
|
|
1128
|
+
}] } });
|
|
1129
|
+
|
|
1130
|
+
class ResponsiveColumnsComponent {
|
|
1131
|
+
get dataTestIdAttr() {
|
|
1132
|
+
return this.dataTestId || null;
|
|
1133
|
+
}
|
|
1134
|
+
get cssGap() {
|
|
1135
|
+
return typeof this.gap === 'number' ? `$ {
|
|
1136
|
+
this.gap
|
|
1137
|
+
}
|
|
1138
|
+
|
|
1139
|
+
px` : this.gap;
|
|
1140
|
+
}
|
|
1141
|
+
get cssPadding() {
|
|
1142
|
+
return typeof this.padding === 'number' ? `$ {
|
|
1143
|
+
this.padding
|
|
1144
|
+
}
|
|
1145
|
+
|
|
1146
|
+
px` : this.padding;
|
|
1147
|
+
}
|
|
1148
|
+
get cssLeftWidth() { return this.leftWidth || 'auto'; }
|
|
1149
|
+
get cssRightWidth() { return this.rightWidth || 'auto'; }
|
|
1150
|
+
get cssStackAt() {
|
|
1151
|
+
return `$ {
|
|
1152
|
+
this.stackAt
|
|
1153
|
+
}
|
|
1154
|
+
|
|
1155
|
+
px`;
|
|
1156
|
+
}
|
|
1157
|
+
constructor(hostRef, zone) {
|
|
1158
|
+
this.hostRef = hostRef;
|
|
1159
|
+
this.zone = zone;
|
|
1160
|
+
/** Gap between the three columns */
|
|
1161
|
+
this.gap = '16px';
|
|
1162
|
+
/** Padding applied to the container (e.g. '12px 16px') */
|
|
1163
|
+
this.padding = 0;
|
|
1164
|
+
/** Optional explicit widths for side columns; default to compact 32px side rails */
|
|
1165
|
+
this.leftWidth = '32px';
|
|
1166
|
+
this.rightWidth = '32px';
|
|
1167
|
+
/** Breakpoint (px) below which columns stack vertically */
|
|
1168
|
+
this.stackAt = 480;
|
|
1169
|
+
this.isStacked = false;
|
|
1170
|
+
}
|
|
1171
|
+
ngAfterViewInit() {
|
|
1172
|
+
this.zone.runOutsideAngular(() => {
|
|
1173
|
+
this.resizeObserver = new ResizeObserver(entries => {
|
|
1174
|
+
const entry = entries[0];
|
|
1175
|
+
const width = entry?.contentRect?.width ?? this.hostRef.nativeElement.clientWidth;
|
|
1176
|
+
const shouldStack = width < this.stackAt;
|
|
1177
|
+
if (shouldStack !== this.isStacked) {
|
|
1178
|
+
this.zone.run(() => (this.isStacked = shouldStack));
|
|
1179
|
+
}
|
|
1180
|
+
});
|
|
1181
|
+
this.resizeObserver.observe(this.hostRef.nativeElement);
|
|
1182
|
+
});
|
|
1183
|
+
}
|
|
1184
|
+
ngOnChanges(changes) {
|
|
1185
|
+
if (changes['stackAt']) {
|
|
1186
|
+
const width = this.hostRef?.nativeElement?.clientWidth || 0;
|
|
1187
|
+
this.isStacked = width < this.stackAt;
|
|
1188
|
+
}
|
|
1189
|
+
}
|
|
1190
|
+
ngOnDestroy() {
|
|
1191
|
+
this.resizeObserver?.disconnect();
|
|
1192
|
+
}
|
|
1193
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResponsiveColumnsComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1194
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResponsiveColumnsComponent, isStandalone: true, selector: "al-responsive-columns", inputs: { dataTestId: "dataTestId", gap: "gap", padding: "padding", leftWidth: "leftWidth", rightWidth: "rightWidth", stackAt: "stackAt" }, host: { properties: { "class.stack": "this.isStacked", "attr.data-testid": "this.dataTestIdAttr", "style.--gap": "this.cssGap", "style.--padding": "this.cssPadding", "style.--left-width": "this.cssLeftWidth", "style.--right-width": "this.cssRightWidth", "style.--stack-at": "this.cssStackAt" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"container\">\n <div class=\"column left\"><ng-content select=\"[left],[slot=left],[data-slot=left]\"></ng-content></div>\n <div class=\"column center\"><ng-content></ng-content><ng-content\n select=\"[center],[slot=center],[data-slot=center]\"></ng-content></div>\n <div class=\"column right\"><ng-content select=\"[right],[slot=right],[data-slot=right]\"></ng-content></div>\n</div>", styles: [":host{display:block}.container{display:grid;grid-template-columns:var(--template-columns, var(--left-width, auto) 1fr var(--right-width, auto));gap:var(--gap, 16px);padding:var(--padding, 0)}:host(.stack) .container{grid-template-columns:1fr}:host(.stack) .container .left,:host(.stack) .container .right{order:-1}.column{min-width:0}.center{background:var(--center-bg, transparent)}.container:hover ::ng-deep .toolbar-icons{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .15s ease,transform .15s ease,visibility 0s}.container:hover ::ng-deep .toolbar-container{background-color:#e5e9fc}.container:hover ::ng-deep .toolbar-right-container{background-color:#e5e9fc}.center:hover ::ng-deep .toolbar-right-icons{visibility:visible!important;opacity:1!important;display:flex!important}.center:hover ::ng-deep .toolbar-right-container{background-color:#e5e9fc}.container:hover ::ng-deep .toolbar-right-icons{visibility:visible!important;opacity:1!important;display:flex!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
1195
|
+
}
|
|
1196
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResponsiveColumnsComponent, decorators: [{
|
|
1197
|
+
type: Component,
|
|
1198
|
+
args: [{ selector: 'al-responsive-columns', standalone: true, imports: [CommonModule], template: "<div class=\"container\">\n <div class=\"column left\"><ng-content select=\"[left],[slot=left],[data-slot=left]\"></ng-content></div>\n <div class=\"column center\"><ng-content></ng-content><ng-content\n select=\"[center],[slot=center],[data-slot=center]\"></ng-content></div>\n <div class=\"column right\"><ng-content select=\"[right],[slot=right],[data-slot=right]\"></ng-content></div>\n</div>", styles: [":host{display:block}.container{display:grid;grid-template-columns:var(--template-columns, var(--left-width, auto) 1fr var(--right-width, auto));gap:var(--gap, 16px);padding:var(--padding, 0)}:host(.stack) .container{grid-template-columns:1fr}:host(.stack) .container .left,:host(.stack) .container .right{order:-1}.column{min-width:0}.center{background:var(--center-bg, transparent)}.container:hover ::ng-deep .toolbar-icons{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .15s ease,transform .15s ease,visibility 0s}.container:hover ::ng-deep .toolbar-container{background-color:#e5e9fc}.container:hover ::ng-deep .toolbar-right-container{background-color:#e5e9fc}.center:hover ::ng-deep .toolbar-right-icons{visibility:visible!important;opacity:1!important;display:flex!important}.center:hover ::ng-deep .toolbar-right-container{background-color:#e5e9fc}.container:hover ::ng-deep .toolbar-right-icons{visibility:visible!important;opacity:1!important;display:flex!important}\n"] }]
|
|
1199
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dataTestId: [{
|
|
1200
|
+
type: Input
|
|
1201
|
+
}], gap: [{
|
|
1202
|
+
type: Input
|
|
1203
|
+
}], padding: [{
|
|
1204
|
+
type: Input
|
|
1205
|
+
}], leftWidth: [{
|
|
1206
|
+
type: Input
|
|
1207
|
+
}], rightWidth: [{
|
|
1208
|
+
type: Input
|
|
1209
|
+
}], stackAt: [{
|
|
1210
|
+
type: Input
|
|
1211
|
+
}], isStacked: [{
|
|
1212
|
+
type: HostBinding,
|
|
1213
|
+
args: ['class.stack']
|
|
1214
|
+
}], dataTestIdAttr: [{
|
|
1215
|
+
type: HostBinding,
|
|
1216
|
+
args: ['attr.data-testid']
|
|
1217
|
+
}], cssGap: [{
|
|
1218
|
+
type: HostBinding,
|
|
1219
|
+
args: ['style.--gap']
|
|
1220
|
+
}], cssPadding: [{
|
|
1221
|
+
type: HostBinding,
|
|
1222
|
+
args: ['style.--padding']
|
|
1223
|
+
}], cssLeftWidth: [{
|
|
1224
|
+
type: HostBinding,
|
|
1225
|
+
args: ['style.--left-width']
|
|
1226
|
+
}], cssRightWidth: [{
|
|
1227
|
+
type: HostBinding,
|
|
1228
|
+
args: ['style.--right-width']
|
|
1229
|
+
}], cssStackAt: [{
|
|
1230
|
+
type: HostBinding,
|
|
1231
|
+
args: ['style.--stack-at']
|
|
1232
|
+
}] } });
|
|
1233
|
+
|
|
1234
|
+
class NewResumeHeaderComponent {
|
|
1235
|
+
// Computed property for pop-out visibility
|
|
1236
|
+
get shouldShowPopOut() {
|
|
1237
|
+
return this.showPopOutPanel && !this.isPopOutDismissed;
|
|
1238
|
+
}
|
|
1239
|
+
constructor(sanitizer, cdr) {
|
|
1240
|
+
this.sanitizer = sanitizer;
|
|
1241
|
+
this.cdr = cdr;
|
|
1242
|
+
// Add your component properties here
|
|
1243
|
+
this.title = '';
|
|
1244
|
+
this.showHeaderCheckbox = true;
|
|
1245
|
+
this.headerCheckboxChecked = false;
|
|
1246
|
+
this.configEyeToggle = [];
|
|
1247
|
+
this.hiddenSection = { headerSectionHidden: false };
|
|
1248
|
+
this.buttonConfig = [];
|
|
1249
|
+
this.isLargeScreen = true;
|
|
1250
|
+
this.popOutButtonLabel = 'Run Deep Extraction';
|
|
1251
|
+
this.popOutButtonIcon = 'auto_fix_high';
|
|
1252
|
+
this.popOutButtonTooltip = 'Deep Extraction';
|
|
1253
|
+
this.popOutButtonTooltipPosition = 'above';
|
|
1254
|
+
this.showPopOutPanel = false;
|
|
1255
|
+
this.popOutMessage = 'Takes a little longer, but deals with tricky resumes much better than fast extraction.';
|
|
1256
|
+
this.titleChange = new EventEmitter();
|
|
1257
|
+
this.sectionToggled = new EventEmitter();
|
|
1258
|
+
this.headerCheckboxChange = new EventEmitter();
|
|
1259
|
+
this.showHideToggleSection = new EventEmitter();
|
|
1260
|
+
this.buttonClicked = new EventEmitter();
|
|
1261
|
+
this.popOutButtonClick = new EventEmitter();
|
|
1262
|
+
this.isTitleEditing = false;
|
|
1263
|
+
this.editedTitle = '';
|
|
1264
|
+
this.isInputFocused = false;
|
|
1265
|
+
this.isMenuVisible = false;
|
|
1266
|
+
this.isPopOutDismissed = false;
|
|
1267
|
+
}
|
|
1268
|
+
toggleAccordion(accordionItem) {
|
|
1269
|
+
accordionItem.toggle();
|
|
1270
|
+
this.sectionToggled.emit(accordionItem.expanded);
|
|
1271
|
+
}
|
|
1272
|
+
onHeaderCheckboxChange(checked) {
|
|
1273
|
+
this.headerCheckboxChecked = checked;
|
|
1274
|
+
this.headerCheckboxChange.emit(checked);
|
|
674
1275
|
}
|
|
675
1276
|
onButtonClick(btn) {
|
|
676
1277
|
if (btn.buttonType !== 'dropdown') {
|
|
@@ -689,90 +1290,174 @@ class ResumeHeaderComponent {
|
|
|
689
1290
|
this.buttonClicked.emit({ ...btn, dropdownValue: value });
|
|
690
1291
|
}
|
|
691
1292
|
}
|
|
692
|
-
|
|
693
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResumeHeaderComponent, isStandalone: true, selector: "al-resume-header", inputs: { hiddenSection: "hiddenSection", isLargeScreen: "isLargeScreen", inputHandlers: "inputHandlers", checked: "checked", checkboxConfig: "checkboxConfig", disabled: "disabled", buttonConfig: "buttonConfig", configEyeToggle: "configEyeToggle", accordionItem: "accordionItem", toggleEditIcon: "toggleEditIcon", showSection: "showSection", borderColor: "borderColor", dataTestId: "dataTestId", showPopOutPanel: "showPopOutPanel", popOutMessage: "popOutMessage", popOutButtonLabel: "popOutButtonLabel", popOutButtonIcon: "popOutButtonIcon", popOutButtonTooltip: "popOutButtonTooltip", popOutButtonTooltipPosition: "popOutButtonTooltipPosition" }, outputs: { focusField: "focusField", blurField: "blurField", enterKeyPressed: "enterKeyPressed", checkedCheckBoxChange: "checkedCheckBoxChange", buttonClicked: "buttonClicked", showHideToggleSection: "showHideToggleSection", sectionToggled: "sectionToggled", popOutButtonClick: "popOutButtonClick" }, viewQueries: [{ propertyName: "textInputSection", first: true, predicate: ["textInputSection"], descendants: true }], ngImport: i0, template: "<cdk-accordion class=\"example-accordion\">\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n\n <div class=\"example-accordion-item-header\" [ngStyle]=\"{ 'border-color': borderColor }\">\n <div class=\"left_side_header\" *ngIf=\"!hiddenSection?.headerSectionHidden; else hiddenHeaderLayout\">\n <div [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\">\n <button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center \"\n [attr.aria-expanded]=\"accordionItem.expanded\">\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 </div>\n\n <div class=\"edit-input-group\" [style.max-width.px]=\"maxContainerWidth\">\n <div class=\"content_width\" data-test-id=\"edu-section-title-input\">\n <div class=\"content_width\" data-test-id=\"edu-section-title-input\" *ngIf=\"!inputHandlers.headersLoading\">\n <input #textInputSection type=\"text\" [ngClass]=\"{\n 'focusout-input-text': !inputHandlers?.isFocused,\n 'onfocus-input-text': inputHandlers?.isFocused\n }\" [(ngModel)]=\"inputHandlers.shownTitle\" [attr.aria-label]=\"inputHandlers.shownTitle\"\n (focus)=\"focusField.emit('educationHeader')\" (focusout)=\"blurField.emit()\"\n (keypress)=\"enterKeyPressed.emit($event)\" (input)=\"adjustInputWidth($event)\"\n [style.width.px]=\"inputWidth\" [style.max-width.%]=\"100\"\n [disabled]=\"inputHandlers?.isDisabled?.() ?? false\" />\n </div>\n </div>\n <span *ngIf=\"!inputHandlers.headersLoading\" class=\"align-center\">\n <span class=\"material-symbols-outlined\" [attr.alt]=\"inputHandlers.iconAltText || 'edit-icon'\"\n (click)=\"toggleEditIcon?.('educationHeader')\"\n [matTooltip]=\"inputHandlers.tooltipText || 'This header can be edited'\"\n [matTooltipPosition]=\"inputHandlers.tooltipPosition || 'above'\"\n *ngIf=\"inputHandlers.getFieldNotHidden('')\">\n edit\n </span>\n </span>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Right side header (shows when section is NOT hidden) -->\n <div class=\"right_side_header\" *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngIf=\"isLargeScreen\">\n <al-button [label]=\"popOutButtonLabel || 'Run Deep Extraction'\" [leftIcon]=\"popOutButtonIcon\"\n [rightIcon]=\"'arrow_forward'\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'header'\"\n [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'header-run-deep-extraction'\"\n [title]=\"popOutButtonLabel || 'Run Deep Extraction'\" [matTooltip]=\"popOutButtonTooltip\"\n [matTooltipPosition]=\"popOutButtonTooltipPosition\">\n </al-button>\n <ng-container class=\"button-margin\"\n *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </ng-container>\n\n <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n <div class=\"menu-trigger\" (mouseenter)=\"showMenu()\" (mouseleave)=\"startHideTimeout()\">\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\" (mouseenter)=\"showMenu()\"\n (mouseleave)=\"startHideTimeout()\">\n <div class=\"fit-panel\">\n <al-button [label]=\"popOutButtonLabel || 'Run Deep Extraction'\" [leftIcon]=\"popOutButtonIcon\"\n [rightIcon]=\"'arrow_forward'\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'header'\"\n [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'header-run-deep-extraction'\"\n [title]=\"popOutButtonLabel || ' Deep Extraction'\" [matTooltip]=\"popOutButtonTooltip\"\n [matTooltipPosition]=\"popOutButtonTooltipPosition\">\n </al-button>\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Eye icon for hiding section -->\n <ng-container *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: false, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"checkboxConfig?.sectionItems?.length\" class=\"mat-checkbox-margin\">\n <mat-checkbox class=\"example-margin\" [matTooltip]=\"checkboxConfig?.tooltipText || 'Select All'\"\n [matTooltipPosition]=\"checkboxConfig.tooltipPosition|| 'above'\" [(ngModel)]=\"checked\"\n (ngModelChange)=\"checkedCheckBoxChange.emit($event)\"\n [disabled]=\"disabled || checkboxConfig?.disabled ?? false\" data-test-id=\"edu-section-select-all-checkbox\">\n </mat-checkbox>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Hidden header layout (shows when section IS hidden) -->\n <ng-template #hiddenHeaderLayout>\n <div class=\"hide-header\">\n <span class=\"header-text-turncate\">{{ inputHandlers?.shownTitle }}</span>\n <div class=\"hidden-write\">Section hidden</div>\n\n <!-- \u2705 FIXED: Eye icon for showing section -->\n <ng-container *ngIf=\"hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"!eyeConfig['onClick']\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n </div>\n\n <!-- Pop-out Panel -->\n <div *ngIf=\"showPopOut\" class=\"pop-out-panel\">\n <div class=\"pop-out-content\">\n <al-button [label]=\"popOutButtonLabel || 'Run Deep Extraction'\" [leftIcon]=\"popOutButtonIcon\"\n [rightIcon]=\"'arrow_forward'\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'xs'\"\n [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'pop-out-run-deep-extraction'\"\n [title]=\"popOutButtonLabel || 'Run Deep Extraction'\">\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\n <!-- \u2705 FIXED: Accordion body (only shows when expanded AND not hidden) -->\n <div *ngIf=\"accordionItem.expanded && !hiddenSection?.headerSectionHidden\" class=\"example-accordion-item-body\"\n role=\"region\">\n Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Perferendis excepturi incidunt ipsum\n deleniti labore, tempore non nam doloribus blanditiis veritatis illo autem iure aliquid ullam\n rem tenetur deserunt velit culpa?\n </div>\n\n </cdk-accordion-item>\n</cdk-accordion>\n\n<!-- Header Buttons Template -->\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n <ng-container *ngFor=\"let btn of buttonConfig\">\n <al-button *ngIf=\"!btn.hidden && (!btn.displayCondition || btn.displayCondition())\" [category]=\"btn.category\"\n [buttonType]=\"btn.buttonType\" [label]=\"btn.label\" [leftIcon]=\"btn.leftIcon\" [rightIcon]=\"btn.rightIcon\"\n [state]=\"btn.state\" [color]=\"btn.color\" [size]=\"btn.size\" [outlined]=\"btn.outlined\"\n [dropdownOptions]=\"btn.buttonType === 'dropdown' ? btn.dropdownOptions : null\"\n (optionSelect)=\"onDropdownSelect(btn, $event)\" (click)=\"onButtonClick(btn)\" [attr.alt]=\"btn.alt\"\n [attr.data-test-id]=\"btn.testId\" [matTooltip]=\"btn.tooltipText\"\n [matTooltipPosition]=\"btn.tooltipPosition || 'above'\">\n </al-button>\n </ng-container>\n</ng-template>\n\n<!-- \u2705 FIXED: Eye Icon Template with proper click handler -->\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n let-configEyeToggle=\"configEyeToggle\">\n <div *ngIf=\"configEyeToggle\" class=\"mat-checkbox-margin align-center\"\n [attr.data-test-id]=\"isHidden ? 'edu-section-show-eye-div' : 'edu-section-hide-eye-div'\">\n <span class=\"material-symbols-outlined delete-multiple mat-fab.mat-accent\"\n [matTooltip]=\"configEyeToggle.tooltips[isHidden ? 'collapse' : 'expand']\"\n [matTooltipPosition]=\"configEyeToggle.tooltips.position\"\n [attr.aria-label]=\"configEyeToggle.ariaLabels[isHidden ? 'collapsed' : 'expanded']\"\n (click)=\"showHideToggleSection.emit({ isHidden: isHidden, accordionItem: accordionItem, config: configEyeToggle })\"\n [attr.data-test-id]=\"isHidden ? 'edu-section-show-eye-icon' : 'edu-section-show-hide-eye-icon'\">\n {{ isHidden ? 'visibility' : 'visibility_off' }}\n </span>\n </div>\n</ng-template>", 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,.example-accordion-item{display:block}.example-accordion-item+.example-accordion-item{border-top:none}.example-accordion-item-header{display:flex;justify-content:space-between;align-items:center;background:#ecedf1;padding:8px 24px;gap:8px;border-bottom:2px solid #37c1ce;border-radius:8px;box-sizing:border-box}.left_side_header button{padding:0!important}.example-accordion-item-description{font-size:.85em;color:#999}.example-accordion-item-body{padding:16px}.example-accordion-item-header:hover{cursor:pointer;background-color:#eee}.icon-button{background:none;border:none;padding:0;cursor:pointer}.toggle-icon,.edit-icon{width:20px;height:20px}.input-header{display:flex;align-items:center;cursor:pointer}.onfocus-input-text{height:30px;padding-left:4px;background:#f4f8fc;border:none;border-radius:5px;font-size:16px;text-overflow:ellipsis;overflow:hidden;font-weight:400;font-family:Roboto,sans-serif;text-align:left}.focusout-input-text{color:#383b4a;background:transparent;display:flex;border:none;font-size:16px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Roboto,sans-serif;text-align:left}.onfocus-input-text,.focusout-input-text{min-width:100px;max-width:100%;padding:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}.content_width{flex:1}input:focus{outline:none;border:none;box-shadow:none}.toggle-button{border:none}.mat-mdc-menu-content,.mat-mdc-menu-panel{background-color:#fff!important}.mat-mdc-menu-item{min-height:36px!important;color:#54595e!important;font-size:14px!important}.mat-mdc-menu-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;outline:0;border-radius:var(--mat-menu-container-shape, var(--mat-app-corner-extra-small));background-color:#fff}::ng-deep .mdc-checkbox .mdc-checkbox__native-control{width:20px!important;height:20px!important}::ng-deep .mdc-checkbox{padding:0!important}::ng-deep .mdc-checkbox__background{top:0!important;left:0!important}::ng-deep .mat-mdc-checkbox .mat-internal-form-field{color:#717793!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}.left_side_header{display:flex;align-items:center;gap:16px;width:100%;padding-right:20px;min-width:0;overflow:hidden}.edit-input-group{display:inline-flex;align-items:center;gap:4px;min-width:fit-content;max-width:100%;overflow:visible;border-radius:4px;transition:background-color .2s ease;padding:0 8px}.edit-input-group:hover{background-color:#d1d3db}.edit-input-group .content_width{flex:1;min-width:0;max-width:calc(100% - 32px);overflow:hidden}.edit-input-group .material-symbols-outlined{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}.edit-input-group:hover .material-symbols-outlined{opacity:1;visibility:visible}.right_side_header{display:flex;align-items:center;gap:8px}.mat-checkbox-margin{margin-left:8px}.button-wrapper{display:flex;align-items:center;gap:8px}.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%;left:50%;transform:translate(-50%);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}.hide-header{display:flex;justify-content:space-between;width:100%;opacity:.7;background-color:#ecedf1;line-height:28px}.icon-wrapper{visibility:visible}.header-text-turncate{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;color:#a2a6b8;font-family:Roboto,sans-serif}.hidden-write{color:#a2a6b8;position:absolute;left:45%;font-weight:400;font-family:Roboto,sans-serif}.example-accordion-item-body{font-size:15px;font-weight:300;line-height:24px;color:#4b4f62;font-family:Roboto,sans-serif}.align-center{display:flex;align-items:center}.material-icons-outlined{color:#717793}.material-symbols-outlined{height:20px;width:20px;color:#717793;font-size:20px;cursor:pointer}.mat-checkbox .mat-checkbox-frame{border:2px solid var(--Greys-600, #717793)!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border:2px solid var(--Greys-600, #717793)!important}::ng-deep .mdc-checkbox .mdc-checkbox__native-control:focus:checked+.mdc-checkbox__ripple{background-color:#ecedf1!important;opacity:1!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:focus:focus:checked~.mdc-checkbox__background,::ng-deep .mdc-checkbox__native-control:focus:focus:indeterminate~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}.cdk-overlay-container .mat-mdc-tooltip,.cdk-overlay-container .mat-mdc-tooltip-panel,.mat-mdc-tooltip,.mat-mdc-tooltip-panel,.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface,.mat-mdc-tooltip .mdc-tooltip__surface{background-color:#4b4f62!important;color:#fff!important;font-size:13px!important;border-radius:4px!important;box-shadow:0 2px 8px #00000026!important;opacity:1!important}.cdk-overlay-container .mat-mdc-tooltip,.cdk-overlay-container .mat-mdc-tooltip-panel,.mat-mdc-tooltip,.mat-mdc-tooltip-panel,.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface,.mat-mdc-tooltip .mdc-tooltip__surface{background-color:#4b4f62!important;color:#fff!important;font-size:13px!important;border-radius:4px!important;box-shadow:0 2px 8px #00000026!important;opacity:1!important;transition:opacity .15s ease-in-out!important;transform:none!important}.cdk-overlay-container .mat-mdc-tooltip-panel{animation:none!important;transition:opacity .15s ease-in-out!important}.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface .mdc-tooltip__content,.mat-mdc-tooltip .mdc-tooltip__surface .mdc-tooltip__content{color:#fff!important;font-size:13px!important;font-weight:400!important;line-height:1.4!important;padding:8px 12px!important}.left_side_header input:focus,.left_side_header input{line-height:28px!important}.pop-out-panel{background-color:#717793;border-radius:12px;padding:12px 16px;position:relative;box-sizing:border-box;margin:8px auto;width:calc(100% - 120px)}.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}\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: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: MatCheckboxModule }, { kind: "component", type: i4$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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i6$1.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { kind: "directive", type: i6$1.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "color", "category", "outline", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "dropdownItems", "dropdownOptions", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }] }); }
|
|
1293
|
+
onTitleClick() {
|
|
1294
|
+
if (!this.isTitleEditing) {
|
|
1295
|
+
this.isTitleEditing = true;
|
|
1296
|
+
this.editedTitle = this.title;
|
|
1297
|
+
// Focus the input after view update
|
|
1298
|
+
setTimeout(() => {
|
|
1299
|
+
this.titleInput?.nativeElement?.focus();
|
|
1300
|
+
this.titleInput?.nativeElement?.select();
|
|
1301
|
+
}, 0);
|
|
1302
|
+
}
|
|
1303
|
+
}
|
|
1304
|
+
onTitleFocus() {
|
|
1305
|
+
this.isInputFocused = true;
|
|
1306
|
+
}
|
|
1307
|
+
onTitleBlur() {
|
|
1308
|
+
this.isInputFocused = false;
|
|
1309
|
+
this.saveTitle();
|
|
1310
|
+
}
|
|
1311
|
+
onTitleKeyPress(event) {
|
|
1312
|
+
if (event.key === 'Enter') {
|
|
1313
|
+
event.preventDefault();
|
|
1314
|
+
this.saveTitle();
|
|
1315
|
+
}
|
|
1316
|
+
else if (event.key === 'Escape') {
|
|
1317
|
+
this.cancelTitleEdit();
|
|
1318
|
+
}
|
|
1319
|
+
}
|
|
1320
|
+
saveTitle() {
|
|
1321
|
+
if (this.isTitleEditing) {
|
|
1322
|
+
this.title = this.editedTitle;
|
|
1323
|
+
this.titleChange.emit(this.title);
|
|
1324
|
+
this.isTitleEditing = false;
|
|
1325
|
+
}
|
|
1326
|
+
}
|
|
1327
|
+
cancelTitleEdit() {
|
|
1328
|
+
this.editedTitle = this.title;
|
|
1329
|
+
this.isTitleEditing = false;
|
|
1330
|
+
}
|
|
1331
|
+
toggleMenu() {
|
|
1332
|
+
this.isMenuVisible = !this.isMenuVisible;
|
|
1333
|
+
}
|
|
1334
|
+
handleClickOutside(event) {
|
|
1335
|
+
const target = event.target;
|
|
1336
|
+
if (!target.closest('.hover-menu-container') && !target.closest('.slide-out-panel')) {
|
|
1337
|
+
this.isMenuVisible = false;
|
|
1338
|
+
}
|
|
1339
|
+
}
|
|
1340
|
+
ngOnInit() {
|
|
1341
|
+
// Initialize component
|
|
1342
|
+
this.editedTitle = this.title;
|
|
1343
|
+
// Check screen size and set up resize listener
|
|
1344
|
+
this.checkScreenSize();
|
|
1345
|
+
this.resizeListener = () => this.checkScreenSize();
|
|
1346
|
+
window.addEventListener('resize', this.resizeListener);
|
|
1347
|
+
// Add click outside listener to close menu on small screens
|
|
1348
|
+
this.clickOutsideListener = (event) => this.handleClickOutside(event);
|
|
1349
|
+
document.addEventListener('click', this.clickOutsideListener);
|
|
1350
|
+
}
|
|
1351
|
+
checkScreenSize() {
|
|
1352
|
+
this.isLargeScreen = window.innerWidth >= 1400;
|
|
1353
|
+
// Close menu when screen becomes large
|
|
1354
|
+
if (this.isLargeScreen) {
|
|
1355
|
+
this.isMenuVisible = false;
|
|
1356
|
+
}
|
|
1357
|
+
}
|
|
1358
|
+
ngOnChanges(changes) {
|
|
1359
|
+
// Reset dismissed flag when showPopOutPanel changes to true
|
|
1360
|
+
if (changes['showPopOutPanel'] && this.showPopOutPanel) {
|
|
1361
|
+
this.isPopOutDismissed = false;
|
|
1362
|
+
}
|
|
1363
|
+
// Close menu when isLargeScreen becomes true (large screen)
|
|
1364
|
+
if (changes['isLargeScreen'] && this.isLargeScreen) {
|
|
1365
|
+
this.isMenuVisible = false;
|
|
1366
|
+
}
|
|
1367
|
+
}
|
|
1368
|
+
dismissPopOut() {
|
|
1369
|
+
// Hide the panel by setting dismissed flag
|
|
1370
|
+
this.isPopOutDismissed = true;
|
|
1371
|
+
}
|
|
1372
|
+
get sanitizedMessage() {
|
|
1373
|
+
const message = this.popOutMessage || 'Takes a little longer, but deals with tricky resumes much better than fast extraction.';
|
|
1374
|
+
// Replace "Click here" with a styled link and add line break before it
|
|
1375
|
+
const processedMessage = message.replace(/Click here/g, '<br><a href="#" class="pop-out-link">Click here</a>');
|
|
1376
|
+
return this.sanitizer.bypassSecurityTrustHtml(processedMessage);
|
|
1377
|
+
}
|
|
1378
|
+
ngAfterViewInit() {
|
|
1379
|
+
// View initialization
|
|
1380
|
+
}
|
|
1381
|
+
ngOnDestroy() {
|
|
1382
|
+
// Cleanup
|
|
1383
|
+
if (this.resizeListener) {
|
|
1384
|
+
window.removeEventListener('resize', this.resizeListener);
|
|
1385
|
+
}
|
|
1386
|
+
if (this.clickOutsideListener) {
|
|
1387
|
+
document.removeEventListener('click', this.clickOutsideListener);
|
|
1388
|
+
}
|
|
1389
|
+
}
|
|
1390
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderComponent, deps: [{ token: i2.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1391
|
+
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\">\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'8px'\" [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]=\"'8px'\" [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 <span class=\"material-symbols-outlined edit-icon\" matTooltip=\"Edit title\" matTooltipPosition=\"above\"\n (click)=\"onTitleClick()\">\n edit\n </span>\n </div>\n </div>\n <div center>\n <ng-content select=\"[header-center-center]\"></ng-content>\n <!-- Pop-out button and header buttons for large screens -->\n <ng-container *ngIf=\"isLargeScreen\">\n <al-button [labelText]=\"popOutButtonLabel\" [leftIcon]=\"popOutButtonIcon\" [buttonType]=\"'icon-label'\"\n [category]=\"'gradient'\" [size]=\"'header'\" [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\"\n [dataTestId]=\"'header-run-deep-extraction'\" [title]=\"popOutButtonLabel\"\n [matTooltip]=\"popOutButtonTooltip\" [matTooltipPosition]=\"popOutButtonTooltipPosition\">\n </al-button>\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 <!-- More Options button (3-dots) is only visible when isLargeScreen is false -->\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 <al-button [labelText]=\"popOutButtonLabel\" [leftIcon]=\"popOutButtonIcon\"\n [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'header'\" [iconOnly]=\"false\"\n (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'header-run-deep-extraction'\"\n [title]=\"popOutButtonLabel\" [matTooltip]=\"popOutButtonTooltip\"\n [matTooltipPosition]=\"popOutButtonTooltipPosition\">\n </al-button>\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 <ng-container *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: false, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\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 </div>\n <div class=\"example-accordion-item-body\" *ngIf=\"accordionItem.expanded\">\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 <al-responsive-columns [stackAt]=\"0\" [gap]=\"'8px'\" [padding]=\"'8px 12px'\">\n <div left>\n <ng-content select=\"[body-left]\"></ng-content>\n </div>\n <div center>\n <ng-content select=\"[body-center]\"></ng-content>\n </div>\n <div right>\n <ng-content select=\"[body-right]\"></ng-content>\n </div>\n </al-responsive-columns>\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.hidden && (!btn.displayCondition || btn.displayCondition())\" [category]=\"btn.category\"\n [buttonType]=\"btn.buttonType\" [labelText]=\"btn.label\" [leftIcon]=\"btn.leftIcon\" [rightIcon]=\"btn.rightIcon\"\n [state]=\"btn.state\" [size]=\"btn.size\" [outlined]=\"btn.outlined\" [iconOnly]=\"btn.iconOnly\"\n [dropdownOptions]=\"btn.buttonType === 'dropdown' ? btn.dropdownOptions : null\"\n (optionSelect)=\"onDropdownSelect(btn, $event)\" (onClick)=\"onButtonClick(btn)\" [attr.alt]=\"btn.alt\"\n [dataTestId]=\"btn.testId\" [matTooltip]=\"btn.tooltipText\" [matTooltipPosition]=\"btn.tooltipPosition || 'above'\">\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 *ngIf=\"configEyeToggle\" class=\"mat-checkbox-margin align-center\"\n [attr.data-test-id]=\"isHidden ? 'section-show-eye-div' : 'section-hide-eye-div'\">\n <span class=\"material-symbols-outlined delete-multiple mat-fab.mat-accent\"\n [matTooltip]=\"configEyeToggle.tooltips[isHidden ? 'collapse' : 'expand']\"\n [matTooltipPosition]=\"configEyeToggle.tooltips.position\"\n [attr.aria-label]=\"configEyeToggle.ariaLabels[isHidden ? 'collapsed' : 'expanded']\"\n (click)=\"showHideToggleSection.emit({ isHidden: isHidden, accordionItem: accordionItem, config: configEyeToggle })\"\n [attr.data-test-id]=\"isHidden ? 'section-show-eye-icon' : 'section-hide-eye-icon'\">\n {{ isHidden ? 'visibility' : 'visibility_off' }}\n </span>\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) .material-symbols-outlined.edit-icon,.edit-input-group:focus-within .material-symbols-outlined.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;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 .material-symbols-outlined.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}.edit-input-group:hover .material-symbols-outlined.edit-icon{opacity:1;visibility:visible}\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: i3$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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$4.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", "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", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }] }); }
|
|
694
1392
|
}
|
|
695
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
|
1393
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderComponent, decorators: [{
|
|
696
1394
|
type: Component,
|
|
697
|
-
args: [{ selector: 'al-
|
|
1395
|
+
args: [{ selector: 'al-newresumeheader', standalone: true, imports: [
|
|
698
1396
|
CommonModule,
|
|
699
1397
|
FormsModule,
|
|
700
|
-
MatCheckboxModule,
|
|
701
|
-
MatTooltipModule,
|
|
702
|
-
MatMenuModule,
|
|
703
|
-
MatIconModule,
|
|
704
1398
|
CdkAccordionModule,
|
|
1399
|
+
MatIconModule,
|
|
1400
|
+
MatTooltipModule,
|
|
1401
|
+
GeneralContainerComponent,
|
|
1402
|
+
ResponsiveColumnsComponent,
|
|
1403
|
+
CheckboxModule,
|
|
705
1404
|
ButtonComponent
|
|
706
|
-
], template: "<cdk-accordion class=\"example-accordion\">\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n\n <div class=\"example-accordion-item-header\" [ngStyle]=\"{ 'border-color': borderColor }\">\n <div class=\"left_side_header\" *ngIf=\"!hiddenSection?.headerSectionHidden; else hiddenHeaderLayout\">\n <div [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\">\n <button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center \"\n [attr.aria-expanded]=\"accordionItem.expanded\">\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 </div>\n\n <div class=\"edit-input-group\" [style.max-width.px]=\"maxContainerWidth\">\n <div class=\"content_width\" data-test-id=\"edu-section-title-input\">\n <div class=\"content_width\" data-test-id=\"edu-section-title-input\" *ngIf=\"!inputHandlers.headersLoading\">\n <input #textInputSection type=\"text\" [ngClass]=\"{\n 'focusout-input-text': !inputHandlers?.isFocused,\n 'onfocus-input-text': inputHandlers?.isFocused\n }\" [(ngModel)]=\"inputHandlers.shownTitle\" [attr.aria-label]=\"inputHandlers.shownTitle\"\n (focus)=\"focusField.emit('educationHeader')\" (focusout)=\"blurField.emit()\"\n (keypress)=\"enterKeyPressed.emit($event)\" (input)=\"adjustInputWidth($event)\"\n [style.width.px]=\"inputWidth\" [style.max-width.%]=\"100\"\n [disabled]=\"inputHandlers?.isDisabled?.() ?? false\" />\n </div>\n </div>\n <span *ngIf=\"!inputHandlers.headersLoading\" class=\"align-center\">\n <span class=\"material-symbols-outlined\" [attr.alt]=\"inputHandlers.iconAltText || 'edit-icon'\"\n (click)=\"toggleEditIcon?.('educationHeader')\"\n [matTooltip]=\"inputHandlers.tooltipText || 'This header can be edited'\"\n [matTooltipPosition]=\"inputHandlers.tooltipPosition || 'above'\"\n *ngIf=\"inputHandlers.getFieldNotHidden('')\">\n edit\n </span>\n </span>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Right side header (shows when section is NOT hidden) -->\n <div class=\"right_side_header\" *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngIf=\"isLargeScreen\">\n <al-button [label]=\"popOutButtonLabel || 'Run Deep Extraction'\" [leftIcon]=\"popOutButtonIcon\"\n [rightIcon]=\"'arrow_forward'\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'header'\"\n [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'header-run-deep-extraction'\"\n [title]=\"popOutButtonLabel || 'Run Deep Extraction'\" [matTooltip]=\"popOutButtonTooltip\"\n [matTooltipPosition]=\"popOutButtonTooltipPosition\">\n </al-button>\n <ng-container class=\"button-margin\"\n *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </ng-container>\n\n <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n <div class=\"menu-trigger\" (mouseenter)=\"showMenu()\" (mouseleave)=\"startHideTimeout()\">\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\" (mouseenter)=\"showMenu()\"\n (mouseleave)=\"startHideTimeout()\">\n <div class=\"fit-panel\">\n <al-button [label]=\"popOutButtonLabel || 'Run Deep Extraction'\" [leftIcon]=\"popOutButtonIcon\"\n [rightIcon]=\"'arrow_forward'\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'header'\"\n [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'header-run-deep-extraction'\"\n [title]=\"popOutButtonLabel || ' Deep Extraction'\" [matTooltip]=\"popOutButtonTooltip\"\n [matTooltipPosition]=\"popOutButtonTooltipPosition\">\n </al-button>\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Eye icon for hiding section -->\n <ng-container *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: false, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"checkboxConfig?.sectionItems?.length\" class=\"mat-checkbox-margin\">\n <mat-checkbox class=\"example-margin\" [matTooltip]=\"checkboxConfig?.tooltipText || 'Select All'\"\n [matTooltipPosition]=\"checkboxConfig.tooltipPosition|| 'above'\" [(ngModel)]=\"checked\"\n (ngModelChange)=\"checkedCheckBoxChange.emit($event)\"\n [disabled]=\"disabled || checkboxConfig?.disabled ?? false\" data-test-id=\"edu-section-select-all-checkbox\">\n </mat-checkbox>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Hidden header layout (shows when section IS hidden) -->\n <ng-template #hiddenHeaderLayout>\n <div class=\"hide-header\">\n <span class=\"header-text-turncate\">{{ inputHandlers?.shownTitle }}</span>\n <div class=\"hidden-write\">Section hidden</div>\n\n <!-- \u2705 FIXED: Eye icon for showing section -->\n <ng-container *ngIf=\"hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"!eyeConfig['onClick']\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n </div>\n\n <!-- Pop-out Panel -->\n <div *ngIf=\"showPopOut\" class=\"pop-out-panel\">\n <div class=\"pop-out-content\">\n <al-button [label]=\"popOutButtonLabel || 'Run Deep Extraction'\" [leftIcon]=\"popOutButtonIcon\"\n [rightIcon]=\"'arrow_forward'\" [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'xs'\"\n [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'pop-out-run-deep-extraction'\"\n [title]=\"popOutButtonLabel || 'Run Deep Extraction'\">\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\n <!-- \u2705 FIXED: Accordion body (only shows when expanded AND not hidden) -->\n <div *ngIf=\"accordionItem.expanded && !hiddenSection?.headerSectionHidden\" class=\"example-accordion-item-body\"\n role=\"region\">\n Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Perferendis excepturi incidunt ipsum\n deleniti labore, tempore non nam doloribus blanditiis veritatis illo autem iure aliquid ullam\n rem tenetur deserunt velit culpa?\n </div>\n\n </cdk-accordion-item>\n</cdk-accordion>\n\n<!-- Header Buttons Template -->\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n <ng-container *ngFor=\"let btn of buttonConfig\">\n <al-button *ngIf=\"!btn.hidden && (!btn.displayCondition || btn.displayCondition())\" [category]=\"btn.category\"\n [buttonType]=\"btn.buttonType\" [label]=\"btn.label\" [leftIcon]=\"btn.leftIcon\" [rightIcon]=\"btn.rightIcon\"\n [state]=\"btn.state\" [color]=\"btn.color\" [size]=\"btn.size\" [outlined]=\"btn.outlined\"\n [dropdownOptions]=\"btn.buttonType === 'dropdown' ? btn.dropdownOptions : null\"\n (optionSelect)=\"onDropdownSelect(btn, $event)\" (click)=\"onButtonClick(btn)\" [attr.alt]=\"btn.alt\"\n [attr.data-test-id]=\"btn.testId\" [matTooltip]=\"btn.tooltipText\"\n [matTooltipPosition]=\"btn.tooltipPosition || 'above'\">\n </al-button>\n </ng-container>\n</ng-template>\n\n<!-- \u2705 FIXED: Eye Icon Template with proper click handler -->\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n let-configEyeToggle=\"configEyeToggle\">\n <div *ngIf=\"configEyeToggle\" class=\"mat-checkbox-margin align-center\"\n [attr.data-test-id]=\"isHidden ? 'edu-section-show-eye-div' : 'edu-section-hide-eye-div'\">\n <span class=\"material-symbols-outlined delete-multiple mat-fab.mat-accent\"\n [matTooltip]=\"configEyeToggle.tooltips[isHidden ? 'collapse' : 'expand']\"\n [matTooltipPosition]=\"configEyeToggle.tooltips.position\"\n [attr.aria-label]=\"configEyeToggle.ariaLabels[isHidden ? 'collapsed' : 'expanded']\"\n (click)=\"showHideToggleSection.emit({ isHidden: isHidden, accordionItem: accordionItem, config: configEyeToggle })\"\n [attr.data-test-id]=\"isHidden ? 'edu-section-show-eye-icon' : 'edu-section-show-hide-eye-icon'\">\n {{ isHidden ? 'visibility' : 'visibility_off' }}\n </span>\n </div>\n</ng-template>", 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,.example-accordion-item{display:block}.example-accordion-item+.example-accordion-item{border-top:none}.example-accordion-item-header{display:flex;justify-content:space-between;align-items:center;background:#ecedf1;padding:8px 24px;gap:8px;border-bottom:2px solid #37c1ce;border-radius:8px;box-sizing:border-box}.left_side_header button{padding:0!important}.example-accordion-item-description{font-size:.85em;color:#999}.example-accordion-item-body{padding:16px}.example-accordion-item-header:hover{cursor:pointer;background-color:#eee}.icon-button{background:none;border:none;padding:0;cursor:pointer}.toggle-icon,.edit-icon{width:20px;height:20px}.input-header{display:flex;align-items:center;cursor:pointer}.onfocus-input-text{height:30px;padding-left:4px;background:#f4f8fc;border:none;border-radius:5px;font-size:16px;text-overflow:ellipsis;overflow:hidden;font-weight:400;font-family:Roboto,sans-serif;text-align:left}.focusout-input-text{color:#383b4a;background:transparent;display:flex;border:none;font-size:16px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Roboto,sans-serif;text-align:left}.onfocus-input-text,.focusout-input-text{min-width:100px;max-width:100%;padding:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}.content_width{flex:1}input:focus{outline:none;border:none;box-shadow:none}.toggle-button{border:none}.mat-mdc-menu-content,.mat-mdc-menu-panel{background-color:#fff!important}.mat-mdc-menu-item{min-height:36px!important;color:#54595e!important;font-size:14px!important}.mat-mdc-menu-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;outline:0;border-radius:var(--mat-menu-container-shape, var(--mat-app-corner-extra-small));background-color:#fff}::ng-deep .mdc-checkbox .mdc-checkbox__native-control{width:20px!important;height:20px!important}::ng-deep .mdc-checkbox{padding:0!important}::ng-deep .mdc-checkbox__background{top:0!important;left:0!important}::ng-deep .mat-mdc-checkbox .mat-internal-form-field{color:#717793!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}.left_side_header{display:flex;align-items:center;gap:16px;width:100%;padding-right:20px;min-width:0;overflow:hidden}.edit-input-group{display:inline-flex;align-items:center;gap:4px;min-width:fit-content;max-width:100%;overflow:visible;border-radius:4px;transition:background-color .2s ease;padding:0 8px}.edit-input-group:hover{background-color:#d1d3db}.edit-input-group .content_width{flex:1;min-width:0;max-width:calc(100% - 32px);overflow:hidden}.edit-input-group .material-symbols-outlined{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}.edit-input-group:hover .material-symbols-outlined{opacity:1;visibility:visible}.right_side_header{display:flex;align-items:center;gap:8px}.mat-checkbox-margin{margin-left:8px}.button-wrapper{display:flex;align-items:center;gap:8px}.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%;left:50%;transform:translate(-50%);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}.hide-header{display:flex;justify-content:space-between;width:100%;opacity:.7;background-color:#ecedf1;line-height:28px}.icon-wrapper{visibility:visible}.header-text-turncate{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;color:#a2a6b8;font-family:Roboto,sans-serif}.hidden-write{color:#a2a6b8;position:absolute;left:45%;font-weight:400;font-family:Roboto,sans-serif}.example-accordion-item-body{font-size:15px;font-weight:300;line-height:24px;color:#4b4f62;font-family:Roboto,sans-serif}.align-center{display:flex;align-items:center}.material-icons-outlined{color:#717793}.material-symbols-outlined{height:20px;width:20px;color:#717793;font-size:20px;cursor:pointer}.mat-checkbox .mat-checkbox-frame{border:2px solid var(--Greys-600, #717793)!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border:2px solid var(--Greys-600, #717793)!important}::ng-deep .mdc-checkbox .mdc-checkbox__native-control:focus:checked+.mdc-checkbox__ripple{background-color:#ecedf1!important;opacity:1!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:focus:focus:checked~.mdc-checkbox__background,::ng-deep .mdc-checkbox__native-control:focus:focus:indeterminate~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}.cdk-overlay-container .mat-mdc-tooltip,.cdk-overlay-container .mat-mdc-tooltip-panel,.mat-mdc-tooltip,.mat-mdc-tooltip-panel,.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface,.mat-mdc-tooltip .mdc-tooltip__surface{background-color:#4b4f62!important;color:#fff!important;font-size:13px!important;border-radius:4px!important;box-shadow:0 2px 8px #00000026!important;opacity:1!important}.cdk-overlay-container .mat-mdc-tooltip,.cdk-overlay-container .mat-mdc-tooltip-panel,.mat-mdc-tooltip,.mat-mdc-tooltip-panel,.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface,.mat-mdc-tooltip .mdc-tooltip__surface{background-color:#4b4f62!important;color:#fff!important;font-size:13px!important;border-radius:4px!important;box-shadow:0 2px 8px #00000026!important;opacity:1!important;transition:opacity .15s ease-in-out!important;transform:none!important}.cdk-overlay-container .mat-mdc-tooltip-panel{animation:none!important;transition:opacity .15s ease-in-out!important}.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface .mdc-tooltip__content,.mat-mdc-tooltip .mdc-tooltip__surface .mdc-tooltip__content{color:#fff!important;font-size:13px!important;font-weight:400!important;line-height:1.4!important;padding:8px 12px!important}.left_side_header input:focus,.left_side_header input{line-height:28px!important}.pop-out-panel{background-color:#717793;border-radius:12px;padding:12px 16px;position:relative;box-sizing:border-box;margin:8px auto;width:calc(100% - 120px)}.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}\n"] }]
|
|
707
|
-
}], ctorParameters: () => [{ type: i2.DomSanitizer }], propDecorators: {
|
|
708
|
-
type: Input
|
|
709
|
-
}], isLargeScreen: [{
|
|
1405
|
+
], 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\">\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'8px'\" [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]=\"'8px'\" [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 <span class=\"material-symbols-outlined edit-icon\" matTooltip=\"Edit title\" matTooltipPosition=\"above\"\n (click)=\"onTitleClick()\">\n edit\n </span>\n </div>\n </div>\n <div center>\n <ng-content select=\"[header-center-center]\"></ng-content>\n <!-- Pop-out button and header buttons for large screens -->\n <ng-container *ngIf=\"isLargeScreen\">\n <al-button [labelText]=\"popOutButtonLabel\" [leftIcon]=\"popOutButtonIcon\" [buttonType]=\"'icon-label'\"\n [category]=\"'gradient'\" [size]=\"'header'\" [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\"\n [dataTestId]=\"'header-run-deep-extraction'\" [title]=\"popOutButtonLabel\"\n [matTooltip]=\"popOutButtonTooltip\" [matTooltipPosition]=\"popOutButtonTooltipPosition\">\n </al-button>\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 <!-- More Options button (3-dots) is only visible when isLargeScreen is false -->\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 <al-button [labelText]=\"popOutButtonLabel\" [leftIcon]=\"popOutButtonIcon\"\n [buttonType]=\"'icon-label'\" [category]=\"'gradient'\" [size]=\"'header'\" [iconOnly]=\"false\"\n (onClick)=\"popOutButtonClick.emit()\" [dataTestId]=\"'header-run-deep-extraction'\"\n [title]=\"popOutButtonLabel\" [matTooltip]=\"popOutButtonTooltip\"\n [matTooltipPosition]=\"popOutButtonTooltipPosition\">\n </al-button>\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 <ng-container *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: false, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\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 </div>\n <div class=\"example-accordion-item-body\" *ngIf=\"accordionItem.expanded\">\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 <al-responsive-columns [stackAt]=\"0\" [gap]=\"'8px'\" [padding]=\"'8px 12px'\">\n <div left>\n <ng-content select=\"[body-left]\"></ng-content>\n </div>\n <div center>\n <ng-content select=\"[body-center]\"></ng-content>\n </div>\n <div right>\n <ng-content select=\"[body-right]\"></ng-content>\n </div>\n </al-responsive-columns>\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.hidden && (!btn.displayCondition || btn.displayCondition())\" [category]=\"btn.category\"\n [buttonType]=\"btn.buttonType\" [labelText]=\"btn.label\" [leftIcon]=\"btn.leftIcon\" [rightIcon]=\"btn.rightIcon\"\n [state]=\"btn.state\" [size]=\"btn.size\" [outlined]=\"btn.outlined\" [iconOnly]=\"btn.iconOnly\"\n [dropdownOptions]=\"btn.buttonType === 'dropdown' ? btn.dropdownOptions : null\"\n (optionSelect)=\"onDropdownSelect(btn, $event)\" (onClick)=\"onButtonClick(btn)\" [attr.alt]=\"btn.alt\"\n [dataTestId]=\"btn.testId\" [matTooltip]=\"btn.tooltipText\" [matTooltipPosition]=\"btn.tooltipPosition || 'above'\">\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 *ngIf=\"configEyeToggle\" class=\"mat-checkbox-margin align-center\"\n [attr.data-test-id]=\"isHidden ? 'section-show-eye-div' : 'section-hide-eye-div'\">\n <span class=\"material-symbols-outlined delete-multiple mat-fab.mat-accent\"\n [matTooltip]=\"configEyeToggle.tooltips[isHidden ? 'collapse' : 'expand']\"\n [matTooltipPosition]=\"configEyeToggle.tooltips.position\"\n [attr.aria-label]=\"configEyeToggle.ariaLabels[isHidden ? 'collapsed' : 'expanded']\"\n (click)=\"showHideToggleSection.emit({ isHidden: isHidden, accordionItem: accordionItem, config: configEyeToggle })\"\n [attr.data-test-id]=\"isHidden ? 'section-show-eye-icon' : 'section-hide-eye-icon'\">\n {{ isHidden ? 'visibility' : 'visibility_off' }}\n </span>\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) .material-symbols-outlined.edit-icon,.edit-input-group:focus-within .material-symbols-outlined.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;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 .material-symbols-outlined.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}.edit-input-group:hover .material-symbols-outlined.edit-icon{opacity:1;visibility:visible}\n"] }]
|
|
1406
|
+
}], ctorParameters: () => [{ type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { title: [{
|
|
710
1407
|
type: Input
|
|
711
|
-
}],
|
|
1408
|
+
}], showHeaderCheckbox: [{
|
|
712
1409
|
type: Input
|
|
713
|
-
}],
|
|
714
|
-
type: Output
|
|
715
|
-
}], blurField: [{
|
|
716
|
-
type: Output
|
|
717
|
-
}], enterKeyPressed: [{
|
|
718
|
-
type: Output
|
|
719
|
-
}], checked: [{
|
|
1410
|
+
}], headerCheckboxChecked: [{
|
|
720
1411
|
type: Input
|
|
721
|
-
}],
|
|
1412
|
+
}], configEyeToggle: [{
|
|
722
1413
|
type: Input
|
|
723
|
-
}],
|
|
724
|
-
type: Output
|
|
725
|
-
}], disabled: [{
|
|
1414
|
+
}], hiddenSection: [{
|
|
726
1415
|
type: Input
|
|
727
1416
|
}], buttonConfig: [{
|
|
728
1417
|
type: Input
|
|
729
|
-
}],
|
|
730
|
-
type: Output
|
|
731
|
-
}], configEyeToggle: [{
|
|
732
|
-
type: Input
|
|
733
|
-
}], accordionItem: [{
|
|
1418
|
+
}], isLargeScreen: [{
|
|
734
1419
|
type: Input
|
|
735
|
-
}],
|
|
736
|
-
type: Output
|
|
737
|
-
}], toggleEditIcon: [{
|
|
1420
|
+
}], popOutButtonLabel: [{
|
|
738
1421
|
type: Input
|
|
739
|
-
}],
|
|
1422
|
+
}], popOutButtonIcon: [{
|
|
740
1423
|
type: Input
|
|
741
|
-
}],
|
|
742
|
-
type: Output
|
|
743
|
-
}], borderColor: [{
|
|
1424
|
+
}], popOutButtonTooltip: [{
|
|
744
1425
|
type: Input
|
|
745
|
-
}],
|
|
1426
|
+
}], popOutButtonTooltipPosition: [{
|
|
746
1427
|
type: Input
|
|
747
1428
|
}], showPopOutPanel: [{
|
|
748
1429
|
type: Input
|
|
749
1430
|
}], popOutMessage: [{
|
|
750
1431
|
type: Input
|
|
751
|
-
}],
|
|
752
|
-
type: Input
|
|
753
|
-
}], popOutButtonIcon: [{
|
|
754
|
-
type: Input
|
|
755
|
-
}], popOutButtonTooltip: [{
|
|
756
|
-
type: Input
|
|
757
|
-
}], popOutButtonTooltipPosition: [{
|
|
1432
|
+
}], dataTestId: [{
|
|
758
1433
|
type: Input
|
|
1434
|
+
}], titleChange: [{
|
|
1435
|
+
type: Output
|
|
1436
|
+
}], sectionToggled: [{
|
|
1437
|
+
type: Output
|
|
1438
|
+
}], headerCheckboxChange: [{
|
|
1439
|
+
type: Output
|
|
1440
|
+
}], showHideToggleSection: [{
|
|
1441
|
+
type: Output
|
|
1442
|
+
}], buttonClicked: [{
|
|
1443
|
+
type: Output
|
|
759
1444
|
}], popOutButtonClick: [{
|
|
760
1445
|
type: Output
|
|
761
|
-
}],
|
|
1446
|
+
}], titleInput: [{
|
|
762
1447
|
type: ViewChild,
|
|
763
|
-
args: ['
|
|
1448
|
+
args: ['titleInput']
|
|
764
1449
|
}] } });
|
|
765
1450
|
|
|
766
|
-
class
|
|
767
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
|
768
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type:
|
|
769
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
|
1451
|
+
class NewResumeHeaderModule {
|
|
1452
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1453
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderModule, imports: [CommonModule, NewResumeHeaderComponent], exports: [NewResumeHeaderComponent] }); }
|
|
1454
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderModule, imports: [CommonModule, NewResumeHeaderComponent] }); }
|
|
770
1455
|
}
|
|
771
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type:
|
|
1456
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderModule, decorators: [{
|
|
772
1457
|
type: NgModule,
|
|
773
1458
|
args: [{
|
|
774
|
-
imports: [CommonModule,
|
|
775
|
-
exports: [
|
|
1459
|
+
imports: [CommonModule, NewResumeHeaderComponent],
|
|
1460
|
+
exports: [NewResumeHeaderComponent],
|
|
776
1461
|
}]
|
|
777
1462
|
}] });
|
|
778
1463
|
|
|
@@ -988,7 +1673,7 @@ class FieldPlaceholderComponent {
|
|
|
988
1673
|
return !!icon && !icon.includes('/') && !icon.includes('.');
|
|
989
1674
|
}
|
|
990
1675
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
991
|
-
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}.field-row-padded{padding-top:8px;padding-bottom:8px}.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$3.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"] }] }); }
|
|
1676
|
+
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}.field-row-padded{padding-top:8px;padding-bottom:8px}.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$4.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"] }] }); }
|
|
992
1677
|
}
|
|
993
1678
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldPlaceholderComponent, decorators: [{
|
|
994
1679
|
type: Component,
|
|
@@ -1103,127 +1788,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1103
1788
|
}]
|
|
1104
1789
|
}] });
|
|
1105
1790
|
|
|
1106
|
-
// Wrapper for Angular Material mat-checkbox
|
|
1107
|
-
class CheckboxComponent {
|
|
1108
|
-
constructor() {
|
|
1109
|
-
this.checked = false;
|
|
1110
|
-
this.disabled = false;
|
|
1111
|
-
this.labelPosition = 'after';
|
|
1112
|
-
this.name = '';
|
|
1113
|
-
this.required = false;
|
|
1114
|
-
this.color = 'primary';
|
|
1115
|
-
this.labelText = '';
|
|
1116
|
-
this.helperTextLabel = '';
|
|
1117
|
-
this.showLabels = true;
|
|
1118
|
-
this.dataTestId = "";
|
|
1119
|
-
this.tooltip = '';
|
|
1120
|
-
this.tooltipPosition = 'right';
|
|
1121
|
-
this.change = new EventEmitter();
|
|
1122
|
-
this.indeterminateChange = new EventEmitter();
|
|
1123
|
-
this.focus = new EventEmitter();
|
|
1124
|
-
this.blur = new EventEmitter();
|
|
1125
|
-
this.onChange = (_) => { };
|
|
1126
|
-
this.onTouched = () => { };
|
|
1127
|
-
}
|
|
1128
|
-
get hasLabelsClass() {
|
|
1129
|
-
return !!this.labelText && this.labelText.trim().length > 0;
|
|
1130
|
-
}
|
|
1131
|
-
writeValue(value) {
|
|
1132
|
-
this.checked = !!value;
|
|
1133
|
-
}
|
|
1134
|
-
registerOnChange(fn) {
|
|
1135
|
-
this.onChange = fn;
|
|
1136
|
-
}
|
|
1137
|
-
registerOnTouched(fn) {
|
|
1138
|
-
this.onTouched = fn;
|
|
1139
|
-
}
|
|
1140
|
-
setDisabledState(isDisabled) {
|
|
1141
|
-
this.disabled = isDisabled;
|
|
1142
|
-
}
|
|
1143
|
-
handleChange(event) {
|
|
1144
|
-
this.checked = event.checked;
|
|
1145
|
-
this.onChange(this.checked);
|
|
1146
|
-
this.change.emit(this.checked);
|
|
1147
|
-
}
|
|
1148
|
-
handleFocus(event) {
|
|
1149
|
-
this.focus.emit(event);
|
|
1150
|
-
}
|
|
1151
|
-
handleBlur(event) {
|
|
1152
|
-
this.onTouched();
|
|
1153
|
-
this.blur.emit(event);
|
|
1154
|
-
}
|
|
1155
|
-
handleIndeterminateChange(value) {
|
|
1156
|
-
this.indeterminateChange.emit(value);
|
|
1157
|
-
}
|
|
1158
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1159
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxComponent, selector: "al-checkbox", inputs: { checked: "checked", disabled: "disabled", labelPosition: "labelPosition", name: "name", required: "required", value: "value", color: "color", labelText: "labelText", helperTextLabel: "helperTextLabel", showLabels: "showLabels", dataTestId: "dataTestId", tooltip: "tooltip", tooltipPosition: "tooltipPosition" }, outputs: { change: "change", indeterminateChange: "indeterminateChange", focus: "focus", blur: "blur" }, host: { properties: { "class.has-labels": "this.hasLabelsClass" } }, providers: [{
|
|
1160
|
-
provide: NG_VALUE_ACCESSOR,
|
|
1161
|
-
useExisting: forwardRef(() => CheckboxComponent),
|
|
1162
|
-
multi: true
|
|
1163
|
-
}
|
|
1164
|
-
], 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 *ngIf=\"showLabels\" style=\"display: flex; flex-direction: column;\">\n <div *ngIf=\"labelText\" class=\"checkbox-label-main\">\n {{ labelText }}\n </div>\n <div *ngIf=\"helperTextLabel\" class=\"checkbox-label-helper\">\n {{ helperTextLabel }}\n </div>\n </div>\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 .mdc-checkbox__background{background-color:#c3c5d1!important;border-color:#c3c5d1!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#c3c5d1!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:#5473e81f!important}::ng-deep .mat-mdc-checkbox:hover .mdc-checkbox__ripple{background-color:#5473e83d!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border-radius:4px!important}::ng-deep .mat-mdc-checkbox .mdc-form-field>label{color:#4b4f62!important}.checkbox-label-main{color:#4b4f62!important}.checkbox-label-helper{color:#a2a6b8!important;margin-top:0!important}::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}::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: i4$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$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
1165
|
-
}
|
|
1166
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1167
|
-
type: Component,
|
|
1168
|
-
args: [{ selector: 'al-checkbox', providers: [{
|
|
1169
|
-
provide: NG_VALUE_ACCESSOR,
|
|
1170
|
-
useExisting: forwardRef(() => CheckboxComponent),
|
|
1171
|
-
multi: true
|
|
1172
|
-
}
|
|
1173
|
-
], 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 *ngIf=\"showLabels\" style=\"display: flex; flex-direction: column;\">\n <div *ngIf=\"labelText\" class=\"checkbox-label-main\">\n {{ labelText }}\n </div>\n <div *ngIf=\"helperTextLabel\" class=\"checkbox-label-helper\">\n {{ helperTextLabel }}\n </div>\n </div>\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 .mdc-checkbox__background{background-color:#c3c5d1!important;border-color:#c3c5d1!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#c3c5d1!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:#5473e81f!important}::ng-deep .mat-mdc-checkbox:hover .mdc-checkbox__ripple{background-color:#5473e83d!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border-radius:4px!important}::ng-deep .mat-mdc-checkbox .mdc-form-field>label{color:#4b4f62!important}.checkbox-label-main{color:#4b4f62!important}.checkbox-label-helper{color:#a2a6b8!important;margin-top:0!important}::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}::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"] }]
|
|
1174
|
-
}], propDecorators: { checked: [{
|
|
1175
|
-
type: Input
|
|
1176
|
-
}], disabled: [{
|
|
1177
|
-
type: Input
|
|
1178
|
-
}], labelPosition: [{
|
|
1179
|
-
type: Input
|
|
1180
|
-
}], name: [{
|
|
1181
|
-
type: Input
|
|
1182
|
-
}], required: [{
|
|
1183
|
-
type: Input
|
|
1184
|
-
}], value: [{
|
|
1185
|
-
type: Input
|
|
1186
|
-
}], color: [{
|
|
1187
|
-
type: Input
|
|
1188
|
-
}], labelText: [{
|
|
1189
|
-
type: Input
|
|
1190
|
-
}], helperTextLabel: [{
|
|
1191
|
-
type: Input
|
|
1192
|
-
}], showLabels: [{
|
|
1193
|
-
type: Input
|
|
1194
|
-
}], hasLabelsClass: [{
|
|
1195
|
-
type: HostBinding,
|
|
1196
|
-
args: ['class.has-labels']
|
|
1197
|
-
}], dataTestId: [{
|
|
1198
|
-
type: Input
|
|
1199
|
-
}], tooltip: [{
|
|
1200
|
-
type: Input
|
|
1201
|
-
}], tooltipPosition: [{
|
|
1202
|
-
type: Input
|
|
1203
|
-
}], change: [{
|
|
1204
|
-
type: Output
|
|
1205
|
-
}], indeterminateChange: [{
|
|
1206
|
-
type: Output
|
|
1207
|
-
}], focus: [{
|
|
1208
|
-
type: Output
|
|
1209
|
-
}], blur: [{
|
|
1210
|
-
type: Output
|
|
1211
|
-
}] } });
|
|
1212
|
-
|
|
1213
|
-
class CheckboxModule {
|
|
1214
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1215
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, declarations: [CheckboxComponent], imports: [CommonModule, MatCheckboxModule, MatTooltipModule], exports: [CheckboxComponent] }); }
|
|
1216
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, imports: [CommonModule, MatCheckboxModule, MatTooltipModule] }); }
|
|
1217
|
-
}
|
|
1218
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, decorators: [{
|
|
1219
|
-
type: NgModule,
|
|
1220
|
-
args: [{
|
|
1221
|
-
declarations: [CheckboxComponent],
|
|
1222
|
-
imports: [CommonModule, MatCheckboxModule, MatTooltipModule],
|
|
1223
|
-
exports: [CheckboxComponent]
|
|
1224
|
-
}]
|
|
1225
|
-
}] });
|
|
1226
|
-
|
|
1227
1791
|
// Wrapper for Angular Material mat-radio-button
|
|
1228
1792
|
class RadioComponent {
|
|
1229
1793
|
constructor() {
|
|
@@ -1234,14 +1798,17 @@ class RadioComponent {
|
|
|
1234
1798
|
this.labelPosition = 'after';
|
|
1235
1799
|
this.required = false;
|
|
1236
1800
|
this.labelText = '';
|
|
1237
|
-
this.
|
|
1801
|
+
this.helperText = '';
|
|
1238
1802
|
this.showLabels = true;
|
|
1803
|
+
this.showHelperIcon = false;
|
|
1804
|
+
this.helperIconTooltip = '';
|
|
1239
1805
|
this.dataTestId = "";
|
|
1240
1806
|
this.tooltip = '';
|
|
1241
1807
|
this.tooltipPosition = 'right';
|
|
1242
1808
|
this.change = new EventEmitter();
|
|
1243
1809
|
this.focus = new EventEmitter();
|
|
1244
1810
|
this.blur = new EventEmitter();
|
|
1811
|
+
this.helperIconClick = new EventEmitter();
|
|
1245
1812
|
this.onChange = (_) => { };
|
|
1246
1813
|
this.onTouched = () => { };
|
|
1247
1814
|
}
|
|
@@ -1269,6 +1836,13 @@ class RadioComponent {
|
|
|
1269
1836
|
this.onTouched();
|
|
1270
1837
|
this.blur.emit(event);
|
|
1271
1838
|
}
|
|
1839
|
+
onHelperIconClick(event) {
|
|
1840
|
+
event.stopPropagation();
|
|
1841
|
+
if (this.disabled) {
|
|
1842
|
+
return;
|
|
1843
|
+
}
|
|
1844
|
+
this.helperIconClick.emit();
|
|
1845
|
+
}
|
|
1272
1846
|
getColorClass() {
|
|
1273
1847
|
if (this.color === 'green') {
|
|
1274
1848
|
return 'mat-green';
|
|
@@ -1279,13 +1853,13 @@ class RadioComponent {
|
|
|
1279
1853
|
return '';
|
|
1280
1854
|
}
|
|
1281
1855
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1282
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RadioComponent, selector: "al-radio", inputs: { value: "value", name: "name", checked: "checked", disabled: "disabled", color: "color", labelPosition: "labelPosition", required: "required", labelText: "labelText",
|
|
1856
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RadioComponent, selector: "al-radio", inputs: { value: "value", name: "name", checked: "checked", disabled: "disabled", color: "color", labelPosition: "labelPosition", required: "required", labelText: "labelText", helperText: "helperText", showLabels: "showLabels", showHelperIcon: "showHelperIcon", helperIconTooltip: "helperIconTooltip", dataTestId: "dataTestId", tooltip: "tooltip", tooltipPosition: "tooltipPosition" }, outputs: { change: "change", focus: "focus", blur: "blur", helperIconClick: "helperIconClick" }, providers: [
|
|
1283
1857
|
{
|
|
1284
1858
|
provide: NG_VALUE_ACCESSOR,
|
|
1285
1859
|
useExisting: forwardRef(() => RadioComponent),
|
|
1286
1860
|
multi: true
|
|
1287
1861
|
}
|
|
1288
|
-
], 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 *ngIf=\"showLabels\" style=\"display: flex; flex-direction: column;\">\n <div *ngIf=\"labelText\" class=\"radio-label-main\">\n {{ labelText }}\n </div>\n <div *ngIf=\"helperTextLabel\" class=\"radio-label-helper\">\n {{ helperTextLabel }}\n </div>\n </div>\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:#c3c5d1!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#c3c5d1!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#c3c5d1!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-main{color:#4b4f62!important}.radio-label-helper{color:#a2a6b8!important;margin-top:0!important}::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$2.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$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
1862
|
+
], 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}.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$2.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$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
1289
1863
|
}
|
|
1290
1864
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, decorators: [{
|
|
1291
1865
|
type: Component,
|
|
@@ -1295,7 +1869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1295
1869
|
useExisting: forwardRef(() => RadioComponent),
|
|
1296
1870
|
multi: true
|
|
1297
1871
|
}
|
|
1298
|
-
], 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 *ngIf=\"showLabels\" style=\"display: flex; flex-direction: column;\">\n <div *ngIf=\"labelText\" class=\"radio-label-main\">\n {{ labelText }}\n </div>\n <div *ngIf=\"helperTextLabel\" class=\"radio-label-helper\">\n {{ helperTextLabel }}\n </div>\n </div>\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:#c3c5d1!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#c3c5d1!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#c3c5d1!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-main{color:#4b4f62!important}.radio-label-helper{color:#a2a6b8!important;margin-top:0!important}::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"] }]
|
|
1872
|
+
], 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}.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"] }]
|
|
1299
1873
|
}], propDecorators: { value: [{
|
|
1300
1874
|
type: Input
|
|
1301
1875
|
}], name: [{
|
|
@@ -1312,10 +1886,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1312
1886
|
type: Input
|
|
1313
1887
|
}], labelText: [{
|
|
1314
1888
|
type: Input
|
|
1315
|
-
}],
|
|
1889
|
+
}], helperText: [{
|
|
1316
1890
|
type: Input
|
|
1317
1891
|
}], showLabels: [{
|
|
1318
1892
|
type: Input
|
|
1893
|
+
}], showHelperIcon: [{
|
|
1894
|
+
type: Input
|
|
1895
|
+
}], helperIconTooltip: [{
|
|
1896
|
+
type: Input
|
|
1319
1897
|
}], dataTestId: [{
|
|
1320
1898
|
type: Input
|
|
1321
1899
|
}], tooltip: [{
|
|
@@ -1328,6 +1906,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1328
1906
|
type: Output
|
|
1329
1907
|
}], blur: [{
|
|
1330
1908
|
type: Output
|
|
1909
|
+
}], helperIconClick: [{
|
|
1910
|
+
type: Output
|
|
1331
1911
|
}] } });
|
|
1332
1912
|
|
|
1333
1913
|
class RadioModule {
|
|
@@ -1436,7 +2016,7 @@ class SlideToggleComponent {
|
|
|
1436
2016
|
this.required = false;
|
|
1437
2017
|
this.color = 'primary';
|
|
1438
2018
|
this.labelText = '';
|
|
1439
|
-
this.
|
|
2019
|
+
this.helperText = '';
|
|
1440
2020
|
this.showLabels = true;
|
|
1441
2021
|
this.onIcon = 'dark_mode'; // Material Icon for ON state
|
|
1442
2022
|
this.offIcon = 'light_mode'; // Material Icon for OFF state
|
|
@@ -1520,13 +2100,13 @@ class SlideToggleComponent {
|
|
|
1520
2100
|
}, 200);
|
|
1521
2101
|
}
|
|
1522
2102
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SlideToggleComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1523
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SlideToggleComponent, isStandalone: true, selector: "al-slide-toggle", inputs: { checked: "checked", disabled: "disabled", name: "name", required: "required", color: "color", labelText: "labelText",
|
|
2103
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SlideToggleComponent, isStandalone: true, selector: "al-slide-toggle", inputs: { checked: "checked", disabled: "disabled", name: "name", required: "required", color: "color", labelText: "labelText", helperText: "helperText", showLabels: "showLabels", onIcon: "onIcon", offIcon: "offIcon", showIcons: "showIcons", size: "size", dataTestId: "dataTestId", tooltip: "tooltip", tooltipPosition: "tooltipPosition" }, outputs: { change: "change", focus: "focus", blur: "blur" }, providers: [
|
|
1524
2104
|
{
|
|
1525
2105
|
provide: NG_VALUE_ACCESSOR,
|
|
1526
2106
|
useExisting: forwardRef(() => SlideToggleComponent),
|
|
1527
2107
|
multi: true
|
|
1528
2108
|
}
|
|
1529
|
-
], 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=\"helperTextLabel\" class=\"slide-toggle-label-helper\">\n {{ helperTextLabel }}\n </div>\n </div>\n <ng-content></ng-content>\n </mat-slide-toggle>\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,.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:#c3c5d1!important;border-color:#c3c5d1!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#c3c5d1!important;border-color:#c3c5d1!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled .mdc-switch__handle{background-color:#c3c5d1!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$4.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$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
2109
|
+
], 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$4.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$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
1530
2110
|
}
|
|
1531
2111
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SlideToggleComponent, decorators: [{
|
|
1532
2112
|
type: Component,
|
|
@@ -1536,7 +2116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1536
2116
|
useExisting: forwardRef(() => SlideToggleComponent),
|
|
1537
2117
|
multi: true
|
|
1538
2118
|
}
|
|
1539
|
-
], 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=\"helperTextLabel\" class=\"slide-toggle-label-helper\">\n {{ helperTextLabel }}\n </div>\n </div>\n <ng-content></ng-content>\n </mat-slide-toggle>\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,.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:#c3c5d1!important;border-color:#c3c5d1!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#c3c5d1!important;border-color:#c3c5d1!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled .mdc-switch__handle{background-color:#c3c5d1!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"] }]
|
|
2119
|
+
], 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"] }]
|
|
1540
2120
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { checked: [{
|
|
1541
2121
|
type: Input
|
|
1542
2122
|
}], disabled: [{
|
|
@@ -1549,7 +2129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1549
2129
|
type: Input
|
|
1550
2130
|
}], labelText: [{
|
|
1551
2131
|
type: Input
|
|
1552
|
-
}],
|
|
2132
|
+
}], helperText: [{
|
|
1553
2133
|
type: Input
|
|
1554
2134
|
}], showLabels: [{
|
|
1555
2135
|
type: Input
|
|
@@ -1683,11 +2263,11 @@ class AiApplyBarComponent {
|
|
|
1683
2263
|
this.valueChange.emit(v);
|
|
1684
2264
|
}
|
|
1685
2265
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiApplyBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1686
|
-
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\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [type]=\"'text'\"\n [disabled]=\"disabled\"\n [helperText]=\"false\"\n [leftIcon]=\"''\"\n [rightIcon]=\"'expand_more'\"\n [
|
|
2266
|
+
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\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 [options]=\"options\"\n [size]=\"'base'\"\n [types]=\"'primary'\"\n (change)=\"onValueChange($event)\">\n </al-input>\n </div>\n\n <div class=\"ai-apply-button\">\n <al-button\n [label]=\"applyLabel\"\n [buttonType]=\"'icon-label'\"\n [category]=\"'gradient'\"\n [size]=\"'base'\"\n [state]=\"applyDisabled ? 'disabled' : 'default'\"\n (onClick)=\"applyClick.emit()\">\n </al-button>\n <al-icon-button\n *ngIf=\"showChevronButton\"\n icon=\"chevron_right\"\n [iconOutlined]=\"false\"\n [color]=\"'#ffffff'\"\n [category]=\"'gradient'\"\n [size]=\"'xl'\"\n [disabled]=\"applyDisabled\"\n (onClick)=\"chevronClick.emit()\"\n [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"\n ></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\n [iconOnly]=\"true\"\n [buttonType]=\"'icon-circle'\"\n [leftIcon]=\"'close'\"\n [category]=\"'grey'\"\n [size]=\"'base'\"\n (onClick)=\"closeClick.emit()\">\n </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}: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 .al-input-field .mdc-notched-outline{border-radius:12px}.ai-apply-input ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:4px;border: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:center}.ai-apply-close ::ng-deep button.icon-circle{width:40px!important;height:40px!important;min-width:40px!important;background-color:none!important;border:none!important;box-shadow:none!important;color:#ffffffb3!important;cursor:pointer!important}.ai-apply-close ::ng-deep button.icon-circle:hover{color:#ffffffe6!important}.ai-apply-close ::ng-deep button.icon-circle:active{color:#ffffffe6!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", "options", "size", "types", "tooltip", "tooltipPosition"], outputs: ["change", "valueChange", "onColorChange", "monthSelected", "yearSelected"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColor", "iconOutlined", "size", "color", "disabled", "dataTestId"], outputs: ["onClick"] }] }); }
|
|
1687
2267
|
}
|
|
1688
2268
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiApplyBarComponent, decorators: [{
|
|
1689
2269
|
type: Component,
|
|
1690
|
-
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 [placeholder]=\"placeholder\"\n [value]=\"value\"\n [type]=\"'text'\"\n [disabled]=\"disabled\"\n [helperText]=\"false\"\n [leftIcon]=\"''\"\n [rightIcon]=\"'expand_more'\"\n [
|
|
2270
|
+
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 [placeholder]=\"placeholder\"\n [value]=\"value\"\n [type]=\"'text'\"\n [disabled]=\"disabled\"\n [helperText]=\"false\"\n [leftIcon]=\"''\"\n [rightIcon]=\"'expand_more'\"\n [hasDropDown]=\"true\"\n [options]=\"options\"\n [size]=\"'base'\"\n [types]=\"'primary'\"\n (change)=\"onValueChange($event)\">\n </al-input>\n </div>\n\n <div class=\"ai-apply-button\">\n <al-button\n [label]=\"applyLabel\"\n [buttonType]=\"'icon-label'\"\n [category]=\"'gradient'\"\n [size]=\"'base'\"\n [state]=\"applyDisabled ? 'disabled' : 'default'\"\n (onClick)=\"applyClick.emit()\">\n </al-button>\n <al-icon-button\n *ngIf=\"showChevronButton\"\n icon=\"chevron_right\"\n [iconOutlined]=\"false\"\n [color]=\"'#ffffff'\"\n [category]=\"'gradient'\"\n [size]=\"'xl'\"\n [disabled]=\"applyDisabled\"\n (onClick)=\"chevronClick.emit()\"\n [dataTestId]=\"'icon-btn_Uwofs4q_3kWU'\"\n ></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\n [iconOnly]=\"true\"\n [buttonType]=\"'icon-circle'\"\n [leftIcon]=\"'close'\"\n [category]=\"'grey'\"\n [size]=\"'base'\"\n (onClick)=\"closeClick.emit()\">\n </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}: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 .al-input-field .mdc-notched-outline{border-radius:12px}.ai-apply-input ::ng-deep .mat-mdc-form-field{background:#fff;border-radius:4px;border: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:center}.ai-apply-close ::ng-deep button.icon-circle{width:40px!important;height:40px!important;min-width:40px!important;background-color:none!important;border:none!important;box-shadow:none!important;color:#ffffffb3!important;cursor:pointer!important}.ai-apply-close ::ng-deep button.icon-circle:hover{color:#ffffffe6!important}.ai-apply-close ::ng-deep button.icon-circle:active{color:#ffffffe6!important}\n"] }]
|
|
1691
2271
|
}], propDecorators: { dataTestId: [{
|
|
1692
2272
|
type: Input
|
|
1693
2273
|
}], showChevron: [{
|
|
@@ -1792,7 +2372,7 @@ class ActionBarWrapperComponent {
|
|
|
1792
2372
|
}
|
|
1793
2373
|
}
|
|
1794
2374
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionBarWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1795
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActionBarWrapperComponent, isStandalone: true, selector: "al-action-bar", inputs: { showClose: "showClose", visible: "visible", mode: "mode", showHelperText: "showHelperText", helperText: "helperText", showChevronOnApply: "showChevronOnApply", showExtraButton: "showExtraButton", extraButtonIcon: "extraButtonIcon", extraButtonAriaLabel: "extraButtonAriaLabel", showStickyButton: "showStickyButton", stickyButtonIcon: "stickyButtonIcon", stickyButtonAriaLabel: "stickyButtonAriaLabel", autoHideOnApply: "autoHideOnApply" }, outputs: { closeClick: "closeClick", applyClick: "applyClick", extraButtonClick: "extraButtonClick", stickyButtonClick: "stickyButtonClick" }, queries: [{ propertyName: "actionButtons", predicate: ButtonComponent }], ngImport: i0, template: "<div class=\"al-action-bar-wrap\">\n <!-- Visible bar -->\n <ng-container *ngIf=\"visible; else stickyTpl\">\n <div class=\"al-action-bar\" [ngClass]=\"{ 'mode-ai': mode === 'ai-apply' }\">\n <div class=\"al-action-bar__close\" *ngIf=\"showClose\">\n <al-button\n [iconOnly]=\"true\"\n [buttonType]=\"'icon-circle'\"\n [leftIcon]=\"'close'\"\n [category]=\"'grey'\"\n [size]=\"'base'\"\n (onClick)=\"closeClick.emit()\"\n ></al-button>\n </div>\n\n <!-- Buttons rail mode -->\n <ng-container *ngIf=\"mode === 'buttons'; else aiApplyTpl\">\n <div class=\"al-action-bar__rail\">\n <div class=\"al-action\" *ngFor=\"let b of buttons; let i = index\">\n <div class=\"al-action__label\" *ngIf=\"b.label && b.label.trim()\">{{ b.label }}</div>\n <al-button\n [iconOnly]=\"true\"\n [buttonType]=\"'icon-circle'\"\n [leftIcon]=\"b.leftIcon || ''\"\n [outlined]=\"b.outlined\"\n [category]=\"b.category || 'grey-no-outline'\"\n [size]=\"b.size || 'base'\"\n (onClick)=\"b.onClick.emit()\"\n (onHover)=\"b.onHover.emit()\"\n (onMouseLeave)=\"b.onMouseLeave.emit()\"\n ></al-button>\n </div>\n </div>\n </ng-container>\n\n <!-- AI Apply variant -->\n <ng-template #aiApplyTpl>\n <div class=\"al-action-bar__rail\">\n <div class=\"al-ai-row\">\n <div class=\"al-ai-left\">\n <ng-content></ng-content>\n </div>\n <div class=\"al-ai-actions\">\n <al-button\n *ngIf=\"showExtraButton\"\n [iconOnly]=\"true\"\n [buttonType]=\"'icon-circle'\"\n [leftIcon]=\"extraButtonIcon\"\n [category]=\"'grey-colour-outline'\"\n [size]=\"'base'\"\n [aria-label]=\"extraButtonAriaLabel\"\n (onClick)=\"extraButtonClick.emit()\"\n ></al-button>\n <al-button\n [label]=\"'Apply AI'\"\n [category]=\"'gradient'\"\n [size]=\"'base'\"\n [rightIcon]=\"showChevronOnApply ? 'chevron_right' : ''\"\n (onClick)=\"onApply()\"\n ></al-button>\n \n </div>\n </div>\n <div class=\"al-ai-helper\" *ngIf=\"showHelperText\">{{ helperText }}</div>\n </div>\n </ng-template>\n </div>\n </ng-container>\n\n <!-- Sticky opener when hidden -->\n <ng-template #stickyTpl>\n <div class=\"al-action-bar__sticky\" *ngIf=\"showStickyButton\">\n <al-button\n [iconOnly]=\"true\"\n [buttonType]=\"'icon-circle'\"\n [leftIcon]=\"stickyButtonIcon\"\n [category]=\"'grey'\"\n [size]=\"'base'\"\n [aria-label]=\"stickyButtonAriaLabel\"\n (onClick)=\"stickyButtonClick.emit()\"\n ></al-button>\n <al-button\n *ngIf=\"showClose\"\n [iconOnly]=\"true\"\n [buttonType]=\"'icon-circle'\"\n [leftIcon]=\"'close'\"\n [category]=\"'grey'\"\n [size]=\"'base'\"\n aria-label=\"Close\"\n (onClick)=\"closeClick.emit()\"\n ></al-button>\n </div>\n </ng-template>\n</div>\n", styles: [":root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}:root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}.al-action-bar-wrap{position:relative;display:inline-flex;align-items:center}.al-action-bar{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:8px}.al-action-bar .al-action-bar__rail{background:#717793cc;border-radius:8px;padding:8px;display:flex;flex-direction:column;align-items:stretch;gap:12px;box-shadow:0 2px 8px #0000001f;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.al-action-bar .al-ai-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}.al-action-bar .al-ai-left{flex:1 1 auto;display:flex;align-items:center}.al-action-bar .al-ai-left>*{width:100%}.al-action-bar .al-ai-actions{display:inline-flex;align-items:center;gap:8px}.al-action-bar .al-ai-helper{margin-top:8px;color:#ffffffb3;font-size:12px;line-height:16px}.al-action-bar .al-action{position:relative;width:100%;display:flex;justify-content:center}.al-action-bar .al-action al-button{z-index:1}.al-action-bar .al-action .al-action__label{position:absolute;left:-14px!important;top:7px;transform:translate(calc(-100% - 2px));background:#4b4f62;color:#fff;border-radius:4px;padding:4px 8px;white-space:nowrap;font-size:12px;line-height:16px;box-shadow:0 2px 6px #00000029}\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: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "color", "category", "outline", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "dropdownItems", "dropdownOptions", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }] }); }
|
|
2375
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActionBarWrapperComponent, isStandalone: true, selector: "al-action-bar", inputs: { showClose: "showClose", visible: "visible", mode: "mode", showHelperText: "showHelperText", helperText: "helperText", showChevronOnApply: "showChevronOnApply", showExtraButton: "showExtraButton", extraButtonIcon: "extraButtonIcon", extraButtonAriaLabel: "extraButtonAriaLabel", showStickyButton: "showStickyButton", stickyButtonIcon: "stickyButtonIcon", stickyButtonAriaLabel: "stickyButtonAriaLabel", autoHideOnApply: "autoHideOnApply" }, outputs: { closeClick: "closeClick", applyClick: "applyClick", extraButtonClick: "extraButtonClick", stickyButtonClick: "stickyButtonClick" }, queries: [{ propertyName: "actionButtons", predicate: ButtonComponent }], ngImport: i0, template: "<div class=\"al-action-bar-wrap\">\n <!-- Visible bar -->\n <ng-container *ngIf=\"visible; else stickyTpl\">\n <div class=\"al-action-bar\" [ngClass]=\"{ 'mode-ai': mode === 'ai-apply' }\">\n <div class=\"al-action-bar__close\" *ngIf=\"showClose\">\n <al-button\n [iconOnly]=\"true\"\n [buttonType]=\"'icon-circle'\"\n [leftIcon]=\"'close'\"\n [category]=\"'grey'\"\n [size]=\"'base'\"\n (onClick)=\"closeClick.emit()\"\n ></al-button>\n </div>\n\n <!-- Buttons rail mode -->\n <ng-container *ngIf=\"mode === 'buttons'; else aiApplyTpl\">\n <div class=\"al-action-bar__rail\">\n <div class=\"al-action\" *ngFor=\"let b of buttons; let i = index\">\n <div class=\"al-action__label\" *ngIf=\"b.label && b.label.trim()\">{{ b.label }}</div>\n <al-button\n [iconOnly]=\"true\"\n [buttonType]=\"'icon-circle'\"\n [leftIcon]=\"b.leftIcon || ''\"\n [outlined]=\"b.outlined\"\n [category]=\"b.category || 'grey-no-outline'\"\n [size]=\"b.size || 'base'\"\n (onClick)=\"b.onClick.emit()\"\n (onHover)=\"b.onHover.emit()\"\n (onMouseLeave)=\"b.onMouseLeave.emit()\"\n ></al-button>\n </div>\n </div>\n </ng-container>\n\n <!-- AI Apply variant -->\n <ng-template #aiApplyTpl>\n <div class=\"al-action-bar__rail\">\n <div class=\"al-ai-row\">\n <div class=\"al-ai-left\">\n <ng-content></ng-content>\n </div>\n <div class=\"al-ai-actions\">\n <al-button\n *ngIf=\"showExtraButton\"\n [iconOnly]=\"true\"\n [buttonType]=\"'icon-circle'\"\n [leftIcon]=\"extraButtonIcon\"\n [category]=\"'grey-colour-outline'\"\n [size]=\"'base'\"\n [aria-label]=\"extraButtonAriaLabel\"\n (onClick)=\"extraButtonClick.emit()\"\n ></al-button>\n <al-button\n [label]=\"'Apply AI'\"\n [category]=\"'gradient'\"\n [size]=\"'base'\"\n [rightIcon]=\"showChevronOnApply ? 'chevron_right' : ''\"\n (onClick)=\"onApply()\"\n ></al-button>\n \n </div>\n </div>\n <div class=\"al-ai-helper\" *ngIf=\"showHelperText\">{{ helperText }}</div>\n </div>\n </ng-template>\n </div>\n </ng-container>\n\n <!-- Sticky opener when hidden -->\n <ng-template #stickyTpl>\n <div class=\"al-action-bar__sticky\" *ngIf=\"showStickyButton\">\n <al-button\n [iconOnly]=\"true\"\n [buttonType]=\"'icon-circle'\"\n [leftIcon]=\"stickyButtonIcon\"\n [category]=\"'grey'\"\n [size]=\"'base'\"\n [aria-label]=\"stickyButtonAriaLabel\"\n (onClick)=\"stickyButtonClick.emit()\"\n ></al-button>\n <al-button\n *ngIf=\"showClose\"\n [iconOnly]=\"true\"\n [buttonType]=\"'icon-circle'\"\n [leftIcon]=\"'close'\"\n [category]=\"'grey'\"\n [size]=\"'base'\"\n aria-label=\"Close\"\n (onClick)=\"closeClick.emit()\"\n ></al-button>\n </div>\n </ng-template>\n</div>\n", styles: [":root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}:root{--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--space-80: 80px}.al-action-bar-wrap{position:relative;display:inline-flex;align-items:center}.al-action-bar{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:8px}.al-action-bar .al-action-bar__rail{background:#717793cc;border-radius:8px;padding:8px;display:flex;flex-direction:column;align-items:stretch;gap:12px;box-shadow:0 2px 8px #0000001f;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.al-action-bar .al-ai-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}.al-action-bar .al-ai-left{flex:1 1 auto;display:flex;align-items:center}.al-action-bar .al-ai-left>*{width:100%}.al-action-bar .al-ai-actions{display:inline-flex;align-items:center;gap:8px}.al-action-bar .al-ai-helper{margin-top:8px;color:#ffffffb3;font-size:12px;line-height:16px}.al-action-bar .al-action{position:relative;width:100%;display:flex;justify-content:center}.al-action-bar .al-action al-button{z-index:1}.al-action-bar .al-action .al-action__label{position:absolute;left:-14px!important;top:7px;transform:translate(calc(-100% - 2px));background:#4b4f62;color:#fff;border-radius:4px;padding:4px 8px;white-space:nowrap;font-size:12px;line-height:16px;box-shadow:0 2px 6px #00000029}\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: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }] }); }
|
|
1796
2376
|
}
|
|
1797
2377
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionBarWrapperComponent, decorators: [{
|
|
1798
2378
|
type: Component,
|
|
@@ -2250,7 +2830,7 @@ class TableComponent {
|
|
|
2250
2830
|
}
|
|
2251
2831
|
}
|
|
2252
2832
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2253
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { getEditorElement: "getEditorElement", saveHistoryMethod: "saveHistoryMethod", textChangeMethod: "textChangeMethod" }, ngImport: i0, template: "<div class=\"table-controls\"><button class=\"format-button table-button\" (click)=\"toggleTableDropdown()\"\n title=\"Table Operations\" type=\"button\"><span class=\"material-icons\">table_chart</span></button>\n <div *ngIf=\"showTableDropdown\" class=\"table-dropdown\">\n <div class=\"table-row\"><button type=\"button\" class=\"table-btn\" (click)=\"addTable($event)\" title=\"Add table\"\n matTooltip=\"Add Table\" matTooltipPosition=\"above\"><span class=\"material-icons\">add</span></button><button\n type=\"button\" class=\"table-btn\" (click)=\"deleteTable($event)\" title=\"Delete table\" matTooltip=\"Delete Table\"\n matTooltipPosition=\"above\"><span class=\"material-icons\">delete</span></button><button type=\"button\"\n class=\"table-btn\" (click)=\"addColumnLeft($event)\" title=\"Column left\" matTooltip=\"Add Column Left\"\n matTooltipPosition=\"above\"><span class=\"material-icons\">add_circle_outline</span></button><button type=\"button\"\n class=\"table-btn\" (click)=\"addColumnRight($event)\" title=\"Column right\" matTooltip=\"Add Column Right\"\n matTooltipPosition=\"above\"><span class=\"material-icons\">add_circle</span></button></div>\n <div class=\"table-row\"><button type=\"button\" class=\"table-btn\" (click)=\"addRowAbove($event)\" title=\"Row top\"\n matTooltip=\"Add Row Above\" matTooltipPosition=\"above\"><span\n class=\"material-icons\">expand_less</span></button><button type=\"button\" class=\"table-btn\"\n (click)=\"addRowBelow($event)\" title=\"Row bottom\" matTooltip=\"Add Row Below\" matTooltipPosition=\"above\"><span\n class=\"material-icons\">expand_more</span></button><button type=\"button\" class=\"table-btn\"\n (click)=\"deleteCurrentRow($event)\" title=\"Delete row\" matTooltip=\"Delete Current Row\"\n matTooltipPosition=\"above\"><span class=\"material-icons\">remove_circle_outline</span></button><button\n type=\"button\" class=\"table-btn\" (click)=\"deleteCurrentColumn($event)\" title=\"Delete column\"\n matTooltip=\"Delete Current Column\" matTooltipPosition=\"above\"><span\n class=\"material-icons\">remove_circle</span></button></div>\n </div>\n</div>", styles: [".table-controls{position:relative;display:inline-block}.table-dropdown{position:absolute;top:100%;left:0;background-color:#fff;flex-direction:column;width:auto;border-radius:4px;box-shadow:0 2px 4px #182b7d26;z-index:1000;min-width:175px;padding:8px;margin-top:4px}.table-row{display:flex;gap:6px;margin-bottom:10px}.table-row:last-child{margin-bottom:0}.table-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #dee2e6;background-color:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;padding:0}.table-btn .material-icons{font-size:20px;color:#717793}.table-button{position:relative}@import url(https://fonts.googleapis.com/icon?family=Material+Icons);\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$
|
|
2833
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { getEditorElement: "getEditorElement", saveHistoryMethod: "saveHistoryMethod", textChangeMethod: "textChangeMethod" }, ngImport: i0, template: "<div class=\"table-controls\"><button class=\"format-button table-button\" (click)=\"toggleTableDropdown()\"\n title=\"Table Operations\" type=\"button\"><span class=\"material-icons\">table_chart</span></button>\n <div *ngIf=\"showTableDropdown\" class=\"table-dropdown\">\n <div class=\"table-row\"><button type=\"button\" class=\"table-btn\" (click)=\"addTable($event)\" title=\"Add table\"\n matTooltip=\"Add Table\" matTooltipPosition=\"above\"><span class=\"material-icons\">add</span></button><button\n type=\"button\" class=\"table-btn\" (click)=\"deleteTable($event)\" title=\"Delete table\" matTooltip=\"Delete Table\"\n matTooltipPosition=\"above\"><span class=\"material-icons\">delete</span></button><button type=\"button\"\n class=\"table-btn\" (click)=\"addColumnLeft($event)\" title=\"Column left\" matTooltip=\"Add Column Left\"\n matTooltipPosition=\"above\"><span class=\"material-icons\">add_circle_outline</span></button><button type=\"button\"\n class=\"table-btn\" (click)=\"addColumnRight($event)\" title=\"Column right\" matTooltip=\"Add Column Right\"\n matTooltipPosition=\"above\"><span class=\"material-icons\">add_circle</span></button></div>\n <div class=\"table-row\"><button type=\"button\" class=\"table-btn\" (click)=\"addRowAbove($event)\" title=\"Row top\"\n matTooltip=\"Add Row Above\" matTooltipPosition=\"above\"><span\n class=\"material-icons\">expand_less</span></button><button type=\"button\" class=\"table-btn\"\n (click)=\"addRowBelow($event)\" title=\"Row bottom\" matTooltip=\"Add Row Below\" matTooltipPosition=\"above\"><span\n class=\"material-icons\">expand_more</span></button><button type=\"button\" class=\"table-btn\"\n (click)=\"deleteCurrentRow($event)\" title=\"Delete row\" matTooltip=\"Delete Current Row\"\n matTooltipPosition=\"above\"><span class=\"material-icons\">remove_circle_outline</span></button><button\n type=\"button\" class=\"table-btn\" (click)=\"deleteCurrentColumn($event)\" title=\"Delete column\"\n matTooltip=\"Delete Current Column\" matTooltipPosition=\"above\"><span\n class=\"material-icons\">remove_circle</span></button></div>\n </div>\n</div>", styles: [".table-controls{position:relative;display:inline-block}.table-dropdown{position:absolute;top:100%;left:0;background-color:#fff;flex-direction:column;width:auto;border-radius:4px;box-shadow:0 2px 4px #182b7d26;z-index:1000;min-width:175px;padding:8px;margin-top:4px}.table-row{display:flex;gap:6px;margin-bottom:10px}.table-row:last-child{margin-bottom:0}.table-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #dee2e6;background-color:#fff;border-radius:4px;cursor:pointer;transition:all .2s ease;padding:0}.table-btn .material-icons{font-size:20px;color:#717793}.table-button{position:relative}@import url(https://fonts.googleapis.com/icon?family=Material+Icons);\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
2254
2834
|
}
|
|
2255
2835
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, decorators: [{
|
|
2256
2836
|
type: Component,
|
|
@@ -3386,11 +3966,11 @@ class CustomEditorComponent {
|
|
|
3386
3966
|
return Boolean(content && content.trim().length > 0);
|
|
3387
3967
|
}
|
|
3388
3968
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomEditorComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3389
|
-
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", showTable: "showTable", toolbarConfig: "toolbarConfig", textFormattingConfig: "textFormattingConfig" }, outputs: { contentChangeFromQuill: "contentChangeFromQuill", ApplyAIinQuill: "ApplyAIinQuill" }, viewQueries: [{ propertyName: "editorReference", first: true, predicate: ["editorReference"], descendants: true, static: 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 <span 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 <span 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 <span 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 <span 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=\"editor\" (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:1px solid #e9ecef;border-radius:6px;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:all .2s ease;padding:0;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{font-size:20px;color:#4b4f62;transition:color .2s ease}.toolbar .format-button.active .material-icons,.toolbar .format-button .active-icon{color:#37c1ce}.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;transition:color .2s ease}.toolbar .styling-dropdown .styling-text:hover{color:#37c1ce;background-color:#f8f9fa}.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}.toolbar .styling-dropdown .styling-dropdown-content .format-button .material-icons{margin-right:0;font-size:24px;color:#4b4f62;transition:color .2s ease}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button .active-icon,.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;transition:color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-text:hover{color:#37c1ce;background-color:#f8f9fa}.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}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .material-icons{margin-right:0;font-size:18px;color:#4b4f62;transition:color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .active-icon,.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$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3969
|
+
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", showTable: "showTable", toolbarConfig: "toolbarConfig", textFormattingConfig: "textFormattingConfig" }, outputs: { contentChangeFromQuill: "contentChangeFromQuill", ApplyAIinQuill: "ApplyAIinQuill" }, viewQueries: [{ propertyName: "editorReference", first: true, predicate: ["editorReference"], descendants: true, static: 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 <span 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 <span 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 <span 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 <span 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=\"editor\" (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:all .2s ease;padding:0;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{font-size:20px;color:#4b4f62;transition:color .2s ease}.toolbar .format-button.active .material-icons,.toolbar .format-button .active-icon{color:#37c1ce}.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;transition:color .2s ease}.toolbar .styling-dropdown .styling-text:hover{color:#37c1ce;background-color:#f8f9fa}.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}.toolbar .styling-dropdown .styling-dropdown-content .format-button .material-icons{margin-right:0;font-size:24px;color:#4b4f62;transition:color .2s ease}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button .active-icon,.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;transition:color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-text:hover{color:#37c1ce;background-color:#f8f9fa}.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}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .material-icons{margin-right:0;font-size:18px;color:#4b4f62;transition:color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .active-icon,.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$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3390
3970
|
}
|
|
3391
3971
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomEditorComponent, decorators: [{
|
|
3392
3972
|
type: Component,
|
|
3393
|
-
args: [{ selector: 'app-custom-editor', standalone: true, imports: [CommonModule, TableComponent, MatTooltipModule], 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 <span 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 <span 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 <span 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 <span 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=\"editor\" (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:1px solid #e9ecef;border-radius:6px;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:all .2s ease;padding:0;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{font-size:20px;color:#4b4f62;transition:color .2s ease}.toolbar .format-button.active .material-icons,.toolbar .format-button .active-icon{color:#37c1ce}.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;transition:color .2s ease}.toolbar .styling-dropdown .styling-text:hover{color:#37c1ce;background-color:#f8f9fa}.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}.toolbar .styling-dropdown .styling-dropdown-content .format-button .material-icons{margin-right:0;font-size:24px;color:#4b4f62;transition:color .2s ease}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button .active-icon,.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;transition:color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-text:hover{color:#37c1ce;background-color:#f8f9fa}.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}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .material-icons{margin-right:0;font-size:18px;color:#4b4f62;transition:color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .active-icon,.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"] }]
|
|
3973
|
+
args: [{ selector: 'app-custom-editor', standalone: true, imports: [CommonModule, TableComponent, MatTooltipModule], 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 <span 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 <span 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 <span 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 <span 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=\"editor\" (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:all .2s ease;padding:0;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{font-size:20px;color:#4b4f62;transition:color .2s ease}.toolbar .format-button.active .material-icons,.toolbar .format-button .active-icon{color:#37c1ce}.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;transition:color .2s ease}.toolbar .styling-dropdown .styling-text:hover{color:#37c1ce;background-color:#f8f9fa}.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}.toolbar .styling-dropdown .styling-dropdown-content .format-button .material-icons{margin-right:0;font-size:24px;color:#4b4f62;transition:color .2s ease}.toolbar .styling-dropdown .styling-dropdown-content .format-button.active .material-icons,.toolbar .styling-dropdown .styling-dropdown-content .format-button .active-icon,.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;transition:color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-text:hover{color:#37c1ce;background-color:#f8f9fa}.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}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .material-icons{margin-right:0;font-size:18px;color:#4b4f62;transition:color .2s ease}.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button.active .material-icons,.toolbar .text-formatting-dropdown .text-formatting-dropdown-content .format-button .active-icon,.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"] }]
|
|
3394
3974
|
}], ctorParameters: () => [{ type: i1$2.Router }], propDecorators: { editorReference: [{
|
|
3395
3975
|
type: ViewChild,
|
|
3396
3976
|
args: ['editorReference', {
|
|
@@ -3503,7 +4083,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3503
4083
|
class DateRangeComponent {
|
|
3504
4084
|
constructor() {
|
|
3505
4085
|
this.size = 'medium';
|
|
3506
|
-
this.
|
|
4086
|
+
this.labelText = 'Date Range';
|
|
3507
4087
|
this.startPlaceholder = 'Start date';
|
|
3508
4088
|
this.endPlaceholder = 'End date';
|
|
3509
4089
|
this.hint = 'MM/DD/YYYY – MM/DD/YYYY';
|
|
@@ -3521,6 +4101,13 @@ class DateRangeComponent {
|
|
|
3521
4101
|
this.onChange = (value) => { };
|
|
3522
4102
|
this.onTouched = () => { };
|
|
3523
4103
|
}
|
|
4104
|
+
/** DEPRECATED: label -> labelText */
|
|
4105
|
+
set label(val) {
|
|
4106
|
+
if (val !== undefined) {
|
|
4107
|
+
console.warn('[al-date-range] "label" is deprecated. Use "labelText" instead.');
|
|
4108
|
+
this.labelText = val;
|
|
4109
|
+
}
|
|
4110
|
+
}
|
|
3524
4111
|
// Getter for size class
|
|
3525
4112
|
get sizeClass() {
|
|
3526
4113
|
return `al-date-range-size-${this.size}`;
|
|
@@ -3644,13 +4231,13 @@ class DateRangeComponent {
|
|
|
3644
4231
|
this.dateRangeChange.emit(this.dateRangeValue);
|
|
3645
4232
|
}
|
|
3646
4233
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3647
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateRangeComponent, isStandalone: true, selector: "al-date-range", inputs: { dataTestId: "dataTestId", formControlName: "formControlName", size: "size", label: "label", startPlaceholder: "startPlaceholder", endPlaceholder: "endPlaceholder", hint: "hint", disabled: "disabled", required: "required", minDate: "minDate", maxDate: "maxDate", startAt: "startAt", opened: "opened", touchUi: "touchUi" }, outputs: { dateRangeChange: "dateRangeChange", openedChange: "openedChange", startDateChange: "startDateChange", endDateChange: "endDateChange" }, providers: [
|
|
4234
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateRangeComponent, isStandalone: true, selector: "al-date-range", inputs: { dataTestId: "dataTestId", formControlName: "formControlName", size: "size", labelText: "labelText", label: "label", startPlaceholder: "startPlaceholder", endPlaceholder: "endPlaceholder", hint: "hint", disabled: "disabled", required: "required", minDate: "minDate", maxDate: "maxDate", startAt: "startAt", opened: "opened", touchUi: "touchUi" }, outputs: { dateRangeChange: "dateRangeChange", openedChange: "openedChange", startDateChange: "startDateChange", endDateChange: "endDateChange" }, providers: [
|
|
3648
4235
|
{
|
|
3649
4236
|
provide: NG_VALUE_ACCESSOR,
|
|
3650
4237
|
useExisting: forwardRef(() => DateRangeComponent),
|
|
3651
4238
|
multi: true
|
|
3652
4239
|
}
|
|
3653
|
-
], ngImport: i0, template: "<mat-form-field class=\"mat_form\" [ngClass]=\"[getSizeClass(), getCategoryClass()]\" appearance=\"outline\"\n [attr.data-test-id]=\"dataTestId\">\n\n <mat-label>{{ label }}</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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }] }); }
|
|
4240
|
+
], 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 }] }); }
|
|
3654
4241
|
}
|
|
3655
4242
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeComponent, decorators: [{
|
|
3656
4243
|
type: Component,
|
|
@@ -3670,13 +4257,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3670
4257
|
useExisting: forwardRef(() => DateRangeComponent),
|
|
3671
4258
|
multi: true
|
|
3672
4259
|
}
|
|
3673
|
-
], template: "<mat-form-field class=\"mat_form\" [ngClass]=\"[getSizeClass(), getCategoryClass()]\" appearance=\"outline\"\n [attr.data-test-id]=\"dataTestId\">\n\n <mat-label>{{ label }}</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"] }]
|
|
4260
|
+
], 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"] }]
|
|
3674
4261
|
}], propDecorators: { dataTestId: [{
|
|
3675
4262
|
type: Input
|
|
3676
4263
|
}], formControlName: [{
|
|
3677
4264
|
type: Input
|
|
3678
4265
|
}], size: [{
|
|
3679
4266
|
type: Input
|
|
4267
|
+
}], labelText: [{
|
|
4268
|
+
type: Input
|
|
3680
4269
|
}], label: [{
|
|
3681
4270
|
type: Input
|
|
3682
4271
|
}], startPlaceholder: [{
|
|
@@ -3753,14 +4342,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3753
4342
|
|
|
3754
4343
|
class AlTabComponent {
|
|
3755
4344
|
constructor() {
|
|
3756
|
-
this.
|
|
4345
|
+
this.labelText = '';
|
|
3757
4346
|
this.selected = false;
|
|
3758
4347
|
}
|
|
4348
|
+
/** DEPRECATED: label -> labelText */
|
|
4349
|
+
set label(val) {
|
|
4350
|
+
if (val !== undefined) {
|
|
4351
|
+
console.warn('[al-tab] "label" is deprecated. Use "labelText" instead.');
|
|
4352
|
+
this.labelText = val;
|
|
4353
|
+
}
|
|
4354
|
+
}
|
|
3759
4355
|
ngAfterViewInit() {
|
|
3760
4356
|
// Template ref will be available after view init
|
|
3761
4357
|
}
|
|
3762
4358
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3763
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlTabComponent, isStandalone: true, selector: "al-tab", inputs: { label: "label", selected: "selected" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true }); }
|
|
4359
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlTabComponent, isStandalone: true, selector: "al-tab", inputs: { labelText: "labelText", label: "label", selected: "selected" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true }); }
|
|
3764
4360
|
}
|
|
3765
4361
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlTabComponent, decorators: [{
|
|
3766
4362
|
type: Component,
|
|
@@ -3769,7 +4365,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3769
4365
|
standalone: true,
|
|
3770
4366
|
template: '<ng-template><ng-content></ng-content></ng-template>'
|
|
3771
4367
|
}]
|
|
3772
|
-
}], propDecorators: {
|
|
4368
|
+
}], propDecorators: { labelText: [{
|
|
4369
|
+
type: Input
|
|
4370
|
+
}], label: [{
|
|
3773
4371
|
type: Input
|
|
3774
4372
|
}], selected: [{
|
|
3775
4373
|
type: Input
|
|
@@ -3799,11 +4397,11 @@ class TabsComponent {
|
|
|
3799
4397
|
}
|
|
3800
4398
|
}
|
|
3801
4399
|
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 }); }
|
|
3802
|
-
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.label\">\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$5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$5.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"] }] }); }
|
|
4400
|
+
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$5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$5.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"] }] }); }
|
|
3803
4401
|
}
|
|
3804
4402
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsComponent, decorators: [{
|
|
3805
4403
|
type: Component,
|
|
3806
|
-
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.label\">\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"] }]
|
|
4404
|
+
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"] }]
|
|
3807
4405
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tabComponents: [{
|
|
3808
4406
|
type: ContentChildren,
|
|
3809
4407
|
args: [AlTabComponent, { descendants: true }]
|
|
@@ -3933,11 +4531,11 @@ class ModalComponent {
|
|
|
3933
4531
|
}
|
|
3934
4532
|
}
|
|
3935
4533
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalComponent, deps: [{ token: i1$3.MatDialogRef, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3936
|
-
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:16px;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 <mat-icon *ngIf=\"!feedbackIcon && feedbackVariant === 'success'\"\n class=\"feedback-icon success\">check_circle</mat-icon>\n <mat-icon *ngIf=\"!feedbackIcon && feedbackVariant === 'warning'\"\n class=\"feedback-icon warning\">warning</mat-icon>\n <mat-icon *ngIf=\"!feedbackIcon && feedbackVariant === 'error'\" class=\"feedback-icon error\">error</mat-icon>\n\n <div style=\"color:#3c4553;font-weight:600;\">{{ 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 [label]=\"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\" [color]=\"'#ffffff'\" [category]=\"'blue'\"\n [size]=\"'base'\" [disabled]=\"false\" (onClick)=\"onClose()\" [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 <span>{{ customHeaderIcon }}</span>\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 [color]=\"'#ffffff'\" [category]=\"'blue'\" [size]=\"'base'\" [disabled]=\"false\" (onClick)=\"onClose()\"\n [dataTestId]=\"'close-btn'\"></al-icon-button>\n\n <!-- Action button -->\n <al-button [category]=\"submitCategory\" [size]=\"buttonSize\" [iconOutlined]=\"false\" [label]=\"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 [label]=\"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 [label]=\"submitLabel\" [leftIcon]=\"submitIcon\" [rightIcon]=\"''\" [dataTestId]=\"'submit-btn'\"\n [hasDropdown]=\"false\" [dropdownItems]=\"[]\" (onClick)=\"onSubmit()\"></al-button>\n </div>\n </div>\n </div>\n</div>", styles: [".modal-container{padding:0;background:#fff;border-radius:8px;box-shadow:0 6px 10px 4px #71779326;display:flex;flex-direction:column;max-height:90vh;overflow:auto}.modal-title{color:#fff;margin:0;padding:16px 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:8px 8px 0 0;padding:36px 64px;min-height:auto;gap:16px;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{width:32px;height:32px;background:#4fc3f7;border-radius:4px;display:flex;align-items:center;justify-content:center;margin-right:12px}.custom-header-icon span{color:#fff;font-weight:700;font-size:16px}.custom-header-title{color:#fff;margin:0;font-size:18px;font-weight:600;font-family:Roboto,sans-serif}.custom-header-description{color:#ffffffd9;margin:0 0 4px;font-size:14px;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:12px;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}\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", "color", "category", "outline", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "dropdownItems", "dropdownOptions", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColor", "iconOutlined", "size", "color", "disabled", "dataTestId"], outputs: ["onClick"] }] }); }
|
|
4534
|
+
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:16px;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 <mat-icon *ngIf=\"!feedbackIcon && feedbackVariant === 'success'\"\n class=\"feedback-icon success\">check_circle</mat-icon>\n <mat-icon *ngIf=\"!feedbackIcon && feedbackVariant === 'warning'\"\n class=\"feedback-icon warning\">warning</mat-icon>\n <mat-icon *ngIf=\"!feedbackIcon && feedbackVariant === 'error'\" class=\"feedback-icon error\">error</mat-icon>\n\n <div style=\"color:#3c4553;font-weight:600;\">{{ 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\" [color]=\"'#ffffff'\" [category]=\"'blue'\"\n [size]=\"'base'\" [disabled]=\"false\" (onClick)=\"onClose()\" [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 <span>{{ customHeaderIcon }}</span>\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 [color]=\"'#ffffff'\" [category]=\"'blue'\" [size]=\"'base'\" [disabled]=\"false\" (onClick)=\"onClose()\"\n [dataTestId]=\"'close-btn'\"></al-icon-button>\n\n <!-- Action button -->\n <al-button [category]=\"submitCategory\" [size]=\"buttonSize\" [iconOutlined]=\"false\"\n [labelText]=\"customActionLabel\" [leftIcon]=\"customActionIcon\" [rightIcon]=\"customActionRightIcon\"\n [dataTestId]=\"'custom-action-btn'\" [hasDropDown]=\"false\" [dropdownItems]=\"[]\"\n (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:8px;box-shadow:0 6px 10px 4px #71779326;display:flex;flex-direction:column;max-height:90vh;overflow:auto}.modal-title{color:#fff;margin:0;padding:16px 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:8px 8px 0 0;padding:36px 64px;min-height:auto;gap:16px;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{width:32px;height:32px;background:#4fc3f7;border-radius:4px;display:flex;align-items:center;justify-content:center;margin-right:12px}.custom-header-icon span{color:#fff;font-weight:700;font-size:16px}.custom-header-title{color:#fff;margin:0;font-size:18px;font-weight:600;font-family:Roboto,sans-serif}.custom-header-description{color:#ffffffd9;margin:0 0 4px;font-size:14px;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:12px;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}\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", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }, { kind: "component", type: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColor", "iconOutlined", "size", "color", "disabled", "dataTestId"], outputs: ["onClick"] }] }); }
|
|
3937
4535
|
}
|
|
3938
4536
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalComponent, decorators: [{
|
|
3939
4537
|
type: Component,
|
|
3940
|
-
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:16px;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 <mat-icon *ngIf=\"!feedbackIcon && feedbackVariant === 'success'\"\n class=\"feedback-icon success\">check_circle</mat-icon>\n <mat-icon *ngIf=\"!feedbackIcon && feedbackVariant === 'warning'\"\n class=\"feedback-icon warning\">warning</mat-icon>\n <mat-icon *ngIf=\"!feedbackIcon && feedbackVariant === 'error'\" class=\"feedback-icon error\">error</mat-icon>\n\n <div style=\"color:#3c4553;font-weight:600;\">{{ 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 [
|
|
4538
|
+
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:16px;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 <mat-icon *ngIf=\"!feedbackIcon && feedbackVariant === 'success'\"\n class=\"feedback-icon success\">check_circle</mat-icon>\n <mat-icon *ngIf=\"!feedbackIcon && feedbackVariant === 'warning'\"\n class=\"feedback-icon warning\">warning</mat-icon>\n <mat-icon *ngIf=\"!feedbackIcon && feedbackVariant === 'error'\" class=\"feedback-icon error\">error</mat-icon>\n\n <div style=\"color:#3c4553;font-weight:600;\">{{ 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\" [color]=\"'#ffffff'\" [category]=\"'blue'\"\n [size]=\"'base'\" [disabled]=\"false\" (onClick)=\"onClose()\" [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 <span>{{ customHeaderIcon }}</span>\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 [color]=\"'#ffffff'\" [category]=\"'blue'\" [size]=\"'base'\" [disabled]=\"false\" (onClick)=\"onClose()\"\n [dataTestId]=\"'close-btn'\"></al-icon-button>\n\n <!-- Action button -->\n <al-button [category]=\"submitCategory\" [size]=\"buttonSize\" [iconOutlined]=\"false\"\n [labelText]=\"customActionLabel\" [leftIcon]=\"customActionIcon\" [rightIcon]=\"customActionRightIcon\"\n [dataTestId]=\"'custom-action-btn'\" [hasDropDown]=\"false\" [dropdownItems]=\"[]\"\n (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:8px;box-shadow:0 6px 10px 4px #71779326;display:flex;flex-direction:column;max-height:90vh;overflow:auto}.modal-title{color:#fff;margin:0;padding:16px 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:8px 8px 0 0;padding:36px 64px;min-height:auto;gap:16px;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{width:32px;height:32px;background:#4fc3f7;border-radius:4px;display:flex;align-items:center;justify-content:center;margin-right:12px}.custom-header-icon span{color:#fff;font-weight:700;font-size:16px}.custom-header-title{color:#fff;margin:0;font-size:18px;font-weight:600;font-family:Roboto,sans-serif}.custom-header-description{color:#ffffffd9;margin:0 0 4px;font-size:14px;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:12px;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}\n"] }]
|
|
3941
4539
|
}], ctorParameters: () => [{ type: i1$3.MatDialogRef, decorators: [{
|
|
3942
4540
|
type: Optional
|
|
3943
4541
|
}] }, { type: i0.ElementRef }], propDecorators: { titleText: [{
|
|
@@ -4069,7 +4667,7 @@ class TooltipComponent {
|
|
|
4069
4667
|
return this.message || '';
|
|
4070
4668
|
}
|
|
4071
4669
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4072
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TooltipComponent, isStandalone: true, selector: "al-tooltip", inputs: { message: "message", header: "header", body: "body", position: "position", disabled: "disabled", dataTestId: "dataTestId" }, queries: [{ propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }], ngImport: i0, template: "<ng-container>\n <div [matTooltip]=\"getTooltipContent()\" [matTooltipPosition]=\"position\" [matTooltipDisabled]=\"disabled\"\n [attr.data-test-id]=\"dataTestId\" class=\"al-tooltip-wrapper\">\n <ng-content></ng-content>\n </div>\n</ng-container>", styles: [".al-tooltip-wrapper{display:inline-block;position:relative}.al-tooltip-wrapper:hover{cursor:help}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$
|
|
4670
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TooltipComponent, isStandalone: true, selector: "al-tooltip", inputs: { message: "message", header: "header", body: "body", position: "position", disabled: "disabled", dataTestId: "dataTestId" }, queries: [{ propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }], ngImport: i0, template: "<ng-container>\n <div [matTooltip]=\"getTooltipContent()\" [matTooltipPosition]=\"position\" [matTooltipDisabled]=\"disabled\"\n [attr.data-test-id]=\"dataTestId\" class=\"al-tooltip-wrapper\">\n <ng-content></ng-content>\n </div>\n</ng-container>", styles: [".al-tooltip-wrapper{display:inline-block;position:relative}.al-tooltip-wrapper:hover{cursor:help}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
4073
4671
|
}
|
|
4074
4672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
4075
4673
|
type: Component,
|
|
@@ -4184,110 +4782,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4184
4782
|
}]
|
|
4185
4783
|
}] });
|
|
4186
4784
|
|
|
4187
|
-
class ResponsiveColumnsComponent {
|
|
4188
|
-
get dataTestIdAttr() {
|
|
4189
|
-
return this.dataTestId || null;
|
|
4190
|
-
}
|
|
4191
|
-
get cssGap() {
|
|
4192
|
-
return typeof this.gap === 'number' ? `$ {
|
|
4193
|
-
this.gap
|
|
4194
|
-
}
|
|
4195
|
-
|
|
4196
|
-
px` : this.gap;
|
|
4197
|
-
}
|
|
4198
|
-
get cssPadding() {
|
|
4199
|
-
return typeof this.padding === 'number' ? `$ {
|
|
4200
|
-
this.padding
|
|
4201
|
-
}
|
|
4202
|
-
|
|
4203
|
-
px` : this.padding;
|
|
4204
|
-
}
|
|
4205
|
-
get cssLeftWidth() { return this.leftWidth || 'auto'; }
|
|
4206
|
-
get cssRightWidth() { return this.rightWidth || 'auto'; }
|
|
4207
|
-
get cssStackAt() {
|
|
4208
|
-
return `$ {
|
|
4209
|
-
this.stackAt
|
|
4210
|
-
}
|
|
4211
|
-
|
|
4212
|
-
px`;
|
|
4213
|
-
}
|
|
4214
|
-
constructor(hostRef, zone) {
|
|
4215
|
-
this.hostRef = hostRef;
|
|
4216
|
-
this.zone = zone;
|
|
4217
|
-
/** Gap between the three columns */
|
|
4218
|
-
this.gap = '16px';
|
|
4219
|
-
/** Padding applied to the container (e.g. '12px 16px') */
|
|
4220
|
-
this.padding = 0;
|
|
4221
|
-
/** Optional explicit widths for side columns; defaults to 'auto' */
|
|
4222
|
-
this.leftWidth = 'auto';
|
|
4223
|
-
this.rightWidth = 'auto';
|
|
4224
|
-
/** Breakpoint (px) below which columns stack vertically */
|
|
4225
|
-
this.stackAt = 480;
|
|
4226
|
-
this.isStacked = false;
|
|
4227
|
-
}
|
|
4228
|
-
ngAfterViewInit() {
|
|
4229
|
-
this.zone.runOutsideAngular(() => {
|
|
4230
|
-
this.resizeObserver = new ResizeObserver(entries => {
|
|
4231
|
-
const entry = entries[0];
|
|
4232
|
-
const width = entry?.contentRect?.width ?? this.hostRef.nativeElement.clientWidth;
|
|
4233
|
-
const shouldStack = width < this.stackAt;
|
|
4234
|
-
if (shouldStack !== this.isStacked) {
|
|
4235
|
-
this.zone.run(() => (this.isStacked = shouldStack));
|
|
4236
|
-
}
|
|
4237
|
-
});
|
|
4238
|
-
this.resizeObserver.observe(this.hostRef.nativeElement);
|
|
4239
|
-
});
|
|
4240
|
-
}
|
|
4241
|
-
ngOnChanges(changes) {
|
|
4242
|
-
if (changes['stackAt']) {
|
|
4243
|
-
const width = this.hostRef?.nativeElement?.clientWidth || 0;
|
|
4244
|
-
this.isStacked = width < this.stackAt;
|
|
4245
|
-
}
|
|
4246
|
-
}
|
|
4247
|
-
ngOnDestroy() {
|
|
4248
|
-
this.resizeObserver?.disconnect();
|
|
4249
|
-
}
|
|
4250
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResponsiveColumnsComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4251
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResponsiveColumnsComponent, isStandalone: true, selector: "al-responsive-columns", inputs: { dataTestId: "dataTestId", gap: "gap", padding: "padding", leftWidth: "leftWidth", rightWidth: "rightWidth", stackAt: "stackAt" }, host: { properties: { "class.stack": "this.isStacked", "attr.data-testid": "this.dataTestIdAttr", "style.--gap": "this.cssGap", "style.--padding": "this.cssPadding", "style.--left-width": "this.cssLeftWidth", "style.--right-width": "this.cssRightWidth", "style.--stack-at": "this.cssStackAt" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"container\">\n <div class=\"column left\"><ng-content select=\"[left],[slot=left],[data-slot=left]\"></ng-content></div>\n <div class=\"column center\"><ng-content></ng-content><ng-content\n select=\"[center],[slot=center],[data-slot=center]\"></ng-content></div>\n <div class=\"column right\"><ng-content select=\"[right],[slot=right],[data-slot=right]\"></ng-content></div>\n</div>", styles: [":host{display:block}.container{display:grid;grid-template-columns:var(--template-columns, var(--left-width, auto) 1fr var(--right-width, auto));gap:var(--gap, 16px);padding:var(--padding, 0)}:host(.stack) .container{grid-template-columns:1fr}:host(.stack) .container .left,:host(.stack) .container .right{order:-1}.column{min-width:0}.center{background:var(--center-bg, transparent)}.container:hover ::ng-deep .toolbar-icons{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .15s ease,transform .15s ease,visibility 0s}.container:hover ::ng-deep .toolbar-container{background-color:#e5e9fc}.container:hover ::ng-deep .toolbar-right-container{background-color:#e5e9fc}.center:hover ::ng-deep .toolbar-right-icons{visibility:visible!important;opacity:1!important;display:flex!important}.center:hover ::ng-deep .toolbar-right-container{background-color:#e5e9fc}.container:hover ::ng-deep .toolbar-right-icons{visibility:visible!important;opacity:1!important;display:flex!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
4252
|
-
}
|
|
4253
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResponsiveColumnsComponent, decorators: [{
|
|
4254
|
-
type: Component,
|
|
4255
|
-
args: [{ selector: 'al-responsive-columns', standalone: true, imports: [CommonModule], template: "<div class=\"container\">\n <div class=\"column left\"><ng-content select=\"[left],[slot=left],[data-slot=left]\"></ng-content></div>\n <div class=\"column center\"><ng-content></ng-content><ng-content\n select=\"[center],[slot=center],[data-slot=center]\"></ng-content></div>\n <div class=\"column right\"><ng-content select=\"[right],[slot=right],[data-slot=right]\"></ng-content></div>\n</div>", styles: [":host{display:block}.container{display:grid;grid-template-columns:var(--template-columns, var(--left-width, auto) 1fr var(--right-width, auto));gap:var(--gap, 16px);padding:var(--padding, 0)}:host(.stack) .container{grid-template-columns:1fr}:host(.stack) .container .left,:host(.stack) .container .right{order:-1}.column{min-width:0}.center{background:var(--center-bg, transparent)}.container:hover ::ng-deep .toolbar-icons{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .15s ease,transform .15s ease,visibility 0s}.container:hover ::ng-deep .toolbar-container{background-color:#e5e9fc}.container:hover ::ng-deep .toolbar-right-container{background-color:#e5e9fc}.center:hover ::ng-deep .toolbar-right-icons{visibility:visible!important;opacity:1!important;display:flex!important}.center:hover ::ng-deep .toolbar-right-container{background-color:#e5e9fc}.container:hover ::ng-deep .toolbar-right-icons{visibility:visible!important;opacity:1!important;display:flex!important}\n"] }]
|
|
4256
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dataTestId: [{
|
|
4257
|
-
type: Input
|
|
4258
|
-
}], gap: [{
|
|
4259
|
-
type: Input
|
|
4260
|
-
}], padding: [{
|
|
4261
|
-
type: Input
|
|
4262
|
-
}], leftWidth: [{
|
|
4263
|
-
type: Input
|
|
4264
|
-
}], rightWidth: [{
|
|
4265
|
-
type: Input
|
|
4266
|
-
}], stackAt: [{
|
|
4267
|
-
type: Input
|
|
4268
|
-
}], isStacked: [{
|
|
4269
|
-
type: HostBinding,
|
|
4270
|
-
args: ['class.stack']
|
|
4271
|
-
}], dataTestIdAttr: [{
|
|
4272
|
-
type: HostBinding,
|
|
4273
|
-
args: ['attr.data-testid']
|
|
4274
|
-
}], cssGap: [{
|
|
4275
|
-
type: HostBinding,
|
|
4276
|
-
args: ['style.--gap']
|
|
4277
|
-
}], cssPadding: [{
|
|
4278
|
-
type: HostBinding,
|
|
4279
|
-
args: ['style.--padding']
|
|
4280
|
-
}], cssLeftWidth: [{
|
|
4281
|
-
type: HostBinding,
|
|
4282
|
-
args: ['style.--left-width']
|
|
4283
|
-
}], cssRightWidth: [{
|
|
4284
|
-
type: HostBinding,
|
|
4285
|
-
args: ['style.--right-width']
|
|
4286
|
-
}], cssStackAt: [{
|
|
4287
|
-
type: HostBinding,
|
|
4288
|
-
args: ['style.--stack-at']
|
|
4289
|
-
}] } });
|
|
4290
|
-
|
|
4291
4785
|
class ResponsiveColumnsModule {
|
|
4292
4786
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResponsiveColumnsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4293
4787
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ResponsiveColumnsModule, imports: [CommonModule, ResponsiveColumnsComponent], exports: [ResponsiveColumnsComponent] }); }
|
|
@@ -4352,11 +4846,11 @@ class ResumeEntriesComponent {
|
|
|
4352
4846
|
return this.reappliedEntries.has(index);
|
|
4353
4847
|
}
|
|
4354
4848
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResumeEntriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4355
|
-
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" }, 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 <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\"><ng-container\n *ngIf=\"(entry.companyName || entry.institution) && showCompany; else titleTop\">\n <div *ngIf=\"showCompany\" class=\"mobile-order-2\" [matTooltip]=\"companyTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!companyTooltip\"><lib-field-placeholder\n [value]=\"entry.companyName || entry.institution\" [placeholder]=\"'Company Name / Institution'\"\n valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-company'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\" [matTooltip]=\"jobTitleTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!jobTitleTooltip\"><lib-field-placeholder\n [value]=\"entry.jobTitle || entry.courseName\" [placeholder]=\"'Job title / Course name'\"\n valueClass=\"font-title-text\" [testId]=\"'entry-' + i + '-title'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n </ng-container><ng-template #titleTop>\n <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\" [matTooltip]=\"jobTitleTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!jobTitleTooltip\"><lib-field-placeholder\n [value]=\"entry.jobTitle || entry.courseName\" [placeholder]=\"'Job title / Course name'\"\n valueClass=\"font-title-text\" [testId]=\"'entry-' + i + '-title'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div *ngIf=\"showCompany\" class=\"mobile-order-2\" [matTooltip]=\"companyTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!companyTooltip\"><lib-field-placeholder\n [value]=\"entry.companyName || entry.institution\" [placeholder]=\"'Company Name / Institution'\"\n valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-company'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n </ng-template></div>\n <div class=\"header-right\">\n <div class=\"date-range mobile-order-1\" *ngIf=\"showDates\" [matTooltip]=\"dateTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!dateTooltip\"><ng-container\n *ngIf=\"entry.startDate; else endOnly\"><lib-field-placeholder [value]=\"entry.startDate\"\n [placeholder]=\"'Start Date'\" valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-start-date'\"\n [compact]=\"true\"></lib-field-placeholder><span class=\"date-separator\">-</span><lib-field-placeholder\n [value]=\"entry.isPresent ? 'Present' : entry.endDate\" [placeholder]=\"'End Date'\"\n valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-end-date'\"\n [compact]=\"true\"></lib-field-placeholder></ng-container><ng-template #endOnly><lib-field-placeholder\n [value]=\"entry.isPresent ? 'Present' : entry.endDate\" [placeholder]=\"'End Date'\"\n valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-end-date'\"\n [compact]=\"true\"></lib-field-placeholder></ng-template></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\"><al-loader [status]=\"loaderStatus\"\n [size]=\"loaderSize\" [showText]=\"true\" [dataTestId]=\"'entry-' + i + '-loader'\"></al-loader></div>\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\"><label *ngIf=\"showDescriptionLabel\"\n class=\"description-label\">Description </label><lib-field-placeholder [value]=\"desc\"\n [placeholder]=\"'Missing item'\" [padded]=\"true\" valueClass=\"font-text-base\"\n [testId]=\"'entry-' + i + '-desc-' + descIndex\"></lib-field-placeholder></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}.resume-entry.with-timeline{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.resume-entry.with-timeline .entry-separator{flex-basis:100%;order:10}.resume-entry-content{display:flex;flex-direction:column;flex:1;width:100%;gap:12px;padding-top:4px}.timeline-indicator{display:flex;padding:8px 0 0;flex-direction:column;align-items:center;align-self:stretch;position:relative}.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;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", "color", "category", "outline", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "dropdownItems", "dropdownOptions", "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$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
4849
|
+
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" }, 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 <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\"><ng-container\n *ngIf=\"(entry.companyName || entry.institution) && showCompany; else titleTop\">\n <div *ngIf=\"showCompany\" class=\"mobile-order-2\" [matTooltip]=\"companyTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!companyTooltip\"><lib-field-placeholder\n [value]=\"entry.companyName || entry.institution\" [placeholder]=\"'Company Name / Institution'\"\n valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-company'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\" [matTooltip]=\"jobTitleTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!jobTitleTooltip\"><lib-field-placeholder\n [value]=\"entry.jobTitle || entry.courseName\" [placeholder]=\"'Job title / Course name'\"\n valueClass=\"font-title-text\" [testId]=\"'entry-' + i + '-title'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n </ng-container><ng-template #titleTop>\n <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\" [matTooltip]=\"jobTitleTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!jobTitleTooltip\"><lib-field-placeholder\n [value]=\"entry.jobTitle || entry.courseName\" [placeholder]=\"'Job title / Course name'\"\n valueClass=\"font-title-text\" [testId]=\"'entry-' + i + '-title'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div *ngIf=\"showCompany\" class=\"mobile-order-2\" [matTooltip]=\"companyTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!companyTooltip\"><lib-field-placeholder\n [value]=\"entry.companyName || entry.institution\" [placeholder]=\"'Company Name / Institution'\"\n valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-company'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n </ng-template></div>\n <div class=\"header-right\">\n <div class=\"date-range mobile-order-1\" *ngIf=\"showDates\" [matTooltip]=\"dateTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!dateTooltip\"><ng-container\n *ngIf=\"entry.startDate; else endOnly\"><lib-field-placeholder [value]=\"entry.startDate\"\n [placeholder]=\"'Start Date'\" valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-start-date'\"\n [compact]=\"true\"></lib-field-placeholder><span class=\"date-separator\">-</span><lib-field-placeholder\n [value]=\"entry.isPresent ? 'Present' : entry.endDate\" [placeholder]=\"'End Date'\"\n valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-end-date'\"\n [compact]=\"true\"></lib-field-placeholder></ng-container><ng-template #endOnly><lib-field-placeholder\n [value]=\"entry.isPresent ? 'Present' : entry.endDate\" [placeholder]=\"'End Date'\"\n valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-end-date'\"\n [compact]=\"true\"></lib-field-placeholder></ng-template></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\"><al-loader [status]=\"loaderStatus\"\n [size]=\"loaderSize\" [showText]=\"true\" [dataTestId]=\"'entry-' + i + '-loader'\"></al-loader></div>\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\"><label *ngIf=\"showDescriptionLabel\"\n class=\"description-label\">Description </label><lib-field-placeholder [value]=\"desc\"\n [placeholder]=\"'Missing item'\" [padded]=\"true\" valueClass=\"font-text-base\"\n [testId]=\"'entry-' + i + '-desc-' + descIndex\"></lib-field-placeholder></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.with-timeline{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.resume-entry.with-timeline .entry-separator{flex-basis:100%;order:10}.resume-entry-content{display:flex;flex-direction:column;flex:1;width:100%;gap:12px;padding-top:4px}.timeline-indicator{display:flex;padding:8px 0 0;flex-direction:column;align-items:center;align-self:stretch;position:relative}.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;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", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "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$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
4356
4850
|
}
|
|
4357
4851
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResumeEntriesComponent, decorators: [{
|
|
4358
4852
|
type: Component,
|
|
4359
|
-
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 <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\"><ng-container\n *ngIf=\"(entry.companyName || entry.institution) && showCompany; else titleTop\">\n <div *ngIf=\"showCompany\" class=\"mobile-order-2\" [matTooltip]=\"companyTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!companyTooltip\"><lib-field-placeholder\n [value]=\"entry.companyName || entry.institution\" [placeholder]=\"'Company Name / Institution'\"\n valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-company'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\" [matTooltip]=\"jobTitleTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!jobTitleTooltip\"><lib-field-placeholder\n [value]=\"entry.jobTitle || entry.courseName\" [placeholder]=\"'Job title / Course name'\"\n valueClass=\"font-title-text\" [testId]=\"'entry-' + i + '-title'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n </ng-container><ng-template #titleTop>\n <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\" [matTooltip]=\"jobTitleTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!jobTitleTooltip\"><lib-field-placeholder\n [value]=\"entry.jobTitle || entry.courseName\" [placeholder]=\"'Job title / Course name'\"\n valueClass=\"font-title-text\" [testId]=\"'entry-' + i + '-title'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div *ngIf=\"showCompany\" class=\"mobile-order-2\" [matTooltip]=\"companyTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!companyTooltip\"><lib-field-placeholder\n [value]=\"entry.companyName || entry.institution\" [placeholder]=\"'Company Name / Institution'\"\n valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-company'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n </ng-template></div>\n <div class=\"header-right\">\n <div class=\"date-range mobile-order-1\" *ngIf=\"showDates\" [matTooltip]=\"dateTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!dateTooltip\"><ng-container\n *ngIf=\"entry.startDate; else endOnly\"><lib-field-placeholder [value]=\"entry.startDate\"\n [placeholder]=\"'Start Date'\" valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-start-date'\"\n [compact]=\"true\"></lib-field-placeholder><span class=\"date-separator\">-</span><lib-field-placeholder\n [value]=\"entry.isPresent ? 'Present' : entry.endDate\" [placeholder]=\"'End Date'\"\n valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-end-date'\"\n [compact]=\"true\"></lib-field-placeholder></ng-container><ng-template #endOnly><lib-field-placeholder\n [value]=\"entry.isPresent ? 'Present' : entry.endDate\" [placeholder]=\"'End Date'\"\n valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-end-date'\"\n [compact]=\"true\"></lib-field-placeholder></ng-template></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\"><al-loader [status]=\"loaderStatus\"\n [size]=\"loaderSize\" [showText]=\"true\" [dataTestId]=\"'entry-' + i + '-loader'\"></al-loader></div>\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\"><label *ngIf=\"showDescriptionLabel\"\n class=\"description-label\">Description </label><lib-field-placeholder [value]=\"desc\"\n [placeholder]=\"'Missing item'\" [padded]=\"true\" valueClass=\"font-text-base\"\n [testId]=\"'entry-' + i + '-desc-' + descIndex\"></lib-field-placeholder></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}.resume-entry.with-timeline{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.resume-entry.with-timeline .entry-separator{flex-basis:100%;order:10}.resume-entry-content{display:flex;flex-direction:column;flex:1;width:100%;gap:12px;padding-top:4px}.timeline-indicator{display:flex;padding:8px 0 0;flex-direction:column;align-items:center;align-self:stretch;position:relative}.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;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"] }]
|
|
4853
|
+
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 <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\"><ng-container\n *ngIf=\"(entry.companyName || entry.institution) && showCompany; else titleTop\">\n <div *ngIf=\"showCompany\" class=\"mobile-order-2\" [matTooltip]=\"companyTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!companyTooltip\"><lib-field-placeholder\n [value]=\"entry.companyName || entry.institution\" [placeholder]=\"'Company Name / Institution'\"\n valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-company'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\" [matTooltip]=\"jobTitleTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!jobTitleTooltip\"><lib-field-placeholder\n [value]=\"entry.jobTitle || entry.courseName\" [placeholder]=\"'Job title / Course name'\"\n valueClass=\"font-title-text\" [testId]=\"'entry-' + i + '-title'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n </ng-container><ng-template #titleTop>\n <div *ngIf=\"showJobTitle\" class=\"mobile-order-3\" [matTooltip]=\"jobTitleTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!jobTitleTooltip\"><lib-field-placeholder\n [value]=\"entry.jobTitle || entry.courseName\" [placeholder]=\"'Job title / Course name'\"\n valueClass=\"font-title-text\" [testId]=\"'entry-' + i + '-title'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n <div *ngIf=\"showCompany\" class=\"mobile-order-2\" [matTooltip]=\"companyTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!companyTooltip\"><lib-field-placeholder\n [value]=\"entry.companyName || entry.institution\" [placeholder]=\"'Company Name / Institution'\"\n valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-company'\"\n [compact]=\"true\"></lib-field-placeholder></div>\n </ng-template></div>\n <div class=\"header-right\">\n <div class=\"date-range mobile-order-1\" *ngIf=\"showDates\" [matTooltip]=\"dateTooltip\"\n [matTooltipPosition]=\"tooltipPosition\" [matTooltipDisabled]=\"!dateTooltip\"><ng-container\n *ngIf=\"entry.startDate; else endOnly\"><lib-field-placeholder [value]=\"entry.startDate\"\n [placeholder]=\"'Start Date'\" valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-start-date'\"\n [compact]=\"true\"></lib-field-placeholder><span class=\"date-separator\">-</span><lib-field-placeholder\n [value]=\"entry.isPresent ? 'Present' : entry.endDate\" [placeholder]=\"'End Date'\"\n valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-end-date'\"\n [compact]=\"true\"></lib-field-placeholder></ng-container><ng-template #endOnly><lib-field-placeholder\n [value]=\"entry.isPresent ? 'Present' : entry.endDate\" [placeholder]=\"'End Date'\"\n valueClass=\"font-text-lg-bold\" [testId]=\"'entry-' + i + '-end-date'\"\n [compact]=\"true\"></lib-field-placeholder></ng-template></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\"><al-loader [status]=\"loaderStatus\"\n [size]=\"loaderSize\" [showText]=\"true\" [dataTestId]=\"'entry-' + i + '-loader'\"></al-loader></div>\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\"><label *ngIf=\"showDescriptionLabel\"\n class=\"description-label\">Description </label><lib-field-placeholder [value]=\"desc\"\n [placeholder]=\"'Missing item'\" [padded]=\"true\" valueClass=\"font-text-base\"\n [testId]=\"'entry-' + i + '-desc-' + descIndex\"></lib-field-placeholder></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.with-timeline{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.resume-entry.with-timeline .entry-separator{flex-basis:100%;order:10}.resume-entry-content{display:flex;flex-direction:column;flex:1;width:100%;gap:12px;padding-top:4px}.timeline-indicator{display:flex;padding:8px 0 0;flex-direction:column;align-items:center;align-self:stretch;position:relative}.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;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"] }]
|
|
4360
4854
|
}], propDecorators: { entries: [{
|
|
4361
4855
|
type: Input
|
|
4362
4856
|
}], showHeader: [{
|
|
@@ -4627,11 +5121,11 @@ class AppToolbarRightComponent {
|
|
|
4627
5121
|
this.setSubroleEvent.emit(!this.currentObj['subrole']);
|
|
4628
5122
|
}
|
|
4629
5123
|
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 }); }
|
|
4630
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppToolbarRightComponent, selector: "app-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\">\n <div class=\"icon-wrapper\"><button *ngIf=\"requiredIcon.sr.display\" 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 svgIcon=\"subrole\"\n class=\"subrole-icon\"></mat-icon></button></div>\n <div class=\"icon-wrapper\"><al-icon-button *ngIf=\"requiredIcon.eye.display\" [icon]=\"eyeIcon\" size=\"xxl\"\n category=\"grey\" [color]=\"'#6B7280'\" [attr.aria-label]=\"eyeLabel\" [attr.title]=\"eyeTitle\"\n (click)=\"onToggleVisibility()\"></al-icon-button></div>\n </div>\n</div
|
|
5124
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppToolbarRightComponent, selector: "app-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\"><button *ngIf=\"requiredIcon.sr.display\" 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 svgIcon=\"subrole\"\n class=\"subrole-icon\"></mat-icon></button></div>\n <div class=\"icon-wrapper\"><al-icon-button *ngIf=\"requiredIcon.eye.display\" [icon]=\"eyeIcon\" size=\"xxl\"\n category=\"grey\" [color]=\"'#6B7280'\" class=\"eye-icon\" [attr.aria-label]=\"eyeLabel\" [attr.title]=\"eyeTitle\"\n (click)=\"onToggleVisibility()\"></al-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: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}: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{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;transition:background-color .2s ease}.toolbar-right-container>.icon-wrapper:first-child:hover{background-color:transparent}.toolbar-right-icons .icon-wrapper:hover{background-color:#bbc7f6}.toolbar-right-container:has(.toolbar-right-icons .icon-wrapper:has(.eye-icon):hover)>.icon-wrapper:first-child{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}.subrole-icon,.eye-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.eye-icon ::ng-deep .icon-btn-icon{color:#6b7280!important}.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: IconButtonComponent, selector: "al-icon-button", inputs: ["icon", "customColor", "iconOutlined", "size", "color", "disabled", "dataTestId"], outputs: ["onClick"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
4631
5125
|
}
|
|
4632
5126
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppToolbarRightComponent, decorators: [{
|
|
4633
5127
|
type: Component,
|
|
4634
|
-
args: [{ selector: 'app-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\">\n <div class=\"icon-wrapper\"><button *ngIf=\"requiredIcon.sr.display\" 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 svgIcon=\"subrole\"\n class=\"subrole-icon\"></mat-icon></button></div>\n <div class=\"icon-wrapper\"><al-icon-button *ngIf=\"requiredIcon.eye.display\" [icon]=\"eyeIcon\" size=\"xxl\"\n category=\"grey\" [color]=\"'#6B7280'\" [attr.aria-label]=\"eyeLabel\" [attr.title]=\"eyeTitle\"\n (click)=\"onToggleVisibility()\"></al-icon-button></div>\n </div>\n</div
|
|
5128
|
+
args: [{ selector: 'app-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\"><button *ngIf=\"requiredIcon.sr.display\" 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 svgIcon=\"subrole\"\n class=\"subrole-icon\"></mat-icon></button></div>\n <div class=\"icon-wrapper\"><al-icon-button *ngIf=\"requiredIcon.eye.display\" [icon]=\"eyeIcon\" size=\"xxl\"\n category=\"grey\" [color]=\"'#6B7280'\" class=\"eye-icon\" [attr.aria-label]=\"eyeLabel\" [attr.title]=\"eyeTitle\"\n (click)=\"onToggleVisibility()\"></al-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: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}: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{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;transition:background-color .2s ease}.toolbar-right-container>.icon-wrapper:first-child:hover{background-color:transparent}.toolbar-right-icons .icon-wrapper:hover{background-color:#bbc7f6}.toolbar-right-container:has(.toolbar-right-icons .icon-wrapper:has(.eye-icon):hover)>.icon-wrapper:first-child{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}.subrole-icon,.eye-icon{width:20px;height:20px;font-size:20px;color:#6b7280}.eye-icon ::ng-deep .icon-btn-icon{color:#6b7280!important}.icon-wrapper al-icon-button{width:20px;height:20px;margin:0 auto}\n"] }]
|
|
4635
5129
|
}], ctorParameters: () => [{ type: i1.MatIconRegistry }, { type: i2.DomSanitizer }], propDecorators: { alwaysShowIcons: [{
|
|
4636
5130
|
type: Input
|
|
4637
5131
|
}], checked: [{
|
|
@@ -4854,155 +5348,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4854
5348
|
}]
|
|
4855
5349
|
}] });
|
|
4856
5350
|
|
|
4857
|
-
/**
|
|
4858
|
-
* Color constants matching colors.scss
|
|
4859
|
-
* These values should be kept in sync with src/lib/styles/colors.scss
|
|
4860
|
-
*/
|
|
4861
|
-
const COLORS = {
|
|
4862
|
-
// Blue scale
|
|
4863
|
-
blue: {
|
|
4864
|
-
'50': '#E5E9FC',
|
|
4865
|
-
'100': '#BBC7F6',
|
|
4866
|
-
'200': '#98ABF1',
|
|
4867
|
-
'300': '#768FED',
|
|
4868
|
-
'400': '#6581EA',
|
|
4869
|
-
'500': '#5473E8', // Base-Blue
|
|
4870
|
-
'600': '#1E46DF',
|
|
4871
|
-
'700': '#0F236F',
|
|
4872
|
-
'800': '#071238',
|
|
4873
|
-
'900': '#04091C',
|
|
4874
|
-
},
|
|
4875
|
-
// Green scale
|
|
4876
|
-
green: {
|
|
4877
|
-
'50': '#D7F3F5',
|
|
4878
|
-
'100': '#AFE6EB',
|
|
4879
|
-
'200': '#87DAE2',
|
|
4880
|
-
'300': '#5FCDD8',
|
|
4881
|
-
'400': '#4BC7D3',
|
|
4882
|
-
'500': '#37C1CE', // Base-Green
|
|
4883
|
-
'600': '#299DA8',
|
|
4884
|
-
'700': '#1F767E',
|
|
4885
|
-
'800': '#154E54',
|
|
4886
|
-
'900': '#0A272A',
|
|
4887
|
-
},
|
|
4888
|
-
// Grey scale
|
|
4889
|
-
grey: {
|
|
4890
|
-
'50': '#FAFBFB',
|
|
4891
|
-
'100': '#ECEDF1',
|
|
4892
|
-
'200': '#DEE0E6',
|
|
4893
|
-
'300': '#D1D3DB',
|
|
4894
|
-
'400': '#C3C5D1',
|
|
4895
|
-
'500': '#A2A6B8', // Base-Grey
|
|
4896
|
-
'600': '#717793',
|
|
4897
|
-
'700': '#4B4F62',
|
|
4898
|
-
'800': '#383B4A',
|
|
4899
|
-
'900': '#252831',
|
|
4900
|
-
},
|
|
4901
|
-
};
|
|
4902
|
-
// Border color options for general-container component
|
|
4903
|
-
const BORDER_COLORS = [
|
|
4904
|
-
COLORS.green['200'], // #87DAE2
|
|
4905
|
-
COLORS.blue['200'], // #98ABF1
|
|
4906
|
-
COLORS.grey['500'], // #A2A6B8
|
|
4907
|
-
COLORS.grey['700'], // #4B4F62
|
|
4908
|
-
COLORS.blue['500'], // #5473E8
|
|
4909
|
-
COLORS.green['500'], // #37C1CE
|
|
4910
|
-
];
|
|
4911
|
-
|
|
4912
|
-
class GeneralContainerComponent {
|
|
4913
|
-
constructor() {
|
|
4914
|
-
/** Background color of the container */
|
|
4915
|
-
this.backgroundColor = '#FFFFFF';
|
|
4916
|
-
/** Padding for the container */
|
|
4917
|
-
this.padding = '16px';
|
|
4918
|
-
/** Border position: 'none', 'top', 'bottom', or 'both' */
|
|
4919
|
-
this.borderPosition = 'none';
|
|
4920
|
-
/** Border color - one of the predefined colors */
|
|
4921
|
-
this.borderColor = BORDER_COLORS[0];
|
|
4922
|
-
/** Border radius */
|
|
4923
|
-
this.borderRadius = '8px';
|
|
4924
|
-
/** Enable box shadow */
|
|
4925
|
-
this.boxShadow = true;
|
|
4926
|
-
/** Available border colors for dropdown */
|
|
4927
|
-
this.borderColors = BORDER_COLORS;
|
|
4928
|
-
}
|
|
4929
|
-
get containerStyles() {
|
|
4930
|
-
const styles = {
|
|
4931
|
-
'background-color': this.backgroundColor,
|
|
4932
|
-
'padding': this.padding,
|
|
4933
|
-
'border-radius': this.borderRadius,
|
|
4934
|
-
};
|
|
4935
|
-
// Width and height
|
|
4936
|
-
if (this.width) {
|
|
4937
|
-
styles['width'] = this.width;
|
|
4938
|
-
}
|
|
4939
|
-
if (this.height) {
|
|
4940
|
-
styles['height'] = this.height;
|
|
4941
|
-
}
|
|
4942
|
-
// Box shadow
|
|
4943
|
-
if (this.boxShadow) {
|
|
4944
|
-
styles['box-shadow'] = this.customBoxShadow || '0 2px 4px 0 rgba(24, 43, 125, 0.15)';
|
|
4945
|
-
}
|
|
4946
|
-
// Auto-detect border position from border radius
|
|
4947
|
-
let effectiveBorderPosition = this.borderPosition;
|
|
4948
|
-
if (this.borderRadius === '0 0 16px 16px') {
|
|
4949
|
-
// Rounded bottom corners - apply bottom border
|
|
4950
|
-
effectiveBorderPosition = 'bottom';
|
|
4951
|
-
}
|
|
4952
|
-
else if (this.borderRadius === '16px 16px 0 0') {
|
|
4953
|
-
// Rounded top corners - apply top border
|
|
4954
|
-
effectiveBorderPosition = 'top';
|
|
4955
|
-
}
|
|
4956
|
-
// Border styles
|
|
4957
|
-
if (effectiveBorderPosition === 'top') {
|
|
4958
|
-
styles['border-top'] = `2px solid ${this.borderColor}`;
|
|
4959
|
-
styles['border-bottom'] = 'none';
|
|
4960
|
-
styles['border-left'] = 'none';
|
|
4961
|
-
styles['border-right'] = 'none';
|
|
4962
|
-
}
|
|
4963
|
-
else if (effectiveBorderPosition === 'bottom') {
|
|
4964
|
-
styles['border-bottom'] = `2px solid ${this.borderColor}`;
|
|
4965
|
-
styles['border-top'] = 'none';
|
|
4966
|
-
styles['border-left'] = 'none';
|
|
4967
|
-
styles['border-right'] = 'none';
|
|
4968
|
-
}
|
|
4969
|
-
else if (effectiveBorderPosition === 'both') {
|
|
4970
|
-
styles['border-top'] = `2px solid ${this.borderColor}`;
|
|
4971
|
-
styles['border-bottom'] = `2px solid ${this.borderColor}`;
|
|
4972
|
-
styles['border-left'] = 'none';
|
|
4973
|
-
styles['border-right'] = 'none';
|
|
4974
|
-
}
|
|
4975
|
-
else {
|
|
4976
|
-
styles['border'] = 'none';
|
|
4977
|
-
}
|
|
4978
|
-
return styles;
|
|
4979
|
-
}
|
|
4980
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GeneralContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4981
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GeneralContainerComponent, isStandalone: true, selector: "al-general-container", inputs: { backgroundColor: "backgroundColor", padding: "padding", width: "width", height: "height", borderPosition: "borderPosition", borderColor: "borderColor", borderRadius: "borderRadius", boxShadow: "boxShadow", customBoxShadow: "customBoxShadow" }, ngImport: i0, template: "<div class=\"general-container\" [ngStyle]=\"containerStyles\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;width:100%}.general-container{width:100%;min-height:100px;box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
4982
|
-
}
|
|
4983
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GeneralContainerComponent, decorators: [{
|
|
4984
|
-
type: Component,
|
|
4985
|
-
args: [{ selector: 'al-general-container', standalone: true, imports: [CommonModule], template: "<div class=\"general-container\" [ngStyle]=\"containerStyles\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;width:100%}.general-container{width:100%;min-height:100px;box-sizing:border-box}\n"] }]
|
|
4986
|
-
}], propDecorators: { backgroundColor: [{
|
|
4987
|
-
type: Input
|
|
4988
|
-
}], padding: [{
|
|
4989
|
-
type: Input
|
|
4990
|
-
}], width: [{
|
|
4991
|
-
type: Input
|
|
4992
|
-
}], height: [{
|
|
4993
|
-
type: Input
|
|
4994
|
-
}], borderPosition: [{
|
|
4995
|
-
type: Input
|
|
4996
|
-
}], borderColor: [{
|
|
4997
|
-
type: Input
|
|
4998
|
-
}], borderRadius: [{
|
|
4999
|
-
type: Input
|
|
5000
|
-
}], boxShadow: [{
|
|
5001
|
-
type: Input
|
|
5002
|
-
}], customBoxShadow: [{
|
|
5003
|
-
type: Input
|
|
5004
|
-
}] } });
|
|
5005
|
-
|
|
5006
5351
|
class GeneralContainerModule {
|
|
5007
5352
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GeneralContainerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5008
5353
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GeneralContainerModule, imports: [GeneralContainerComponent], exports: [GeneralContainerComponent] }); }
|
|
@@ -5060,5 +5405,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5060
5405
|
* Generated bundle index. Do not edit.
|
|
5061
5406
|
*/
|
|
5062
5407
|
|
|
5063
|
-
export { ActionBarWrapperComponent, AiApplyBarComponent, AlTabComponent, AllsorterLibComponent, AllsorterLibService, AppToolbarComponent, AppToolbarModule, AppToolbarRightComponent, AppToolbarRightModule, ButtonComponent, ButtonModule, CandidateSectionComponent, CandidateSectionModule, CheckboxComponent, CheckboxModule, CustomEditorComponent, CustomEditorDemoComponent, CustomEditorModule, DateRangeComponent, DateRangeModule, ExperienceSectionComponent, ExperienceSectionModule, FieldPlaceholderComponent, FieldPlaceholderModule, GeneralContainerComponent, GeneralContainerModule, IconButtonComponent, InputComponent, InputModule, LoaderComponent, LoaderModule, ModalComponent, NewTypographyComponent, RadioComponent, RadioModule, ResponsiveColumnsComponent, ResponsiveColumnsModule, ResponsiveLayoutComponent, ResponsiveLayoutModule, ResumeEntriesComponent, ResumeEntriesModule, ResumeHeaderComponent, ResumeHeaderModule, SharedPopupModalModule, SlideToggleComponent, SlideToggleModule, TabsComponent, TabsModule, ToggleButtonsComponent, ToggleButtonsModule, TooltipComponent, TooltipModule };
|
|
5408
|
+
export { ActionBarWrapperComponent, AiApplyBarComponent, AlTabComponent, AllsorterLibComponent, AllsorterLibService, AppToolbarComponent, AppToolbarModule, AppToolbarRightComponent, AppToolbarRightModule, ButtonComponent, ButtonModule, CandidateSectionComponent, CandidateSectionModule, CheckboxComponent, CheckboxModule, CustomEditorComponent, CustomEditorDemoComponent, CustomEditorModule, DateRangeComponent, DateRangeModule, ExperienceSectionComponent, ExperienceSectionModule, FieldPlaceholderComponent, FieldPlaceholderModule, GeneralContainerComponent, GeneralContainerModule, IconButtonComponent, InputComponent, InputModule, LoaderComponent, LoaderModule, ModalComponent, NewResumeHeaderComponent, NewResumeHeaderModule, NewTypographyComponent, RadioComponent, RadioModule, ResponsiveColumnsComponent, ResponsiveColumnsModule, ResponsiveLayoutComponent, ResponsiveLayoutModule, ResumeEntriesComponent, ResumeEntriesModule, ResumeHeaderComponent, ResumeHeaderModule, SharedPopupModalModule, SlideToggleComponent, SlideToggleModule, TabsComponent, TabsModule, ToggleButtonsComponent, ToggleButtonsModule, TooltipComponent, TooltipModule };
|
|
5064
5409
|
//# sourceMappingURL=allsorter-ui-components.mjs.map
|