@allsorter/ui-components 0.0.369 → 0.0.370
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 +109 -29
- package/fesm2022/allsorter-ui-components.mjs.map +1 -1
- package/lib/newresumeheader/newresumeheader.component.d.ts +19 -0
- package/lib/utils/image-utils.d.ts +8 -0
- package/package.json +1 -1
- package/src/lib/button/button.component.scss +8 -5
- package/src/lib/newresumeheader/newresumeheader.component.html +5 -4
|
@@ -456,7 +456,13 @@ class ButtonComponent {
|
|
|
456
456
|
'multi-drag-drop', 'arrow_downward',
|
|
457
457
|
'subrole', 'subrole_active',
|
|
458
458
|
'hide_section', 'unhide_section',
|
|
459
|
-
'edit_icon', 'handle', 'search'
|
|
459
|
+
'edit_icon', 'handle', 'search',
|
|
460
|
+
'add-section', 'add_left-icon_section', 'add-right_icon_section',
|
|
461
|
+
'font_case_icon',
|
|
462
|
+
'retry_AI_icon',
|
|
463
|
+
'ordering_icon',
|
|
464
|
+
'collapse_icon',
|
|
465
|
+
'collapse_icon'
|
|
460
466
|
]);
|
|
461
467
|
this.stateClasses = {
|
|
462
468
|
default: 'btn-default',
|
|
@@ -481,11 +487,11 @@ class ButtonComponent {
|
|
|
481
487
|
this.menuTrigger?.closeMenu();
|
|
482
488
|
}
|
|
483
489
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, deps: [{ token: i1.MatIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
484
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, isStandalone: true, selector: "al-button", inputs: { state: "state", disabled: "disabled", color: "color", category: "category", outline: "outline", labelText: "labelText", label: "label", arialabel: "arialabel", iconOnly: "iconOnly", leftIcon: "leftIcon", rightIcon: "rightIcon", icon: "icon", iconOutlined: "iconOutlined", outlined: "outlined", size: "size", buttonType: "buttonType", fontClass: "fontClass", dataTestId: "dataTestId", tooltip: "tooltip", tooltipPosition: "tooltipPosition", dropdownItems: "dropdownItems", dropdownOptions: "dropdownOptions", hasDropDown: "hasDropDown", dropdown: "dropdown", hasDropdown: "hasDropdown", isDropdown: "isDropdown" }, outputs: { onClick: "onClick", onHover: "onHover", onMouseLeave: "onMouseLeave", optionSelect: "optionSelect" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Regular button types -->\n<ng-container *ngIf=\"!(hasDropDown || buttonType === 'dropdown'); else dropdownTpl\">\n <button mat-flat-button class=\"btn custom-button\" [class]=\"effectiveFontClass\" [attr.data-test-id]=\"dataTestId\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-circle': buttonType === 'icon-circle',\n 'blue': color === 'blue',\n 'green': color === 'green',\n 'grey': color === 'grey',\n 'error': color === 'error',\n 'success': color === 'success',\n 'gradient': color === 'gradient',\n 'white': color === 'white',\n 'btn-outlined': outline,\n 'btn-default': effectiveState === 'default',\n 'btn-hover': effectiveState === 'hover',\n 'btn-pressed': effectiveState === 'pressed',\n 'btn-disabled': effectiveState === 'disabled'\n }\" [disabled]=\"isDisabled\" [matTooltip]=\"hasTooltip ? tooltip : null\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!hasTooltip\" (click)=\"onClick.emit($event)\" (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\" [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\">\n\n <!-- Left Icon (only if provided; for icon-circle prefer `icon` over `leftIcon`) -->\n <ng-container *ngIf=\"(buttonType === 'icon-circle' ? (icon || leftIcon) : leftIcon)?.trim() as leftIconText\">\n <ng-container *ngIf=\"getLeftSvgIconName() as svgIconName; else leftIconFont\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"left-icon\"></mat-icon>\n </ng-container>\n <ng-template #leftIconFont>\n <mat-icon [fontSet]=\"getLeftIconFontSet()\" class=\"left-icon\">\n {{ getLeftIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n\n <!-- Label (hidden when iconOnly is true) -->\n <span *ngIf=\"!iconOnly && buttonType !== 'icon-circle'\" class=\"button-label\">\n {{ labelText || '' }}\n </span>\n\n <!-- Right icon (only if provided) -->\n <ng-container *ngIf=\"rightIcon?.trim() as rightIconText\">\n <ng-container *ngIf=\"getRightSvgIconName() as svgIconName; else rightIconFont\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"right-icon\"></mat-icon>\n </ng-container>\n <ng-template #rightIconFont>\n <mat-icon [fontSet]=\"getRightIconFontSet()\" class=\"right-icon\">\n {{ getRightIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n </button>\n</ng-container>\n\n<!-- Dropdown button template -->\n<ng-template #dropdownTpl>\n <button mat-flat-button class=\"btn custom-button\" [class]=\"effectiveFontClass\" [attr.data-test-id]=\"dataTestId\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-label': true,\n 'blue': color === 'blue',\n 'green': color === 'green',\n 'grey': color === 'grey',\n 'error': color === 'error',\n 'success': color === 'success',\n 'gradient': color === 'gradient',\n 'white': color === 'white',\n 'btn-outlined': outline,\n 'btn-default': effectiveState === 'default',\n 'btn-hover': effectiveState === 'hover',\n 'btn-pressed': effectiveState === 'pressed',\n 'btn-disabled': effectiveState === 'disabled'\n }\" [disabled]=\"isDisabled\" [matTooltip]=\"hasTooltip ? tooltip : null\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!hasTooltip\" (mouseenter)=\"onHover.emit($event)\" (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\" [style.gap.px]=\"computeGap()\"\n [matMenuTriggerFor]=\"menu\">\n\n <!-- Left Icon (optional) -->\n <ng-container *ngIf=\"leftIcon?.trim() as leftIconText\">\n <ng-container *ngIf=\"getSvgIconName(leftIcon) as svgIconName; else leftIconFontDropdown\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"left-icon\"></mat-icon>\n </ng-container>\n <ng-template #leftIconFontDropdown>\n <mat-icon [fontSet]=\"getLeftIconFontSet()\" class=\"left-icon\">\n {{ getLeftIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n\n <!-- Label -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\">\n {{ labelText || '' }}\n </span>\n\n <!-- Dropdown arrow icon -->\n <mat-icon class=\"right-icon\">arrow_drop_down</mat-icon>\n </button>\n</ng-template>\n\n<!-- Mat Menu kept outside conditional to avoid portal reattachment across toggles -->\n<mat-menu #menu=\"matMenu\" panelClass=\"custom-dropdown-menu\">\n <button mat-menu-item *ngFor=\"let opt of dropdownItems\" (click)=\"selectOption(opt)\" [ngClass]=\"effectiveFontClass\">\n {{ opt.label || opt }}\n </button>\n</mat-menu>\n\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=network_node\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.material-icons-outlined{font-family:Material Icons Outlined;font-weight:400;font-style:normal;font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.mdc-button.btn{border-radius:4px;display:flex;align-items:center;cursor:pointer;border:none;transition:background .2s,border .2s,transform .1s;min-width:auto!important;gap:8px;height:auto!important}.mdc-button.btn-primary1{background-color:#5473e8;color:#fff}.mdc-button.btn-primary2{background-color:#37c1ce;color:#fff}.mdc-button.btn-secondary{background-color:#717793;color:#fff}.mdc-button.btn-destructive{background-color:#e854a4;color:#fff}.mdc-button.btn-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.btn-primary2:hover{background-color:#4bc7d3!important}.mdc-button.btn-primary2:active{background-color:#299da8!important}.mdc-button.btn-primary2:outlined{background-color:#fff;border-radius:4px;border:1px solid #37C1CE}.mdc-button.btn-primary1:hover{background-color:#6581ea!important}.mdc-button.btn-primary1:active{background-color:#1e46df!important}.mdc-button.btn-primary1:outlined{background-color:#fff;border-radius:4px;border:1px solid #5473E8}.mdc-button.btn-secondary:hover{background-color:#4b4f62!important}.mdc-button.btn-secondary:active{background-color:#252831!important}.mdc-button.btn-secondary:outlined{background-color:#fff;border-radius:4px;border:1px solid #383B4A}.mdc-button.btn-destructive:hover{background-color:#ef87bf!important}.mdc-button.btn-destructive:active{background-color:#e22a8e!important}.mdc-button.btn-destructive:outlined{background-color:#fff;border-radius:4px;border:1px solid #E854A4}.mdc-button.btn-gradient:hover{background:linear-gradient(0deg,#fafafd4d,#fafafd4d),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)!important}.mdc-button.btn-gradient:active{background:linear-gradient(0deg,#383b4a80,#383b4a80),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)!important}.mdc-button.btn-disabled{border:none!important;opacity:.4;cursor:not-allowed;pointer-events:none}.blue{background-color:#5473e8!important;color:#fff}.blue.btn-hover,.blue:hover{background-color:#6581ea!important}.blue.btn-pressed,.blue:active{background-color:#1e46df!important}.green{background-color:#37c1ce!important;color:#fff}.green.btn-hover,.green:hover{background-color:#4bc7d3!important}.green.btn-pressed,.green:active{background-color:#299da8!important}.grey{background-color:#717793!important;color:#fff}.grey.btn-hover,.grey:hover{background-color:#4b4f62!important}.grey.btn-pressed,.grey:active{background-color:#252831!important}.error{background-color:#e854a4!important;color:#fff!important}.error.btn-hover,.error:hover{background-color:#ef87bf!important;color:#fff!important}.error.btn-pressed,.error:active{background-color:#e22a8e!important;color:#fff!important}.success{background-color:#00ad83!important;color:#fff!important}.success.btn-hover,.success:hover{background-color:#009873!important;color:#fff!important}.success.btn-pressed,.success:active{background-color:#007f61!important;color:#fff!important}.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff!important}.gradient.btn-hover,.gradient:hover{opacity:.9}.gradient.btn-pressed,.gradient:active{opacity:.8}.white{background-color:#fff!important;color:#383b4a!important}.white.btn-hover,.white:hover{background-color:#ecedf1!important}.white.btn-pressed,.white:active{background-color:#dee0e6!important}.blue.btn-outlined{background-color:#fff!important;color:#5473e8!important;box-shadow:inset 0 0 0 1px #5473e8!important}.blue.btn-outlined.btn-hover,.blue.btn-outlined:hover{background-color:#6581ea!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.blue.btn-outlined.btn-pressed,.blue.btn-outlined:active{background-color:#1e46df!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.green.btn-outlined{background-color:#fff!important;color:#37c1ce!important;box-shadow:inset 0 0 0 1px #37c1ce!important}.green.btn-outlined.btn-hover,.green.btn-outlined:hover{background-color:#4bc7d3!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.green.btn-outlined.btn-pressed,.green.btn-outlined:active{background-color:#299da8!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.grey.btn-outlined{background-color:#fff!important;color:#383b4a!important;box-shadow:inset 0 0 0 1px #383b4a!important}.grey.btn-outlined.btn-hover,.grey.btn-outlined:hover{background-color:#4b4f62!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.grey.btn-outlined.btn-pressed,.grey.btn-outlined:active{background-color:#252831!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined{background-color:#fff!important;color:#e854a4!important;box-shadow:inset 0 0 0 1px #e854a4!important}.error.btn-outlined.btn-hover,.error.btn-outlined:hover{background-color:#ef87bf!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined.btn-pressed,.error.btn-outlined:active{background-color:#e22a8e!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined mat-icon,.error.btn-outlined .button-label{color:#e854a4!important}.error.btn-outlined:hover mat-icon,.error.btn-outlined:hover .button-label,.error.btn-outlined:active mat-icon,.error.btn-outlined:active .button-label{color:#fff!important}.success.btn-outlined{background-color:#fff!important;color:#00ad83!important;box-shadow:inset 0 0 0 1px #00ad83!important}.success.btn-outlined.btn-hover,.success.btn-outlined:hover{background-color:#009873!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.success.btn-outlined.btn-pressed,.success.btn-outlined:active{background-color:#007f61!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.success.btn-outlined mat-icon,.success.btn-outlined .button-label{color:#00ad83!important}.success.btn-outlined:hover mat-icon,.success.btn-outlined:hover .button-label,.success.btn-outlined:active mat-icon,.success.btn-outlined:active .button-label{color:#fff!important}.white.btn-outlined{background-color:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 1px #fff!important}.white.btn-outlined.btn-hover,.white.btn-outlined:hover,.white.btn-outlined.btn-pressed,.white.btn-outlined:active{background-color:transparent!important;color:#fff!important}.btn.custom-button>*+*{margin-left:8px}.two-icon-label{padding:4px 12px!important}button.two-icon-label .mat-icon{width:20px!important;height:20px!important}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format(\"woff2\")}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.left-icon{order:0}.right-icon{order:2}mat-icon.mat-icon{margin:0!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;vertical-align:middle}.left-icon,.right-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0}.left-icon ::ng-deep svg,.right-icon ::ng-deep svg{fill:currentColor!important}.white.btn-outlined .left-icon ::ng-deep svg,.white.btn-outlined .right-icon ::ng-deep svg{fill:currentColor!important}.size-header{font-size:20px;padding:4px 12px!important}.size-xs{font-size:12px;padding:8px 12px!important}.size-sm{font-size:14px;padding:8px 12px!important}.size-base{font-size:14px;padding:10px 16px!important}.size-l{font-size:16px;padding:12px 20px!important}.size-xl{font-size:16px;padding:14px 24px!important}.size-header .mat-icon{font-size:20px;height:20px;width:20px;display:inline-flex!important;align-items:center!important;justify-content:center!important}.size-header .mat-icon ::ng-deep svg{width:20px!important;height:20px!important}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px;height:16px;width:16px}.size-l .mat-icon,.size-xl .mat-icon{font-size:20px;height:20px;width:20px}.btn.size-header{gap:4px!important;padding:4px 12px!important}::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,::ng-deep .custom-dropdown-menu.mat-menu-panel{padding:0;border-radius:8px;box-shadow:0 2px 6px #00000026;border:1px solid rgba(0,0,0,.12)}::ng-deep .custom-dropdown-menu .mat-mdc-menu-content,::ng-deep .custom-dropdown-menu .mat-menu-content{padding:0}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item{font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.04px;height:56px;padding:16px 24px;color:var(--Gray-700, #414651);transition:background .2s ease-in-out}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,::ng-deep .custom-dropdown-menu .mat-menu-item:hover{background:#f7f9fe!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:focus,::ng-deep .custom-dropdown-menu .mat-menu-item:focus,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.cdk-keyboard-focused,::ng-deep .custom-dropdown-menu .mat-menu-item.cdk-keyboard-focused{background:#e5e9fc!important;outline:none}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:active,::ng-deep .custom-dropdown-menu .mat-menu-item:active{background:#f7f9fe!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true],::ng-deep .custom-dropdown-menu .mat-menu-item[aria-selected=true],::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted,::ng-deep .custom-dropdown-menu .mat-menu-item.mat-menu-item-highlighted{background:#f7f9fe!important;color:#5473e8!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true] .mat-mdc-menu-item-text,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true] span,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span{color:#5473e8!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item+.mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item+.mat-menu-item{border-top:1px solid #EAECEE}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #ffffff !important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content,::ng-deep .mat-menu-panel .mat-menu-content{background-color:#fff!important}::ng-deep .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item{color:var(--Gray-700, #414651)!important;font-family:Roboto,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:400!important;line-height:140%!important;letter-spacing:.04px!important;--mat-menu-item-label-text-color: var(--Gray-700, #414651) !important;--mdc-list-list-item-label-text-color: var(--Gray-700, #414651) !important}::ng-deep .mat-mdc-menu-item .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item span{color:var(--Gray-700, #414651)!important;font-family:Roboto,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:400!important;line-height:140%!important;letter-spacing:.04px!important}.cdk-overlay-pane{z-index:1000!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface,.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface,.cdk-overlay-pane .mat-menu-panel{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #fff !important}.mat-mdc-menu-panel,.mdc-menu-surface,.mat-menu-panel{--mdc-theme-surface: #ffffff !important;background-color:#fff!important}.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface{--mdc-menu-container-color: #fff !important}.cdk-overlay-pane .mat-menu-panel,.cdk-overlay-pane .mat-mdc-menu-content,.cdk-overlay-pane .mat-menu-content{background:#fff!important}button.icon-circle{width:auto!important;height:auto!important;border-radius:50%!important;aspect-ratio:1/1;display:inline-flex;align-items:center;vertical-align:middle;line-height:0!important;min-width:0!important;justify-content:center;padding:6px!important}.size-small.icon-circle{padding:4px!important}.size-medium.icon-circle{padding:8px!important}.size-large.icon-circle{padding:12px!important}.size-header.icon-circle{padding:4px!important}.size-header.icon-circle .mat-icon{width:10px;height:10px;font-size:10px}.size-xs.icon-circle{padding:4px!important}.size-xs.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-xs.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-sm.icon-circle{padding:10px!important;height:32px!important;width:32px!important}.size-sm.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-sm.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-base.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-l.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-xl.icon-circle{padding:14px!important}.size-xl.icon-circle .mat-icon{width:20px;height:20px;font-size:20px}.icon-xs{padding:4px!important}.mdc-button.blue{background-color:#5473e8;color:#fff}.mdc-button.blue:hover{background-color:#6581ea}.mdc-button.blue:active{background-color:#1e46df}.mdc-button.green{background-color:#37c1ce;color:#fff}.mdc-button.green:hover{background-color:#4bc7d3}.mdc-button.green:active{background-color:#299da8}.mdc-button.grey{background-color:#717793;color:#fff}.mdc-button.grey:hover{background-color:#4b4f62}.mdc-button.grey:active{background-color:#252831}.mdc-button.error{background-color:#e854a4;color:#fff!important}.mdc-button.error:hover{background-color:#ef87bf;color:#fff!important}.mdc-button.error:active{background-color:#e22a8e;color:#fff!important}.mdc-button.success{background-color:#00ad83;color:#fff!important}.mdc-button.success:hover{background-color:#009873;color:#fff!important}.mdc-button.success:active{background-color:#007f61;color:#fff!important}.mdc-button.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.gradient:hover{background:linear-gradient(0deg,#fafafd4d,#fafafd4d),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.gradient:active{background:linear-gradient(0deg,#383b4a80,#383b4a80),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.disabled,.mdc-button:disabled{opacity:.4;cursor:not-allowed!important;pointer-events:none}.mdc-button.blue-no-outline{background-color:#fff;color:#5473e8;border:1px solid #5473E8}.mdc-button.blue-no-outline:hover{background-color:#6581ea;color:#fff}.mdc-button.blue-no-outline:active{background-color:#1e46df;color:#fff}.mdc-button.white-colour-outline{background-color:transparent;color:#fff;border:1px solid #fff}.mdc-button.white-colour-outline:hover,.mdc-button.white-colour-outline:active{background-color:transparent;color:#fff}.mdc-button.green-no-outline{background-color:#fff;color:#37c1ce;border:1px solid #37C1CE}.mdc-button.green-no-outline:hover{background-color:#4bc7d3;color:#fff}.mdc-button.green-no-outline:active{background-color:#299da8;color:#fff}.mdc-button.grey-no-outline{background-color:#fff;color:#383b4a;border:1px solid #383B4A}.mdc-button.grey-no-outline:hover{background-color:#4b4f62;color:#fff}.mdc-button.grey-no-outline:active{background-color:#252831;color:#fff}.mdc-button.error-no-outline{background-color:#fff;color:#e854a4;border:1px solid #E854A4}.mdc-button.error-no-outline:hover{background-color:#ef87bf;color:#fff}.mdc-button.error-no-outline:active{background-color:#e22a8e;color:#fff}.mdc-button.blue-colour-outline{background-color:#fff;color:#5473e8;box-shadow:inset 0 0 0 1px #5473e8}.mdc-button.blue-colour-outline:hover{background-color:#6581ea;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.blue-colour-outline:active{background-color:#1e46df;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.green-colour-outline{background-color:#fff;color:#37c1ce;box-shadow:inset 0 0 0 1px #37c1ce}.mdc-button.green-colour-outline:hover{background-color:#4bc7d3;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.green-colour-outline:active{background-color:#299da8;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.grey-colour-outline{background-color:#fff;color:#383b4a;box-shadow:inset 0 0 0 1px #383b4a}.mdc-button.grey-colour-outline:hover{background-color:#4b4f62;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.grey-colour-outline:active{background-color:#252831;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline{background-color:#fff;color:#e854a4!important;box-shadow:inset 0 0 0 1px #e854a4}.mdc-button.error-colour-outline:hover{background-color:#ef87bf;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline:active{background-color:#e22a8e;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline mat-icon,.mdc-button.error-colour-outline .button-label{color:#e854a4!important}.mdc-button.error-colour-outline:hover mat-icon,.mdc-button.error-colour-outline:hover .button-label,.mdc-button.error-colour-outline:active mat-icon,.mdc-button.error-colour-outline:active .button-label{color:#fff!important}.mdc-button.success-colour-outline{background-color:#fff;color:#00ad83!important;box-shadow:inset 0 0 0 1px #00ad83}.mdc-button.success-colour-outline:hover{background-color:#009873;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.success-colour-outline:active{background-color:#007f61;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.success-colour-outline mat-icon,.mdc-button.success-colour-outline .button-label{color:#00ad83!important}.mdc-button.success-colour-outline:hover mat-icon,.mdc-button.success-colour-outline:hover .button-label,.mdc-button.success-colour-outline:active mat-icon,.mdc-button.success-colour-outline:active .button-label{color:#fff!important}::ng-deep .cdk-overlay-pane{border-radius:8px!important;box-shadow:0 2px 6px #00000026!important}::ng-deep .mat-mdc-menu-panel{padding:4px 0!important;background-color:#fff!important;min-width:180px!important;border-radius:8px!important;box-shadow:none!important}::ng-deep .mat-mdc-menu-item{font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.04px;color:var(--Gray-700, #414651);padding:12px 16px;border-radius:0!important;transition:background .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f7f9fe!important}::ng-deep .mat-mdc-menu-item:focus,::ng-deep .mat-mdc-menu-item.cdk-keyboard-focused{background-color:#e5e9fc!important;outline:none}::ng-deep .mat-mdc-menu-item[aria-selected=true],::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted{background-color:#f7f9fe!important;color:#5473e8!important}::ng-deep .mat-mdc-menu-item[aria-selected=true] .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item[aria-selected=true] span,::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span{color:#5473e8!important}.size-header .button-label{display:none!important}.size-header .mat-icon,.size-header .left-icon,.size-header .right-icon{display:inline-flex!important;visibility:visible!important;opacity:1!important}.size-header ::ng-deep .mdc-button__label{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px}::ng-deep .mat-mdc-button-touch-target{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
490
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, isStandalone: true, selector: "al-button", inputs: { state: "state", disabled: "disabled", color: "color", category: "category", outline: "outline", labelText: "labelText", label: "label", arialabel: "arialabel", iconOnly: "iconOnly", leftIcon: "leftIcon", rightIcon: "rightIcon", icon: "icon", iconOutlined: "iconOutlined", outlined: "outlined", size: "size", buttonType: "buttonType", fontClass: "fontClass", dataTestId: "dataTestId", tooltip: "tooltip", tooltipPosition: "tooltipPosition", dropdownItems: "dropdownItems", dropdownOptions: "dropdownOptions", hasDropDown: "hasDropDown", dropdown: "dropdown", hasDropdown: "hasDropdown", isDropdown: "isDropdown" }, outputs: { onClick: "onClick", onHover: "onHover", onMouseLeave: "onMouseLeave", optionSelect: "optionSelect" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Regular button types -->\n<ng-container *ngIf=\"!(hasDropDown || buttonType === 'dropdown'); else dropdownTpl\">\n <button mat-flat-button class=\"btn custom-button\" [class]=\"effectiveFontClass\" [attr.data-test-id]=\"dataTestId\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-circle': buttonType === 'icon-circle',\n 'blue': color === 'blue',\n 'green': color === 'green',\n 'grey': color === 'grey',\n 'error': color === 'error',\n 'success': color === 'success',\n 'gradient': color === 'gradient',\n 'white': color === 'white',\n 'btn-outlined': outline,\n 'btn-default': effectiveState === 'default',\n 'btn-hover': effectiveState === 'hover',\n 'btn-pressed': effectiveState === 'pressed',\n 'btn-disabled': effectiveState === 'disabled'\n }\" [disabled]=\"isDisabled\" [matTooltip]=\"hasTooltip ? tooltip : null\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!hasTooltip\" (click)=\"onClick.emit($event)\" (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\" [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\">\n\n <!-- Left Icon (only if provided; for icon-circle prefer `icon` over `leftIcon`) -->\n <ng-container *ngIf=\"(buttonType === 'icon-circle' ? (icon || leftIcon) : leftIcon)?.trim() as leftIconText\">\n <ng-container *ngIf=\"getLeftSvgIconName() as svgIconName; else leftIconFont\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"left-icon\"></mat-icon>\n </ng-container>\n <ng-template #leftIconFont>\n <mat-icon [fontSet]=\"getLeftIconFontSet()\" class=\"left-icon\">\n {{ getLeftIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n\n <!-- Label (hidden when iconOnly is true) -->\n <span *ngIf=\"!iconOnly && buttonType !== 'icon-circle'\" class=\"button-label\">\n {{ labelText || '' }}\n </span>\n\n <!-- Right icon (only if provided) -->\n <ng-container *ngIf=\"rightIcon?.trim() as rightIconText\">\n <ng-container *ngIf=\"getRightSvgIconName() as svgIconName; else rightIconFont\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"right-icon\"></mat-icon>\n </ng-container>\n <ng-template #rightIconFont>\n <mat-icon [fontSet]=\"getRightIconFontSet()\" class=\"right-icon\">\n {{ getRightIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n </button>\n</ng-container>\n\n<!-- Dropdown button template -->\n<ng-template #dropdownTpl>\n <button mat-flat-button class=\"btn custom-button\" [class]=\"effectiveFontClass\" [attr.data-test-id]=\"dataTestId\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-label': true,\n 'blue': color === 'blue',\n 'green': color === 'green',\n 'grey': color === 'grey',\n 'error': color === 'error',\n 'success': color === 'success',\n 'gradient': color === 'gradient',\n 'white': color === 'white',\n 'btn-outlined': outline,\n 'btn-default': effectiveState === 'default',\n 'btn-hover': effectiveState === 'hover',\n 'btn-pressed': effectiveState === 'pressed',\n 'btn-disabled': effectiveState === 'disabled'\n }\" [disabled]=\"isDisabled\" [matTooltip]=\"hasTooltip ? tooltip : null\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!hasTooltip\" (mouseenter)=\"onHover.emit($event)\" (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\" [style.gap.px]=\"computeGap()\"\n [matMenuTriggerFor]=\"menu\">\n\n <!-- Left Icon (optional) -->\n <ng-container *ngIf=\"leftIcon?.trim() as leftIconText\">\n <ng-container *ngIf=\"getSvgIconName(leftIcon) as svgIconName; else leftIconFontDropdown\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"left-icon\"></mat-icon>\n </ng-container>\n <ng-template #leftIconFontDropdown>\n <mat-icon [fontSet]=\"getLeftIconFontSet()\" class=\"left-icon\">\n {{ getLeftIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n\n <!-- Label -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\">\n {{ labelText || '' }}\n </span>\n\n <!-- Dropdown arrow icon -->\n <mat-icon class=\"right-icon\">arrow_drop_down</mat-icon>\n </button>\n</ng-template>\n\n<!-- Mat Menu kept outside conditional to avoid portal reattachment across toggles -->\n<mat-menu #menu=\"matMenu\" panelClass=\"custom-dropdown-menu\">\n <button mat-menu-item *ngFor=\"let opt of dropdownItems\" (click)=\"selectOption(opt)\" [ngClass]=\"effectiveFontClass\">\n {{ opt.label || opt }}\n </button>\n</mat-menu>\n\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=network_node\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.material-icons-outlined{font-family:Material Icons Outlined;font-weight:400;font-style:normal;font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.mdc-button.btn{border-radius:8px;display:flex;align-items:center;cursor:pointer;border:none;transition:background .2s,border .2s,transform .1s;min-width:auto!important;gap:8px;height:auto!important}.mdc-button.btn-primary1{background-color:#5473e8;color:#fff}.mdc-button.btn-primary2{background-color:#37c1ce;color:#fff}.mdc-button.btn-secondary{background-color:#717793;color:#fff}.mdc-button.btn-destructive{background-color:#e854a4;color:#fff}.mdc-button.btn-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.btn-primary2:hover{background-color:#4bc7d3!important}.mdc-button.btn-primary2:active{background-color:#299da8!important}.mdc-button.btn-primary2:outlined{background-color:#fff;border-radius:4px;border:1px solid #37C1CE}.mdc-button.btn-primary1:hover{background-color:#6581ea!important}.mdc-button.btn-primary1:active{background-color:#1e46df!important}.mdc-button.btn-primary1:outlined{background-color:#fff;border-radius:4px;border:1px solid #5473E8}.mdc-button.btn-secondary:hover{background-color:#4b4f62!important}.mdc-button.btn-secondary:active{background-color:#252831!important}.mdc-button.btn-secondary:outlined{background-color:#fff;border-radius:4px;border:1px solid #383B4A}.mdc-button.btn-destructive:hover{background-color:#ef87bf!important}.mdc-button.btn-destructive:active{background-color:#e22a8e!important}.mdc-button.btn-destructive:outlined{background-color:#fff;border-radius:4px;border:1px solid #E854A4}.mdc-button.btn-gradient:hover{background:linear-gradient(0deg,#fafafd4d,#fafafd4d),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)!important}.mdc-button.btn-gradient:active{background:linear-gradient(0deg,#383b4a80,#383b4a80),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)!important}.mdc-button.btn-disabled{border:none!important;opacity:.4;cursor:not-allowed;pointer-events:none}.blue{background-color:#5473e8!important;color:#fff}.blue.btn-hover,.blue:hover{background-color:#6581ea!important}.blue.btn-pressed,.blue:active{background-color:#1e46df!important}.green{background-color:#37c1ce!important;color:#fff}.green.btn-hover,.green:hover{background-color:#4bc7d3!important}.green.btn-pressed,.green:active{background-color:#299da8!important}.grey{background-color:#717793!important;color:#fff}.grey.btn-hover,.grey:hover{background-color:#4b4f62!important}.grey.btn-pressed,.grey:active{background-color:#252831!important}.error{background-color:#e854a4!important;color:#fff!important}.error.btn-hover,.error:hover{background-color:#ef87bf!important;color:#fff!important}.error.btn-pressed,.error:active{background-color:#e22a8e!important;color:#fff!important}.success{background-color:#00ad83!important;color:#fff!important}.success.btn-hover,.success:hover{background-color:#009873!important;color:#fff!important}.success.btn-pressed,.success:active{background-color:#007f61!important;color:#fff!important}.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff!important}.gradient.btn-hover,.gradient:hover{opacity:.9}.gradient.btn-pressed,.gradient:active{opacity:.8}.white{background-color:#fff!important;color:#383b4a!important}.white.btn-hover,.white:hover{background-color:#ecedf1!important}.white.btn-pressed,.white:active{background-color:#dee0e6!important}.blue.btn-outlined{background-color:#fff!important;color:#5473e8!important;box-shadow:inset 0 0 0 1px #5473e8!important}.blue.btn-outlined.btn-hover,.blue.btn-outlined:hover{background-color:#6581ea!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.blue.btn-outlined.btn-pressed,.blue.btn-outlined:active{background-color:#1e46df!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.green.btn-outlined{background-color:#fff!important;color:#37c1ce!important;box-shadow:inset 0 0 0 1px #37c1ce!important}.green.btn-outlined.btn-hover,.green.btn-outlined:hover{background-color:#4bc7d3!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.green.btn-outlined.btn-pressed,.green.btn-outlined:active{background-color:#299da8!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.grey.btn-outlined{background-color:#fff!important;color:#383b4a!important;box-shadow:inset 0 0 0 1px #383b4a!important}.grey.btn-outlined.btn-hover,.grey.btn-outlined:hover{background-color:#4b4f62!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.grey.btn-outlined.btn-pressed,.grey.btn-outlined:active{background-color:#252831!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined{background-color:#fff!important;color:#e854a4!important;box-shadow:inset 0 0 0 1px #e854a4!important}.error.btn-outlined.btn-hover,.error.btn-outlined:hover{background-color:#ef87bf!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined.btn-pressed,.error.btn-outlined:active{background-color:#e22a8e!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined mat-icon,.error.btn-outlined .button-label{color:#e854a4!important}.error.btn-outlined:hover mat-icon,.error.btn-outlined:hover .button-label,.error.btn-outlined:active mat-icon,.error.btn-outlined:active .button-label{color:#fff!important}.success.btn-outlined{background-color:#fff!important;color:#00ad83!important;box-shadow:inset 0 0 0 1px #00ad83!important}.success.btn-outlined.btn-hover,.success.btn-outlined:hover{background-color:#009873!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.success.btn-outlined.btn-pressed,.success.btn-outlined:active{background-color:#007f61!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.success.btn-outlined mat-icon,.success.btn-outlined .button-label{color:#00ad83!important}.success.btn-outlined:hover mat-icon,.success.btn-outlined:hover .button-label,.success.btn-outlined:active mat-icon,.success.btn-outlined:active .button-label{color:#fff!important}.white.btn-outlined{background-color:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 1px #fff!important}.white.btn-outlined.btn-hover,.white.btn-outlined:hover,.white.btn-outlined.btn-pressed,.white.btn-outlined:active{background-color:transparent!important;color:#fff!important}.btn.custom-button>*+*{margin-left:8px}.two-icon-label{padding:4px 12px!important}button.two-icon-label .mat-icon{width:20px!important;height:20px!important}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format(\"woff2\")}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.left-icon{order:0}.right-icon{order:2}mat-icon.mat-icon{margin:0!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;vertical-align:middle}.left-icon,.right-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0}.left-icon ::ng-deep svg,.right-icon ::ng-deep svg{fill:currentColor!important}.white.btn-outlined .left-icon ::ng-deep svg,.white.btn-outlined .right-icon ::ng-deep svg{fill:currentColor!important}.size-header{font-size:20px;padding:4px 6px!important;gap:4px!important;border-radius:4px!important}.size-xs{font-size:12px;padding:8px 12px!important}.size-sm{font-size:14px;padding:8px 12px!important}.size-base{font-size:14px;padding:10px 16px!important}.size-l{font-size:16px;padding:12px 20px!important}.size-xl{font-size:16px;padding:14px 24px!important}.size-header .mat-icon{font-size:20px;height:20px;width:20px;display:inline-flex!important;align-items:center!important;justify-content:center!important}.size-header .mat-icon ::ng-deep svg{width:20px!important;height:20px!important}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px;height:16px;width:16px}.size-l .mat-icon,.size-xl .mat-icon{font-size:20px;height:20px;width:20px}.btn.size-header{gap:4px!important;padding:4px 6px!important}::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,::ng-deep .custom-dropdown-menu.mat-menu-panel{padding:0;border-radius:8px;box-shadow:0 2px 6px #00000026;border:1px solid rgba(0,0,0,.12)}::ng-deep .custom-dropdown-menu .mat-mdc-menu-content,::ng-deep .custom-dropdown-menu .mat-menu-content{padding:0}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item{font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.04px;height:56px;padding:16px 24px;color:var(--Gray-700, #414651);transition:background .2s ease-in-out}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,::ng-deep .custom-dropdown-menu .mat-menu-item:hover{background:#f7f9fe!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:focus,::ng-deep .custom-dropdown-menu .mat-menu-item:focus,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.cdk-keyboard-focused,::ng-deep .custom-dropdown-menu .mat-menu-item.cdk-keyboard-focused{background:#e5e9fc!important;outline:none}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:active,::ng-deep .custom-dropdown-menu .mat-menu-item:active{background:#f7f9fe!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true],::ng-deep .custom-dropdown-menu .mat-menu-item[aria-selected=true],::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted,::ng-deep .custom-dropdown-menu .mat-menu-item.mat-menu-item-highlighted{background:#f7f9fe!important;color:#5473e8!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true] .mat-mdc-menu-item-text,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true] span,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span{color:#5473e8!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item+.mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item+.mat-menu-item{border-top:1px solid #EAECEE}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #ffffff !important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content,::ng-deep .mat-menu-panel .mat-menu-content{background-color:#fff!important}::ng-deep .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item{color:var(--Gray-700, #414651)!important;font-family:Roboto,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:400!important;line-height:140%!important;letter-spacing:.04px!important;--mat-menu-item-label-text-color: var(--Gray-700, #414651) !important;--mdc-list-list-item-label-text-color: var(--Gray-700, #414651) !important}::ng-deep .mat-mdc-menu-item .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item span{color:var(--Gray-700, #414651)!important;font-family:Roboto,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:400!important;line-height:140%!important;letter-spacing:.04px!important}.cdk-overlay-pane{z-index:1000!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface,.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface,.cdk-overlay-pane .mat-menu-panel{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #fff !important}.mat-mdc-menu-panel,.mdc-menu-surface,.mat-menu-panel{--mdc-theme-surface: #ffffff !important;background-color:#fff!important}.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface{--mdc-menu-container-color: #fff !important}.cdk-overlay-pane .mat-menu-panel,.cdk-overlay-pane .mat-mdc-menu-content,.cdk-overlay-pane .mat-menu-content{background:#fff!important}button.icon-circle{width:auto!important;height:auto!important;border-radius:50%!important;aspect-ratio:1/1;display:inline-flex;align-items:center;vertical-align:middle;line-height:0!important;min-width:0!important;justify-content:center;padding:6px!important}.size-small.icon-circle{padding:4px!important}.size-medium.icon-circle{padding:8px!important}.size-large.icon-circle{padding:12px!important}.size-header.icon-circle{padding:4px!important}.size-header.icon-circle .mat-icon{width:10px;height:10px;font-size:10px}.size-xs.icon-circle{padding:4px!important}.size-xs.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-xs.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-sm.icon-circle{padding:10px!important;height:32px!important;width:32px!important}.size-sm.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-sm.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-base.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-l.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-xl.icon-circle{padding:14px!important}.size-xl.icon-circle .mat-icon{width:20px;height:20px;font-size:20px}.icon-xs{padding:4px!important}.mdc-button.blue{background-color:#5473e8;color:#fff}.mdc-button.blue:hover{background-color:#6581ea}.mdc-button.blue:active{background-color:#1e46df}.mdc-button.green{background-color:#37c1ce;color:#fff}.mdc-button.green:hover{background-color:#4bc7d3}.mdc-button.green:active{background-color:#299da8}.mdc-button.grey{background-color:#717793;color:#fff}.mdc-button.grey:hover{background-color:#4b4f62}.mdc-button.grey:active{background-color:#252831}.mdc-button.error{background-color:#e854a4;color:#fff!important}.mdc-button.error:hover{background-color:#ef87bf;color:#fff!important}.mdc-button.error:active{background-color:#e22a8e;color:#fff!important}.mdc-button.success{background-color:#00ad83;color:#fff!important}.mdc-button.success:hover{background-color:#009873;color:#fff!important}.mdc-button.success:active{background-color:#007f61;color:#fff!important}.mdc-button.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.gradient:hover{background:linear-gradient(0deg,#fafafd4d,#fafafd4d),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.gradient:active{background:linear-gradient(0deg,#383b4a80,#383b4a80),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.disabled,.mdc-button:disabled{opacity:.4;cursor:not-allowed!important;pointer-events:none}.mdc-button.blue-no-outline{background-color:#fff;color:#5473e8;border:1px solid #5473E8}.mdc-button.blue-no-outline:hover{background-color:#6581ea;color:#fff}.mdc-button.blue-no-outline:active{background-color:#1e46df;color:#fff}.mdc-button.white-colour-outline{background-color:transparent;color:#fff;border:1px solid #fff}.mdc-button.white-colour-outline:hover,.mdc-button.white-colour-outline:active{background-color:transparent;color:#fff}.mdc-button.green-no-outline{background-color:#fff;color:#37c1ce;border:1px solid #37C1CE}.mdc-button.green-no-outline:hover{background-color:#4bc7d3;color:#fff}.mdc-button.green-no-outline:active{background-color:#299da8;color:#fff}.mdc-button.grey-no-outline{background-color:#fff;color:#383b4a;border:1px solid #383B4A}.mdc-button.grey-no-outline:hover{background-color:#4b4f62;color:#fff}.mdc-button.grey-no-outline:active{background-color:#252831;color:#fff}.mdc-button.error-no-outline{background-color:#fff;color:#e854a4;border:1px solid #E854A4}.mdc-button.error-no-outline:hover{background-color:#ef87bf;color:#fff}.mdc-button.error-no-outline:active{background-color:#e22a8e;color:#fff}.mdc-button.blue-colour-outline{background-color:#fff;color:#5473e8;box-shadow:inset 0 0 0 1px #5473e8}.mdc-button.blue-colour-outline:hover{background-color:#6581ea;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.blue-colour-outline:active{background-color:#1e46df;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.green-colour-outline{background-color:#fff;color:#37c1ce;box-shadow:inset 0 0 0 1px #37c1ce}.mdc-button.green-colour-outline:hover{background-color:#4bc7d3;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.green-colour-outline:active{background-color:#299da8;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.grey-colour-outline{background-color:#fff;color:#383b4a;box-shadow:inset 0 0 0 1px #383b4a}.mdc-button.grey-colour-outline:hover{background-color:#4b4f62;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.grey-colour-outline:active{background-color:#252831;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline{background-color:#fff;color:#e854a4!important;box-shadow:inset 0 0 0 1px #e854a4}.mdc-button.error-colour-outline:hover{background-color:#ef87bf;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline:active{background-color:#e22a8e;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline mat-icon,.mdc-button.error-colour-outline .button-label{color:#e854a4!important}.mdc-button.error-colour-outline:hover mat-icon,.mdc-button.error-colour-outline:hover .button-label,.mdc-button.error-colour-outline:active mat-icon,.mdc-button.error-colour-outline:active .button-label{color:#fff!important}.mdc-button.success-colour-outline{background-color:#fff;color:#00ad83!important;box-shadow:inset 0 0 0 1px #00ad83}.mdc-button.success-colour-outline:hover{background-color:#009873;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.success-colour-outline:active{background-color:#007f61;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.success-colour-outline mat-icon,.mdc-button.success-colour-outline .button-label{color:#00ad83!important}.mdc-button.success-colour-outline:hover mat-icon,.mdc-button.success-colour-outline:hover .button-label,.mdc-button.success-colour-outline:active mat-icon,.mdc-button.success-colour-outline:active .button-label{color:#fff!important}::ng-deep .cdk-overlay-pane{border-radius:8px!important;box-shadow:0 2px 6px #00000026!important}::ng-deep .mat-mdc-menu-panel{padding:4px 0!important;background-color:#fff!important;min-width:180px!important;border-radius:8px!important;box-shadow:none!important}::ng-deep .mat-mdc-menu-item{font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.04px;color:var(--Gray-700, #414651);padding:12px 16px;border-radius:0!important;transition:background .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f7f9fe!important}::ng-deep .mat-mdc-menu-item:focus,::ng-deep .mat-mdc-menu-item.cdk-keyboard-focused{background-color:#e5e9fc!important;outline:none}::ng-deep .mat-mdc-menu-item[aria-selected=true],::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted{background-color:#f7f9fe!important;color:#5473e8!important}::ng-deep .mat-mdc-menu-item[aria-selected=true] .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item[aria-selected=true] span,::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span{color:#5473e8!important}.size-header .button-label{display:none!important}.size-header .mat-icon,.size-header .left-icon,.size-header .right-icon{display:inline-flex!important;visibility:visible!important;opacity:1!important}.size-header ::ng-deep .mdc-button__label{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px}::ng-deep .mat-mdc-button-touch-target{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
485
491
|
}
|
|
486
492
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
487
493
|
type: Component,
|
|
488
|
-
args: [{ selector: 'al-button', imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule], standalone: true, template: "<!-- Regular button types -->\n<ng-container *ngIf=\"!(hasDropDown || buttonType === 'dropdown'); else dropdownTpl\">\n <button mat-flat-button class=\"btn custom-button\" [class]=\"effectiveFontClass\" [attr.data-test-id]=\"dataTestId\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-circle': buttonType === 'icon-circle',\n 'blue': color === 'blue',\n 'green': color === 'green',\n 'grey': color === 'grey',\n 'error': color === 'error',\n 'success': color === 'success',\n 'gradient': color === 'gradient',\n 'white': color === 'white',\n 'btn-outlined': outline,\n 'btn-default': effectiveState === 'default',\n 'btn-hover': effectiveState === 'hover',\n 'btn-pressed': effectiveState === 'pressed',\n 'btn-disabled': effectiveState === 'disabled'\n }\" [disabled]=\"isDisabled\" [matTooltip]=\"hasTooltip ? tooltip : null\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!hasTooltip\" (click)=\"onClick.emit($event)\" (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\" [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\">\n\n <!-- Left Icon (only if provided; for icon-circle prefer `icon` over `leftIcon`) -->\n <ng-container *ngIf=\"(buttonType === 'icon-circle' ? (icon || leftIcon) : leftIcon)?.trim() as leftIconText\">\n <ng-container *ngIf=\"getLeftSvgIconName() as svgIconName; else leftIconFont\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"left-icon\"></mat-icon>\n </ng-container>\n <ng-template #leftIconFont>\n <mat-icon [fontSet]=\"getLeftIconFontSet()\" class=\"left-icon\">\n {{ getLeftIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n\n <!-- Label (hidden when iconOnly is true) -->\n <span *ngIf=\"!iconOnly && buttonType !== 'icon-circle'\" class=\"button-label\">\n {{ labelText || '' }}\n </span>\n\n <!-- Right icon (only if provided) -->\n <ng-container *ngIf=\"rightIcon?.trim() as rightIconText\">\n <ng-container *ngIf=\"getRightSvgIconName() as svgIconName; else rightIconFont\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"right-icon\"></mat-icon>\n </ng-container>\n <ng-template #rightIconFont>\n <mat-icon [fontSet]=\"getRightIconFontSet()\" class=\"right-icon\">\n {{ getRightIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n </button>\n</ng-container>\n\n<!-- Dropdown button template -->\n<ng-template #dropdownTpl>\n <button mat-flat-button class=\"btn custom-button\" [class]=\"effectiveFontClass\" [attr.data-test-id]=\"dataTestId\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-label': true,\n 'blue': color === 'blue',\n 'green': color === 'green',\n 'grey': color === 'grey',\n 'error': color === 'error',\n 'success': color === 'success',\n 'gradient': color === 'gradient',\n 'white': color === 'white',\n 'btn-outlined': outline,\n 'btn-default': effectiveState === 'default',\n 'btn-hover': effectiveState === 'hover',\n 'btn-pressed': effectiveState === 'pressed',\n 'btn-disabled': effectiveState === 'disabled'\n }\" [disabled]=\"isDisabled\" [matTooltip]=\"hasTooltip ? tooltip : null\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!hasTooltip\" (mouseenter)=\"onHover.emit($event)\" (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\" [style.gap.px]=\"computeGap()\"\n [matMenuTriggerFor]=\"menu\">\n\n <!-- Left Icon (optional) -->\n <ng-container *ngIf=\"leftIcon?.trim() as leftIconText\">\n <ng-container *ngIf=\"getSvgIconName(leftIcon) as svgIconName; else leftIconFontDropdown\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"left-icon\"></mat-icon>\n </ng-container>\n <ng-template #leftIconFontDropdown>\n <mat-icon [fontSet]=\"getLeftIconFontSet()\" class=\"left-icon\">\n {{ getLeftIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n\n <!-- Label -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\">\n {{ labelText || '' }}\n </span>\n\n <!-- Dropdown arrow icon -->\n <mat-icon class=\"right-icon\">arrow_drop_down</mat-icon>\n </button>\n</ng-template>\n\n<!-- Mat Menu kept outside conditional to avoid portal reattachment across toggles -->\n<mat-menu #menu=\"matMenu\" panelClass=\"custom-dropdown-menu\">\n <button mat-menu-item *ngFor=\"let opt of dropdownItems\" (click)=\"selectOption(opt)\" [ngClass]=\"effectiveFontClass\">\n {{ opt.label || opt }}\n </button>\n</mat-menu>\n\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=network_node\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.material-icons-outlined{font-family:Material Icons Outlined;font-weight:400;font-style:normal;font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.mdc-button.btn{border-radius:4px;display:flex;align-items:center;cursor:pointer;border:none;transition:background .2s,border .2s,transform .1s;min-width:auto!important;gap:8px;height:auto!important}.mdc-button.btn-primary1{background-color:#5473e8;color:#fff}.mdc-button.btn-primary2{background-color:#37c1ce;color:#fff}.mdc-button.btn-secondary{background-color:#717793;color:#fff}.mdc-button.btn-destructive{background-color:#e854a4;color:#fff}.mdc-button.btn-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.btn-primary2:hover{background-color:#4bc7d3!important}.mdc-button.btn-primary2:active{background-color:#299da8!important}.mdc-button.btn-primary2:outlined{background-color:#fff;border-radius:4px;border:1px solid #37C1CE}.mdc-button.btn-primary1:hover{background-color:#6581ea!important}.mdc-button.btn-primary1:active{background-color:#1e46df!important}.mdc-button.btn-primary1:outlined{background-color:#fff;border-radius:4px;border:1px solid #5473E8}.mdc-button.btn-secondary:hover{background-color:#4b4f62!important}.mdc-button.btn-secondary:active{background-color:#252831!important}.mdc-button.btn-secondary:outlined{background-color:#fff;border-radius:4px;border:1px solid #383B4A}.mdc-button.btn-destructive:hover{background-color:#ef87bf!important}.mdc-button.btn-destructive:active{background-color:#e22a8e!important}.mdc-button.btn-destructive:outlined{background-color:#fff;border-radius:4px;border:1px solid #E854A4}.mdc-button.btn-gradient:hover{background:linear-gradient(0deg,#fafafd4d,#fafafd4d),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)!important}.mdc-button.btn-gradient:active{background:linear-gradient(0deg,#383b4a80,#383b4a80),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)!important}.mdc-button.btn-disabled{border:none!important;opacity:.4;cursor:not-allowed;pointer-events:none}.blue{background-color:#5473e8!important;color:#fff}.blue.btn-hover,.blue:hover{background-color:#6581ea!important}.blue.btn-pressed,.blue:active{background-color:#1e46df!important}.green{background-color:#37c1ce!important;color:#fff}.green.btn-hover,.green:hover{background-color:#4bc7d3!important}.green.btn-pressed,.green:active{background-color:#299da8!important}.grey{background-color:#717793!important;color:#fff}.grey.btn-hover,.grey:hover{background-color:#4b4f62!important}.grey.btn-pressed,.grey:active{background-color:#252831!important}.error{background-color:#e854a4!important;color:#fff!important}.error.btn-hover,.error:hover{background-color:#ef87bf!important;color:#fff!important}.error.btn-pressed,.error:active{background-color:#e22a8e!important;color:#fff!important}.success{background-color:#00ad83!important;color:#fff!important}.success.btn-hover,.success:hover{background-color:#009873!important;color:#fff!important}.success.btn-pressed,.success:active{background-color:#007f61!important;color:#fff!important}.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff!important}.gradient.btn-hover,.gradient:hover{opacity:.9}.gradient.btn-pressed,.gradient:active{opacity:.8}.white{background-color:#fff!important;color:#383b4a!important}.white.btn-hover,.white:hover{background-color:#ecedf1!important}.white.btn-pressed,.white:active{background-color:#dee0e6!important}.blue.btn-outlined{background-color:#fff!important;color:#5473e8!important;box-shadow:inset 0 0 0 1px #5473e8!important}.blue.btn-outlined.btn-hover,.blue.btn-outlined:hover{background-color:#6581ea!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.blue.btn-outlined.btn-pressed,.blue.btn-outlined:active{background-color:#1e46df!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.green.btn-outlined{background-color:#fff!important;color:#37c1ce!important;box-shadow:inset 0 0 0 1px #37c1ce!important}.green.btn-outlined.btn-hover,.green.btn-outlined:hover{background-color:#4bc7d3!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.green.btn-outlined.btn-pressed,.green.btn-outlined:active{background-color:#299da8!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.grey.btn-outlined{background-color:#fff!important;color:#383b4a!important;box-shadow:inset 0 0 0 1px #383b4a!important}.grey.btn-outlined.btn-hover,.grey.btn-outlined:hover{background-color:#4b4f62!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.grey.btn-outlined.btn-pressed,.grey.btn-outlined:active{background-color:#252831!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined{background-color:#fff!important;color:#e854a4!important;box-shadow:inset 0 0 0 1px #e854a4!important}.error.btn-outlined.btn-hover,.error.btn-outlined:hover{background-color:#ef87bf!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined.btn-pressed,.error.btn-outlined:active{background-color:#e22a8e!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined mat-icon,.error.btn-outlined .button-label{color:#e854a4!important}.error.btn-outlined:hover mat-icon,.error.btn-outlined:hover .button-label,.error.btn-outlined:active mat-icon,.error.btn-outlined:active .button-label{color:#fff!important}.success.btn-outlined{background-color:#fff!important;color:#00ad83!important;box-shadow:inset 0 0 0 1px #00ad83!important}.success.btn-outlined.btn-hover,.success.btn-outlined:hover{background-color:#009873!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.success.btn-outlined.btn-pressed,.success.btn-outlined:active{background-color:#007f61!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.success.btn-outlined mat-icon,.success.btn-outlined .button-label{color:#00ad83!important}.success.btn-outlined:hover mat-icon,.success.btn-outlined:hover .button-label,.success.btn-outlined:active mat-icon,.success.btn-outlined:active .button-label{color:#fff!important}.white.btn-outlined{background-color:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 1px #fff!important}.white.btn-outlined.btn-hover,.white.btn-outlined:hover,.white.btn-outlined.btn-pressed,.white.btn-outlined:active{background-color:transparent!important;color:#fff!important}.btn.custom-button>*+*{margin-left:8px}.two-icon-label{padding:4px 12px!important}button.two-icon-label .mat-icon{width:20px!important;height:20px!important}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format(\"woff2\")}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.left-icon{order:0}.right-icon{order:2}mat-icon.mat-icon{margin:0!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;vertical-align:middle}.left-icon,.right-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0}.left-icon ::ng-deep svg,.right-icon ::ng-deep svg{fill:currentColor!important}.white.btn-outlined .left-icon ::ng-deep svg,.white.btn-outlined .right-icon ::ng-deep svg{fill:currentColor!important}.size-header{font-size:20px;padding:4px 12px!important}.size-xs{font-size:12px;padding:8px 12px!important}.size-sm{font-size:14px;padding:8px 12px!important}.size-base{font-size:14px;padding:10px 16px!important}.size-l{font-size:16px;padding:12px 20px!important}.size-xl{font-size:16px;padding:14px 24px!important}.size-header .mat-icon{font-size:20px;height:20px;width:20px;display:inline-flex!important;align-items:center!important;justify-content:center!important}.size-header .mat-icon ::ng-deep svg{width:20px!important;height:20px!important}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px;height:16px;width:16px}.size-l .mat-icon,.size-xl .mat-icon{font-size:20px;height:20px;width:20px}.btn.size-header{gap:4px!important;padding:4px 12px!important}::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,::ng-deep .custom-dropdown-menu.mat-menu-panel{padding:0;border-radius:8px;box-shadow:0 2px 6px #00000026;border:1px solid rgba(0,0,0,.12)}::ng-deep .custom-dropdown-menu .mat-mdc-menu-content,::ng-deep .custom-dropdown-menu .mat-menu-content{padding:0}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item{font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.04px;height:56px;padding:16px 24px;color:var(--Gray-700, #414651);transition:background .2s ease-in-out}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,::ng-deep .custom-dropdown-menu .mat-menu-item:hover{background:#f7f9fe!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:focus,::ng-deep .custom-dropdown-menu .mat-menu-item:focus,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.cdk-keyboard-focused,::ng-deep .custom-dropdown-menu .mat-menu-item.cdk-keyboard-focused{background:#e5e9fc!important;outline:none}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:active,::ng-deep .custom-dropdown-menu .mat-menu-item:active{background:#f7f9fe!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true],::ng-deep .custom-dropdown-menu .mat-menu-item[aria-selected=true],::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted,::ng-deep .custom-dropdown-menu .mat-menu-item.mat-menu-item-highlighted{background:#f7f9fe!important;color:#5473e8!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true] .mat-mdc-menu-item-text,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true] span,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span{color:#5473e8!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item+.mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item+.mat-menu-item{border-top:1px solid #EAECEE}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #ffffff !important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content,::ng-deep .mat-menu-panel .mat-menu-content{background-color:#fff!important}::ng-deep .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item{color:var(--Gray-700, #414651)!important;font-family:Roboto,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:400!important;line-height:140%!important;letter-spacing:.04px!important;--mat-menu-item-label-text-color: var(--Gray-700, #414651) !important;--mdc-list-list-item-label-text-color: var(--Gray-700, #414651) !important}::ng-deep .mat-mdc-menu-item .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item span{color:var(--Gray-700, #414651)!important;font-family:Roboto,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:400!important;line-height:140%!important;letter-spacing:.04px!important}.cdk-overlay-pane{z-index:1000!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface,.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface,.cdk-overlay-pane .mat-menu-panel{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #fff !important}.mat-mdc-menu-panel,.mdc-menu-surface,.mat-menu-panel{--mdc-theme-surface: #ffffff !important;background-color:#fff!important}.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface{--mdc-menu-container-color: #fff !important}.cdk-overlay-pane .mat-menu-panel,.cdk-overlay-pane .mat-mdc-menu-content,.cdk-overlay-pane .mat-menu-content{background:#fff!important}button.icon-circle{width:auto!important;height:auto!important;border-radius:50%!important;aspect-ratio:1/1;display:inline-flex;align-items:center;vertical-align:middle;line-height:0!important;min-width:0!important;justify-content:center;padding:6px!important}.size-small.icon-circle{padding:4px!important}.size-medium.icon-circle{padding:8px!important}.size-large.icon-circle{padding:12px!important}.size-header.icon-circle{padding:4px!important}.size-header.icon-circle .mat-icon{width:10px;height:10px;font-size:10px}.size-xs.icon-circle{padding:4px!important}.size-xs.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-xs.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-sm.icon-circle{padding:10px!important;height:32px!important;width:32px!important}.size-sm.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-sm.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-base.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-l.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-xl.icon-circle{padding:14px!important}.size-xl.icon-circle .mat-icon{width:20px;height:20px;font-size:20px}.icon-xs{padding:4px!important}.mdc-button.blue{background-color:#5473e8;color:#fff}.mdc-button.blue:hover{background-color:#6581ea}.mdc-button.blue:active{background-color:#1e46df}.mdc-button.green{background-color:#37c1ce;color:#fff}.mdc-button.green:hover{background-color:#4bc7d3}.mdc-button.green:active{background-color:#299da8}.mdc-button.grey{background-color:#717793;color:#fff}.mdc-button.grey:hover{background-color:#4b4f62}.mdc-button.grey:active{background-color:#252831}.mdc-button.error{background-color:#e854a4;color:#fff!important}.mdc-button.error:hover{background-color:#ef87bf;color:#fff!important}.mdc-button.error:active{background-color:#e22a8e;color:#fff!important}.mdc-button.success{background-color:#00ad83;color:#fff!important}.mdc-button.success:hover{background-color:#009873;color:#fff!important}.mdc-button.success:active{background-color:#007f61;color:#fff!important}.mdc-button.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.gradient:hover{background:linear-gradient(0deg,#fafafd4d,#fafafd4d),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.gradient:active{background:linear-gradient(0deg,#383b4a80,#383b4a80),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.disabled,.mdc-button:disabled{opacity:.4;cursor:not-allowed!important;pointer-events:none}.mdc-button.blue-no-outline{background-color:#fff;color:#5473e8;border:1px solid #5473E8}.mdc-button.blue-no-outline:hover{background-color:#6581ea;color:#fff}.mdc-button.blue-no-outline:active{background-color:#1e46df;color:#fff}.mdc-button.white-colour-outline{background-color:transparent;color:#fff;border:1px solid #fff}.mdc-button.white-colour-outline:hover,.mdc-button.white-colour-outline:active{background-color:transparent;color:#fff}.mdc-button.green-no-outline{background-color:#fff;color:#37c1ce;border:1px solid #37C1CE}.mdc-button.green-no-outline:hover{background-color:#4bc7d3;color:#fff}.mdc-button.green-no-outline:active{background-color:#299da8;color:#fff}.mdc-button.grey-no-outline{background-color:#fff;color:#383b4a;border:1px solid #383B4A}.mdc-button.grey-no-outline:hover{background-color:#4b4f62;color:#fff}.mdc-button.grey-no-outline:active{background-color:#252831;color:#fff}.mdc-button.error-no-outline{background-color:#fff;color:#e854a4;border:1px solid #E854A4}.mdc-button.error-no-outline:hover{background-color:#ef87bf;color:#fff}.mdc-button.error-no-outline:active{background-color:#e22a8e;color:#fff}.mdc-button.blue-colour-outline{background-color:#fff;color:#5473e8;box-shadow:inset 0 0 0 1px #5473e8}.mdc-button.blue-colour-outline:hover{background-color:#6581ea;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.blue-colour-outline:active{background-color:#1e46df;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.green-colour-outline{background-color:#fff;color:#37c1ce;box-shadow:inset 0 0 0 1px #37c1ce}.mdc-button.green-colour-outline:hover{background-color:#4bc7d3;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.green-colour-outline:active{background-color:#299da8;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.grey-colour-outline{background-color:#fff;color:#383b4a;box-shadow:inset 0 0 0 1px #383b4a}.mdc-button.grey-colour-outline:hover{background-color:#4b4f62;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.grey-colour-outline:active{background-color:#252831;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline{background-color:#fff;color:#e854a4!important;box-shadow:inset 0 0 0 1px #e854a4}.mdc-button.error-colour-outline:hover{background-color:#ef87bf;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline:active{background-color:#e22a8e;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline mat-icon,.mdc-button.error-colour-outline .button-label{color:#e854a4!important}.mdc-button.error-colour-outline:hover mat-icon,.mdc-button.error-colour-outline:hover .button-label,.mdc-button.error-colour-outline:active mat-icon,.mdc-button.error-colour-outline:active .button-label{color:#fff!important}.mdc-button.success-colour-outline{background-color:#fff;color:#00ad83!important;box-shadow:inset 0 0 0 1px #00ad83}.mdc-button.success-colour-outline:hover{background-color:#009873;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.success-colour-outline:active{background-color:#007f61;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.success-colour-outline mat-icon,.mdc-button.success-colour-outline .button-label{color:#00ad83!important}.mdc-button.success-colour-outline:hover mat-icon,.mdc-button.success-colour-outline:hover .button-label,.mdc-button.success-colour-outline:active mat-icon,.mdc-button.success-colour-outline:active .button-label{color:#fff!important}::ng-deep .cdk-overlay-pane{border-radius:8px!important;box-shadow:0 2px 6px #00000026!important}::ng-deep .mat-mdc-menu-panel{padding:4px 0!important;background-color:#fff!important;min-width:180px!important;border-radius:8px!important;box-shadow:none!important}::ng-deep .mat-mdc-menu-item{font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.04px;color:var(--Gray-700, #414651);padding:12px 16px;border-radius:0!important;transition:background .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f7f9fe!important}::ng-deep .mat-mdc-menu-item:focus,::ng-deep .mat-mdc-menu-item.cdk-keyboard-focused{background-color:#e5e9fc!important;outline:none}::ng-deep .mat-mdc-menu-item[aria-selected=true],::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted{background-color:#f7f9fe!important;color:#5473e8!important}::ng-deep .mat-mdc-menu-item[aria-selected=true] .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item[aria-selected=true] span,::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span{color:#5473e8!important}.size-header .button-label{display:none!important}.size-header .mat-icon,.size-header .left-icon,.size-header .right-icon{display:inline-flex!important;visibility:visible!important;opacity:1!important}.size-header ::ng-deep .mdc-button__label{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px}::ng-deep .mat-mdc-button-touch-target{display:none!important}\n"] }]
|
|
494
|
+
args: [{ selector: 'al-button', imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule], standalone: true, template: "<!-- Regular button types -->\n<ng-container *ngIf=\"!(hasDropDown || buttonType === 'dropdown'); else dropdownTpl\">\n <button mat-flat-button class=\"btn custom-button\" [class]=\"effectiveFontClass\" [attr.data-test-id]=\"dataTestId\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-circle': buttonType === 'icon-circle',\n 'blue': color === 'blue',\n 'green': color === 'green',\n 'grey': color === 'grey',\n 'error': color === 'error',\n 'success': color === 'success',\n 'gradient': color === 'gradient',\n 'white': color === 'white',\n 'btn-outlined': outline,\n 'btn-default': effectiveState === 'default',\n 'btn-hover': effectiveState === 'hover',\n 'btn-pressed': effectiveState === 'pressed',\n 'btn-disabled': effectiveState === 'disabled'\n }\" [disabled]=\"isDisabled\" [matTooltip]=\"hasTooltip ? tooltip : null\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!hasTooltip\" (click)=\"onClick.emit($event)\" (mouseenter)=\"onHover.emit($event)\"\n (mouseleave)=\"onMouseLeave.emit($event)\" [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap()\">\n\n <!-- Left Icon (only if provided; for icon-circle prefer `icon` over `leftIcon`) -->\n <ng-container *ngIf=\"(buttonType === 'icon-circle' ? (icon || leftIcon) : leftIcon)?.trim() as leftIconText\">\n <ng-container *ngIf=\"getLeftSvgIconName() as svgIconName; else leftIconFont\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"left-icon\"></mat-icon>\n </ng-container>\n <ng-template #leftIconFont>\n <mat-icon [fontSet]=\"getLeftIconFontSet()\" class=\"left-icon\">\n {{ getLeftIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n\n <!-- Label (hidden when iconOnly is true) -->\n <span *ngIf=\"!iconOnly && buttonType !== 'icon-circle'\" class=\"button-label\">\n {{ labelText || '' }}\n </span>\n\n <!-- Right icon (only if provided) -->\n <ng-container *ngIf=\"rightIcon?.trim() as rightIconText\">\n <ng-container *ngIf=\"getRightSvgIconName() as svgIconName; else rightIconFont\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"right-icon\"></mat-icon>\n </ng-container>\n <ng-template #rightIconFont>\n <mat-icon [fontSet]=\"getRightIconFontSet()\" class=\"right-icon\">\n {{ getRightIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n </button>\n</ng-container>\n\n<!-- Dropdown button template -->\n<ng-template #dropdownTpl>\n <button mat-flat-button class=\"btn custom-button\" [class]=\"effectiveFontClass\" [attr.data-test-id]=\"dataTestId\"\n [ngClass]=\"{\n 'size-header': size === 'header' && !fontClass,\n 'size-xs': size === 'xs' && !fontClass,\n 'size-sm': size === 'sm' && !fontClass,\n 'size-base': size === 'base' && !fontClass,\n 'size-l': size === 'l' && !fontClass,\n 'size-xl': size === 'xl' && !fontClass,\n 'mat-raised-button': variant === 'raised',\n 'mat-flat-button': variant === 'flat',\n 'mat-stroked-button': variant === 'stroked',\n 'mat-fab': variant === 'fab',\n 'mat-icon-button': variant === 'icon',\n 'icon-label': true,\n 'blue': color === 'blue',\n 'green': color === 'green',\n 'grey': color === 'grey',\n 'error': color === 'error',\n 'success': color === 'success',\n 'gradient': color === 'gradient',\n 'white': color === 'white',\n 'btn-outlined': outline,\n 'btn-default': effectiveState === 'default',\n 'btn-hover': effectiveState === 'hover',\n 'btn-pressed': effectiveState === 'pressed',\n 'btn-disabled': effectiveState === 'disabled'\n }\" [disabled]=\"isDisabled\" [matTooltip]=\"hasTooltip ? tooltip : null\" [matTooltipPosition]=\"tooltipPosition\"\n [matTooltipDisabled]=\"!hasTooltip\" (mouseenter)=\"onHover.emit($event)\" (mouseleave)=\"onMouseLeave.emit($event)\"\n [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\" [style.gap.px]=\"computeGap()\"\n [matMenuTriggerFor]=\"menu\">\n\n <!-- Left Icon (optional) -->\n <ng-container *ngIf=\"leftIcon?.trim() as leftIconText\">\n <ng-container *ngIf=\"getSvgIconName(leftIcon) as svgIconName; else leftIconFontDropdown\">\n <mat-icon [svgIcon]=\"svgIconName\" class=\"left-icon\"></mat-icon>\n </ng-container>\n <ng-template #leftIconFontDropdown>\n <mat-icon [fontSet]=\"getLeftIconFontSet()\" class=\"left-icon\">\n {{ getLeftIconName() }}\n </mat-icon>\n </ng-template>\n </ng-container>\n\n <!-- Label -->\n <span *ngIf=\"!iconOnly\" class=\"button-label\">\n {{ labelText || '' }}\n </span>\n\n <!-- Dropdown arrow icon -->\n <mat-icon class=\"right-icon\">arrow_drop_down</mat-icon>\n </button>\n</ng-template>\n\n<!-- Mat Menu kept outside conditional to avoid portal reattachment across toggles -->\n<mat-menu #menu=\"matMenu\" panelClass=\"custom-dropdown-menu\">\n <button mat-menu-item *ngFor=\"let opt of dropdownItems\" (click)=\"selectOption(opt)\" [ngClass]=\"effectiveFontClass\">\n {{ opt.label || opt }}\n </button>\n</mat-menu>\n\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=network_node\";.weight-light{font-weight:300}.weight-regular{font-weight:400}.weight-medium{font-weight:500}.weight-semibold{font-weight:600}.weight-bold{font-weight:700}.line-height-none{line-height:1!important}.line-height-tight{line-height:1.2!important}.line-height-normal{line-height:1.4!important}.letter-spacing-normal{letter-spacing:0!important}.letter-spacing-wide{letter-spacing:.1em!important}.letter-spacing-wider{letter-spacing:.2em!important}.text-decoration-none{text-decoration:none!important;font-style:normal!important}.text-decoration-underline{text-decoration:underline!important;font-style:normal!important}.text-decoration-italic{text-decoration:none!important;font-style:italic!important}.text-decoration-strike{text-decoration:line-through!important;font-style:normal!important}.font-text-5xl{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-5xl-medium{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-5xl-bold{font-size:2rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-4xl{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-4xl-medium{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-4xl-bold{font-size:1.75rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-3xl{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-3xl-medium{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-3xl-bold{font-size:1.5rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-2xl{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-2xl-medium{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-2xl-bold{font-size:1.375rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-xl{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:400;color:#4b4f62}.font-text-xl-medium{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:500;color:#4b4f62}.font-text-xl-bold{font-size:1.25rem;line-height:1.2;letter-spacing:-.1px;font-weight:700;color:#4b4f62}.font-text-lg{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-lg-medium{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-lg-bold{font-size:1rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-base{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:400;color:#4b4f62}.font-text-base-medium{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:500;color:#4b4f62}.font-text-base-bold{font-size:.875rem;line-height:1.4;letter-spacing:.25px;font-weight:700;color:#4b4f62}.font-text-sm{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-sm-medium{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-sm-bold{font-size:.75rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-text-xs{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:400;color:#4b4f62}.font-text-xs-medium{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:500;color:#4b4f62}.font-text-xs-bold{font-size:.625rem;line-height:1.4;letter-spacing:.5px;font-weight:700;color:#4b4f62}.font-display-large{font-family:Roboto,sans-serif!important;font-size:57px;font-style:normal;font-weight:400;line-height:64px;letter-spacing:-.25px}.font-display-medium{font-family:Roboto,sans-serif!important;font-size:45px;font-style:normal;font-weight:400;line-height:52px}.font-display-small{font-family:Roboto,sans-serif!important;font-size:36px;font-style:normal;font-weight:400;line-height:44px}.font-headline-large{font-family:Roboto,sans-serif!important;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.font-headline-medium{font-family:Roboto,sans-serif!important;font-size:28px;font-style:normal;font-weight:400;line-height:36px}.font-headline-small{font-family:Roboto,sans-serif!important;font-size:24px;font-style:normal;font-weight:400;line-height:32px}.font-title-large{font-family:Roboto,sans-serif!important;font-size:22px;font-style:normal;font-weight:400;line-height:28px}.font-title-medium{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.15px}.font-title-small{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.1px}.font-label-large{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.font-label-medium{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:12px;letter-spacing:.5px}.font-label-small{font-family:Roboto,sans-serif!important;font-size:10px;font-style:normal;font-weight:400;line-height:10px;letter-spacing:.5px}.font-body-large{font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px}.font-body-medium{font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.font-body-small{font-family:Roboto,sans-serif!important;font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.4px}.typo-medium-700{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:500;line-height:140%;letter-spacing:.035px}.typo-description{color:var(--Greys-700, #4B4F62);font-family:Roboto,sans-serif!important;font-size:14px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.035px}.text-grey-500{color:#a2a6b8!important}.font-location-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:italic;font-weight:400;line-height:140%;letter-spacing:.04px}.font-title-text{color:#717793;font-family:Roboto,sans-serif!important;font-size:16px;font-style:normal;font-weight:700;line-height:140%;letter-spacing:.04px}:root{--color-blue-50: #E5E9FC;--color-blue-100: #BBC7F6;--color-blue-200: #98ABF1;--color-blue-300: #768FED;--color-blue-400: #6581EA;--color-blue-500: #5473E8;--color-blue-600: #1E46DF;--color-blue-700: #0F236F;--color-blue-800: #071238;--color-blue-900: #04091C;--color-green-50: #D7F3F5;--color-green-100: #AFE6EB;--color-green-200: #87DAE2;--color-green-300: #5FCDD8;--color-green-400: #4BC7D3;--color-green-500: #37C1CE;--color-green-600: #299DA8;--color-green-700: #1F767E;--color-green-800: #154E54;--color-green-900: #0A272A;--color-grey-50: #FAFBFB;--color-grey-100: #ECEDF1;--color-grey-200: #DEE0E6;--color-grey-300: #D1D3DB;--color-grey-400: #C3C5D1;--color-grey-500: #A2A6B8;--color-grey-600: #717793;--color-grey-700: #4B4F62;--color-grey-800: #383B4A;--color-grey-900: #252831;--color-error-50: #FDEEF6;--color-error-100: #F9D4E8;--color-error-200: #F6BBDB;--color-error-300: #F2A1CD;--color-error-400: #EF87BF;--color-error-500: #E854A4;--color-error-600: #E22A8E;--color-error-700: #C31A75;--color-error-800: #99155C;--color-error-900: #6F0F43;--color-success-50: #E9F9F3;--color-success-100: #C8F1E3;--color-success-200: #9EE7CE;--color-success-300: #6EDDB7;--color-success-400: #3DD3A0;--color-success-500: #00AD83;--color-success-600: #009873;--color-success-700: #007F61;--color-success-800: #00654F;--color-success-900: #003D30;--color-blue: #5473E8;--color-blue-hover: #6581EA;--color-blue-active: #1E46DF;--color-green: #37C1CE;--color-green-hover: #4BC7D3;--color-green-active: #299DA8;--color-grey: #383B4A;--color-grey-hover: #4B4F62;--color-grey-active: #252831;--color-error: #E854A4;--color-error-hover: #EF87BF;--color-error-active: #E22A8E;--color-success: #00AD83;--color-success-hover: #009873;--color-success-active: #007F61;--color-disabled-bg: #D1D3DB;--color-disabled-text: #A2A6B8}.material-icons-outlined{font-family:Material Icons Outlined;font-weight:400;font-style:normal;font-feature-settings:\"liga\";font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.mdc-button.btn{border-radius:8px;display:flex;align-items:center;cursor:pointer;border:none;transition:background .2s,border .2s,transform .1s;min-width:auto!important;gap:8px;height:auto!important}.mdc-button.btn-primary1{background-color:#5473e8;color:#fff}.mdc-button.btn-primary2{background-color:#37c1ce;color:#fff}.mdc-button.btn-secondary{background-color:#717793;color:#fff}.mdc-button.btn-destructive{background-color:#e854a4;color:#fff}.mdc-button.btn-gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.btn-primary2:hover{background-color:#4bc7d3!important}.mdc-button.btn-primary2:active{background-color:#299da8!important}.mdc-button.btn-primary2:outlined{background-color:#fff;border-radius:4px;border:1px solid #37C1CE}.mdc-button.btn-primary1:hover{background-color:#6581ea!important}.mdc-button.btn-primary1:active{background-color:#1e46df!important}.mdc-button.btn-primary1:outlined{background-color:#fff;border-radius:4px;border:1px solid #5473E8}.mdc-button.btn-secondary:hover{background-color:#4b4f62!important}.mdc-button.btn-secondary:active{background-color:#252831!important}.mdc-button.btn-secondary:outlined{background-color:#fff;border-radius:4px;border:1px solid #383B4A}.mdc-button.btn-destructive:hover{background-color:#ef87bf!important}.mdc-button.btn-destructive:active{background-color:#e22a8e!important}.mdc-button.btn-destructive:outlined{background-color:#fff;border-radius:4px;border:1px solid #E854A4}.mdc-button.btn-gradient:hover{background:linear-gradient(0deg,#fafafd4d,#fafafd4d),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)!important}.mdc-button.btn-gradient:active{background:linear-gradient(0deg,#383b4a80,#383b4a80),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)!important}.mdc-button.btn-disabled{border:none!important;opacity:.4;cursor:not-allowed;pointer-events:none}.blue{background-color:#5473e8!important;color:#fff}.blue.btn-hover,.blue:hover{background-color:#6581ea!important}.blue.btn-pressed,.blue:active{background-color:#1e46df!important}.green{background-color:#37c1ce!important;color:#fff}.green.btn-hover,.green:hover{background-color:#4bc7d3!important}.green.btn-pressed,.green:active{background-color:#299da8!important}.grey{background-color:#717793!important;color:#fff}.grey.btn-hover,.grey:hover{background-color:#4b4f62!important}.grey.btn-pressed,.grey:active{background-color:#252831!important}.error{background-color:#e854a4!important;color:#fff!important}.error.btn-hover,.error:hover{background-color:#ef87bf!important;color:#fff!important}.error.btn-pressed,.error:active{background-color:#e22a8e!important;color:#fff!important}.success{background-color:#00ad83!important;color:#fff!important}.success.btn-hover,.success:hover{background-color:#009873!important;color:#fff!important}.success.btn-pressed,.success:active{background-color:#007f61!important;color:#fff!important}.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff!important}.gradient.btn-hover,.gradient:hover{opacity:.9}.gradient.btn-pressed,.gradient:active{opacity:.8}.white{background-color:#fff!important;color:#383b4a!important}.white.btn-hover,.white:hover{background-color:#ecedf1!important}.white.btn-pressed,.white:active{background-color:#dee0e6!important}.blue.btn-outlined{background-color:#fff!important;color:#5473e8!important;box-shadow:inset 0 0 0 1px #5473e8!important}.blue.btn-outlined.btn-hover,.blue.btn-outlined:hover{background-color:#6581ea!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.blue.btn-outlined.btn-pressed,.blue.btn-outlined:active{background-color:#1e46df!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.green.btn-outlined{background-color:#fff!important;color:#37c1ce!important;box-shadow:inset 0 0 0 1px #37c1ce!important}.green.btn-outlined.btn-hover,.green.btn-outlined:hover{background-color:#4bc7d3!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.green.btn-outlined.btn-pressed,.green.btn-outlined:active{background-color:#299da8!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.grey.btn-outlined{background-color:#fff!important;color:#383b4a!important;box-shadow:inset 0 0 0 1px #383b4a!important}.grey.btn-outlined.btn-hover,.grey.btn-outlined:hover{background-color:#4b4f62!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.grey.btn-outlined.btn-pressed,.grey.btn-outlined:active{background-color:#252831!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined{background-color:#fff!important;color:#e854a4!important;box-shadow:inset 0 0 0 1px #e854a4!important}.error.btn-outlined.btn-hover,.error.btn-outlined:hover{background-color:#ef87bf!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined.btn-pressed,.error.btn-outlined:active{background-color:#e22a8e!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.error.btn-outlined mat-icon,.error.btn-outlined .button-label{color:#e854a4!important}.error.btn-outlined:hover mat-icon,.error.btn-outlined:hover .button-label,.error.btn-outlined:active mat-icon,.error.btn-outlined:active .button-label{color:#fff!important}.success.btn-outlined{background-color:#fff!important;color:#00ad83!important;box-shadow:inset 0 0 0 1px #00ad83!important}.success.btn-outlined.btn-hover,.success.btn-outlined:hover{background-color:#009873!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.success.btn-outlined.btn-pressed,.success.btn-outlined:active{background-color:#007f61!important;color:#fff!important;box-shadow:inset 0 0 0 0 transparent!important}.success.btn-outlined mat-icon,.success.btn-outlined .button-label{color:#00ad83!important}.success.btn-outlined:hover mat-icon,.success.btn-outlined:hover .button-label,.success.btn-outlined:active mat-icon,.success.btn-outlined:active .button-label{color:#fff!important}.white.btn-outlined{background-color:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 1px #fff!important}.white.btn-outlined.btn-hover,.white.btn-outlined:hover,.white.btn-outlined.btn-pressed,.white.btn-outlined:active{background-color:transparent!important;color:#fff!important}.btn.custom-button>*+*{margin-left:8px}.two-icon-label{padding:4px 12px!important}button.two-icon-label .mat-icon{width:20px!important;height:20px!important}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format(\"woff2\")}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}.left-icon{order:0}.right-icon{order:2}mat-icon.mat-icon{margin:0!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;vertical-align:middle}.left-icon,.right-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0}.left-icon ::ng-deep svg,.right-icon ::ng-deep svg{fill:currentColor!important}.white.btn-outlined .left-icon ::ng-deep svg,.white.btn-outlined .right-icon ::ng-deep svg{fill:currentColor!important}.size-header{font-size:20px;padding:4px 6px!important;gap:4px!important;border-radius:4px!important}.size-xs{font-size:12px;padding:8px 12px!important}.size-sm{font-size:14px;padding:8px 12px!important}.size-base{font-size:14px;padding:10px 16px!important}.size-l{font-size:16px;padding:12px 20px!important}.size-xl{font-size:16px;padding:14px 24px!important}.size-header .mat-icon{font-size:20px;height:20px;width:20px;display:inline-flex!important;align-items:center!important;justify-content:center!important}.size-header .mat-icon ::ng-deep svg{width:20px!important;height:20px!important}.size-xs .mat-icon,.size-sm .mat-icon,.size-base .mat-icon{font-size:16px;height:16px;width:16px}.size-l .mat-icon,.size-xl .mat-icon{font-size:20px;height:20px;width:20px}.btn.size-header{gap:4px!important;padding:4px 6px!important}::ng-deep .custom-dropdown-menu.mat-mdc-menu-panel,::ng-deep .custom-dropdown-menu.mat-menu-panel{padding:0;border-radius:8px;box-shadow:0 2px 6px #00000026;border:1px solid rgba(0,0,0,.12)}::ng-deep .custom-dropdown-menu .mat-mdc-menu-content,::ng-deep .custom-dropdown-menu .mat-menu-content{padding:0}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item{font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.04px;height:56px;padding:16px 24px;color:var(--Gray-700, #414651);transition:background .2s ease-in-out}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:hover,::ng-deep .custom-dropdown-menu .mat-menu-item:hover{background:#f7f9fe!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:focus,::ng-deep .custom-dropdown-menu .mat-menu-item:focus,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.cdk-keyboard-focused,::ng-deep .custom-dropdown-menu .mat-menu-item.cdk-keyboard-focused{background:#e5e9fc!important;outline:none}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item:active,::ng-deep .custom-dropdown-menu .mat-menu-item:active{background:#f7f9fe!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true],::ng-deep .custom-dropdown-menu .mat-menu-item[aria-selected=true],::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted,::ng-deep .custom-dropdown-menu .mat-menu-item.mat-menu-item-highlighted{background:#f7f9fe!important;color:#5473e8!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true] .mat-mdc-menu-item-text,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item[aria-selected=true] span,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span{color:#5473e8!important}::ng-deep .custom-dropdown-menu .mat-mdc-menu-item+.mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-menu-item+.mat-menu-item{border-top:1px solid #EAECEE}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #ffffff !important}::ng-deep .mat-mdc-menu-panel .mat-mdc-menu-content,::ng-deep .mat-menu-panel .mat-menu-content{background-color:#fff!important}::ng-deep .mat-mdc-menu-item,::ng-deep .custom-dropdown-menu .mat-mdc-menu-item{color:var(--Gray-700, #414651)!important;font-family:Roboto,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:400!important;line-height:140%!important;letter-spacing:.04px!important;--mat-menu-item-label-text-color: var(--Gray-700, #414651) !important;--mdc-list-list-item-label-text-color: var(--Gray-700, #414651) !important}::ng-deep .mat-mdc-menu-item .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item span{color:var(--Gray-700, #414651)!important;font-family:Roboto,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:400!important;line-height:140%!important;letter-spacing:.04px!important}.cdk-overlay-pane{z-index:1000!important;background:#fff!important}::ng-deep .mat-mdc-menu-panel,::ng-deep .mat-menu-panel,::ng-deep .mdc-menu-surface,.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface,.cdk-overlay-pane .mat-menu-panel{background-color:#fff!important;--mdc-theme-surface: #ffffff !important;--mdc-menu-container-color: #fff !important}.mat-mdc-menu-panel,.mdc-menu-surface,.mat-menu-panel{--mdc-theme-surface: #ffffff !important;background-color:#fff!important}.cdk-overlay-pane .mat-mdc-menu-panel,.cdk-overlay-pane .mdc-menu-surface{--mdc-menu-container-color: #fff !important}.cdk-overlay-pane .mat-menu-panel,.cdk-overlay-pane .mat-mdc-menu-content,.cdk-overlay-pane .mat-menu-content{background:#fff!important}button.icon-circle{width:auto!important;height:auto!important;border-radius:50%!important;aspect-ratio:1/1;display:inline-flex;align-items:center;vertical-align:middle;line-height:0!important;min-width:0!important;justify-content:center;padding:6px!important}.size-small.icon-circle{padding:4px!important}.size-medium.icon-circle{padding:8px!important}.size-large.icon-circle{padding:12px!important}.size-header.icon-circle{padding:4px!important}.size-header.icon-circle .mat-icon{width:10px;height:10px;font-size:10px}.size-xs.icon-circle{padding:4px!important}.size-xs.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-xs.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-sm.icon-circle{padding:10px!important;height:32px!important;width:32px!important}.size-sm.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-sm.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-base.icon-circle{padding:10px!important}.size-base.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-base.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-l.icon-circle{padding:12px!important}.size-l.icon-circle .mat-icon{width:16px;height:16px;font-size:16px;display:flex;align-items:center;justify-content:center}.size-l.icon-circle .mat-icon ::ng-deep svg{width:16px;height:16px}.size-xl.icon-circle{padding:14px!important}.size-xl.icon-circle .mat-icon{width:20px;height:20px;font-size:20px}.icon-xs{padding:4px!important}.mdc-button.blue{background-color:#5473e8;color:#fff}.mdc-button.blue:hover{background-color:#6581ea}.mdc-button.blue:active{background-color:#1e46df}.mdc-button.green{background-color:#37c1ce;color:#fff}.mdc-button.green:hover{background-color:#4bc7d3}.mdc-button.green:active{background-color:#299da8}.mdc-button.grey{background-color:#717793;color:#fff}.mdc-button.grey:hover{background-color:#4b4f62}.mdc-button.grey:active{background-color:#252831}.mdc-button.error{background-color:#e854a4;color:#fff!important}.mdc-button.error:hover{background-color:#ef87bf;color:#fff!important}.mdc-button.error:active{background-color:#e22a8e;color:#fff!important}.mdc-button.success{background-color:#00ad83;color:#fff!important}.mdc-button.success:hover{background-color:#009873;color:#fff!important}.mdc-button.success:active{background-color:#007f61;color:#fff!important}.mdc-button.gradient{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);color:#fff}.mdc-button.gradient:hover{background:linear-gradient(0deg,#fafafd4d,#fafafd4d),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.gradient:active{background:linear-gradient(0deg,#383b4a80,#383b4a80),linear-gradient(275deg,#2bbbad 9.3%,#4a90e2 115.85%)}.mdc-button.disabled,.mdc-button:disabled{opacity:.4;cursor:not-allowed!important;pointer-events:none}.mdc-button.blue-no-outline{background-color:#fff;color:#5473e8;border:1px solid #5473E8}.mdc-button.blue-no-outline:hover{background-color:#6581ea;color:#fff}.mdc-button.blue-no-outline:active{background-color:#1e46df;color:#fff}.mdc-button.white-colour-outline{background-color:transparent;color:#fff;border:1px solid #fff}.mdc-button.white-colour-outline:hover,.mdc-button.white-colour-outline:active{background-color:transparent;color:#fff}.mdc-button.green-no-outline{background-color:#fff;color:#37c1ce;border:1px solid #37C1CE}.mdc-button.green-no-outline:hover{background-color:#4bc7d3;color:#fff}.mdc-button.green-no-outline:active{background-color:#299da8;color:#fff}.mdc-button.grey-no-outline{background-color:#fff;color:#383b4a;border:1px solid #383B4A}.mdc-button.grey-no-outline:hover{background-color:#4b4f62;color:#fff}.mdc-button.grey-no-outline:active{background-color:#252831;color:#fff}.mdc-button.error-no-outline{background-color:#fff;color:#e854a4;border:1px solid #E854A4}.mdc-button.error-no-outline:hover{background-color:#ef87bf;color:#fff}.mdc-button.error-no-outline:active{background-color:#e22a8e;color:#fff}.mdc-button.blue-colour-outline{background-color:#fff;color:#5473e8;box-shadow:inset 0 0 0 1px #5473e8}.mdc-button.blue-colour-outline:hover{background-color:#6581ea;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.blue-colour-outline:active{background-color:#1e46df;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.green-colour-outline{background-color:#fff;color:#37c1ce;box-shadow:inset 0 0 0 1px #37c1ce}.mdc-button.green-colour-outline:hover{background-color:#4bc7d3;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.green-colour-outline:active{background-color:#299da8;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.grey-colour-outline{background-color:#fff;color:#383b4a;box-shadow:inset 0 0 0 1px #383b4a}.mdc-button.grey-colour-outline:hover{background-color:#4b4f62;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.grey-colour-outline:active{background-color:#252831;color:#fff;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline{background-color:#fff;color:#e854a4!important;box-shadow:inset 0 0 0 1px #e854a4}.mdc-button.error-colour-outline:hover{background-color:#ef87bf;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline:active{background-color:#e22a8e;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.error-colour-outline mat-icon,.mdc-button.error-colour-outline .button-label{color:#e854a4!important}.mdc-button.error-colour-outline:hover mat-icon,.mdc-button.error-colour-outline:hover .button-label,.mdc-button.error-colour-outline:active mat-icon,.mdc-button.error-colour-outline:active .button-label{color:#fff!important}.mdc-button.success-colour-outline{background-color:#fff;color:#00ad83!important;box-shadow:inset 0 0 0 1px #00ad83}.mdc-button.success-colour-outline:hover{background-color:#009873;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.success-colour-outline:active{background-color:#007f61;color:#fff!important;box-shadow:inset 0 0 0 0 transparent}.mdc-button.success-colour-outline mat-icon,.mdc-button.success-colour-outline .button-label{color:#00ad83!important}.mdc-button.success-colour-outline:hover mat-icon,.mdc-button.success-colour-outline:hover .button-label,.mdc-button.success-colour-outline:active mat-icon,.mdc-button.success-colour-outline:active .button-label{color:#fff!important}::ng-deep .cdk-overlay-pane{border-radius:8px!important;box-shadow:0 2px 6px #00000026!important}::ng-deep .mat-mdc-menu-panel{padding:4px 0!important;background-color:#fff!important;min-width:180px!important;border-radius:8px!important;box-shadow:none!important}::ng-deep .mat-mdc-menu-item{font-family:Roboto,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:.04px;color:var(--Gray-700, #414651);padding:12px 16px;border-radius:0!important;transition:background .2s ease-in-out}::ng-deep .mat-mdc-menu-item:hover{background-color:#f7f9fe!important}::ng-deep .mat-mdc-menu-item:focus,::ng-deep .mat-mdc-menu-item.cdk-keyboard-focused{background-color:#e5e9fc!important;outline:none}::ng-deep .mat-mdc-menu-item[aria-selected=true],::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted{background-color:#f7f9fe!important;color:#5473e8!important}::ng-deep .mat-mdc-menu-item[aria-selected=true] .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item[aria-selected=true] span,::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted .mat-mdc-menu-item-text,::ng-deep .mat-mdc-menu-item.mat-mdc-menu-item-highlighted span{color:#5473e8!important}.size-header .button-label{display:none!important}.size-header .mat-icon,.size-header .left-icon,.size-header .right-icon{display:inline-flex!important;visibility:visible!important;opacity:1!important}.size-header ::ng-deep .mdc-button__label{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px}::ng-deep .mat-mdc-button-touch-target{display:none!important}\n"] }]
|
|
489
495
|
}], ctorParameters: () => [{ type: i1.MatIconRegistry }], propDecorators: { state: [{
|
|
490
496
|
type: Input
|
|
491
497
|
}], disabled: [{
|
|
@@ -1573,29 +1579,22 @@ const LEFT_AND_RIGHT_ICON_CONSTANTS = {
|
|
|
1573
1579
|
'subrole-icon-grey': `<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"viewBox="0 0 16 16"fill="none"> <path d="M3.66659 14.6666C3.02214 14.6666 2.47214 14.4389 2.01659 13.9833C1.56103 13.5278 1.33325 12.9778 1.33325 12.3333C1.33325 11.6889 1.56103 11.1389 2.01659 10.6833C2.47214 10.2278 3.02214 9.99998 3.66659 9.99998C3.86659 9.99998 4.06103 10.025 4.24992 10.075C4.43881 10.125 4.61659 10.1944 4.78325 10.2833L7.33325 7.73331V5.89998C6.84436 5.75554 6.44436 5.48054 6.13325 5.07498C5.82214 4.66942 5.66658 4.19998 5.66658 3.66665C5.66658 3.0222 5.89436 2.4722 6.34992 2.01665C6.80547 1.56109 7.35547 1.33331 7.99992 1.33331C8.64436 1.33331 9.19436 1.56109 9.64992 2.01665C10.1055 2.4722 10.3333 3.0222 10.3333 3.66665C10.3333 4.19998 10.1777 4.66942 9.86658 5.07498C9.55547 5.48054 9.15547 5.75554 8.66658 5.89998V7.73331L11.2333 10.2833C11.3999 10.1944 11.5749 10.125 11.7583 10.075C11.9416 10.025 12.1333 9.99998 12.3333 9.99998C12.9777 9.99998 13.5277 10.2278 13.9833 10.6833C14.4388 11.1389 14.6666 11.6889 14.6666 12.3333C14.6666 12.9778 14.4388 13.5278 13.9833 13.9833C13.5277 14.4389 12.9777 14.6666 12.3333 14.6666C11.6888 14.6666 11.1388 14.4389 10.6833 13.9833C10.2277 13.5278 9.99992 12.9778 9.99992 12.3333C9.99992 12.1333 10.0249 11.9389 10.0749 11.75C10.1249 11.5611 10.1944 11.3833 10.2833 11.2166L7.99992 8.93331L5.71659 11.2166C5.80547 11.3833 5.87492 11.5611 5.92492 11.75C5.97492 11.9389 5.99992 12.1333 5.99992 12.3333C5.99992 12.9778 5.77214 13.5278 5.31659 13.9833C4.86103 14.4389 4.31103 14.6666 3.66659 14.6666ZM12.3333 13.3333C12.611 13.3333 12.8471 13.2361 13.0416 13.0416C13.236 12.8472 13.3333 12.6111 13.3333 12.3333C13.3333 12.0555 13.236 11.8194 13.0416 11.625C12.8471 11.4305 12.611 11.3333 12.3333 11.3333C12.0555 11.3333 11.8194 11.4305 11.6249 11.625C11.4305 11.8194 11.3333 12.0555 11.3333 12.3333C11.3333 12.6111 11.4305 12.8472 11.6249 13.0416C11.8194 13.2361 12.0555 13.3333 12.3333 13.3333ZM7.99992 4.66665C8.2777 4.66665 8.51381 4.56942 8.70825 4.37498C8.9027 4.18054 8.99992 3.94442 8.99992 3.66665C8.99992 3.38887 8.9027 3.15276 8.70825 2.95831C8.51381 2.76387 8.2777 2.66665 7.99992 2.66665C7.72214 2.66665 7.48603 2.76387 7.29158 2.95831C7.09714 3.15276 6.99992 3.38887 6.99992 3.66665C6.99992 3.94442 7.09714 4.18054 7.29158 4.37498C7.48603 4.56942 7.72214 4.66665 7.99992 4.66665ZM3.66659 13.3333C3.94436 13.3333 4.18047 13.2361 4.37492 13.0416C4.56936 12.8472 4.66658 12.6111 4.66658 12.3333C4.66658 12.0555 4.56936 11.8194 4.37492 11.625C4.18047 11.4305 3.94436 11.3333 3.66659 11.3333C3.38881 11.3333 3.1527 11.4305 2.95825 11.625C2.76381 11.8194 2.66659 12.0555 2.66659 12.3333C2.66659 12.6111 2.76381 12.8472 2.95825 13.0416C3.1527 13.2361 3.38881 13.3333 3.66659 13.3333Z"fill="#717793"/> </svg>`
|
|
1574
1580
|
};
|
|
1575
1581
|
const Candidate_Section_ICON = {
|
|
1576
|
-
'candidate_name': `<svg xmlns="http://www.w3.org/2000/svg"
|
|
1577
|
-
|
|
1578
|
-
</svg>`,
|
|
1579
|
-
'
|
|
1580
|
-
|
|
1581
|
-
</svg>`,
|
|
1582
|
-
'
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
</svg>`,
|
|
1588
|
-
'
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
</svg
|
|
1592
|
-
'candidate_address': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> <path d="M9.99984 1.66663C6.77484 1.66663 4.1665 4.27496 4.1665 7.49996C4.1665 11.875 9.99984 18.3333 9.99984 18.3333C9.99984 18.3333 15.8332 11.875 15.8332 7.49996C15.8332 4.27496 13.2248 1.66663 9.99984 1.66663ZM5.83317 7.49996C5.83317 5.19996 7.69984 3.33329 9.99984 3.33329C12.2998 3.33329 14.1665 5.19996 14.1665 7.49996C14.1665 9.89996 11.7665 13.4916 9.99984 15.7333C8.2665 13.5083 5.83317 9.87496 5.83317 7.49996Z" fill="#37C1CE"/> <path d="M9.99984 9.58329C11.1504 9.58329 12.0832 8.65055 12.0832 7.49996C12.0832 6.34937 11.1504 5.41663 9.99984 5.41663C8.84924 5.41663 7.9165 6.34937 7.9165 7.49996C7.9165 8.65055 8.84924 9.58329 9.99984 9.58329Z" fill="#37C1CE"/> </svg>`,
|
|
1593
|
-
'candidate_experience': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1594
|
-
<path d="M9.9915 1.66663C5.3915 1.66663 1.6665 5.39996 1.6665 9.99996C1.6665 14.6 5.3915 18.3333 9.9915 18.3333C14.5998 18.3333 18.3332 14.6 18.3332 9.99996C18.3332 5.39996 14.5998 1.66663 9.9915 1.66663ZM9.99984 16.6666C6.3165 16.6666 3.33317 13.6833 3.33317 9.99996C3.33317 6.31663 6.3165 3.33329 9.99984 3.33329C13.6832 3.33329 16.6665 6.31663 16.6665 9.99996C16.6665 13.6833 13.6832 16.6666 9.99984 16.6666ZM10.4165 5.83329H9.1665V10.8333L13.5415 13.4583L14.1665 12.4333L10.4165 10.2083V5.83329Z" fill="#37C1CE"/>
|
|
1595
|
-
</svg>`,
|
|
1596
|
-
'candidate_most_recent': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1597
|
-
<path d="M11.6665 5.41671V3.75004H8.33317V5.41671H11.6665ZM3.33317 7.08337V16.25H16.6665V7.08337H3.33317ZM16.6665 5.41671C17.5915 5.41671 18.3332 6.15837 18.3332 7.08337V16.25C18.3332 17.175 17.5915 17.9167 16.6665 17.9167H3.33317C2.40817 17.9167 1.6665 17.175 1.6665 16.25L1.67484 7.08337C1.67484 6.15837 2.40817 5.41671 3.33317 5.41671H6.6665V3.75004C6.6665 2.82504 7.40817 2.08337 8.33317 2.08337H11.6665C12.5915 2.08337 13.3332 2.82504 13.3332 3.75004V5.41671H16.6665Z" fill="#37C1CE"/>
|
|
1598
|
-
</svg>`,
|
|
1582
|
+
'candidate_name': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M10.0002 5.00004C10.9168 5.00004 11.6668 5.75004 11.6668 6.66671C11.6668 7.58337 10.9168 8.33337 10.0002 8.33337C9.0835 8.33337 8.3335 7.58337 8.3335 6.66671C8.3335 5.75004 9.0835 5.00004 10.0002 5.00004ZM10.0002 13.3334C12.2502 13.3334 14.8335 14.4084 15.0002 15H5.00016C5.19183 14.4 7.7585 13.3334 10.0002 13.3334ZM10.0002 3.33337C8.1585 3.33337 6.66683 4.82504 6.66683 6.66671C6.66683 8.50837 8.1585 10 10.0002 10C11.8418 10 13.3335 8.50837 13.3335 6.66671C13.3335 4.82504 11.8418 3.33337 10.0002 3.33337ZM10.0002 11.6667C7.77516 11.6667 3.3335 12.7834 3.3335 15V16.6667H16.6668V15C16.6668 12.7834 12.2252 11.6667 10.0002 11.6667Z"fill="#37C1CE"/> </svg>`,
|
|
1583
|
+
'candidate_gender': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M13.6624 1.96216V3.21216H15.8893L13.7799 5.34091C13.026 4.77152 12.1072 4.46306 11.1624 4.46216C9.99365 4.46216 8.9024 4.92466 8.07615 5.75153C7.66774 6.15502 7.34349 6.63557 7.1222 7.16533C6.90092 7.69508 6.787 8.26349 6.78706 8.8376C6.78712 9.41171 6.90115 9.9801 7.12254 10.5098C7.34393 11.0395 7.66828 11.52 8.07678 11.9234C8.62053 12.4672 9.26803 12.8578 9.99053 13.0559C10.0618 13.0015 10.1418 12.9447 10.2055 12.8809C10.4675 12.6145 10.6557 12.2845 10.7518 11.9234C10.0713 11.8397 9.43854 11.53 8.9549 11.044C8.3649 10.4547 8.0374 9.67216 8.0374 8.83716C8.0374 8.00216 8.36553 7.22091 8.95615 6.63091C9.5449 6.03903 10.3274 5.71216 11.1624 5.71216C11.9974 5.71216 12.7793 6.04028 13.3687 6.63091C13.6602 6.91957 13.8915 7.26322 14.0492 7.64194C14.2069 8.02066 14.2879 8.42691 14.2874 8.83716C14.2874 9.37778 14.1343 9.88091 13.8774 10.3409C13.9374 10.6634 13.9749 11.0022 13.9749 11.3372C13.9749 11.6492 13.9489 11.9555 13.8968 12.2559C14.0218 12.154 14.133 12.0384 14.2487 11.9234C15.0749 11.0959 15.5374 10.0059 15.5374 8.83716C15.5374 7.88091 15.2224 6.97216 14.6587 6.21966L16.7874 4.11091V6.33716H18.0374V1.96216H13.6624ZM9.83428 7.11841C9.76303 7.17278 9.68303 7.22966 9.61928 7.29341C9.34928 7.56466 9.17303 7.89341 9.07303 8.25153C9.75428 8.33903 10.3762 8.63653 10.8699 9.13028C11.4605 9.71966 11.7887 10.5022 11.7887 11.3365C11.7887 12.1709 11.4605 12.9528 10.8699 13.5428C10.2799 14.1353 9.4974 14.4622 8.6624 14.4622C7.8274 14.4622 7.04553 14.134 6.45615 13.5434C6.16437 13.255 5.93287 12.9113 5.77514 12.5326C5.61741 12.1538 5.53659 11.7475 5.5374 11.3372C5.5374 10.7965 5.69053 10.2934 5.9474 9.83341C5.88536 9.50488 5.85273 9.17148 5.8499 8.83716C5.8499 8.52549 5.87594 8.21924 5.92803 7.91841C5.80303 8.02028 5.6924 8.13591 5.57615 8.25153C4.75115 9.07716 4.2874 10.1684 4.2874 11.3372C4.2874 12.2934 4.6024 13.2022 5.16615 13.9547L4.1124 15.009L2.8624 13.759L1.9624 14.6378L3.2124 15.8878L1.9624 17.1378L2.8624 18.0378L4.1124 16.7878L5.3624 18.0378L6.24053 17.1378L4.99053 15.8878L6.04553 14.834C6.79871 15.4043 7.71769 15.7127 8.6624 15.7122C9.83115 15.7122 10.9224 15.2497 11.7487 14.4228C12.5749 13.5972 13.0374 12.5059 13.0374 11.3372C13.0374 10.1684 12.5749 9.07841 11.748 8.25091C11.2043 7.70716 10.5568 7.31653 9.83428 7.11841Z"fill="#37C1CE"/> </svg>`,
|
|
1584
|
+
'candidate_phonenumber': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M5.45 4.16667C5.5 4.90833 5.625 5.63333 5.825 6.325L4.825 7.325C4.48333 6.325 4.26667 5.26667 4.19167 4.16667H5.45ZM13.6667 14.1833C14.375 14.3833 15.1 14.5083 15.8333 14.5583V15.8C14.7333 15.725 13.675 15.5083 12.6667 15.175L13.6667 14.1833ZM6.25 2.5H3.33333C2.875 2.5 2.5 2.875 2.5 3.33333C2.5 11.1583 8.84167 17.5 16.6667 17.5C17.125 17.5 17.5 17.125 17.5 16.6667V13.7583C17.5 13.3 17.125 12.925 16.6667 12.925C15.6333 12.925 14.625 12.7583 13.6917 12.45C13.6083 12.4167 13.5167 12.4083 13.4333 12.4083C13.2167 12.4083 13.0083 12.4917 12.8417 12.65L11.0083 14.4833C8.65 13.275 6.71667 11.35 5.51667 8.99167L7.35 7.15833C7.58333 6.925 7.65 6.6 7.55833 6.30833C7.25 5.375 7.08333 4.375 7.08333 3.33333C7.08333 2.875 6.70833 2.5 6.25 2.5Z"fill="#37C1CE"/> </svg>`,
|
|
1585
|
+
'candidate_email': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M18.3337 5.00004C18.3337 4.08337 17.5837 3.33337 16.667 3.33337H3.33366C2.41699 3.33337 1.66699 4.08337 1.66699 5.00004V15C1.66699 15.9167 2.41699 16.6667 3.33366 16.6667H16.667C17.5837 16.6667 18.3337 15.9167 18.3337 15V5.00004ZM16.667 5.00004L10.0003 9.16671L3.33366 5.00004H16.667ZM16.667 15H3.33366V6.66671L10.0003 10.8334L16.667 6.66671V15Z"fill="#37C1CE"/> </svg>`,
|
|
1586
|
+
'candidate_linkedin': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M4.15243 5.9975C5.15943 5.9975 5.97577 5.18116 5.97577 4.17416C5.97577 3.16716 5.15943 2.35083 4.15243 2.35083C3.14544 2.35083 2.3291 3.16716 2.3291 4.17416C2.3291 5.18116 3.14544 5.9975 4.15243 5.9975Z"fill="#37C1CE"/> <path d="M7.69744 7.37915V17.495H10.8383V12.4925C10.8383 11.1725 11.0866 9.89415 12.7233 9.89415C14.3374 9.89415 14.3574 11.4033 14.3574 12.5758V17.4958H17.4999V11.9483C17.4999 9.22332 16.9133 7.12915 13.7283 7.12915C12.1991 7.12915 11.1741 7.96832 10.7549 8.76248H10.7124V7.37915H7.69744ZM2.5791 7.37915H5.72493V17.495H2.5791V7.37915Z"fill="#37C1CE"/> </svg>`,
|
|
1587
|
+
'candidate_address': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M9.99984 1.66663C6.77484 1.66663 4.1665 4.27496 4.1665 7.49996C4.1665 11.875 9.99984 18.3333 9.99984 18.3333C9.99984 18.3333 15.8332 11.875 15.8332 7.49996C15.8332 4.27496 13.2248 1.66663 9.99984 1.66663ZM5.83317 7.49996C5.83317 5.19996 7.69984 3.33329 9.99984 3.33329C12.2998 3.33329 14.1665 5.19996 14.1665 7.49996C14.1665 9.89996 11.7665 13.4916 9.99984 15.7333C8.2665 13.5083 5.83317 9.87496 5.83317 7.49996Z"fill="#37C1CE"/> <path d="M9.99984 9.58329C11.1504 9.58329 12.0832 8.65055 12.0832 7.49996C12.0832 6.34937 11.1504 5.41663 9.99984 5.41663C8.84924 5.41663 7.9165 6.34937 7.9165 7.49996C7.9165 8.65055 8.84924 9.58329 9.99984 9.58329Z"fill="#37C1CE"/> </svg>`,
|
|
1588
|
+
'candidate_experience': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M9.9915 1.66663C5.3915 1.66663 1.6665 5.39996 1.6665 9.99996C1.6665 14.6 5.3915 18.3333 9.9915 18.3333C14.5998 18.3333 18.3332 14.6 18.3332 9.99996C18.3332 5.39996 14.5998 1.66663 9.9915 1.66663ZM9.99984 16.6666C6.3165 16.6666 3.33317 13.6833 3.33317 9.99996C3.33317 6.31663 6.3165 3.33329 9.99984 3.33329C13.6832 3.33329 16.6665 6.31663 16.6665 9.99996C16.6665 13.6833 13.6832 16.6666 9.99984 16.6666ZM10.4165 5.83329H9.1665V10.8333L13.5415 13.4583L14.1665 12.4333L10.4165 10.2083V5.83329Z"fill="#37C1CE"/> </svg>`,
|
|
1589
|
+
'candidate_most_recent': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M11.6665 5.41671V3.75004H8.33317V5.41671H11.6665ZM3.33317 7.08337V16.25H16.6665V7.08337H3.33317ZM16.6665 5.41671C17.5915 5.41671 18.3332 6.15837 18.3332 7.08337V16.25C18.3332 17.175 17.5915 17.9167 16.6665 17.9167H3.33317C2.40817 17.9167 1.6665 17.175 1.6665 16.25L1.67484 7.08337C1.67484 6.15837 2.40817 5.41671 3.33317 5.41671H6.6665V3.75004C6.6665 2.82504 7.40817 2.08337 8.33317 2.08337H11.6665C12.5915 2.08337 13.3332 2.82504 13.3332 3.75004V5.41671H16.6665Z"fill="#37C1CE"/> </svg>`,
|
|
1590
|
+
};
|
|
1591
|
+
const NewResume_Header_Component_ICON = {
|
|
1592
|
+
'add-right_icon_section': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M11.6665 5.41665V3.74998H8.33317V5.41665H11.6665ZM3.33317 7.08331V16.25H16.6665V7.08331H3.33317ZM16.6665 5.41665C17.5915 5.41665 18.3332 6.15831 18.3332 7.08331V16.25C18.3332 17.175 17.5915 17.9166 16.6665 17.9166H3.33317C2.40817 17.9166 1.6665 17.175 1.6665 16.25L1.67484 7.08331C1.67484 6.15831 2.40817 5.41665 3.33317 5.41665H6.6665V3.74998C6.6665 2.82498 7.40817 2.08331 8.33317 2.08331H11.6665C12.5915 2.08331 13.3332 2.82498 13.3332 3.74998V5.41665H16.6665Z"fill="white"/> </svg>`,
|
|
1593
|
+
'add_left-icon_section': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M15.8332 10.8334H10.8332V15.8334H9.1665V10.8334H4.1665V9.16669H9.1665V4.16669H10.8332V9.16669H15.8332V10.8334Z"fill="white"/> </svg>`,
|
|
1594
|
+
'font_case_icon': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M1 15.6184L5.3216 4.11548H7.39053L11.7041 15.6184H9.71509L8.6942 12.6894H4.0355L2.98879 15.6184H1ZM4.6213 11.0386H8.08284L6.40373 6.27228H6.29882L4.6213 11.0386ZM14.8728 15.8847C13.9675 15.8847 13.2618 15.6495 12.7559 15.1791C12.25 14.7087 11.997 14.0563 11.997 13.222C11.997 12.4409 12.2899 11.8152 12.8757 11.3448C13.4615 10.8744 14.2337 10.6391 15.1923 10.6391C15.5473 10.6391 15.9112 10.6746 16.284 10.7457C16.6568 10.8167 17.0118 10.9143 17.3491 11.0386V10.7989C17.3491 10.2683 17.1709 9.83829 16.8144 9.50882C16.458 9.17953 15.9841 9.01489 15.3928 9.01489C14.9929 9.01489 14.6331 9.09477 14.3136 9.25453C13.9941 9.4143 13.7012 9.66282 13.4349 10.0001L12.2367 9.06814C12.5917 8.58885 13.0488 8.22051 13.608 7.96311C14.1672 7.70572 14.784 7.57702 15.4586 7.57702C16.5947 7.57702 17.4689 7.8566 18.0814 8.41577C18.6938 8.97495 19 9.76045 19 10.7723V15.6184H17.3491V14.6599H17.2692C16.9675 15.0859 16.6213 15.3965 16.2308 15.5918C15.8402 15.7871 15.3876 15.8847 14.8728 15.8847ZM15.154 14.4735C15.7637 14.4735 16.282 14.2649 16.7087 13.8477C17.1357 13.4306 17.3491 12.9309 17.3491 12.3486C17.1006 12.2031 16.821 12.0948 16.5104 12.0238C16.1997 11.9528 15.8691 11.9173 15.5185 11.9173C14.9283 11.9173 14.4822 12.0282 14.1805 12.2501C13.8787 12.472 13.7278 12.7966 13.7278 13.2239C13.7278 13.5954 13.8609 13.8965 14.1272 14.1273C14.3935 14.3581 14.7357 14.4735 15.154 14.4735Z"fill="white"/> </svg>`,
|
|
1595
|
+
'retry_AI_icon': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M17.9609 8.10742H13.0674V12.8115C13.0673 12.8672 13.0529 12.9137 13.0225 12.9492C12.992 12.9845 12.9521 13.0019 12.9043 13.002H11.9873C11.9398 13.0019 11.9005 12.9842 11.8701 12.9492C11.8396 12.9137 11.8243 12.8672 11.8242 12.8115V7.8584C11.8243 7.83763 11.8277 7.81873 11.832 7.80078V6.55566H15.457C14.8857 5.64188 14.1245 4.91315 13.1748 4.36914C12.2252 3.82499 11.1759 3.55189 10.0273 3.55176C8.23037 3.55176 6.70222 4.17986 5.44434 5.43359C4.18666 6.68726 3.55762 8.20911 3.55762 10C3.55762 11.7909 4.18666 13.3127 5.44434 14.5664C6.70222 15.8201 8.23037 16.4482 10.0273 16.4482C11.7042 16.4481 13.1421 15.8953 14.3398 14.791C15.5376 13.6866 16.2256 12.3276 16.4053 10.7158H18C17.8357 12.7837 16.9945 14.5154 15.4766 15.9092C13.9585 17.3027 12.1418 17.9998 10.0273 18C7.7986 18 5.90273 17.2225 4.3418 15.667C2.78067 14.1114 2.00005 12.2228 2 10.002C2.00001 7.78111 2.78067 5.89175 4.3418 4.33496C5.90273 2.77828 7.79859 2 10.0273 2C11.3478 2.00013 12.5589 2.296 13.6592 2.88672C14.759 3.47763 15.674 4.25894 16.4033 5.23047V2H17.9609V8.10742ZM9.08984 7.66797C9.15921 7.66812 9.21381 7.68911 9.25293 7.72949C9.29203 7.77006 9.31897 7.81831 9.33203 7.87402L10.8887 12.7734C10.893 12.7936 10.8955 12.8166 10.8955 12.8418C10.8954 12.8822 10.8824 12.9207 10.8564 12.9561C10.8304 12.9862 10.7977 13.0018 10.7588 13.002H10.0771C10.0122 13.0019 9.96411 12.9844 9.93359 12.9492C9.90305 12.9137 9.88373 12.8791 9.875 12.8486L9.59277 11.9961H7.74707L7.46484 12.8486C7.45612 12.8791 7.43777 12.9137 7.40723 12.9492C7.37672 12.9846 7.32786 13.0019 7.2627 13.002H6.58203C6.54295 13.0019 6.50949 12.9864 6.4834 12.9561C6.45742 12.9207 6.4444 12.8822 6.44434 12.8418C6.44435 12.8166 6.44685 12.7936 6.45117 12.7734L8.00879 7.87402C8.02189 7.81823 8.04868 7.77008 8.08789 7.72949C8.1271 7.68903 8.18139 7.66802 8.25098 7.66797H9.08984ZM7.98926 11.0127H9.34473L8.66992 8.81836L7.98926 11.0127Z"fill="white"/> </svg>`,
|
|
1596
|
+
'ordering_icon': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M2.0835 14.1666H3.75016V14.5833H2.91683V15.4166H3.75016V15.8333H2.0835V16.6666H4.5835V13.3333H2.0835V14.1666ZM2.91683 6.66665H3.75016V3.33331H2.0835V4.16665H2.91683V6.66665ZM2.0835 9.16665H3.5835L2.0835 10.9166V11.6666H4.5835V10.8333H3.0835L4.5835 9.08331V8.33331H2.0835V9.16665ZM6.25016 4.16665V5.83331H17.9168V4.16665H6.25016ZM6.25016 15.8333H17.9168V14.1666H6.25016V15.8333ZM6.25016 10.8333H17.9168V9.16665H6.25016V10.8333Z"fill="white"/> </svg>`,
|
|
1597
|
+
'collapse_icon': `<svg xmlns="http://www.w3.org/2000/svg"width="20"height="20"viewBox="0 0 20 20"fill="none"> <path d="M6.66683 15.8333H9.16683V19.1666H10.8335V15.8333H13.3335L10.0002 12.5L6.66683 15.8333ZM13.3335 4.16665H10.8335V0.833313H9.16683V4.16665H6.66683L10.0002 7.49998L13.3335 4.16665ZM3.3335 9.16665V10.8333H16.6668V9.16665H3.3335Z"fill="white"/> </svg>`
|
|
1599
1598
|
};
|
|
1600
1599
|
/**
|
|
1601
1600
|
* Gets an icon from Candidate_Section_ICON and converts it to a data URL format
|
|
@@ -1614,7 +1613,14 @@ function getIconCandidateSection(iconKey) {
|
|
|
1614
1613
|
}
|
|
1615
1614
|
// Convert SVG string to data URL
|
|
1616
1615
|
const encodedSvg = encodeURIComponent(svgString);
|
|
1617
|
-
return `data:image/svg+xml;
|
|
1616
|
+
return `data:image/svg+xml;
|
|
1617
|
+
|
|
1618
|
+
charset=utf-8,
|
|
1619
|
+
$ {
|
|
1620
|
+
encodedSvg
|
|
1621
|
+
}
|
|
1622
|
+
|
|
1623
|
+
`;
|
|
1618
1624
|
}
|
|
1619
1625
|
|
|
1620
1626
|
// Embedded SVG icons - using the same SVG provided by user for visibility_off
|
|
@@ -1695,6 +1701,16 @@ class NewResumeHeaderComponent {
|
|
|
1695
1701
|
this.iconRegistry.addSvgIconLiteral('visibility_off', this.sanitizer.bypassSecurityTrustHtml(VISIBILITY_OFF_ICON_SVG));
|
|
1696
1702
|
// Register edit icon from image-utils
|
|
1697
1703
|
this.iconRegistry.addSvgIconLiteral('edit_icon', this.sanitizer.bypassSecurityTrustHtml(LEFT_AND_RIGHT_ICON_CONSTANTS['edit_icon']));
|
|
1704
|
+
// Register add left and right icons from image-utils
|
|
1705
|
+
this.iconRegistry.addSvgIconLiteral('add_left-icon_section', this.sanitizer.bypassSecurityTrustHtml(NewResume_Header_Component_ICON['add_left-icon_section']));
|
|
1706
|
+
this.iconRegistry.addSvgIconLiteral('add-right_icon_section', this.sanitizer.bypassSecurityTrustHtml(NewResume_Header_Component_ICON['add-right_icon_section']));
|
|
1707
|
+
// Register font_case_icon from image-utils
|
|
1708
|
+
this.iconRegistry.addSvgIconLiteral('font_case_icon', this.sanitizer.bypassSecurityTrustHtml(NewResume_Header_Component_ICON['font_case_icon']));
|
|
1709
|
+
this.iconRegistry.addSvgIconLiteral('retry_AI_icon', this.sanitizer.bypassSecurityTrustHtml(NewResume_Header_Component_ICON['retry_AI_icon']));
|
|
1710
|
+
// Register ordering_icon from image-utils
|
|
1711
|
+
this.iconRegistry.addSvgIconLiteral('ordering_icon', this.sanitizer.bypassSecurityTrustHtml(NewResume_Header_Component_ICON['ordering_icon']));
|
|
1712
|
+
// Register collapse_icon from image-utils
|
|
1713
|
+
this.iconRegistry.addSvgIconLiteral('collapse_icon', this.sanitizer.bypassSecurityTrustHtml(NewResume_Header_Component_ICON['collapse_icon']));
|
|
1698
1714
|
if (!iconsRegistered$3) {
|
|
1699
1715
|
iconsRegistered$3 = true;
|
|
1700
1716
|
console.log('Visibility icons registered successfully');
|
|
@@ -1741,6 +1757,70 @@ class NewResumeHeaderComponent {
|
|
|
1741
1757
|
this.headerCheckboxChecked = checked;
|
|
1742
1758
|
this.headerCheckboxChange.emit(checked);
|
|
1743
1759
|
}
|
|
1760
|
+
/**
|
|
1761
|
+
* Resolves the left and right icon names for a button based on its configuration.
|
|
1762
|
+
* This centralizes all icon mapping logic, making it easier to maintain.
|
|
1763
|
+
*
|
|
1764
|
+
* @param btn - The HeaderButton configuration
|
|
1765
|
+
* @returns An object with leftIcon and rightIcon properties
|
|
1766
|
+
*/
|
|
1767
|
+
getButtonIcons(btn) {
|
|
1768
|
+
// Check if this is an "add" button that should use special icons
|
|
1769
|
+
const isAddButton = btn.leftIcon === 'add' || btn.dataTestId === 'add-education-button';
|
|
1770
|
+
if (isAddButton) {
|
|
1771
|
+
return {
|
|
1772
|
+
leftIcon: 'add_left-icon_section',
|
|
1773
|
+
rightIcon: 'add-right_icon_section'
|
|
1774
|
+
};
|
|
1775
|
+
}
|
|
1776
|
+
// Check if this is a "menu" button - keep the menu icon as is
|
|
1777
|
+
if (btn.leftIcon === 'font_case_icon') {
|
|
1778
|
+
return {
|
|
1779
|
+
leftIcon: 'font_case_icon',
|
|
1780
|
+
rightIcon: btn.rightIcon
|
|
1781
|
+
};
|
|
1782
|
+
}
|
|
1783
|
+
// Return the button's original icon configuration
|
|
1784
|
+
return {
|
|
1785
|
+
leftIcon: btn.leftIcon,
|
|
1786
|
+
rightIcon: btn.rightIcon
|
|
1787
|
+
};
|
|
1788
|
+
}
|
|
1789
|
+
/**
|
|
1790
|
+
* Gets the tooltip text for a button based on its configuration.
|
|
1791
|
+
* Tooltips follow title case (e.g., "Menu", "Add Section").
|
|
1792
|
+
*
|
|
1793
|
+
* @param btn - The HeaderButton configuration
|
|
1794
|
+
* @returns The tooltip text or undefined
|
|
1795
|
+
*/
|
|
1796
|
+
getButtonTooltip(btn) {
|
|
1797
|
+
// Check if this is an "add" button that should have a specific tooltip
|
|
1798
|
+
const isAddButton = btn.leftIcon === 'add' || btn.dataTestId === 'add-education-button';
|
|
1799
|
+
if (isAddButton) {
|
|
1800
|
+
return 'Add Section';
|
|
1801
|
+
}
|
|
1802
|
+
// Check if this is a "font_case_icon" button
|
|
1803
|
+
if (btn.leftIcon === 'font_case_icon') {
|
|
1804
|
+
return 'Font Case';
|
|
1805
|
+
}
|
|
1806
|
+
// Check if this is a "retry_AI_icon" button
|
|
1807
|
+
if (btn.leftIcon === 'retry_AI_icon' || btn.dataTestId === 'refresh-button') {
|
|
1808
|
+
return 'Retry initial Extraction';
|
|
1809
|
+
}
|
|
1810
|
+
// Check if this is a "collapse_icon" button
|
|
1811
|
+
if (btn.leftIcon === 'collapse_icon' || btn.dataTestId === 'collapse-button') {
|
|
1812
|
+
return 'Collapse Description';
|
|
1813
|
+
}
|
|
1814
|
+
// Check if this is an "ordering_icon" button
|
|
1815
|
+
if (btn.leftIcon === 'ordering_icon') {
|
|
1816
|
+
return 'Education Ordering';
|
|
1817
|
+
}
|
|
1818
|
+
// Check if this is the "Run Deep Extraction" button
|
|
1819
|
+
if (btn.dataTestId === 'header-run-deep-extraction') {
|
|
1820
|
+
return 'Deep Extraction';
|
|
1821
|
+
}
|
|
1822
|
+
return undefined;
|
|
1823
|
+
}
|
|
1744
1824
|
onButtonClick(btn, event) {
|
|
1745
1825
|
// If button has a custom onClick handler, call it
|
|
1746
1826
|
if (btn.onClick) {
|
|
@@ -1893,7 +1973,7 @@ class NewResumeHeaderComponent {
|
|
|
1893
1973
|
}
|
|
1894
1974
|
}
|
|
1895
1975
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderComponent, deps: [{ token: i2.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: i1.MatIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1896
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewResumeHeaderComponent, isStandalone: true, selector: "al-newresumeheader", inputs: { title: "title", showHeaderCheckbox: "showHeaderCheckbox", headerCheckboxChecked: "headerCheckboxChecked", configEyeToggle: "configEyeToggle", hiddenSection: "hiddenSection", buttonConfig: "buttonConfig", isLargeScreen: "isLargeScreen", popOutButtonLabel: "popOutButtonLabel", popOutButtonIcon: "popOutButtonIcon", popOutButtonTooltip: "popOutButtonTooltip", popOutButtonTooltipPosition: "popOutButtonTooltipPosition", showPopOutPanel: "showPopOutPanel", popOutMessage: "popOutMessage", dataTestId: "dataTestId" }, outputs: { titleChange: "titleChange", sectionToggled: "sectionToggled", headerCheckboxChange: "headerCheckboxChange", showHideToggleSection: "showHideToggleSection", buttonClicked: "buttonClicked", popOutButtonClick: "popOutButtonClick" }, viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<al-general-container [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\" [padding]=\"'0'\"\n [width]=\"'100%'\">\n <cdk-accordion class=\"example-accordion\">\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n <div class=\"example-accordion-item-header\" [ngClass]=\"{'header-hidden': isSectionHidden}\">\n <!-- Normal header layout (shows when section is NOT hidden) -->\n <ng-container *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\">\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n <div left>\n <button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center\"\n [attr.aria-expanded]=\"accordionItem.expanded\"\n [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\">\n <span class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">\n expand_less\n </span>\n <span class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">\n expand_more\n </span>\n </button>\n <ng-content select=\"[header-left]\"></ng-content>\n </div>\n <div center>\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n [rightWidth]=\"'32px'\" [ngClass]=\"{'input-focused': isInputFocused}\">\n <div left>\n <div class=\"edit-input-group\" [ngClass]=\"{'input-focused': isInputFocused}\">\n <div class=\"content_width\">\n <span *ngIf=\"!isTitleEditing\" class=\"title-text\" (click)=\"onTitleClick()\">\n {{ title || 'Click to edit' }}\n </span>\n <input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n class=\"title-input onfocus-input-text\" />\n <ng-content select=\"[header-center-left]\"></ng-content>\n </div>\n <mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\" matTooltipPosition=\"above\"\n (click)=\"onTitleClick()\">\n </mat-icon>\n </div>\n </div>\n <div center>\n <ng-content select=\"[header-center-center]\"></ng-content>\n <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) -->\n <ng-container *ngIf=\"isLargeScreen\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </ng-container>\n <!-- Menu trigger and slide-out panel for small screens only -->\n <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n <div class=\"menu-trigger\" (click)=\"toggleMenu()\">\n <al-button buttonType=\"icon-label\" iconOnly size=\"header\" category=\"grey\" leftIcon=\"more_vert\"\n aria-label=\"More options\" [dataTestId]=\"'resume-header-more-menu'\">\n </al-button>\n </div>\n <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n <div class=\"fit-panel\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <div right>\n <ng-content select=\"[header-center-right]\"></ng-content>\n <!-- Eye icon - uses actual isHidden value from config, always visible -->\n <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"eyeConfig\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </al-responsive-columns>\n </div>\n <div right>\n <al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n (change)=\"onHeaderCheckboxChange($event)\">\n </al-checkbox>\n <ng-content select=\"[header-right]\"></ng-content>\n </div>\n </al-responsive-columns>\n </ng-container>\n\n <!-- Hidden header layout (shows when section IS hidden) -->\n <ng-template #hiddenHeaderLayout>\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n <div left>\n <!-- Toggle button hidden when section is hidden -->\n <ng-content select=\"[header-left]\"></ng-content>\n </div>\n <div center>\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n [rightWidth]=\"'32px'\">\n <div left>\n <div class=\"edit-input-group hide-header-title\">\n <div class=\"content_width\">\n <span class=\"title-text header-text-turncate\">{{ title }}</span>\n </div>\n </div>\n </div>\n <div center>\n <div class=\"hidden-write\">Section hidden</div>\n </div>\n <div right>\n <ng-content select=\"[header-center-right]\"></ng-content>\n <!-- Eye icon - uses actual isHidden value from config, always visible -->\n <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"eyeConfig\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </al-responsive-columns>\n </div>\n <div right>\n <!-- Checkbox hidden when section is hidden -->\n <ng-content select=\"[header-right]\"></ng-content>\n </div>\n </al-responsive-columns>\n </ng-template>\n </div>\n <!-- Accordion body (only shows when expanded AND not hidden) -->\n <div class=\"example-accordion-item-body\" *ngIf=\"accordionItem.expanded && !isSectionHidden\">\n <!-- Pop-out Panel -->\n <div *ngIf=\"shouldShowPopOut\" class=\"pop-out-panel\">\n <div class=\"pop-out-content\">\n <al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\" [buttonType]=\"'icon-label'\"\n [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\"\n [dataTestId]=\"'pop-out-run-deep-extraction'\" [title]=\"popOutButtonLabel\">\n </al-button>\n <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n <button type=\"button\" class=\"pop-out-close\" (click)=\"dismissPopOut()\" aria-label=\"Close pop-out panel\">\n <span class=\"material-icons-outlined\">close</span>\n </button>\n </div>\n </div>\n <!-- Single body content slot - child component will handle 3-column layout internally -->\n <ng-content></ng-content>\n </div>\n </cdk-accordion-item>\n </cdk-accordion>\n</al-general-container>\n\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n <ng-container *ngFor=\"let btn of buttonConfig\">\n <al-button *ngIf=\"!btn.displayCondition || btn.displayCondition()\" [color]=\"btn.color\" [outline]=\"btn.outline\"\n [size]=\"btn.size\" [iconOutlined]=\"btn.iconOutlined\" [labelText]=\"btn.labelText\" [leftIcon]=\"btn.leftIcon\"\n [rightIcon]=\"btn.rightIcon\" [dataTestId]=\"btn.dataTestId\" [hasDropDown]=\"btn.hasDropDown\"\n [dropdownItems]=\"btn.dropdownItems\" [buttonType]=\"'icon-label'\" [iconOnly]=\"!btn.labelText\"\n (onClick)=\"onButtonClick(btn, $event)\" (optionSelect)=\"onDropdownSelect(btn, $event)\">\n </al-button>\n </ng-container>\n</ng-template>\n\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n let-configEyeToggle=\"configEyeToggle\">\n <div class=\"mat-checkbox-margin align-center\"\n [attr.data-test-id]=\"isHidden ? 'section-show-eye-div' : 'section-hide-eye-div'\"\n style=\"display: flex; align-items: center; justify-content: center;\">\n <mat-icon class=\"delete-multiple mat-fab.mat-accent eye-icon\" [svgIcon]=\"isHidden ? 'visibility' : 'visibility_off'\"\n [matTooltip]=\"configEyeToggle?.tooltips?.[isHidden ? 'collapse' : 'expand'] || (isHidden ? 'Show Section' : 'Hide Section')\"\n [matTooltipPosition]=\"configEyeToggle?.tooltips?.position || 'above'\"\n [attr.aria-label]=\"configEyeToggle?.ariaLabels?.[isHidden ? 'collapsed' : 'expanded'] || (isHidden ? 'Show section' : 'Hide section')\"\n (click)=\"onEyeIconClick(isHidden, accordionItem, configEyeToggle)\"\n [attr.data-test-id]=\"isHidden ? 'section-show-eye-icon' : 'section-hide-eye-icon'\"\n style=\"cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px; color: #717793;\"\n [style.opacity]=\"1\" [style.visibility]=\"'visible'\">\n </mat-icon>\n </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\";.example-accordion-item-header{display:flex;align-items:center;cursor:pointer;width:100%}.example-accordion-item-header al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns ::ng-deep .container{align-items:center;display:grid}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .container{align-items:center;display:grid;min-width:0;transition:grid-template-columns .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .container{grid-template-columns:1fr auto 32px!important}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column{display:flex;align-items:center;min-width:0}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{display:flex;align-items:center;width:100%;min-width:0}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left]{flex-shrink:1;min-width:0;overflow:hidden;max-width:100%;transition:flex .2s ease,width .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused div[left],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left] .edit-input-group.input-focused{width:100%;min-width:0;max-width:none}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left{min-width:0;overflow:hidden;max-width:100%;transition:flex .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .column.left{min-width:0;max-width:none;width:100%}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center]{justify-content:flex-end;gap:8px;flex-shrink:0;flex-wrap:nowrap;display:flex;align-items:center}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{flex-shrink:0}.example-accordion-item-body{width:100%}.example-accordion-item-body al-responsive-columns{width:100%;display:block}.toggle-button{border:none;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.example-accordion-item-header al-responsive-columns div[left]{display:flex;align-items:center;justify-content:center}.example-accordion-item-header al-responsive-columns div[right]{display:flex;align-items:center;justify-content:center;flex-shrink:0}.align-center{display:flex;align-items:center}.example-accordion-item-header{display:flex;justify-content:space-between;align-items:center;background:#ecedf1;gap:8px;border-bottom:2px solid #37c1ce;border-radius:8px;box-sizing:border-box}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;color:#717793;width:24px;height:24px;cursor:pointer;transition:color .2s ease;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 20}.material-symbols-outlined:hover{color:#4b4f62;background-color:#bbc7f6;width:24px;height:24px;border-radius:4px}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{display:flex;align-items:center;justify-content:center}.edit-input-group{display:flex;align-items:center;gap:4px;min-width:0;border-radius:4px;transition:background-color .2s ease,width .2s ease;padding:0 8px;flex-shrink:1;width:100%;max-width:100%;overflow:hidden;flex:1 1 0}.edit-input-group.input-focused{width:100%;flex:1 1 100%;min-width:0}.edit-input-group:hover{background-color:#d1d3db}.edit-input-group:has(input:focus):hover,.edit-input-group:focus-within:hover{background-color:transparent}.edit-input-group:has(input:focus) mat-icon.edit-icon,.edit-input-group:focus-within mat-icon.edit-icon{opacity:0;visibility:hidden}.hover-menu-container{position:relative;display:inline-block}.menu-trigger{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:pointer;z-index:10}.slide-out-panel{position:absolute;bottom:100%;right:0;background-color:#fff;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap;align-items:center}.slide-out-panel.visible{opacity:1;visibility:visible}.fit-panel{display:inline-flex;width:fit-content;background:none;gap:8px;align-items:center}.example-accordion-item-body .pop-out-panel{background-color:#717793;border-radius:12px;width:calc(100% - 110px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;align-items:center}.pop-out-content al-button{flex-shrink:0;align-self:center}.pop-out-content al-button .button-label{display:inline-block!important;visibility:visible!important;opacity:1!important}.pop-out-message{flex:1;color:#fff;font-size:12px;line-height:1.5;font-family:Roboto,sans-serif;font-weight:400;min-width:0;letter-spacing:.06px}.pop-out-message ::ng-deep a,.pop-out-link{color:var(--Base-Blue, #5473E8);font-family:Roboto;font-size:12px;font-style:normal;font-weight:400;line-height:136%;letter-spacing:.06px;cursor:pointer}.pop-out-message ::ng-deep a:hover,.pop-out-link:hover{color:#6581ea}.pop-out-close{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:#6b7280;transition:color .2s ease}.pop-out-close:hover{color:#374151}.pop-out-close .material-icons-outlined{font-size:20px;width:20px;height:20px;color:#fff}.edit-input-group .content_width{flex:1 1 0;min-width:0;max-width:450px;overflow:hidden;display:flex;align-items:center;transition:flex .2s ease,width .2s ease}.edit-input-group.input-focused .content_width{flex:1 1 100%;width:100%;min-width:0}.title-text{font-size:16px;font-weight:400;color:#383b4a;font-family:Roboto,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:4px;flex-shrink:1;min-width:0;max-width:100%;cursor:pointer}.title-input{font-size:16px;font-weight:400;font-family:Roboto,sans-serif;border:none;outline:none;padding:0;margin:0 4px 0 0;flex-shrink:1;min-width:100px;max-width:100%;box-sizing:border-box;width:100%;transition:width .2s ease}.title-input:focus{width:100%;min-width:100%;flex:1 1 100%}.title-input.onfocus-input-text{height:28px;background:#f4f8fc;border-radius:5px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.title-input.focusout-input-text{color:#383b4a;background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.title-input:focus{outline:none;border:none;box-shadow:none}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left{min-width:0;overflow:visible}.edit-input-group mat-icon.edit-icon{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;cursor:pointer;border-radius:4px;flex-shrink:0;min-width:24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:#717793}.edit-input-group:hover mat-icon.edit-icon{opacity:1;visibility:visible}.hide-header-title mat-icon.edit-icon{display:none}.hide-header-title .edit-input-group{cursor:default;opacity:.7}.hide-header-title .edit-input-group:hover{background-color:transparent}.hide-header-title .title-text{cursor:default;pointer-events:none}.header-text-turncate{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:#a2a6b8;line-height:28px;font-family:Roboto,sans-serif;cursor:default}.hidden-section-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.hidden-write{color:#a2a6b8;font-weight:400;font-family:Roboto,sans-serif;white-space:nowrap}.example-accordion-item-header.header-hidden{opacity:.7}.mat-checkbox-margin{margin-left:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i5.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { kind: "directive", type: i5.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: GeneralContainerComponent, selector: "al-general-container", inputs: ["backgroundColor", "padding", "width", "height", "overflowX", "overflowY", "borderPosition", "borderColor", "borderRadius", "boxShadow", "customBoxShadow"] }, { kind: "component", type: ResponsiveColumnsComponent, selector: "al-responsive-columns", inputs: ["dataTestId", "gap", "padding", "leftWidth", "rightWidth", "stackAt"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: CheckboxComponent, selector: "al-checkbox", inputs: ["checked", "disabled", "labelPosition", "name", "required", "value", "color", "labelText", "helperText", "showLabels", "showHelperIcon", "helperIconTooltip", "dataTestId", "tooltip", "tooltipPosition"], outputs: ["change", "indeterminateChange", "focus", "blur", "helperIconClick"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }] }); }
|
|
1976
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewResumeHeaderComponent, isStandalone: true, selector: "al-newresumeheader", inputs: { title: "title", showHeaderCheckbox: "showHeaderCheckbox", headerCheckboxChecked: "headerCheckboxChecked", configEyeToggle: "configEyeToggle", hiddenSection: "hiddenSection", buttonConfig: "buttonConfig", isLargeScreen: "isLargeScreen", popOutButtonLabel: "popOutButtonLabel", popOutButtonIcon: "popOutButtonIcon", popOutButtonTooltip: "popOutButtonTooltip", popOutButtonTooltipPosition: "popOutButtonTooltipPosition", showPopOutPanel: "showPopOutPanel", popOutMessage: "popOutMessage", dataTestId: "dataTestId" }, outputs: { titleChange: "titleChange", sectionToggled: "sectionToggled", headerCheckboxChange: "headerCheckboxChange", showHideToggleSection: "showHideToggleSection", buttonClicked: "buttonClicked", popOutButtonClick: "popOutButtonClick" }, viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<al-general-container [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\" [padding]=\"'0'\"\n [width]=\"'100%'\">\n <cdk-accordion class=\"example-accordion\">\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n <div class=\"example-accordion-item-header\" [ngClass]=\"{'header-hidden': isSectionHidden}\">\n <!-- Normal header layout (shows when section is NOT hidden) -->\n <ng-container *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\">\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n <div left>\n <button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center\"\n [attr.aria-expanded]=\"accordionItem.expanded\"\n [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\">\n <span class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">\n expand_less\n </span>\n <span class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">\n expand_more\n </span>\n </button>\n <ng-content select=\"[header-left]\"></ng-content>\n </div>\n <div center>\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n [rightWidth]=\"'32px'\" [ngClass]=\"{'input-focused': isInputFocused}\">\n <div left>\n <div class=\"edit-input-group\" [ngClass]=\"{'input-focused': isInputFocused}\">\n <div class=\"content_width\">\n <span *ngIf=\"!isTitleEditing\" class=\"title-text\" (click)=\"onTitleClick()\">\n {{ title || 'Click to edit' }}\n </span>\n <input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n class=\"title-input onfocus-input-text\" />\n <ng-content select=\"[header-center-left]\"></ng-content>\n </div>\n <mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\" matTooltipPosition=\"above\"\n (click)=\"onTitleClick()\">\n </mat-icon>\n </div>\n </div>\n <div center>\n <ng-content select=\"[header-center-center]\"></ng-content>\n <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) -->\n <ng-container *ngIf=\"isLargeScreen\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </ng-container>\n <!-- Menu trigger and slide-out panel for small screens only -->\n <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n <div class=\"menu-trigger\" (click)=\"toggleMenu()\">\n <al-button buttonType=\"icon-label\" iconOnly size=\"header\" category=\"grey\" leftIcon=\"more_vert\"\n aria-label=\"More options\" [dataTestId]=\"'resume-header-more-menu'\">\n </al-button>\n </div>\n <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n <div class=\"fit-panel\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <div right>\n <ng-content select=\"[header-center-right]\"></ng-content>\n <!-- Eye icon - uses actual isHidden value from config, always visible -->\n <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"eyeConfig\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </al-responsive-columns>\n </div>\n <div right>\n <al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n (change)=\"onHeaderCheckboxChange($event)\">\n </al-checkbox>\n <ng-content select=\"[header-right]\"></ng-content>\n </div>\n </al-responsive-columns>\n </ng-container>\n\n <!-- Hidden header layout (shows when section IS hidden) -->\n <ng-template #hiddenHeaderLayout>\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n <div left>\n <!-- Toggle button hidden when section is hidden -->\n <ng-content select=\"[header-left]\"></ng-content>\n </div>\n <div center>\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n [rightWidth]=\"'32px'\">\n <div left>\n <div class=\"edit-input-group hide-header-title\">\n <div class=\"content_width\">\n <span class=\"title-text header-text-turncate\">{{ title }}</span>\n </div>\n </div>\n </div>\n <div center>\n <div class=\"hidden-write\">Section hidden</div>\n </div>\n <div right>\n <ng-content select=\"[header-center-right]\"></ng-content>\n <!-- Eye icon - uses actual isHidden value from config, always visible -->\n <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"eyeConfig\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </al-responsive-columns>\n </div>\n <div right>\n <!-- Checkbox hidden when section is hidden -->\n <ng-content select=\"[header-right]\"></ng-content>\n </div>\n </al-responsive-columns>\n </ng-template>\n </div>\n <!-- Accordion body (only shows when expanded AND not hidden) -->\n <div class=\"example-accordion-item-body\" *ngIf=\"accordionItem.expanded && !isSectionHidden\">\n <!-- Pop-out Panel -->\n <div *ngIf=\"shouldShowPopOut\" class=\"pop-out-panel\">\n <div class=\"pop-out-content\">\n <al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\" [buttonType]=\"'icon-label'\"\n [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\"\n [dataTestId]=\"'pop-out-run-deep-extraction'\" [title]=\"popOutButtonLabel\">\n </al-button>\n <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n <button type=\"button\" class=\"pop-out-close\" (click)=\"dismissPopOut()\" aria-label=\"Close pop-out panel\">\n <span class=\"material-icons-outlined\">close</span>\n </button>\n </div>\n </div>\n <!-- Single body content slot - child component will handle 3-column layout internally -->\n <ng-content></ng-content>\n </div>\n </cdk-accordion-item>\n </cdk-accordion>\n</al-general-container>\n\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n <ng-container *ngFor=\"let btn of buttonConfig\">\n <al-button *ngIf=\"!btn.displayCondition || btn.displayCondition()\" [color]=\"btn.color\" [outline]=\"btn.outline\"\n [size]=\"btn.size\" [iconOutlined]=\"btn.iconOutlined\" [labelText]=\"btn.labelText\"\n [leftIcon]=\"getButtonIcons(btn).leftIcon\" [rightIcon]=\"getButtonIcons(btn).rightIcon\"\n [dataTestId]=\"btn.dataTestId\" [hasDropDown]=\"btn.hasDropDown\" [dropdownItems]=\"btn.dropdownItems\"\n [buttonType]=\"'icon-label'\" [iconOnly]=\"!btn.labelText\" [tooltip]=\"getButtonTooltip(btn)\"\n [tooltipPosition]=\"'above'\" (onClick)=\"onButtonClick(btn, $event)\" (optionSelect)=\"onDropdownSelect(btn, $event)\">\n </al-button>\n </ng-container>\n</ng-template>\n\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n let-configEyeToggle=\"configEyeToggle\">\n <div class=\"mat-checkbox-margin align-center\"\n [attr.data-test-id]=\"isHidden ? 'section-show-eye-div' : 'section-hide-eye-div'\"\n style=\"display: flex; align-items: center; justify-content: center;\">\n <mat-icon class=\"delete-multiple mat-fab.mat-accent eye-icon\" [svgIcon]=\"isHidden ? 'visibility' : 'visibility_off'\"\n [matTooltip]=\"configEyeToggle?.tooltips?.[isHidden ? 'collapse' : 'expand'] || (isHidden ? 'Show Section' : 'Hide Section')\"\n [matTooltipPosition]=\"configEyeToggle?.tooltips?.position || 'above'\"\n [attr.aria-label]=\"configEyeToggle?.ariaLabels?.[isHidden ? 'collapsed' : 'expanded'] || (isHidden ? 'Show section' : 'Hide section')\"\n (click)=\"onEyeIconClick(isHidden, accordionItem, configEyeToggle)\"\n [attr.data-test-id]=\"isHidden ? 'section-show-eye-icon' : 'section-hide-eye-icon'\"\n style=\"cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px; color: #717793;\"\n [style.opacity]=\"1\" [style.visibility]=\"'visible'\">\n </mat-icon>\n </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\";.example-accordion-item-header{display:flex;align-items:center;cursor:pointer;width:100%}.example-accordion-item-header al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns ::ng-deep .container{align-items:center;display:grid}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .container{align-items:center;display:grid;min-width:0;transition:grid-template-columns .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .container{grid-template-columns:1fr auto 32px!important}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column{display:flex;align-items:center;min-width:0}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{display:flex;align-items:center;width:100%;min-width:0}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left]{flex-shrink:1;min-width:0;overflow:hidden;max-width:100%;transition:flex .2s ease,width .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused div[left],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left] .edit-input-group.input-focused{width:100%;min-width:0;max-width:none}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left{min-width:0;overflow:hidden;max-width:100%;transition:flex .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .column.left{min-width:0;max-width:none;width:100%}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center]{justify-content:flex-end;gap:8px;flex-shrink:0;flex-wrap:nowrap;display:flex;align-items:center}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{flex-shrink:0}.example-accordion-item-body{width:100%}.example-accordion-item-body al-responsive-columns{width:100%;display:block}.toggle-button{border:none;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.example-accordion-item-header al-responsive-columns div[left]{display:flex;align-items:center;justify-content:center}.example-accordion-item-header al-responsive-columns div[right]{display:flex;align-items:center;justify-content:center;flex-shrink:0}.align-center{display:flex;align-items:center}.example-accordion-item-header{display:flex;justify-content:space-between;align-items:center;background:#ecedf1;gap:8px;border-bottom:2px solid #37c1ce;border-radius:8px;box-sizing:border-box}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;color:#717793;width:24px;height:24px;cursor:pointer;transition:color .2s ease;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 20}.material-symbols-outlined:hover{color:#4b4f62;background-color:#bbc7f6;width:24px;height:24px;border-radius:4px}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{display:flex;align-items:center;justify-content:center}.edit-input-group{display:flex;align-items:center;gap:4px;min-width:0;border-radius:4px;transition:background-color .2s ease,width .2s ease;padding:0 8px;flex-shrink:1;width:100%;max-width:100%;overflow:hidden;flex:1 1 0}.edit-input-group.input-focused{width:100%;flex:1 1 100%;min-width:0}.edit-input-group:hover{background-color:#d1d3db}.edit-input-group:has(input:focus):hover,.edit-input-group:focus-within:hover{background-color:transparent}.edit-input-group:has(input:focus) mat-icon.edit-icon,.edit-input-group:focus-within mat-icon.edit-icon{opacity:0;visibility:hidden}.hover-menu-container{position:relative;display:inline-block}.menu-trigger{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:pointer;z-index:10}.slide-out-panel{position:absolute;bottom:100%;right:0;background-color:#fff;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap;align-items:center}.slide-out-panel.visible{opacity:1;visibility:visible}.fit-panel{display:inline-flex;width:fit-content;background:none;gap:8px;align-items:center}.example-accordion-item-body .pop-out-panel{background-color:#717793;border-radius:12px;width:calc(100% - 110px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;align-items:center}.pop-out-content al-button{flex-shrink:0;align-self:center}.pop-out-content al-button .button-label{display:inline-block!important;visibility:visible!important;opacity:1!important}.pop-out-message{flex:1;color:#fff;font-size:12px;line-height:1.5;font-family:Roboto,sans-serif;font-weight:400;min-width:0;letter-spacing:.06px}.pop-out-message ::ng-deep a,.pop-out-link{color:var(--Base-Blue, #5473E8);font-family:Roboto;font-size:12px;font-style:normal;font-weight:400;line-height:136%;letter-spacing:.06px;cursor:pointer}.pop-out-message ::ng-deep a:hover,.pop-out-link:hover{color:#6581ea}.pop-out-close{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:#6b7280;transition:color .2s ease}.pop-out-close:hover{color:#374151}.pop-out-close .material-icons-outlined{font-size:20px;width:20px;height:20px;color:#fff}.edit-input-group .content_width{flex:1 1 0;min-width:0;max-width:450px;overflow:hidden;display:flex;align-items:center;transition:flex .2s ease,width .2s ease}.edit-input-group.input-focused .content_width{flex:1 1 100%;width:100%;min-width:0}.title-text{font-size:16px;font-weight:400;color:#383b4a;font-family:Roboto,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:4px;flex-shrink:1;min-width:0;max-width:100%;cursor:pointer}.title-input{font-size:16px;font-weight:400;font-family:Roboto,sans-serif;border:none;outline:none;padding:0;margin:0 4px 0 0;flex-shrink:1;min-width:100px;max-width:100%;box-sizing:border-box;width:100%;transition:width .2s ease}.title-input:focus{width:100%;min-width:100%;flex:1 1 100%}.title-input.onfocus-input-text{height:28px;background:#f4f8fc;border-radius:5px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.title-input.focusout-input-text{color:#383b4a;background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.title-input:focus{outline:none;border:none;box-shadow:none}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left{min-width:0;overflow:visible}.edit-input-group mat-icon.edit-icon{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;cursor:pointer;border-radius:4px;flex-shrink:0;min-width:24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:#717793}.edit-input-group:hover mat-icon.edit-icon{opacity:1;visibility:visible}.hide-header-title mat-icon.edit-icon{display:none}.hide-header-title .edit-input-group{cursor:default;opacity:.7}.hide-header-title .edit-input-group:hover{background-color:transparent}.hide-header-title .title-text{cursor:default;pointer-events:none}.header-text-turncate{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:#a2a6b8;line-height:28px;font-family:Roboto,sans-serif;cursor:default}.hidden-section-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.hidden-write{color:#a2a6b8;font-weight:400;font-family:Roboto,sans-serif;white-space:nowrap}.example-accordion-item-header.header-hidden{opacity:.7}.mat-checkbox-margin{margin-left:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i5.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { kind: "directive", type: i5.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: GeneralContainerComponent, selector: "al-general-container", inputs: ["backgroundColor", "padding", "width", "height", "overflowX", "overflowY", "borderPosition", "borderColor", "borderRadius", "boxShadow", "customBoxShadow"] }, { kind: "component", type: ResponsiveColumnsComponent, selector: "al-responsive-columns", inputs: ["dataTestId", "gap", "padding", "leftWidth", "rightWidth", "stackAt"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: CheckboxComponent, selector: "al-checkbox", inputs: ["checked", "disabled", "labelPosition", "name", "required", "value", "color", "labelText", "helperText", "showLabels", "showHelperIcon", "helperIconTooltip", "dataTestId", "tooltip", "tooltipPosition"], outputs: ["change", "indeterminateChange", "focus", "blur", "helperIconClick"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["state", "disabled", "color", "category", "outline", "labelText", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "icon", "iconOutlined", "outlined", "size", "buttonType", "fontClass", "dataTestId", "tooltip", "tooltipPosition", "dropdownItems", "dropdownOptions", "hasDropDown", "dropdown", "hasDropdown", "isDropdown"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }] }); }
|
|
1897
1977
|
}
|
|
1898
1978
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewResumeHeaderComponent, decorators: [{
|
|
1899
1979
|
type: Component,
|
|
@@ -1907,7 +1987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1907
1987
|
ResponsiveColumnsComponent,
|
|
1908
1988
|
CheckboxModule,
|
|
1909
1989
|
ButtonComponent
|
|
1910
|
-
], template: "<al-general-container [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\" [padding]=\"'0'\"\n [width]=\"'100%'\">\n <cdk-accordion class=\"example-accordion\">\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n <div class=\"example-accordion-item-header\" [ngClass]=\"{'header-hidden': isSectionHidden}\">\n <!-- Normal header layout (shows when section is NOT hidden) -->\n <ng-container *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\">\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n <div left>\n <button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center\"\n [attr.aria-expanded]=\"accordionItem.expanded\"\n [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\">\n <span class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">\n expand_less\n </span>\n <span class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">\n expand_more\n </span>\n </button>\n <ng-content select=\"[header-left]\"></ng-content>\n </div>\n <div center>\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n [rightWidth]=\"'32px'\" [ngClass]=\"{'input-focused': isInputFocused}\">\n <div left>\n <div class=\"edit-input-group\" [ngClass]=\"{'input-focused': isInputFocused}\">\n <div class=\"content_width\">\n <span *ngIf=\"!isTitleEditing\" class=\"title-text\" (click)=\"onTitleClick()\">\n {{ title || 'Click to edit' }}\n </span>\n <input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n class=\"title-input onfocus-input-text\" />\n <ng-content select=\"[header-center-left]\"></ng-content>\n </div>\n <mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\" matTooltipPosition=\"above\"\n (click)=\"onTitleClick()\">\n </mat-icon>\n </div>\n </div>\n <div center>\n <ng-content select=\"[header-center-center]\"></ng-content>\n <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) -->\n <ng-container *ngIf=\"isLargeScreen\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </ng-container>\n <!-- Menu trigger and slide-out panel for small screens only -->\n <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n <div class=\"menu-trigger\" (click)=\"toggleMenu()\">\n <al-button buttonType=\"icon-label\" iconOnly size=\"header\" category=\"grey\" leftIcon=\"more_vert\"\n aria-label=\"More options\" [dataTestId]=\"'resume-header-more-menu'\">\n </al-button>\n </div>\n <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n <div class=\"fit-panel\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <div right>\n <ng-content select=\"[header-center-right]\"></ng-content>\n <!-- Eye icon - uses actual isHidden value from config, always visible -->\n <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"eyeConfig\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </al-responsive-columns>\n </div>\n <div right>\n <al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n (change)=\"onHeaderCheckboxChange($event)\">\n </al-checkbox>\n <ng-content select=\"[header-right]\"></ng-content>\n </div>\n </al-responsive-columns>\n </ng-container>\n\n <!-- Hidden header layout (shows when section IS hidden) -->\n <ng-template #hiddenHeaderLayout>\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n <div left>\n <!-- Toggle button hidden when section is hidden -->\n <ng-content select=\"[header-left]\"></ng-content>\n </div>\n <div center>\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n [rightWidth]=\"'32px'\">\n <div left>\n <div class=\"edit-input-group hide-header-title\">\n <div class=\"content_width\">\n <span class=\"title-text header-text-turncate\">{{ title }}</span>\n </div>\n </div>\n </div>\n <div center>\n <div class=\"hidden-write\">Section hidden</div>\n </div>\n <div right>\n <ng-content select=\"[header-center-right]\"></ng-content>\n <!-- Eye icon - uses actual isHidden value from config, always visible -->\n <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"eyeConfig\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </al-responsive-columns>\n </div>\n <div right>\n <!-- Checkbox hidden when section is hidden -->\n <ng-content select=\"[header-right]\"></ng-content>\n </div>\n </al-responsive-columns>\n </ng-template>\n </div>\n <!-- Accordion body (only shows when expanded AND not hidden) -->\n <div class=\"example-accordion-item-body\" *ngIf=\"accordionItem.expanded && !isSectionHidden\">\n <!-- Pop-out Panel -->\n <div *ngIf=\"shouldShowPopOut\" class=\"pop-out-panel\">\n <div class=\"pop-out-content\">\n <al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\" [buttonType]=\"'icon-label'\"\n [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\"\n [dataTestId]=\"'pop-out-run-deep-extraction'\" [title]=\"popOutButtonLabel\">\n </al-button>\n <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n <button type=\"button\" class=\"pop-out-close\" (click)=\"dismissPopOut()\" aria-label=\"Close pop-out panel\">\n <span class=\"material-icons-outlined\">close</span>\n </button>\n </div>\n </div>\n <!-- Single body content slot - child component will handle 3-column layout internally -->\n <ng-content></ng-content>\n </div>\n </cdk-accordion-item>\n </cdk-accordion>\n</al-general-container>\n\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n <ng-container *ngFor=\"let btn of buttonConfig\">\n <al-button *ngIf=\"!btn.displayCondition || btn.displayCondition()\" [color]=\"btn.color\" [outline]=\"btn.outline\"\n [size]=\"btn.size\" [iconOutlined]=\"btn.iconOutlined\" [labelText]=\"btn.labelText\" [leftIcon]=\"btn.leftIcon\"\n [rightIcon]=\"btn.rightIcon\" [dataTestId]=\"btn.dataTestId\" [hasDropDown]=\"btn.hasDropDown\"\n [dropdownItems]=\"btn.dropdownItems\" [buttonType]=\"'icon-label'\" [iconOnly]=\"!btn.labelText\"\n (onClick)=\"onButtonClick(btn, $event)\" (optionSelect)=\"onDropdownSelect(btn, $event)\">\n </al-button>\n </ng-container>\n</ng-template>\n\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n let-configEyeToggle=\"configEyeToggle\">\n <div class=\"mat-checkbox-margin align-center\"\n [attr.data-test-id]=\"isHidden ? 'section-show-eye-div' : 'section-hide-eye-div'\"\n style=\"display: flex; align-items: center; justify-content: center;\">\n <mat-icon class=\"delete-multiple mat-fab.mat-accent eye-icon\" [svgIcon]=\"isHidden ? 'visibility' : 'visibility_off'\"\n [matTooltip]=\"configEyeToggle?.tooltips?.[isHidden ? 'collapse' : 'expand'] || (isHidden ? 'Show Section' : 'Hide Section')\"\n [matTooltipPosition]=\"configEyeToggle?.tooltips?.position || 'above'\"\n [attr.aria-label]=\"configEyeToggle?.ariaLabels?.[isHidden ? 'collapsed' : 'expanded'] || (isHidden ? 'Show section' : 'Hide section')\"\n (click)=\"onEyeIconClick(isHidden, accordionItem, configEyeToggle)\"\n [attr.data-test-id]=\"isHidden ? 'section-show-eye-icon' : 'section-hide-eye-icon'\"\n style=\"cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px; color: #717793;\"\n [style.opacity]=\"1\" [style.visibility]=\"'visible'\">\n </mat-icon>\n </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\";.example-accordion-item-header{display:flex;align-items:center;cursor:pointer;width:100%}.example-accordion-item-header al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns ::ng-deep .container{align-items:center;display:grid}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .container{align-items:center;display:grid;min-width:0;transition:grid-template-columns .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .container{grid-template-columns:1fr auto 32px!important}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column{display:flex;align-items:center;min-width:0}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{display:flex;align-items:center;width:100%;min-width:0}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left]{flex-shrink:1;min-width:0;overflow:hidden;max-width:100%;transition:flex .2s ease,width .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused div[left],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left] .edit-input-group.input-focused{width:100%;min-width:0;max-width:none}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left{min-width:0;overflow:hidden;max-width:100%;transition:flex .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .column.left{min-width:0;max-width:none;width:100%}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center]{justify-content:flex-end;gap:8px;flex-shrink:0;flex-wrap:nowrap;display:flex;align-items:center}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{flex-shrink:0}.example-accordion-item-body{width:100%}.example-accordion-item-body al-responsive-columns{width:100%;display:block}.toggle-button{border:none;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.example-accordion-item-header al-responsive-columns div[left]{display:flex;align-items:center;justify-content:center}.example-accordion-item-header al-responsive-columns div[right]{display:flex;align-items:center;justify-content:center;flex-shrink:0}.align-center{display:flex;align-items:center}.example-accordion-item-header{display:flex;justify-content:space-between;align-items:center;background:#ecedf1;gap:8px;border-bottom:2px solid #37c1ce;border-radius:8px;box-sizing:border-box}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;color:#717793;width:24px;height:24px;cursor:pointer;transition:color .2s ease;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 20}.material-symbols-outlined:hover{color:#4b4f62;background-color:#bbc7f6;width:24px;height:24px;border-radius:4px}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{display:flex;align-items:center;justify-content:center}.edit-input-group{display:flex;align-items:center;gap:4px;min-width:0;border-radius:4px;transition:background-color .2s ease,width .2s ease;padding:0 8px;flex-shrink:1;width:100%;max-width:100%;overflow:hidden;flex:1 1 0}.edit-input-group.input-focused{width:100%;flex:1 1 100%;min-width:0}.edit-input-group:hover{background-color:#d1d3db}.edit-input-group:has(input:focus):hover,.edit-input-group:focus-within:hover{background-color:transparent}.edit-input-group:has(input:focus) mat-icon.edit-icon,.edit-input-group:focus-within mat-icon.edit-icon{opacity:0;visibility:hidden}.hover-menu-container{position:relative;display:inline-block}.menu-trigger{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:pointer;z-index:10}.slide-out-panel{position:absolute;bottom:100%;right:0;background-color:#fff;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap;align-items:center}.slide-out-panel.visible{opacity:1;visibility:visible}.fit-panel{display:inline-flex;width:fit-content;background:none;gap:8px;align-items:center}.example-accordion-item-body .pop-out-panel{background-color:#717793;border-radius:12px;width:calc(100% - 110px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;align-items:center}.pop-out-content al-button{flex-shrink:0;align-self:center}.pop-out-content al-button .button-label{display:inline-block!important;visibility:visible!important;opacity:1!important}.pop-out-message{flex:1;color:#fff;font-size:12px;line-height:1.5;font-family:Roboto,sans-serif;font-weight:400;min-width:0;letter-spacing:.06px}.pop-out-message ::ng-deep a,.pop-out-link{color:var(--Base-Blue, #5473E8);font-family:Roboto;font-size:12px;font-style:normal;font-weight:400;line-height:136%;letter-spacing:.06px;cursor:pointer}.pop-out-message ::ng-deep a:hover,.pop-out-link:hover{color:#6581ea}.pop-out-close{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:#6b7280;transition:color .2s ease}.pop-out-close:hover{color:#374151}.pop-out-close .material-icons-outlined{font-size:20px;width:20px;height:20px;color:#fff}.edit-input-group .content_width{flex:1 1 0;min-width:0;max-width:450px;overflow:hidden;display:flex;align-items:center;transition:flex .2s ease,width .2s ease}.edit-input-group.input-focused .content_width{flex:1 1 100%;width:100%;min-width:0}.title-text{font-size:16px;font-weight:400;color:#383b4a;font-family:Roboto,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:4px;flex-shrink:1;min-width:0;max-width:100%;cursor:pointer}.title-input{font-size:16px;font-weight:400;font-family:Roboto,sans-serif;border:none;outline:none;padding:0;margin:0 4px 0 0;flex-shrink:1;min-width:100px;max-width:100%;box-sizing:border-box;width:100%;transition:width .2s ease}.title-input:focus{width:100%;min-width:100%;flex:1 1 100%}.title-input.onfocus-input-text{height:28px;background:#f4f8fc;border-radius:5px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.title-input.focusout-input-text{color:#383b4a;background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.title-input:focus{outline:none;border:none;box-shadow:none}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left{min-width:0;overflow:visible}.edit-input-group mat-icon.edit-icon{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;cursor:pointer;border-radius:4px;flex-shrink:0;min-width:24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:#717793}.edit-input-group:hover mat-icon.edit-icon{opacity:1;visibility:visible}.hide-header-title mat-icon.edit-icon{display:none}.hide-header-title .edit-input-group{cursor:default;opacity:.7}.hide-header-title .edit-input-group:hover{background-color:transparent}.hide-header-title .title-text{cursor:default;pointer-events:none}.header-text-turncate{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:#a2a6b8;line-height:28px;font-family:Roboto,sans-serif;cursor:default}.hidden-section-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.hidden-write{color:#a2a6b8;font-weight:400;font-family:Roboto,sans-serif;white-space:nowrap}.example-accordion-item-header.header-hidden{opacity:.7}.mat-checkbox-margin{margin-left:8px}\n"] }]
|
|
1990
|
+
], template: "<al-general-container [borderRadius]=\"'0'\" [borderPosition]=\"'none'\" [boxShadow]=\"false\" [padding]=\"'0'\"\n [width]=\"'100%'\">\n <cdk-accordion class=\"example-accordion\">\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n <div class=\"example-accordion-item-header\" [ngClass]=\"{'header-hidden': isSectionHidden}\">\n <!-- Normal header layout (shows when section is NOT hidden) -->\n <ng-container *ngIf=\"!isSectionHidden; else hiddenHeaderLayout\">\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n <div left>\n <button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center\"\n [attr.aria-expanded]=\"accordionItem.expanded\"\n [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\">\n <span class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">\n expand_less\n </span>\n <span class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">\n expand_more\n </span>\n </button>\n <ng-content select=\"[header-left]\"></ng-content>\n </div>\n <div center>\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n [rightWidth]=\"'32px'\" [ngClass]=\"{'input-focused': isInputFocused}\">\n <div left>\n <div class=\"edit-input-group\" [ngClass]=\"{'input-focused': isInputFocused}\">\n <div class=\"content_width\">\n <span *ngIf=\"!isTitleEditing\" class=\"title-text\" (click)=\"onTitleClick()\">\n {{ title || 'Click to edit' }}\n </span>\n <input *ngIf=\"isTitleEditing\" #titleInput type=\"text\" [(ngModel)]=\"editedTitle\"\n (focus)=\"onTitleFocus()\" (blur)=\"onTitleBlur()\" (keydown)=\"onTitleKeyPress($event)\"\n class=\"title-input onfocus-input-text\" />\n <ng-content select=\"[header-center-left]\"></ng-content>\n </div>\n <mat-icon class=\"edit-icon\" svgIcon=\"edit_icon\" matTooltip=\"Edit title\" matTooltipPosition=\"above\"\n (click)=\"onTitleClick()\">\n </mat-icon>\n </div>\n </div>\n <div center>\n <ng-content select=\"[header-center-center]\"></ng-content>\n <!-- Header buttons for large screens (including Deep Extraction via buttonConfig) -->\n <ng-container *ngIf=\"isLargeScreen\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </ng-container>\n <!-- Menu trigger and slide-out panel for small screens only -->\n <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n <div class=\"menu-trigger\" (click)=\"toggleMenu()\">\n <al-button buttonType=\"icon-label\" iconOnly size=\"header\" category=\"grey\" leftIcon=\"more_vert\"\n aria-label=\"More options\" [dataTestId]=\"'resume-header-more-menu'\">\n </al-button>\n </div>\n <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\">\n <div class=\"fit-panel\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <div right>\n <ng-content select=\"[header-center-right]\"></ng-content>\n <!-- Eye icon - uses actual isHidden value from config, always visible -->\n <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"eyeConfig\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </al-responsive-columns>\n </div>\n <div right>\n <al-checkbox *ngIf=\"showHeaderCheckbox\" [checked]=\"headerCheckboxChecked\" [showLabels]=\"false\"\n (change)=\"onHeaderCheckboxChange($event)\">\n </al-checkbox>\n <ng-content select=\"[header-right]\"></ng-content>\n </div>\n </al-responsive-columns>\n </ng-container>\n\n <!-- Hidden header layout (shows when section IS hidden) -->\n <ng-template #hiddenHeaderLayout>\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'8px 12px'\">\n <div left>\n <!-- Toggle button hidden when section is hidden -->\n <ng-content select=\"[header-left]\"></ng-content>\n </div>\n <div center>\n <al-responsive-columns [stackAt]=\"0\" [gap]=\"'12px'\" [padding]=\"'0'\" [leftWidth]=\"'auto'\"\n [rightWidth]=\"'32px'\">\n <div left>\n <div class=\"edit-input-group hide-header-title\">\n <div class=\"content_width\">\n <span class=\"title-text header-text-turncate\">{{ title }}</span>\n </div>\n </div>\n </div>\n <div center>\n <div class=\"hidden-write\">Section hidden</div>\n </div>\n <div right>\n <ng-content select=\"[header-center-right]\"></ng-content>\n <!-- Eye icon - uses actual isHidden value from config, always visible -->\n <ng-container *ngIf=\"configEyeToggle && configEyeToggle.length > 0\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"eyeConfig\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: eyeConfig.isHidden === true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\">\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </al-responsive-columns>\n </div>\n <div right>\n <!-- Checkbox hidden when section is hidden -->\n <ng-content select=\"[header-right]\"></ng-content>\n </div>\n </al-responsive-columns>\n </ng-template>\n </div>\n <!-- Accordion body (only shows when expanded AND not hidden) -->\n <div class=\"example-accordion-item-body\" *ngIf=\"accordionItem.expanded && !isSectionHidden\">\n <!-- Pop-out Panel -->\n <div *ngIf=\"shouldShowPopOut\" class=\"pop-out-panel\">\n <div class=\"pop-out-content\">\n <al-button [labelText]=\"popOutButtonLabel\" [rightIcon]=\"popOutButtonIcon\" [buttonType]=\"'icon-label'\"\n [category]=\"'gradient'\" [size]=\"'xs'\" [iconOnly]=\"false\" (onClick)=\"popOutButtonClick.emit()\"\n [dataTestId]=\"'pop-out-run-deep-extraction'\" [title]=\"popOutButtonLabel\">\n </al-button>\n <p class=\"pop-out-message\" [innerHTML]=\"sanitizedMessage\"></p>\n <button type=\"button\" class=\"pop-out-close\" (click)=\"dismissPopOut()\" aria-label=\"Close pop-out panel\">\n <span class=\"material-icons-outlined\">close</span>\n </button>\n </div>\n </div>\n <!-- Single body content slot - child component will handle 3-column layout internally -->\n <ng-content></ng-content>\n </div>\n </cdk-accordion-item>\n </cdk-accordion>\n</al-general-container>\n\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n <ng-container *ngFor=\"let btn of buttonConfig\">\n <al-button *ngIf=\"!btn.displayCondition || btn.displayCondition()\" [color]=\"btn.color\" [outline]=\"btn.outline\"\n [size]=\"btn.size\" [iconOutlined]=\"btn.iconOutlined\" [labelText]=\"btn.labelText\"\n [leftIcon]=\"getButtonIcons(btn).leftIcon\" [rightIcon]=\"getButtonIcons(btn).rightIcon\"\n [dataTestId]=\"btn.dataTestId\" [hasDropDown]=\"btn.hasDropDown\" [dropdownItems]=\"btn.dropdownItems\"\n [buttonType]=\"'icon-label'\" [iconOnly]=\"!btn.labelText\" [tooltip]=\"getButtonTooltip(btn)\"\n [tooltipPosition]=\"'above'\" (onClick)=\"onButtonClick(btn, $event)\" (optionSelect)=\"onDropdownSelect(btn, $event)\">\n </al-button>\n </ng-container>\n</ng-template>\n\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n let-configEyeToggle=\"configEyeToggle\">\n <div class=\"mat-checkbox-margin align-center\"\n [attr.data-test-id]=\"isHidden ? 'section-show-eye-div' : 'section-hide-eye-div'\"\n style=\"display: flex; align-items: center; justify-content: center;\">\n <mat-icon class=\"delete-multiple mat-fab.mat-accent eye-icon\" [svgIcon]=\"isHidden ? 'visibility' : 'visibility_off'\"\n [matTooltip]=\"configEyeToggle?.tooltips?.[isHidden ? 'collapse' : 'expand'] || (isHidden ? 'Show Section' : 'Hide Section')\"\n [matTooltipPosition]=\"configEyeToggle?.tooltips?.position || 'above'\"\n [attr.aria-label]=\"configEyeToggle?.ariaLabels?.[isHidden ? 'collapsed' : 'expanded'] || (isHidden ? 'Show section' : 'Hide section')\"\n (click)=\"onEyeIconClick(isHidden, accordionItem, configEyeToggle)\"\n [attr.data-test-id]=\"isHidden ? 'section-show-eye-icon' : 'section-hide-eye-icon'\"\n style=\"cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px; color: #717793;\"\n [style.opacity]=\"1\" [style.visibility]=\"'visible'\">\n </mat-icon>\n </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Icons+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0\";@import\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\";.example-accordion-item-header{display:flex;align-items:center;cursor:pointer;width:100%}.example-accordion-item-header al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns ::ng-deep .container{align-items:center;display:grid}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns{width:100%;display:block}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .container{align-items:center;display:grid;min-width:0;transition:grid-template-columns .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .container{grid-template-columns:1fr auto 32px!important}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column{display:flex;align-items:center;min-width:0}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{display:flex;align-items:center;width:100%;min-width:0}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left]{flex-shrink:1;min-width:0;overflow:hidden;max-width:100%;transition:flex .2s ease,width .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused div[left],.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[left] .edit-input-group.input-focused{width:100%;min-width:0;max-width:none}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left{min-width:0;overflow:hidden;max-width:100%;transition:flex .2s ease}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns.input-focused ::ng-deep .column.left{min-width:0;max-width:none;width:100%}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[center]{justify-content:flex-end;gap:8px;flex-shrink:0;flex-wrap:nowrap;display:flex;align-items:center}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{flex-shrink:0}.example-accordion-item-body{width:100%}.example-accordion-item-body al-responsive-columns{width:100%;display:block}.toggle-button{border:none;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}.example-accordion-item-header al-responsive-columns div[left]{display:flex;align-items:center;justify-content:center}.example-accordion-item-header al-responsive-columns div[right]{display:flex;align-items:center;justify-content:center;flex-shrink:0}.align-center{display:flex;align-items:center}.example-accordion-item-header{display:flex;justify-content:space-between;align-items:center;background:#ecedf1;gap:8px;border-bottom:2px solid #37c1ce;border-radius:8px;box-sizing:border-box}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;color:#717793;width:24px;height:24px;cursor:pointer;transition:color .2s ease;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 20}.material-symbols-outlined:hover{color:#4b4f62;background-color:#bbc7f6;width:24px;height:24px;border-radius:4px}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns div[right]{display:flex;align-items:center;justify-content:center}.edit-input-group{display:flex;align-items:center;gap:4px;min-width:0;border-radius:4px;transition:background-color .2s ease,width .2s ease;padding:0 8px;flex-shrink:1;width:100%;max-width:100%;overflow:hidden;flex:1 1 0}.edit-input-group.input-focused{width:100%;flex:1 1 100%;min-width:0}.edit-input-group:hover{background-color:#d1d3db}.edit-input-group:has(input:focus):hover,.edit-input-group:focus-within:hover{background-color:transparent}.edit-input-group:has(input:focus) mat-icon.edit-icon,.edit-input-group:focus-within mat-icon.edit-icon{opacity:0;visibility:hidden}.hover-menu-container{position:relative;display:inline-block}.menu-trigger{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:pointer;z-index:10}.slide-out-panel{position:absolute;bottom:100%;right:0;background-color:#fff;border:1px solid #dee2e6;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10035;padding:8px;margin-bottom:6px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;display:flex;flex-direction:row;gap:8px;flex-wrap:nowrap;white-space:nowrap;align-items:center}.slide-out-panel.visible{opacity:1;visibility:visible}.fit-panel{display:inline-flex;width:fit-content;background:none;gap:8px;align-items:center}.example-accordion-item-body .pop-out-panel{background-color:#717793;border-radius:12px;width:calc(100% - 110px);margin:8px auto;padding:12px 16px;position:relative;box-sizing:border-box}.pop-out-content{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;align-items:center}.pop-out-content al-button{flex-shrink:0;align-self:center}.pop-out-content al-button .button-label{display:inline-block!important;visibility:visible!important;opacity:1!important}.pop-out-message{flex:1;color:#fff;font-size:12px;line-height:1.5;font-family:Roboto,sans-serif;font-weight:400;min-width:0;letter-spacing:.06px}.pop-out-message ::ng-deep a,.pop-out-link{color:var(--Base-Blue, #5473E8);font-family:Roboto;font-size:12px;font-style:normal;font-weight:400;line-height:136%;letter-spacing:.06px;cursor:pointer}.pop-out-message ::ng-deep a:hover,.pop-out-link:hover{color:#6581ea}.pop-out-close{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:#6b7280;transition:color .2s ease}.pop-out-close:hover{color:#374151}.pop-out-close .material-icons-outlined{font-size:20px;width:20px;height:20px;color:#fff}.edit-input-group .content_width{flex:1 1 0;min-width:0;max-width:450px;overflow:hidden;display:flex;align-items:center;transition:flex .2s ease,width .2s ease}.edit-input-group.input-focused .content_width{flex:1 1 100%;width:100%;min-width:0}.title-text{font-size:16px;font-weight:400;color:#383b4a;font-family:Roboto,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:4px;flex-shrink:1;min-width:0;max-width:100%;cursor:pointer}.title-input{font-size:16px;font-weight:400;font-family:Roboto,sans-serif;border:none;outline:none;padding:0;margin:0 4px 0 0;flex-shrink:1;min-width:100px;max-width:100%;box-sizing:border-box;width:100%;transition:width .2s ease}.title-input:focus{width:100%;min-width:100%;flex:1 1 100%}.title-input.onfocus-input-text{height:28px;background:#f4f8fc;border-radius:5px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.title-input.focusout-input-text{color:#383b4a;background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.title-input:focus{outline:none;border:none;box-shadow:none}.example-accordion-item-header al-responsive-columns div[center] al-responsive-columns ::ng-deep .column.left{min-width:0;overflow:visible}.edit-input-group mat-icon.edit-icon{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;cursor:pointer;border-radius:4px;flex-shrink:0;min-width:24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:#717793}.edit-input-group:hover mat-icon.edit-icon{opacity:1;visibility:visible}.hide-header-title mat-icon.edit-icon{display:none}.hide-header-title .edit-input-group{cursor:default;opacity:.7}.hide-header-title .edit-input-group:hover{background-color:transparent}.hide-header-title .title-text{cursor:default;pointer-events:none}.header-text-turncate{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:#a2a6b8;line-height:28px;font-family:Roboto,sans-serif;cursor:default}.hidden-section-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.hidden-write{color:#a2a6b8;font-weight:400;font-family:Roboto,sans-serif;white-space:nowrap}.example-accordion-item-header.header-hidden{opacity:.7}.mat-checkbox-margin{margin-left:8px}\n"] }]
|
|
1911
1991
|
}], ctorParameters: () => [{ type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i1.MatIconRegistry }], propDecorators: { title: [{
|
|
1912
1992
|
type: Input
|
|
1913
1993
|
}], showHeaderCheckbox: [{
|