@allsorter/ui-components 0.0.358 → 0.0.361
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 +632 -6
- package/fesm2022/allsorter-ui-components.mjs.map +1 -1
- package/lib/checkbox/checkbox.component.d.ts +31 -0
- package/lib/checkbox/checkbox.module.d.ts +9 -0
- package/lib/loader/loader.component.d.ts +78 -0
- package/lib/loader/loader.module.d.ts +13 -0
- package/lib/radio/radio.component.d.ts +29 -0
- package/lib/radio/radio.module.d.ts +9 -0
- package/lib/resume-header/resume-header.model.d.ts +1 -1
- package/lib/slide-toggle/slide-toggle.component.d.ts +37 -0
- package/lib/slide-toggle/slide-toggle.module.d.ts +8 -0
- package/lib/toggle-buttons/toggle-buttons.component.d.ts +25 -0
- package/lib/toggle-buttons/toggle-buttons.module.d.ts +7 -0
- package/package.json +1 -1
- package/public-api.d.ts +10 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, EventEmitter, Input, Output, NgModule, forwardRef } from '@angular/core';
|
|
2
|
+
import { Injectable, Component, EventEmitter, Input, Output, NgModule, forwardRef, HostBinding, ElementRef, ViewChild } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/material/icon';
|
|
@@ -25,6 +25,12 @@ import * as i4$2 from '@angular/material/tooltip';
|
|
|
25
25
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
26
26
|
import * as i5 from '@angular/cdk/accordion';
|
|
27
27
|
import { CdkAccordionModule } from '@angular/cdk/accordion';
|
|
28
|
+
import * as i2$3 from '@angular/material/radio';
|
|
29
|
+
import { MatRadioModule } from '@angular/material/radio';
|
|
30
|
+
import * as i2$4 from '@angular/material/button-toggle';
|
|
31
|
+
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
32
|
+
import * as i2$5 from '@angular/material/slide-toggle';
|
|
33
|
+
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
28
34
|
|
|
29
35
|
class AllsorterLibService {
|
|
30
36
|
constructor() { }
|
|
@@ -272,7 +278,7 @@ class InputComponent {
|
|
|
272
278
|
useExisting: forwardRef(() => InputComponent),
|
|
273
279
|
multi: true
|
|
274
280
|
}
|
|
275
|
-
], ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"al-input-field\" [ngClass]=\"[\n helperText ? 'has-error' : '',\n getSizeClass(),\n getCategoryClass(),\n noBorder ? 'al-input-no-border' : '',\n leftIcon ? 'has-left-icon' : ''\n ]\">\n <mat-label *ngIf=\"label && !noBorder\">{{ label }}</mat-label>\n\n <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\" [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n matPrefix class=\"left-icon\">{{ leftIconText }}</mat-icon>\n\n <ng-container *ngIf=\"dropDown; else regularInput\">\n <mat-select [disabled]=\"isDisabled\" [(ngModel)]=\"value\" (selectionChange)=\"onSelectionChange($event.value)\">\n <mat-option *ngFor=\"let option of options\" [value]=\"option\">{{ option }}</mat-option>\n </mat-select>\n </ng-container>\n <ng-template #regularInput>\n <input matInput [placeholder]=\"placeholder\" [type]=\"type\" [disabled]=\"isDisabled\" [(ngModel)]=\"value\"\n (input)=\"onInputChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n </ng-template>\n\n <mat-icon *ngIf=\"rightIcon?.trim() as rightIconText\"\n [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\" matSuffix class=\"right-icon\">{{ rightIconText\n }}</mat-icon>\n\n <mat-error *ngIf=\"false && helperTextLabel\">{{ helperTextLabel }}</mat-error>\n <mat-hint *ngIf=\"helperText && helperTextLabel\">{{ helperTextLabel }}</mat-hint>\n</mat-form-field>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap\";@import\"https://cdn.jsdelivr.net/npm/@angular/material@19.2.3/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";.al-input-field{width:100%}::ng-deep .al-input-field .mat-mdc-form-field-flex,::ng-deep .al-input-field .mat-mdc-text-field-wrapper,::ng-deep .al-input-field .mat-mdc-form-field-infix{background-color:#f7f9fe!important}::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper{background-color:transparent!important}::ng-deep .al-input-field .mat-mdc-form-field-focus-overlay{background-color:#f7f9fe!important}::ng-deep .al-input-category-primary,::ng-deep .al-input-category-success,::ng-deep .al-input-category-warn,::ng-deep .al-input-category-disabled{--mdc-outlined-text-field-outline-width: 1px !important;--mdc-outlined-text-field-focus-outline-width: 1px !important;--mdc-outlined-text-field-hover-outline-width: 1px !important}::ng-deep .al-input-category-simple{--mdc-outlined-text-field-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-focus-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-label-text-color: #5473E8 !important;--mdc-outlined-text-field-focus-label-text-color: #5473E8 !important}::ng-deep .al-input-category-success{--mdc-outlined-text-field-outline-color: #00AD83 !important;--mdc-outlined-text-field-focus-outline-color: #00AD83 !important;--mdc-outlined-text-field-hover-outline-color: #00AD83 !important;--mdc-outlined-text-field-label-text-color: #00AD83 !important;--mdc-outlined-text-field-focus-label-text-color: #00AD83 !important}::ng-deep .al-input-category-success input::placeholder{color:#00ad83!important}::ng-deep .al-input-category-warn{--mdc-outlined-text-field-outline-color: #E854A4 !important;--mdc-outlined-text-field-focus-outline-color: #E854A4 !important;--mdc-outlined-text-field-hover-outline-color: #E854A4 !important;--mdc-outlined-text-field-label-text-color: #E854A4 !important;--mdc-outlined-text-field-focus-label-text-color: #E854A4 !important}::ng-deep .al-input-category-warn input::placeholder{color:#e854a4!important}::ng-deep .al-input-category-disabled{--mdc-outlined-text-field-outline-color: #5473E8 !important;--mdc-outlined-text-field-focus-outline-color: #5473E8 !important;--mdc-outlined-text-field-hover-outline-color: #5473E8 !important;--mdc-outlined-text-field-label-text-color: #5473E8 !important;--mdc-outlined-text-field-focus-label-text-color: #5473E8 !important}::ng-deep .al-input-category-primary{--mdc-outlined-text-field-focus-outline-width: 1px !important;--mdc-outlined-text-field-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-focus-outline-color: #5473E8 !important;--mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-label-text-color: #5473E8 !important;--mdc-outlined-text-field-focus-label-text-color: #5473E8 !important}::ng-deep .al-input-category-primary .mdc-notched-outline__notch{border-width:1px!important}::ng-deep .al-input-category-primary .mdc-notched-outline{box-shadow:none!important}::ng-deep .al-input-category-plain{--mdc-outlined-text-field-outline-color: transparent !important;--mdc-outlined-text-field-focus-outline-color: transparent !important;--mdc-outlined-text-field-hover-outline-color: transparent !important;--mdc-outlined-text-field-outline-width: 0 !important;--mdc-outlined-text-field-focus-outline-width: 0 !important;--mdc-outlined-text-field-hover-outline-width: 0 !important}::ng-deep .al-input-category-plain .mat-mdc-form-field-outline,::ng-deep .al-input-category-plain .mat-mdc-form-field-outline-thick,::ng-deep .al-input-category-plain .mat-mdc-form-field-label,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-line-ripple{display:none!important}::ng-deep .al-input-category-plain .material-symbols-outlined,::ng-deep .al-input-category-plain mat-icon{color:#4b4f62!important}::ng-deep .al-input-size-xs .mat-mdc-form-field-infix,::ng-deep .al-input-size-small .mat-mdc-form-field-infix,::ng-deep .al-input-size-header .mat-mdc-form-field-infix{padding:0!important;display:flex;align-items:center}::ng-deep .al-input-size-xs .mat-mdc-form-field-infix{min-height:32px!important}::ng-deep .al-input-size-small .mat-mdc-form-field-infix{min-height:34px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-infix{padding:8px 0!important;min-height:40px!important}::ng-deep .al-input-size-large .mat-mdc-form-field-infix{padding:16px 0!important;min-height:48px!important}::ng-deep .al-input-size-header .mat-mdc-form-field-infix{min-height:28px!important}::ng-deep .al-input-no-border{--mdc-outlined-text-field-outline-color: transparent !important;--mdc-outlined-text-field-focus-outline-color: transparent !important;--mdc-outlined-text-field-hover-outline-color: transparent !important;--mdc-outlined-text-field-outline-width: 0 !important;--mdc-outlined-text-field-focus-outline-width: 0 !important;--mdc-outlined-text-field-hover-outline-width: 0 !important}::ng-deep .al-input-no-border .mat-mdc-form-field-outline,::ng-deep .al-input-no-border .mat-mdc-form-field-outline-thick,::ng-deep .al-input-no-border .mat-mdc-form-field-label,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-line-ripple{display:none!important}::ng-deep .al-input-field input,::ng-deep .al-input-field .mat-mdc-select-value{color:#4b4f62!important}::ng-deep .al-input-size-xs input,::ng-deep .al-input-size-xs .mat-mdc-select-value,::ng-deep .al-input-size-small input,::ng-deep .al-input-size-small .mat-mdc-select-value,::ng-deep .al-input-size-header input,::ng-deep .al-input-size-header .mat-mdc-select-value{font-size:12px!important}::ng-deep .al-input-size-base input,::ng-deep .al-input-size-base .mat-mdc-select-value{font-size:14px!important}::ng-deep .al-input-size-large input,::ng-deep .al-input-size-large .mat-mdc-select-value{font-size:16px!important}::ng-deep .al-input-field input::placeholder{font-size:12px!important}::ng-deep .al-input-field:hover input::placeholder,::ng-deep .al-input-field:focus input::placeholder,::ng-deep .al-input-field:active input::placeholder,::ng-deep .al-input-field input:hover::placeholder,::ng-deep .al-input-field input:focus::placeholder,::ng-deep .al-input-field input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-category-primary:hover input::placeholder,::ng-deep .al-input-category-primary:focus input::placeholder,::ng-deep .al-input-category-primary:active input::placeholder,::ng-deep .al-input-category-primary input:hover::placeholder,::ng-deep .al-input-category-primary input:focus::placeholder,::ng-deep .al-input-category-primary input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-category-simple:hover input::placeholder,::ng-deep .al-input-category-simple:focus input::placeholder,::ng-deep .al-input-category-simple:active input::placeholder,::ng-deep .al-input-category-simple input:hover::placeholder,::ng-deep .al-input-category-simple input:focus::placeholder,::ng-deep .al-input-category-simple input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-size-xs .mat-mdc-form-field-label,::ng-deep .al-input-size-xs .mat-mdc-floating-label,::ng-deep .al-input-size-small .mat-mdc-form-field-label,::ng-deep .al-input-size-small .mat-mdc-floating-label,::ng-deep .al-input-size-header .mat-mdc-form-field-label,::ng-deep .al-input-size-header .mat-mdc-floating-label{font-size:12px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-label,::ng-deep .al-input-size-base .mat-mdc-floating-label{font-size:14px!important}::ng-deep .al-input-size-large .mat-mdc-form-field-label,::ng-deep .al-input-size-large .mat-mdc-floating-label{font-size:16px!important}::ng-deep .al-input-category-simple input,::ng-deep .al-input-category-simple .mat-mdc-select-value,::ng-deep .al-input-category-primary input,::ng-deep .al-input-category-primary .mat-mdc-select-value{font-weight:400!important;letter-spacing:.5px!important}::ng-deep .al-input-field .material-symbols-outlined,::ng-deep .al-input-field mat-icon{height:20px!important;width:20px!important;font-size:20px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .al-input-size-small .material-symbols-outlined,::ng-deep .al-input-size-xs .material-symbols-outlined,::ng-deep .al-input-size-header .material-symbols-outlined,::ng-deep .al-input-size-small mat-icon,::ng-deep .al-input-size-xs mat-icon,::ng-deep .al-input-size-header mat-icon{height:16px!important;width:16px!important;font-size:16px!important}::ng-deep .al-input-size-large .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-base .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-large mat-icon[matSuffix],::ng-deep .al-input-size-base mat-icon[matSuffix]{height:24px!important;width:24px!important;font-size:24px!important}::ng-deep .al-input-size-small .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-xs .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-header .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-small mat-icon[matSuffix],::ng-deep .al-input-size-xs mat-icon[matSuffix],::ng-deep .al-input-size-header mat-icon[matSuffix]{height:20px!important;width:20px!important;font-size:20px!important}::ng-deep .al-input-category-simple .material-symbols-outlined,::ng-deep .al-input-category-primary .material-symbols-outlined,::ng-deep .al-input-category-simple mat-icon,::ng-deep .al-input-category-primary mat-icon{color:#4b4f62!important}::ng-deep .al-input-category-success .material-symbols-outlined,::ng-deep .al-input-category-success mat-icon{color:#00ad83!important}::ng-deep .al-input-category-warn .material-symbols-outlined,::ng-deep .al-input-category-warn mat-icon{color:#e854a4!important}::ng-deep .al-input-field .material-symbols-outlined[matPrefix],::ng-deep .al-input-field mat-icon[matPrefix]{padding-left:12px!important;padding-right:8px!important}::ng-deep .al-input-field .material-symbols-outlined[matSuffix],::ng-deep .al-input-field mat-icon[matSuffix]{padding-right:12px!important}::ng-deep .al-input-field.has-left-icon .mat-mdc-form-field-label{margin-left:8px!important}::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-form-field-label,::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-floating-label,::ng-deep .al-input-field:not(.has-left-icon) .mdc-floating-label{margin-left:0!important}::ng-deep .mat-mdc-form-field-icon-prefix{padding:0!important}.material-symbols-outlined[matSuffix],mat-icon[matSuffix]{display:flex;align-items:center;justify-content:center}::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:12px!important}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:13px!important}::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:18px!important}::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:10px!important}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:28px!important}::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -19.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -22.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -24.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -18.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-field.has-error .mat-mdc-form-field-outline{border-color:#e854a4!important}::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,::ng-deep .al-input-category-disabled .mat-mdc-form-field-label,::ng-deep .al-input-category-disabled .mat-mdc-select-arrow,::ng-deep .al-input-category-disabled .material-symbols-outlined,::ng-deep .al-input-category-disabled mat-icon,::ng-deep .al-input-category-disabled input,::ng-deep .al-input-category-disabled .mat-mdc-select-value{color:#9ca3af!important;opacity:.6!important}::ng-deep .al-input-field .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-floating-label,::ng-deep .al-input-field .mdc-floating-label,::ng-deep .al-input-field .mdc-text-field__label,::ng-deep .al-input-field .mdc-text-field__label--float-above{transition:none!important}::ng-deep .al-input-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field:hover .mdc-floating-label,::ng-deep .al-input-field:hover .mdc-text-field__label,::ng-deep .al-input-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-floating-label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-success .mat-mdc-form-field-hint{color:#00ad83!important}::ng-deep .al-input-category-warn .mat-mdc-form-field-hint{color:#e854a4!important}::ng-deep .al-input-category-simple .mat-mdc-form-field-hint,::ng-deep .al-input-category-primary .mat-mdc-form-field-hint,::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,::ng-deep .al-input-category-plain .mat-mdc-form-field-hint{color:#4b4f62!important}::ng-deep .al-input-category-simple:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-simple:hover .mat-mdc-floating-label,::ng-deep .al-input-category-simple:hover .mdc-floating-label,::ng-deep .al-input-category-simple:hover .mdc-text-field__label,::ng-deep .al-input-category-simple:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-primary:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-primary:hover .mat-mdc-floating-label,::ng-deep .al-input-category-primary:hover .mdc-floating-label,::ng-deep .al-input-category-primary:hover .mdc-text-field__label,::ng-deep .al-input-category-primary:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-warn:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-warn:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-warn:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above{color:#e854a4!important}::ng-deep .al-input-category-disabled:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-disabled:hover .mat-mdc-floating-label,::ng-deep .al-input-category-disabled:hover .mdc-floating-label,::ng-deep .al-input-category-disabled:hover .mdc-text-field__label,::ng-deep .al-input-category-disabled:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-plain:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-plain:hover .mat-mdc-floating-label,::ng-deep .al-input-category-plain:hover .mdc-floating-label,::ng-deep .al-input-category-plain:hover .mdc-text-field__label,::ng-deep .al-input-category-plain:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-success .mat-mdc-select-arrow{color:#00ad83!important}::ng-deep .al-input-category-warn .mat-mdc-select-arrow{color:#e854a4!important}::ng-deep .al-input-field .mat-mdc-form-field-hint-wrapper,::ng-deep .al-input-field .mat-mdc-form-field-error-wrapper{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }] }); }
|
|
281
|
+
], ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"al-input-field\" [ngClass]=\"[\n helperText ? 'has-error' : '',\n getSizeClass(),\n getCategoryClass(),\n noBorder ? 'al-input-no-border' : '',\n leftIcon ? 'has-left-icon' : ''\n ]\">\n <mat-label *ngIf=\"label && !noBorder\">{{ label }}</mat-label>\n\n <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\" [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n matPrefix class=\"left-icon\">{{ leftIconText }}</mat-icon>\n\n <ng-container *ngIf=\"dropDown; else regularInput\">\n <mat-select [disabled]=\"isDisabled\" [(ngModel)]=\"value\" (selectionChange)=\"onSelectionChange($event.value)\">\n <mat-option *ngFor=\"let option of options\" [value]=\"option\">{{ option }}</mat-option>\n </mat-select>\n </ng-container>\n <ng-template #regularInput>\n <input matInput [placeholder]=\"placeholder\" [type]=\"type\" [disabled]=\"isDisabled\" [(ngModel)]=\"value\"\n (input)=\"onInputChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n </ng-template>\n\n <mat-icon *ngIf=\"rightIcon?.trim() as rightIconText\"\n [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\" matSuffix class=\"right-icon\">{{ rightIconText\n }}</mat-icon>\n\n <mat-error *ngIf=\"false && helperTextLabel\">{{ helperTextLabel }}</mat-error>\n <mat-hint *ngIf=\"helperText && helperTextLabel\">{{ helperTextLabel }}</mat-hint>\n</mat-form-field>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap\";@import\"https://cdn.jsdelivr.net/npm/@angular/material@19.2.3/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";.al-input-field{width:100%}::ng-deep .al-input-field .mat-mdc-form-field-flex,::ng-deep .al-input-field .mat-mdc-text-field-wrapper,::ng-deep .al-input-field .mat-mdc-form-field-infix{background-color:#f7f9fe!important}::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper{background-color:transparent!important}::ng-deep .al-input-field .mat-mdc-form-field-focus-overlay{background-color:#f7f9fe!important}::ng-deep .al-input-category-primary,::ng-deep .al-input-category-success,::ng-deep .al-input-category-warn,::ng-deep .al-input-category-disabled{--mdc-outlined-text-field-outline-width: 1px !important;--mdc-outlined-text-field-focus-outline-width: 1px !important;--mdc-outlined-text-field-hover-outline-width: 1px !important}::ng-deep .al-input-category-simple{--mdc-outlined-text-field-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-focus-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-label-text-color: #5473E8 !important;--mdc-outlined-text-field-focus-label-text-color: #5473E8 !important}::ng-deep .al-input-category-success{--mdc-outlined-text-field-outline-color: #00AD83 !important;--mdc-outlined-text-field-focus-outline-color: #00AD83 !important;--mdc-outlined-text-field-hover-outline-color: #00AD83 !important;--mdc-outlined-text-field-label-text-color: #00AD83 !important;--mdc-outlined-text-field-focus-label-text-color: #00AD83 !important}::ng-deep .al-input-category-success input::placeholder{color:#00ad83!important}::ng-deep .al-input-category-warn{--mdc-outlined-text-field-outline-color: #E854A4 !important;--mdc-outlined-text-field-focus-outline-color: #E854A4 !important;--mdc-outlined-text-field-hover-outline-color: #E854A4 !important;--mdc-outlined-text-field-label-text-color: #E854A4 !important;--mdc-outlined-text-field-focus-label-text-color: #E854A4 !important}::ng-deep .al-input-category-warn input::placeholder{color:#e854a4!important}::ng-deep .al-input-category-disabled{--mdc-outlined-text-field-outline-color: #5473E8 !important;--mdc-outlined-text-field-focus-outline-color: #5473E8 !important;--mdc-outlined-text-field-hover-outline-color: #5473E8 !important;--mdc-outlined-text-field-label-text-color: #5473E8 !important;--mdc-outlined-text-field-focus-label-text-color: #5473E8 !important}::ng-deep .al-input-category-primary{--mdc-outlined-text-field-focus-outline-width: 1px !important;--mdc-outlined-text-field-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-focus-outline-color: #5473E8 !important;--mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-label-text-color: #5473E8 !important;--mdc-outlined-text-field-focus-label-text-color: #5473E8 !important}::ng-deep .al-input-category-primary .mdc-notched-outline__notch{border-width:1px!important}::ng-deep .al-input-category-primary .mdc-notched-outline{box-shadow:none!important}::ng-deep .al-input-category-plain{--mdc-outlined-text-field-outline-color: transparent !important;--mdc-outlined-text-field-focus-outline-color: transparent !important;--mdc-outlined-text-field-hover-outline-color: transparent !important;--mdc-outlined-text-field-outline-width: 0 !important;--mdc-outlined-text-field-focus-outline-width: 0 !important;--mdc-outlined-text-field-hover-outline-width: 0 !important}::ng-deep .al-input-category-plain .mat-mdc-form-field-outline,::ng-deep .al-input-category-plain .mat-mdc-form-field-outline-thick,::ng-deep .al-input-category-plain .mat-mdc-form-field-label,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-line-ripple{display:none!important}::ng-deep .al-input-category-plain .material-symbols-outlined,::ng-deep .al-input-category-plain mat-icon{color:#4b4f62!important}::ng-deep .al-input-size-xs .mat-mdc-form-field-infix,::ng-deep .al-input-size-small .mat-mdc-form-field-infix,::ng-deep .al-input-size-header .mat-mdc-form-field-infix{padding:0!important;display:flex;align-items:center}::ng-deep .al-input-size-xs .mat-mdc-form-field-infix{min-height:32px!important}::ng-deep .al-input-size-small .mat-mdc-form-field-infix{min-height:34px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-infix{padding:8px 0!important;min-height:40px!important}::ng-deep .al-input-size-large .mat-mdc-form-field-infix{padding:16px 0!important;min-height:48px!important}::ng-deep .al-input-size-header .mat-mdc-form-field-infix{min-height:28px!important}::ng-deep .al-input-no-border{--mdc-outlined-text-field-outline-color: transparent !important;--mdc-outlined-text-field-focus-outline-color: transparent !important;--mdc-outlined-text-field-hover-outline-color: transparent !important;--mdc-outlined-text-field-outline-width: 0 !important;--mdc-outlined-text-field-focus-outline-width: 0 !important;--mdc-outlined-text-field-hover-outline-width: 0 !important}::ng-deep .al-input-no-border .mat-mdc-form-field-outline,::ng-deep .al-input-no-border .mat-mdc-form-field-outline-thick,::ng-deep .al-input-no-border .mat-mdc-form-field-label,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-line-ripple{display:none!important}::ng-deep .al-input-field input,::ng-deep .al-input-field .mat-mdc-select-value{color:#4b4f62!important}::ng-deep .al-input-size-xs input,::ng-deep .al-input-size-xs .mat-mdc-select-value,::ng-deep .al-input-size-small input,::ng-deep .al-input-size-small .mat-mdc-select-value,::ng-deep .al-input-size-header input,::ng-deep .al-input-size-header .mat-mdc-select-value{font-size:12px!important}::ng-deep .al-input-size-base input,::ng-deep .al-input-size-base .mat-mdc-select-value{font-size:14px!important}::ng-deep .al-input-size-large input,::ng-deep .al-input-size-large .mat-mdc-select-value{font-size:16px!important}::ng-deep .al-input-field input::placeholder{font-size:12px!important}::ng-deep .al-input-field:hover input::placeholder,::ng-deep .al-input-field:focus input::placeholder,::ng-deep .al-input-field:active input::placeholder,::ng-deep .al-input-field input:hover::placeholder,::ng-deep .al-input-field input:focus::placeholder,::ng-deep .al-input-field input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-category-primary:hover input::placeholder,::ng-deep .al-input-category-primary:focus input::placeholder,::ng-deep .al-input-category-primary:active input::placeholder,::ng-deep .al-input-category-primary input:hover::placeholder,::ng-deep .al-input-category-primary input:focus::placeholder,::ng-deep .al-input-category-primary input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-category-simple:hover input::placeholder,::ng-deep .al-input-category-simple:focus input::placeholder,::ng-deep .al-input-category-simple:active input::placeholder,::ng-deep .al-input-category-simple input:hover::placeholder,::ng-deep .al-input-category-simple input:focus::placeholder,::ng-deep .al-input-category-simple input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-size-xs .mat-mdc-form-field-label,::ng-deep .al-input-size-xs .mat-mdc-floating-label,::ng-deep .al-input-size-small .mat-mdc-form-field-label,::ng-deep .al-input-size-small .mat-mdc-floating-label,::ng-deep .al-input-size-header .mat-mdc-form-field-label,::ng-deep .al-input-size-header .mat-mdc-floating-label{font-size:12px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-label,::ng-deep .al-input-size-base .mat-mdc-floating-label{font-size:14px!important}::ng-deep .al-input-size-large .mat-mdc-form-field-label,::ng-deep .al-input-size-large .mat-mdc-floating-label{font-size:16px!important}::ng-deep .al-input-category-simple input,::ng-deep .al-input-category-simple .mat-mdc-select-value,::ng-deep .al-input-category-primary input,::ng-deep .al-input-category-primary .mat-mdc-select-value{font-weight:400!important;letter-spacing:.5px!important}::ng-deep .al-input-field .material-symbols-outlined,::ng-deep .al-input-field mat-icon{height:20px!important;width:20px!important;font-size:20px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .al-input-size-small .material-symbols-outlined,::ng-deep .al-input-size-xs .material-symbols-outlined,::ng-deep .al-input-size-header .material-symbols-outlined,::ng-deep .al-input-size-small mat-icon,::ng-deep .al-input-size-xs mat-icon,::ng-deep .al-input-size-header mat-icon{height:16px!important;width:16px!important;font-size:16px!important}::ng-deep .al-input-size-large .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-base .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-large mat-icon[matSuffix],::ng-deep .al-input-size-base mat-icon[matSuffix]{height:24px!important;width:24px!important;font-size:24px!important}::ng-deep .al-input-size-small .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-xs .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-header .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-small mat-icon[matSuffix],::ng-deep .al-input-size-xs mat-icon[matSuffix],::ng-deep .al-input-size-header mat-icon[matSuffix]{height:20px!important;width:20px!important;font-size:20px!important}::ng-deep .al-input-category-simple .material-symbols-outlined,::ng-deep .al-input-category-primary .material-symbols-outlined,::ng-deep .al-input-category-simple mat-icon,::ng-deep .al-input-category-primary mat-icon{color:#4b4f62!important}::ng-deep .al-input-category-success .material-symbols-outlined,::ng-deep .al-input-category-success mat-icon{color:#00ad83!important}::ng-deep .al-input-category-warn .material-symbols-outlined,::ng-deep .al-input-category-warn mat-icon{color:#e854a4!important}::ng-deep .al-input-field .material-symbols-outlined[matPrefix],::ng-deep .al-input-field mat-icon[matPrefix]{padding-left:12px!important;padding-right:8px!important}::ng-deep .al-input-field .material-symbols-outlined[matSuffix],::ng-deep .al-input-field mat-icon[matSuffix]{padding-right:12px!important}::ng-deep .al-input-field.has-left-icon .mat-mdc-form-field-label{margin-left:8px!important}::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-form-field-label,::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-floating-label,::ng-deep .al-input-field:not(.has-left-icon) .mdc-floating-label{margin-left:0!important}::ng-deep .mat-mdc-form-field-icon-prefix{padding:0!important}.material-symbols-outlined[matSuffix],mat-icon[matSuffix]{display:flex;align-items:center;justify-content:center}::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:10px!important}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:11px!important}::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:14px!important}::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:7px!important}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:24px!important}::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -19.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -22.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -22.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -18.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-field.has-error .mat-mdc-form-field-outline{border-color:#e854a4!important}::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,::ng-deep .al-input-category-disabled .mat-mdc-form-field-label,::ng-deep .al-input-category-disabled .mat-mdc-select-arrow,::ng-deep .al-input-category-disabled .material-symbols-outlined,::ng-deep .al-input-category-disabled mat-icon,::ng-deep .al-input-category-disabled input,::ng-deep .al-input-category-disabled .mat-mdc-select-value{color:#9ca3af!important;opacity:.6!important}::ng-deep .al-input-field .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-floating-label,::ng-deep .al-input-field .mdc-floating-label,::ng-deep .al-input-field .mdc-text-field__label,::ng-deep .al-input-field .mdc-text-field__label--float-above{transition:none!important}::ng-deep .al-input-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field:hover .mdc-floating-label,::ng-deep .al-input-field:hover .mdc-text-field__label,::ng-deep .al-input-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-floating-label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-success .mat-mdc-form-field-hint{color:#00ad83!important}::ng-deep .al-input-category-warn .mat-mdc-form-field-hint{color:#e854a4!important}::ng-deep .al-input-category-simple .mat-mdc-form-field-hint,::ng-deep .al-input-category-primary .mat-mdc-form-field-hint,::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,::ng-deep .al-input-category-plain .mat-mdc-form-field-hint{color:#4b4f62!important}::ng-deep .al-input-category-simple:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-simple:hover .mat-mdc-floating-label,::ng-deep .al-input-category-simple:hover .mdc-floating-label,::ng-deep .al-input-category-simple:hover .mdc-text-field__label,::ng-deep .al-input-category-simple:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-primary:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-primary:hover .mat-mdc-floating-label,::ng-deep .al-input-category-primary:hover .mdc-floating-label,::ng-deep .al-input-category-primary:hover .mdc-text-field__label,::ng-deep .al-input-category-primary:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-warn:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-warn:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-warn:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above{color:#e854a4!important}::ng-deep .al-input-category-disabled:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-disabled:hover .mat-mdc-floating-label,::ng-deep .al-input-category-disabled:hover .mdc-floating-label,::ng-deep .al-input-category-disabled:hover .mdc-text-field__label,::ng-deep .al-input-category-disabled:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-plain:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-plain:hover .mat-mdc-floating-label,::ng-deep .al-input-category-plain:hover .mdc-floating-label,::ng-deep .al-input-category-plain:hover .mdc-text-field__label,::ng-deep .al-input-category-plain:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-success .mat-mdc-select-arrow{color:#00ad83!important}::ng-deep .al-input-category-warn .mat-mdc-select-arrow{color:#e854a4!important}::ng-deep .al-input-field .mat-mdc-form-field-hint-wrapper,::ng-deep .al-input-field .mat-mdc-form-field-error-wrapper{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }] }); }
|
|
276
282
|
}
|
|
277
283
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputComponent, decorators: [{
|
|
278
284
|
type: Component,
|
|
@@ -282,7 +288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
282
288
|
useExisting: forwardRef(() => InputComponent),
|
|
283
289
|
multi: true
|
|
284
290
|
}
|
|
285
|
-
], template: "<mat-form-field appearance=\"outline\" class=\"al-input-field\" [ngClass]=\"[\n helperText ? 'has-error' : '',\n getSizeClass(),\n getCategoryClass(),\n noBorder ? 'al-input-no-border' : '',\n leftIcon ? 'has-left-icon' : ''\n ]\">\n <mat-label *ngIf=\"label && !noBorder\">{{ label }}</mat-label>\n\n <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\" [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n matPrefix class=\"left-icon\">{{ leftIconText }}</mat-icon>\n\n <ng-container *ngIf=\"dropDown; else regularInput\">\n <mat-select [disabled]=\"isDisabled\" [(ngModel)]=\"value\" (selectionChange)=\"onSelectionChange($event.value)\">\n <mat-option *ngFor=\"let option of options\" [value]=\"option\">{{ option }}</mat-option>\n </mat-select>\n </ng-container>\n <ng-template #regularInput>\n <input matInput [placeholder]=\"placeholder\" [type]=\"type\" [disabled]=\"isDisabled\" [(ngModel)]=\"value\"\n (input)=\"onInputChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n </ng-template>\n\n <mat-icon *ngIf=\"rightIcon?.trim() as rightIconText\"\n [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\" matSuffix class=\"right-icon\">{{ rightIconText\n }}</mat-icon>\n\n <mat-error *ngIf=\"false && helperTextLabel\">{{ helperTextLabel }}</mat-error>\n <mat-hint *ngIf=\"helperText && helperTextLabel\">{{ helperTextLabel }}</mat-hint>\n</mat-form-field>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap\";@import\"https://cdn.jsdelivr.net/npm/@angular/material@19.2.3/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";.al-input-field{width:100%}::ng-deep .al-input-field .mat-mdc-form-field-flex,::ng-deep .al-input-field .mat-mdc-text-field-wrapper,::ng-deep .al-input-field .mat-mdc-form-field-infix{background-color:#f7f9fe!important}::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper{background-color:transparent!important}::ng-deep .al-input-field .mat-mdc-form-field-focus-overlay{background-color:#f7f9fe!important}::ng-deep .al-input-category-primary,::ng-deep .al-input-category-success,::ng-deep .al-input-category-warn,::ng-deep .al-input-category-disabled{--mdc-outlined-text-field-outline-width: 1px !important;--mdc-outlined-text-field-focus-outline-width: 1px !important;--mdc-outlined-text-field-hover-outline-width: 1px !important}::ng-deep .al-input-category-simple{--mdc-outlined-text-field-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-focus-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-label-text-color: #5473E8 !important;--mdc-outlined-text-field-focus-label-text-color: #5473E8 !important}::ng-deep .al-input-category-success{--mdc-outlined-text-field-outline-color: #00AD83 !important;--mdc-outlined-text-field-focus-outline-color: #00AD83 !important;--mdc-outlined-text-field-hover-outline-color: #00AD83 !important;--mdc-outlined-text-field-label-text-color: #00AD83 !important;--mdc-outlined-text-field-focus-label-text-color: #00AD83 !important}::ng-deep .al-input-category-success input::placeholder{color:#00ad83!important}::ng-deep .al-input-category-warn{--mdc-outlined-text-field-outline-color: #E854A4 !important;--mdc-outlined-text-field-focus-outline-color: #E854A4 !important;--mdc-outlined-text-field-hover-outline-color: #E854A4 !important;--mdc-outlined-text-field-label-text-color: #E854A4 !important;--mdc-outlined-text-field-focus-label-text-color: #E854A4 !important}::ng-deep .al-input-category-warn input::placeholder{color:#e854a4!important}::ng-deep .al-input-category-disabled{--mdc-outlined-text-field-outline-color: #5473E8 !important;--mdc-outlined-text-field-focus-outline-color: #5473E8 !important;--mdc-outlined-text-field-hover-outline-color: #5473E8 !important;--mdc-outlined-text-field-label-text-color: #5473E8 !important;--mdc-outlined-text-field-focus-label-text-color: #5473E8 !important}::ng-deep .al-input-category-primary{--mdc-outlined-text-field-focus-outline-width: 1px !important;--mdc-outlined-text-field-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-focus-outline-color: #5473E8 !important;--mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-label-text-color: #5473E8 !important;--mdc-outlined-text-field-focus-label-text-color: #5473E8 !important}::ng-deep .al-input-category-primary .mdc-notched-outline__notch{border-width:1px!important}::ng-deep .al-input-category-primary .mdc-notched-outline{box-shadow:none!important}::ng-deep .al-input-category-plain{--mdc-outlined-text-field-outline-color: transparent !important;--mdc-outlined-text-field-focus-outline-color: transparent !important;--mdc-outlined-text-field-hover-outline-color: transparent !important;--mdc-outlined-text-field-outline-width: 0 !important;--mdc-outlined-text-field-focus-outline-width: 0 !important;--mdc-outlined-text-field-hover-outline-width: 0 !important}::ng-deep .al-input-category-plain .mat-mdc-form-field-outline,::ng-deep .al-input-category-plain .mat-mdc-form-field-outline-thick,::ng-deep .al-input-category-plain .mat-mdc-form-field-label,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-line-ripple{display:none!important}::ng-deep .al-input-category-plain .material-symbols-outlined,::ng-deep .al-input-category-plain mat-icon{color:#4b4f62!important}::ng-deep .al-input-size-xs .mat-mdc-form-field-infix,::ng-deep .al-input-size-small .mat-mdc-form-field-infix,::ng-deep .al-input-size-header .mat-mdc-form-field-infix{padding:0!important;display:flex;align-items:center}::ng-deep .al-input-size-xs .mat-mdc-form-field-infix{min-height:32px!important}::ng-deep .al-input-size-small .mat-mdc-form-field-infix{min-height:34px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-infix{padding:8px 0!important;min-height:40px!important}::ng-deep .al-input-size-large .mat-mdc-form-field-infix{padding:16px 0!important;min-height:48px!important}::ng-deep .al-input-size-header .mat-mdc-form-field-infix{min-height:28px!important}::ng-deep .al-input-no-border{--mdc-outlined-text-field-outline-color: transparent !important;--mdc-outlined-text-field-focus-outline-color: transparent !important;--mdc-outlined-text-field-hover-outline-color: transparent !important;--mdc-outlined-text-field-outline-width: 0 !important;--mdc-outlined-text-field-focus-outline-width: 0 !important;--mdc-outlined-text-field-hover-outline-width: 0 !important}::ng-deep .al-input-no-border .mat-mdc-form-field-outline,::ng-deep .al-input-no-border .mat-mdc-form-field-outline-thick,::ng-deep .al-input-no-border .mat-mdc-form-field-label,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-line-ripple{display:none!important}::ng-deep .al-input-field input,::ng-deep .al-input-field .mat-mdc-select-value{color:#4b4f62!important}::ng-deep .al-input-size-xs input,::ng-deep .al-input-size-xs .mat-mdc-select-value,::ng-deep .al-input-size-small input,::ng-deep .al-input-size-small .mat-mdc-select-value,::ng-deep .al-input-size-header input,::ng-deep .al-input-size-header .mat-mdc-select-value{font-size:12px!important}::ng-deep .al-input-size-base input,::ng-deep .al-input-size-base .mat-mdc-select-value{font-size:14px!important}::ng-deep .al-input-size-large input,::ng-deep .al-input-size-large .mat-mdc-select-value{font-size:16px!important}::ng-deep .al-input-field input::placeholder{font-size:12px!important}::ng-deep .al-input-field:hover input::placeholder,::ng-deep .al-input-field:focus input::placeholder,::ng-deep .al-input-field:active input::placeholder,::ng-deep .al-input-field input:hover::placeholder,::ng-deep .al-input-field input:focus::placeholder,::ng-deep .al-input-field input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-category-primary:hover input::placeholder,::ng-deep .al-input-category-primary:focus input::placeholder,::ng-deep .al-input-category-primary:active input::placeholder,::ng-deep .al-input-category-primary input:hover::placeholder,::ng-deep .al-input-category-primary input:focus::placeholder,::ng-deep .al-input-category-primary input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-category-simple:hover input::placeholder,::ng-deep .al-input-category-simple:focus input::placeholder,::ng-deep .al-input-category-simple:active input::placeholder,::ng-deep .al-input-category-simple input:hover::placeholder,::ng-deep .al-input-category-simple input:focus::placeholder,::ng-deep .al-input-category-simple input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-size-xs .mat-mdc-form-field-label,::ng-deep .al-input-size-xs .mat-mdc-floating-label,::ng-deep .al-input-size-small .mat-mdc-form-field-label,::ng-deep .al-input-size-small .mat-mdc-floating-label,::ng-deep .al-input-size-header .mat-mdc-form-field-label,::ng-deep .al-input-size-header .mat-mdc-floating-label{font-size:12px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-label,::ng-deep .al-input-size-base .mat-mdc-floating-label{font-size:14px!important}::ng-deep .al-input-size-large .mat-mdc-form-field-label,::ng-deep .al-input-size-large .mat-mdc-floating-label{font-size:16px!important}::ng-deep .al-input-category-simple input,::ng-deep .al-input-category-simple .mat-mdc-select-value,::ng-deep .al-input-category-primary input,::ng-deep .al-input-category-primary .mat-mdc-select-value{font-weight:400!important;letter-spacing:.5px!important}::ng-deep .al-input-field .material-symbols-outlined,::ng-deep .al-input-field mat-icon{height:20px!important;width:20px!important;font-size:20px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .al-input-size-small .material-symbols-outlined,::ng-deep .al-input-size-xs .material-symbols-outlined,::ng-deep .al-input-size-header .material-symbols-outlined,::ng-deep .al-input-size-small mat-icon,::ng-deep .al-input-size-xs mat-icon,::ng-deep .al-input-size-header mat-icon{height:16px!important;width:16px!important;font-size:16px!important}::ng-deep .al-input-size-large .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-base .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-large mat-icon[matSuffix],::ng-deep .al-input-size-base mat-icon[matSuffix]{height:24px!important;width:24px!important;font-size:24px!important}::ng-deep .al-input-size-small .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-xs .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-header .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-small mat-icon[matSuffix],::ng-deep .al-input-size-xs mat-icon[matSuffix],::ng-deep .al-input-size-header mat-icon[matSuffix]{height:20px!important;width:20px!important;font-size:20px!important}::ng-deep .al-input-category-simple .material-symbols-outlined,::ng-deep .al-input-category-primary .material-symbols-outlined,::ng-deep .al-input-category-simple mat-icon,::ng-deep .al-input-category-primary mat-icon{color:#4b4f62!important}::ng-deep .al-input-category-success .material-symbols-outlined,::ng-deep .al-input-category-success mat-icon{color:#00ad83!important}::ng-deep .al-input-category-warn .material-symbols-outlined,::ng-deep .al-input-category-warn mat-icon{color:#e854a4!important}::ng-deep .al-input-field .material-symbols-outlined[matPrefix],::ng-deep .al-input-field mat-icon[matPrefix]{padding-left:12px!important;padding-right:8px!important}::ng-deep .al-input-field .material-symbols-outlined[matSuffix],::ng-deep .al-input-field mat-icon[matSuffix]{padding-right:12px!important}::ng-deep .al-input-field.has-left-icon .mat-mdc-form-field-label{margin-left:8px!important}::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-form-field-label,::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-floating-label,::ng-deep .al-input-field:not(.has-left-icon) .mdc-floating-label{margin-left:0!important}::ng-deep .mat-mdc-form-field-icon-prefix{padding:0!important}.material-symbols-outlined[matSuffix],mat-icon[matSuffix]{display:flex;align-items:center;justify-content:center}::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:12px!important}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:13px!important}::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:18px!important}::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:10px!important}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:28px!important}::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -19.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -22.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -24.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -18.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-field.has-error .mat-mdc-form-field-outline{border-color:#e854a4!important}::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,::ng-deep .al-input-category-disabled .mat-mdc-form-field-label,::ng-deep .al-input-category-disabled .mat-mdc-select-arrow,::ng-deep .al-input-category-disabled .material-symbols-outlined,::ng-deep .al-input-category-disabled mat-icon,::ng-deep .al-input-category-disabled input,::ng-deep .al-input-category-disabled .mat-mdc-select-value{color:#9ca3af!important;opacity:.6!important}::ng-deep .al-input-field .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-floating-label,::ng-deep .al-input-field .mdc-floating-label,::ng-deep .al-input-field .mdc-text-field__label,::ng-deep .al-input-field .mdc-text-field__label--float-above{transition:none!important}::ng-deep .al-input-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field:hover .mdc-floating-label,::ng-deep .al-input-field:hover .mdc-text-field__label,::ng-deep .al-input-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-floating-label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-success .mat-mdc-form-field-hint{color:#00ad83!important}::ng-deep .al-input-category-warn .mat-mdc-form-field-hint{color:#e854a4!important}::ng-deep .al-input-category-simple .mat-mdc-form-field-hint,::ng-deep .al-input-category-primary .mat-mdc-form-field-hint,::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,::ng-deep .al-input-category-plain .mat-mdc-form-field-hint{color:#4b4f62!important}::ng-deep .al-input-category-simple:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-simple:hover .mat-mdc-floating-label,::ng-deep .al-input-category-simple:hover .mdc-floating-label,::ng-deep .al-input-category-simple:hover .mdc-text-field__label,::ng-deep .al-input-category-simple:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-primary:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-primary:hover .mat-mdc-floating-label,::ng-deep .al-input-category-primary:hover .mdc-floating-label,::ng-deep .al-input-category-primary:hover .mdc-text-field__label,::ng-deep .al-input-category-primary:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-warn:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-warn:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-warn:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above{color:#e854a4!important}::ng-deep .al-input-category-disabled:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-disabled:hover .mat-mdc-floating-label,::ng-deep .al-input-category-disabled:hover .mdc-floating-label,::ng-deep .al-input-category-disabled:hover .mdc-text-field__label,::ng-deep .al-input-category-disabled:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-plain:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-plain:hover .mat-mdc-floating-label,::ng-deep .al-input-category-plain:hover .mdc-floating-label,::ng-deep .al-input-category-plain:hover .mdc-text-field__label,::ng-deep .al-input-category-plain:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-success .mat-mdc-select-arrow{color:#00ad83!important}::ng-deep .al-input-category-warn .mat-mdc-select-arrow{color:#e854a4!important}::ng-deep .al-input-field .mat-mdc-form-field-hint-wrapper,::ng-deep .al-input-field .mat-mdc-form-field-error-wrapper{padding:0!important}\n"] }]
|
|
291
|
+
], template: "<mat-form-field appearance=\"outline\" class=\"al-input-field\" [ngClass]=\"[\n helperText ? 'has-error' : '',\n getSizeClass(),\n getCategoryClass(),\n noBorder ? 'al-input-no-border' : '',\n leftIcon ? 'has-left-icon' : ''\n ]\">\n <mat-label *ngIf=\"label && !noBorder\">{{ label }}</mat-label>\n\n <mat-icon *ngIf=\"leftIcon?.trim() as leftIconText\" [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\"\n matPrefix class=\"left-icon\">{{ leftIconText }}</mat-icon>\n\n <ng-container *ngIf=\"dropDown; else regularInput\">\n <mat-select [disabled]=\"isDisabled\" [(ngModel)]=\"value\" (selectionChange)=\"onSelectionChange($event.value)\">\n <mat-option *ngFor=\"let option of options\" [value]=\"option\">{{ option }}</mat-option>\n </mat-select>\n </ng-container>\n <ng-template #regularInput>\n <input matInput [placeholder]=\"placeholder\" [type]=\"type\" [disabled]=\"isDisabled\" [(ngModel)]=\"value\"\n (input)=\"onInputChange($any($event.target).value)\" (blur)=\"onTouched()\" />\n </ng-template>\n\n <mat-icon *ngIf=\"rightIcon?.trim() as rightIconText\"\n [fontSet]=\"outlined ? 'material-icons-outlined' : 'material-icons'\" matSuffix class=\"right-icon\">{{ rightIconText\n }}</mat-icon>\n\n <mat-error *ngIf=\"false && helperTextLabel\">{{ helperTextLabel }}</mat-error>\n <mat-hint *ngIf=\"helperText && helperTextLabel\">{{ helperTextLabel }}</mat-hint>\n</mat-form-field>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined\";@import\"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap\";@import\"https://cdn.jsdelivr.net/npm/@angular/material@19.2.3/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";.al-input-field{width:100%}::ng-deep .al-input-field .mat-mdc-form-field-flex,::ng-deep .al-input-field .mat-mdc-text-field-wrapper,::ng-deep .al-input-field .mat-mdc-form-field-infix{background-color:#f7f9fe!important}::ng-deep .al-input-field .mat-mdc-form-field-subscript-wrapper{background-color:transparent!important}::ng-deep .al-input-field .mat-mdc-form-field-focus-overlay{background-color:#f7f9fe!important}::ng-deep .al-input-category-primary,::ng-deep .al-input-category-success,::ng-deep .al-input-category-warn,::ng-deep .al-input-category-disabled{--mdc-outlined-text-field-outline-width: 1px !important;--mdc-outlined-text-field-focus-outline-width: 1px !important;--mdc-outlined-text-field-hover-outline-width: 1px !important}::ng-deep .al-input-category-simple{--mdc-outlined-text-field-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-focus-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-label-text-color: #5473E8 !important;--mdc-outlined-text-field-focus-label-text-color: #5473E8 !important}::ng-deep .al-input-category-success{--mdc-outlined-text-field-outline-color: #00AD83 !important;--mdc-outlined-text-field-focus-outline-color: #00AD83 !important;--mdc-outlined-text-field-hover-outline-color: #00AD83 !important;--mdc-outlined-text-field-label-text-color: #00AD83 !important;--mdc-outlined-text-field-focus-label-text-color: #00AD83 !important}::ng-deep .al-input-category-success input::placeholder{color:#00ad83!important}::ng-deep .al-input-category-warn{--mdc-outlined-text-field-outline-color: #E854A4 !important;--mdc-outlined-text-field-focus-outline-color: #E854A4 !important;--mdc-outlined-text-field-hover-outline-color: #E854A4 !important;--mdc-outlined-text-field-label-text-color: #E854A4 !important;--mdc-outlined-text-field-focus-label-text-color: #E854A4 !important}::ng-deep .al-input-category-warn input::placeholder{color:#e854a4!important}::ng-deep .al-input-category-disabled{--mdc-outlined-text-field-outline-color: #5473E8 !important;--mdc-outlined-text-field-focus-outline-color: #5473E8 !important;--mdc-outlined-text-field-hover-outline-color: #5473E8 !important;--mdc-outlined-text-field-label-text-color: #5473E8 !important;--mdc-outlined-text-field-focus-label-text-color: #5473E8 !important}::ng-deep .al-input-category-primary{--mdc-outlined-text-field-focus-outline-width: 1px !important;--mdc-outlined-text-field-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-focus-outline-color: #5473E8 !important;--mdc-outlined-text-field-hover-outline-color: #C3C5D1 !important;--mdc-outlined-text-field-label-text-color: #5473E8 !important;--mdc-outlined-text-field-focus-label-text-color: #5473E8 !important}::ng-deep .al-input-category-primary .mdc-notched-outline__notch{border-width:1px!important}::ng-deep .al-input-category-primary .mdc-notched-outline{box-shadow:none!important}::ng-deep .al-input-category-plain{--mdc-outlined-text-field-outline-color: transparent !important;--mdc-outlined-text-field-focus-outline-color: transparent !important;--mdc-outlined-text-field-hover-outline-color: transparent !important;--mdc-outlined-text-field-outline-width: 0 !important;--mdc-outlined-text-field-focus-outline-width: 0 !important;--mdc-outlined-text-field-hover-outline-width: 0 !important}::ng-deep .al-input-category-plain .mat-mdc-form-field-outline,::ng-deep .al-input-category-plain .mat-mdc-form-field-outline-thick,::ng-deep .al-input-category-plain .mat-mdc-form-field-label,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-category-plain .mat-mdc-text-field-wrapper .mdc-line-ripple{display:none!important}::ng-deep .al-input-category-plain .material-symbols-outlined,::ng-deep .al-input-category-plain mat-icon{color:#4b4f62!important}::ng-deep .al-input-size-xs .mat-mdc-form-field-infix,::ng-deep .al-input-size-small .mat-mdc-form-field-infix,::ng-deep .al-input-size-header .mat-mdc-form-field-infix{padding:0!important;display:flex;align-items:center}::ng-deep .al-input-size-xs .mat-mdc-form-field-infix{min-height:32px!important}::ng-deep .al-input-size-small .mat-mdc-form-field-infix{min-height:34px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-infix{padding:8px 0!important;min-height:40px!important}::ng-deep .al-input-size-large .mat-mdc-form-field-infix{padding:16px 0!important;min-height:48px!important}::ng-deep .al-input-size-header .mat-mdc-form-field-infix{min-height:28px!important}::ng-deep .al-input-no-border{--mdc-outlined-text-field-outline-color: transparent !important;--mdc-outlined-text-field-focus-outline-color: transparent !important;--mdc-outlined-text-field-hover-outline-color: transparent !important;--mdc-outlined-text-field-outline-width: 0 !important;--mdc-outlined-text-field-focus-outline-width: 0 !important;--mdc-outlined-text-field-hover-outline-width: 0 !important}::ng-deep .al-input-no-border .mat-mdc-form-field-outline,::ng-deep .al-input-no-border .mat-mdc-form-field-outline-thick,::ng-deep .al-input-no-border .mat-mdc-form-field-label,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-thick,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-gap,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-start,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-end,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline-notch,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,::ng-deep .al-input-no-border .mat-mdc-text-field-wrapper .mdc-line-ripple{display:none!important}::ng-deep .al-input-field input,::ng-deep .al-input-field .mat-mdc-select-value{color:#4b4f62!important}::ng-deep .al-input-size-xs input,::ng-deep .al-input-size-xs .mat-mdc-select-value,::ng-deep .al-input-size-small input,::ng-deep .al-input-size-small .mat-mdc-select-value,::ng-deep .al-input-size-header input,::ng-deep .al-input-size-header .mat-mdc-select-value{font-size:12px!important}::ng-deep .al-input-size-base input,::ng-deep .al-input-size-base .mat-mdc-select-value{font-size:14px!important}::ng-deep .al-input-size-large input,::ng-deep .al-input-size-large .mat-mdc-select-value{font-size:16px!important}::ng-deep .al-input-field input::placeholder{font-size:12px!important}::ng-deep .al-input-field:hover input::placeholder,::ng-deep .al-input-field:focus input::placeholder,::ng-deep .al-input-field:active input::placeholder,::ng-deep .al-input-field input:hover::placeholder,::ng-deep .al-input-field input:focus::placeholder,::ng-deep .al-input-field input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-category-primary:hover input::placeholder,::ng-deep .al-input-category-primary:focus input::placeholder,::ng-deep .al-input-category-primary:active input::placeholder,::ng-deep .al-input-category-primary input:hover::placeholder,::ng-deep .al-input-category-primary input:focus::placeholder,::ng-deep .al-input-category-primary input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-category-simple:hover input::placeholder,::ng-deep .al-input-category-simple:focus input::placeholder,::ng-deep .al-input-category-simple:active input::placeholder,::ng-deep .al-input-category-simple input:hover::placeholder,::ng-deep .al-input-category-simple input:focus::placeholder,::ng-deep .al-input-category-simple input:active::placeholder{color:#4b4f62!important}::ng-deep .al-input-size-xs .mat-mdc-form-field-label,::ng-deep .al-input-size-xs .mat-mdc-floating-label,::ng-deep .al-input-size-small .mat-mdc-form-field-label,::ng-deep .al-input-size-small .mat-mdc-floating-label,::ng-deep .al-input-size-header .mat-mdc-form-field-label,::ng-deep .al-input-size-header .mat-mdc-floating-label{font-size:12px!important}::ng-deep .al-input-size-base .mat-mdc-form-field-label,::ng-deep .al-input-size-base .mat-mdc-floating-label{font-size:14px!important}::ng-deep .al-input-size-large .mat-mdc-form-field-label,::ng-deep .al-input-size-large .mat-mdc-floating-label{font-size:16px!important}::ng-deep .al-input-category-simple input,::ng-deep .al-input-category-simple .mat-mdc-select-value,::ng-deep .al-input-category-primary input,::ng-deep .al-input-category-primary .mat-mdc-select-value{font-weight:400!important;letter-spacing:.5px!important}::ng-deep .al-input-field .material-symbols-outlined,::ng-deep .al-input-field mat-icon{height:20px!important;width:20px!important;font-size:20px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .al-input-size-small .material-symbols-outlined,::ng-deep .al-input-size-xs .material-symbols-outlined,::ng-deep .al-input-size-header .material-symbols-outlined,::ng-deep .al-input-size-small mat-icon,::ng-deep .al-input-size-xs mat-icon,::ng-deep .al-input-size-header mat-icon{height:16px!important;width:16px!important;font-size:16px!important}::ng-deep .al-input-size-large .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-base .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-large mat-icon[matSuffix],::ng-deep .al-input-size-base mat-icon[matSuffix]{height:24px!important;width:24px!important;font-size:24px!important}::ng-deep .al-input-size-small .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-xs .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-header .material-symbols-outlined[matSuffix],::ng-deep .al-input-size-small mat-icon[matSuffix],::ng-deep .al-input-size-xs mat-icon[matSuffix],::ng-deep .al-input-size-header mat-icon[matSuffix]{height:20px!important;width:20px!important;font-size:20px!important}::ng-deep .al-input-category-simple .material-symbols-outlined,::ng-deep .al-input-category-primary .material-symbols-outlined,::ng-deep .al-input-category-simple mat-icon,::ng-deep .al-input-category-primary mat-icon{color:#4b4f62!important}::ng-deep .al-input-category-success .material-symbols-outlined,::ng-deep .al-input-category-success mat-icon{color:#00ad83!important}::ng-deep .al-input-category-warn .material-symbols-outlined,::ng-deep .al-input-category-warn mat-icon{color:#e854a4!important}::ng-deep .al-input-field .material-symbols-outlined[matPrefix],::ng-deep .al-input-field mat-icon[matPrefix]{padding-left:12px!important;padding-right:8px!important}::ng-deep .al-input-field .material-symbols-outlined[matSuffix],::ng-deep .al-input-field mat-icon[matSuffix]{padding-right:12px!important}::ng-deep .al-input-field.has-left-icon .mat-mdc-form-field-label{margin-left:8px!important}::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-form-field-label,::ng-deep .al-input-field:not(.has-left-icon) .mat-mdc-floating-label,::ng-deep .al-input-field:not(.has-left-icon) .mdc-floating-label{margin-left:0!important}::ng-deep .mat-mdc-form-field-icon-prefix{padding:0!important}.material-symbols-outlined[matSuffix],mat-icon[matSuffix]{display:flex;align-items:center;justify-content:center}::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:10px!important}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:11px!important}::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:14px!important}::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:7px!important}::ng-deep .al-input-size-large .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:24px!important}::ng-deep .al-input-size-xs .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -19.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-small .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -22.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-base .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -22.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-size-header .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{--mat-mdc-form-field-label-transform: translateY( -18.75px ) scale(var(--mat-mdc-form-field-floating-label-scale, .75));transform:var(--mat-mdc-form-field-label-transform)}::ng-deep .al-input-field.has-error .mat-mdc-form-field-outline{border-color:#e854a4!important}::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,::ng-deep .al-input-category-disabled .mat-mdc-form-field-label,::ng-deep .al-input-category-disabled .mat-mdc-select-arrow,::ng-deep .al-input-category-disabled .material-symbols-outlined,::ng-deep .al-input-category-disabled mat-icon,::ng-deep .al-input-category-disabled input,::ng-deep .al-input-category-disabled .mat-mdc-select-value{color:#9ca3af!important;opacity:.6!important}::ng-deep .al-input-field .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-floating-label,::ng-deep .al-input-field .mdc-floating-label,::ng-deep .al-input-field .mdc-text-field__label,::ng-deep .al-input-field .mdc-text-field__label--float-above{transition:none!important}::ng-deep .al-input-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field:hover .mdc-floating-label,::ng-deep .al-input-field:hover .mdc-text-field__label,::ng-deep .al-input-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-floating-label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label,::ng-deep .al-input-field .mat-mdc-form-field-flex:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field .mdc-text-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-floating-label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label,::ng-deep .al-input-field .mdc-text-field:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-success .mat-mdc-form-field-hint{color:#00ad83!important}::ng-deep .al-input-category-warn .mat-mdc-form-field-hint{color:#e854a4!important}::ng-deep .al-input-category-simple .mat-mdc-form-field-hint,::ng-deep .al-input-category-primary .mat-mdc-form-field-hint,::ng-deep .al-input-category-disabled .mat-mdc-form-field-hint,::ng-deep .al-input-category-plain .mat-mdc-form-field-hint{color:#4b4f62!important}::ng-deep .al-input-category-simple:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-simple:hover .mat-mdc-floating-label,::ng-deep .al-input-category-simple:hover .mdc-floating-label,::ng-deep .al-input-category-simple:hover .mdc-text-field__label,::ng-deep .al-input-category-simple:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-primary:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-primary:hover .mat-mdc-floating-label,::ng-deep .al-input-category-primary:hover .mdc-floating-label,::ng-deep .al-input-category-primary:hover .mdc-text-field__label,::ng-deep .al-input-category-primary:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-success .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above{color:#00ad83!important}::ng-deep .al-input-field.al-input-category-warn:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-warn:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-warn:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-form-field:hover .mdc-text-field__label--float-above,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mdc-floating-label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mdc-text-field__label,::ng-deep .al-input-field.al-input-category-warn .mat-mdc-text-field-wrapper:hover .mdc-text-field__label--float-above{color:#e854a4!important}::ng-deep .al-input-category-disabled:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-disabled:hover .mat-mdc-floating-label,::ng-deep .al-input-category-disabled:hover .mdc-floating-label,::ng-deep .al-input-category-disabled:hover .mdc-text-field__label,::ng-deep .al-input-category-disabled:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-plain:hover .mat-mdc-form-field-label,::ng-deep .al-input-category-plain:hover .mat-mdc-floating-label,::ng-deep .al-input-category-plain:hover .mdc-floating-label,::ng-deep .al-input-category-plain:hover .mdc-text-field__label,::ng-deep .al-input-category-plain:hover .mdc-text-field__label--float-above{color:#5473e8!important}::ng-deep .al-input-category-success .mat-mdc-select-arrow{color:#00ad83!important}::ng-deep .al-input-category-warn .mat-mdc-select-arrow{color:#e854a4!important}::ng-deep .al-input-field .mat-mdc-form-field-hint-wrapper,::ng-deep .al-input-field .mat-mdc-form-field-error-wrapper{padding:0!important}\n"] }]
|
|
286
292
|
}], propDecorators: { label: [{
|
|
287
293
|
type: Input
|
|
288
294
|
}], placeholder: [{
|
|
@@ -392,7 +398,7 @@ class ResumeHeaderComponent {
|
|
|
392
398
|
}
|
|
393
399
|
}
|
|
394
400
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResumeHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
395
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResumeHeaderComponent, isStandalone: true, selector: "al-resume-header", inputs: { hiddenSection: "hiddenSection", isLargeScreen: "isLargeScreen", inputHandlers: "inputHandlers", checked: "checked", checkboxConfig: "checkboxConfig", disabled: "disabled", buttonConfig: "buttonConfig", configEyeToggle: "configEyeToggle", accordionItem: "accordionItem", toggleEditIcon: "toggleEditIcon", showSection: "showSection", borderColor: "borderColor" }, outputs: { focusField: "focusField", blurField: "blurField", enterKeyPressed: "enterKeyPressed", checkedCheckBoxChange: "checkedCheckBoxChange", buttonClicked: "buttonClicked", showHideToggleSection: "showHideToggleSection", sectionToggled: "sectionToggled" }, ngImport: i0, template: "<cdk-accordion class=\"example-accordion\">\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n\n <div class=\"example-accordion-item-header\" [ngStyle]=\"{ 'border-color': borderColor }\">\n <div class=\"left_side_header\" *ngIf=\"!hiddenSection?.headerSectionHidden; else hiddenHeaderLayout\">\n <div [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\">\n <button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center \"\n [attr.aria-expanded]=\"accordionItem.expanded\">\n <span class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">\n expand_less\n </span>\n <span class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">\n expand_more\n </span>\n </button>\n </div>\n\n <div class=\"edit-input-group\">\n <span *ngIf=\"!inputHandlers.headersLoading\" class=\"align-center\">\n <span class=\"material-symbols-outlined\" [attr.alt]=\"inputHandlers.iconAltText || 'edit-icon'\"\n (click)=\"toggleEditIcon?.('educationHeader')\"\n [matTooltip]=\"inputHandlers.tooltipText || 'This header can be edited'\"\n [matTooltipPosition]=\"inputHandlers.tooltipPosition || 'above'\"\n *ngIf=\"inputHandlers.getFieldNotHidden('')\">\n edit\n </span>\n </span>\n\n <div class=\"content_width\" data-test-id=\"edu-section-title-input\">\n <div class=\"content_width\" data-test-id=\"edu-section-title-input\" *ngIf=\"!inputHandlers.headersLoading\">\n <input #textInputSection type=\"text\" [ngClass]=\"{\n 'focusout-input-text': !inputHandlers?.isFocused,\n 'onfocus-input-text': inputHandlers?.isFocused\n }\" [(ngModel)]=\"inputHandlers.shownTitle\" [attr.aria-label]=\"inputHandlers.shownTitle\"\n (focus)=\"focusField.emit('educationHeader')\" (focusout)=\"blurField.emit()\"\n (keypress)=\"enterKeyPressed.emit($event)\" [disabled]=\"inputHandlers?.isDisabled?.() ?? false\" />\n </div>\n </div>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Right side header (shows when section is NOT hidden) -->\n <div class=\"right_side_header\" *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngIf=\"isLargeScreen\">\n <ng-container class=\"button-margin\"\n *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </ng-container>\n\n <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n <div class=\"menu-trigger\" (mouseenter)=\"showMenu()\" (mouseleave)=\"startHideTimeout()\">\n <span class=\"material-symbols-outlined menu-icon\">more_vert</span>\n </div>\n <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\" (mouseenter)=\"showMenu()\"\n (mouseleave)=\"startHideTimeout()\">\n <div class=\"fit-panel\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Eye icon for hiding section -->\n <ng-container *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: false, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"checkboxConfig?.sectionItems?.length\" class=\"mat-checkbox-margin\">\n <mat-checkbox class=\"example-margin\" [matTooltip]=\"checkboxConfig?.tooltipText || 'Select All'\"\n [matTooltipPosition]=\"checkboxConfig.tooltipPosition|| 'above'\" [(ngModel)]=\"checked\"\n (ngModelChange)=\"checkedCheckBoxChange.emit($event)\"\n [disabled]=\"disabled || checkboxConfig?.disabled ?? false\" data-test-id=\"edu-section-select-all-checkbox\">\n </mat-checkbox>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Hidden header layout (shows when section IS hidden) -->\n <ng-template #hiddenHeaderLayout>\n <div class=\"hide-header\">\n <span class=\"header-text-turncate\">{{ inputHandlers?.shownTitle }}</span>\n <div class=\"hidden-write\">Section hidden</div>\n\n <!-- \u2705 FIXED: Eye icon for showing section -->\n <ng-container *ngIf=\"hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"!eyeConfig['onClick']\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n </div>\n\n <!-- \u2705 FIXED: Accordion body (only shows when expanded AND not hidden) -->\n <div *ngIf=\"accordionItem.expanded && !hiddenSection?.headerSectionHidden\" class=\"example-accordion-item-body\"\n role=\"region\">\n Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Perferendis excepturi incidunt ipsum\n deleniti labore, tempore non nam doloribus blanditiis veritatis illo autem iure aliquid ullam\n rem tenetur deserunt velit culpa?\n </div>\n\n </cdk-accordion-item>\n</cdk-accordion>\n\n<!-- Header Buttons Template -->\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n <ng-container *ngFor=\"let btn of buttonConfig\">\n <al-button *ngIf=\"!btn.hidden && (!btn.displayCondition || btn.displayCondition())\" [category]=\"btn.category\"\n [buttonType]=\"btn.buttonType\" [label]=\"btn.label\" [leftIcon]=\"btn.leftIcon\" [rightIcon]=\"btn.rightIcon\"\n [variant]=\"btn.variant\" [state]=\"btn.state\" [color]=\"btn.color\" [size]=\"btn.size\" [outlined]=\"btn.outlined\"\n [dropdownOptions]=\"btn.buttonType === 'dropdown' ? btn.dropdownOptions : null\"\n (optionSelect)=\"onDropdownSelect(btn, $event)\" (click)=\"onButtonClick(btn)\" [attr.alt]=\"btn.alt\"\n [attr.data-test-id]=\"btn.testId\" [matTooltip]=\"btn.tooltipText\"\n [matTooltipPosition]=\"btn.tooltipPosition || 'above'\">\n </al-button>\n </ng-container>\n</ng-template>\n\n<!-- \u2705 FIXED: Eye Icon Template with proper click handler -->\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n let-configEyeToggle=\"configEyeToggle\">\n <div *ngIf=\"configEyeToggle\" class=\"mat-checkbox-margin align-center\"\n [attr.data-test-id]=\"isHidden ? 'edu-section-show-eye-div' : 'edu-section-hide-eye-div'\">\n <span class=\"material-symbols-outlined delete-multiple mat-fab.mat-accent\"\n [matTooltip]=\"configEyeToggle.tooltips[isHidden ? 'collapse' : 'expand']\"\n [matTooltipPosition]=\"configEyeToggle.tooltips.position\"\n [attr.aria-label]=\"configEyeToggle.ariaLabels[isHidden ? 'collapsed' : 'expanded']\"\n (click)=\"showHideToggleSection.emit({ isHidden: isHidden, accordionItem: accordionItem, config: configEyeToggle })\"\n [attr.data-test-id]=\"isHidden ? 'edu-section-show-eye-icon' : 'edu-section-show-hide-eye-icon'\">\n {{ isHidden ? 'visibility' : 'visibility_off' }}\n </span>\n </div>\n</ng-template>\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,.example-accordion-item{display:block}.example-accordion-item+.example-accordion-item{border-top:none}.example-accordion-item-header{display:flex;justify-content:space-between;align-items:center;background:#ecedf1;padding:8px 24px;gap:8px;border-bottom:2px solid #37c1ce;border-radius:8px;box-sizing:border-box}.left_side_header button{padding:0!important}.example-accordion-item-description{font-size:.85em;color:#999}.example-accordion-item-body{padding:16px}.example-accordion-item-header:hover{cursor:pointer;background-color:#eee}.icon-button{background:none;border:none;padding:0;cursor:pointer}.toggle-icon,.edit-icon{width:20px;height:20px}.input-header{display:flex;align-items:center;cursor:pointer}.onfocus-input-text{height:30px;padding-left:4px;background:#f4f8fc;border:none;border-radius:5px;font-size:16px;text-overflow:ellipsis;overflow:hidden;font-weight:400;font-family:Roboto,sans-serif}.focusout-input-text{color:#383b4a;background:transparent;display:flex;border:none;font-size:16px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Roboto,sans-serif}.onfocus-input-text,.focusout-input-text{width:calc(100% - 40px)}.content_width{flex:1}input:focus{outline:none;border:none;box-shadow:none}.toggle-button{border:none}.mat-mdc-menu-content,.mat-mdc-menu-panel{background-color:#fff!important}.mat-mdc-menu-item{min-height:36px!important;color:#54595e!important;font-size:14px!important}.mat-mdc-menu-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;outline:0;border-radius:var(--mat-menu-container-shape, var(--mat-app-corner-extra-small));background-color:#fff}::ng-deep .mdc-checkbox .mdc-checkbox__native-control{width:20px!important;height:20px!important}::ng-deep .mdc-checkbox{padding:0!important}::ng-deep .mdc-checkbox__background{top:0!important;left:0!important}::ng-deep .mat-mdc-checkbox .mat-internal-form-field{color:#717793!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}.left_side_header{display:flex;align-items:center;gap:16px;width:100%;padding-right:40px}.edit-input-group{display:flex;align-items:center;gap:8px;flex:1}.right_side_header{display:flex;align-items:center;gap:8px}.mat-checkbox-margin{margin-left:8px}.button-wrapper{display:flex;align-items:center;gap:8px}.hover-menu-container{position:relative;display:inline-block}.menu-trigger{display:flex;align-items:center;justify-content:center;padding:8px;cursor:pointer;z-index:10}.slide-out-panel{position:absolute;right:100%;top:0;max-width:0;overflow:hidden;border-radius:4px;box-shadow:none;transition:max-width .5s ease-in-out}.slide-out-panel.visible{max-width:1000px}.fit-panel{display:inline-flex;transition:max-width .5s ease-in-out;width:fit-content;background:none;gap:8px}.hide-header{display:flex;justify-content:space-between;width:100%;opacity:.7;background-color:#ecedf1;line-height:28px}.icon-wrapper{visibility:visible}.header-text-turncate{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;color:#a2a6b8;font-family:Roboto,sans-serif}.hidden-write{color:#a2a6b8;position:absolute;left:45%;font-weight:400;font-family:Roboto,sans-serif}.example-accordion-item-body{font-size:15px;font-weight:300;line-height:24px;color:#4b4f62;font-family:Roboto,sans-serif}.align-center{display:flex;align-items:center}.material-icons-outlined{color:#717793}.material-symbols-outlined{height:20px;width:20px;color:#717793;font-size:20px;cursor:pointer}.mat-checkbox .mat-checkbox-frame{border:2px solid var(--Greys-600, #717793)!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border:2px solid var(--Greys-600, #717793)!important}::ng-deep .mdc-checkbox .mdc-checkbox__native-control:focus:checked+.mdc-checkbox__ripple{background-color:#ecedf1!important;opacity:1!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:focus:focus:checked~.mdc-checkbox__background,::ng-deep .mdc-checkbox__native-control:focus:focus:indeterminate~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}.cdk-overlay-container .mat-mdc-tooltip,.cdk-overlay-container .mat-mdc-tooltip-panel,.mat-mdc-tooltip,.mat-mdc-tooltip-panel,.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface,.mat-mdc-tooltip .mdc-tooltip__surface{background-color:#4b4f62!important;color:#fff!important;font-size:13px!important;border-radius:4px!important;box-shadow:0 2px 8px #00000026!important;opacity:1!important}.cdk-overlay-container .mat-mdc-tooltip,.cdk-overlay-container .mat-mdc-tooltip-panel,.mat-mdc-tooltip,.mat-mdc-tooltip-panel,.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface,.mat-mdc-tooltip .mdc-tooltip__surface{background-color:#4b4f62!important;color:#fff!important;font-size:13px!important;border-radius:4px!important;box-shadow:0 2px 8px #00000026!important;opacity:1!important;transition:opacity .15s ease-in-out!important;transform:none!important}.cdk-overlay-container .mat-mdc-tooltip-panel{animation:none!important;transition:opacity .15s ease-in-out!important}.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface .mdc-tooltip__content,.mat-mdc-tooltip .mdc-tooltip__surface .mdc-tooltip__content{color:#fff!important;font-size:13px!important;font-weight:400!important;line-height:1.4!important;padding:8px 12px!important}.left_side_header input:focus,.left_side_header input{line-height:28px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i5.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { kind: "directive", type: i5.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["iconPlacement", "state", "category", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "showLeftIcon", "showRightIcon", "outlined", "color", "size", "buttonType", "fontClass", "dropdownOptions"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }] }); }
|
|
401
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResumeHeaderComponent, isStandalone: true, selector: "al-resume-header", inputs: { hiddenSection: "hiddenSection", isLargeScreen: "isLargeScreen", inputHandlers: "inputHandlers", checked: "checked", checkboxConfig: "checkboxConfig", disabled: "disabled", buttonConfig: "buttonConfig", configEyeToggle: "configEyeToggle", accordionItem: "accordionItem", toggleEditIcon: "toggleEditIcon", showSection: "showSection", borderColor: "borderColor" }, outputs: { focusField: "focusField", blurField: "blurField", enterKeyPressed: "enterKeyPressed", checkedCheckBoxChange: "checkedCheckBoxChange", buttonClicked: "buttonClicked", showHideToggleSection: "showHideToggleSection", sectionToggled: "sectionToggled" }, ngImport: i0, template: "<cdk-accordion class=\"example-accordion\">\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n\n <div class=\"example-accordion-item-header\" [ngStyle]=\"{ 'border-color': borderColor }\">\n <div class=\"left_side_header\" *ngIf=\"!hiddenSection?.headerSectionHidden; else hiddenHeaderLayout\">\n <div [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\">\n <button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center \"\n [attr.aria-expanded]=\"accordionItem.expanded\">\n <span class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">\n expand_less\n </span>\n <span class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">\n expand_more\n </span>\n </button>\n </div>\n\n <div class=\"edit-input-group\">\n <span *ngIf=\"!inputHandlers.headersLoading\" class=\"align-center\">\n <span class=\"material-symbols-outlined\" [attr.alt]=\"inputHandlers.iconAltText || 'edit-icon'\"\n (click)=\"toggleEditIcon?.('educationHeader')\"\n [matTooltip]=\"inputHandlers.tooltipText || 'This header can be edited'\"\n [matTooltipPosition]=\"inputHandlers.tooltipPosition || 'above'\"\n *ngIf=\"inputHandlers.getFieldNotHidden('')\">\n edit\n </span>\n </span>\n\n <div class=\"content_width\" data-test-id=\"edu-section-title-input\">\n <div class=\"content_width\" data-test-id=\"edu-section-title-input\" *ngIf=\"!inputHandlers.headersLoading\">\n <input #textInputSection type=\"text\" [ngClass]=\"{\n 'focusout-input-text': !inputHandlers?.isFocused,\n 'onfocus-input-text': inputHandlers?.isFocused\n }\" [(ngModel)]=\"inputHandlers.shownTitle\" [attr.aria-label]=\"inputHandlers.shownTitle\"\n (focus)=\"focusField.emit('educationHeader')\" (focusout)=\"blurField.emit()\"\n (keypress)=\"enterKeyPressed.emit($event)\" [disabled]=\"inputHandlers?.isDisabled?.() ?? false\" />\n </div>\n </div>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Right side header (shows when section is NOT hidden) -->\n <div class=\"right_side_header\" *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngIf=\"isLargeScreen\">\n <ng-container class=\"button-margin\"\n *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </ng-container>\n\n <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n <div class=\"menu-trigger\" (mouseenter)=\"showMenu()\" (mouseleave)=\"startHideTimeout()\">\n <span class=\"material-symbols-outlined menu-icon\">more_vert</span>\n </div>\n <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\" (mouseenter)=\"showMenu()\"\n (mouseleave)=\"startHideTimeout()\">\n <div class=\"fit-panel\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Eye icon for hiding section -->\n <ng-container *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: false, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"checkboxConfig?.sectionItems?.length\" class=\"mat-checkbox-margin\">\n <mat-checkbox class=\"example-margin\" [matTooltip]=\"checkboxConfig?.tooltipText || 'Select All'\"\n [matTooltipPosition]=\"checkboxConfig.tooltipPosition|| 'above'\" [(ngModel)]=\"checked\"\n (ngModelChange)=\"checkedCheckBoxChange.emit($event)\"\n [disabled]=\"disabled || checkboxConfig?.disabled ?? false\" data-test-id=\"edu-section-select-all-checkbox\">\n </mat-checkbox>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Hidden header layout (shows when section IS hidden) -->\n <ng-template #hiddenHeaderLayout>\n <div class=\"hide-header\">\n <span class=\"header-text-turncate\">{{ inputHandlers?.shownTitle }}</span>\n <div class=\"hidden-write\">Section hidden</div>\n\n <!-- \u2705 FIXED: Eye icon for showing section -->\n <ng-container *ngIf=\"hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"!eyeConfig['onClick']\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n </div>\n\n <!-- \u2705 FIXED: Accordion body (only shows when expanded AND not hidden) -->\n <div *ngIf=\"accordionItem.expanded && !hiddenSection?.headerSectionHidden\" class=\"example-accordion-item-body\"\n role=\"region\">\n Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Perferendis excepturi incidunt ipsum\n deleniti labore, tempore non nam doloribus blanditiis veritatis illo autem iure aliquid ullam\n rem tenetur deserunt velit culpa?\n </div>\n\n </cdk-accordion-item>\n</cdk-accordion>\n\n<!-- Header Buttons Template -->\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n <ng-container *ngFor=\"let btn of buttonConfig\">\n <al-button *ngIf=\"!btn.hidden && (!btn.displayCondition || btn.displayCondition())\" [category]=\"btn.category\"\n [buttonType]=\"btn.buttonType\" [label]=\"btn.label\" [leftIcon]=\"btn.leftIcon\" [rightIcon]=\"btn.rightIcon\"\n [variant]=\"btn.variant\" [state]=\"btn.state\" [color]=\"btn.color\" [size]=\"btn.size\" [outlined]=\"btn.outlined\"\n [dropdownOptions]=\"btn.buttonType === 'dropdown' ? btn.dropdownOptions : null\"\n (optionSelect)=\"onDropdownSelect(btn, $event)\" (click)=\"onButtonClick(btn)\" [attr.alt]=\"btn.alt\"\n [attr.data-test-id]=\"btn.testId\" [matTooltip]=\"btn.tooltipText\"\n [matTooltipPosition]=\"btn.tooltipPosition || 'above'\">\n </al-button>\n </ng-container>\n</ng-template>\n\n<!-- \u2705 FIXED: Eye Icon Template with proper click handler -->\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n let-configEyeToggle=\"configEyeToggle\">\n <div *ngIf=\"configEyeToggle\" class=\"mat-checkbox-margin align-center\"\n [attr.data-test-id]=\"isHidden ? 'edu-section-show-eye-div' : 'edu-section-hide-eye-div'\">\n <span class=\"material-symbols-outlined delete-multiple mat-fab.mat-accent\"\n [matTooltip]=\"configEyeToggle.tooltips[isHidden ? 'collapse' : 'expand']\"\n [matTooltipPosition]=\"configEyeToggle.tooltips.position\"\n [attr.aria-label]=\"configEyeToggle.ariaLabels[isHidden ? 'collapsed' : 'expanded']\"\n (click)=\"showHideToggleSection.emit({ isHidden: isHidden, accordionItem: accordionItem, config: configEyeToggle })\"\n [attr.data-test-id]=\"isHidden ? 'edu-section-show-eye-icon' : 'edu-section-show-hide-eye-icon'\">\n {{ isHidden ? 'visibility' : 'visibility_off' }}\n </span>\n </div>\n</ng-template>\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,.example-accordion-item{display:block}.example-accordion-item+.example-accordion-item{border-top:none}.example-accordion-item-header{display:flex;justify-content:space-between;align-items:center;background:#ecedf1;padding:8px 24px;gap:8px;border-bottom:2px solid #37c1ce;border-radius:8px;box-sizing:border-box}.left_side_header button{padding:0!important}.example-accordion-item-description{font-size:.85em;color:#999}.example-accordion-item-body{padding:16px}.example-accordion-item-header:hover{cursor:pointer;background-color:#eee}.icon-button{background:none;border:none;padding:0;cursor:pointer}.toggle-icon,.edit-icon{width:20px;height:20px}.input-header{display:flex;align-items:center;cursor:pointer}.onfocus-input-text{height:30px;padding-left:4px;background:#f4f8fc;border:none;border-radius:5px;font-size:16px;text-overflow:ellipsis;overflow:hidden;font-weight:400;font-family:Roboto,sans-serif}.focusout-input-text{color:#383b4a;background:transparent;display:flex;border:none;font-size:16px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Roboto,sans-serif}.onfocus-input-text,.focusout-input-text{width:calc(100% - 40px)}.content_width{flex:1}input:focus{outline:none;border:none;box-shadow:none}.toggle-button{border:none}.mat-mdc-menu-content,.mat-mdc-menu-panel{background-color:#fff!important}.mat-mdc-menu-item{min-height:36px!important;color:#54595e!important;font-size:14px!important}.mat-mdc-menu-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;outline:0;border-radius:var(--mat-menu-container-shape, var(--mat-app-corner-extra-small));background-color:#fff}::ng-deep .mdc-checkbox .mdc-checkbox__native-control{width:20px!important;height:20px!important}::ng-deep .mdc-checkbox{padding:0!important}::ng-deep .mdc-checkbox__background{top:0!important;left:0!important}::ng-deep .mat-mdc-checkbox .mat-internal-form-field{color:#717793!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}.left_side_header{display:flex;align-items:center;gap:16px;width:100%;padding-right:40px}.edit-input-group{display:flex;align-items:center;gap:8px;flex:1}.right_side_header{display:flex;align-items:center;gap:8px}.mat-checkbox-margin{margin-left:8px}.button-wrapper{display:flex;align-items:center;gap:8px}.hover-menu-container{position:relative;display:inline-block}.menu-trigger{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:pointer;z-index:10}.slide-out-panel{position:absolute;right:100%;top:50%;transform:translateY(-50%);max-width:0;overflow:hidden;border-radius:4px;box-shadow:none;transition:max-width .5s ease-in-out;display:flex;justify-content:center;align-items:center}.slide-out-panel.visible{max-width:1000px}.fit-panel{display:inline-flex;transition:max-width .5s ease-in-out;width:fit-content;background:none;gap:8px}.hide-header{display:flex;justify-content:space-between;width:100%;opacity:.7;background-color:#ecedf1;line-height:28px}.icon-wrapper{visibility:visible}.header-text-turncate{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;color:#a2a6b8;font-family:Roboto,sans-serif}.hidden-write{color:#a2a6b8;position:absolute;left:45%;font-weight:400;font-family:Roboto,sans-serif}.example-accordion-item-body{font-size:15px;font-weight:300;line-height:24px;color:#4b4f62;font-family:Roboto,sans-serif}.align-center{display:flex;align-items:center}.material-icons-outlined{color:#717793}.material-symbols-outlined{height:20px;width:20px;color:#717793;font-size:20px;cursor:pointer}.mat-checkbox .mat-checkbox-frame{border:2px solid var(--Greys-600, #717793)!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border:2px solid var(--Greys-600, #717793)!important}::ng-deep .mdc-checkbox .mdc-checkbox__native-control:focus:checked+.mdc-checkbox__ripple{background-color:#ecedf1!important;opacity:1!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:focus:focus:checked~.mdc-checkbox__background,::ng-deep .mdc-checkbox__native-control:focus:focus:indeterminate~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}.cdk-overlay-container .mat-mdc-tooltip,.cdk-overlay-container .mat-mdc-tooltip-panel,.mat-mdc-tooltip,.mat-mdc-tooltip-panel,.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface,.mat-mdc-tooltip .mdc-tooltip__surface{background-color:#4b4f62!important;color:#fff!important;font-size:13px!important;border-radius:4px!important;box-shadow:0 2px 8px #00000026!important;opacity:1!important}.cdk-overlay-container .mat-mdc-tooltip,.cdk-overlay-container .mat-mdc-tooltip-panel,.mat-mdc-tooltip,.mat-mdc-tooltip-panel,.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface,.mat-mdc-tooltip .mdc-tooltip__surface{background-color:#4b4f62!important;color:#fff!important;font-size:13px!important;border-radius:4px!important;box-shadow:0 2px 8px #00000026!important;opacity:1!important;transition:opacity .15s ease-in-out!important;transform:none!important}.cdk-overlay-container .mat-mdc-tooltip-panel{animation:none!important;transition:opacity .15s ease-in-out!important}.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface .mdc-tooltip__content,.mat-mdc-tooltip .mdc-tooltip__surface .mdc-tooltip__content{color:#fff!important;font-size:13px!important;font-weight:400!important;line-height:1.4!important;padding:8px 12px!important}.left_side_header input:focus,.left_side_header input{line-height:28px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: CdkAccordionModule }, { kind: "directive", type: i5.CdkAccordion, selector: "cdk-accordion, [cdkAccordion]", inputs: ["multi"], exportAs: ["cdkAccordion"] }, { kind: "directive", type: i5.CdkAccordionItem, selector: "cdk-accordion-item, [cdkAccordionItem]", inputs: ["expanded", "disabled"], outputs: ["closed", "opened", "destroyed", "expandedChange"], exportAs: ["cdkAccordionItem"] }, { kind: "component", type: ButtonComponent, selector: "al-button", inputs: ["iconPlacement", "state", "category", "label", "arialabel", "iconOnly", "leftIcon", "rightIcon", "showLeftIcon", "showRightIcon", "outlined", "color", "size", "buttonType", "fontClass", "dropdownOptions"], outputs: ["onClick", "onHover", "onMouseLeave", "optionSelect"] }] }); }
|
|
396
402
|
}
|
|
397
403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResumeHeaderComponent, decorators: [{
|
|
398
404
|
type: Component,
|
|
@@ -405,7 +411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
405
411
|
MatIconModule,
|
|
406
412
|
CdkAccordionModule,
|
|
407
413
|
ButtonComponent
|
|
408
|
-
], template: "<cdk-accordion class=\"example-accordion\">\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n\n <div class=\"example-accordion-item-header\" [ngStyle]=\"{ 'border-color': borderColor }\">\n <div class=\"left_side_header\" *ngIf=\"!hiddenSection?.headerSectionHidden; else hiddenHeaderLayout\">\n <div [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\">\n <button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center \"\n [attr.aria-expanded]=\"accordionItem.expanded\">\n <span class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">\n expand_less\n </span>\n <span class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">\n expand_more\n </span>\n </button>\n </div>\n\n <div class=\"edit-input-group\">\n <span *ngIf=\"!inputHandlers.headersLoading\" class=\"align-center\">\n <span class=\"material-symbols-outlined\" [attr.alt]=\"inputHandlers.iconAltText || 'edit-icon'\"\n (click)=\"toggleEditIcon?.('educationHeader')\"\n [matTooltip]=\"inputHandlers.tooltipText || 'This header can be edited'\"\n [matTooltipPosition]=\"inputHandlers.tooltipPosition || 'above'\"\n *ngIf=\"inputHandlers.getFieldNotHidden('')\">\n edit\n </span>\n </span>\n\n <div class=\"content_width\" data-test-id=\"edu-section-title-input\">\n <div class=\"content_width\" data-test-id=\"edu-section-title-input\" *ngIf=\"!inputHandlers.headersLoading\">\n <input #textInputSection type=\"text\" [ngClass]=\"{\n 'focusout-input-text': !inputHandlers?.isFocused,\n 'onfocus-input-text': inputHandlers?.isFocused\n }\" [(ngModel)]=\"inputHandlers.shownTitle\" [attr.aria-label]=\"inputHandlers.shownTitle\"\n (focus)=\"focusField.emit('educationHeader')\" (focusout)=\"blurField.emit()\"\n (keypress)=\"enterKeyPressed.emit($event)\" [disabled]=\"inputHandlers?.isDisabled?.() ?? false\" />\n </div>\n </div>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Right side header (shows when section is NOT hidden) -->\n <div class=\"right_side_header\" *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngIf=\"isLargeScreen\">\n <ng-container class=\"button-margin\"\n *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </ng-container>\n\n <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n <div class=\"menu-trigger\" (mouseenter)=\"showMenu()\" (mouseleave)=\"startHideTimeout()\">\n <span class=\"material-symbols-outlined menu-icon\">more_vert</span>\n </div>\n <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\" (mouseenter)=\"showMenu()\"\n (mouseleave)=\"startHideTimeout()\">\n <div class=\"fit-panel\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Eye icon for hiding section -->\n <ng-container *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: false, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"checkboxConfig?.sectionItems?.length\" class=\"mat-checkbox-margin\">\n <mat-checkbox class=\"example-margin\" [matTooltip]=\"checkboxConfig?.tooltipText || 'Select All'\"\n [matTooltipPosition]=\"checkboxConfig.tooltipPosition|| 'above'\" [(ngModel)]=\"checked\"\n (ngModelChange)=\"checkedCheckBoxChange.emit($event)\"\n [disabled]=\"disabled || checkboxConfig?.disabled ?? false\" data-test-id=\"edu-section-select-all-checkbox\">\n </mat-checkbox>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Hidden header layout (shows when section IS hidden) -->\n <ng-template #hiddenHeaderLayout>\n <div class=\"hide-header\">\n <span class=\"header-text-turncate\">{{ inputHandlers?.shownTitle }}</span>\n <div class=\"hidden-write\">Section hidden</div>\n\n <!-- \u2705 FIXED: Eye icon for showing section -->\n <ng-container *ngIf=\"hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"!eyeConfig['onClick']\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n </div>\n\n <!-- \u2705 FIXED: Accordion body (only shows when expanded AND not hidden) -->\n <div *ngIf=\"accordionItem.expanded && !hiddenSection?.headerSectionHidden\" class=\"example-accordion-item-body\"\n role=\"region\">\n Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Perferendis excepturi incidunt ipsum\n deleniti labore, tempore non nam doloribus blanditiis veritatis illo autem iure aliquid ullam\n rem tenetur deserunt velit culpa?\n </div>\n\n </cdk-accordion-item>\n</cdk-accordion>\n\n<!-- Header Buttons Template -->\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n <ng-container *ngFor=\"let btn of buttonConfig\">\n <al-button *ngIf=\"!btn.hidden && (!btn.displayCondition || btn.displayCondition())\" [category]=\"btn.category\"\n [buttonType]=\"btn.buttonType\" [label]=\"btn.label\" [leftIcon]=\"btn.leftIcon\" [rightIcon]=\"btn.rightIcon\"\n [variant]=\"btn.variant\" [state]=\"btn.state\" [color]=\"btn.color\" [size]=\"btn.size\" [outlined]=\"btn.outlined\"\n [dropdownOptions]=\"btn.buttonType === 'dropdown' ? btn.dropdownOptions : null\"\n (optionSelect)=\"onDropdownSelect(btn, $event)\" (click)=\"onButtonClick(btn)\" [attr.alt]=\"btn.alt\"\n [attr.data-test-id]=\"btn.testId\" [matTooltip]=\"btn.tooltipText\"\n [matTooltipPosition]=\"btn.tooltipPosition || 'above'\">\n </al-button>\n </ng-container>\n</ng-template>\n\n<!-- \u2705 FIXED: Eye Icon Template with proper click handler -->\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n let-configEyeToggle=\"configEyeToggle\">\n <div *ngIf=\"configEyeToggle\" class=\"mat-checkbox-margin align-center\"\n [attr.data-test-id]=\"isHidden ? 'edu-section-show-eye-div' : 'edu-section-hide-eye-div'\">\n <span class=\"material-symbols-outlined delete-multiple mat-fab.mat-accent\"\n [matTooltip]=\"configEyeToggle.tooltips[isHidden ? 'collapse' : 'expand']\"\n [matTooltipPosition]=\"configEyeToggle.tooltips.position\"\n [attr.aria-label]=\"configEyeToggle.ariaLabels[isHidden ? 'collapsed' : 'expanded']\"\n (click)=\"showHideToggleSection.emit({ isHidden: isHidden, accordionItem: accordionItem, config: configEyeToggle })\"\n [attr.data-test-id]=\"isHidden ? 'edu-section-show-eye-icon' : 'edu-section-show-hide-eye-icon'\">\n {{ isHidden ? 'visibility' : 'visibility_off' }}\n </span>\n </div>\n</ng-template>\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,.example-accordion-item{display:block}.example-accordion-item+.example-accordion-item{border-top:none}.example-accordion-item-header{display:flex;justify-content:space-between;align-items:center;background:#ecedf1;padding:8px 24px;gap:8px;border-bottom:2px solid #37c1ce;border-radius:8px;box-sizing:border-box}.left_side_header button{padding:0!important}.example-accordion-item-description{font-size:.85em;color:#999}.example-accordion-item-body{padding:16px}.example-accordion-item-header:hover{cursor:pointer;background-color:#eee}.icon-button{background:none;border:none;padding:0;cursor:pointer}.toggle-icon,.edit-icon{width:20px;height:20px}.input-header{display:flex;align-items:center;cursor:pointer}.onfocus-input-text{height:30px;padding-left:4px;background:#f4f8fc;border:none;border-radius:5px;font-size:16px;text-overflow:ellipsis;overflow:hidden;font-weight:400;font-family:Roboto,sans-serif}.focusout-input-text{color:#383b4a;background:transparent;display:flex;border:none;font-size:16px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Roboto,sans-serif}.onfocus-input-text,.focusout-input-text{width:calc(100% - 40px)}.content_width{flex:1}input:focus{outline:none;border:none;box-shadow:none}.toggle-button{border:none}.mat-mdc-menu-content,.mat-mdc-menu-panel{background-color:#fff!important}.mat-mdc-menu-item{min-height:36px!important;color:#54595e!important;font-size:14px!important}.mat-mdc-menu-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;outline:0;border-radius:var(--mat-menu-container-shape, var(--mat-app-corner-extra-small));background-color:#fff}::ng-deep .mdc-checkbox .mdc-checkbox__native-control{width:20px!important;height:20px!important}::ng-deep .mdc-checkbox{padding:0!important}::ng-deep .mdc-checkbox__background{top:0!important;left:0!important}::ng-deep .mat-mdc-checkbox .mat-internal-form-field{color:#717793!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}.left_side_header{display:flex;align-items:center;gap:16px;width:100%;padding-right:40px}.edit-input-group{display:flex;align-items:center;gap:8px;flex:1}.right_side_header{display:flex;align-items:center;gap:8px}.mat-checkbox-margin{margin-left:8px}.button-wrapper{display:flex;align-items:center;gap:8px}.hover-menu-container{position:relative;display:inline-block}.menu-trigger{display:flex;align-items:center;justify-content:center;padding:8px;cursor:pointer;z-index:10}.slide-out-panel{position:absolute;right:100%;top:0;max-width:0;overflow:hidden;border-radius:4px;box-shadow:none;transition:max-width .5s ease-in-out}.slide-out-panel.visible{max-width:1000px}.fit-panel{display:inline-flex;transition:max-width .5s ease-in-out;width:fit-content;background:none;gap:8px}.hide-header{display:flex;justify-content:space-between;width:100%;opacity:.7;background-color:#ecedf1;line-height:28px}.icon-wrapper{visibility:visible}.header-text-turncate{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;color:#a2a6b8;font-family:Roboto,sans-serif}.hidden-write{color:#a2a6b8;position:absolute;left:45%;font-weight:400;font-family:Roboto,sans-serif}.example-accordion-item-body{font-size:15px;font-weight:300;line-height:24px;color:#4b4f62;font-family:Roboto,sans-serif}.align-center{display:flex;align-items:center}.material-icons-outlined{color:#717793}.material-symbols-outlined{height:20px;width:20px;color:#717793;font-size:20px;cursor:pointer}.mat-checkbox .mat-checkbox-frame{border:2px solid var(--Greys-600, #717793)!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border:2px solid var(--Greys-600, #717793)!important}::ng-deep .mdc-checkbox .mdc-checkbox__native-control:focus:checked+.mdc-checkbox__ripple{background-color:#ecedf1!important;opacity:1!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:focus:focus:checked~.mdc-checkbox__background,::ng-deep .mdc-checkbox__native-control:focus:focus:indeterminate~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}.cdk-overlay-container .mat-mdc-tooltip,.cdk-overlay-container .mat-mdc-tooltip-panel,.mat-mdc-tooltip,.mat-mdc-tooltip-panel,.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface,.mat-mdc-tooltip .mdc-tooltip__surface{background-color:#4b4f62!important;color:#fff!important;font-size:13px!important;border-radius:4px!important;box-shadow:0 2px 8px #00000026!important;opacity:1!important}.cdk-overlay-container .mat-mdc-tooltip,.cdk-overlay-container .mat-mdc-tooltip-panel,.mat-mdc-tooltip,.mat-mdc-tooltip-panel,.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface,.mat-mdc-tooltip .mdc-tooltip__surface{background-color:#4b4f62!important;color:#fff!important;font-size:13px!important;border-radius:4px!important;box-shadow:0 2px 8px #00000026!important;opacity:1!important;transition:opacity .15s ease-in-out!important;transform:none!important}.cdk-overlay-container .mat-mdc-tooltip-panel{animation:none!important;transition:opacity .15s ease-in-out!important}.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface .mdc-tooltip__content,.mat-mdc-tooltip .mdc-tooltip__surface .mdc-tooltip__content{color:#fff!important;font-size:13px!important;font-weight:400!important;line-height:1.4!important;padding:8px 12px!important}.left_side_header input:focus,.left_side_header input{line-height:28px!important}\n"] }]
|
|
414
|
+
], template: "<cdk-accordion class=\"example-accordion\">\n <cdk-accordion-item #accordionItem=\"cdkAccordionItem\" [expanded]=\"true\" class=\"example-accordion-item\">\n\n <div class=\"example-accordion-item-header\" [ngStyle]=\"{ 'border-color': borderColor }\">\n <div class=\"left_side_header\" *ngIf=\"!hiddenSection?.headerSectionHidden; else hiddenHeaderLayout\">\n <div [matTooltip]=\"accordionItem.expanded ? 'Collapse' : 'Expand'\" matTooltipPosition=\"above\">\n <button (click)=\"toggleAccordion(accordionItem)\" tabindex=\"0\" class=\"toggle-button align-center \"\n [attr.aria-expanded]=\"accordionItem.expanded\">\n <span class=\"material-icons-outlined\" *ngIf=\"!accordionItem.expanded\">\n expand_less\n </span>\n <span class=\"material-icons-outlined\" *ngIf=\"accordionItem.expanded\">\n expand_more\n </span>\n </button>\n </div>\n\n <div class=\"edit-input-group\">\n <span *ngIf=\"!inputHandlers.headersLoading\" class=\"align-center\">\n <span class=\"material-symbols-outlined\" [attr.alt]=\"inputHandlers.iconAltText || 'edit-icon'\"\n (click)=\"toggleEditIcon?.('educationHeader')\"\n [matTooltip]=\"inputHandlers.tooltipText || 'This header can be edited'\"\n [matTooltipPosition]=\"inputHandlers.tooltipPosition || 'above'\"\n *ngIf=\"inputHandlers.getFieldNotHidden('')\">\n edit\n </span>\n </span>\n\n <div class=\"content_width\" data-test-id=\"edu-section-title-input\">\n <div class=\"content_width\" data-test-id=\"edu-section-title-input\" *ngIf=\"!inputHandlers.headersLoading\">\n <input #textInputSection type=\"text\" [ngClass]=\"{\n 'focusout-input-text': !inputHandlers?.isFocused,\n 'onfocus-input-text': inputHandlers?.isFocused\n }\" [(ngModel)]=\"inputHandlers.shownTitle\" [attr.aria-label]=\"inputHandlers.shownTitle\"\n (focus)=\"focusField.emit('educationHeader')\" (focusout)=\"blurField.emit()\"\n (keypress)=\"enterKeyPressed.emit($event)\" [disabled]=\"inputHandlers?.isDisabled?.() ?? false\" />\n </div>\n </div>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Right side header (shows when section is NOT hidden) -->\n <div class=\"right_side_header\" *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngIf=\"isLargeScreen\">\n <ng-container class=\"button-margin\"\n *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </ng-container>\n\n <div class=\"hover-menu-container\" *ngIf=\"!isLargeScreen\">\n <div class=\"menu-trigger\" (mouseenter)=\"showMenu()\" (mouseleave)=\"startHideTimeout()\">\n <span class=\"material-symbols-outlined menu-icon\">more_vert</span>\n </div>\n <div class=\"slide-out-panel\" [class.visible]=\"isMenuVisible\" (mouseenter)=\"showMenu()\"\n (mouseleave)=\"startHideTimeout()\">\n <div class=\"fit-panel\">\n <ng-container *ngTemplateOutlet=\"headerButtonsTemplate; context: { buttons: buttonConfig }\">\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Eye icon for hiding section -->\n <ng-container *ngIf=\"!hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: false, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container>\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"checkboxConfig?.sectionItems?.length\" class=\"mat-checkbox-margin\">\n <mat-checkbox class=\"example-margin\" [matTooltip]=\"checkboxConfig?.tooltipText || 'Select All'\"\n [matTooltipPosition]=\"checkboxConfig.tooltipPosition|| 'above'\" [(ngModel)]=\"checked\"\n (ngModelChange)=\"checkedCheckBoxChange.emit($event)\"\n [disabled]=\"disabled || checkboxConfig?.disabled ?? false\" data-test-id=\"edu-section-select-all-checkbox\">\n </mat-checkbox>\n </div>\n </div>\n\n <!-- \u2705 FIXED: Hidden header layout (shows when section IS hidden) -->\n <ng-template #hiddenHeaderLayout>\n <div class=\"hide-header\">\n <span class=\"header-text-turncate\">{{ inputHandlers?.shownTitle }}</span>\n <div class=\"hidden-write\">Section hidden</div>\n\n <!-- \u2705 FIXED: Eye icon for showing section -->\n <ng-container *ngIf=\"hiddenSection?.headerSectionHidden\">\n <ng-container *ngFor=\"let eyeConfig of configEyeToggle\">\n <ng-container *ngIf=\"!eyeConfig['onClick']\">\n <ng-container\n *ngTemplateOutlet=\"eyeIconTemplate; context: { isHidden: true, accordionItem: accordionItem, configEyeToggle: eyeConfig }\"></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n </div>\n\n <!-- \u2705 FIXED: Accordion body (only shows when expanded AND not hidden) -->\n <div *ngIf=\"accordionItem.expanded && !hiddenSection?.headerSectionHidden\" class=\"example-accordion-item-body\"\n role=\"region\">\n Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Perferendis excepturi incidunt ipsum\n deleniti labore, tempore non nam doloribus blanditiis veritatis illo autem iure aliquid ullam\n rem tenetur deserunt velit culpa?\n </div>\n\n </cdk-accordion-item>\n</cdk-accordion>\n\n<!-- Header Buttons Template -->\n<ng-template #headerButtonsTemplate let-buttons=\"buttons\" let-handleClick=\"handleClick\">\n <ng-container *ngFor=\"let btn of buttonConfig\">\n <al-button *ngIf=\"!btn.hidden && (!btn.displayCondition || btn.displayCondition())\" [category]=\"btn.category\"\n [buttonType]=\"btn.buttonType\" [label]=\"btn.label\" [leftIcon]=\"btn.leftIcon\" [rightIcon]=\"btn.rightIcon\"\n [variant]=\"btn.variant\" [state]=\"btn.state\" [color]=\"btn.color\" [size]=\"btn.size\" [outlined]=\"btn.outlined\"\n [dropdownOptions]=\"btn.buttonType === 'dropdown' ? btn.dropdownOptions : null\"\n (optionSelect)=\"onDropdownSelect(btn, $event)\" (click)=\"onButtonClick(btn)\" [attr.alt]=\"btn.alt\"\n [attr.data-test-id]=\"btn.testId\" [matTooltip]=\"btn.tooltipText\"\n [matTooltipPosition]=\"btn.tooltipPosition || 'above'\">\n </al-button>\n </ng-container>\n</ng-template>\n\n<!-- \u2705 FIXED: Eye Icon Template with proper click handler -->\n<ng-template #eyeIconTemplate let-isHidden=\"isHidden\" let-accordionItem=\"accordionItem\"\n let-configEyeToggle=\"configEyeToggle\">\n <div *ngIf=\"configEyeToggle\" class=\"mat-checkbox-margin align-center\"\n [attr.data-test-id]=\"isHidden ? 'edu-section-show-eye-div' : 'edu-section-hide-eye-div'\">\n <span class=\"material-symbols-outlined delete-multiple mat-fab.mat-accent\"\n [matTooltip]=\"configEyeToggle.tooltips[isHidden ? 'collapse' : 'expand']\"\n [matTooltipPosition]=\"configEyeToggle.tooltips.position\"\n [attr.aria-label]=\"configEyeToggle.ariaLabels[isHidden ? 'collapsed' : 'expanded']\"\n (click)=\"showHideToggleSection.emit({ isHidden: isHidden, accordionItem: accordionItem, config: configEyeToggle })\"\n [attr.data-test-id]=\"isHidden ? 'edu-section-show-eye-icon' : 'edu-section-show-hide-eye-icon'\">\n {{ isHidden ? 'visibility' : 'visibility_off' }}\n </span>\n </div>\n</ng-template>\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,.example-accordion-item{display:block}.example-accordion-item+.example-accordion-item{border-top:none}.example-accordion-item-header{display:flex;justify-content:space-between;align-items:center;background:#ecedf1;padding:8px 24px;gap:8px;border-bottom:2px solid #37c1ce;border-radius:8px;box-sizing:border-box}.left_side_header button{padding:0!important}.example-accordion-item-description{font-size:.85em;color:#999}.example-accordion-item-body{padding:16px}.example-accordion-item-header:hover{cursor:pointer;background-color:#eee}.icon-button{background:none;border:none;padding:0;cursor:pointer}.toggle-icon,.edit-icon{width:20px;height:20px}.input-header{display:flex;align-items:center;cursor:pointer}.onfocus-input-text{height:30px;padding-left:4px;background:#f4f8fc;border:none;border-radius:5px;font-size:16px;text-overflow:ellipsis;overflow:hidden;font-weight:400;font-family:Roboto,sans-serif}.focusout-input-text{color:#383b4a;background:transparent;display:flex;border:none;font-size:16px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Roboto,sans-serif}.onfocus-input-text,.focusout-input-text{width:calc(100% - 40px)}.content_width{flex:1}input:focus{outline:none;border:none;box-shadow:none}.toggle-button{border:none}.mat-mdc-menu-content,.mat-mdc-menu-panel{background-color:#fff!important}.mat-mdc-menu-item{min-height:36px!important;color:#54595e!important;font-size:14px!important}.mat-mdc-menu-panel{min-width:112px;max-width:280px;overflow:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;outline:0;border-radius:var(--mat-menu-container-shape, var(--mat-app-corner-extra-small));background-color:#fff}::ng-deep .mdc-checkbox .mdc-checkbox__native-control{width:20px!important;height:20px!important}::ng-deep .mdc-checkbox{padding:0!important}::ng-deep .mdc-checkbox__background{top:0!important;left:0!important}::ng-deep .mat-mdc-checkbox .mat-internal-form-field{color:#717793!important}::ng-deep .mat-mdc-menu-panel{background-color:#fff!important}.left_side_header{display:flex;align-items:center;gap:16px;width:100%;padding-right:40px}.edit-input-group{display:flex;align-items:center;gap:8px;flex:1}.right_side_header{display:flex;align-items:center;gap:8px}.mat-checkbox-margin{margin-left:8px}.button-wrapper{display:flex;align-items:center;gap:8px}.hover-menu-container{position:relative;display:inline-block}.menu-trigger{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:pointer;z-index:10}.slide-out-panel{position:absolute;right:100%;top:50%;transform:translateY(-50%);max-width:0;overflow:hidden;border-radius:4px;box-shadow:none;transition:max-width .5s ease-in-out;display:flex;justify-content:center;align-items:center}.slide-out-panel.visible{max-width:1000px}.fit-panel{display:inline-flex;transition:max-width .5s ease-in-out;width:fit-content;background:none;gap:8px}.hide-header{display:flex;justify-content:space-between;width:100%;opacity:.7;background-color:#ecedf1;line-height:28px}.icon-wrapper{visibility:visible}.header-text-turncate{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;color:#a2a6b8;font-family:Roboto,sans-serif}.hidden-write{color:#a2a6b8;position:absolute;left:45%;font-weight:400;font-family:Roboto,sans-serif}.example-accordion-item-body{font-size:15px;font-weight:300;line-height:24px;color:#4b4f62;font-family:Roboto,sans-serif}.align-center{display:flex;align-items:center}.material-icons-outlined{color:#717793}.material-symbols-outlined{height:20px;width:20px;color:#717793;font-size:20px;cursor:pointer}.mat-checkbox .mat-checkbox-frame{border:2px solid var(--Greys-600, #717793)!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border:2px solid var(--Greys-600, #717793)!important}::ng-deep .mdc-checkbox .mdc-checkbox__native-control:focus:checked+.mdc-checkbox__ripple{background-color:#ecedf1!important;opacity:1!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:focus:focus:checked~.mdc-checkbox__background,::ng-deep .mdc-checkbox__native-control:focus:focus:indeterminate~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background{background:#ecedf1!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke:#717793!important}::ng-deep .mdc-checkbox__native-control:hover:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{background-color:#717793!important}.cdk-overlay-container .mat-mdc-tooltip,.cdk-overlay-container .mat-mdc-tooltip-panel,.mat-mdc-tooltip,.mat-mdc-tooltip-panel,.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface,.mat-mdc-tooltip .mdc-tooltip__surface{background-color:#4b4f62!important;color:#fff!important;font-size:13px!important;border-radius:4px!important;box-shadow:0 2px 8px #00000026!important;opacity:1!important}.cdk-overlay-container .mat-mdc-tooltip,.cdk-overlay-container .mat-mdc-tooltip-panel,.mat-mdc-tooltip,.mat-mdc-tooltip-panel,.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface,.mat-mdc-tooltip .mdc-tooltip__surface{background-color:#4b4f62!important;color:#fff!important;font-size:13px!important;border-radius:4px!important;box-shadow:0 2px 8px #00000026!important;opacity:1!important;transition:opacity .15s ease-in-out!important;transform:none!important}.cdk-overlay-container .mat-mdc-tooltip-panel{animation:none!important;transition:opacity .15s ease-in-out!important}.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface .mdc-tooltip__content,.mat-mdc-tooltip .mdc-tooltip__surface .mdc-tooltip__content{color:#fff!important;font-size:13px!important;font-weight:400!important;line-height:1.4!important;padding:8px 12px!important}.left_side_header input:focus,.left_side_header input{line-height:28px!important}\n"] }]
|
|
409
415
|
}], propDecorators: { hiddenSection: [{
|
|
410
416
|
type: Input
|
|
411
417
|
}], isLargeScreen: [{
|
|
@@ -459,6 +465,626 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
459
465
|
}]
|
|
460
466
|
}] });
|
|
461
467
|
|
|
468
|
+
class LoaderComponent {
|
|
469
|
+
/**
|
|
470
|
+
* This @HostBinding adds a class to the component's host element (<al-loader>)
|
|
471
|
+
* that matches the current status. For example, if status is 'processing',
|
|
472
|
+
* it adds `class="status-processing"`. This is what our CSS uses to show the right icon.
|
|
473
|
+
*/
|
|
474
|
+
get statusClass() {
|
|
475
|
+
const classes = [`status-${this.status}`, `size-${this.size}`];
|
|
476
|
+
if (this.autoLoop) {
|
|
477
|
+
classes.push('auto-loop');
|
|
478
|
+
}
|
|
479
|
+
return classes.join(' ');
|
|
480
|
+
}
|
|
481
|
+
/**
|
|
482
|
+
* Get the display text for the current status
|
|
483
|
+
*/
|
|
484
|
+
get displayText() {
|
|
485
|
+
if (this.customText) {
|
|
486
|
+
return this.customText;
|
|
487
|
+
}
|
|
488
|
+
// Use custom texts array if provided
|
|
489
|
+
if (this.customTexts && this.customTexts.length >= 5) {
|
|
490
|
+
const statusIndex = this.statusOrder.indexOf(this.status);
|
|
491
|
+
if (statusIndex >= 0) {
|
|
492
|
+
return this.customTexts[statusIndex];
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
switch (this.status) {
|
|
496
|
+
case 'analyzing':
|
|
497
|
+
return 'Analyzing...';
|
|
498
|
+
case 'gathering':
|
|
499
|
+
return 'Gathering...';
|
|
500
|
+
case 'processing':
|
|
501
|
+
return 'Processing...';
|
|
502
|
+
case 'applying':
|
|
503
|
+
return 'Applying...';
|
|
504
|
+
case 'done':
|
|
505
|
+
return 'Done!';
|
|
506
|
+
default:
|
|
507
|
+
return '';
|
|
508
|
+
}
|
|
509
|
+
}
|
|
510
|
+
constructor() {
|
|
511
|
+
/**
|
|
512
|
+
* The current status of the loader. Controls which icon and text are displayed.
|
|
513
|
+
* @default 'analyzing'
|
|
514
|
+
*/
|
|
515
|
+
this.status = 'analyzing';
|
|
516
|
+
/**
|
|
517
|
+
* Whether to show the text below the loader icon.
|
|
518
|
+
* @default true
|
|
519
|
+
*/
|
|
520
|
+
this.showText = true;
|
|
521
|
+
/**
|
|
522
|
+
* Size of the loader component.
|
|
523
|
+
* @default 'medium'
|
|
524
|
+
*/
|
|
525
|
+
this.size = 'medium';
|
|
526
|
+
/**
|
|
527
|
+
* Whether to automatically loop through all statuses.
|
|
528
|
+
* @default false
|
|
529
|
+
*/
|
|
530
|
+
this.autoLoop = false;
|
|
531
|
+
/**
|
|
532
|
+
* Duration in milliseconds for each status when auto-looping.
|
|
533
|
+
* @default 3000
|
|
534
|
+
*/
|
|
535
|
+
this.loopDuration = 3000;
|
|
536
|
+
/**
|
|
537
|
+
* Whether to show completion state and stop looping when reaching 'done' status.
|
|
538
|
+
* @default false
|
|
539
|
+
*/
|
|
540
|
+
this.completeOnDone = false;
|
|
541
|
+
this.currentLoopIndex = 0;
|
|
542
|
+
this.statusOrder = ['analyzing', 'gathering', 'processing', 'applying', 'done'];
|
|
543
|
+
}
|
|
544
|
+
ngOnInit() {
|
|
545
|
+
if (this.autoLoop) {
|
|
546
|
+
this.startLoop();
|
|
547
|
+
}
|
|
548
|
+
}
|
|
549
|
+
ngOnDestroy() {
|
|
550
|
+
this.stopLoop();
|
|
551
|
+
}
|
|
552
|
+
/**
|
|
553
|
+
* Start the auto-loop functionality
|
|
554
|
+
*/
|
|
555
|
+
startLoop() {
|
|
556
|
+
if (this.loopInterval) {
|
|
557
|
+
this.stopLoop();
|
|
558
|
+
}
|
|
559
|
+
// Set initial status
|
|
560
|
+
this.status = this.statusOrder[this.currentLoopIndex];
|
|
561
|
+
this.loopInterval = window.setInterval(() => {
|
|
562
|
+
this.currentLoopIndex = (this.currentLoopIndex + 1) % this.statusOrder.length;
|
|
563
|
+
this.status = this.statusOrder[this.currentLoopIndex];
|
|
564
|
+
// If completeOnDone is true and we reach 'done', stop looping
|
|
565
|
+
if (this.completeOnDone && this.status === 'done') {
|
|
566
|
+
this.stopLoop();
|
|
567
|
+
}
|
|
568
|
+
}, this.loopDuration);
|
|
569
|
+
}
|
|
570
|
+
/**
|
|
571
|
+
* Stop the auto-loop functionality
|
|
572
|
+
*/
|
|
573
|
+
stopLoop() {
|
|
574
|
+
if (this.loopInterval) {
|
|
575
|
+
clearInterval(this.loopInterval);
|
|
576
|
+
this.loopInterval = undefined;
|
|
577
|
+
}
|
|
578
|
+
}
|
|
579
|
+
/**
|
|
580
|
+
* Manually trigger completion (sets status to 'done' and stops loop)
|
|
581
|
+
*/
|
|
582
|
+
triggerCompletion() {
|
|
583
|
+
this.stopLoop();
|
|
584
|
+
this.status = 'done';
|
|
585
|
+
}
|
|
586
|
+
/**
|
|
587
|
+
* Reset the loader to the beginning
|
|
588
|
+
*/
|
|
589
|
+
reset() {
|
|
590
|
+
this.stopLoop();
|
|
591
|
+
this.currentLoopIndex = 0;
|
|
592
|
+
this.status = this.statusOrder[0];
|
|
593
|
+
if (this.autoLoop) {
|
|
594
|
+
this.startLoop();
|
|
595
|
+
}
|
|
596
|
+
}
|
|
597
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
598
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoaderComponent, isStandalone: true, selector: "al-loader", inputs: { status: "status", customText: "customText", showText: "showText", size: "size", autoLoop: "autoLoop", loopDuration: "loopDuration", customTexts: "customTexts", completeOnDone: "completeOnDone" }, host: { properties: { "class": "this.statusClass" } }, ngImport: i0, template: "<div class=\"loader-container\">\n <!-- Brain Icon -->\n <mat-icon class=\"loader-icon font-icon icon-brain\" fontSet=\"material-icons\">psychology</mat-icon>\n <!-- Cog Icon -->\n <mat-icon class=\"loader-icon font-icon icon-cog\" fontSet=\"material-icons\">sync</mat-icon>\n <!-- Document Icon -->\n <mat-icon class=\"loader-icon font-icon icon-document\" fontSet=\"material-icons\">article</mat-icon>\n <!-- Wand Icon -->\n <mat-icon class=\"loader-icon font-icon icon-wand\" fontSet=\"material-icons\">auto_awesome</mat-icon>\n <!-- Tick Icon -->\n <mat-icon class=\"loader-icon font-icon icon-tick\" fontSet=\"material-icons\">task_alt</mat-icon>\n</div>\n<div class=\"text-container\" *ngIf=\"showText\">\n <span class=\"loader-text\">{{ displayText }}</span>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";:host{display:flex;flex-direction:column;align-items:center;font-family:Roboto,sans-serif}.loader-container{position:relative;display:flex;align-items:center;justify-content:center}.loader-icon,.loader-text{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;transition:opacity .3s ease-in-out}.text-container{position:relative;margin-top:1rem}.loader-text{position:relative;color:#4b4f62;font-weight:300;font-size:1.125rem;text-align:center;opacity:0;transition:opacity .3s ease-in-out}.font-icon{display:flex;align-items:center;justify-content:center}mat-icon.loader-icon{display:flex;align-items:center;justify-content:center}:host(.size-small) .loader-container{width:48px;height:48px}:host(.size-small) .font-icon{font-size:48px}:host(.size-small) mat-icon.loader-icon{font-size:48px;width:48px;height:48px}:host(.size-small) .loader-text{font-size:.875rem}:host(.size-medium) .loader-container{width:80px;height:80px}:host(.size-medium) .font-icon{font-size:72px}:host(.size-medium) mat-icon.loader-icon{font-size:72px;width:72px;height:72px}:host(.size-medium) .loader-text{font-size:1.125rem}:host(.size-large) .loader-container{width:120px;height:120px}:host(.size-large) .font-icon{font-size:108px}:host(.size-large) mat-icon.loader-icon{font-size:108px;width:108px;height:108px}:host(.size-large) .loader-text{font-size:1.25rem}.icon-brain{color:#ef87bf}.icon-cog{color:#a2a6b8}.icon-document{color:#37c1ce}.icon-tick{color:#00ad83}.icon-wand{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);-webkit-background-clip:text;background-clip:text;color:transparent}@keyframes animate-brain{0%{opacity:0;transform:scale(0)}12.5%{opacity:1;transform:scale(1.2)}25%{transform:scale(1)}37.5%{transform:scale(1.1)}50%{transform:scale(1)}62.5%{transform:scale(1.1)}75%{transform:scale(1)}87.5%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes animate-cog{0%{opacity:0;transform:scale(0) rotate(0)}12.5%{opacity:1;transform:scale(1.2) rotate(0)}25%{transform:scale(1) rotate(0)}87.5%{opacity:1;transform:scale(1) rotate(180deg)}to{opacity:0;transform:scale(0) rotate(180deg)}}@keyframes animate-document{0%{opacity:0;transform:scale(0) translateY(0)}12.5%{opacity:1;transform:scale(1.2) translateY(0)}25%{transform:scale(1) translateY(0)}37.5%{transform:scale(1) translateY(-10px)}50%{transform:scale(1) translateY(0)}62.5%{transform:scale(1) translateY(-10px)}75%{transform:scale(1) translateY(0)}87.5%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0) translateY(0)}}@keyframes animate-wand{0%{opacity:0;transform:scale(0) rotate(0)}12.5%{opacity:1;transform:scale(1.2) rotate(0)}25%{transform:scale(1) rotate(-20deg)}50%{transform:scale(1) rotate(20deg)}75%{transform:scale(1) rotate(-20deg)}87.5%{opacity:1;transform:scale(1) rotate(0)}to{opacity:0;transform:scale(0) rotate(0)}}@keyframes animate-tick{0%{opacity:0;transform:scale(0)}12.5%{opacity:1;transform:scale(1.2)}25%{transform:scale(1)}to{opacity:1;transform:scale(1)}}@keyframes animate-text{0%{opacity:0;transform:translate(30px)}12.5%{opacity:1;transform:translate(0)}87.5%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-30px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes hop{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes wave{0%,to{transform:rotate(0)}25%{transform:rotate(-20deg)}75%{transform:rotate(20deg)}}:host(.status-analyzing) .icon-brain,:host(.status-analyzing) .loader-text{opacity:1}:host(.status-analyzing) .icon-brain{animation:pulse 1.5s ease-in-out infinite}:host(.status-gathering) .icon-cog,:host(.status-gathering) .loader-text{opacity:1}:host(.status-gathering) .icon-cog{animation:rotate 2s linear infinite}:host(.status-processing) .icon-document,:host(.status-processing) .loader-text{opacity:1}:host(.status-processing) .icon-document{animation:hop 1s ease-in-out infinite}:host(.status-applying) .icon-wand,:host(.status-applying) .loader-text{opacity:1}:host(.status-applying) .icon-wand{animation:wave 2s ease-in-out infinite}:host(.status-done) .icon-tick,:host(.status-done) .loader-text{opacity:1}:host(.status-done) .icon-tick{animation:pulse .5s ease-out}:host(.auto-loop.status-analyzing) .icon-brain{animation:animate-brain 3s ease-in-out}:host(.auto-loop.status-analyzing) .loader-text{animation:animate-text 3s ease-in-out}:host(.auto-loop.status-gathering) .icon-cog{animation:animate-cog 3s ease-in-out}:host(.auto-loop.status-gathering) .loader-text{animation:animate-text 3s ease-in-out}:host(.auto-loop.status-processing) .icon-document{animation:animate-document 3s ease-in-out}:host(.auto-loop.status-processing) .loader-text{animation:animate-text 3s ease-in-out}:host(.auto-loop.status-applying) .icon-wand{animation:animate-wand 3s ease-in-out}:host(.auto-loop.status-applying) .loader-text{animation:animate-text 3s ease-in-out}:host(.auto-loop.status-done) .icon-tick{animation:animate-tick 3s ease-in-out}:host(.auto-loop.status-done) .loader-text{animation:animate-text 3s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
599
|
+
}
|
|
600
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
601
|
+
type: Component,
|
|
602
|
+
args: [{ selector: 'al-loader', imports: [CommonModule, MatIconModule], standalone: true, template: "<div class=\"loader-container\">\n <!-- Brain Icon -->\n <mat-icon class=\"loader-icon font-icon icon-brain\" fontSet=\"material-icons\">psychology</mat-icon>\n <!-- Cog Icon -->\n <mat-icon class=\"loader-icon font-icon icon-cog\" fontSet=\"material-icons\">sync</mat-icon>\n <!-- Document Icon -->\n <mat-icon class=\"loader-icon font-icon icon-document\" fontSet=\"material-icons\">article</mat-icon>\n <!-- Wand Icon -->\n <mat-icon class=\"loader-icon font-icon icon-wand\" fontSet=\"material-icons\">auto_awesome</mat-icon>\n <!-- Tick Icon -->\n <mat-icon class=\"loader-icon font-icon icon-tick\" fontSet=\"material-icons\">task_alt</mat-icon>\n</div>\n<div class=\"text-container\" *ngIf=\"showText\">\n <span class=\"loader-text\">{{ displayText }}</span>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";:host{display:flex;flex-direction:column;align-items:center;font-family:Roboto,sans-serif}.loader-container{position:relative;display:flex;align-items:center;justify-content:center}.loader-icon,.loader-text{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;transition:opacity .3s ease-in-out}.text-container{position:relative;margin-top:1rem}.loader-text{position:relative;color:#4b4f62;font-weight:300;font-size:1.125rem;text-align:center;opacity:0;transition:opacity .3s ease-in-out}.font-icon{display:flex;align-items:center;justify-content:center}mat-icon.loader-icon{display:flex;align-items:center;justify-content:center}:host(.size-small) .loader-container{width:48px;height:48px}:host(.size-small) .font-icon{font-size:48px}:host(.size-small) mat-icon.loader-icon{font-size:48px;width:48px;height:48px}:host(.size-small) .loader-text{font-size:.875rem}:host(.size-medium) .loader-container{width:80px;height:80px}:host(.size-medium) .font-icon{font-size:72px}:host(.size-medium) mat-icon.loader-icon{font-size:72px;width:72px;height:72px}:host(.size-medium) .loader-text{font-size:1.125rem}:host(.size-large) .loader-container{width:120px;height:120px}:host(.size-large) .font-icon{font-size:108px}:host(.size-large) mat-icon.loader-icon{font-size:108px;width:108px;height:108px}:host(.size-large) .loader-text{font-size:1.25rem}.icon-brain{color:#ef87bf}.icon-cog{color:#a2a6b8}.icon-document{color:#37c1ce}.icon-tick{color:#00ad83}.icon-wand{background:linear-gradient(275deg,#5473e8 -36.22%,#37c1ce 100.04%);-webkit-background-clip:text;background-clip:text;color:transparent}@keyframes animate-brain{0%{opacity:0;transform:scale(0)}12.5%{opacity:1;transform:scale(1.2)}25%{transform:scale(1)}37.5%{transform:scale(1.1)}50%{transform:scale(1)}62.5%{transform:scale(1.1)}75%{transform:scale(1)}87.5%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes animate-cog{0%{opacity:0;transform:scale(0) rotate(0)}12.5%{opacity:1;transform:scale(1.2) rotate(0)}25%{transform:scale(1) rotate(0)}87.5%{opacity:1;transform:scale(1) rotate(180deg)}to{opacity:0;transform:scale(0) rotate(180deg)}}@keyframes animate-document{0%{opacity:0;transform:scale(0) translateY(0)}12.5%{opacity:1;transform:scale(1.2) translateY(0)}25%{transform:scale(1) translateY(0)}37.5%{transform:scale(1) translateY(-10px)}50%{transform:scale(1) translateY(0)}62.5%{transform:scale(1) translateY(-10px)}75%{transform:scale(1) translateY(0)}87.5%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0) translateY(0)}}@keyframes animate-wand{0%{opacity:0;transform:scale(0) rotate(0)}12.5%{opacity:1;transform:scale(1.2) rotate(0)}25%{transform:scale(1) rotate(-20deg)}50%{transform:scale(1) rotate(20deg)}75%{transform:scale(1) rotate(-20deg)}87.5%{opacity:1;transform:scale(1) rotate(0)}to{opacity:0;transform:scale(0) rotate(0)}}@keyframes animate-tick{0%{opacity:0;transform:scale(0)}12.5%{opacity:1;transform:scale(1.2)}25%{transform:scale(1)}to{opacity:1;transform:scale(1)}}@keyframes animate-text{0%{opacity:0;transform:translate(30px)}12.5%{opacity:1;transform:translate(0)}87.5%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-30px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes hop{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes wave{0%,to{transform:rotate(0)}25%{transform:rotate(-20deg)}75%{transform:rotate(20deg)}}:host(.status-analyzing) .icon-brain,:host(.status-analyzing) .loader-text{opacity:1}:host(.status-analyzing) .icon-brain{animation:pulse 1.5s ease-in-out infinite}:host(.status-gathering) .icon-cog,:host(.status-gathering) .loader-text{opacity:1}:host(.status-gathering) .icon-cog{animation:rotate 2s linear infinite}:host(.status-processing) .icon-document,:host(.status-processing) .loader-text{opacity:1}:host(.status-processing) .icon-document{animation:hop 1s ease-in-out infinite}:host(.status-applying) .icon-wand,:host(.status-applying) .loader-text{opacity:1}:host(.status-applying) .icon-wand{animation:wave 2s ease-in-out infinite}:host(.status-done) .icon-tick,:host(.status-done) .loader-text{opacity:1}:host(.status-done) .icon-tick{animation:pulse .5s ease-out}:host(.auto-loop.status-analyzing) .icon-brain{animation:animate-brain 3s ease-in-out}:host(.auto-loop.status-analyzing) .loader-text{animation:animate-text 3s ease-in-out}:host(.auto-loop.status-gathering) .icon-cog{animation:animate-cog 3s ease-in-out}:host(.auto-loop.status-gathering) .loader-text{animation:animate-text 3s ease-in-out}:host(.auto-loop.status-processing) .icon-document{animation:animate-document 3s ease-in-out}:host(.auto-loop.status-processing) .loader-text{animation:animate-text 3s ease-in-out}:host(.auto-loop.status-applying) .icon-wand{animation:animate-wand 3s ease-in-out}:host(.auto-loop.status-applying) .loader-text{animation:animate-text 3s ease-in-out}:host(.auto-loop.status-done) .icon-tick{animation:animate-tick 3s ease-in-out}:host(.auto-loop.status-done) .loader-text{animation:animate-text 3s ease-in-out}\n"] }]
|
|
603
|
+
}], ctorParameters: () => [], propDecorators: { status: [{
|
|
604
|
+
type: Input
|
|
605
|
+
}], customText: [{
|
|
606
|
+
type: Input
|
|
607
|
+
}], showText: [{
|
|
608
|
+
type: Input
|
|
609
|
+
}], size: [{
|
|
610
|
+
type: Input
|
|
611
|
+
}], autoLoop: [{
|
|
612
|
+
type: Input
|
|
613
|
+
}], loopDuration: [{
|
|
614
|
+
type: Input
|
|
615
|
+
}], customTexts: [{
|
|
616
|
+
type: Input
|
|
617
|
+
}], completeOnDone: [{
|
|
618
|
+
type: Input
|
|
619
|
+
}], statusClass: [{
|
|
620
|
+
type: HostBinding,
|
|
621
|
+
args: ['class']
|
|
622
|
+
}] } });
|
|
623
|
+
|
|
624
|
+
class LoaderModule {
|
|
625
|
+
constructor(iconRegistry, sanitizer) {
|
|
626
|
+
this.iconRegistry = iconRegistry;
|
|
627
|
+
this.sanitizer = sanitizer;
|
|
628
|
+
// register the CSS class alias so <mat-icon> knows about it…
|
|
629
|
+
this.iconRegistry.registerFontClassAlias('material-symbols-outlined', 'material-symbols-outlined');
|
|
630
|
+
}
|
|
631
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoaderModule, deps: [{ token: i1$1.MatIconRegistry }, { token: i2$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
632
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LoaderModule, imports: [CommonModule, LoaderComponent], exports: [LoaderComponent] }); }
|
|
633
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoaderModule, imports: [CommonModule, LoaderComponent] }); }
|
|
634
|
+
}
|
|
635
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoaderModule, decorators: [{
|
|
636
|
+
type: NgModule,
|
|
637
|
+
args: [{
|
|
638
|
+
imports: [CommonModule, LoaderComponent],
|
|
639
|
+
exports: [LoaderComponent],
|
|
640
|
+
}]
|
|
641
|
+
}], ctorParameters: () => [{ type: i1$1.MatIconRegistry }, { type: i2$1.DomSanitizer }] });
|
|
642
|
+
|
|
643
|
+
// Wrapper for Angular Material mat-checkbox
|
|
644
|
+
class CheckboxComponent {
|
|
645
|
+
constructor() {
|
|
646
|
+
this.checked = false;
|
|
647
|
+
this.disabled = false;
|
|
648
|
+
this.labelPosition = 'after';
|
|
649
|
+
this.name = '';
|
|
650
|
+
this.required = false;
|
|
651
|
+
this.color = 'primary';
|
|
652
|
+
this.labelText = '';
|
|
653
|
+
this.helperTextLabel = '';
|
|
654
|
+
this.showLabels = true;
|
|
655
|
+
this.change = new EventEmitter();
|
|
656
|
+
this.indeterminateChange = new EventEmitter();
|
|
657
|
+
this.focus = new EventEmitter();
|
|
658
|
+
this.blur = new EventEmitter();
|
|
659
|
+
this.onChange = (_) => { };
|
|
660
|
+
this.onTouched = () => { };
|
|
661
|
+
}
|
|
662
|
+
writeValue(value) {
|
|
663
|
+
this.checked = !!value;
|
|
664
|
+
}
|
|
665
|
+
registerOnChange(fn) {
|
|
666
|
+
this.onChange = fn;
|
|
667
|
+
}
|
|
668
|
+
registerOnTouched(fn) {
|
|
669
|
+
this.onTouched = fn;
|
|
670
|
+
}
|
|
671
|
+
setDisabledState(isDisabled) {
|
|
672
|
+
this.disabled = isDisabled;
|
|
673
|
+
}
|
|
674
|
+
handleChange(event) {
|
|
675
|
+
this.checked = event.checked;
|
|
676
|
+
this.onChange(this.checked);
|
|
677
|
+
this.change.emit(this.checked);
|
|
678
|
+
}
|
|
679
|
+
handleFocus(event) {
|
|
680
|
+
this.focus.emit(event);
|
|
681
|
+
}
|
|
682
|
+
handleBlur(event) {
|
|
683
|
+
this.onTouched();
|
|
684
|
+
this.blur.emit(event);
|
|
685
|
+
}
|
|
686
|
+
handleIndeterminateChange(value) {
|
|
687
|
+
this.indeterminateChange.emit(value);
|
|
688
|
+
}
|
|
689
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
690
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxComponent, selector: "al-checkbox", inputs: { checked: "checked", disabled: "disabled", labelPosition: "labelPosition", name: "name", required: "required", value: "value", color: "color", labelText: "labelText", helperTextLabel: "helperTextLabel", showLabels: "showLabels" }, outputs: { change: "change", indeterminateChange: "indeterminateChange", focus: "focus", blur: "blur" }, providers: [
|
|
691
|
+
{
|
|
692
|
+
provide: NG_VALUE_ACCESSOR,
|
|
693
|
+
useExisting: forwardRef(() => CheckboxComponent),
|
|
694
|
+
multi: true
|
|
695
|
+
}
|
|
696
|
+
], ngImport: i0, template: "<mat-checkbox [checked]=\"checked\" [disabled]=\"disabled\" [labelPosition]=\"labelPosition\" [name]=\"name\"\n [required]=\"required\" [value]=\"value\" [color]=\"color\" (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\" (indeterminateChange)=\"handleIndeterminateChange($event)\">\n <div *ngIf=\"showLabels\" style=\"display: flex; flex-direction: column;\">\n <div *ngIf=\"labelText\" class=\"checkbox-label-main\">\n {{ labelText }}\n </div>\n <div *ngIf=\"helperTextLabel\" class=\"checkbox-label-helper\">\n {{ helperTextLabel }}\n </div>\n </div>\n <ng-content></ng-content>\n</mat-checkbox>", styles: ["::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#5473e8!important;border-color:#5473e8!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-mdc-checkbox.mat-primary.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#5473e8!important;border-color:#5473e8!important}::ng-deep .mat-mdc-checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#37c1ce!important;border-color:#37c1ce!important}::ng-deep .mat-mdc-checkbox.mat-warn.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#e854a4!important;border-color:#e854a4!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#c3c5d1!important;border-color:#c3c5d1!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#c3c5d1!important;border-color:#c3c5d1!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border-color:#717793!important}::ng-deep .mat-mdc-checkbox:not(.mat-mdc-checkbox-checked) .mdc-checkbox__background{border:2px solid #717793!important;background-color:transparent!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple{background-color:#5473e81f!important}::ng-deep .mat-mdc-checkbox:hover .mdc-checkbox__ripple{background-color:#5473e83d!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border-radius:2px!important}::ng-deep .mat-mdc-checkbox .mdc-form-field>label{color:var(--Greys-700, #4B4F62)!important;font-family:var(--Label-Large-Font, Roboto)!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;line-height:20px!important;letter-spacing:.1px!important}.checkbox-label-main{color:var(--Greys-700, #4B4F62)!important;font-family:var(--Label-Large-Font, Roboto)!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;line-height:20px!important;letter-spacing:.1px!important}.checkbox-label-helper{color:var(--Greys-500, #A2A6B8)!important;font-family:var(--Label-Medium-Font, Roboto)!important;font-size:12px!important;font-style:normal!important;font-weight:400!important;line-height:12px!important;letter-spacing:.5px!important;margin-top:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
|
|
697
|
+
}
|
|
698
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
699
|
+
type: Component,
|
|
700
|
+
args: [{ selector: 'al-checkbox', providers: [
|
|
701
|
+
{
|
|
702
|
+
provide: NG_VALUE_ACCESSOR,
|
|
703
|
+
useExisting: forwardRef(() => CheckboxComponent),
|
|
704
|
+
multi: true
|
|
705
|
+
}
|
|
706
|
+
], template: "<mat-checkbox [checked]=\"checked\" [disabled]=\"disabled\" [labelPosition]=\"labelPosition\" [name]=\"name\"\n [required]=\"required\" [value]=\"value\" [color]=\"color\" (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\" (indeterminateChange)=\"handleIndeterminateChange($event)\">\n <div *ngIf=\"showLabels\" style=\"display: flex; flex-direction: column;\">\n <div *ngIf=\"labelText\" class=\"checkbox-label-main\">\n {{ labelText }}\n </div>\n <div *ngIf=\"helperTextLabel\" class=\"checkbox-label-helper\">\n {{ helperTextLabel }}\n </div>\n </div>\n <ng-content></ng-content>\n</mat-checkbox>", styles: ["::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#5473e8!important;border-color:#5473e8!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-mdc-checkbox.mat-primary.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#5473e8!important;border-color:#5473e8!important}::ng-deep .mat-mdc-checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#37c1ce!important;border-color:#37c1ce!important}::ng-deep .mat-mdc-checkbox.mat-warn.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#e854a4!important;border-color:#e854a4!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#c3c5d1!important;border-color:#c3c5d1!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#c3c5d1!important;border-color:#c3c5d1!important}::ng-deep .mat-mdc-checkbox.mat-mdc-checkbox-disabled .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border-color:#717793!important}::ng-deep .mat-mdc-checkbox:not(.mat-mdc-checkbox-checked) .mdc-checkbox__background{border:2px solid #717793!important;background-color:transparent!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple{background-color:#5473e81f!important}::ng-deep .mat-mdc-checkbox:hover .mdc-checkbox__ripple{background-color:#5473e83d!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__background{border-radius:2px!important}::ng-deep .mat-mdc-checkbox .mdc-form-field>label{color:var(--Greys-700, #4B4F62)!important;font-family:var(--Label-Large-Font, Roboto)!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;line-height:20px!important;letter-spacing:.1px!important}.checkbox-label-main{color:var(--Greys-700, #4B4F62)!important;font-family:var(--Label-Large-Font, Roboto)!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;line-height:20px!important;letter-spacing:.1px!important}.checkbox-label-helper{color:var(--Greys-500, #A2A6B8)!important;font-family:var(--Label-Medium-Font, Roboto)!important;font-size:12px!important;font-style:normal!important;font-weight:400!important;line-height:12px!important;letter-spacing:.5px!important;margin-top:0!important}\n"] }]
|
|
707
|
+
}], propDecorators: { checked: [{
|
|
708
|
+
type: Input
|
|
709
|
+
}], disabled: [{
|
|
710
|
+
type: Input
|
|
711
|
+
}], labelPosition: [{
|
|
712
|
+
type: Input
|
|
713
|
+
}], name: [{
|
|
714
|
+
type: Input
|
|
715
|
+
}], required: [{
|
|
716
|
+
type: Input
|
|
717
|
+
}], value: [{
|
|
718
|
+
type: Input
|
|
719
|
+
}], color: [{
|
|
720
|
+
type: Input
|
|
721
|
+
}], labelText: [{
|
|
722
|
+
type: Input
|
|
723
|
+
}], helperTextLabel: [{
|
|
724
|
+
type: Input
|
|
725
|
+
}], showLabels: [{
|
|
726
|
+
type: Input
|
|
727
|
+
}], change: [{
|
|
728
|
+
type: Output
|
|
729
|
+
}], indeterminateChange: [{
|
|
730
|
+
type: Output
|
|
731
|
+
}], focus: [{
|
|
732
|
+
type: Output
|
|
733
|
+
}], blur: [{
|
|
734
|
+
type: Output
|
|
735
|
+
}] } });
|
|
736
|
+
|
|
737
|
+
class CheckboxModule {
|
|
738
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
739
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, declarations: [CheckboxComponent], imports: [CommonModule, MatCheckboxModule], exports: [CheckboxComponent] }); }
|
|
740
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, imports: [CommonModule, MatCheckboxModule] }); }
|
|
741
|
+
}
|
|
742
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, decorators: [{
|
|
743
|
+
type: NgModule,
|
|
744
|
+
args: [{
|
|
745
|
+
declarations: [CheckboxComponent],
|
|
746
|
+
imports: [CommonModule, MatCheckboxModule],
|
|
747
|
+
exports: [CheckboxComponent]
|
|
748
|
+
}]
|
|
749
|
+
}] });
|
|
750
|
+
|
|
751
|
+
// Wrapper for Angular Material mat-radio-button
|
|
752
|
+
class RadioComponent {
|
|
753
|
+
constructor() {
|
|
754
|
+
this.name = '';
|
|
755
|
+
this.checked = false;
|
|
756
|
+
this.disabled = false;
|
|
757
|
+
this.color = 'primary';
|
|
758
|
+
this.labelPosition = 'after';
|
|
759
|
+
this.required = false;
|
|
760
|
+
this.labelText = '';
|
|
761
|
+
this.helperTextLabel = '';
|
|
762
|
+
this.showLabels = true;
|
|
763
|
+
this.change = new EventEmitter();
|
|
764
|
+
this.focus = new EventEmitter();
|
|
765
|
+
this.blur = new EventEmitter();
|
|
766
|
+
this.onChange = (_) => { };
|
|
767
|
+
this.onTouched = () => { };
|
|
768
|
+
}
|
|
769
|
+
writeValue(value) {
|
|
770
|
+
this.checked = value === this.value;
|
|
771
|
+
}
|
|
772
|
+
registerOnChange(fn) {
|
|
773
|
+
this.onChange = fn;
|
|
774
|
+
}
|
|
775
|
+
registerOnTouched(fn) {
|
|
776
|
+
this.onTouched = fn;
|
|
777
|
+
}
|
|
778
|
+
setDisabledState(isDisabled) {
|
|
779
|
+
this.disabled = isDisabled;
|
|
780
|
+
}
|
|
781
|
+
handleChange(event) {
|
|
782
|
+
this.checked = true;
|
|
783
|
+
this.onChange(this.value);
|
|
784
|
+
this.change.emit(this.value);
|
|
785
|
+
}
|
|
786
|
+
handleFocus(event) {
|
|
787
|
+
this.focus.emit(event);
|
|
788
|
+
}
|
|
789
|
+
handleBlur(event) {
|
|
790
|
+
this.onTouched();
|
|
791
|
+
this.blur.emit(event);
|
|
792
|
+
}
|
|
793
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
794
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RadioComponent, selector: "al-radio", inputs: { value: "value", name: "name", checked: "checked", disabled: "disabled", color: "color", labelPosition: "labelPosition", required: "required", labelText: "labelText", helperTextLabel: "helperTextLabel", showLabels: "showLabels" }, outputs: { change: "change", focus: "focus", blur: "blur" }, providers: [
|
|
795
|
+
{
|
|
796
|
+
provide: NG_VALUE_ACCESSOR,
|
|
797
|
+
useExisting: forwardRef(() => RadioComponent),
|
|
798
|
+
multi: true
|
|
799
|
+
}
|
|
800
|
+
], ngImport: i0, template: "<mat-radio-button [value]=\"value\" [name]=\"name\" [checked]=\"checked\" [disabled]=\"disabled\" [color]=\"color\"\n [labelPosition]=\"labelPosition\" [required]=\"required\" (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\">\n <div *ngIf=\"showLabels\" style=\"display: flex; flex-direction: column;\">\n <div *ngIf=\"labelText\" class=\"radio-label-main\">\n {{ labelText }}\n </div>\n <div *ngIf=\"helperTextLabel\" class=\"radio-label-helper\">\n {{ helperTextLabel }}\n </div>\n </div>\n <ng-content></ng-content>\n</mat-radio-button>", styles: ["::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__ripple{background-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-primary.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-primary.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-accent.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-accent.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-warn.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-warn.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .mdc-radio__background .mdc-radio__outer-circle{border-color:#c3c5d1!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .mdc-radio__background .mdc-radio__inner-circle{border-color:#c3c5d1!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#c3c5d1!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#c3c5d1!important}::ng-deep .mat-mdc-radio-button .mdc-radio__ripple{background-color:#5473e81f!important}::ng-deep .mat-mdc-radio-button:hover .mdc-radio__ripple{background-color:#5473e83d!important}::ng-deep .mat-mdc-radio-button .mdc-form-field>label{color:var(--Greys-700, #4B4F62)!important;font-family:var(--Label-Large-Font, Roboto)!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;line-height:20px!important;letter-spacing:.1px!important}.radio-label-main{color:var(--Greys-700, #4B4F62)!important;font-family:var(--Label-Large-Font, Roboto)!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;line-height:20px!important;letter-spacing:.1px!important}.radio-label-helper{color:var(--Greys-500, #A2A6B8)!important;font-family:var(--Label-Medium-Font, Roboto)!important;font-size:12px!important;font-style:normal!important;font-weight:400!important;line-height:12px!important;letter-spacing:.5px!important;margin-top:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
|
|
801
|
+
}
|
|
802
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, decorators: [{
|
|
803
|
+
type: Component,
|
|
804
|
+
args: [{ selector: 'al-radio', providers: [
|
|
805
|
+
{
|
|
806
|
+
provide: NG_VALUE_ACCESSOR,
|
|
807
|
+
useExisting: forwardRef(() => RadioComponent),
|
|
808
|
+
multi: true
|
|
809
|
+
}
|
|
810
|
+
], template: "<mat-radio-button [value]=\"value\" [name]=\"name\" [checked]=\"checked\" [disabled]=\"disabled\" [color]=\"color\"\n [labelPosition]=\"labelPosition\" [required]=\"required\" (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\">\n <div *ngIf=\"showLabels\" style=\"display: flex; flex-direction: column;\">\n <div *ngIf=\"labelText\" class=\"radio-label-main\">\n {{ labelText }}\n </div>\n <div *ngIf=\"helperTextLabel\" class=\"radio-label-helper\">\n {{ helperTextLabel }}\n </div>\n </div>\n <ng-content></ng-content>\n</mat-radio-button>", styles: ["::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__ripple{background-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-primary.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-primary.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#5473e8!important}::ng-deep .mat-mdc-radio-button.mat-accent.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-accent.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#37c1ce!important}::ng-deep .mat-mdc-radio-button.mat-warn.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-warn.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#e854a4!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .mdc-radio__background .mdc-radio__outer-circle{border-color:#c3c5d1!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled .mdc-radio__background .mdc-radio__inner-circle{border-color:#c3c5d1!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__outer-circle{border-color:#c3c5d1!important}::ng-deep .mat-mdc-radio-button.mat-mdc-radio-disabled.mat-mdc-radio-checked .mdc-radio__background .mdc-radio__inner-circle{border-color:#c3c5d1!important}::ng-deep .mat-mdc-radio-button .mdc-radio__ripple{background-color:#5473e81f!important}::ng-deep .mat-mdc-radio-button:hover .mdc-radio__ripple{background-color:#5473e83d!important}::ng-deep .mat-mdc-radio-button .mdc-form-field>label{color:var(--Greys-700, #4B4F62)!important;font-family:var(--Label-Large-Font, Roboto)!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;line-height:20px!important;letter-spacing:.1px!important}.radio-label-main{color:var(--Greys-700, #4B4F62)!important;font-family:var(--Label-Large-Font, Roboto)!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;line-height:20px!important;letter-spacing:.1px!important}.radio-label-helper{color:var(--Greys-500, #A2A6B8)!important;font-family:var(--Label-Medium-Font, Roboto)!important;font-size:12px!important;font-style:normal!important;font-weight:400!important;line-height:12px!important;letter-spacing:.5px!important;margin-top:0!important}\n"] }]
|
|
811
|
+
}], propDecorators: { value: [{
|
|
812
|
+
type: Input
|
|
813
|
+
}], name: [{
|
|
814
|
+
type: Input
|
|
815
|
+
}], checked: [{
|
|
816
|
+
type: Input
|
|
817
|
+
}], disabled: [{
|
|
818
|
+
type: Input
|
|
819
|
+
}], color: [{
|
|
820
|
+
type: Input
|
|
821
|
+
}], labelPosition: [{
|
|
822
|
+
type: Input
|
|
823
|
+
}], required: [{
|
|
824
|
+
type: Input
|
|
825
|
+
}], labelText: [{
|
|
826
|
+
type: Input
|
|
827
|
+
}], helperTextLabel: [{
|
|
828
|
+
type: Input
|
|
829
|
+
}], showLabels: [{
|
|
830
|
+
type: Input
|
|
831
|
+
}], change: [{
|
|
832
|
+
type: Output
|
|
833
|
+
}], focus: [{
|
|
834
|
+
type: Output
|
|
835
|
+
}], blur: [{
|
|
836
|
+
type: Output
|
|
837
|
+
}] } });
|
|
838
|
+
|
|
839
|
+
class RadioModule {
|
|
840
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
841
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: RadioModule, declarations: [RadioComponent], imports: [CommonModule, MatRadioModule], exports: [RadioComponent] }); }
|
|
842
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioModule, imports: [CommonModule, MatRadioModule] }); }
|
|
843
|
+
}
|
|
844
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioModule, decorators: [{
|
|
845
|
+
type: NgModule,
|
|
846
|
+
args: [{
|
|
847
|
+
declarations: [RadioComponent],
|
|
848
|
+
imports: [CommonModule, MatRadioModule],
|
|
849
|
+
exports: [RadioComponent]
|
|
850
|
+
}]
|
|
851
|
+
}] });
|
|
852
|
+
|
|
853
|
+
class ToggleButtonsComponent {
|
|
854
|
+
constructor() {
|
|
855
|
+
this.buttons = [];
|
|
856
|
+
this.selectedId = '';
|
|
857
|
+
this.disabled = false;
|
|
858
|
+
this.size = 'md';
|
|
859
|
+
this.type = 'default';
|
|
860
|
+
this.multiple = false;
|
|
861
|
+
this.vertical = false;
|
|
862
|
+
this.selectionChange = new EventEmitter();
|
|
863
|
+
this.buttonClick = new EventEmitter();
|
|
864
|
+
}
|
|
865
|
+
onSelectionChange(value) {
|
|
866
|
+
this.selectedId = value;
|
|
867
|
+
this.selectionChange.emit(value);
|
|
868
|
+
const selectedButton = this.buttons.find(btn => btn.id === value);
|
|
869
|
+
if (selectedButton) {
|
|
870
|
+
this.buttonClick.emit(selectedButton);
|
|
871
|
+
}
|
|
872
|
+
}
|
|
873
|
+
getSelectedValue() {
|
|
874
|
+
return this.selectedId;
|
|
875
|
+
}
|
|
876
|
+
getSizeClass() {
|
|
877
|
+
return 'al-toggle-buttons-size-' + this.size;
|
|
878
|
+
}
|
|
879
|
+
computeGap(button) {
|
|
880
|
+
const hasLabel = !!(button.label && button.label.trim());
|
|
881
|
+
const hasIcon = !!(button.icon && button.icon.trim());
|
|
882
|
+
// 0 gap for icon-only buttons
|
|
883
|
+
if (this.type === 'icon-only' || (!hasLabel && hasIcon)) {
|
|
884
|
+
return 0;
|
|
885
|
+
}
|
|
886
|
+
// 4px gap for default type (icon + text)
|
|
887
|
+
if (this.type === 'default' && hasIcon && hasLabel) {
|
|
888
|
+
return 4;
|
|
889
|
+
}
|
|
890
|
+
// 8px gap for text-only buttons
|
|
891
|
+
return 8;
|
|
892
|
+
}
|
|
893
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
894
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ToggleButtonsComponent, isStandalone: true, selector: "al-toggle-buttons", inputs: { buttons: "buttons", selectedId: "selectedId", disabled: "disabled", size: "size", type: "type", multiple: "multiple", vertical: "vertical" }, outputs: { selectionChange: "selectionChange", buttonClick: "buttonClick" }, ngImport: i0, template: "<mat-button-toggle-group [value]=\"getSelectedValue()\" [disabled]=\"disabled\" [multiple]=\"multiple\" [vertical]=\"vertical\"\n (change)=\"onSelectionChange($event.value)\" [ngClass]=\"[getSizeClass()]\">\n\n <mat-button-toggle *ngFor=\"let button of buttons\" [value]=\"button.id\" [disabled]=\"button.disabled\"\n [attr.aria-label]=\"button.label\" [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap(button)\">\n\n <!-- Icon (shown based on type) -->\n <mat-icon *ngIf=\"(type === 'default' || type === 'icon-only') && button.icon?.trim()\" class=\"button-icon\">{{\n button.icon }}</mat-icon>\n\n <!-- Label (shown based on type) -->\n <span *ngIf=\"(type === 'default' || type === 'text-only') && button.label?.trim()\" class=\"button-label\">{{\n button.label }}</span>\n </mat-button-toggle>\n\n</mat-button-toggle-group>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";mat-button-toggle-group{display:flex;border-radius:4px;border:1px solid var(--Greys-400, #C3C5D1);background:var(--Base-White, #FFF);overflow:hidden;box-shadow:none!important;width:fit-content;align-items:stretch}mat-button-toggle{border:none;background:transparent;cursor:pointer;transition:all .2s ease;position:relative;flex:0 0 auto;width:fit-content;min-width:fit-content;border-radius:0;color:var(--Greys-500, #A2A6B8);font-family:var(--Body-Medium-Font, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}mat-button-toggle:hover:not(.mat-button-toggle-disabled){background-color:var(--Greys-100, #F5F5F7)}mat-button-toggle.mat-button-toggle-checked,mat-button-toggle[aria-pressed=true],mat-button-toggle.mat-button-toggle-checked:hover{background-color:#ecedf1!important;color:#4b4f62!important;font-weight:400}.al-toggle-buttons-size-sm mat-button-toggle.mat-button-toggle-checked,.al-toggle-buttons-size-md mat-button-toggle.mat-button-toggle-checked,.al-toggle-buttons-size-lg mat-button-toggle.mat-button-toggle-checked{background-color:#ecedf1!important;color:#4b4f62!important}mat-button-toggle.mat-button-toggle-disabled{opacity:.5;cursor:not-allowed;color:var(--Greys-500, #A2A6B8)}.button-icon{font-size:14px;line-height:1;margin-right:8px}mat-button-toggle .mat-icon{font-size:14px;width:14px;height:14px}.button-label{font-family:var(--Body-Medium-Font, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--Greys-500, #A2A6B8);white-space:nowrap}mat-button-toggle.mat-button-toggle-checked .button-label{color:#4b4f62!important;font-weight:400}::ng-deep .al-toggle-buttons[type=icon-only] .button-icon,::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .button-icon{margin-right:0!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .button-icon{width:100%!important;height:100%!important;margin:0!important;padding:0!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .mat-icon{width:20px!important;height:20px!important;font-size:20px!important;line-height:20px!important}.al-toggle-buttons-size-sm mat-button-toggle{height:32px!important;padding:8px 12px!important;border:1px solid var(--Greys-400, #C3C5D1)!important;background:var(--Base-White, #FFF)!important}.al-toggle-buttons-size-md mat-button-toggle{height:36px!important;padding:8px 12px!important;border:1px solid var(--Greys-400, #C3C5D1)!important;background:var(--Base-White, #FFF)!important}.al-toggle-buttons-size-lg mat-button-toggle{height:40px!important;padding:8px 12px!important;border:1px solid var(--Greys-400, #C3C5D1)!important;background:var(--Base-White, #FFF)!important}.al-toggle-buttons-size-sm .button-icon,.al-toggle-buttons-size-sm mat-button-toggle .mat-icon,.al-toggle-buttons-size-md .button-icon,.al-toggle-buttons-size-md mat-button-toggle .mat-icon{font-size:14px;width:14px;height:14px}.al-toggle-buttons-size-lg .button-icon,.al-toggle-buttons-size-lg mat-button-toggle .mat-icon{font-size:16px;width:16px;height:16px}mat-button-toggle-group .mat-button-toggle{border:none!important;border-radius:0!important;border-top:none!important;border-bottom:none!important;outline:none!important;box-shadow:none!important}mat-button-toggle-group .mat-button-toggle:first-child{border-radius:0!important;border-left:none!important}mat-button-toggle-group .mat-button-toggle:last-child{border-radius:0!important;border-right:none!important}mat-button-toggle-group .mat-button-toggle:not(:last-child){border-right:1px solid var(--Greys-400, #C3C5D1)!important}mat-button-toggle-group .mat-button-toggle *,mat-button-toggle-group .mat-button-toggle-appearance-standard,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-label-content,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-button,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-ripple{border:none!important;box-shadow:none!important;padding:0!important}mat-button-toggle-group .mat-button-toggle:focus .mat-button-toggle-focus-overlay{display:none!important}.mat-button-toggle-checked .mat-button-toggle-label-content:before,.mat-button-toggle-checked .mat-button-toggle-label-content:after,.mat-button-toggle-checked:before,.mat-button-toggle-checked:after,.mat-button-toggle-checked .mat-icon:not(.button-icon),.mat-button-toggle-checked .material-icons:not(.button-icon){display:none!important}.mat-button-toggle-checked .button-icon{display:inline-flex!important}.mat-button-toggle-checked .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{background-image:none!important}::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:20px!important}::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none!important}mat-button-toggle:focus-visible{outline:2px solid var(--Primary-500, #5473E8);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i2$4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }] }); }
|
|
895
|
+
}
|
|
896
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonsComponent, decorators: [{
|
|
897
|
+
type: Component,
|
|
898
|
+
args: [{ selector: 'al-toggle-buttons', standalone: true, imports: [CommonModule, MatButtonToggleModule, MatIconModule, FormsModule], template: "<mat-button-toggle-group [value]=\"getSelectedValue()\" [disabled]=\"disabled\" [multiple]=\"multiple\" [vertical]=\"vertical\"\n (change)=\"onSelectionChange($event.value)\" [ngClass]=\"[getSizeClass()]\">\n\n <mat-button-toggle *ngFor=\"let button of buttons\" [value]=\"button.id\" [disabled]=\"button.disabled\"\n [attr.aria-label]=\"button.label\" [style.display]=\"'inline-flex'\" [style.align-items]=\"'center'\"\n [style.gap.px]=\"computeGap(button)\">\n\n <!-- Icon (shown based on type) -->\n <mat-icon *ngIf=\"(type === 'default' || type === 'icon-only') && button.icon?.trim()\" class=\"button-icon\">{{\n button.icon }}</mat-icon>\n\n <!-- Label (shown based on type) -->\n <span *ngIf=\"(type === 'default' || type === 'text-only') && button.label?.trim()\" class=\"button-label\">{{\n button.label }}</span>\n </mat-button-toggle>\n\n</mat-button-toggle-group>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined\";mat-button-toggle-group{display:flex;border-radius:4px;border:1px solid var(--Greys-400, #C3C5D1);background:var(--Base-White, #FFF);overflow:hidden;box-shadow:none!important;width:fit-content;align-items:stretch}mat-button-toggle{border:none;background:transparent;cursor:pointer;transition:all .2s ease;position:relative;flex:0 0 auto;width:fit-content;min-width:fit-content;border-radius:0;color:var(--Greys-500, #A2A6B8);font-family:var(--Body-Medium-Font, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}mat-button-toggle:hover:not(.mat-button-toggle-disabled){background-color:var(--Greys-100, #F5F5F7)}mat-button-toggle.mat-button-toggle-checked,mat-button-toggle[aria-pressed=true],mat-button-toggle.mat-button-toggle-checked:hover{background-color:#ecedf1!important;color:#4b4f62!important;font-weight:400}.al-toggle-buttons-size-sm mat-button-toggle.mat-button-toggle-checked,.al-toggle-buttons-size-md mat-button-toggle.mat-button-toggle-checked,.al-toggle-buttons-size-lg mat-button-toggle.mat-button-toggle-checked{background-color:#ecedf1!important;color:#4b4f62!important}mat-button-toggle.mat-button-toggle-disabled{opacity:.5;cursor:not-allowed;color:var(--Greys-500, #A2A6B8)}.button-icon{font-size:14px;line-height:1;margin-right:8px}mat-button-toggle .mat-icon{font-size:14px;width:14px;height:14px}.button-label{font-family:var(--Body-Medium-Font, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--Greys-500, #A2A6B8);white-space:nowrap}mat-button-toggle.mat-button-toggle-checked .button-label{color:#4b4f62!important;font-weight:400}::ng-deep .al-toggle-buttons[type=icon-only] .button-icon,::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .button-icon{margin-right:0!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .button-icon{width:100%!important;height:100%!important;margin:0!important;padding:0!important}::ng-deep mat-button-toggle:has(.button-icon):not(:has(.button-label)) .mat-icon{width:20px!important;height:20px!important;font-size:20px!important;line-height:20px!important}.al-toggle-buttons-size-sm mat-button-toggle{height:32px!important;padding:8px 12px!important;border:1px solid var(--Greys-400, #C3C5D1)!important;background:var(--Base-White, #FFF)!important}.al-toggle-buttons-size-md mat-button-toggle{height:36px!important;padding:8px 12px!important;border:1px solid var(--Greys-400, #C3C5D1)!important;background:var(--Base-White, #FFF)!important}.al-toggle-buttons-size-lg mat-button-toggle{height:40px!important;padding:8px 12px!important;border:1px solid var(--Greys-400, #C3C5D1)!important;background:var(--Base-White, #FFF)!important}.al-toggle-buttons-size-sm .button-icon,.al-toggle-buttons-size-sm mat-button-toggle .mat-icon,.al-toggle-buttons-size-md .button-icon,.al-toggle-buttons-size-md mat-button-toggle .mat-icon{font-size:14px;width:14px;height:14px}.al-toggle-buttons-size-lg .button-icon,.al-toggle-buttons-size-lg mat-button-toggle .mat-icon{font-size:16px;width:16px;height:16px}mat-button-toggle-group .mat-button-toggle{border:none!important;border-radius:0!important;border-top:none!important;border-bottom:none!important;outline:none!important;box-shadow:none!important}mat-button-toggle-group .mat-button-toggle:first-child{border-radius:0!important;border-left:none!important}mat-button-toggle-group .mat-button-toggle:last-child{border-radius:0!important;border-right:none!important}mat-button-toggle-group .mat-button-toggle:not(:last-child){border-right:1px solid var(--Greys-400, #C3C5D1)!important}mat-button-toggle-group .mat-button-toggle *,mat-button-toggle-group .mat-button-toggle-appearance-standard,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-label-content,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-button,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay,mat-button-toggle-group .mat-button-toggle-appearance-standard .mat-button-toggle-ripple{border:none!important;box-shadow:none!important;padding:0!important}mat-button-toggle-group .mat-button-toggle:focus .mat-button-toggle-focus-overlay{display:none!important}.mat-button-toggle-checked .mat-button-toggle-label-content:before,.mat-button-toggle-checked .mat-button-toggle-label-content:after,.mat-button-toggle-checked:before,.mat-button-toggle-checked:after,.mat-button-toggle-checked .mat-icon:not(.button-icon),.mat-button-toggle-checked .material-icons:not(.button-icon){display:none!important}.mat-button-toggle-checked .button-icon{display:inline-flex!important}.mat-button-toggle-checked .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{background-image:none!important}::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:20px!important}::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none!important}mat-button-toggle:focus-visible{outline:2px solid var(--Primary-500, #5473E8);outline-offset:2px}\n"] }]
|
|
899
|
+
}], propDecorators: { buttons: [{
|
|
900
|
+
type: Input
|
|
901
|
+
}], selectedId: [{
|
|
902
|
+
type: Input
|
|
903
|
+
}], disabled: [{
|
|
904
|
+
type: Input
|
|
905
|
+
}], size: [{
|
|
906
|
+
type: Input
|
|
907
|
+
}], type: [{
|
|
908
|
+
type: Input
|
|
909
|
+
}], multiple: [{
|
|
910
|
+
type: Input
|
|
911
|
+
}], vertical: [{
|
|
912
|
+
type: Input
|
|
913
|
+
}], selectionChange: [{
|
|
914
|
+
type: Output
|
|
915
|
+
}], buttonClick: [{
|
|
916
|
+
type: Output
|
|
917
|
+
}] } });
|
|
918
|
+
|
|
919
|
+
class ToggleButtonsModule {
|
|
920
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
921
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonsModule, imports: [ToggleButtonsComponent], exports: [ToggleButtonsComponent] }); }
|
|
922
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonsModule, imports: [ToggleButtonsComponent] }); }
|
|
923
|
+
}
|
|
924
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonsModule, decorators: [{
|
|
925
|
+
type: NgModule,
|
|
926
|
+
args: [{
|
|
927
|
+
imports: [ToggleButtonsComponent],
|
|
928
|
+
exports: [ToggleButtonsComponent]
|
|
929
|
+
}]
|
|
930
|
+
}] });
|
|
931
|
+
|
|
932
|
+
// Wrapper for Angular Material mat-slide-toggle with custom icons
|
|
933
|
+
class SlideToggleComponent {
|
|
934
|
+
constructor(renderer) {
|
|
935
|
+
this.renderer = renderer;
|
|
936
|
+
this.checked = false;
|
|
937
|
+
this.disabled = false;
|
|
938
|
+
this.name = '';
|
|
939
|
+
this.required = false;
|
|
940
|
+
this.color = 'primary';
|
|
941
|
+
this.labelText = '';
|
|
942
|
+
this.helperTextLabel = '';
|
|
943
|
+
this.showLabels = true;
|
|
944
|
+
this.onIcon = 'dark_mode'; // Material Icon for ON state
|
|
945
|
+
this.offIcon = 'light_mode'; // Material Icon for OFF state
|
|
946
|
+
this.showIcons = true; // Toggle to show/hide custom icons
|
|
947
|
+
this.size = 'medium'; // Size variant
|
|
948
|
+
this.change = new EventEmitter();
|
|
949
|
+
this.focus = new EventEmitter();
|
|
950
|
+
this.blur = new EventEmitter();
|
|
951
|
+
this.onChange = (_) => { };
|
|
952
|
+
this.onTouched = () => { };
|
|
953
|
+
}
|
|
954
|
+
writeValue(value) {
|
|
955
|
+
this.checked = !!value;
|
|
956
|
+
this.updateIcon();
|
|
957
|
+
}
|
|
958
|
+
registerOnChange(fn) {
|
|
959
|
+
this.onChange = fn;
|
|
960
|
+
}
|
|
961
|
+
registerOnTouched(fn) {
|
|
962
|
+
this.onTouched = fn;
|
|
963
|
+
}
|
|
964
|
+
setDisabledState(isDisabled) {
|
|
965
|
+
this.disabled = isDisabled;
|
|
966
|
+
}
|
|
967
|
+
handleChange(event) {
|
|
968
|
+
this.checked = event.checked;
|
|
969
|
+
this.onChange(this.checked);
|
|
970
|
+
this.change.emit(this.checked);
|
|
971
|
+
this.updateIcon();
|
|
972
|
+
}
|
|
973
|
+
handleFocus(event) {
|
|
974
|
+
this.focus.emit(event);
|
|
975
|
+
}
|
|
976
|
+
handleBlur(event) {
|
|
977
|
+
this.onTouched();
|
|
978
|
+
this.blur.emit(event);
|
|
979
|
+
}
|
|
980
|
+
ngAfterViewInit() {
|
|
981
|
+
setTimeout(() => {
|
|
982
|
+
this.setIcon();
|
|
983
|
+
}, 100);
|
|
984
|
+
}
|
|
985
|
+
setIcon() {
|
|
986
|
+
if (this.element && this.showIcons) {
|
|
987
|
+
try {
|
|
988
|
+
// Try multiple selectors to find the handle
|
|
989
|
+
let targetSpan = this.element.nativeElement.querySelector('.mdc-switch__handle');
|
|
990
|
+
if (!targetSpan) {
|
|
991
|
+
targetSpan = this.element.nativeElement.querySelector('.mat-slide-toggle-thumb');
|
|
992
|
+
}
|
|
993
|
+
if (!targetSpan) {
|
|
994
|
+
targetSpan = this.element.nativeElement.querySelector('.mdc-switch__thumb');
|
|
995
|
+
}
|
|
996
|
+
if (!targetSpan) {
|
|
997
|
+
targetSpan = this.element.nativeElement.querySelector('.mdc-switch__icon');
|
|
998
|
+
}
|
|
999
|
+
if (targetSpan) {
|
|
1000
|
+
// Clear existing content
|
|
1001
|
+
while (targetSpan.firstChild) {
|
|
1002
|
+
targetSpan.firstChild.remove();
|
|
1003
|
+
}
|
|
1004
|
+
// Create new icon element
|
|
1005
|
+
const elem = this.renderer.createElement('span');
|
|
1006
|
+
const icon = this.checked ? this.onIcon : this.offIcon;
|
|
1007
|
+
elem.setAttribute('class', 'material-icons slide-toggle-custom-icon');
|
|
1008
|
+
elem.textContent = icon;
|
|
1009
|
+
targetSpan.appendChild(elem);
|
|
1010
|
+
}
|
|
1011
|
+
}
|
|
1012
|
+
catch (error) {
|
|
1013
|
+
console.error('Error updating Material icons:', error);
|
|
1014
|
+
}
|
|
1015
|
+
}
|
|
1016
|
+
}
|
|
1017
|
+
updateIcon() {
|
|
1018
|
+
setTimeout(() => {
|
|
1019
|
+
this.setIcon();
|
|
1020
|
+
}, 200);
|
|
1021
|
+
}
|
|
1022
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SlideToggleComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1023
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SlideToggleComponent, isStandalone: true, selector: "al-slide-toggle", inputs: { checked: "checked", disabled: "disabled", name: "name", required: "required", color: "color", labelText: "labelText", helperTextLabel: "helperTextLabel", showLabels: "showLabels", onIcon: "onIcon", offIcon: "offIcon", showIcons: "showIcons", size: "size" }, outputs: { change: "change", focus: "focus", blur: "blur" }, providers: [
|
|
1024
|
+
{
|
|
1025
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1026
|
+
useExisting: forwardRef(() => SlideToggleComponent),
|
|
1027
|
+
multi: true
|
|
1028
|
+
}
|
|
1029
|
+
], viewQueries: [{ propertyName: "element", first: true, predicate: ["slideToggle"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"slide-toggle-container\">\n <mat-slide-toggle #slideToggle [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\" [required]=\"required\"\n [color]=\"color\" (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\" (blur)=\"handleBlur($event)\"\n class=\"custom-slide-toggle\" [class.slide-toggle-small]=\"size === 'small'\"\n [class.slide-toggle-medium]=\"size === 'medium'\" [class.slide-toggle-large]=\"size === 'large'\">\n <div *ngIf=\"showLabels\" class=\"slide-toggle-labels\">\n <div *ngIf=\"labelText\" class=\"slide-toggle-label-main\">\n {{ labelText }}\n </div>\n <div *ngIf=\"helperTextLabel\" class=\"slide-toggle-label-helper\">\n {{ helperTextLabel }}\n </div>\n </div>\n <ng-content></ng-content>\n </mat-slide-toggle>\n</div>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";.slide-toggle-container{position:relative;display:inline-block}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch{width:52px!important;height:32px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch__track{width:52px!important;height:32px!important;border-radius:16px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch__handle{width:22px!important;height:22px!important;border-radius:50%!important;top:16px!important;left:4px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch{width:40px!important;height:24px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch__track{width:40px!important;height:24px!important;border-radius:12px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch__handle{width:18px!important;height:18px!important;border-radius:50%!important;top:12px!important;left:3px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch{width:64px!important;height:40px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch__track{width:64px!important;height:40px!important;border-radius:20px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch__handle{width:28px!important;height:28px!important;border-radius:50%!important;top:20px!important;left:6px!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(2px)!important;top:5px!important}::ng-deep .custom-slide-toggle.slide-toggle-small.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(7px)!important;top:3px!important}::ng-deep .custom-slide-toggle.slide-toggle-large.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(-7px)!important;top:6px!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#768fed!important;border-color:#768fed!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#768fed!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#768fed!important;border-color:#768fed!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#768fed!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-accent.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#37c1ce!important;border-color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-accent.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#37c1ce!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-warn.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#e854a4!important;border-color:#e854a4!important}::ng-deep .custom-slide-toggle.mat-warn.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#e854a4!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled .mdc-switch__track{background-color:#c3c5d1!important;border-color:#c3c5d1!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#c3c5d1!important;border-color:#c3c5d1!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled .mdc-switch__handle{background-color:#c3c5d1!important}.custom-slide-toggle .mdc-switch__track{border-color:#c3c5d1!important}::ng-deep .custom-slide-toggle:not(.mat-mdc-slide-toggle-checked) .mdc-switch__track{border:2px solid #C3C5D1!important;background-color:#fff!important}.custom-slide-toggle .mdc-switch__ripple{background-color:#5473e81f!important}.custom-slide-toggle:hover .mdc-switch__ripple{background-color:#5473e83d!important}.custom-slide-toggle .mdc-form-field>label{color:var(--Greys-700, #4B4F62)!important;font-family:var(--Label-Large-Font, Roboto)!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;line-height:20px!important;letter-spacing:.1px!important}.slide-toggle-label-main{color:var(--Greys-700, #4B4F62)!important;font-family:var(--Label-Large-Font, Roboto)!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;line-height:20px!important;letter-spacing:.1px!important;margin-left:8px}.slide-toggle-label-helper{color:var(--Greys-500, #A2A6B8)!important;font-family:var(--Label-Medium-Font, Roboto)!important;font-size:12px!important;font-style:normal!important;font-weight:400!important;line-height:12px!important;letter-spacing:.5px!important;margin-top:4px!important;margin-left:8px}.custom-slide-toggle .mdc-switch__handle{transition:transform .2s ease!important}.custom-slide-toggle .mdc-switch__track{transition:background-color .2s ease,border-color .2s ease!important}.slide-toggle-custom-icon{font-size:18px!important;color:#5473e8!important;display:flex!important;align-items:center!important;justify-content:center!important;width:24px!important;height:24px!important;font-family:Material Icons!important;font-weight:400!important;font-style:normal!important;line-height:1!important;letter-spacing:normal!important;text-transform:none!important;white-space:nowrap!important;word-wrap:normal!important;direction:ltr!important;-webkit-font-feature-settings:\"liga\"!important;-webkit-font-smoothing:antialiased!important;text-rendering:optimizeLegibility!important;-moz-osx-font-smoothing:grayscale!important}::ng-deep .custom-slide-toggle.slide-toggle-small .slide-toggle-custom-icon{font-size:14px!important;width:18px!important;height:18px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .slide-toggle-custom-icon{font-size:18px!important;width:24px!important;height:24px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .slide-toggle-custom-icon{font-size:22px!important;width:28px!important;height:28px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon{position:relative!important;border-radius:50%!important;transition:all .2s ease!important;cursor:pointer!important;padding:4px!important;margin:-4px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}::ng-deep .custom-slide-toggle .mdc-switch__handle:hover .slide-toggle-custom-icon{background-color:#71779326!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:hover,::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:focus{background-color:#71779326!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:active{background-color:#71779340!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:before{content:\"\"!important;position:absolute!important;top:50%!important;left:50%!important;width:calc(100% + 8px)!important;height:calc(100% + 8px)!important;background-color:#71779326!important;border-radius:50%!important;transform:translate(-50%,-50%) scale(0)!important;transition:transform .3s ease!important;pointer-events:none!important;z-index:-1!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:active:before{transform:translate(-50%,-50%) scale(1)!important}::ng-deep .mdc-switch__icon{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mat-slide-toggle-thumb{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mdc-switch__handle{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mdc-switch__icon--on,::ng-deep .mdc-switch__icon--off{display:none!important}::ng-deep .mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle:after{background:#e5e9fc!important}::ng-deep .mdc-switch--selected:enabled .mdc-switch__handle:after{background:#e5e9fc!important}::ng-deep .mdc-switch:not(.mdc-switch--selected):enabled:focus:not(:active) .mdc-switch__handle:after{background:#717793!important}::ng-deep .mdc-switch:not(.mdc-switch--selected):enabled:focus:not(:active) .mdc-switch__track:before{background:#fff!important}::ng-deep .custom-slide-toggle.mat-warn .mdc-switch:enabled:focus:not(:active) .mdc-switch__track:after{background:#e854a4!important}::ng-deep .mdc-switch__track:after{background-color:#e854a4!important}::ng-deep .custom-slide-toggle.mat-accent .mdc-switch__track:after{background-color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-primary .mdc-switch__track:after{background-color:#768fed!important}::ng-deep .mdc-switch__track:before{background-color:#fff!important}::ng-deep .custom-slide-toggle:not(.mat-mdc-slide-toggle-checked) .slide-toggle-custom-icon{color:#fff!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#768fed!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#768fed!important}::ng-deep .custom-slide-toggle.mat-accent.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-warn.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#e854a4!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }] }); }
|
|
1030
|
+
}
|
|
1031
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SlideToggleComponent, decorators: [{
|
|
1032
|
+
type: Component,
|
|
1033
|
+
args: [{ selector: 'al-slide-toggle', standalone: true, imports: [CommonModule, MatSlideToggleModule, MatIconModule], providers: [
|
|
1034
|
+
{
|
|
1035
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1036
|
+
useExisting: forwardRef(() => SlideToggleComponent),
|
|
1037
|
+
multi: true
|
|
1038
|
+
}
|
|
1039
|
+
], template: "<div class=\"slide-toggle-container\">\n <mat-slide-toggle #slideToggle [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\" [required]=\"required\"\n [color]=\"color\" (change)=\"handleChange($event)\" (focus)=\"handleFocus($event)\" (blur)=\"handleBlur($event)\"\n class=\"custom-slide-toggle\" [class.slide-toggle-small]=\"size === 'small'\"\n [class.slide-toggle-medium]=\"size === 'medium'\" [class.slide-toggle-large]=\"size === 'large'\">\n <div *ngIf=\"showLabels\" class=\"slide-toggle-labels\">\n <div *ngIf=\"labelText\" class=\"slide-toggle-label-main\">\n {{ labelText }}\n </div>\n <div *ngIf=\"helperTextLabel\" class=\"slide-toggle-label-helper\">\n {{ helperTextLabel }}\n </div>\n </div>\n <ng-content></ng-content>\n </mat-slide-toggle>\n</div>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";.slide-toggle-container{position:relative;display:inline-block}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch{width:52px!important;height:32px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch__track{width:52px!important;height:32px!important;border-radius:16px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .mdc-switch__handle{width:22px!important;height:22px!important;border-radius:50%!important;top:16px!important;left:4px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch{width:40px!important;height:24px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch__track{width:40px!important;height:24px!important;border-radius:12px!important}::ng-deep .custom-slide-toggle.slide-toggle-small .mdc-switch__handle{width:18px!important;height:18px!important;border-radius:50%!important;top:12px!important;left:3px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch{width:64px!important;height:40px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch__track{width:64px!important;height:40px!important;border-radius:20px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .mdc-switch__handle{width:28px!important;height:28px!important;border-radius:50%!important;top:20px!important;left:6px!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(2px)!important;top:5px!important}::ng-deep .custom-slide-toggle.slide-toggle-small.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(7px)!important;top:3px!important}::ng-deep .custom-slide-toggle.slide-toggle-large.mat-mdc-slide-toggle-checked .mdc-switch__handle{transform:translate(-7px)!important;top:6px!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#768fed!important;border-color:#768fed!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#768fed!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#768fed!important;border-color:#768fed!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#768fed!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-accent.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#37c1ce!important;border-color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-accent.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#37c1ce!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-warn.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#e854a4!important;border-color:#e854a4!important}::ng-deep .custom-slide-toggle.mat-warn.mat-mdc-slide-toggle-checked .mdc-switch__handle-track{background-color:#e854a4!important;border-radius:75px;left:-11px;height:0!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled .mdc-switch__track{background-color:#c3c5d1!important;border-color:#c3c5d1!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled.mat-mdc-slide-toggle-checked .mdc-switch__track{background-color:#c3c5d1!important;border-color:#c3c5d1!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-disabled .mdc-switch__handle{background-color:#c3c5d1!important}.custom-slide-toggle .mdc-switch__track{border-color:#c3c5d1!important}::ng-deep .custom-slide-toggle:not(.mat-mdc-slide-toggle-checked) .mdc-switch__track{border:2px solid #C3C5D1!important;background-color:#fff!important}.custom-slide-toggle .mdc-switch__ripple{background-color:#5473e81f!important}.custom-slide-toggle:hover .mdc-switch__ripple{background-color:#5473e83d!important}.custom-slide-toggle .mdc-form-field>label{color:var(--Greys-700, #4B4F62)!important;font-family:var(--Label-Large-Font, Roboto)!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;line-height:20px!important;letter-spacing:.1px!important}.slide-toggle-label-main{color:var(--Greys-700, #4B4F62)!important;font-family:var(--Label-Large-Font, Roboto)!important;font-size:14px!important;font-style:normal!important;font-weight:500!important;line-height:20px!important;letter-spacing:.1px!important;margin-left:8px}.slide-toggle-label-helper{color:var(--Greys-500, #A2A6B8)!important;font-family:var(--Label-Medium-Font, Roboto)!important;font-size:12px!important;font-style:normal!important;font-weight:400!important;line-height:12px!important;letter-spacing:.5px!important;margin-top:4px!important;margin-left:8px}.custom-slide-toggle .mdc-switch__handle{transition:transform .2s ease!important}.custom-slide-toggle .mdc-switch__track{transition:background-color .2s ease,border-color .2s ease!important}.slide-toggle-custom-icon{font-size:18px!important;color:#5473e8!important;display:flex!important;align-items:center!important;justify-content:center!important;width:24px!important;height:24px!important;font-family:Material Icons!important;font-weight:400!important;font-style:normal!important;line-height:1!important;letter-spacing:normal!important;text-transform:none!important;white-space:nowrap!important;word-wrap:normal!important;direction:ltr!important;-webkit-font-feature-settings:\"liga\"!important;-webkit-font-smoothing:antialiased!important;text-rendering:optimizeLegibility!important;-moz-osx-font-smoothing:grayscale!important}::ng-deep .custom-slide-toggle.slide-toggle-small .slide-toggle-custom-icon{font-size:14px!important;width:18px!important;height:18px!important}::ng-deep .custom-slide-toggle.slide-toggle-medium .slide-toggle-custom-icon{font-size:18px!important;width:24px!important;height:24px!important}::ng-deep .custom-slide-toggle.slide-toggle-large .slide-toggle-custom-icon{font-size:22px!important;width:28px!important;height:28px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon{position:relative!important;border-radius:50%!important;transition:all .2s ease!important;cursor:pointer!important;padding:4px!important;margin:-4px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}::ng-deep .custom-slide-toggle .mdc-switch__handle:hover .slide-toggle-custom-icon{background-color:#71779326!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:hover,::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:focus{background-color:#71779326!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:active{background-color:#71779340!important;border-radius:50%!important;padding:4px!important;margin:-4px!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:before{content:\"\"!important;position:absolute!important;top:50%!important;left:50%!important;width:calc(100% + 8px)!important;height:calc(100% + 8px)!important;background-color:#71779326!important;border-radius:50%!important;transform:translate(-50%,-50%) scale(0)!important;transition:transform .3s ease!important;pointer-events:none!important;z-index:-1!important}::ng-deep .custom-slide-toggle .slide-toggle-custom-icon:active:before{transform:translate(-50%,-50%) scale(1)!important}::ng-deep .mdc-switch__icon{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mat-slide-toggle-thumb{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mdc-switch__handle{display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mdc-switch__icon--on,::ng-deep .mdc-switch__icon--off{display:none!important}::ng-deep .mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle:after{background:#e5e9fc!important}::ng-deep .mdc-switch--selected:enabled .mdc-switch__handle:after{background:#e5e9fc!important}::ng-deep .mdc-switch:not(.mdc-switch--selected):enabled:focus:not(:active) .mdc-switch__handle:after{background:#717793!important}::ng-deep .mdc-switch:not(.mdc-switch--selected):enabled:focus:not(:active) .mdc-switch__track:before{background:#fff!important}::ng-deep .custom-slide-toggle.mat-warn .mdc-switch:enabled:focus:not(:active) .mdc-switch__track:after{background:#e854a4!important}::ng-deep .mdc-switch__track:after{background-color:#e854a4!important}::ng-deep .custom-slide-toggle.mat-accent .mdc-switch__track:after{background-color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-primary .mdc-switch__track:after{background-color:#768fed!important}::ng-deep .mdc-switch__track:before{background-color:#fff!important}::ng-deep .custom-slide-toggle:not(.mat-mdc-slide-toggle-checked) .slide-toggle-custom-icon{color:#fff!important}::ng-deep .custom-slide-toggle.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#768fed!important}::ng-deep .custom-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#768fed!important}::ng-deep .custom-slide-toggle.mat-accent.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#37c1ce!important}::ng-deep .custom-slide-toggle.mat-warn.mat-mdc-slide-toggle-checked .slide-toggle-custom-icon{color:#e854a4!important}\n"] }]
|
|
1040
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { checked: [{
|
|
1041
|
+
type: Input
|
|
1042
|
+
}], disabled: [{
|
|
1043
|
+
type: Input
|
|
1044
|
+
}], name: [{
|
|
1045
|
+
type: Input
|
|
1046
|
+
}], required: [{
|
|
1047
|
+
type: Input
|
|
1048
|
+
}], color: [{
|
|
1049
|
+
type: Input
|
|
1050
|
+
}], labelText: [{
|
|
1051
|
+
type: Input
|
|
1052
|
+
}], helperTextLabel: [{
|
|
1053
|
+
type: Input
|
|
1054
|
+
}], showLabels: [{
|
|
1055
|
+
type: Input
|
|
1056
|
+
}], onIcon: [{
|
|
1057
|
+
type: Input
|
|
1058
|
+
}], offIcon: [{
|
|
1059
|
+
type: Input
|
|
1060
|
+
}], showIcons: [{
|
|
1061
|
+
type: Input
|
|
1062
|
+
}], size: [{
|
|
1063
|
+
type: Input
|
|
1064
|
+
}], change: [{
|
|
1065
|
+
type: Output
|
|
1066
|
+
}], focus: [{
|
|
1067
|
+
type: Output
|
|
1068
|
+
}], blur: [{
|
|
1069
|
+
type: Output
|
|
1070
|
+
}], element: [{
|
|
1071
|
+
type: ViewChild,
|
|
1072
|
+
args: ['slideToggle', { read: ElementRef }]
|
|
1073
|
+
}] } });
|
|
1074
|
+
|
|
1075
|
+
class SlideToggleModule {
|
|
1076
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SlideToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1077
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SlideToggleModule, imports: [CommonModule, SlideToggleComponent], exports: [SlideToggleComponent] }); }
|
|
1078
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SlideToggleModule, imports: [CommonModule, SlideToggleComponent] }); }
|
|
1079
|
+
}
|
|
1080
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SlideToggleModule, decorators: [{
|
|
1081
|
+
type: NgModule,
|
|
1082
|
+
args: [{
|
|
1083
|
+
imports: [CommonModule, SlideToggleComponent],
|
|
1084
|
+
exports: [SlideToggleComponent]
|
|
1085
|
+
}]
|
|
1086
|
+
}] });
|
|
1087
|
+
|
|
462
1088
|
/*
|
|
463
1089
|
* Public API Surface of allsorter-lib
|
|
464
1090
|
*/
|
|
@@ -467,5 +1093,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
467
1093
|
* Generated bundle index. Do not edit.
|
|
468
1094
|
*/
|
|
469
1095
|
|
|
470
|
-
export { AllsorterLibComponent, AllsorterLibService, ButtonComponent, ButtonModule, InputComponent, InputModule, ResumeHeaderComponent, ResumeHeaderModule };
|
|
1096
|
+
export { AllsorterLibComponent, AllsorterLibService, ButtonComponent, ButtonModule, CheckboxComponent, CheckboxModule, InputComponent, InputModule, LoaderComponent, LoaderModule, RadioComponent, RadioModule, ResumeHeaderComponent, ResumeHeaderModule, SlideToggleComponent, SlideToggleModule, ToggleButtonsComponent, ToggleButtonsModule };
|
|
471
1097
|
//# sourceMappingURL=allsorter-ui-components.mjs.map
|