ud-components 0.5.17 → 0.5.19
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1$2 from '@angular/common';
|
|
2
2
|
import { CommonModule, formatDate, NgClass, AsyncPipe, NgStyle, DatePipe, NgTemplateOutlet } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { ViewChild, Input, CUSTOM_ELEMENTS_SCHEMA, Component, Inject, Pipe, inject, EventEmitter, forwardRef, Output, HostBinding, Injectable, DestroyRef, TemplateRef, ContentChild, ViewContainerRef, Directive, ContentChildren, Optional, input, effect, ViewChildren, output, signal, ElementRef, computed, HostListener } from '@angular/core';
|
|
4
|
+
import { ViewChild, Input, CUSTOM_ELEMENTS_SCHEMA, Component, Inject, Pipe, inject, EventEmitter, forwardRef, Output, HostBinding, Injectable, DestroyRef, TemplateRef, ContentChild, ViewContainerRef, Directive, ContentChildren, Optional, input, effect, ViewChildren, output, signal, ElementRef, viewChild, computed, HostListener } from '@angular/core';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { FormsModule, ControlContainer, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup, FormControl, FormGroupDirective, Validators } from '@angular/forms';
|
|
7
7
|
import * as i1$1 from '@angular/material/snack-bar';
|
|
@@ -35,7 +35,7 @@ import { isEqual } from 'lodash-es';
|
|
|
35
35
|
import { map as map$1 } from 'rxjs/operators';
|
|
36
36
|
import * as i2$2 from 'ngx-skeleton-loader';
|
|
37
37
|
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
|
|
38
|
-
import * as i2$
|
|
38
|
+
import * as i2$6 from 'ngx-file-drop';
|
|
39
39
|
import { NgxFileDropModule } from 'ngx-file-drop';
|
|
40
40
|
import * as i1$4 from '@angular/material/dialog';
|
|
41
41
|
import { MAT_DIALOG_DATA, MatDialogContent, MatDialogConfig, MatDialog } from '@angular/material/dialog';
|
|
@@ -43,11 +43,15 @@ import * as i2$3 from '@angular/material/autocomplete';
|
|
|
43
43
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
44
44
|
import * as i2$4 from '@angular/cdk/text-field';
|
|
45
45
|
import { TextFieldModule } from '@angular/cdk/text-field';
|
|
46
|
+
import * as i2$5 from '@angular/material/timepicker';
|
|
47
|
+
import { MatTimepickerModule } from '@angular/material/timepicker';
|
|
46
48
|
import * as i1$5 from '@angular/platform-browser';
|
|
47
49
|
import * as i1$6 from '@angular/material/stepper';
|
|
48
50
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
49
51
|
import { MatFormField as MatFormField$1 } from '@angular/material/form-field';
|
|
50
52
|
import { ENTER, COMMA } from '@angular/cdk/keycodes';
|
|
53
|
+
import { Overlay } from '@angular/cdk/overlay';
|
|
54
|
+
import { TemplatePortal } from '@angular/cdk/portal';
|
|
51
55
|
import { signalStoreFeature, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
|
|
52
56
|
|
|
53
57
|
class CarouselComponent {
|
|
@@ -125,10 +129,10 @@ class CarouselComponent {
|
|
|
125
129
|
goTo(index) {
|
|
126
130
|
this.swiperRef.nativeElement.swiper.slideTo(index);
|
|
127
131
|
}
|
|
128
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
129
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
132
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
133
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CarouselComponent, isStandalone: true, selector: "ud-carousel", inputs: { pictures: "pictures", height: "height", direction: "direction", autoplay: "autoplay", objectFit: "objectFit" }, viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["swiperRef"], descendants: true }, { propertyName: "lightboxBackdrop", first: true, predicate: ["lightboxBackdrop"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-carousel\">\n <swiper-container\n #swiperRef\n init=\"false\"\n [slidesPerView]=\"1\"\n [pagination]=\"false\"\n [direction]=\"direction\"\n [style.height.px]=\"height\">\n @for (picture of pictures; track $index) {\n <swiper-slide>\n <img\n [src]=\"picture\"\n alt=\"Slide {{ $index + 1 }}\"\n [style.object-fit]=\"objectFit\"\n (click)=\"openLightbox($index)\"\n class=\"ud-slide-img\" />\n </swiper-slide>\n }\n </swiper-container>\n\n <button class=\"ud-nav ud-nav-prev\" (click)=\"prev()\" aria-label=\"Previous slide\">\n <span class=\"material-icons-outlined\">chevron_left</span>\n </button>\n <button class=\"ud-nav ud-nav-next\" (click)=\"next()\" aria-label=\"Next slide\">\n <span class=\"material-icons-outlined\">chevron_right</span>\n </button>\n\n <div class=\"ud-pagination\">\n @for (picture of pictures; track $index) {\n <button\n class=\"ud-dot\"\n [class.active]=\"activeIndex === $index\"\n (click)=\"goTo($index)\"\n [attr.aria-label]=\"'Go to slide ' + ($index + 1)\">\n </button>\n }\n </div>\n</div>\n\n@if (lightboxOpen) {\n <div\n #lightboxBackdrop\n class=\"ud-lightbox-backdrop\"\n (click)=\"closeLightbox()\"\n (keydown)=\"onLightboxKeydown($event)\"\n tabindex=\"0\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Image fullscreen view\">\n\n <button class=\"ud-lightbox-close\" (click)=\"closeLightbox()\" aria-label=\"Close\">\n <span class=\"material-icons-outlined\">close</span>\n </button>\n\n <button\n class=\"ud-lightbox-nav ud-lightbox-prev\"\n (click)=\"$event.stopPropagation(); lightboxPrev()\"\n aria-label=\"Previous image\">\n <span class=\"material-icons-outlined\">chevron_left</span>\n </button>\n\n <div class=\"ud-lightbox-img-wrap\" (click)=\"$event.stopPropagation()\">\n <img\n [src]=\"pictures[lightboxIndex!]\"\n alt=\"Fullscreen image {{ lightboxIndex! + 1 }}\"\n class=\"ud-lightbox-img\" />\n </div>\n\n <button\n class=\"ud-lightbox-nav ud-lightbox-next\"\n (click)=\"$event.stopPropagation(); lightboxNext()\"\n aria-label=\"Next image\">\n <span class=\"material-icons-outlined\">chevron_right</span>\n </button>\n\n <div class=\"ud-lightbox-counter\">\n {{ lightboxIndex! + 1 }} / {{ pictures.length }}\n </div>\n </div>\n}\n", styles: [":host{display:block;width:100%}.ud-carousel{position:relative;width:100%;border-radius:12px;overflow:hidden}.ud-carousel:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,rgba(15,20,30,.6) 0%,transparent 100%);border-radius:0 0 12px 12px;pointer-events:none;z-index:5}swiper-container{width:100%;border-radius:12px}swiper-slide{display:flex;justify-content:center;align-items:center;background:#1b2535;overflow:hidden}swiper-slide .ud-slide-img{display:block;width:100%;height:100%;cursor:zoom-in}.ud-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:none;background:#0f141e73;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;cursor:pointer;opacity:.8;transition:background .2s ease,opacity .2s ease,transform .2s ease}.ud-nav span{font-size:22px;line-height:1;display:flex}.ud-nav:hover{background:#0f141ed1;opacity:1;transform:translateY(-50%) scale(1.08)}.ud-nav.ud-nav-prev{left:12px}.ud-nav.ud-nav-next{right:12px}.ud-lightbox-backdrop{position:fixed;inset:0;z-index:1000;background:#000000e0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:ud-lightbox-in .2s ease;outline:none}@keyframes ud-lightbox-in{0%{opacity:0}to{opacity:1}}.ud-lightbox-img-wrap{max-width:calc(100vw - 120px);max-height:calc(100vh - 80px);display:flex;align-items:center;justify-content:center}.ud-lightbox-img{max-width:100%;max-height:calc(100vh - 80px);border-radius:10px;box-shadow:0 24px 64px #0009;object-fit:contain;display:block;animation:ud-lightbox-scale-in .22s cubic-bezier(.34,1.56,.64,1)}@keyframes ud-lightbox-scale-in{0%{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}.ud-lightbox-close{position:fixed;top:20px;right:20px;z-index:1001;width:44px;height:44px;border-radius:50%;border:none;background:#ffffff1f;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease}.ud-lightbox-close span{font-size:22px}.ud-lightbox-close:hover{background:#ffffff38;transform:scale(1.1)}.ud-lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:1001;width:52px;height:52px;border-radius:50%;border:none;background:#ffffff1f;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease}.ud-lightbox-nav span{font-size:28px}.ud-lightbox-nav:hover{background:#ffffff38}.ud-lightbox-nav.ud-lightbox-prev{left:16px}.ud-lightbox-nav.ud-lightbox-prev:hover{transform:translateY(-50%) scale(1.08)}.ud-lightbox-nav.ud-lightbox-next{right:16px}.ud-lightbox-nav.ud-lightbox-next:hover{transform:translateY(-50%) scale(1.08)}.ud-lightbox-counter{position:fixed;bottom:20px;left:50%;transform:translate(-50%);color:#ffffffb3;font-size:14px;font-weight:500;letter-spacing:.05em;z-index:1001}.ud-pagination{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;z-index:10}.ud-dot{display:block;height:8px;width:8px;border-radius:100px;border:none;padding:0;background:#ffffff73;cursor:pointer;transition:width .3s cubic-bezier(.34,1.56,.64,1),background .25s ease}.ud-dot.active{width:28px;background:#fff}.ud-dot:hover:not(.active){background:#ffffffbf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
130
134
|
}
|
|
131
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
135
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CarouselComponent, decorators: [{
|
|
132
136
|
type: Component,
|
|
133
137
|
args: [{ selector: 'ud-carousel', imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"ud-carousel\">\n <swiper-container\n #swiperRef\n init=\"false\"\n [slidesPerView]=\"1\"\n [pagination]=\"false\"\n [direction]=\"direction\"\n [style.height.px]=\"height\">\n @for (picture of pictures; track $index) {\n <swiper-slide>\n <img\n [src]=\"picture\"\n alt=\"Slide {{ $index + 1 }}\"\n [style.object-fit]=\"objectFit\"\n (click)=\"openLightbox($index)\"\n class=\"ud-slide-img\" />\n </swiper-slide>\n }\n </swiper-container>\n\n <button class=\"ud-nav ud-nav-prev\" (click)=\"prev()\" aria-label=\"Previous slide\">\n <span class=\"material-icons-outlined\">chevron_left</span>\n </button>\n <button class=\"ud-nav ud-nav-next\" (click)=\"next()\" aria-label=\"Next slide\">\n <span class=\"material-icons-outlined\">chevron_right</span>\n </button>\n\n <div class=\"ud-pagination\">\n @for (picture of pictures; track $index) {\n <button\n class=\"ud-dot\"\n [class.active]=\"activeIndex === $index\"\n (click)=\"goTo($index)\"\n [attr.aria-label]=\"'Go to slide ' + ($index + 1)\">\n </button>\n }\n </div>\n</div>\n\n@if (lightboxOpen) {\n <div\n #lightboxBackdrop\n class=\"ud-lightbox-backdrop\"\n (click)=\"closeLightbox()\"\n (keydown)=\"onLightboxKeydown($event)\"\n tabindex=\"0\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Image fullscreen view\">\n\n <button class=\"ud-lightbox-close\" (click)=\"closeLightbox()\" aria-label=\"Close\">\n <span class=\"material-icons-outlined\">close</span>\n </button>\n\n <button\n class=\"ud-lightbox-nav ud-lightbox-prev\"\n (click)=\"$event.stopPropagation(); lightboxPrev()\"\n aria-label=\"Previous image\">\n <span class=\"material-icons-outlined\">chevron_left</span>\n </button>\n\n <div class=\"ud-lightbox-img-wrap\" (click)=\"$event.stopPropagation()\">\n <img\n [src]=\"pictures[lightboxIndex!]\"\n alt=\"Fullscreen image {{ lightboxIndex! + 1 }}\"\n class=\"ud-lightbox-img\" />\n </div>\n\n <button\n class=\"ud-lightbox-nav ud-lightbox-next\"\n (click)=\"$event.stopPropagation(); lightboxNext()\"\n aria-label=\"Next image\">\n <span class=\"material-icons-outlined\">chevron_right</span>\n </button>\n\n <div class=\"ud-lightbox-counter\">\n {{ lightboxIndex! + 1 }} / {{ pictures.length }}\n </div>\n </div>\n}\n", styles: [":host{display:block;width:100%}.ud-carousel{position:relative;width:100%;border-radius:12px;overflow:hidden}.ud-carousel:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,rgba(15,20,30,.6) 0%,transparent 100%);border-radius:0 0 12px 12px;pointer-events:none;z-index:5}swiper-container{width:100%;border-radius:12px}swiper-slide{display:flex;justify-content:center;align-items:center;background:#1b2535;overflow:hidden}swiper-slide .ud-slide-img{display:block;width:100%;height:100%;cursor:zoom-in}.ud-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:none;background:#0f141e73;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;cursor:pointer;opacity:.8;transition:background .2s ease,opacity .2s ease,transform .2s ease}.ud-nav span{font-size:22px;line-height:1;display:flex}.ud-nav:hover{background:#0f141ed1;opacity:1;transform:translateY(-50%) scale(1.08)}.ud-nav.ud-nav-prev{left:12px}.ud-nav.ud-nav-next{right:12px}.ud-lightbox-backdrop{position:fixed;inset:0;z-index:1000;background:#000000e0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:ud-lightbox-in .2s ease;outline:none}@keyframes ud-lightbox-in{0%{opacity:0}to{opacity:1}}.ud-lightbox-img-wrap{max-width:calc(100vw - 120px);max-height:calc(100vh - 80px);display:flex;align-items:center;justify-content:center}.ud-lightbox-img{max-width:100%;max-height:calc(100vh - 80px);border-radius:10px;box-shadow:0 24px 64px #0009;object-fit:contain;display:block;animation:ud-lightbox-scale-in .22s cubic-bezier(.34,1.56,.64,1)}@keyframes ud-lightbox-scale-in{0%{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}.ud-lightbox-close{position:fixed;top:20px;right:20px;z-index:1001;width:44px;height:44px;border-radius:50%;border:none;background:#ffffff1f;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease}.ud-lightbox-close span{font-size:22px}.ud-lightbox-close:hover{background:#ffffff38;transform:scale(1.1)}.ud-lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:1001;width:52px;height:52px;border-radius:50%;border:none;background:#ffffff1f;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease}.ud-lightbox-nav span{font-size:28px}.ud-lightbox-nav:hover{background:#ffffff38}.ud-lightbox-nav.ud-lightbox-prev{left:16px}.ud-lightbox-nav.ud-lightbox-prev:hover{transform:translateY(-50%) scale(1.08)}.ud-lightbox-nav.ud-lightbox-next{right:16px}.ud-lightbox-nav.ud-lightbox-next:hover{transform:translateY(-50%) scale(1.08)}.ud-lightbox-counter{position:fixed;bottom:20px;left:50%;transform:translate(-50%);color:#ffffffb3;font-size:14px;font-weight:500;letter-spacing:.05em;z-index:1001}.ud-pagination{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;z-index:10}.ud-dot{display:block;height:8px;width:8px;border-radius:100px;border:none;padding:0;background:#ffffff73;cursor:pointer;transition:width .3s cubic-bezier(.34,1.56,.64,1),background .25s ease}.ud-dot.active{width:28px;background:#fff}.ud-dot:hover:not(.active){background:#ffffffbf}\n"] }]
|
|
134
138
|
}], propDecorators: { pictures: [{
|
|
@@ -156,10 +160,10 @@ class CustomInputComponent {
|
|
|
156
160
|
name;
|
|
157
161
|
inputValue;
|
|
158
162
|
constructor() { }
|
|
159
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
160
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
163
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CustomInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
164
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CustomInputComponent, isStandalone: true, selector: "ud-input", inputs: { type: "type", placeholder: "placeholder", required: "required", name: "name", inputValue: "inputValue" }, ngImport: i0, template: "<div class=\"inputBox\">\n <input\n [type]=\"type\"\n [required]=\"required\"\n [placeholder]=\"placeholder ?? ''\"\n [(ngModel)]=\"inputValue\" />\n <span>{{ name }}</span>\n</div>\n", styles: [".inputBox{position:relative;width:250px}.inputBox input{width:100%;padding:10px;border:1px solid #000;background:#fafafa;border-radius:5px;outline:none;color:#fafafa;font-size:1em}.inputBox input:valid~span,.inputBox input:focus~span{color:#000;transform:translate(10px) translateY(-10px);font-size:1em;padding:0 10px;background:#fafafa;border-left:1px solid #000}.inputBox span{position:absolute;left:0;padding:10px;pointer-events:none;font-size:1em;color:#000;text-transform:uppercase;transition:.5s}*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
161
165
|
}
|
|
162
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
166
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CustomInputComponent, decorators: [{
|
|
163
167
|
type: Component,
|
|
164
168
|
args: [{ selector: 'ud-input', imports: [FormsModule], template: "<div class=\"inputBox\">\n <input\n [type]=\"type\"\n [required]=\"required\"\n [placeholder]=\"placeholder ?? ''\"\n [(ngModel)]=\"inputValue\" />\n <span>{{ name }}</span>\n</div>\n", styles: [".inputBox{position:relative;width:250px}.inputBox input{width:100%;padding:10px;border:1px solid #000;background:#fafafa;border-radius:5px;outline:none;color:#fafafa;font-size:1em}.inputBox input:valid~span,.inputBox input:focus~span{color:#000;transform:translate(10px) translateY(-10px);font-size:1em;padding:0 10px;background:#fafafa;border-left:1px solid #000}.inputBox span{position:absolute;left:0;padding:10px;pointer-events:none;font-size:1em;color:#000;text-transform:uppercase;transition:.5s}*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}\n"] }]
|
|
165
169
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
@@ -227,10 +231,10 @@ class CustomSnackbarComponent {
|
|
|
227
231
|
this.snackBarRef.dismiss();
|
|
228
232
|
}
|
|
229
233
|
SnackbarType = SnackbarType;
|
|
230
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
231
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
234
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CustomSnackbarComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: i1$1.MatSnackBarRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
235
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CustomSnackbarComponent, isStandalone: true, selector: "ud-custom-snackbar", ngImport: i0, template: "<div\n class=\"custom-snackbar\"\n [attr.data-type]=\"data.type\"\n (mouseenter)=\"pauseTimer()\"\n (mouseleave)=\"resumeTimer()\">\n <div class=\"snackbar-content\">\n <div class=\"snackbar-icon\">\n @switch (data.type) {\n @case (SnackbarType.SUCCESS) {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n @case (SnackbarType.ERROR) {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M12.5 7.5L7.5 12.5M7.5 7.5L12.5 12.5M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n @case (SnackbarType.WARNING) {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M10 6.66667V10M10 13.3333H10.0083M8.57465 3.21517L2.51132 13.3333C1.92535 14.3618 2.67592 15.6667 3.9368 15.6667H16.0632C17.3241 15.6667 18.0747 14.3618 17.4887 13.3333L11.4254 3.21517C10.8486 2.20371 9.15144 2.20371 8.57465 3.21517Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n @case (SnackbarType.INFO) {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M10 13.3333V10M10 6.66667H10.0083M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n }\n </div>\n\n <span class=\"snackbar-message\">{{ data.message }}</span>\n\n @if (data.action) {\n <button class=\"snackbar-action\" (click)=\"dismiss()\">\n {{ data.action }}\n </button>\n }\n\n <button class=\"snackbar-close\" (click)=\"dismiss()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M12 4L4 12M4 4L12 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" [style.width.%]=\"progress\"></div>\n </div>\n</div>\n", styles: [".custom-snackbar{display:flex;flex-direction:column;min-width:320px;max-width:500px;border-radius:12px;overflow:hidden;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a,0 0 0 1px #0000000d;background:#fff;transition:transform .2s ease,box-shadow .2s ease}.custom-snackbar:hover{transform:translateY(-2px);box-shadow:0 25px 30px -5px #00000026,0 15px 15px -5px #0000000f,0 0 0 1px #0000000d}.snackbar-content{display:flex;align-items:center;gap:12px;padding:16px}.snackbar-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px}.snackbar-message{flex:1;font-size:14px;font-weight:500;line-height:1.5;color:#1f2937}.snackbar-action{flex-shrink:0;padding:6px 12px;font-size:13px;font-weight:600;border:none;border-radius:6px;cursor:pointer;transition:all .15s ease;background:transparent}.snackbar-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:6px;cursor:pointer;transition:all .15s ease;background:transparent;color:#6b7280}.snackbar-close:hover{background:#0000000d;color:#374151}.progress-bar{height:4px;background:#00000014;position:relative}.progress-fill{height:100%;transition:width .1s linear;border-radius:0 2px 2px 0}.custom-snackbar[data-type=success]{border-top:3px solid #10b981}.custom-snackbar[data-type=success] .snackbar-icon,.custom-snackbar[data-type=success] .snackbar-action{color:#10b981}.custom-snackbar[data-type=success] .snackbar-action:hover{background:#10b9811a}.custom-snackbar[data-type=success] .progress-fill{background:#10b981}.custom-snackbar[data-type=error]{border-top:3px solid #ef4444}.custom-snackbar[data-type=error] .snackbar-icon,.custom-snackbar[data-type=error] .snackbar-action{color:#ef4444}.custom-snackbar[data-type=error] .snackbar-action:hover{background:#ef44441a}.custom-snackbar[data-type=error] .progress-fill{background:#ef4444}.custom-snackbar[data-type=warning]{border-top:3px solid #f59e0b}.custom-snackbar[data-type=warning] .snackbar-icon,.custom-snackbar[data-type=warning] .snackbar-action{color:#f59e0b}.custom-snackbar[data-type=warning] .snackbar-action:hover{background:#f59e0b1a}.custom-snackbar[data-type=warning] .progress-fill{background:#f59e0b}.custom-snackbar[data-type=info]{border-top:3px solid #3b82f6}.custom-snackbar[data-type=info] .snackbar-icon,.custom-snackbar[data-type=info] .snackbar-action{color:#3b82f6}.custom-snackbar[data-type=info] .snackbar-action:hover{background:#3b82f61a}.custom-snackbar[data-type=info] .progress-fill{background:#3b82f6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
232
236
|
}
|
|
233
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CustomSnackbarComponent, decorators: [{
|
|
234
238
|
type: Component,
|
|
235
239
|
args: [{ selector: 'ud-custom-snackbar', standalone: true, imports: [CommonModule], template: "<div\n class=\"custom-snackbar\"\n [attr.data-type]=\"data.type\"\n (mouseenter)=\"pauseTimer()\"\n (mouseleave)=\"resumeTimer()\">\n <div class=\"snackbar-content\">\n <div class=\"snackbar-icon\">\n @switch (data.type) {\n @case (SnackbarType.SUCCESS) {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n @case (SnackbarType.ERROR) {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M12.5 7.5L7.5 12.5M7.5 7.5L12.5 12.5M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n @case (SnackbarType.WARNING) {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M10 6.66667V10M10 13.3333H10.0083M8.57465 3.21517L2.51132 13.3333C1.92535 14.3618 2.67592 15.6667 3.9368 15.6667H16.0632C17.3241 15.6667 18.0747 14.3618 17.4887 13.3333L11.4254 3.21517C10.8486 2.20371 9.15144 2.20371 8.57465 3.21517Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n @case (SnackbarType.INFO) {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M10 13.3333V10M10 6.66667H10.0083M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n }\n </div>\n\n <span class=\"snackbar-message\">{{ data.message }}</span>\n\n @if (data.action) {\n <button class=\"snackbar-action\" (click)=\"dismiss()\">\n {{ data.action }}\n </button>\n }\n\n <button class=\"snackbar-close\" (click)=\"dismiss()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M12 4L4 12M4 4L12 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" [style.width.%]=\"progress\"></div>\n </div>\n</div>\n", styles: [".custom-snackbar{display:flex;flex-direction:column;min-width:320px;max-width:500px;border-radius:12px;overflow:hidden;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a,0 0 0 1px #0000000d;background:#fff;transition:transform .2s ease,box-shadow .2s ease}.custom-snackbar:hover{transform:translateY(-2px);box-shadow:0 25px 30px -5px #00000026,0 15px 15px -5px #0000000f,0 0 0 1px #0000000d}.snackbar-content{display:flex;align-items:center;gap:12px;padding:16px}.snackbar-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px}.snackbar-message{flex:1;font-size:14px;font-weight:500;line-height:1.5;color:#1f2937}.snackbar-action{flex-shrink:0;padding:6px 12px;font-size:13px;font-weight:600;border:none;border-radius:6px;cursor:pointer;transition:all .15s ease;background:transparent}.snackbar-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:6px;cursor:pointer;transition:all .15s ease;background:transparent;color:#6b7280}.snackbar-close:hover{background:#0000000d;color:#374151}.progress-bar{height:4px;background:#00000014;position:relative}.progress-fill{height:100%;transition:width .1s linear;border-radius:0 2px 2px 0}.custom-snackbar[data-type=success]{border-top:3px solid #10b981}.custom-snackbar[data-type=success] .snackbar-icon,.custom-snackbar[data-type=success] .snackbar-action{color:#10b981}.custom-snackbar[data-type=success] .snackbar-action:hover{background:#10b9811a}.custom-snackbar[data-type=success] .progress-fill{background:#10b981}.custom-snackbar[data-type=error]{border-top:3px solid #ef4444}.custom-snackbar[data-type=error] .snackbar-icon,.custom-snackbar[data-type=error] .snackbar-action{color:#ef4444}.custom-snackbar[data-type=error] .snackbar-action:hover{background:#ef44441a}.custom-snackbar[data-type=error] .progress-fill{background:#ef4444}.custom-snackbar[data-type=warning]{border-top:3px solid #f59e0b}.custom-snackbar[data-type=warning] .snackbar-icon,.custom-snackbar[data-type=warning] .snackbar-action{color:#f59e0b}.custom-snackbar[data-type=warning] .snackbar-action:hover{background:#f59e0b1a}.custom-snackbar[data-type=warning] .progress-fill{background:#f59e0b}.custom-snackbar[data-type=info]{border-top:3px solid #3b82f6}.custom-snackbar[data-type=info] .snackbar-icon,.custom-snackbar[data-type=info] .snackbar-action{color:#3b82f6}.custom-snackbar[data-type=info] .snackbar-action:hover{background:#3b82f61a}.custom-snackbar[data-type=info] .progress-fill{background:#3b82f6}\n"] }]
|
|
236
240
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -456,10 +460,10 @@ class CapitalizePipe {
|
|
|
456
460
|
transform(value) {
|
|
457
461
|
return value ? capitalize(value) : '';
|
|
458
462
|
}
|
|
459
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
460
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.
|
|
463
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
464
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: CapitalizePipe, isStandalone: true, name: "capitalize" });
|
|
461
465
|
}
|
|
462
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
466
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CapitalizePipe, decorators: [{
|
|
463
467
|
type: Pipe,
|
|
464
468
|
args: [{
|
|
465
469
|
name: 'capitalize',
|
|
@@ -474,10 +478,10 @@ class PluralizePipe {
|
|
|
474
478
|
: value
|
|
475
479
|
: '';
|
|
476
480
|
}
|
|
477
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
478
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.
|
|
481
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PluralizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
482
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: PluralizePipe, isStandalone: true, name: "pluralize" });
|
|
479
483
|
}
|
|
480
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
484
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PluralizePipe, decorators: [{
|
|
481
485
|
type: Pipe,
|
|
482
486
|
args: [{
|
|
483
487
|
name: 'pluralize',
|
|
@@ -488,10 +492,10 @@ class ToObservablePipe {
|
|
|
488
492
|
transform(value) {
|
|
489
493
|
return isObservable(value) ? value : of(value);
|
|
490
494
|
}
|
|
491
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
492
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.
|
|
495
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ToObservablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
496
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: ToObservablePipe, isStandalone: true, name: "toObservable" });
|
|
493
497
|
}
|
|
494
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
498
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ToObservablePipe, decorators: [{
|
|
495
499
|
type: Pipe,
|
|
496
500
|
args: [{
|
|
497
501
|
name: 'toObservable',
|
|
@@ -541,10 +545,10 @@ class DateRangeInputComponent {
|
|
|
541
545
|
}
|
|
542
546
|
}
|
|
543
547
|
}
|
|
544
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
545
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
548
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DateRangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
549
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: DateRangeInputComponent, isStandalone: true, selector: "ud-date-range-input", inputs: { startControlName: "startControlName", endControlName: "endControlName", label: "label", icon: "icon", iconFontSet: "iconFontSet", startPlaceholder: "startPlaceholder", endPlaceholder: "endPlaceholder", min: "min", max: "max", disabled: "disabled", hint: "hint" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"ud-input\"\n [class.ud-input--focused]=\"focused\"\n [class.ud-input--disabled]=\"startControl.disabled\">\n @if (label) {\n <label class=\"ud-input__label\">{{ label }}</label>\n }\n <div class=\"ud-input__wrapper\">\n @if (icon) {\n <mat-icon class=\"ud-input__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <mat-date-range-input\n class=\"ud-range-input\"\n [rangePicker]=\"picker\"\n [min]=\"min ?? null\"\n [max]=\"max ?? null\"\n (focusin)=\"focused = true\"\n (focusout)=\"focused = false\">\n <input matStartDate [formControlName]=\"startControlName\" [placeholder]=\"startPlaceholder\" />\n <input matEndDate [formControlName]=\"endControlName\" [placeholder]=\"endPlaceholder\" />\n </mat-date-range-input>\n <mat-datepicker-toggle class=\"ud-datepicker-toggle\" [for]=\"picker\">\n <mat-icon matDatepickerToggleIcon fontSet=\"material-icons-outlined\">calendar_month</mat-icon>\n </mat-datepicker-toggle>\n <mat-date-range-picker #picker />\n </div>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-range-input{flex:1;min-width:0;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548}.ud-range-input ::ng-deep .mat-date-range-input-container{font-family:DM Sans,system-ui,sans-serif;font-size:14px}.ud-range-input ::ng-deep .mat-date-range-input-separator{color:#9099a8;margin:0 4px}.ud-range-input ::ng-deep input.mat-date-range-input-inner{font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548}.ud-range-input ::ng-deep input.mat-date-range-input-inner::placeholder{color:#9099a8}.ud-datepicker-toggle{flex-shrink:0;margin-right:-4px}.ud-datepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{width:32px;height:32px;padding:4px;color:#6b7585;transition:color .18s ease}.ud-datepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base:hover{color:#1b2535}::ng-deep .mat-datepicker-content{border-radius:14px!important;box-shadow:0 0 0 1px #1b25350f,0 4px 6px -2px #1b25350d,0 20px 48px -4px #1b253529!important;overflow:hidden!important;border:none!important}::ng-deep .mat-datepicker-content .mat-calendar{font-family:DM Sans,system-ui,sans-serif!important;width:308px!important}::ng-deep .mat-datepicker-content .mat-calendar-header{background:linear-gradient(160deg,#1b2535,#253347)!important;padding:16px 12px 14px!important}::ng-deep .mat-datepicker-content .mat-calendar-controls{margin:0!important;align-items:center!important}::ng-deep .mat-datepicker-content .mat-calendar-period-button{color:#fff!important;font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;font-weight:600!important;border-radius:6px!important;padding:6px 10px!important;opacity:1!important}::ng-deep .mat-datepicker-content .mat-calendar-period-button:hover{background:#ffffff1f!important}::ng-deep .mat-datepicker-content .mat-calendar-arrow{fill:#ffffff8c!important}::ng-deep .mat-datepicker-content .mat-calendar-previous-button,::ng-deep .mat-datepicker-content .mat-calendar-next-button{color:#ffffffbf!important;border-radius:6px!important}::ng-deep .mat-datepicker-content .mat-calendar-previous-button:hover,::ng-deep .mat-datepicker-content .mat-calendar-next-button:hover{background:#ffffff1f!important;color:#fff!important}::ng-deep .mat-datepicker-content .mat-calendar-content{background:#fff!important;padding:12px 16px 18px!important}::ng-deep .mat-datepicker-content .mat-calendar-table-header th{font-family:DM Sans,system-ui,sans-serif!important;font-size:.67rem!important;font-weight:700!important;color:#6b7585!important;text-transform:uppercase!important;letter-spacing:.09em!important;padding-bottom:10px!important}::ng-deep .mat-datepicker-content .mat-calendar-table-header-divider:after{background:#c9cdd6!important;margin:0!important}::ng-deep .mat-datepicker-content .mat-calendar-body-cell-content{font-family:DM Sans,system-ui,sans-serif!important;font-size:.82rem!important;font-weight:500!important;color:#1b2535!important;border-radius:6px!important;border:none!important;transition:background .12s ease,color .12s ease!important}::ng-deep .mat-datepicker-content .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background:#1b253512!important}::ng-deep .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected)>.mat-calendar-body-cell-content{border:1.5px solid #1b2535!important;background:transparent!important;color:#1b2535!important;font-weight:700!important}::ng-deep .mat-datepicker-content .mat-calendar-body-selected{background:#1b2535!important;color:#fff!important;border-radius:6px!important;box-shadow:0 2px 8px #1b253547!important}::ng-deep .mat-datepicker-content .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:inset 0 0 0 1.5px #fff6,0 2px 8px #1b253547!important}::ng-deep .mat-datepicker-content .mat-calendar-body-in-range:before{background:#1b253512!important;border-radius:0!important}::ng-deep .mat-datepicker-content .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range):before,::ng-deep .mat-datepicker-content .mat-calendar-body-range-start:after{background:#1b253512!important;border-radius:6px 0 0 6px!important}::ng-deep .mat-datepicker-content .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range):before,::ng-deep .mat-datepicker-content .mat-calendar-body-range-end:after{background:#1b253512!important;border-radius:0 6px 6px 0!important}::ng-deep .mat-datepicker-content .mat-calendar-body-disabled>.mat-calendar-body-cell-content{color:#c9cdd6!important;font-weight:400!important}::ng-deep .mat-datepicker-content .mat-calendar-body-label{font-family:DM Sans,system-ui,sans-serif!important;font-size:.7rem!important;font-weight:700!important;color:#6b7585!important;text-transform:uppercase!important;letter-spacing:.08em!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
|
|
546
550
|
}
|
|
547
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
551
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DateRangeInputComponent, decorators: [{
|
|
548
552
|
type: Component,
|
|
549
553
|
args: [{ selector: 'ud-date-range-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatIcon, MatDatepickerModule], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div\n class=\"ud-input\"\n [class.ud-input--focused]=\"focused\"\n [class.ud-input--disabled]=\"startControl.disabled\">\n @if (label) {\n <label class=\"ud-input__label\">{{ label }}</label>\n }\n <div class=\"ud-input__wrapper\">\n @if (icon) {\n <mat-icon class=\"ud-input__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <mat-date-range-input\n class=\"ud-range-input\"\n [rangePicker]=\"picker\"\n [min]=\"min ?? null\"\n [max]=\"max ?? null\"\n (focusin)=\"focused = true\"\n (focusout)=\"focused = false\">\n <input matStartDate [formControlName]=\"startControlName\" [placeholder]=\"startPlaceholder\" />\n <input matEndDate [formControlName]=\"endControlName\" [placeholder]=\"endPlaceholder\" />\n </mat-date-range-input>\n <mat-datepicker-toggle class=\"ud-datepicker-toggle\" [for]=\"picker\">\n <mat-icon matDatepickerToggleIcon fontSet=\"material-icons-outlined\">calendar_month</mat-icon>\n </mat-datepicker-toggle>\n <mat-date-range-picker #picker />\n </div>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-range-input{flex:1;min-width:0;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548}.ud-range-input ::ng-deep .mat-date-range-input-container{font-family:DM Sans,system-ui,sans-serif;font-size:14px}.ud-range-input ::ng-deep .mat-date-range-input-separator{color:#9099a8;margin:0 4px}.ud-range-input ::ng-deep input.mat-date-range-input-inner{font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548}.ud-range-input ::ng-deep input.mat-date-range-input-inner::placeholder{color:#9099a8}.ud-datepicker-toggle{flex-shrink:0;margin-right:-4px}.ud-datepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{width:32px;height:32px;padding:4px;color:#6b7585;transition:color .18s ease}.ud-datepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base:hover{color:#1b2535}::ng-deep .mat-datepicker-content{border-radius:14px!important;box-shadow:0 0 0 1px #1b25350f,0 4px 6px -2px #1b25350d,0 20px 48px -4px #1b253529!important;overflow:hidden!important;border:none!important}::ng-deep .mat-datepicker-content .mat-calendar{font-family:DM Sans,system-ui,sans-serif!important;width:308px!important}::ng-deep .mat-datepicker-content .mat-calendar-header{background:linear-gradient(160deg,#1b2535,#253347)!important;padding:16px 12px 14px!important}::ng-deep .mat-datepicker-content .mat-calendar-controls{margin:0!important;align-items:center!important}::ng-deep .mat-datepicker-content .mat-calendar-period-button{color:#fff!important;font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;font-weight:600!important;border-radius:6px!important;padding:6px 10px!important;opacity:1!important}::ng-deep .mat-datepicker-content .mat-calendar-period-button:hover{background:#ffffff1f!important}::ng-deep .mat-datepicker-content .mat-calendar-arrow{fill:#ffffff8c!important}::ng-deep .mat-datepicker-content .mat-calendar-previous-button,::ng-deep .mat-datepicker-content .mat-calendar-next-button{color:#ffffffbf!important;border-radius:6px!important}::ng-deep .mat-datepicker-content .mat-calendar-previous-button:hover,::ng-deep .mat-datepicker-content .mat-calendar-next-button:hover{background:#ffffff1f!important;color:#fff!important}::ng-deep .mat-datepicker-content .mat-calendar-content{background:#fff!important;padding:12px 16px 18px!important}::ng-deep .mat-datepicker-content .mat-calendar-table-header th{font-family:DM Sans,system-ui,sans-serif!important;font-size:.67rem!important;font-weight:700!important;color:#6b7585!important;text-transform:uppercase!important;letter-spacing:.09em!important;padding-bottom:10px!important}::ng-deep .mat-datepicker-content .mat-calendar-table-header-divider:after{background:#c9cdd6!important;margin:0!important}::ng-deep .mat-datepicker-content .mat-calendar-body-cell-content{font-family:DM Sans,system-ui,sans-serif!important;font-size:.82rem!important;font-weight:500!important;color:#1b2535!important;border-radius:6px!important;border:none!important;transition:background .12s ease,color .12s ease!important}::ng-deep .mat-datepicker-content .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background:#1b253512!important}::ng-deep .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected)>.mat-calendar-body-cell-content{border:1.5px solid #1b2535!important;background:transparent!important;color:#1b2535!important;font-weight:700!important}::ng-deep .mat-datepicker-content .mat-calendar-body-selected{background:#1b2535!important;color:#fff!important;border-radius:6px!important;box-shadow:0 2px 8px #1b253547!important}::ng-deep .mat-datepicker-content .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:inset 0 0 0 1.5px #fff6,0 2px 8px #1b253547!important}::ng-deep .mat-datepicker-content .mat-calendar-body-in-range:before{background:#1b253512!important;border-radius:0!important}::ng-deep .mat-datepicker-content .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range):before,::ng-deep .mat-datepicker-content .mat-calendar-body-range-start:after{background:#1b253512!important;border-radius:6px 0 0 6px!important}::ng-deep .mat-datepicker-content .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range):before,::ng-deep .mat-datepicker-content .mat-calendar-body-range-end:after{background:#1b253512!important;border-radius:0 6px 6px 0!important}::ng-deep .mat-datepicker-content .mat-calendar-body-disabled>.mat-calendar-body-cell-content{color:#c9cdd6!important;font-weight:400!important}::ng-deep .mat-datepicker-content .mat-calendar-body-label{font-family:DM Sans,system-ui,sans-serif!important;font-size:.7rem!important;font-weight:700!important;color:#6b7585!important;text-transform:uppercase!important;letter-spacing:.08em!important}\n"] }]
|
|
550
554
|
}], propDecorators: { startControlName: [{
|
|
@@ -648,10 +652,10 @@ class MultiSelectComponent {
|
|
|
648
652
|
this.labelMap.clear();
|
|
649
653
|
this.options.forEach(o => this.labelMap.set(o.value, o.label));
|
|
650
654
|
}
|
|
651
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
652
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
655
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
656
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MultiSelectComponent, isStandalone: true, selector: "ud-multi-select", inputs: { controlName: "controlName", label: "label", icon: "icon", iconFontSet: "iconFontSet", options: "options", multiple: "multiple", maxChipsVisible: "maxChipsVisible", moreText: "moreText", loading: "loading", disabled: "disabled", hint: "hint" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-input\" [class.ud-input--disabled]=\"control.disabled\">\n @if (label) {\n <label class=\"ud-input__label\">{{ label }}</label>\n }\n <mat-form-field class=\"ud-ms-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (icon) {\n <mat-icon matPrefix [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n @if (loading) {\n <mat-icon matSuffix class=\"ud-loading-icon\" fontSet=\"material-icons-outlined\">sync</mat-icon>\n }\n <mat-select [formControlName]=\"controlName\" [multiple]=\"multiple\" panelClass=\"ud-select-panel\">\n <mat-select-trigger>\n <mat-chip-set class=\"ud-chip-trigger\" aria-label=\"Selected options\">\n @for (val of selectedValues.slice(0, maxChipsVisible); track val) {\n <mat-chip color=\"primary\" selected>{{ getLabelFor(val) }}</mat-chip>\n }\n @if (selectedValues.length > maxChipsVisible) {\n <mat-chip color=\"primary\">{{ getMoreText(selectedValues.length - maxChipsVisible) }}</mat-chip>\n }\n </mat-chip-set>\n </mat-select-trigger>\n @for (option of options; track option.value) {\n <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input--disabled{opacity:.6;cursor:not-allowed}::ng-deep .ud-ms-field{width:100%}::ng-deep .ud-ms-field .mat-mdc-text-field-wrapper{background:#f8fafc!important;padding:0 12px!important;transition:background .18s ease!important}::ng-deep .ud-ms-field:hover .mat-mdc-text-field-wrapper{background:#f3f6fa!important}::ng-deep .ud-ms-field.mat-focused .mat-mdc-text-field-wrapper{background:#fff!important}::ng-deep .ud-ms-field .mat-mdc-form-field-flex{align-items:center}::ng-deep .ud-ms-field .mat-mdc-form-field-infix{padding-top:9px!important;padding-bottom:9px!important;min-height:unset!important;border-top:0!important}::ng-deep .ud-ms-field .mdc-notched-outline__leading{border-color:#d8dde6!important;border-radius:8px 0 0 8px!important;min-width:8px!important;transition:border-color .18s ease!important}::ng-deep .ud-ms-field .mdc-notched-outline__notch{border-top:1px solid #d8dde6!important;border-bottom:1px solid #d8dde6!important;border-left:none!important;border-right:none!important;max-width:0!important;padding:0!important;transition:border-color .18s ease!important}::ng-deep .ud-ms-field .mdc-notched-outline__trailing{border-color:#d8dde6!important;border-radius:0 8px 8px 0!important;transition:border-color .18s ease!important}::ng-deep .ud-ms-field .mdc-notched-outline--notched .mdc-notched-outline__notch{border-left:none!important;max-width:0!important}::ng-deep .ud-ms-field.mat-focused .mdc-notched-outline__leading,::ng-deep .ud-ms-field.mat-focused .mdc-notched-outline__notch,::ng-deep .ud-ms-field.mat-focused .mdc-notched-outline__trailing{border-color:#1b2535!important;border-width:1.5px!important}::ng-deep .ud-ms-field.mat-focused .mat-mdc-text-field-wrapper{box-shadow:0 0 0 3px #1b253514!important;border-radius:8px!important}::ng-deep .ud-ms-field .mat-icon[matPrefix]{font-size:18px!important;width:18px!important;height:18px!important;color:#6b7585!important;margin-right:6px!important;transition:color .18s ease!important;padding:0!important}::ng-deep .ud-ms-field.mat-focused .mat-icon[matPrefix]{color:#1b2535!important}::ng-deep .ud-ms-field .mat-icon[matSuffix]{font-size:18px!important;width:18px!important;height:18px!important;color:#6b7585!important;align-self:center!important;padding:0!important}::ng-deep .ud-ms-field .mat-mdc-select-value,::ng-deep .ud-ms-field .mat-mdc-form-field-infix{font-family:DM Sans,system-ui,sans-serif!important;font-size:14px!important;color:#2a3548!important}::ng-deep .ud-ms-field .mat-mdc-select-arrow-wrapper{padding-left:2px}::ng-deep .ud-ms-field .mat-mdc-select-arrow{display:flex;align-items:center;justify-content:center}::ng-deep .ud-ms-field .mat-mdc-select-arrow svg{display:none}::ng-deep .ud-ms-field .mat-mdc-select-arrow:after{font-family:Material Icons Outlined,Material Icons,sans-serif;content:\"expand_more\";font-size:20px;line-height:1;color:#6b7585;display:block;transition:transform .2s ease,color .2s ease}::ng-deep .ud-ms-field .mat-mdc-select[aria-expanded=true] .mat-mdc-select-arrow:after{transform:rotate(180deg);color:#1b2535}::ng-deep .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}@keyframes ud-spin{to{transform:rotate(360deg)}}.ud-loading-icon{animation:ud-spin .8s linear infinite}::ng-deep .mat-mdc-chip.mat-mdc-standard-chip{background:#1b253514!important;color:#1b2535!important;font-family:DM Sans,system-ui,sans-serif;font-size:.78rem;font-weight:500;border:1px solid rgba(27,37,53,.18)!important;height:22px}::ng-deep .mat-mdc-chip.mat-mdc-standard-chip .mdc-evolution-chip__text-label{color:#1b2535!important;font-size:.78rem}::ng-deep .ud-ms-field.ud-ms-field .mat-mdc-form-field-infix{display:flex;align-items:center;padding-top:0!important;padding-bottom:0!important;background:transparent;min-height:40px!important}::ng-deep .ud-select-panel{background:#fff!important;border-radius:10px!important;box-shadow:0 8px 24px #1b25351f,0 2px 8px #1b25350f!important;padding:6px 0!important;overflow:hidden}::ng-deep .ud-select-panel .mat-mdc-option{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important;padding:0 1.25rem!important;min-height:44px!important;transition:background .12s ease}::ng-deep .ud-select-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background:#f4f5f7!important}::ng-deep .ud-select-panel .mat-mdc-option.mdc-list-item--selected{background:#1b25350d!important}::ng-deep .ud-select-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#1b2535!important;font-weight:600!important}::ng-deep .ud-select-panel .mat-mdc-option .mat-pseudo-checkbox-full{border-color:#c9cdd6!important;border-radius:4px!important;width:16px!important;height:16px!important}::ng-deep .ud-select-panel .mat-mdc-option .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{background:#1b2535!important;border-color:#1b2535!important}::ng-deep .ud-select-panel .mat-mdc-option .mat-pseudo-checkbox-full:after{color:#fff!important}::ng-deep .ud-select-panel .mat-mdc-option .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked:after{color:#1b2535!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: 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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
|
|
653
657
|
}
|
|
654
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
658
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
655
659
|
type: Component,
|
|
656
660
|
args: [{ selector: 'ud-multi-select', standalone: true, imports: [
|
|
657
661
|
CommonModule,
|
|
@@ -729,10 +733,10 @@ class TextInputComponent {
|
|
|
729
733
|
this.control.setValue(this.min !== undefined ? Math.max(next, this.min) : next);
|
|
730
734
|
this.control.markAsDirty();
|
|
731
735
|
}
|
|
732
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
733
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
736
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
737
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TextInputComponent, isStandalone: true, selector: "ud-text-input", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", type: "type", icon: "icon", iconFontSet: "iconFontSet", loading: "loading", step: "step", min: "min", max: "max", disabled: "disabled", hint: "hint", size: "size", clearable: "clearable" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"ud-input\"\n [class]=\"'ud-input--' + size\"\n [class.ud-input--focused]=\"focused\"\n [class.ud-input--disabled]=\"control.disabled\"\n [class.ud-input--error]=\"control.invalid && control.touched\">\n @if (label) {\n <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n }\n <div class=\"ud-input__wrapper\" [class.ud-input__wrapper--no-right-pad]=\"type === 'number'\">\n @if (icon) {\n <mat-icon class=\"ud-input__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <input\n class=\"ud-input__field\"\n [id]=\"'ud-input-' + controlName\"\n [formControlName]=\"controlName\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [min]=\"min ?? null\"\n [max]=\"max ?? null\"\n (focus)=\"focused = true\"\n (blur)=\"focused = false\" />\n @if (loading) {\n <mat-icon class=\"ud-input__suffix ud-input__loading\" fontSet=\"material-icons-outlined\">sync</mat-icon>\n } @else if (clearable && control.value) {\n <button type=\"button\" class=\"ud-input__clear-btn\" (mousedown)=\"$event.preventDefault(); control.reset()\">\n <mat-icon>close</mat-icon>\n </button>\n } @else if (type === 'number') {\n <div class=\"ud-number-arrows\">\n <button\n type=\"button\"\n class=\"ud-arrow-btn\"\n [disabled]=\"control.disabled\"\n (mousedown)=\"$event.preventDefault(); increment()\">\n <mat-icon fontSet=\"material-icons-outlined\">keyboard_arrow_up</mat-icon>\n </button>\n <button\n type=\"button\"\n class=\"ud-arrow-btn\"\n [disabled]=\"control.disabled\"\n (mousedown)=\"$event.preventDefault(); decrement()\">\n <mat-icon fontSet=\"material-icons-outlined\">keyboard_arrow_down</mat-icon>\n </button>\n </div>\n }\n </div>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:var(--eu-text, #2a3548);line-height:1}.ud-input__wrapper--no-right-pad{padding-right:0!important}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid var(--eu-border-mid, #d8dde6);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;overflow:hidden}.ud-input--focused .ud-input__wrapper{border-color:var(--eu-navy, #1b2535);box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:var(--eu-bg, #f4f5f7);border-color:var(--eu-border-light, #e8eaef);cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;color:var(--eu-muted, #6b7585);transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:var(--eu-navy, #1b2535)}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;color:var(--eu-text, #2a3548);width:100%}.ud-input__field::placeholder{color:var(--eu-muted, #9099a8)}.ud-input__field:disabled{cursor:not-allowed;color:var(--eu-muted, #9099a8)}.ud-input__field[type=number]{-moz-appearance:textfield}.ud-input__field[type=number]::-webkit-outer-spin-button,.ud-input__field[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ud-input__suffix{flex-shrink:0;color:var(--eu-muted, #6b7585)}.ud-input__loading{animation:ud-spin .8s linear infinite}@keyframes ud-spin{to{transform:rotate(360deg)}}.ud-input__clear-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--eu-muted, #6b7585);border-radius:50%;transition:color .15s ease,background .15s ease}.ud-input__clear-btn mat-icon{font-size:16px;width:16px;height:16px}.ud-input__clear-btn:hover{color:var(--eu-navy, #1b2535);background:#1b25350f}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:var(--eu-muted, #6b7585);line-height:1.3}.ud-number-arrows{display:flex;flex-direction:column;align-self:stretch;border-left:1px solid var(--eu-border-mid, #d8dde6);width:28px;overflow:hidden;flex-shrink:0}.ud-arrow-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--eu-muted, #6b7585);transition:background .15s ease,color .15s ease}.ud-arrow-btn:first-child{border-bottom:1px solid var(--eu-border-mid, #d8dde6)}.ud-arrow-btn:hover{background:#1b253512;color:var(--eu-navy, #1b2535)}.ud-arrow-btn:active{background:#1b253521}.ud-arrow-btn .mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.ud-input--small .ud-input__wrapper{height:32px;border-radius:7px;padding:0 10px;gap:6px}.ud-input--small .ud-input__field{font-size:13px}.ud-input--small .ud-input__icon,.ud-input--small .ud-input__suffix{font-size:16px;width:16px;height:16px}.ud-input--small .ud-input__label{padding-left:1px}.ud-input--medium .ud-input__wrapper{height:40px;border-radius:8px;padding:0 12px;gap:7px}.ud-input--medium .ud-input__field{font-size:14px}.ud-input--medium .ud-input__icon,.ud-input--medium .ud-input__suffix{font-size:18px;width:18px;height:18px}.ud-input--medium .ud-input__label{padding-left:1px}.ud-input--large .ud-input__wrapper{height:48px;border-radius:9px;padding:0 14px;gap:8px}.ud-input--large .ud-input__field{font-size:15px}.ud-input--large .ud-input__icon,.ud-input--large .ud-input__suffix{font-size:20px;width:20px;height:20px}.ud-input--large .ud-input__label{padding-left:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
|
|
734
738
|
}
|
|
735
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
739
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
736
740
|
type: Component,
|
|
737
741
|
args: [{ selector: 'ud-text-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatIcon], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div\n class=\"ud-input\"\n [class]=\"'ud-input--' + size\"\n [class.ud-input--focused]=\"focused\"\n [class.ud-input--disabled]=\"control.disabled\"\n [class.ud-input--error]=\"control.invalid && control.touched\">\n @if (label) {\n <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n }\n <div class=\"ud-input__wrapper\" [class.ud-input__wrapper--no-right-pad]=\"type === 'number'\">\n @if (icon) {\n <mat-icon class=\"ud-input__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <input\n class=\"ud-input__field\"\n [id]=\"'ud-input-' + controlName\"\n [formControlName]=\"controlName\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [min]=\"min ?? null\"\n [max]=\"max ?? null\"\n (focus)=\"focused = true\"\n (blur)=\"focused = false\" />\n @if (loading) {\n <mat-icon class=\"ud-input__suffix ud-input__loading\" fontSet=\"material-icons-outlined\">sync</mat-icon>\n } @else if (clearable && control.value) {\n <button type=\"button\" class=\"ud-input__clear-btn\" (mousedown)=\"$event.preventDefault(); control.reset()\">\n <mat-icon>close</mat-icon>\n </button>\n } @else if (type === 'number') {\n <div class=\"ud-number-arrows\">\n <button\n type=\"button\"\n class=\"ud-arrow-btn\"\n [disabled]=\"control.disabled\"\n (mousedown)=\"$event.preventDefault(); increment()\">\n <mat-icon fontSet=\"material-icons-outlined\">keyboard_arrow_up</mat-icon>\n </button>\n <button\n type=\"button\"\n class=\"ud-arrow-btn\"\n [disabled]=\"control.disabled\"\n (mousedown)=\"$event.preventDefault(); decrement()\">\n <mat-icon fontSet=\"material-icons-outlined\">keyboard_arrow_down</mat-icon>\n </button>\n </div>\n }\n </div>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:var(--eu-text, #2a3548);line-height:1}.ud-input__wrapper--no-right-pad{padding-right:0!important}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid var(--eu-border-mid, #d8dde6);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;overflow:hidden}.ud-input--focused .ud-input__wrapper{border-color:var(--eu-navy, #1b2535);box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:var(--eu-bg, #f4f5f7);border-color:var(--eu-border-light, #e8eaef);cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;color:var(--eu-muted, #6b7585);transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:var(--eu-navy, #1b2535)}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;color:var(--eu-text, #2a3548);width:100%}.ud-input__field::placeholder{color:var(--eu-muted, #9099a8)}.ud-input__field:disabled{cursor:not-allowed;color:var(--eu-muted, #9099a8)}.ud-input__field[type=number]{-moz-appearance:textfield}.ud-input__field[type=number]::-webkit-outer-spin-button,.ud-input__field[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ud-input__suffix{flex-shrink:0;color:var(--eu-muted, #6b7585)}.ud-input__loading{animation:ud-spin .8s linear infinite}@keyframes ud-spin{to{transform:rotate(360deg)}}.ud-input__clear-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--eu-muted, #6b7585);border-radius:50%;transition:color .15s ease,background .15s ease}.ud-input__clear-btn mat-icon{font-size:16px;width:16px;height:16px}.ud-input__clear-btn:hover{color:var(--eu-navy, #1b2535);background:#1b25350f}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:var(--eu-muted, #6b7585);line-height:1.3}.ud-number-arrows{display:flex;flex-direction:column;align-self:stretch;border-left:1px solid var(--eu-border-mid, #d8dde6);width:28px;overflow:hidden;flex-shrink:0}.ud-arrow-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--eu-muted, #6b7585);transition:background .15s ease,color .15s ease}.ud-arrow-btn:first-child{border-bottom:1px solid var(--eu-border-mid, #d8dde6)}.ud-arrow-btn:hover{background:#1b253512;color:var(--eu-navy, #1b2535)}.ud-arrow-btn:active{background:#1b253521}.ud-arrow-btn .mat-icon{font-size:14px;width:14px;height:14px;line-height:14px}.ud-input--small .ud-input__wrapper{height:32px;border-radius:7px;padding:0 10px;gap:6px}.ud-input--small .ud-input__field{font-size:13px}.ud-input--small .ud-input__icon,.ud-input--small .ud-input__suffix{font-size:16px;width:16px;height:16px}.ud-input--small .ud-input__label{padding-left:1px}.ud-input--medium .ud-input__wrapper{height:40px;border-radius:8px;padding:0 12px;gap:7px}.ud-input--medium .ud-input__field{font-size:14px}.ud-input--medium .ud-input__icon,.ud-input--medium .ud-input__suffix{font-size:18px;width:18px;height:18px}.ud-input--medium .ud-input__label{padding-left:1px}.ud-input--large .ud-input__wrapper{height:48px;border-radius:9px;padding:0 14px;gap:8px}.ud-input--large .ud-input__field{font-size:15px}.ud-input--large .ud-input__icon,.ud-input--large .ud-input__suffix{font-size:20px;width:20px;height:20px}.ud-input--large .ud-input__label{padding-left:1px}\n"] }]
|
|
738
742
|
}], propDecorators: { controlName: [{
|
|
@@ -831,8 +835,8 @@ class ToggleComponent {
|
|
|
831
835
|
setDisabledState(isDisabled) {
|
|
832
836
|
this.isDisabled = isDisabled;
|
|
833
837
|
}
|
|
834
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
835
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
838
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
839
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ToggleComponent, isStandalone: true, selector: "ud-toggle", inputs: { controlName: "controlName", size: "size", label: "label", labelPosition: "labelPosition", ariaLabel: "ariaLabel" }, outputs: { onChange: "onChange" }, host: { properties: { "class.size-sm": "this.isSm", "class.size-md": "this.isMd", "class.size-lg": "this.isLg" } }, providers: [
|
|
836
840
|
{
|
|
837
841
|
provide: NG_VALUE_ACCESSOR,
|
|
838
842
|
useExisting: forwardRef(() => ToggleComponent),
|
|
@@ -845,7 +849,7 @@ class ToggleComponent {
|
|
|
845
849
|
},
|
|
846
850
|
] });
|
|
847
851
|
}
|
|
848
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
852
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
849
853
|
type: Component,
|
|
850
854
|
args: [{ selector: 'ud-toggle', standalone: true, imports: [CommonModule], providers: [
|
|
851
855
|
{
|
|
@@ -915,10 +919,10 @@ class UdButtonComponent {
|
|
|
915
919
|
get isDisabled() {
|
|
916
920
|
return this.disabled || this.loading;
|
|
917
921
|
}
|
|
918
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
919
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
922
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: UdButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
923
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: UdButtonComponent, isStandalone: true, selector: "ud-button", inputs: { variant: "variant", color: "color", size: "size", type: "type", icon: "icon", iconPosition: "iconPosition", iconFontSet: "iconFontSet", loading: "loading", disabled: "disabled", fullWidth: "fullWidth" }, ngImport: i0, template: "@if (variant === 'flat') {\n <button\n mat-flat-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--flat ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--full-width]=\"fullWidth\"\n [class.ud-btn--loading]=\"loading\">\n <ng-container *ngTemplateOutlet=\"btnContent\" />\n </button>\n}\n\n@if (variant === 'stroked') {\n <button\n mat-stroked-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--stroked ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--full-width]=\"fullWidth\"\n [class.ud-btn--loading]=\"loading\">\n <ng-container *ngTemplateOutlet=\"btnContent\" />\n </button>\n}\n\n@if (variant === 'icon-only') {\n <button\n mat-icon-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--icon-only ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--loading]=\"loading\">\n @if (loading) {\n <mat-spinner diameter=\"16\" />\n } @else if (icon) {\n <mat-icon class=\"ud-btn__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n </button>\n}\n\n<ng-template #btnContent>\n @if (loading) {\n <mat-spinner class=\"ud-btn__spinner\" diameter=\"16\" />\n } @else if (icon && iconPosition === 'left') {\n <mat-icon class=\"ud-btn__icon ud-btn__icon--left\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <span class=\"ud-btn__label\"><ng-content /></span>\n @if (!loading && icon && iconPosition === 'right') {\n <mat-icon class=\"ud-btn__icon ud-btn__icon--right\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n</ng-template>\n", styles: [":host{display:inline-block}:host.full-width,:host .ud-btn--full-width{width:100%}.ud-btn{font-family:DM Sans,system-ui,sans-serif!important;font-weight:500!important;letter-spacing:0!important;border-radius:var(--eu-radius-sm, 6px)!important;transition:background .2s ease,box-shadow .2s ease,transform .15s ease,border-color .2s ease,color .2s ease!important;display:inline-flex!important;align-items:center;gap:.4rem}.ud-btn--full-width{width:100%}.ud-btn--sm{height:32px!important;font-size:.8rem!important;padding:0 .875rem!important}.ud-btn--md{height:40px!important;font-size:.875rem!important;padding:0 1.25rem!important}.ud-btn--lg{height:48px!important;font-size:.95rem!important;padding:0 1.75rem!important}.ud-btn--flat.ud-btn--primary{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:0 4px 14px #1b253538!important}.ud-btn--flat.ud-btn--primary:hover:not(:disabled){background:var(--eu-navy-soft, #253347)!important;box-shadow:0 6px 18px #1b25354d!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--primary:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--secondary{background:linear-gradient(180deg,#fff,#f4f6fa)!important;color:var(--eu-navy, #1b2535)!important;border:1px solid #b8c1ce!important;box-shadow:0 1px 3px #1b25351a!important}.ud-btn--flat.ud-btn--secondary:hover:not(:disabled){background:linear-gradient(180deg,#f7f9fb,#eaecf2)!important;border-color:var(--eu-navy, #1b2535)!important;box-shadow:0 2px 6px #1b253529!important}.ud-btn--flat.ud-btn--secondary:active:not(:disabled){background:#e8ecf2!important;box-shadow:0 1px 2px #1b253514!important}.ud-btn--flat.ud-btn--danger{background:#e53935!important;color:#fff!important;box-shadow:0 4px 14px #e539354d!important}.ud-btn--flat.ud-btn--danger:hover:not(:disabled){background:#c62828!important;box-shadow:0 6px 18px #e5393566!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--danger:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--success{background:#24a821!important;color:#fff!important;box-shadow:0 4px 14px #24a8214d!important}.ud-btn--flat.ud-btn--success:hover:not(:disabled){background:#1c881a!important;box-shadow:0 6px 18px #24a82166!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--success:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--warning{background:#f59e0b!important;color:#fff!important;box-shadow:0 4px 14px #f59e0b4d!important}.ud-btn--flat.ud-btn--warning:hover:not(:disabled){background:#d97706!important;box-shadow:0 6px 18px #f59e0b66!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--warning:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--info{background:#3b82f6!important;color:#fff!important;box-shadow:0 4px 14px #3b82f64d!important}.ud-btn--flat.ud-btn--info:hover:not(:disabled){background:#2563eb!important;box-shadow:0 6px 18px #3b82f666!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--info:active:not(:disabled){transform:translateY(0)!important}.ud-btn--stroked.ud-btn--primary{color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--primary:hover:not(:disabled){background:#1b25350d!important}.ud-btn--stroked.ud-btn--secondary{color:#4b5563!important;border-color:#8b96a5!important;background:transparent!important}.ud-btn--stroked.ud-btn--secondary:hover:not(:disabled){color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger{color:#e53935!important;border-color:#e53935!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger:hover:not(:disabled){background:#e539350d!important}.ud-btn--stroked.ud-btn--success{color:#24a821!important;border-color:#24a821!important;background:transparent!important}.ud-btn--stroked.ud-btn--success:hover:not(:disabled){background:#1c881a0f!important}.ud-btn--stroked.ud-btn--warning{color:#f59e0b!important;border-color:#f59e0b!important;background:transparent!important}.ud-btn--stroked.ud-btn--warning:hover:not(:disabled){background:#f59e0b0f!important}.ud-btn--stroked.ud-btn--info{color:#3b82f6!important;border-color:#3b82f6!important;background:transparent!important}.ud-btn--stroked.ud-btn--info:hover:not(:disabled){background:#3b82f60f!important}.ud-btn--icon-only{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important}.ud-btn--icon-only ::ng-deep .mdc-icon-button__state-layer,.ud-btn--icon-only ::ng-deep .mat-mdc-button-persistent-ripple{border-radius:var(--eu-radius-sm, 6px)!important}.ud-btn--icon-only ::ng-deep .mdc-icon-button__content,.ud-btn--icon-only ::ng-deep .mat-mdc-button-base{display:inline-flex!important;align-items:center!important;justify-content:center!important}.ud-btn--icon-only .ud-btn__icon{font-size:1.35em!important;width:1.35em!important;height:1.35em!important}.ud-btn--icon-only.ud-btn--icon-only--sm{width:32px!important;height:32px!important}.ud-btn--icon-only.ud-btn--icon-only--md{width:40px!important;height:40px!important}.ud-btn--icon-only.ud-btn--icon-only--lg{width:48px!important;height:48px!important}.ud-btn--icon-only.ud-btn--primary{color:var(--eu-navy, #1b2535)!important}.ud-btn--icon-only.ud-btn--primary:hover:not(:disabled){background:#1b25350f!important}.ud-btn--icon-only.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important}.ud-btn--icon-only.ud-btn--secondary:hover:not(:disabled){background:#1b25350a!important}.ud-btn--icon-only.ud-btn--danger{color:#e53935!important}.ud-btn--icon-only.ud-btn--danger:hover:not(:disabled){background:#e539350f!important}.ud-btn--icon-only.ud-btn--success{color:#24a821!important}.ud-btn--icon-only.ud-btn--success:hover:not(:disabled){background:#24a8210f!important}.ud-btn--icon-only.ud-btn--warning{color:#f59e0b!important}.ud-btn--icon-only.ud-btn--warning:hover:not(:disabled){background:#f59e0b0f!important}.ud-btn--icon-only.ud-btn--info{color:#3b82f6!important}.ud-btn--icon-only.ud-btn--info:hover:not(:disabled){background:#3b82f60f!important}.ud-btn:disabled{opacity:.45!important;box-shadow:none!important;cursor:not-allowed!important;transform:none!important}.ud-btn--loading{cursor:wait!important}.ud-btn__label{line-height:1}.ud-btn__icon{flex-shrink:0;overflow:visible!important;font-size:1.15em!important;width:1.15em!important;height:1.15em!important;line-height:1!important;display:inline-flex!important;align-items:center;justify-content:center}.ud-btn__icon--left{margin-right:2px}.ud-btn__icon--right{margin-left:2px}.ud-btn__spinner{flex-shrink:0}.ud-btn__spinner ::ng-deep circle{stroke:currentColor!important}::ng-deep .ud-btn .mdc-button__label{display:inline-flex!important;align-items:center!important;gap:6px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
|
|
920
924
|
}
|
|
921
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
925
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: UdButtonComponent, decorators: [{
|
|
922
926
|
type: Component,
|
|
923
927
|
args: [{ selector: 'ud-button', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule], template: "@if (variant === 'flat') {\n <button\n mat-flat-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--flat ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--full-width]=\"fullWidth\"\n [class.ud-btn--loading]=\"loading\">\n <ng-container *ngTemplateOutlet=\"btnContent\" />\n </button>\n}\n\n@if (variant === 'stroked') {\n <button\n mat-stroked-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--stroked ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--full-width]=\"fullWidth\"\n [class.ud-btn--loading]=\"loading\">\n <ng-container *ngTemplateOutlet=\"btnContent\" />\n </button>\n}\n\n@if (variant === 'icon-only') {\n <button\n mat-icon-button\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [class]=\"'ud-btn ud-btn--icon-only ud-btn--' + color + ' ud-btn--' + size\"\n [class.ud-btn--loading]=\"loading\">\n @if (loading) {\n <mat-spinner diameter=\"16\" />\n } @else if (icon) {\n <mat-icon class=\"ud-btn__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n </button>\n}\n\n<ng-template #btnContent>\n @if (loading) {\n <mat-spinner class=\"ud-btn__spinner\" diameter=\"16\" />\n } @else if (icon && iconPosition === 'left') {\n <mat-icon class=\"ud-btn__icon ud-btn__icon--left\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <span class=\"ud-btn__label\"><ng-content /></span>\n @if (!loading && icon && iconPosition === 'right') {\n <mat-icon class=\"ud-btn__icon ud-btn__icon--right\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n</ng-template>\n", styles: [":host{display:inline-block}:host.full-width,:host .ud-btn--full-width{width:100%}.ud-btn{font-family:DM Sans,system-ui,sans-serif!important;font-weight:500!important;letter-spacing:0!important;border-radius:var(--eu-radius-sm, 6px)!important;transition:background .2s ease,box-shadow .2s ease,transform .15s ease,border-color .2s ease,color .2s ease!important;display:inline-flex!important;align-items:center;gap:.4rem}.ud-btn--full-width{width:100%}.ud-btn--sm{height:32px!important;font-size:.8rem!important;padding:0 .875rem!important}.ud-btn--md{height:40px!important;font-size:.875rem!important;padding:0 1.25rem!important}.ud-btn--lg{height:48px!important;font-size:.95rem!important;padding:0 1.75rem!important}.ud-btn--flat.ud-btn--primary{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:0 4px 14px #1b253538!important}.ud-btn--flat.ud-btn--primary:hover:not(:disabled){background:var(--eu-navy-soft, #253347)!important;box-shadow:0 6px 18px #1b25354d!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--primary:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--secondary{background:linear-gradient(180deg,#fff,#f4f6fa)!important;color:var(--eu-navy, #1b2535)!important;border:1px solid #b8c1ce!important;box-shadow:0 1px 3px #1b25351a!important}.ud-btn--flat.ud-btn--secondary:hover:not(:disabled){background:linear-gradient(180deg,#f7f9fb,#eaecf2)!important;border-color:var(--eu-navy, #1b2535)!important;box-shadow:0 2px 6px #1b253529!important}.ud-btn--flat.ud-btn--secondary:active:not(:disabled){background:#e8ecf2!important;box-shadow:0 1px 2px #1b253514!important}.ud-btn--flat.ud-btn--danger{background:#e53935!important;color:#fff!important;box-shadow:0 4px 14px #e539354d!important}.ud-btn--flat.ud-btn--danger:hover:not(:disabled){background:#c62828!important;box-shadow:0 6px 18px #e5393566!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--danger:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--success{background:#24a821!important;color:#fff!important;box-shadow:0 4px 14px #24a8214d!important}.ud-btn--flat.ud-btn--success:hover:not(:disabled){background:#1c881a!important;box-shadow:0 6px 18px #24a82166!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--success:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--warning{background:#f59e0b!important;color:#fff!important;box-shadow:0 4px 14px #f59e0b4d!important}.ud-btn--flat.ud-btn--warning:hover:not(:disabled){background:#d97706!important;box-shadow:0 6px 18px #f59e0b66!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--warning:active:not(:disabled){transform:translateY(0)!important}.ud-btn--flat.ud-btn--info{background:#3b82f6!important;color:#fff!important;box-shadow:0 4px 14px #3b82f64d!important}.ud-btn--flat.ud-btn--info:hover:not(:disabled){background:#2563eb!important;box-shadow:0 6px 18px #3b82f666!important;transform:translateY(-1px)}.ud-btn--flat.ud-btn--info:active:not(:disabled){transform:translateY(0)!important}.ud-btn--stroked.ud-btn--primary{color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--primary:hover:not(:disabled){background:#1b25350d!important}.ud-btn--stroked.ud-btn--secondary{color:#4b5563!important;border-color:#8b96a5!important;background:transparent!important}.ud-btn--stroked.ud-btn--secondary:hover:not(:disabled){color:var(--eu-navy, #1b2535)!important;border-color:var(--eu-navy, #1b2535)!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger{color:#e53935!important;border-color:#e53935!important;background:transparent!important}.ud-btn--stroked.ud-btn--danger:hover:not(:disabled){background:#e539350d!important}.ud-btn--stroked.ud-btn--success{color:#24a821!important;border-color:#24a821!important;background:transparent!important}.ud-btn--stroked.ud-btn--success:hover:not(:disabled){background:#1c881a0f!important}.ud-btn--stroked.ud-btn--warning{color:#f59e0b!important;border-color:#f59e0b!important;background:transparent!important}.ud-btn--stroked.ud-btn--warning:hover:not(:disabled){background:#f59e0b0f!important}.ud-btn--stroked.ud-btn--info{color:#3b82f6!important;border-color:#3b82f6!important;background:transparent!important}.ud-btn--stroked.ud-btn--info:hover:not(:disabled){background:#3b82f60f!important}.ud-btn--icon-only{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important}.ud-btn--icon-only ::ng-deep .mdc-icon-button__state-layer,.ud-btn--icon-only ::ng-deep .mat-mdc-button-persistent-ripple{border-radius:var(--eu-radius-sm, 6px)!important}.ud-btn--icon-only ::ng-deep .mdc-icon-button__content,.ud-btn--icon-only ::ng-deep .mat-mdc-button-base{display:inline-flex!important;align-items:center!important;justify-content:center!important}.ud-btn--icon-only .ud-btn__icon{font-size:1.35em!important;width:1.35em!important;height:1.35em!important}.ud-btn--icon-only.ud-btn--icon-only--sm{width:32px!important;height:32px!important}.ud-btn--icon-only.ud-btn--icon-only--md{width:40px!important;height:40px!important}.ud-btn--icon-only.ud-btn--icon-only--lg{width:48px!important;height:48px!important}.ud-btn--icon-only.ud-btn--primary{color:var(--eu-navy, #1b2535)!important}.ud-btn--icon-only.ud-btn--primary:hover:not(:disabled){background:#1b25350f!important}.ud-btn--icon-only.ud-btn--secondary{color:var(--eu-muted, #6b7585)!important}.ud-btn--icon-only.ud-btn--secondary:hover:not(:disabled){background:#1b25350a!important}.ud-btn--icon-only.ud-btn--danger{color:#e53935!important}.ud-btn--icon-only.ud-btn--danger:hover:not(:disabled){background:#e539350f!important}.ud-btn--icon-only.ud-btn--success{color:#24a821!important}.ud-btn--icon-only.ud-btn--success:hover:not(:disabled){background:#24a8210f!important}.ud-btn--icon-only.ud-btn--warning{color:#f59e0b!important}.ud-btn--icon-only.ud-btn--warning:hover:not(:disabled){background:#f59e0b0f!important}.ud-btn--icon-only.ud-btn--info{color:#3b82f6!important}.ud-btn--icon-only.ud-btn--info:hover:not(:disabled){background:#3b82f60f!important}.ud-btn:disabled{opacity:.45!important;box-shadow:none!important;cursor:not-allowed!important;transform:none!important}.ud-btn--loading{cursor:wait!important}.ud-btn__label{line-height:1}.ud-btn__icon{flex-shrink:0;overflow:visible!important;font-size:1.15em!important;width:1.15em!important;height:1.15em!important;line-height:1!important;display:inline-flex!important;align-items:center;justify-content:center}.ud-btn__icon--left{margin-right:2px}.ud-btn__icon--right{margin-left:2px}.ud-btn__spinner{flex-shrink:0}.ud-btn__spinner ::ng-deep circle{stroke:currentColor!important}::ng-deep .ud-btn .mdc-button__label{display:inline-flex!important;align-items:center!important;gap:6px!important}\n"] }]
|
|
924
928
|
}], propDecorators: { variant: [{
|
|
@@ -963,10 +967,10 @@ class TranslateWrapperService {
|
|
|
963
967
|
}
|
|
964
968
|
return value;
|
|
965
969
|
}
|
|
966
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
967
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
970
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TranslateWrapperService, deps: [{ token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
971
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TranslateWrapperService, providedIn: 'root' });
|
|
968
972
|
}
|
|
969
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
973
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TranslateWrapperService, decorators: [{
|
|
970
974
|
type: Injectable,
|
|
971
975
|
args: [{
|
|
972
976
|
providedIn: 'root',
|
|
@@ -1758,8 +1762,8 @@ class CustomTableComponent {
|
|
|
1758
1762
|
capitalize = capitalize;
|
|
1759
1763
|
TableDisplayColumnType = TableDisplayColumnType;
|
|
1760
1764
|
NumberOperator = NumberOperator;
|
|
1761
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1762
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: CustomTableComponent, isStandalone: true, selector: "ud-table", inputs: { id: "id", title: "title", icon: "icon", actions: "actions", haveCheckbox: "haveCheckbox", displayedColumns: "displayedColumns", dataSource: "dataSource", paginationSizeOptions: "paginationSizeOptions", initialPageSize: "initialPageSize", specificSelectRow: "specificSelectRow", hasFilter: "hasFilter", expandableRows: "expandableRows", expandedItem: "expandedItem", emptyMessage: "emptyMessage", isLoading: "isLoading", separateFilters: "separateFilters", showPaginator: "showPaginator", noTableDataMessage: "noTableDataMessage", actionsMenuEnabled: "actionsMenuEnabled", menuItems: "menuItems", totalElements: "totalElements", serverSideFiltering: "serverSideFiltering", disableHeader: "disableHeader" }, outputs: { actionClicked: "actionClicked", clicked: "clicked", queryChange: "queryChange" }, queries: [{ propertyName: "actionsTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "paginatorRef", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "allFilterInput", first: true, predicate: ["allFilterInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"table-div\">\n <mat-card\n appearance=\"outlined\"\n class=\"px-0 table-card\"\n [ngClass]=\"[actions.length === 0 ? 'pt-2' : 'pb-0']\"\n style=\"border-color: var(--accent-darker-color)\">\n @if (!disableHeader) {\n <mat-card-header\n class=\"d-flex justify-content-between align-items-center table-header\"\n [ngClass]=\"[actions.length === 0 ? 'pb-3' : 'pb-0']\">\n <div class=\"d-flex align-items-center\">\n @if (icon) {\n <mat-icon\n fontSet=\"material-icons-outlined\"\n class=\"table-header-icon ml-3\">\n {{ icon }}\n </mat-icon>\n }\n <h6 class=\"ml-2 table-title\">\n {{ title | toObservable | async | capitalize }}\n </h6>\n </div>\n <div class=\"d-flex align-items-center action-buttons-group pr-2\">\n @for (action of actions; track action.id) {\n <ud-button\n [attr.data-action-id]=\"action.id\"\n [variant]=\"action.variant ?? 'stroked'\"\n [color]=\"action.color ?? 'primary'\"\n [icon]=\"action.icon\"\n [disabled]=\"action.disabled?.(selection) ?? false\"\n size=\"sm\"\n (click)=\"onActionClicked(action)\">\n {{ action.label | toObservable | async | capitalize }}\n </ud-button>\n }\n @if (actionsMenuEnabled) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n icon=\"keyboard_arrow_down\"\n iconPosition=\"right\"\n [matMenuTriggerFor]=\"menu\">\n {{ 'names.action' | translate | pluralize | capitalize }}\n </ud-button>\n <mat-menu #menu=\"matMenu\" class=\"ud-actions-menu\">\n @if (menuItems.length > 0) {\n @for (item of menuItems; track item.label; let last = $last) {\n <button\n mat-menu-item\n class=\"ud-menu-item\"\n [disabled]=\"item.disabled?.(selection)\"\n (click)=\"item.clickFn(selection)\">\n <span class=\"ud-menu-item__icon-wrap\">\n <mat-icon fontSet=\"material-icons-outlined\">{{\n item.icon\n }}</mat-icon>\n </span>\n <span class=\"ud-menu-item__label\">{{ item.label }}</span>\n </button>\n }\n } @else {\n <ng-container\n *ngTemplateOutlet=\"\n actionsTemplate;\n context: {\n selection: selection,\n data: dataSource.data,\n selectedRows: selection.selected,\n }\n \"></ng-container>\n }\n </mat-menu>\n }\n </div>\n </mat-card-header>\n }\n <mat-card-content>\n @if (!separateFilters) {\n <mat-form-field\n class=\"ml-4\"\n appearance=\"outline\"\n [ngStyle]=\"{ display: hasFilter ? '' : 'none' }\">\n <mat-icon class=\"filter p-0\" matSuffix>filter_alt</mat-icon>\n <mat-label>{{ 'table.filter' | translate | capitalize }}</mat-label>\n <input\n #allFilterInput\n matInput\n (keyup)=\"applyFilterToAllColumns($event)\"\n [placeholder]=\"'table.sortOnAnyField' | translate | capitalize\" />\n </mat-form-field>\n } @else {\n <div class=\"separate-filters\">\n <form [formGroup]=\"filterByColumnFormGroup\" class=\"filters\">\n @for (filter of selectedFilters; track filter) {\n <div class=\"filter\">\n @if (\n filter.type === TableDisplayColumnType.HYPERLINK ||\n filter.type === TableDisplayColumnType.TEXT ||\n filter.type === TableDisplayColumnType.PHONE ||\n filter.type === TableDisplayColumnType.CLICK ||\n filter.type === TableDisplayColumnType.ARRAY\n ) {\n <ud-text-input\n [controlName]=\"filter.property\"\n [placeholder]=\"\n filter.name | toObservable | async | capitalize\n \"\n size=\"small\"\n [clearable]=\"true\" />\n } @else {\n <ud-button\n variant=\"stroked\"\n color=\"secondary\"\n size=\"sm\"\n icon=\"keyboard_arrow_down\"\n iconPosition=\"right\"\n [class.filter-button-trigger--active]=\"\n hasFilterValue(filter.property)\n \"\n [matMenuTriggerFor]=\"dropdownMenu\">\n {{ filter.name | toObservable | async | capitalize }}\n @if (hasFilterValue(filter.property)) {\n <mat-icon\n class=\"filter-clear-icon\"\n (click)=\"\n clearFilter(filter.property); $event.stopPropagation()\n \">\n close\n </mat-icon>\n }\n </ud-button>\n <mat-menu #dropdownMenu=\"matMenu\" class=\"custom-dropdown\">\n <div\n class=\"dropdown-content\"\n (click)=\"$event.stopPropagation()\">\n @if (filter.type === TableDisplayColumnType.BOOLEAN) {\n <div class=\"boolean-content\">\n <span class=\"boolean-label\">\n {{\n filter.name | toObservable | async | capitalize\n }}\n </span>\n <ud-toggle\n [formControlName]=\"filter.property\"\n size=\"md\" />\n </div>\n } @else if (\n filter.type === TableDisplayColumnType.NUMBER ||\n filter.type === TableDisplayColumnType.MONEY\n ) {\n <div\n class=\"number-content\"\n [formGroupName]=\"filter.property\">\n <ud-multi-select\n controlName=\"operation\"\n [multiple]=\"false\"\n [label]=\"'table.operationType' | translate | capitalize\"\n [options]=\"numberOperationOptions\" />\n @if (\n filterByColumnFormGroup.controls[filter.property]\n .value.operation &&\n filterByColumnFormGroup.controls[filter.property]\n .value.operation !== NumberOperator.BETWEEN\n ) {\n <ud-text-input\n controlName=\"value\"\n type=\"number\"\n [label]=\"\n 'operators.' +\n filterByColumnFormGroup.controls[\n filter.property\n ].value.operation\n | translate\n | capitalize\n \" />\n } @else if (\n filterByColumnFormGroup.controls[filter.property]\n .value.operation\n ) {\n <div class=\"number-range-row\">\n <ud-text-input\n controlName=\"min\"\n type=\"number\"\n [label]=\"\n 'operators.minimum' | translate | capitalize\n \" />\n <ud-text-input\n controlName=\"max\"\n type=\"number\"\n [min]=\"\n filterByColumnFormGroup.controls[\n filter.property\n ].value.min\n \"\n [label]=\"\n 'operators.maximum' | translate | capitalize\n \" />\n </div>\n }\n </div>\n } @else if (\n filter.type === TableDisplayColumnType.DATETIME ||\n filter.type === TableDisplayColumnType.DATE\n ) {\n <div\n [formGroupName]=\"filter.property\"\n class=\"date-content\">\n <ud-date-range-input\n startControlName=\"start\"\n endControlName=\"end\"\n [label]=\"'table.dateRange' | translate | capitalize\"\n [startPlaceholder]=\"'table.startDate' | translate | capitalize\"\n [endPlaceholder]=\"'table.endDate' | translate | capitalize\" />\n </div>\n }\n </div>\n </mat-menu>\n }\n </div>\n }\n </form>\n </div>\n }\n @if (!isLoading) {\n @if (dataSource.filteredData.length > 0) {\n <table\n mat-table\n matSort\n [matSortActive]=\"initSortedCol?.property!\"\n [matSortDirection]=\"initSortedCol?.initSort!\"\n [multiTemplateDataRows]=\"expandableRows\"\n [dataSource]=\"dataSource\">\n <!-- Checkbox Column -->\n @if (displayCheckbox) {\n <ng-container matColumnDef=\"select\">\n <th\n [ngStyle]=\"{ width: actionColumnStyleWidth }\"\n class=\"checkbox-header\"\n mat-header-cell\n *matHeaderCellDef>\n <mat-checkbox\n (change)=\"$event ? toggleAllRows() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [aria-label]=\"checkboxLabel()\"\n color=\"primary\">\n </mat-checkbox>\n </th>\n <td\n [ngStyle]=\"{ width: actionColumnStyleWidth }\"\n class=\"checkbox-cell\"\n mat-cell\n *matCellDef=\"let row\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [aria-label]=\"checkboxLabel(row)\"\n class=\"mt-2 mr-2\"\n color=\"primary\">\n </mat-checkbox>\n </td>\n </ng-container>\n }\n @for (column of displayedColumnsWithoutSelect; track column) {\n <ng-container matColumnDef=\"{{ column.property }}\">\n <th\n [ngStyle]=\"{ width: getColumnWidth(column) }\"\n mat-header-cell\n *matHeaderCellDef>\n {{ column.name | toObservable | async | capitalize }}\n </th>\n <td\n [ngStyle]=\"{ width: getColumnWidth(column) }\"\n mat-cell\n *matCellDef=\"let row; let index = index\"\n (click)=\"column.dataCellTemplate && $event.stopPropagation()\">\n @if (column.dataCellTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n column.dataCellTemplate;\n context: { $implicit: row, index }\n \" />\n } @else if (column.type) {\n @switch (column.type) {\n @case (tableDisplayColumnType.ARRAY) {\n <span>\n {{\n column.transformFn?.(row[column.property]) ??\n row[column.property].join(', ')\n }}\n </span>\n }\n @case (tableDisplayColumnType.TEXT) {\n <span\n [innerHTML]=\"\n column.transformFn?.(row[column.property]) ??\n row[column.property]\n \">\n </span>\n }\n @case (tableDisplayColumnType.NUMBER) {\n <span\n [innerHTML]=\"\n column.transformFn?.(row[column.property]) ??\n row[column.property]\n \">\n </span>\n }\n @case (tableDisplayColumnType.TEXT_OBSERVABLES) {\n <span>\n {{ row[column.property] | async | capitalize }}\n </span>\n }\n @case (tableDisplayColumnType.BOOLEAN) {\n <mat-icon\n class=\"mt-2\"\n [matTooltip]=\"\n (row[column.property]\n ? 'names.active'\n : 'names.inactive'\n )\n | translate\n | capitalize\n \"\n matTooltipPosition=\"right\">\n {{ row[column.property] ? 'check' : 'close' }}\n </mat-icon>\n }\n @case (tableDisplayColumnType.CLICK) {\n <span (click)=\"clickedAction(row)\" class=\"link\">\n {{ row[column.property] }}\n </span>\n }\n @case (tableDisplayColumnType.DATE) {\n {{ row[column.property] | date: 'MMMM dd, yyyy' }}\n }\n @case (tableDisplayColumnType.DATETIME) {\n {{\n row[column.property] | date: 'MMMM dd, yyyy h:mm a'\n }}\n }\n @case (tableDisplayColumnType.HYPERLINK) {\n <span\n class=\"link\"\n [routerLink]=\"getHyperlinkRoute(row, column)\"\n (click)=\"$event.stopPropagation()\">\n {{ row[column.property] }}\n </span>\n }\n @case (tableDisplayColumnType.ICON) {\n <mat-icon\n [ngStyle]=\"{\n color: column.icons![row[column.property]].color,\n }\">\n {{ column.icons![row[column.property]].name }}\n </mat-icon>\n }\n @case (tableDisplayColumnType.MONEY) {\n ${{ row[column.property] }}\n }\n @case (tableDisplayColumnType.PHONE) {\n @if (row[column.property].countryCode?.code) {\n <span>\n (+{{ row[column.property].countryCode.code || '' }})\n </span>\n }\n {{\n formatPhoneNumber(row[column.property].phoneNumber)\n }}\n }\n }\n } @else {\n {{ row[column.property] }}\n }\n </td>\n </ng-container>\n }\n <ng-container matColumnDef=\"expand\">\n <th\n [ngStyle]=\"{ width: actionColumnStyleWidth }\"\n mat-header-cell\n *matHeaderCellDef\n aria-label=\"row actions\">\n \n </th>\n <td\n [ngStyle]=\"{ width: actionColumnStyleWidth }\"\n mat-cell\n *matCellDef=\"let element\">\n <button\n mat-icon-button\n aria-label=\"expand row\"\n (click)=\"\n expandedElement =\n expandedElement === element ? null : element;\n $event.stopPropagation()\n \">\n @if (expandedElement !== element) {\n <mat-icon> keyboard_arrow_down</mat-icon>\n } @else {\n <mat-icon> keyboard_arrow_up</mat-icon>\n }\n </button>\n </td>\n </ng-container>\n\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"expandedDetail\">\n <td\n mat-cell\n class=\"ml-auto\"\n *matCellDef=\"let element\"\n [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n <div\n class=\"element-detail justify-content-center\"\n [@detailExpand]=\"\n element === expandedElement ? 'expanded' : 'collapsed'\n \">\n @if (expandedItem.type === 'image') {\n <img\n class=\"pb-4\"\n [src]=\"element[expandedItem.property]\"\n alt=\"\" />\n }\n </div>\n </td>\n </ng-container>\n\n @if (!expandableRows) {\n <ng-container>\n <tr\n mat-header-row\n *matHeaderRowDef=\"displayedColumnsProperty\"></tr>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: displayedColumnsProperty;\n let i = index\n \"\n (click)=\"selectRow(row)\"\n [ngClass]=\"getRowBackgroundColor(i)\"></tr>\n </ng-container>\n } @else {\n <ng-container>\n <tr\n mat-header-row\n *matHeaderRowDef=\"columnsToDisplayWithExpand\"></tr>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: columnsToDisplayWithExpand;\n let i = dataIndex\n \"\n [id]=\"i\"\n class=\"element-row\"\n [class.expanded-row]=\"expandedElement === row\"\n [ngClass]=\"getRowBackgroundColor(i)\"></tr>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['expandedDetail'];\n let i = dataIndex\n \"\n [id]=\"i\"\n [ngClass]=\"getRowBackgroundColor(i)\"\n [ngStyle]=\"{\n display: expandedElement === row ? 'contents' : 'none',\n }\"\n class=\"detail-row\"></tr>\n </ng-container>\n }\n\n <!-- Row shown when there is no matching data. -->\n @if (separateFilters && allFilterInput) {\n <div>\n <tr\n class=\"mat-row\"\n *matNoDataRow\n style=\"background: var(--accent-color)\">\n @if (separateFilters && allFilterInput) {\n <td\n class=\"mat-cell\"\n [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n {{\n 'messages.noDataMatchingFilter'\n | translate: { value: allFilterInput.nativeElement.value }\n | capitalize\n }}\n </td>\n } @else {\n <td\n class=\"mat-cell\"\n [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n {{ emptyMessage | async }}\n </td>\n }\n </tr>\n </div>\n }\n </table>\n } @else {\n <div class=\"no-data-found\">\n <mat-icon class=\"no-data-icon\">\n {{ dataSource.data.length > 0 ? 'search_off' : 'inbox' }}\n </mat-icon>\n <p class=\"no-data-text\">\n {{\n dataSource.data.length > 0\n ? ('messages.modifyFilter' | translate | capitalize)\n : noTableDataMessage\n }}\n </p>\n </div>\n }\n } @else {\n <div class=\"loading-container\">\n <mat-progress-spinner\n class=\"mx-auto\"\n [diameter]=\"32\"\n color=\"primary\"\n mode=\"indeterminate\" />\n </div>\n }\n @if (showPaginator) {\n <mat-paginator\n aria-label=\"Select page of users\"\n [ngClass]=\"getRowBackgroundColor(dataSource.data.length)\"\n [length]=\"totalElements ?? dataSource.data.length\"\n [pageSize]=\"initialPageSize\"\n [pageSizeOptions]=\"paginationSizeOptions\"\n (page)=\"onPageChange($event)\"\n showFirstLastButtons />\n }\n </mat-card-content>\n </mat-card>\n</div>\n", styles: ["html{--mat-ripple-color: rgba(0, 0, 0, .1)}html{--mat-option-selected-state-label-text-color: #1b2535;--mat-option-label-text-color: rgba(0, 0, 0, .87);--mat-option-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-option-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-option-selected-state-layer-color: rgba(0, 0, 0, .04)}.mat-accent{--mat-option-selected-state-label-text-color: #f2f2f7;--mat-option-label-text-color: rgba(0, 0, 0, .87);--mat-option-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-option-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-option-selected-state-layer-color: rgba(0, 0, 0, .04)}.mat-warn{--mat-option-selected-state-label-text-color: #f44336;--mat-option-label-text-color: rgba(0, 0, 0, .87);--mat-option-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-option-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-option-selected-state-layer-color: rgba(0, 0, 0, .04)}html{--mat-optgroup-label-text-color: rgba(0, 0, 0, .87)}html{--mat-full-pseudo-checkbox-selected-icon-color: #f2f2f7;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0}html{--mat-minimal-pseudo-checkbox-selected-checkmark-color: #f2f2f7;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}.mat-primary{--mat-full-pseudo-checkbox-selected-icon-color: #1b2535;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0}.mat-primary{--mat-minimal-pseudo-checkbox-selected-checkmark-color: #1b2535;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}.mat-accent{--mat-full-pseudo-checkbox-selected-icon-color: #f2f2f7;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0}.mat-accent{--mat-minimal-pseudo-checkbox-selected-checkmark-color: #f2f2f7;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}.mat-warn{--mat-full-pseudo-checkbox-selected-icon-color: #f44336;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0}.mat-warn{--mat-minimal-pseudo-checkbox-selected-checkmark-color: #f44336;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}html{--mat-app-background-color: #fafafa;--mat-app-text-color: rgba(0, 0, 0, .87);--mat-app-elevation-shadow-level-0: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-1: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-2: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-3: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-4: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-5: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 5px 8px 0px rgba(0, 0, 0, .14), 0px 1px 14px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-6: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-7: 0px 4px 5px -2px rgba(0, 0, 0, .2), 0px 7px 10px 1px rgba(0, 0, 0, .14), 0px 2px 16px 1px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-8: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-9: 0px 5px 6px -3px rgba(0, 0, 0, .2), 0px 9px 12px 1px rgba(0, 0, 0, .14), 0px 3px 16px 2px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-10: 0px 6px 6px -3px rgba(0, 0, 0, .2), 0px 10px 14px 1px rgba(0, 0, 0, .14), 0px 4px 18px 3px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-11: 0px 6px 7px -4px rgba(0, 0, 0, .2), 0px 11px 15px 1px rgba(0, 0, 0, .14), 0px 4px 20px 3px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-12: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-13: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 13px 19px 2px rgba(0, 0, 0, .14), 0px 5px 24px 4px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-14: 0px 7px 9px -4px rgba(0, 0, 0, .2), 0px 14px 21px 2px rgba(0, 0, 0, .14), 0px 5px 26px 4px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-15: 0px 8px 9px -5px rgba(0, 0, 0, .2), 0px 15px 22px 2px rgba(0, 0, 0, .14), 0px 6px 28px 5px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-16: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-17: 0px 8px 11px -5px rgba(0, 0, 0, .2), 0px 17px 26px 2px rgba(0, 0, 0, .14), 0px 6px 32px 5px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-18: 0px 9px 11px -5px rgba(0, 0, 0, .2), 0px 18px 28px 2px rgba(0, 0, 0, .14), 0px 7px 34px 6px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-19: 0px 9px 12px -6px rgba(0, 0, 0, .2), 0px 19px 29px 2px rgba(0, 0, 0, .14), 0px 7px 36px 6px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-20: 0px 10px 13px -6px rgba(0, 0, 0, .2), 0px 20px 31px 3px rgba(0, 0, 0, .14), 0px 8px 38px 7px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-21: 0px 10px 13px -6px rgba(0, 0, 0, .2), 0px 21px 33px 3px rgba(0, 0, 0, .14), 0px 8px 40px 7px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-22: 0px 10px 14px -6px rgba(0, 0, 0, .2), 0px 22px 35px 3px rgba(0, 0, 0, .14), 0px 8px 42px 7px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-23: 0px 11px 14px -7px rgba(0, 0, 0, .2), 0px 23px 36px 3px rgba(0, 0, 0, .14), 0px 9px 44px 8px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-24: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12)}html{--mdc-elevated-card-container-shape: 4px}html{--mdc-outlined-card-container-shape: 4px;--mdc-outlined-card-outline-width: 1px}html{--mdc-elevated-card-container-color: white;--mdc-elevated-card-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12)}html{--mdc-outlined-card-container-color: white;--mdc-outlined-card-outline-color: rgba(0, 0, 0, .12);--mdc-outlined-card-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12)}html{--mat-card-subtitle-text-color: rgba(0, 0, 0, .54)}html{--mdc-linear-progress-active-indicator-height: 4px;--mdc-linear-progress-track-height: 4px;--mdc-linear-progress-track-shape: 0}.mat-mdc-progress-bar{--mdc-linear-progress-active-indicator-color: #1b2535;--mdc-linear-progress-track-color: rgba(27, 37, 53, .25)}.mat-mdc-progress-bar.mat-accent{--mdc-linear-progress-active-indicator-color: #f2f2f7;--mdc-linear-progress-track-color: rgba(242, 242, 247, .25)}.mat-mdc-progress-bar.mat-warn{--mdc-linear-progress-active-indicator-color: #f44336;--mdc-linear-progress-track-color: rgba(244, 67, 54, .25)}html{--mdc-plain-tooltip-container-shape: 4px;--mdc-plain-tooltip-supporting-text-line-height: 16px}html{--mdc-plain-tooltip-container-color: #616161;--mdc-plain-tooltip-supporting-text-color: #fff}html{--mdc-filled-text-field-active-indicator-height: 1px;--mdc-filled-text-field-focus-active-indicator-height: 2px;--mdc-filled-text-field-container-shape: 4px}html{--mdc-outlined-text-field-outline-width: 1px;--mdc-outlined-text-field-focus-outline-width: 2px;--mdc-outlined-text-field-container-shape: 4px}html{--mdc-filled-text-field-caret-color: #1b2535;--mdc-filled-text-field-focus-active-indicator-color: #1b2535;--mdc-filled-text-field-focus-label-text-color: rgba(27, 37, 53, .87);--mdc-filled-text-field-container-color: rgb(244.8, 244.8, 244.8);--mdc-filled-text-field-disabled-container-color: rgb(249.9, 249.9, 249.9);--mdc-filled-text-field-label-text-color: rgba(0, 0, 0, .6);--mdc-filled-text-field-hover-label-text-color: rgba(0, 0, 0, .6);--mdc-filled-text-field-disabled-label-text-color: rgba(0, 0, 0, .38);--mdc-filled-text-field-input-text-color: rgba(0, 0, 0, .87);--mdc-filled-text-field-disabled-input-text-color: rgba(0, 0, 0, .38);--mdc-filled-text-field-input-text-placeholder-color: rgba(0, 0, 0, .6);--mdc-filled-text-field-error-hover-label-text-color: #f44336;--mdc-filled-text-field-error-focus-label-text-color: #f44336;--mdc-filled-text-field-error-label-text-color: #f44336;--mdc-filled-text-field-error-caret-color: #f44336;--mdc-filled-text-field-active-indicator-color: rgba(0, 0, 0, .42);--mdc-filled-text-field-disabled-active-indicator-color: rgba(0, 0, 0, .06);--mdc-filled-text-field-hover-active-indicator-color: rgba(0, 0, 0, .87);--mdc-filled-text-field-error-active-indicator-color: #f44336;--mdc-filled-text-field-error-focus-active-indicator-color: #f44336;--mdc-filled-text-field-error-hover-active-indicator-color: #f44336}html{--mdc-outlined-text-field-caret-color: #1b2535;--mdc-outlined-text-field-focus-outline-color: #1b2535;--mdc-outlined-text-field-focus-label-text-color: rgba(27, 37, 53, .87);--mdc-outlined-text-field-label-text-color: rgba(0, 0, 0, .6);--mdc-outlined-text-field-hover-label-text-color: rgba(0, 0, 0, .6);--mdc-outlined-text-field-disabled-label-text-color: rgba(0, 0, 0, .38);--mdc-outlined-text-field-input-text-color: rgba(0, 0, 0, .87);--mdc-outlined-text-field-disabled-input-text-color: rgba(0, 0, 0, .38);--mdc-outlined-text-field-input-text-placeholder-color: rgba(0, 0, 0, .6);--mdc-outlined-text-field-error-caret-color: #f44336;--mdc-outlined-text-field-error-focus-label-text-color: #f44336;--mdc-outlined-text-field-error-label-text-color: #f44336;--mdc-outlined-text-field-error-hover-label-text-color: #f44336;--mdc-outlined-text-field-outline-color: rgba(0, 0, 0, .38);--mdc-outlined-text-field-disabled-outline-color: rgba(0, 0, 0, .06);--mdc-outlined-text-field-hover-outline-color: rgba(0, 0, 0, .87);--mdc-outlined-text-field-error-focus-outline-color: #f44336;--mdc-outlined-text-field-error-hover-outline-color: #f44336;--mdc-outlined-text-field-error-outline-color: #f44336}html{--mat-form-field-focus-select-arrow-color: rgba(27, 37, 53, .87);--mat-form-field-disabled-input-text-placeholder-color: rgba(0, 0, 0, .38);--mat-form-field-state-layer-color: rgba(0, 0, 0, .87);--mat-form-field-error-text-color: #f44336;--mat-form-field-select-option-text-color: inherit;--mat-form-field-select-disabled-option-text-color: GrayText;--mat-form-field-leading-icon-color: unset;--mat-form-field-disabled-leading-icon-color: unset;--mat-form-field-trailing-icon-color: unset;--mat-form-field-disabled-trailing-icon-color: unset;--mat-form-field-error-focus-trailing-icon-color: unset;--mat-form-field-error-hover-trailing-icon-color: unset;--mat-form-field-error-trailing-icon-color: unset;--mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, .54);--mat-form-field-disabled-select-arrow-color: rgba(0, 0, 0, .38);--mat-form-field-hover-state-layer-opacity: .04;--mat-form-field-focus-state-layer-opacity: .08}.mat-mdc-form-field.mat-accent{--mdc-filled-text-field-caret-color: #f2f2f7;--mdc-filled-text-field-focus-active-indicator-color: #f2f2f7;--mdc-filled-text-field-focus-label-text-color: rgba(242, 242, 247, .87)}.mat-mdc-form-field.mat-accent{--mdc-outlined-text-field-caret-color: #f2f2f7;--mdc-outlined-text-field-focus-outline-color: #f2f2f7;--mdc-outlined-text-field-focus-label-text-color: rgba(242, 242, 247, .87)}.mat-mdc-form-field.mat-accent{--mat-form-field-focus-select-arrow-color: rgba(242, 242, 247, .87)}.mat-mdc-form-field.mat-warn{--mdc-filled-text-field-caret-color: #f44336;--mdc-filled-text-field-focus-active-indicator-color: #f44336;--mdc-filled-text-field-focus-label-text-color: rgba(244, 67, 54, .87)}.mat-mdc-form-field.mat-warn{--mdc-outlined-text-field-caret-color: #f44336;--mdc-outlined-text-field-focus-outline-color: #f44336;--mdc-outlined-text-field-focus-label-text-color: rgba(244, 67, 54, .87)}.mat-mdc-form-field.mat-warn{--mat-form-field-focus-select-arrow-color: rgba(244, 67, 54, .87)}html{--mat-form-field-container-height: 56px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 16px;--mat-form-field-filled-with-label-container-padding-top: 24px;--mat-form-field-filled-with-label-container-padding-bottom: 8px}html{--mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);--mat-select-disabled-trigger-text-color: rgba(0, 0, 0, .38);--mat-select-placeholder-text-color: rgba(0, 0, 0, .6);--mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);--mat-select-disabled-arrow-color: rgba(0, 0, 0, .38);--mat-select-focused-arrow-color: rgba(27, 37, 53, .87);--mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)}html .mat-mdc-form-field.mat-accent{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);--mat-select-disabled-trigger-text-color: rgba(0, 0, 0, .38);--mat-select-placeholder-text-color: rgba(0, 0, 0, .6);--mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);--mat-select-disabled-arrow-color: rgba(0, 0, 0, .38);--mat-select-focused-arrow-color: rgba(242, 242, 247, .87);--mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)}html .mat-mdc-form-field.mat-warn{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);--mat-select-disabled-trigger-text-color: rgba(0, 0, 0, .38);--mat-select-placeholder-text-color: rgba(0, 0, 0, .6);--mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);--mat-select-disabled-arrow-color: rgba(0, 0, 0, .38);--mat-select-focused-arrow-color: rgba(244, 67, 54, .87);--mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)}html{--mat-select-arrow-transform: translateY(-8px)}html{--mat-autocomplete-container-shape: 4px;--mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-autocomplete-background-color: white}html{--mdc-dialog-container-shape: 4px}html{--mat-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12);--mat-dialog-container-max-width: 80vw;--mat-dialog-container-small-max-width: 80vw;--mat-dialog-container-min-width: 0;--mat-dialog-actions-alignment: start;--mat-dialog-actions-padding: 8px;--mat-dialog-content-padding: 20px 24px;--mat-dialog-with-actions-content-padding: 20px 24px;--mat-dialog-headline-padding: 0 24px 9px}html{--mdc-dialog-container-color: white;--mdc-dialog-subhead-color: rgba(0, 0, 0, .87);--mdc-dialog-supporting-text-color: rgba(0, 0, 0, .6)}.mat-mdc-standard-chip{--mdc-chip-container-shape-radius: 16px;--mdc-chip-with-avatar-avatar-shape-radius: 14px;--mdc-chip-with-avatar-avatar-size: 28px;--mdc-chip-with-icon-icon-size: 18px;--mdc-chip-outline-width: 0;--mdc-chip-outline-color: transparent;--mdc-chip-disabled-outline-color: transparent;--mdc-chip-focus-outline-color: transparent;--mdc-chip-hover-state-layer-opacity: .04;--mdc-chip-with-avatar-disabled-avatar-opacity: 1;--mdc-chip-flat-selected-outline-width: 0;--mdc-chip-selected-hover-state-layer-opacity: .04;--mdc-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1;--mdc-chip-with-icon-disabled-icon-opacity: 1}.mat-mdc-standard-chip{--mat-chip-disabled-container-opacity: .4;--mat-chip-trailing-action-opacity: .54;--mat-chip-trailing-action-focus-opacity: 1;--mat-chip-trailing-action-state-layer-color: transparent;--mat-chip-selected-trailing-action-state-layer-color: transparent;--mat-chip-trailing-action-hover-state-layer-opacity: 0;--mat-chip-trailing-action-focus-state-layer-opacity: 0}.mat-mdc-standard-chip{--mdc-chip-disabled-label-text-color: #212121;--mdc-chip-elevated-container-color: rgb(224.4, 224.4, 224.4);--mdc-chip-elevated-selected-container-color: rgb(224.4, 224.4, 224.4);--mdc-chip-elevated-disabled-container-color: rgb(224.4, 224.4, 224.4);--mdc-chip-flat-disabled-selected-container-color: rgb(224.4, 224.4, 224.4);--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: #212121;--mdc-chip-selected-label-text-color: #212121;--mdc-chip-with-icon-icon-color: #212121;--mdc-chip-with-icon-disabled-icon-color: #212121;--mdc-chip-with-icon-selected-icon-color: #212121;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #212121;--mdc-chip-with-trailing-icon-trailing-icon-color: #212121}.mat-mdc-standard-chip{--mat-chip-selected-disabled-trailing-icon-color: #212121;--mat-chip-selected-trailing-icon-color: #212121}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary{--mdc-chip-disabled-label-text-color: white;--mdc-chip-elevated-container-color: #1b2535;--mdc-chip-elevated-selected-container-color: #1b2535;--mdc-chip-elevated-disabled-container-color: #1b2535;--mdc-chip-flat-disabled-selected-container-color: #1b2535;--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: white;--mdc-chip-selected-label-text-color: white;--mdc-chip-with-icon-icon-color: white;--mdc-chip-with-icon-disabled-icon-color: white;--mdc-chip-with-icon-selected-icon-color: white;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;--mdc-chip-with-trailing-icon-trailing-icon-color: white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary{--mat-chip-selected-disabled-trailing-icon-color: white;--mat-chip-selected-trailing-icon-color: white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent{--mdc-chip-disabled-label-text-color: black;--mdc-chip-elevated-container-color: #f2f2f7;--mdc-chip-elevated-selected-container-color: #f2f2f7;--mdc-chip-elevated-disabled-container-color: #f2f2f7;--mdc-chip-flat-disabled-selected-container-color: #f2f2f7;--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: black;--mdc-chip-selected-label-text-color: black;--mdc-chip-with-icon-icon-color: black;--mdc-chip-with-icon-disabled-icon-color: black;--mdc-chip-with-icon-selected-icon-color: black;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: black;--mdc-chip-with-trailing-icon-trailing-icon-color: black}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent{--mat-chip-selected-disabled-trailing-icon-color: black;--mat-chip-selected-trailing-icon-color: black}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn{--mdc-chip-disabled-label-text-color: white;--mdc-chip-elevated-container-color: #f44336;--mdc-chip-elevated-selected-container-color: #f44336;--mdc-chip-elevated-disabled-container-color: #f44336;--mdc-chip-flat-disabled-selected-container-color: #f44336;--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: white;--mdc-chip-selected-label-text-color: white;--mdc-chip-with-icon-icon-color: white;--mdc-chip-with-icon-disabled-icon-color: white;--mdc-chip-with-icon-selected-icon-color: white;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;--mdc-chip-with-trailing-icon-trailing-icon-color: white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn{--mat-chip-selected-disabled-trailing-icon-color: white;--mat-chip-selected-trailing-icon-color: white}.mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 32px}html{--mdc-switch-disabled-selected-icon-opacity: .38;--mdc-switch-disabled-track-opacity: .12;--mdc-switch-disabled-unselected-icon-opacity: .38;--mdc-switch-handle-height: 20px;--mdc-switch-handle-shape: 10px;--mdc-switch-handle-width: 20px;--mdc-switch-selected-icon-size: 18px;--mdc-switch-track-height: 14px;--mdc-switch-track-shape: 7px;--mdc-switch-track-width: 36px;--mdc-switch-unselected-icon-size: 18px;--mdc-switch-selected-focus-state-layer-opacity: .12;--mdc-switch-selected-hover-state-layer-opacity: .04;--mdc-switch-selected-pressed-state-layer-opacity: .1;--mdc-switch-unselected-focus-state-layer-opacity: .12;--mdc-switch-unselected-hover-state-layer-opacity: .04;--mdc-switch-unselected-pressed-state-layer-opacity: .1}html .mat-mdc-slide-toggle{--mat-switch-disabled-selected-handle-opacity: .38;--mat-switch-disabled-unselected-handle-opacity: .38;--mat-switch-unselected-handle-size: 20px;--mat-switch-selected-handle-size: 20px;--mat-switch-pressed-handle-size: 20px;--mat-switch-with-icon-handle-size: 20px;--mat-switch-selected-handle-horizontal-margin: 0;--mat-switch-selected-with-icon-handle-horizontal-margin: 0;--mat-switch-selected-pressed-handle-horizontal-margin: 0;--mat-switch-unselected-handle-horizontal-margin: 0;--mat-switch-unselected-with-icon-handle-horizontal-margin: 0;--mat-switch-unselected-pressed-handle-horizontal-margin: 0;--mat-switch-visible-track-opacity: 1;--mat-switch-hidden-track-opacity: 1;--mat-switch-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, .2, 1);--mat-switch-hidden-track-transition: transform 75ms 0ms cubic-bezier(.4, 0, .6, 1);--mat-switch-track-outline-width: 1px;--mat-switch-track-outline-color: transparent;--mat-switch-selected-track-outline-width: 1px;--mat-switch-selected-track-outline-color: transparent;--mat-switch-disabled-unselected-track-outline-width: 1px;--mat-switch-disabled-unselected-track-outline-color: transparent}html{--mdc-switch-selected-focus-state-layer-color: rgb(9.7875, 13.4125, 19.2125);--mdc-switch-selected-handle-color: rgb(9.7875, 13.4125, 19.2125);--mdc-switch-selected-hover-state-layer-color: rgb(9.7875, 13.4125, 19.2125);--mdc-switch-selected-pressed-state-layer-color: rgb(9.7875, 13.4125, 19.2125);--mdc-switch-selected-focus-handle-color: hsl(216.9230769231, 32.5%, -24.3137254902%);--mdc-switch-selected-hover-handle-color: hsl(216.9230769231, 32.5%, -24.3137254902%);--mdc-switch-selected-pressed-handle-color: hsl(216.9230769231, 32.5%, -24.3137254902%);--mdc-switch-selected-focus-track-color: rgb(61.425, 84.175, 120.575);--mdc-switch-selected-hover-track-color: rgb(61.425, 84.175, 120.575);--mdc-switch-selected-pressed-track-color: rgb(61.425, 84.175, 120.575);--mdc-switch-selected-track-color: rgb(61.425, 84.175, 120.575);--mdc-switch-disabled-selected-handle-color: #424242;--mdc-switch-disabled-selected-icon-color: #fff;--mdc-switch-disabled-selected-track-color: #424242;--mdc-switch-disabled-unselected-handle-color: #424242;--mdc-switch-disabled-unselected-icon-color: #fff;--mdc-switch-disabled-unselected-track-color: #424242;--mdc-switch-handle-surface-color: #fff;--mdc-switch-selected-icon-color: #fff;--mdc-switch-unselected-focus-handle-color: #212121;--mdc-switch-unselected-focus-state-layer-color: #424242;--mdc-switch-unselected-focus-track-color: #e0e0e0;--mdc-switch-unselected-handle-color: #616161;--mdc-switch-unselected-hover-handle-color: #212121;--mdc-switch-unselected-hover-state-layer-color: #424242;--mdc-switch-unselected-hover-track-color: #e0e0e0;--mdc-switch-unselected-icon-color: #fff;--mdc-switch-unselected-pressed-handle-color: #212121;--mdc-switch-unselected-pressed-state-layer-color: #424242;--mdc-switch-unselected-pressed-track-color: #e0e0e0;--mdc-switch-unselected-track-color: #e0e0e0;--mdc-switch-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mdc-switch-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12)}html{--mdc-switch-disabled-label-text-color: rgba(0, 0, 0, .38)}html .mat-mdc-slide-toggle{--mat-switch-label-text-color: rgba(0, 0, 0, .87)}html .mat-mdc-slide-toggle.mat-accent{--mdc-switch-selected-focus-state-layer-color: rgb(210.4285714286, 210.4285714286, 227.5714285714);--mdc-switch-selected-handle-color: rgb(210.4285714286, 210.4285714286, 227.5714285714);--mdc-switch-selected-hover-state-layer-color: rgb(210.4285714286, 210.4285714286, 227.5714285714);--mdc-switch-selected-pressed-state-layer-color: rgb(210.4285714286, 210.4285714286, 227.5714285714);--mdc-switch-selected-focus-handle-color: rgb(115.7142857143, 115.7142857143, 169.2857142857);--mdc-switch-selected-hover-handle-color: rgb(115.7142857143, 115.7142857143, 169.2857142857);--mdc-switch-selected-pressed-handle-color: rgb(115.7142857143, 115.7142857143, 169.2857142857);--mdc-switch-selected-focus-track-color: hsl(240, 23.8095238095%, 115.8823529412%);--mdc-switch-selected-hover-track-color: hsl(240, 23.8095238095%, 115.8823529412%);--mdc-switch-selected-pressed-track-color: hsl(240, 23.8095238095%, 115.8823529412%);--mdc-switch-selected-track-color: hsl(240, 23.8095238095%, 115.8823529412%)}html .mat-mdc-slide-toggle.mat-warn{--mdc-switch-selected-focus-state-layer-color: #e53935;--mdc-switch-selected-handle-color: #e53935;--mdc-switch-selected-hover-state-layer-color: #e53935;--mdc-switch-selected-pressed-state-layer-color: #e53935;--mdc-switch-selected-focus-handle-color: #b71c1c;--mdc-switch-selected-hover-handle-color: #b71c1c;--mdc-switch-selected-pressed-handle-color: #b71c1c;--mdc-switch-selected-focus-track-color: #e57373;--mdc-switch-selected-hover-track-color: #e57373;--mdc-switch-selected-pressed-track-color: #e57373;--mdc-switch-selected-track-color: #e57373}html{--mdc-switch-state-layer-size: 40px}html{--mdc-radio-disabled-selected-icon-opacity: .38;--mdc-radio-disabled-unselected-icon-opacity: .38;--mdc-radio-state-layer-size: 40px}.mat-mdc-radio-button.mat-primary{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #1b2535;--mdc-radio-selected-hover-icon-color: #1b2535;--mdc-radio-selected-icon-color: #1b2535;--mdc-radio-selected-pressed-icon-color: #1b2535}.mat-mdc-radio-button.mat-primary{--mat-radio-ripple-color: black;--mat-radio-checked-ripple-color: #1b2535;--mat-radio-disabled-label-color: rgba(0, 0, 0, .38);--mat-radio-label-text-color: rgba(0, 0, 0, .87)}.mat-mdc-radio-button.mat-accent{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #f2f2f7;--mdc-radio-selected-hover-icon-color: #f2f2f7;--mdc-radio-selected-icon-color: #f2f2f7;--mdc-radio-selected-pressed-icon-color: #f2f2f7}.mat-mdc-radio-button.mat-accent{--mat-radio-ripple-color: black;--mat-radio-checked-ripple-color: #f2f2f7;--mat-radio-disabled-label-color: rgba(0, 0, 0, .38);--mat-radio-label-text-color: rgba(0, 0, 0, .87)}.mat-mdc-radio-button.mat-warn{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #f44336;--mdc-radio-selected-hover-icon-color: #f44336;--mdc-radio-selected-icon-color: #f44336;--mdc-radio-selected-pressed-icon-color: #f44336}.mat-mdc-radio-button.mat-warn{--mat-radio-ripple-color: black;--mat-radio-checked-ripple-color: #f44336;--mat-radio-disabled-label-color: rgba(0, 0, 0, .38);--mat-radio-label-text-color: rgba(0, 0, 0, .87)}html{--mdc-radio-state-layer-size: 40px}html{--mat-radio-touch-target-display: block}html{--mdc-slider-active-track-height: 6px;--mdc-slider-active-track-shape: 9999px;--mdc-slider-handle-height: 20px;--mdc-slider-handle-shape: 50%;--mdc-slider-handle-width: 20px;--mdc-slider-inactive-track-height: 4px;--mdc-slider-inactive-track-shape: 9999px;--mdc-slider-with-overlap-handle-outline-width: 1px;--mdc-slider-with-tick-marks-active-container-opacity: .6;--mdc-slider-with-tick-marks-container-shape: 50%;--mdc-slider-with-tick-marks-container-size: 2px;--mdc-slider-with-tick-marks-inactive-container-opacity: .6;--mdc-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12)}html{--mat-slider-value-indicator-width: auto;--mat-slider-value-indicator-height: 32px;--mat-slider-value-indicator-caret-display: block;--mat-slider-value-indicator-border-radius: 4px;--mat-slider-value-indicator-padding: 0 12px;--mat-slider-value-indicator-text-transform: none;--mat-slider-value-indicator-container-transform: translateX(-50%)}html{--mdc-slider-handle-color: #1b2535;--mdc-slider-focus-handle-color: #1b2535;--mdc-slider-hover-handle-color: #1b2535;--mdc-slider-active-track-color: #1b2535;--mdc-slider-inactive-track-color: #1b2535;--mdc-slider-with-tick-marks-inactive-container-color: #1b2535;--mdc-slider-with-tick-marks-active-container-color: white;--mdc-slider-disabled-active-track-color: #000;--mdc-slider-disabled-handle-color: #000;--mdc-slider-disabled-inactive-track-color: #000;--mdc-slider-label-container-color: #000;--mdc-slider-label-label-text-color: #fff;--mdc-slider-with-overlap-handle-outline-color: #fff;--mdc-slider-with-tick-marks-disabled-container-color: #000}html{--mat-slider-ripple-color: #1b2535;--mat-slider-hover-state-layer-color: rgba(27, 37, 53, .05);--mat-slider-focus-state-layer-color: rgba(27, 37, 53, .2);--mat-slider-value-indicator-opacity: .6}html .mat-accent{--mdc-slider-handle-color: #f2f2f7;--mdc-slider-focus-handle-color: #f2f2f7;--mdc-slider-hover-handle-color: #f2f2f7;--mdc-slider-active-track-color: #f2f2f7;--mdc-slider-inactive-track-color: #f2f2f7;--mdc-slider-with-tick-marks-inactive-container-color: #f2f2f7;--mdc-slider-with-tick-marks-active-container-color: black}html .mat-accent{--mat-slider-ripple-color: #f2f2f7;--mat-slider-hover-state-layer-color: rgba(242, 242, 247, .05);--mat-slider-focus-state-layer-color: rgba(242, 242, 247, .2)}html .mat-warn{--mdc-slider-handle-color: #f44336;--mdc-slider-focus-handle-color: #f44336;--mdc-slider-hover-handle-color: #f44336;--mdc-slider-active-track-color: #f44336;--mdc-slider-inactive-track-color: #f44336;--mdc-slider-with-tick-marks-inactive-container-color: #f44336;--mdc-slider-with-tick-marks-active-container-color: white}html .mat-warn{--mat-slider-ripple-color: #f44336;--mat-slider-hover-state-layer-color: rgba(244, 67, 54, .05);--mat-slider-focus-state-layer-color: rgba(244, 67, 54, .2)}html{--mat-menu-container-shape: 4px;--mat-menu-divider-bottom-spacing: 0;--mat-menu-divider-top-spacing: 0;--mat-menu-item-spacing: 16px;--mat-menu-item-icon-size: 24px;--mat-menu-item-leading-spacing: 16px;--mat-menu-item-trailing-spacing: 16px;--mat-menu-item-with-icon-leading-spacing: 16px;--mat-menu-item-with-icon-trailing-spacing: 16px;--mat-menu-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-menu-item-label-text-color: rgba(0, 0, 0, .87);--mat-menu-item-icon-color: rgba(0, 0, 0, .87);--mat-menu-item-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-menu-item-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-menu-container-color: white;--mat-menu-divider-color: rgba(0, 0, 0, .12)}html{--mdc-list-list-item-container-shape: 0;--mdc-list-list-item-leading-avatar-shape: 50%;--mdc-list-list-item-container-color: transparent;--mdc-list-list-item-selected-container-color: transparent;--mdc-list-list-item-leading-avatar-color: transparent;--mdc-list-list-item-leading-icon-size: 24px;--mdc-list-list-item-leading-avatar-size: 40px;--mdc-list-list-item-trailing-icon-size: 24px;--mdc-list-list-item-disabled-state-layer-color: transparent;--mdc-list-list-item-disabled-state-layer-opacity: 0;--mdc-list-list-item-disabled-label-text-opacity: .38;--mdc-list-list-item-disabled-leading-icon-opacity: .38;--mdc-list-list-item-disabled-trailing-icon-opacity: .38}html{--mat-list-active-indicator-color: transparent;--mat-list-active-indicator-shape: 4px}html{--mdc-list-list-item-label-text-color: rgba(0, 0, 0, .87);--mdc-list-list-item-supporting-text-color: rgba(0, 0, 0, .54);--mdc-list-list-item-leading-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, .38);--mdc-list-list-item-trailing-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-disabled-label-text-color: black;--mdc-list-list-item-disabled-leading-icon-color: black;--mdc-list-list-item-disabled-trailing-icon-color: black;--mdc-list-list-item-hover-label-text-color: rgba(0, 0, 0, .87);--mdc-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-focus-label-text-color: rgba(0, 0, 0, .87);--mdc-list-list-item-hover-state-layer-color: black;--mdc-list-list-item-hover-state-layer-opacity: .04;--mdc-list-list-item-focus-state-layer-color: black;--mdc-list-list-item-focus-state-layer-opacity: .12}.mdc-list-item__start,.mdc-list-item__end{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #1b2535;--mdc-radio-selected-hover-icon-color: #1b2535;--mdc-radio-selected-icon-color: #1b2535;--mdc-radio-selected-pressed-icon-color: #1b2535}.mat-accent .mdc-list-item__start,.mat-accent .mdc-list-item__end{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #f2f2f7;--mdc-radio-selected-hover-icon-color: #f2f2f7;--mdc-radio-selected-icon-color: #f2f2f7;--mdc-radio-selected-pressed-icon-color: #f2f2f7}.mat-warn .mdc-list-item__start,.mat-warn .mdc-list-item__end{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #f44336;--mdc-radio-selected-hover-icon-color: #f44336;--mdc-radio-selected-icon-color: #f44336;--mdc-radio-selected-pressed-icon-color: #f44336}.mat-mdc-list-option{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: white;--mdc-checkbox-selected-focus-icon-color: #1b2535;--mdc-checkbox-selected-hover-icon-color: #1b2535;--mdc-checkbox-selected-icon-color: #1b2535;--mdc-checkbox-selected-pressed-icon-color: #1b2535;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #1b2535;--mdc-checkbox-selected-hover-state-layer-color: #1b2535;--mdc-checkbox-selected-pressed-state-layer-color: #1b2535;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}.mat-mdc-list-option.mat-accent{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: black;--mdc-checkbox-selected-focus-icon-color: #f2f2f7;--mdc-checkbox-selected-hover-icon-color: #f2f2f7;--mdc-checkbox-selected-icon-color: #f2f2f7;--mdc-checkbox-selected-pressed-icon-color: #f2f2f7;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #f2f2f7;--mdc-checkbox-selected-hover-state-layer-color: #f2f2f7;--mdc-checkbox-selected-pressed-state-layer-color: #f2f2f7;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}.mat-mdc-list-option.mat-warn{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: white;--mdc-checkbox-selected-focus-icon-color: #f44336;--mdc-checkbox-selected-hover-icon-color: #f44336;--mdc-checkbox-selected-icon-color: #f44336;--mdc-checkbox-selected-pressed-icon-color: #f44336;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #f44336;--mdc-checkbox-selected-hover-state-layer-color: #f44336;--mdc-checkbox-selected-pressed-state-layer-color: #f44336;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start{color:#1b2535}.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end{opacity:1}html{--mdc-list-list-item-one-line-container-height: 48px;--mdc-list-list-item-two-line-container-height: 64px;--mdc-list-list-item-three-line-container-height: 88px}html{--mat-list-list-item-leading-icon-start-space: 16px;--mat-list-list-item-leading-icon-end-space: 32px}.mdc-list-item__start,.mdc-list-item__end{--mdc-radio-state-layer-size: 40px}.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:56px}.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:72px}html{--mat-paginator-container-text-color: rgba(0, 0, 0, .87);--mat-paginator-container-background-color: white;--mat-paginator-enabled-icon-color: rgba(0, 0, 0, .54);--mat-paginator-disabled-icon-color: rgba(0, 0, 0, .12)}html{--mat-paginator-container-size: 56px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block}html{--mdc-secondary-navigation-tab-container-height: 48px}html{--mdc-tab-indicator-active-indicator-height: 2px;--mdc-tab-indicator-active-indicator-shape: 0}html{--mat-tab-header-divider-color: transparent;--mat-tab-header-divider-height: 0}.mat-mdc-tab-group,.mat-mdc-tab-nav-bar{--mdc-tab-indicator-active-indicator-color: #1b2535}.mat-mdc-tab-group,.mat-mdc-tab-nav-bar{--mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);--mat-tab-header-pagination-icon-color: black;--mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-label-text-color: #1b2535;--mat-tab-header-active-ripple-color: #1b2535;--mat-tab-header-inactive-ripple-color: #1b2535;--mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-focus-label-text-color: #1b2535;--mat-tab-header-active-hover-label-text-color: #1b2535;--mat-tab-header-active-focus-indicator-color: #1b2535;--mat-tab-header-active-hover-indicator-color: #1b2535}.mat-mdc-tab-group.mat-accent,.mat-mdc-tab-nav-bar.mat-accent{--mdc-tab-indicator-active-indicator-color: #f2f2f7}.mat-mdc-tab-group.mat-accent,.mat-mdc-tab-nav-bar.mat-accent{--mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);--mat-tab-header-pagination-icon-color: black;--mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-label-text-color: #f2f2f7;--mat-tab-header-active-ripple-color: #f2f2f7;--mat-tab-header-inactive-ripple-color: #f2f2f7;--mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-focus-label-text-color: #f2f2f7;--mat-tab-header-active-hover-label-text-color: #f2f2f7;--mat-tab-header-active-focus-indicator-color: #f2f2f7;--mat-tab-header-active-hover-indicator-color: #f2f2f7}.mat-mdc-tab-group.mat-warn,.mat-mdc-tab-nav-bar.mat-warn{--mdc-tab-indicator-active-indicator-color: #f44336}.mat-mdc-tab-group.mat-warn,.mat-mdc-tab-nav-bar.mat-warn{--mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);--mat-tab-header-pagination-icon-color: black;--mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-label-text-color: #f44336;--mat-tab-header-active-ripple-color: #f44336;--mat-tab-header-inactive-ripple-color: #f44336;--mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-focus-label-text-color: #f44336;--mat-tab-header-active-hover-label-text-color: #f44336;--mat-tab-header-active-focus-indicator-color: #f44336;--mat-tab-header-active-hover-indicator-color: #f44336}.mat-mdc-tab-group.mat-background-primary,.mat-mdc-tab-nav-bar.mat-background-primary{--mat-tab-header-with-background-background-color: #1b2535;--mat-tab-header-with-background-foreground-color: white}.mat-mdc-tab-group.mat-background-accent,.mat-mdc-tab-nav-bar.mat-background-accent{--mat-tab-header-with-background-background-color: #f2f2f7;--mat-tab-header-with-background-foreground-color: black}.mat-mdc-tab-group.mat-background-warn,.mat-mdc-tab-nav-bar.mat-background-warn{--mat-tab-header-with-background-background-color: #f44336;--mat-tab-header-with-background-foreground-color: white}.mat-mdc-tab-header{--mdc-secondary-navigation-tab-container-height: 48px}html{--mdc-checkbox-disabled-selected-checkmark-color: #fff;--mdc-checkbox-selected-focus-state-layer-opacity: .16;--mdc-checkbox-selected-hover-state-layer-opacity: .04;--mdc-checkbox-selected-pressed-state-layer-opacity: .16;--mdc-checkbox-unselected-focus-state-layer-opacity: .16;--mdc-checkbox-unselected-hover-state-layer-opacity: .04;--mdc-checkbox-unselected-pressed-state-layer-opacity: .16}html{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: black;--mdc-checkbox-selected-focus-icon-color: #f2f2f7;--mdc-checkbox-selected-hover-icon-color: #f2f2f7;--mdc-checkbox-selected-icon-color: #f2f2f7;--mdc-checkbox-selected-pressed-icon-color: #f2f2f7;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #f2f2f7;--mdc-checkbox-selected-hover-state-layer-color: #f2f2f7;--mdc-checkbox-selected-pressed-state-layer-color: #f2f2f7;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}html{--mat-checkbox-disabled-label-color: rgba(0, 0, 0, .38);--mat-checkbox-label-text-color: rgba(0, 0, 0, .87)}.mat-mdc-checkbox.mat-primary{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: white;--mdc-checkbox-selected-focus-icon-color: #1b2535;--mdc-checkbox-selected-hover-icon-color: #1b2535;--mdc-checkbox-selected-icon-color: #1b2535;--mdc-checkbox-selected-pressed-icon-color: #1b2535;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #1b2535;--mdc-checkbox-selected-hover-state-layer-color: #1b2535;--mdc-checkbox-selected-pressed-state-layer-color: #1b2535;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}.mat-mdc-checkbox.mat-warn{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: white;--mdc-checkbox-selected-focus-icon-color: #f44336;--mdc-checkbox-selected-hover-icon-color: #f44336;--mdc-checkbox-selected-icon-color: #f44336;--mdc-checkbox-selected-pressed-icon-color: #f44336;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #f44336;--mdc-checkbox-selected-hover-state-layer-color: #f44336;--mdc-checkbox-selected-pressed-state-layer-color: #f44336;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}html{--mdc-checkbox-state-layer-size: 40px}html{--mat-checkbox-touch-target-display: block}html{--mdc-text-button-container-shape: 4px;--mdc-text-button-keep-touch-target: false}html{--mdc-filled-button-container-shape: 4px;--mdc-filled-button-keep-touch-target: false}html{--mdc-protected-button-container-shape: 4px;--mdc-protected-button-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);--mdc-protected-button-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mdc-protected-button-focus-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);--mdc-protected-button-hover-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);--mdc-protected-button-pressed-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mdc-outlined-button-keep-touch-target: false;--mdc-outlined-button-outline-width: 1px;--mdc-outlined-button-container-shape: 4px}html{--mat-text-button-horizontal-padding: 8px;--mat-text-button-with-icon-horizontal-padding: 8px;--mat-text-button-icon-spacing: 8px;--mat-text-button-icon-offset: 0}html{--mat-filled-button-horizontal-padding: 16px;--mat-filled-button-icon-spacing: 8px;--mat-filled-button-icon-offset: -4px}html{--mat-protected-button-horizontal-padding: 16px;--mat-protected-button-icon-spacing: 8px;--mat-protected-button-icon-offset: -4px}html{--mat-outlined-button-horizontal-padding: 15px;--mat-outlined-button-icon-spacing: 8px;--mat-outlined-button-icon-offset: -4px}html{--mdc-text-button-label-text-color: black;--mdc-text-button-disabled-label-text-color: rgba(0, 0, 0, .38)}html{--mat-text-button-state-layer-color: black;--mat-text-button-disabled-state-layer-color: black;--mat-text-button-ripple-color: rgba(0, 0, 0, .1);--mat-text-button-hover-state-layer-opacity: .04;--mat-text-button-focus-state-layer-opacity: .12;--mat-text-button-pressed-state-layer-opacity: .12}html{--mdc-filled-button-container-color: white;--mdc-filled-button-label-text-color: black;--mdc-filled-button-disabled-container-color: rgba(0, 0, 0, .12);--mdc-filled-button-disabled-label-text-color: rgba(0, 0, 0, .38)}html{--mat-filled-button-state-layer-color: black;--mat-filled-button-disabled-state-layer-color: black;--mat-filled-button-ripple-color: rgba(0, 0, 0, .1);--mat-filled-button-hover-state-layer-opacity: .04;--mat-filled-button-focus-state-layer-opacity: .12;--mat-filled-button-pressed-state-layer-opacity: .12}html{--mdc-protected-button-container-color: white;--mdc-protected-button-label-text-color: black;--mdc-protected-button-disabled-container-color: rgba(0, 0, 0, .12);--mdc-protected-button-disabled-label-text-color: rgba(0, 0, 0, .38)}html{--mat-protected-button-state-layer-color: black;--mat-protected-button-disabled-state-layer-color: black;--mat-protected-button-ripple-color: rgba(0, 0, 0, .1);--mat-protected-button-hover-state-layer-opacity: .04;--mat-protected-button-focus-state-layer-opacity: .12;--mat-protected-button-pressed-state-layer-opacity: .12}html{--mdc-outlined-button-disabled-outline-color: rgba(0, 0, 0, .12);--mdc-outlined-button-disabled-label-text-color: rgba(0, 0, 0, .38);--mdc-outlined-button-label-text-color: black;--mdc-outlined-button-outline-color: rgba(0, 0, 0, .12)}html{--mat-outlined-button-state-layer-color: black;--mat-outlined-button-disabled-state-layer-color: black;--mat-outlined-button-ripple-color: rgba(0, 0, 0, .1);--mat-outlined-button-hover-state-layer-opacity: .04;--mat-outlined-button-focus-state-layer-opacity: .12;--mat-outlined-button-pressed-state-layer-opacity: .12}.mat-mdc-button.mat-primary{--mdc-text-button-label-text-color: #1b2535}.mat-mdc-button.mat-primary{--mat-text-button-state-layer-color: #1b2535;--mat-text-button-ripple-color: rgba(27, 37, 53, .1)}.mat-mdc-button.mat-accent{--mdc-text-button-label-text-color: #f2f2f7}.mat-mdc-button.mat-accent{--mat-text-button-state-layer-color: #f2f2f7;--mat-text-button-ripple-color: rgba(242, 242, 247, .1)}.mat-mdc-button.mat-warn{--mdc-text-button-label-text-color: #f44336}.mat-mdc-button.mat-warn{--mat-text-button-state-layer-color: #f44336;--mat-text-button-ripple-color: rgba(244, 67, 54, .1)}.mat-mdc-unelevated-button.mat-primary{--mdc-filled-button-container-color: #1b2535;--mdc-filled-button-label-text-color: white}.mat-mdc-unelevated-button.mat-primary{--mat-filled-button-state-layer-color: white;--mat-filled-button-ripple-color: rgba(255, 255, 255, .1)}.mat-mdc-unelevated-button.mat-accent{--mdc-filled-button-container-color: #f2f2f7;--mdc-filled-button-label-text-color: black}.mat-mdc-unelevated-button.mat-accent{--mat-filled-button-state-layer-color: black;--mat-filled-button-ripple-color: rgba(0, 0, 0, .1)}.mat-mdc-unelevated-button.mat-warn{--mdc-filled-button-container-color: #f44336;--mdc-filled-button-label-text-color: white}.mat-mdc-unelevated-button.mat-warn{--mat-filled-button-state-layer-color: white;--mat-filled-button-ripple-color: rgba(255, 255, 255, .1)}.mat-mdc-raised-button.mat-primary{--mdc-protected-button-container-color: #1b2535;--mdc-protected-button-label-text-color: white}.mat-mdc-raised-button.mat-primary{--mat-protected-button-state-layer-color: white;--mat-protected-button-ripple-color: rgba(255, 255, 255, .1)}.mat-mdc-raised-button.mat-accent{--mdc-protected-button-container-color: #f2f2f7;--mdc-protected-button-label-text-color: black}.mat-mdc-raised-button.mat-accent{--mat-protected-button-state-layer-color: black;--mat-protected-button-ripple-color: rgba(0, 0, 0, .1)}.mat-mdc-raised-button.mat-warn{--mdc-protected-button-container-color: #f44336;--mdc-protected-button-label-text-color: white}.mat-mdc-raised-button.mat-warn{--mat-protected-button-state-layer-color: white;--mat-protected-button-ripple-color: rgba(255, 255, 255, .1)}.mat-mdc-outlined-button.mat-primary{--mdc-outlined-button-label-text-color: #1b2535;--mdc-outlined-button-outline-color: rgba(0, 0, 0, .12)}.mat-mdc-outlined-button.mat-primary{--mat-outlined-button-state-layer-color: #1b2535;--mat-outlined-button-ripple-color: rgba(27, 37, 53, .1)}.mat-mdc-outlined-button.mat-accent{--mdc-outlined-button-label-text-color: #f2f2f7;--mdc-outlined-button-outline-color: rgba(0, 0, 0, .12)}.mat-mdc-outlined-button.mat-accent{--mat-outlined-button-state-layer-color: #f2f2f7;--mat-outlined-button-ripple-color: rgba(242, 242, 247, .1)}.mat-mdc-outlined-button.mat-warn{--mdc-outlined-button-label-text-color: #f44336;--mdc-outlined-button-outline-color: rgba(0, 0, 0, .12)}.mat-mdc-outlined-button.mat-warn{--mat-outlined-button-state-layer-color: #f44336;--mat-outlined-button-ripple-color: rgba(244, 67, 54, .1)}html{--mdc-text-button-container-height: 36px}html{--mdc-filled-button-container-height: 36px}html{--mdc-protected-button-container-height: 36px}html{--mdc-outlined-button-container-height: 36px}html{--mat-text-button-touch-target-display: block}html{--mat-filled-button-touch-target-display: block}html{--mat-protected-button-touch-target-display: block}html{--mat-outlined-button-touch-target-display: block}html{--mdc-icon-button-icon-size: 24px}html{--mdc-icon-button-icon-color: inherit;--mdc-icon-button-disabled-icon-color: rgba(0, 0, 0, .38)}html{--mat-icon-button-state-layer-color: black;--mat-icon-button-disabled-state-layer-color: black;--mat-icon-button-ripple-color: rgba(0, 0, 0, .1);--mat-icon-button-hover-state-layer-opacity: .04;--mat-icon-button-focus-state-layer-opacity: .12;--mat-icon-button-pressed-state-layer-opacity: .12}html .mat-mdc-icon-button.mat-primary{--mdc-icon-button-icon-color: #1b2535}html .mat-mdc-icon-button.mat-primary{--mat-icon-button-state-layer-color: #1b2535;--mat-icon-button-ripple-color: rgba(27, 37, 53, .1)}html .mat-mdc-icon-button.mat-accent{--mdc-icon-button-icon-color: #f2f2f7}html .mat-mdc-icon-button.mat-accent{--mat-icon-button-state-layer-color: #f2f2f7;--mat-icon-button-ripple-color: rgba(242, 242, 247, .1)}html .mat-mdc-icon-button.mat-warn{--mdc-icon-button-icon-color: #f44336}html .mat-mdc-icon-button.mat-warn{--mat-icon-button-state-layer-color: #f44336;--mat-icon-button-ripple-color: rgba(244, 67, 54, .1)}html{--mat-icon-button-touch-target-display: block}.mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 48px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:12px}html{--mdc-fab-container-shape: 50%;--mdc-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mdc-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12)}html{--mdc-fab-small-container-shape: 50%;--mdc-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mdc-fab-small-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-fab-small-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12)}html{--mdc-extended-fab-container-height: 48px;--mdc-extended-fab-container-shape: 24px;--mdc-extended-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mdc-extended-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-extended-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-extended-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12)}html{--mdc-fab-container-color: white}html{--mat-fab-foreground-color: black;--mat-fab-state-layer-color: black;--mat-fab-disabled-state-layer-color: black;--mat-fab-ripple-color: rgba(0, 0, 0, .1);--mat-fab-hover-state-layer-opacity: .04;--mat-fab-focus-state-layer-opacity: .12;--mat-fab-pressed-state-layer-opacity: .12;--mat-fab-disabled-state-container-color: rgba(0, 0, 0, .12);--mat-fab-disabled-state-foreground-color: rgba(0, 0, 0, .38)}html{--mdc-fab-small-container-color: white}html{--mat-fab-small-foreground-color: black;--mat-fab-small-state-layer-color: black;--mat-fab-small-disabled-state-layer-color: black;--mat-fab-small-ripple-color: rgba(0, 0, 0, .1);--mat-fab-small-hover-state-layer-opacity: .04;--mat-fab-small-focus-state-layer-opacity: .12;--mat-fab-small-pressed-state-layer-opacity: .12;--mat-fab-small-disabled-state-container-color: rgba(0, 0, 0, .12);--mat-fab-small-disabled-state-foreground-color: rgba(0, 0, 0, .38)}html .mat-mdc-fab.mat-primary{--mdc-fab-container-color: #1b2535}html .mat-mdc-fab.mat-primary{--mat-fab-foreground-color: white;--mat-fab-state-layer-color: white;--mat-fab-ripple-color: rgba(255, 255, 255, .1)}html .mat-mdc-fab.mat-accent{--mdc-fab-container-color: #f2f2f7}html .mat-mdc-fab.mat-accent{--mat-fab-foreground-color: black;--mat-fab-state-layer-color: black;--mat-fab-ripple-color: rgba(0, 0, 0, .1)}html .mat-mdc-fab.mat-warn{--mdc-fab-container-color: #f44336}html .mat-mdc-fab.mat-warn{--mat-fab-foreground-color: white;--mat-fab-state-layer-color: white;--mat-fab-ripple-color: rgba(255, 255, 255, .1)}html .mat-mdc-mini-fab.mat-primary{--mdc-fab-small-container-color: #1b2535}html .mat-mdc-mini-fab.mat-primary{--mat-fab-small-foreground-color: white;--mat-fab-small-state-layer-color: white;--mat-fab-small-ripple-color: rgba(255, 255, 255, .1)}html .mat-mdc-mini-fab.mat-accent{--mdc-fab-small-container-color: #f2f2f7}html .mat-mdc-mini-fab.mat-accent{--mat-fab-small-foreground-color: black;--mat-fab-small-state-layer-color: black;--mat-fab-small-ripple-color: rgba(0, 0, 0, .1)}html .mat-mdc-mini-fab.mat-warn{--mdc-fab-small-container-color: #f44336}html .mat-mdc-mini-fab.mat-warn{--mat-fab-small-foreground-color: white;--mat-fab-small-state-layer-color: white;--mat-fab-small-ripple-color: rgba(255, 255, 255, .1)}html{--mat-fab-touch-target-display: block}html{--mat-fab-small-touch-target-display: block}html{--mdc-snackbar-container-shape: 4px}html{--mdc-snackbar-container-color: #333333;--mdc-snackbar-supporting-text-color: rgba(255, 255, 255, .87)}html{--mat-snack-bar-button-color: rgb(105.275, 133.525, 178.725)}html{--mat-table-row-item-outline-width: 1px}html{--mat-table-background-color: white;--mat-table-header-headline-color: rgba(0, 0, 0, .87);--mat-table-row-item-label-text-color: rgba(0, 0, 0, .87);--mat-table-row-item-outline-color: rgba(0, 0, 0, .12)}html{--mat-table-header-container-height: 56px;--mat-table-footer-container-height: 52px;--mat-table-row-item-container-height: 52px}html{--mdc-circular-progress-active-indicator-width: 4px;--mdc-circular-progress-size: 48px}html{--mdc-circular-progress-active-indicator-color: #1b2535}html .mat-accent{--mdc-circular-progress-active-indicator-color: #f2f2f7}html .mat-warn{--mdc-circular-progress-active-indicator-color: #f44336}html{--mat-badge-container-shape: 50%;--mat-badge-container-size: unset;--mat-badge-small-size-container-size: unset;--mat-badge-large-size-container-size: unset;--mat-badge-legacy-container-size: 22px;--mat-badge-legacy-small-size-container-size: 16px;--mat-badge-legacy-large-size-container-size: 28px;--mat-badge-container-offset: -11px 0;--mat-badge-small-size-container-offset: -8px 0;--mat-badge-large-size-container-offset: -14px 0;--mat-badge-container-overlap-offset: -11px;--mat-badge-small-size-container-overlap-offset: -8px;--mat-badge-large-size-container-overlap-offset: -14px;--mat-badge-container-padding: 0;--mat-badge-small-size-container-padding: 0;--mat-badge-large-size-container-padding: 0}html{--mat-badge-background-color: #1b2535;--mat-badge-text-color: white;--mat-badge-disabled-state-background-color: #b9b9b9;--mat-badge-disabled-state-text-color: rgba(0, 0, 0, .38)}.mat-badge-accent{--mat-badge-background-color: #f2f2f7;--mat-badge-text-color: black}.mat-badge-warn{--mat-badge-background-color: #f44336;--mat-badge-text-color: white}html{--mat-bottom-sheet-container-shape: 4px}html{--mat-bottom-sheet-container-text-color: rgba(0, 0, 0, .87);--mat-bottom-sheet-container-background-color: white}html{--mat-legacy-button-toggle-height: 36px;--mat-legacy-button-toggle-shape: 2px;--mat-legacy-button-toggle-focus-state-layer-opacity: 1}html{--mat-standard-button-toggle-shape: 4px;--mat-standard-button-toggle-hover-state-layer-opacity: .04;--mat-standard-button-toggle-focus-state-layer-opacity: .12}html{--mat-legacy-button-toggle-text-color: rgba(0, 0, 0, .38);--mat-legacy-button-toggle-state-layer-color: rgba(0, 0, 0, .12);--mat-legacy-button-toggle-selected-state-text-color: rgba(0, 0, 0, .54);--mat-legacy-button-toggle-selected-state-background-color: #e0e0e0;--mat-legacy-button-toggle-disabled-state-text-color: rgba(0, 0, 0, .26);--mat-legacy-button-toggle-disabled-state-background-color: #eeeeee;--mat-legacy-button-toggle-disabled-selected-state-background-color: #bdbdbd}html{--mat-standard-button-toggle-text-color: rgba(0, 0, 0, .87);--mat-standard-button-toggle-background-color: white;--mat-standard-button-toggle-state-layer-color: black;--mat-standard-button-toggle-selected-state-background-color: #e0e0e0;--mat-standard-button-toggle-selected-state-text-color: rgba(0, 0, 0, .87);--mat-standard-button-toggle-disabled-state-text-color: rgba(0, 0, 0, .26);--mat-standard-button-toggle-disabled-state-background-color: white;--mat-standard-button-toggle-disabled-selected-state-text-color: rgba(0, 0, 0, .87);--mat-standard-button-toggle-disabled-selected-state-background-color: #bdbdbd;--mat-standard-button-toggle-divider-color: rgb(224.4, 224.4, 224.4)}html{--mat-standard-button-toggle-height: 48px}html{--mat-datepicker-calendar-container-shape: 4px;--mat-datepicker-calendar-container-touch-shape: 4px;--mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);--mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12)}html{--mat-datepicker-calendar-date-selected-state-text-color: white;--mat-datepicker-calendar-date-selected-state-background-color: #1b2535;--mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(27, 37, 53, .4);--mat-datepicker-calendar-date-today-selected-state-outline-color: white;--mat-datepicker-calendar-date-focus-state-background-color: rgba(27, 37, 53, .3);--mat-datepicker-calendar-date-hover-state-background-color: rgba(27, 37, 53, .3);--mat-datepicker-toggle-active-state-icon-color: #1b2535;--mat-datepicker-calendar-date-in-range-state-background-color: rgba(27, 37, 53, .2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);--mat-datepicker-toggle-icon-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-period-button-text-color: black;--mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, .12);--mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, .38);--mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(0, 0, 0, .18);--mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, .87);--mat-datepicker-calendar-date-outline-color: transparent;--mat-datepicker-calendar-date-disabled-state-text-color: rgba(0, 0, 0, .38);--mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, .24);--mat-datepicker-range-input-separator-color: rgba(0, 0, 0, .87);--mat-datepicker-range-input-disabled-state-separator-color: rgba(0, 0, 0, .38);--mat-datepicker-range-input-disabled-state-text-color: rgba(0, 0, 0, .38);--mat-datepicker-calendar-container-background-color: white;--mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, .87)}.mat-datepicker-content.mat-accent{--mat-datepicker-calendar-date-selected-state-text-color: black;--mat-datepicker-calendar-date-selected-state-background-color: #f2f2f7;--mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(242, 242, 247, .4);--mat-datepicker-calendar-date-today-selected-state-outline-color: black;--mat-datepicker-calendar-date-focus-state-background-color: rgba(242, 242, 247, .3);--mat-datepicker-calendar-date-hover-state-background-color: rgba(242, 242, 247, .3);--mat-datepicker-calendar-date-in-range-state-background-color: rgba(242, 242, 247, .2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032)}.mat-datepicker-content.mat-warn{--mat-datepicker-calendar-date-selected-state-text-color: white;--mat-datepicker-calendar-date-selected-state-background-color: #f44336;--mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(244, 67, 54, .4);--mat-datepicker-calendar-date-today-selected-state-outline-color: white;--mat-datepicker-calendar-date-focus-state-background-color: rgba(244, 67, 54, .3);--mat-datepicker-calendar-date-hover-state-background-color: rgba(244, 67, 54, .3);--mat-datepicker-calendar-date-in-range-state-background-color: rgba(244, 67, 54, .2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032)}.mat-datepicker-toggle-active.mat-accent{--mat-datepicker-toggle-active-state-icon-color: #f2f2f7}.mat-datepicker-toggle-active.mat-warn{--mat-datepicker-toggle-active-state-icon-color: #f44336}.mat-calendar-controls{--mat-icon-button-touch-target-display: none}.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:8px}html{--mat-divider-width: 1px}html{--mat-divider-color: rgba(0, 0, 0, .12)}html{--mat-expansion-container-shape: 4px;--mat-expansion-legacy-header-indicator-display: inline-block;--mat-expansion-header-indicator-display: none}html{--mat-expansion-container-background-color: white;--mat-expansion-container-text-color: rgba(0, 0, 0, .87);--mat-expansion-actions-divider-color: rgba(0, 0, 0, .12);--mat-expansion-header-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-expansion-header-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-expansion-header-disabled-state-text-color: rgba(0, 0, 0, .26);--mat-expansion-header-text-color: rgba(0, 0, 0, .87);--mat-expansion-header-description-color: rgba(0, 0, 0, .54);--mat-expansion-header-indicator-color: rgba(0, 0, 0, .54)}html{--mat-expansion-header-collapsed-state-height: 48px;--mat-expansion-header-expanded-state-height: 64px}html{--mat-icon-color: inherit}.mat-icon.mat-primary{--mat-icon-color: #1b2535}.mat-icon.mat-accent{--mat-icon-color: #f2f2f7}.mat-icon.mat-warn{--mat-icon-color: #f44336}html{--mat-sidenav-container-shape: 0;--mat-sidenav-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12);--mat-sidenav-container-width: auto}html{--mat-sidenav-container-divider-color: rgba(0, 0, 0, .12);--mat-sidenav-container-background-color: white;--mat-sidenav-container-text-color: rgba(0, 0, 0, .87);--mat-sidenav-content-background-color: #fafafa;--mat-sidenav-content-text-color: rgba(0, 0, 0, .87);--mat-sidenav-scrim-color: rgba(0, 0, 0, .6)}html{--mat-stepper-header-icon-foreground-color: white;--mat-stepper-header-selected-state-icon-background-color: #1b2535;--mat-stepper-header-selected-state-icon-foreground-color: white;--mat-stepper-header-done-state-icon-background-color: #1b2535;--mat-stepper-header-done-state-icon-foreground-color: white;--mat-stepper-header-edit-state-icon-background-color: #1b2535;--mat-stepper-header-edit-state-icon-foreground-color: white;--mat-stepper-container-color: white;--mat-stepper-line-color: rgba(0, 0, 0, .12);--mat-stepper-header-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-stepper-header-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-stepper-header-label-text-color: rgba(0, 0, 0, .54);--mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, .54);--mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, .87);--mat-stepper-header-error-state-label-text-color: #f44336;--mat-stepper-header-icon-background-color: rgba(0, 0, 0, .54);--mat-stepper-header-error-state-icon-foreground-color: #f44336;--mat-stepper-header-error-state-icon-background-color: transparent}html .mat-step-header.mat-accent{--mat-stepper-header-icon-foreground-color: black;--mat-stepper-header-selected-state-icon-background-color: #f2f2f7;--mat-stepper-header-selected-state-icon-foreground-color: black;--mat-stepper-header-done-state-icon-background-color: #f2f2f7;--mat-stepper-header-done-state-icon-foreground-color: black;--mat-stepper-header-edit-state-icon-background-color: #f2f2f7;--mat-stepper-header-edit-state-icon-foreground-color: black}html .mat-step-header.mat-warn{--mat-stepper-header-icon-foreground-color: white;--mat-stepper-header-selected-state-icon-background-color: #f44336;--mat-stepper-header-selected-state-icon-foreground-color: white;--mat-stepper-header-done-state-icon-background-color: #f44336;--mat-stepper-header-done-state-icon-foreground-color: white;--mat-stepper-header-edit-state-icon-background-color: #f44336;--mat-stepper-header-edit-state-icon-foreground-color: white}html{--mat-stepper-header-height: 72px}html{--mat-sort-arrow-color: rgb(117.3, 117.3, 117.3)}html{--mat-toolbar-container-background-color: whitesmoke;--mat-toolbar-container-text-color: rgba(0, 0, 0, .87)}.mat-toolbar.mat-primary{--mat-toolbar-container-background-color: #1b2535;--mat-toolbar-container-text-color: white}.mat-toolbar.mat-accent{--mat-toolbar-container-background-color: #f2f2f7;--mat-toolbar-container-text-color: black}.mat-toolbar.mat-warn{--mat-toolbar-container-background-color: #f44336;--mat-toolbar-container-text-color: white}html{--mat-toolbar-standard-height: 64px;--mat-toolbar-mobile-height: 56px}html{--mat-tree-container-background-color: white;--mat-tree-node-text-color: rgba(0, 0, 0, .87)}html{--mat-tree-node-min-height: 48px}html{--mat-timepicker-container-shape: 4px;--mat-timepicker-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-timepicker-container-background-color: white}:root{--primary-color: #1b2535;--primary-lighter-color: rgb(78.6375, 107.7625, 154.3625);--primary-darker-color: hsl(216.9230769231, 32.5%, -4.3137254902%);--accent-color: #f2f2f7;--accent-lighter-color: #f3f5f9;--accent-lightest-color: hsl(240, 23.8095238095%, 125.8823529412%);--accent-darker-color: rgb(178.8571428571, 178.8571428571, 208.1428571429);--warn-color: #f44336;--warn-lighter-color: #ef9a9a;--warn-darker-color: #d32f2f;--background-color: #f2f2f7;--border-color: #e1e1e1;--text-color: #4a5568}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-slide,.swiper-cube-shadow{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:\"\";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top,.swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress),.swiper-watch-progress .swiper-slide-visible{.swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ud-custom-field{display:block;width:100%}.ud-custom-field.mat-mdc-form-field,.ud-custom-field .mat-mdc-text-field-wrapper,.ud-custom-field .mat-mdc-form-field-wrapper,.ud-custom-field .mat-mdc-form-field-subscript-wrapper{width:100%;box-sizing:border-box}.ud-custom-field .mat-mdc-text-field-wrapper{background:var(--ud-field-bg)!important;transition:background .2s ease}.ud-custom-field:hover .mat-mdc-text-field-wrapper{background:var(--ud-field-bg-hover)!important}.ud-custom-field.mat-form-field-disabled{opacity:.6;cursor:not-allowed}.ud-custom-field.mat-form-field-disabled .mat-mdc-text-field-wrapper,.ud-custom-field.mat-form-field-disabled .mat-mdc-form-field-flex,.ud-custom-field.mat-form-field-disabled input,.ud-custom-field.mat-form-field-disabled .mat-mdc-select{cursor:not-allowed;pointer-events:none}.ud-custom-field .mat-mdc-form-field-flex{background:transparent;border-radius:var(--ud-field-radius)}.ud-custom-field .mat-mdc-form-field-infix,.ud-custom-field .mat-mdc-select-value{font-family:var(--ud-field-font);font-size:.925rem;color:var(--ud-field-text)}.ud-custom-field .mat-mdc-floating-label{font-family:var(--ud-field-font);font-size:.925rem;color:var(--ud-field-text-muted);font-weight:400}.ud-custom-field.mat-focused .mat-mdc-floating-label{color:var(--ud-field-border-focus)}.ud-custom-field .mdc-notched-outline__leading,.ud-custom-field .mdc-notched-outline__notch,.ud-custom-field .mdc-notched-outline__trailing{border-color:var(--ud-field-border)!important;transition:border-color .2s ease;background:transparent!important}.ud-custom-field .mdc-notched-outline__notch{border-left:none!important}.ud-custom-field.mat-focused .mdc-notched-outline__leading,.ud-custom-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--ud-field-border-focus)!important;border-width:1.5px!important}.ud-custom-field .mat-mdc-form-field-icon-prefix:after{display:none!important}.ud-custom-field .mat-icon[matPrefix]{color:var(--ud-field-text-muted);font-size:19px;width:19px;height:19px;margin-right:4px;transition:color .2s ease}.ud-custom-field.mat-focused .mat-icon[matPrefix]{color:var(--ud-field-border-focus)}.ud-custom-field .mat-mdc-chip.mat-mdc-standard-chip{background:var(--ud-navy-dim)!important;color:var(--ud-navy)!important;font-family:var(--ud-field-font);font-size:.78rem;font-weight:500;border:1px solid var(--ud-navy-mid);height:22px}.ud-custom-field .mat-mdc-chip.mat-mdc-standard-chip .mdc-evolution-chip__text-label{color:var(--ud-navy)!important;font-size:.78rem}.ud-custom-field.ud-chip-select .mat-mdc-form-field-infix{padding-top:.5rem;padding-bottom:0}.mat-mdc-chip.mat-mdc-standard-chip{background:var(--ud-navy-dim)!important;color:var(--ud-navy)!important;font-family:var(--ud-field-font);font-size:.78rem;font-weight:500;border:1px solid var(--ud-navy-mid);height:22px}.mat-mdc-chip.mat-mdc-standard-chip .mdc-evolution-chip__text-label{color:var(--ud-navy)!important;font-size:.78rem}:root{--ud-field-bg: #f4f5f7;--ud-field-bg-hover: #eff1f5;--ud-field-border: #c9cdd6;--ud-field-border-focus: #1b2535;--ud-field-radius: 6px;--ud-field-text: #1b2535;--ud-field-text-muted: #6b7585;--ud-field-font: \"DM Sans\", system-ui, sans-serif;--ud-navy: #1b2535;--ud-navy-dim: rgba(27, 37, 53, .08);--ud-navy-mid: rgba(27, 37, 53, .18)}html,body{margin:0}:host{--eu-navy: #1b2535;--eu-navy-soft: #253347;--eu-navy-dim: rgba(27, 37, 53, .08);--eu-navy-mid: rgba(27, 37, 53, .18);--eu-surface: #ffffff;--eu-bg: #f4f5f7;--eu-border: #e2e5ea;--eu-border-mid: #c9cdd6;--eu-text: #1b2535;--eu-muted: #6b7585;--eu-danger: var(--danger, #e53935);--eu-radius: 10px;--eu-radius-sm: 6px;--eu-shadow: 0 2px 12px rgba(27, 37, 53, .06), 0 1px 4px rgba(27, 37, 53, .04);--eu-shadow-btn: 0 4px 14px rgba(27, 37, 53, .22);font-family:DM Sans,system-ui,sans-serif}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px #fafafa inset!important;background-color:#fafafa!important}p{font:20px Roboto,Helvetica Neue,sans-serif}.w-max-content{width:max-content}.ud-text-theme-primary{color:#1b2535}.ud-text-theme-primary-darker{color:#0c1a27}.ud-text-primary,.ud-text-white{color:#f5f6f7}.ud-dashed-container{border:1px dashed #373f4c;border-radius:10px}.text-large{font-size:large}.text-small{font-size:small}.text-smaller{font-size:smaller}.bg-accent{background-color:var(--accent-color)}.bg-accent-lighter{background-color:var(--accent-lighter-color)}.bg-accent-lightest{background-color:var(--accent-lightest-color)}.pointer:hover{cursor:pointer;outline:1px solid var(--accent-color);background-color:var(--accent-lightest-color)}.custom-snackbar-container.mat-mdc-snack-bar-container{--mat-snack-bar-button-color: transparent;--mdc-snackbar-container-color: transparent !important;--mdc-snackbar-supporting-text-color: transparent;box-shadow:none!important;padding:0!important;margin:8px!important;background:transparent!important}.mat-mdc-snack-bar-container.custom-snackbar-container .mdc-snackbar__surface{background:transparent!important;background-color:transparent!important;box-shadow:none!important;padding:0!important}.mat-mdc-snack-bar-container.custom-snackbar-container .mat-mdc-snack-bar-label{padding:0!important;margin:0!important}.mat-mdc-snack-bar-container.custom-snackbar-container .mdc-snackbar__label{padding:0!important}.table-div .separate-filters{display:flex;flex-direction:column}.table-div .separate-filters .filter-dropdown{width:fit-content}.table-div .separate-filters .filters{display:flex;flex-direction:row;gap:8px;margin:0 24px 1rem}.table-div .separate-filters .filters .filter mat-icon{margin-right:0!important}.table-div mat-card.table-card{border-radius:10px!important;overflow:hidden;box-shadow:0 2px 12px #373f4c1a!important;background:#fff!important}.table-div mat-card.table-card mat-card-header.table-header{padding:14px 16px 14px 12px;background:var(--accent-lightest-color);border-bottom:1px solid var(--accent-color);min-height:65px}.table-div mat-card.table-card mat-card-header.table-header ::ng-deep .mat-mdc-card-header-text{display:none}.table-div mat-card.table-card mat-card-header.table-header .table-header-icon{color:var(--primary-color);font-size:20px;width:20px;height:20px}.table-div mat-card.table-card mat-card-header.table-header .table-title{margin-bottom:0;font-size:.9375rem;font-weight:600;letter-spacing:.01em;color:#373f4c}.table-div mat-card.table-card mat-card-content{padding:0}.table-div mat-card.table-card mat-card-content .no-data-found{display:flex;flex-direction:column;justify-content:center;align-items:center;height:140px;gap:8px;background:#fff}.table-div mat-card.table-card mat-card-content .no-data-found .no-data-icon{font-size:40px;width:40px;height:40px;color:var(--accent-darker-color);opacity:.45}.table-div mat-card.table-card mat-card-content .no-data-found .no-data-text{font-size:.875rem;color:#373f4c80;margin:0}.table-div mat-card.table-card mat-card-content .loading-container{display:flex;justify-content:center;align-items:center;padding:32px;background:#fff}.table-div mat-card.table-card mat-card-content mat-paginator{border-radius:0 0 10px 10px;background-color:#dde3ec!important;border-top:1px solid #c8c8d4}.table-div .action-buttons-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.table-div tr td,.table-div tr th{border-bottom:1px solid var(--accent-color);color:#373f4c;padding:10px 8px}.table-div tr th{background-color:#dde3ec;font-weight:600;font-size:.9rem;letter-spacing:.05em}.table-div tr th:first-of-type,.table-div tr td:first-of-type{padding-left:20px}.table-div tr th:last-of-type,.table-div tr td:last-of-type{padding-right:20px}table{width:100%}.mat-mdc-form-field{font-size:14px}.mat-mdc-form-field ::ng-deep .mat-mdc-text-field-wrapper{max-height:45px;padding-left:4px}.mat-mdc-form-field ::ng-deep .mat-mdc-text-field-wrapper [class^=mdc-notched-outline__]{border:none;border-bottom:1px solid #929293;border-radius:0}.mat-mdc-form-field ::ng-deep .mat-mdc-text-field-wrapper [class^=mdc-notched-outline__]:first-of-type{display:none}.mat-mdc-icon-button.mat-mdc-button-base{padding:10px}.spacer{flex:1 1 auto}.link{color:#459fff;font-weight:600;cursor:pointer}.filter{font-size:100%;border-top:.84375em solid rgba(0,0,0,0)}tr.detail-row{height:0}.element-row td{border-bottom-width:0}.element-detail{overflow:hidden;display:flex}.element-detail>img{max-height:100%}.element-symbol{font-weight:700;font-size:40px;line-height:normal}.element-description{padding:16px}.element-description-attribution{opacity:.5}.pills{display:flex;flex-direction:column;gap:16px;margin:8px 2px}::ng-deep .ud-actions-menu{border-radius:10px!important;box-shadow:0 4px 20px #1b25351a,0 1px 4px #1b25350f!important;border:1px solid rgba(27,37,53,.08);overflow:hidden;min-width:200px!important}::ng-deep .ud-actions-menu .mat-mdc-menu-content{padding:4px!important}::ng-deep .ud-actions-menu .ud-menu-item{display:flex;align-items:center;gap:0;height:40px;min-height:40px;padding:0 12px 0 0!important;border-radius:7px;margin:1px 0;position:relative;overflow:hidden;transition:background .15s ease}::ng-deep .ud-actions-menu .ud-menu-item ::ng-deep .mat-mdc-menu-item-text{display:flex}::ng-deep .ud-actions-menu .ud-menu-item:before{content:\"\";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 2px 2px 0;background:#1b2535;transform:scaleY(0);transform-origin:center;transition:transform .18s cubic-bezier(.4,0,.2,1)}::ng-deep .ud-actions-menu .ud-menu-item:hover:not([disabled]):before{transform:scaleY(1)}::ng-deep .ud-actions-menu .ud-menu-item:hover:not([disabled]){background:#1b25350d!important}::ng-deep .ud-actions-menu .ud-menu-item[disabled]{opacity:.38}::ng-deep .ud-actions-menu .ud-menu-item .ud-menu-item__icon-wrap{display:flex;align-items:center;justify-content:center;width:40px;flex-shrink:0}::ng-deep .ud-actions-menu .ud-menu-item .ud-menu-item__icon-wrap mat-icon{font-size:17px;width:17px;height:17px;color:#6b7585;transition:color .15s ease}::ng-deep .ud-actions-menu .ud-menu-item:hover:not([disabled]) .ud-menu-item__icon-wrap mat-icon{color:#1b2535}::ng-deep .ud-actions-menu .ud-menu-item .ud-menu-item__label{font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;font-weight:500;color:#1b2535;letter-spacing:.01em;white-space:nowrap}::ng-deep .ud-actions-menu .ud-menu-item .mdc-list-item__primary-text{display:none!important}.filter-button-trigger--active{background-color:#1b25350f!important;border-color:#1b2535!important;color:#1b2535!important;font-weight:600!important}.filter-button-trigger--active .filter-clear-icon{font-size:16px!important;width:16px!important;height:16px!important;border-radius:50%;transition:background .15s ease}.filter-button-trigger--active .filter-clear-icon:hover{background:#1b25351f}::ng-deep .custom-dropdown{min-width:280px!important;max-width:650px!important;width:auto!important;max-height:none!important;overflow:visible!important;border-radius:10px!important;box-shadow:0 4px 20px #1b25351a,0 1px 4px #1b25350f!important}::ng-deep .custom-dropdown .mat-mdc-menu-content{padding:14px;width:100%;box-sizing:border-box}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content{box-sizing:border-box}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content .boolean-content{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:200px;padding:4px 0}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content .boolean-content .boolean-label{font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;font-weight:500;color:#1b2535}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content .date-content{width:320px}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content .date-content ud-date-range-input{display:block;width:100%}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content .string-content{display:flex;gap:1rem}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content mat-form-field{width:100%}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content mat-form-field .mat-mdc-form-field{font-size:14px}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content mat-form-field input{width:100%;box-sizing:border-box}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content .number-content{display:flex;flex-direction:column;gap:8px;width:100%}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content .number-content ud-multi-select{width:100%}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content .number-content .number-range-row{display:flex;gap:8px;width:100%}\n"], dependencies: [{ kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "pipe", type: ToObservablePipe, name: "toObservable" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: ToggleComponent, selector: "ud-toggle", inputs: ["controlName", "size", "label", "labelPosition", "ariaLabel"], outputs: ["onChange"] }, { kind: "component", type: DateRangeInputComponent, selector: "ud-date-range-input", inputs: ["startControlName", "endControlName", "label", "icon", "iconFontSet", "startPlaceholder", "endPlaceholder", "min", "max", "disabled", "hint"] }, { kind: "component", type: TextInputComponent, selector: "ud-text-input", inputs: ["controlName", "label", "placeholder", "type", "icon", "iconFontSet", "loading", "step", "min", "max", "disabled", "hint", "size", "clearable"] }, { kind: "component", type: MultiSelectComponent, selector: "ud-multi-select", inputs: ["controlName", "label", "icon", "iconFontSet", "options", "multiple", "maxChipsVisible", "moreText", "loading", "disabled", "hint"] }, { kind: "component", type: UdButtonComponent, selector: "ud-button", inputs: ["variant", "color", "size", "type", "icon", "iconPosition", "iconFontSet", "loading", "disabled", "fullWidth"] }], animations: [
|
|
1765
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CustomTableComponent, deps: [{ token: TranslateWrapperService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1766
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CustomTableComponent, isStandalone: true, selector: "ud-table", inputs: { id: "id", title: "title", icon: "icon", actions: "actions", haveCheckbox: "haveCheckbox", displayedColumns: "displayedColumns", dataSource: "dataSource", paginationSizeOptions: "paginationSizeOptions", initialPageSize: "initialPageSize", specificSelectRow: "specificSelectRow", hasFilter: "hasFilter", expandableRows: "expandableRows", expandedItem: "expandedItem", emptyMessage: "emptyMessage", isLoading: "isLoading", separateFilters: "separateFilters", showPaginator: "showPaginator", noTableDataMessage: "noTableDataMessage", actionsMenuEnabled: "actionsMenuEnabled", menuItems: "menuItems", totalElements: "totalElements", serverSideFiltering: "serverSideFiltering", disableHeader: "disableHeader" }, outputs: { actionClicked: "actionClicked", clicked: "clicked", queryChange: "queryChange" }, queries: [{ propertyName: "actionsTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "paginatorRef", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "allFilterInput", first: true, predicate: ["allFilterInput"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"table-div\">\n <mat-card\n appearance=\"outlined\"\n class=\"px-0 table-card\"\n [ngClass]=\"[actions.length === 0 ? 'pt-2' : 'pb-0']\"\n style=\"border-color: var(--accent-darker-color)\">\n @if (!disableHeader) {\n <mat-card-header\n class=\"d-flex justify-content-between align-items-center table-header\"\n [ngClass]=\"[actions.length === 0 ? 'pb-3' : 'pb-0']\">\n <div class=\"d-flex align-items-center\">\n @if (icon) {\n <mat-icon\n fontSet=\"material-icons-outlined\"\n class=\"table-header-icon ml-3\">\n {{ icon }}\n </mat-icon>\n }\n <h6 class=\"ml-2 table-title\">\n {{ title | toObservable | async | capitalize }}\n </h6>\n </div>\n <div class=\"d-flex align-items-center action-buttons-group pr-2\">\n @for (action of actions; track action.id) {\n <ud-button\n [attr.data-action-id]=\"action.id\"\n [variant]=\"action.variant ?? 'stroked'\"\n [color]=\"action.color ?? 'primary'\"\n [icon]=\"action.icon\"\n [disabled]=\"action.disabled?.(selection) ?? false\"\n size=\"sm\"\n (click)=\"onActionClicked(action)\">\n {{ action.label | toObservable | async | capitalize }}\n </ud-button>\n }\n @if (actionsMenuEnabled) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n icon=\"keyboard_arrow_down\"\n iconPosition=\"right\"\n [matMenuTriggerFor]=\"menu\">\n {{ 'names.action' | translate | pluralize | capitalize }}\n </ud-button>\n <mat-menu #menu=\"matMenu\" class=\"ud-actions-menu\">\n @if (menuItems.length > 0) {\n @for (item of menuItems; track item.label; let last = $last) {\n <button\n mat-menu-item\n class=\"ud-menu-item\"\n [disabled]=\"item.disabled?.(selection)\"\n (click)=\"item.clickFn(selection)\">\n <span class=\"ud-menu-item__icon-wrap\">\n <mat-icon fontSet=\"material-icons-outlined\">{{\n item.icon\n }}</mat-icon>\n </span>\n <span class=\"ud-menu-item__label\">{{ item.label }}</span>\n </button>\n }\n } @else {\n <ng-container\n *ngTemplateOutlet=\"\n actionsTemplate;\n context: {\n selection: selection,\n data: dataSource.data,\n selectedRows: selection.selected,\n }\n \"></ng-container>\n }\n </mat-menu>\n }\n </div>\n </mat-card-header>\n }\n <mat-card-content>\n @if (!separateFilters) {\n <mat-form-field\n class=\"ml-4\"\n appearance=\"outline\"\n [ngStyle]=\"{ display: hasFilter ? '' : 'none' }\">\n <mat-icon class=\"filter p-0\" matSuffix>filter_alt</mat-icon>\n <mat-label>{{ 'table.filter' | translate | capitalize }}</mat-label>\n <input\n #allFilterInput\n matInput\n (keyup)=\"applyFilterToAllColumns($event)\"\n [placeholder]=\"'table.sortOnAnyField' | translate | capitalize\" />\n </mat-form-field>\n } @else {\n <div class=\"separate-filters\">\n <form [formGroup]=\"filterByColumnFormGroup\" class=\"filters\">\n @for (filter of selectedFilters; track filter) {\n <div class=\"filter\">\n @if (\n filter.type === TableDisplayColumnType.HYPERLINK ||\n filter.type === TableDisplayColumnType.TEXT ||\n filter.type === TableDisplayColumnType.PHONE ||\n filter.type === TableDisplayColumnType.CLICK ||\n filter.type === TableDisplayColumnType.ARRAY\n ) {\n <ud-text-input\n [controlName]=\"filter.property\"\n [placeholder]=\"\n filter.name | toObservable | async | capitalize\n \"\n size=\"small\"\n [clearable]=\"true\" />\n } @else {\n <ud-button\n variant=\"stroked\"\n color=\"secondary\"\n size=\"sm\"\n icon=\"keyboard_arrow_down\"\n iconPosition=\"right\"\n [class.filter-button-trigger--active]=\"\n hasFilterValue(filter.property)\n \"\n [matMenuTriggerFor]=\"dropdownMenu\">\n {{ filter.name | toObservable | async | capitalize }}\n @if (hasFilterValue(filter.property)) {\n <mat-icon\n class=\"filter-clear-icon\"\n (click)=\"\n clearFilter(filter.property); $event.stopPropagation()\n \">\n close\n </mat-icon>\n }\n </ud-button>\n <mat-menu #dropdownMenu=\"matMenu\" class=\"custom-dropdown\">\n <div\n class=\"dropdown-content\"\n (click)=\"$event.stopPropagation()\">\n @if (filter.type === TableDisplayColumnType.BOOLEAN) {\n <div class=\"boolean-content\">\n <span class=\"boolean-label\">\n {{\n filter.name | toObservable | async | capitalize\n }}\n </span>\n <ud-toggle\n [formControlName]=\"filter.property\"\n size=\"md\" />\n </div>\n } @else if (\n filter.type === TableDisplayColumnType.NUMBER ||\n filter.type === TableDisplayColumnType.MONEY\n ) {\n <div\n class=\"number-content\"\n [formGroupName]=\"filter.property\">\n <ud-multi-select\n controlName=\"operation\"\n [multiple]=\"false\"\n [label]=\"'table.operationType' | translate | capitalize\"\n [options]=\"numberOperationOptions\" />\n @if (\n filterByColumnFormGroup.controls[filter.property]\n .value.operation &&\n filterByColumnFormGroup.controls[filter.property]\n .value.operation !== NumberOperator.BETWEEN\n ) {\n <ud-text-input\n controlName=\"value\"\n type=\"number\"\n [label]=\"\n 'operators.' +\n filterByColumnFormGroup.controls[\n filter.property\n ].value.operation\n | translate\n | capitalize\n \" />\n } @else if (\n filterByColumnFormGroup.controls[filter.property]\n .value.operation\n ) {\n <div class=\"number-range-row\">\n <ud-text-input\n controlName=\"min\"\n type=\"number\"\n [label]=\"\n 'operators.minimum' | translate | capitalize\n \" />\n <ud-text-input\n controlName=\"max\"\n type=\"number\"\n [min]=\"\n filterByColumnFormGroup.controls[\n filter.property\n ].value.min\n \"\n [label]=\"\n 'operators.maximum' | translate | capitalize\n \" />\n </div>\n }\n </div>\n } @else if (\n filter.type === TableDisplayColumnType.DATETIME ||\n filter.type === TableDisplayColumnType.DATE\n ) {\n <div\n [formGroupName]=\"filter.property\"\n class=\"date-content\">\n <ud-date-range-input\n startControlName=\"start\"\n endControlName=\"end\"\n [label]=\"'table.dateRange' | translate | capitalize\"\n [startPlaceholder]=\"'table.startDate' | translate | capitalize\"\n [endPlaceholder]=\"'table.endDate' | translate | capitalize\" />\n </div>\n }\n </div>\n </mat-menu>\n }\n </div>\n }\n </form>\n </div>\n }\n @if (!isLoading) {\n @if (dataSource.filteredData.length > 0) {\n <table\n mat-table\n matSort\n [matSortActive]=\"initSortedCol?.property!\"\n [matSortDirection]=\"initSortedCol?.initSort!\"\n [multiTemplateDataRows]=\"expandableRows\"\n [dataSource]=\"dataSource\">\n <!-- Checkbox Column -->\n @if (displayCheckbox) {\n <ng-container matColumnDef=\"select\">\n <th\n [ngStyle]=\"{ width: actionColumnStyleWidth }\"\n class=\"checkbox-header\"\n mat-header-cell\n *matHeaderCellDef>\n <mat-checkbox\n (change)=\"$event ? toggleAllRows() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [aria-label]=\"checkboxLabel()\"\n color=\"primary\">\n </mat-checkbox>\n </th>\n <td\n [ngStyle]=\"{ width: actionColumnStyleWidth }\"\n class=\"checkbox-cell\"\n mat-cell\n *matCellDef=\"let row\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [aria-label]=\"checkboxLabel(row)\"\n class=\"mt-2 mr-2\"\n color=\"primary\">\n </mat-checkbox>\n </td>\n </ng-container>\n }\n @for (column of displayedColumnsWithoutSelect; track column) {\n <ng-container matColumnDef=\"{{ column.property }}\">\n <th\n [ngStyle]=\"{ width: getColumnWidth(column) }\"\n mat-header-cell\n *matHeaderCellDef>\n {{ column.name | toObservable | async | capitalize }}\n </th>\n <td\n [ngStyle]=\"{ width: getColumnWidth(column) }\"\n mat-cell\n *matCellDef=\"let row; let index = index\"\n (click)=\"column.dataCellTemplate && $event.stopPropagation()\">\n @if (column.dataCellTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n column.dataCellTemplate;\n context: { $implicit: row, index }\n \" />\n } @else if (column.type) {\n @switch (column.type) {\n @case (tableDisplayColumnType.ARRAY) {\n <span>\n {{\n column.transformFn?.(row[column.property]) ??\n row[column.property].join(', ')\n }}\n </span>\n }\n @case (tableDisplayColumnType.TEXT) {\n <span\n [innerHTML]=\"\n column.transformFn?.(row[column.property]) ??\n row[column.property]\n \">\n </span>\n }\n @case (tableDisplayColumnType.NUMBER) {\n <span\n [innerHTML]=\"\n column.transformFn?.(row[column.property]) ??\n row[column.property]\n \">\n </span>\n }\n @case (tableDisplayColumnType.TEXT_OBSERVABLES) {\n <span>\n {{ row[column.property] | async | capitalize }}\n </span>\n }\n @case (tableDisplayColumnType.BOOLEAN) {\n <mat-icon\n class=\"mt-2\"\n [matTooltip]=\"\n (row[column.property]\n ? 'names.active'\n : 'names.inactive'\n )\n | translate\n | capitalize\n \"\n matTooltipPosition=\"right\">\n {{ row[column.property] ? 'check' : 'close' }}\n </mat-icon>\n }\n @case (tableDisplayColumnType.CLICK) {\n <span (click)=\"clickedAction(row)\" class=\"link\">\n {{ row[column.property] }}\n </span>\n }\n @case (tableDisplayColumnType.DATE) {\n {{ row[column.property] | date: 'MMMM dd, yyyy' }}\n }\n @case (tableDisplayColumnType.DATETIME) {\n {{\n row[column.property] | date: 'MMMM dd, yyyy h:mm a'\n }}\n }\n @case (tableDisplayColumnType.HYPERLINK) {\n <span\n class=\"link\"\n [routerLink]=\"getHyperlinkRoute(row, column)\"\n (click)=\"$event.stopPropagation()\">\n {{ row[column.property] }}\n </span>\n }\n @case (tableDisplayColumnType.ICON) {\n <mat-icon\n [ngStyle]=\"{\n color: column.icons![row[column.property]].color,\n }\">\n {{ column.icons![row[column.property]].name }}\n </mat-icon>\n }\n @case (tableDisplayColumnType.MONEY) {\n ${{ row[column.property] }}\n }\n @case (tableDisplayColumnType.PHONE) {\n @if (row[column.property].countryCode?.code) {\n <span>\n (+{{ row[column.property].countryCode.code || '' }})\n </span>\n }\n {{\n formatPhoneNumber(row[column.property].phoneNumber)\n }}\n }\n }\n } @else {\n {{ row[column.property] }}\n }\n </td>\n </ng-container>\n }\n <ng-container matColumnDef=\"expand\">\n <th\n [ngStyle]=\"{ width: actionColumnStyleWidth }\"\n mat-header-cell\n *matHeaderCellDef\n aria-label=\"row actions\">\n \n </th>\n <td\n [ngStyle]=\"{ width: actionColumnStyleWidth }\"\n mat-cell\n *matCellDef=\"let element\">\n <button\n mat-icon-button\n aria-label=\"expand row\"\n (click)=\"\n expandedElement =\n expandedElement === element ? null : element;\n $event.stopPropagation()\n \">\n @if (expandedElement !== element) {\n <mat-icon> keyboard_arrow_down</mat-icon>\n } @else {\n <mat-icon> keyboard_arrow_up</mat-icon>\n }\n </button>\n </td>\n </ng-container>\n\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n <ng-container matColumnDef=\"expandedDetail\">\n <td\n mat-cell\n class=\"ml-auto\"\n *matCellDef=\"let element\"\n [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n <div\n class=\"element-detail justify-content-center\"\n [@detailExpand]=\"\n element === expandedElement ? 'expanded' : 'collapsed'\n \">\n @if (expandedItem.type === 'image') {\n <img\n class=\"pb-4\"\n [src]=\"element[expandedItem.property]\"\n alt=\"\" />\n }\n </div>\n </td>\n </ng-container>\n\n @if (!expandableRows) {\n <ng-container>\n <tr\n mat-header-row\n *matHeaderRowDef=\"displayedColumnsProperty\"></tr>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: displayedColumnsProperty;\n let i = index\n \"\n (click)=\"selectRow(row)\"\n [ngClass]=\"getRowBackgroundColor(i)\"></tr>\n </ng-container>\n } @else {\n <ng-container>\n <tr\n mat-header-row\n *matHeaderRowDef=\"columnsToDisplayWithExpand\"></tr>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: columnsToDisplayWithExpand;\n let i = dataIndex\n \"\n [id]=\"i\"\n class=\"element-row\"\n [class.expanded-row]=\"expandedElement === row\"\n [ngClass]=\"getRowBackgroundColor(i)\"></tr>\n <tr\n mat-row\n *matRowDef=\"\n let row;\n columns: ['expandedDetail'];\n let i = dataIndex\n \"\n [id]=\"i\"\n [ngClass]=\"getRowBackgroundColor(i)\"\n [ngStyle]=\"{\n display: expandedElement === row ? 'contents' : 'none',\n }\"\n class=\"detail-row\"></tr>\n </ng-container>\n }\n\n <!-- Row shown when there is no matching data. -->\n @if (separateFilters && allFilterInput) {\n <div>\n <tr\n class=\"mat-row\"\n *matNoDataRow\n style=\"background: var(--accent-color)\">\n @if (separateFilters && allFilterInput) {\n <td\n class=\"mat-cell\"\n [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n {{\n 'messages.noDataMatchingFilter'\n | translate: { value: allFilterInput.nativeElement.value }\n | capitalize\n }}\n </td>\n } @else {\n <td\n class=\"mat-cell\"\n [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n {{ emptyMessage | async }}\n </td>\n }\n </tr>\n </div>\n }\n </table>\n } @else {\n <div class=\"no-data-found\">\n <mat-icon class=\"no-data-icon\">\n {{ dataSource.data.length > 0 ? 'search_off' : 'inbox' }}\n </mat-icon>\n <p class=\"no-data-text\">\n {{\n dataSource.data.length > 0\n ? ('messages.modifyFilter' | translate | capitalize)\n : noTableDataMessage\n }}\n </p>\n </div>\n }\n } @else {\n <div class=\"loading-container\">\n <mat-progress-spinner\n class=\"mx-auto\"\n [diameter]=\"32\"\n color=\"primary\"\n mode=\"indeterminate\" />\n </div>\n }\n @if (showPaginator) {\n <mat-paginator\n aria-label=\"Select page of users\"\n [ngClass]=\"getRowBackgroundColor(dataSource.data.length)\"\n [length]=\"totalElements ?? dataSource.data.length\"\n [pageSize]=\"initialPageSize\"\n [pageSizeOptions]=\"paginationSizeOptions\"\n (page)=\"onPageChange($event)\"\n showFirstLastButtons />\n }\n </mat-card-content>\n </mat-card>\n</div>\n", styles: ["html{--mat-ripple-color: rgba(0, 0, 0, .1)}html{--mat-option-selected-state-label-text-color: #1b2535;--mat-option-label-text-color: rgba(0, 0, 0, .87);--mat-option-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-option-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-option-selected-state-layer-color: rgba(0, 0, 0, .04)}.mat-accent{--mat-option-selected-state-label-text-color: #f2f2f7;--mat-option-label-text-color: rgba(0, 0, 0, .87);--mat-option-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-option-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-option-selected-state-layer-color: rgba(0, 0, 0, .04)}.mat-warn{--mat-option-selected-state-label-text-color: #f44336;--mat-option-label-text-color: rgba(0, 0, 0, .87);--mat-option-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-option-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-option-selected-state-layer-color: rgba(0, 0, 0, .04)}html{--mat-optgroup-label-text-color: rgba(0, 0, 0, .87)}html{--mat-full-pseudo-checkbox-selected-icon-color: #f2f2f7;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0}html{--mat-minimal-pseudo-checkbox-selected-checkmark-color: #f2f2f7;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}.mat-primary{--mat-full-pseudo-checkbox-selected-icon-color: #1b2535;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0}.mat-primary{--mat-minimal-pseudo-checkbox-selected-checkmark-color: #1b2535;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}.mat-accent{--mat-full-pseudo-checkbox-selected-icon-color: #f2f2f7;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0}.mat-accent{--mat-minimal-pseudo-checkbox-selected-checkmark-color: #f2f2f7;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}.mat-warn{--mat-full-pseudo-checkbox-selected-icon-color: #f44336;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0}.mat-warn{--mat-minimal-pseudo-checkbox-selected-checkmark-color: #f44336;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}html{--mat-app-background-color: #fafafa;--mat-app-text-color: rgba(0, 0, 0, .87);--mat-app-elevation-shadow-level-0: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-1: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-2: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-3: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-4: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-5: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 5px 8px 0px rgba(0, 0, 0, .14), 0px 1px 14px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-6: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-7: 0px 4px 5px -2px rgba(0, 0, 0, .2), 0px 7px 10px 1px rgba(0, 0, 0, .14), 0px 2px 16px 1px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-8: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-9: 0px 5px 6px -3px rgba(0, 0, 0, .2), 0px 9px 12px 1px rgba(0, 0, 0, .14), 0px 3px 16px 2px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-10: 0px 6px 6px -3px rgba(0, 0, 0, .2), 0px 10px 14px 1px rgba(0, 0, 0, .14), 0px 4px 18px 3px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-11: 0px 6px 7px -4px rgba(0, 0, 0, .2), 0px 11px 15px 1px rgba(0, 0, 0, .14), 0px 4px 20px 3px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-12: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-13: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 13px 19px 2px rgba(0, 0, 0, .14), 0px 5px 24px 4px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-14: 0px 7px 9px -4px rgba(0, 0, 0, .2), 0px 14px 21px 2px rgba(0, 0, 0, .14), 0px 5px 26px 4px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-15: 0px 8px 9px -5px rgba(0, 0, 0, .2), 0px 15px 22px 2px rgba(0, 0, 0, .14), 0px 6px 28px 5px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-16: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-17: 0px 8px 11px -5px rgba(0, 0, 0, .2), 0px 17px 26px 2px rgba(0, 0, 0, .14), 0px 6px 32px 5px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-18: 0px 9px 11px -5px rgba(0, 0, 0, .2), 0px 18px 28px 2px rgba(0, 0, 0, .14), 0px 7px 34px 6px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-19: 0px 9px 12px -6px rgba(0, 0, 0, .2), 0px 19px 29px 2px rgba(0, 0, 0, .14), 0px 7px 36px 6px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-20: 0px 10px 13px -6px rgba(0, 0, 0, .2), 0px 20px 31px 3px rgba(0, 0, 0, .14), 0px 8px 38px 7px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-21: 0px 10px 13px -6px rgba(0, 0, 0, .2), 0px 21px 33px 3px rgba(0, 0, 0, .14), 0px 8px 40px 7px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-22: 0px 10px 14px -6px rgba(0, 0, 0, .2), 0px 22px 35px 3px rgba(0, 0, 0, .14), 0px 8px 42px 7px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-23: 0px 11px 14px -7px rgba(0, 0, 0, .2), 0px 23px 36px 3px rgba(0, 0, 0, .14), 0px 9px 44px 8px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-24: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12)}html{--mdc-elevated-card-container-shape: 4px}html{--mdc-outlined-card-container-shape: 4px;--mdc-outlined-card-outline-width: 1px}html{--mdc-elevated-card-container-color: white;--mdc-elevated-card-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12)}html{--mdc-outlined-card-container-color: white;--mdc-outlined-card-outline-color: rgba(0, 0, 0, .12);--mdc-outlined-card-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12)}html{--mat-card-subtitle-text-color: rgba(0, 0, 0, .54)}html{--mdc-linear-progress-active-indicator-height: 4px;--mdc-linear-progress-track-height: 4px;--mdc-linear-progress-track-shape: 0}.mat-mdc-progress-bar{--mdc-linear-progress-active-indicator-color: #1b2535;--mdc-linear-progress-track-color: rgba(27, 37, 53, .25)}.mat-mdc-progress-bar.mat-accent{--mdc-linear-progress-active-indicator-color: #f2f2f7;--mdc-linear-progress-track-color: rgba(242, 242, 247, .25)}.mat-mdc-progress-bar.mat-warn{--mdc-linear-progress-active-indicator-color: #f44336;--mdc-linear-progress-track-color: rgba(244, 67, 54, .25)}html{--mdc-plain-tooltip-container-shape: 4px;--mdc-plain-tooltip-supporting-text-line-height: 16px}html{--mdc-plain-tooltip-container-color: #616161;--mdc-plain-tooltip-supporting-text-color: #fff}html{--mdc-filled-text-field-active-indicator-height: 1px;--mdc-filled-text-field-focus-active-indicator-height: 2px;--mdc-filled-text-field-container-shape: 4px}html{--mdc-outlined-text-field-outline-width: 1px;--mdc-outlined-text-field-focus-outline-width: 2px;--mdc-outlined-text-field-container-shape: 4px}html{--mdc-filled-text-field-caret-color: #1b2535;--mdc-filled-text-field-focus-active-indicator-color: #1b2535;--mdc-filled-text-field-focus-label-text-color: rgba(27, 37, 53, .87);--mdc-filled-text-field-container-color: rgb(244.8, 244.8, 244.8);--mdc-filled-text-field-disabled-container-color: rgb(249.9, 249.9, 249.9);--mdc-filled-text-field-label-text-color: rgba(0, 0, 0, .6);--mdc-filled-text-field-hover-label-text-color: rgba(0, 0, 0, .6);--mdc-filled-text-field-disabled-label-text-color: rgba(0, 0, 0, .38);--mdc-filled-text-field-input-text-color: rgba(0, 0, 0, .87);--mdc-filled-text-field-disabled-input-text-color: rgba(0, 0, 0, .38);--mdc-filled-text-field-input-text-placeholder-color: rgba(0, 0, 0, .6);--mdc-filled-text-field-error-hover-label-text-color: #f44336;--mdc-filled-text-field-error-focus-label-text-color: #f44336;--mdc-filled-text-field-error-label-text-color: #f44336;--mdc-filled-text-field-error-caret-color: #f44336;--mdc-filled-text-field-active-indicator-color: rgba(0, 0, 0, .42);--mdc-filled-text-field-disabled-active-indicator-color: rgba(0, 0, 0, .06);--mdc-filled-text-field-hover-active-indicator-color: rgba(0, 0, 0, .87);--mdc-filled-text-field-error-active-indicator-color: #f44336;--mdc-filled-text-field-error-focus-active-indicator-color: #f44336;--mdc-filled-text-field-error-hover-active-indicator-color: #f44336}html{--mdc-outlined-text-field-caret-color: #1b2535;--mdc-outlined-text-field-focus-outline-color: #1b2535;--mdc-outlined-text-field-focus-label-text-color: rgba(27, 37, 53, .87);--mdc-outlined-text-field-label-text-color: rgba(0, 0, 0, .6);--mdc-outlined-text-field-hover-label-text-color: rgba(0, 0, 0, .6);--mdc-outlined-text-field-disabled-label-text-color: rgba(0, 0, 0, .38);--mdc-outlined-text-field-input-text-color: rgba(0, 0, 0, .87);--mdc-outlined-text-field-disabled-input-text-color: rgba(0, 0, 0, .38);--mdc-outlined-text-field-input-text-placeholder-color: rgba(0, 0, 0, .6);--mdc-outlined-text-field-error-caret-color: #f44336;--mdc-outlined-text-field-error-focus-label-text-color: #f44336;--mdc-outlined-text-field-error-label-text-color: #f44336;--mdc-outlined-text-field-error-hover-label-text-color: #f44336;--mdc-outlined-text-field-outline-color: rgba(0, 0, 0, .38);--mdc-outlined-text-field-disabled-outline-color: rgba(0, 0, 0, .06);--mdc-outlined-text-field-hover-outline-color: rgba(0, 0, 0, .87);--mdc-outlined-text-field-error-focus-outline-color: #f44336;--mdc-outlined-text-field-error-hover-outline-color: #f44336;--mdc-outlined-text-field-error-outline-color: #f44336}html{--mat-form-field-focus-select-arrow-color: rgba(27, 37, 53, .87);--mat-form-field-disabled-input-text-placeholder-color: rgba(0, 0, 0, .38);--mat-form-field-state-layer-color: rgba(0, 0, 0, .87);--mat-form-field-error-text-color: #f44336;--mat-form-field-select-option-text-color: inherit;--mat-form-field-select-disabled-option-text-color: GrayText;--mat-form-field-leading-icon-color: unset;--mat-form-field-disabled-leading-icon-color: unset;--mat-form-field-trailing-icon-color: unset;--mat-form-field-disabled-trailing-icon-color: unset;--mat-form-field-error-focus-trailing-icon-color: unset;--mat-form-field-error-hover-trailing-icon-color: unset;--mat-form-field-error-trailing-icon-color: unset;--mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, .54);--mat-form-field-disabled-select-arrow-color: rgba(0, 0, 0, .38);--mat-form-field-hover-state-layer-opacity: .04;--mat-form-field-focus-state-layer-opacity: .08}.mat-mdc-form-field.mat-accent{--mdc-filled-text-field-caret-color: #f2f2f7;--mdc-filled-text-field-focus-active-indicator-color: #f2f2f7;--mdc-filled-text-field-focus-label-text-color: rgba(242, 242, 247, .87)}.mat-mdc-form-field.mat-accent{--mdc-outlined-text-field-caret-color: #f2f2f7;--mdc-outlined-text-field-focus-outline-color: #f2f2f7;--mdc-outlined-text-field-focus-label-text-color: rgba(242, 242, 247, .87)}.mat-mdc-form-field.mat-accent{--mat-form-field-focus-select-arrow-color: rgba(242, 242, 247, .87)}.mat-mdc-form-field.mat-warn{--mdc-filled-text-field-caret-color: #f44336;--mdc-filled-text-field-focus-active-indicator-color: #f44336;--mdc-filled-text-field-focus-label-text-color: rgba(244, 67, 54, .87)}.mat-mdc-form-field.mat-warn{--mdc-outlined-text-field-caret-color: #f44336;--mdc-outlined-text-field-focus-outline-color: #f44336;--mdc-outlined-text-field-focus-label-text-color: rgba(244, 67, 54, .87)}.mat-mdc-form-field.mat-warn{--mat-form-field-focus-select-arrow-color: rgba(244, 67, 54, .87)}html{--mat-form-field-container-height: 56px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 16px;--mat-form-field-filled-with-label-container-padding-top: 24px;--mat-form-field-filled-with-label-container-padding-bottom: 8px}html{--mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);--mat-select-disabled-trigger-text-color: rgba(0, 0, 0, .38);--mat-select-placeholder-text-color: rgba(0, 0, 0, .6);--mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);--mat-select-disabled-arrow-color: rgba(0, 0, 0, .38);--mat-select-focused-arrow-color: rgba(27, 37, 53, .87);--mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)}html .mat-mdc-form-field.mat-accent{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);--mat-select-disabled-trigger-text-color: rgba(0, 0, 0, .38);--mat-select-placeholder-text-color: rgba(0, 0, 0, .6);--mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);--mat-select-disabled-arrow-color: rgba(0, 0, 0, .38);--mat-select-focused-arrow-color: rgba(242, 242, 247, .87);--mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)}html .mat-mdc-form-field.mat-warn{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);--mat-select-disabled-trigger-text-color: rgba(0, 0, 0, .38);--mat-select-placeholder-text-color: rgba(0, 0, 0, .6);--mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);--mat-select-disabled-arrow-color: rgba(0, 0, 0, .38);--mat-select-focused-arrow-color: rgba(244, 67, 54, .87);--mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)}html{--mat-select-arrow-transform: translateY(-8px)}html{--mat-autocomplete-container-shape: 4px;--mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-autocomplete-background-color: white}html{--mdc-dialog-container-shape: 4px}html{--mat-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12);--mat-dialog-container-max-width: 80vw;--mat-dialog-container-small-max-width: 80vw;--mat-dialog-container-min-width: 0;--mat-dialog-actions-alignment: start;--mat-dialog-actions-padding: 8px;--mat-dialog-content-padding: 20px 24px;--mat-dialog-with-actions-content-padding: 20px 24px;--mat-dialog-headline-padding: 0 24px 9px}html{--mdc-dialog-container-color: white;--mdc-dialog-subhead-color: rgba(0, 0, 0, .87);--mdc-dialog-supporting-text-color: rgba(0, 0, 0, .6)}.mat-mdc-standard-chip{--mdc-chip-container-shape-radius: 16px;--mdc-chip-with-avatar-avatar-shape-radius: 14px;--mdc-chip-with-avatar-avatar-size: 28px;--mdc-chip-with-icon-icon-size: 18px;--mdc-chip-outline-width: 0;--mdc-chip-outline-color: transparent;--mdc-chip-disabled-outline-color: transparent;--mdc-chip-focus-outline-color: transparent;--mdc-chip-hover-state-layer-opacity: .04;--mdc-chip-with-avatar-disabled-avatar-opacity: 1;--mdc-chip-flat-selected-outline-width: 0;--mdc-chip-selected-hover-state-layer-opacity: .04;--mdc-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1;--mdc-chip-with-icon-disabled-icon-opacity: 1}.mat-mdc-standard-chip{--mat-chip-disabled-container-opacity: .4;--mat-chip-trailing-action-opacity: .54;--mat-chip-trailing-action-focus-opacity: 1;--mat-chip-trailing-action-state-layer-color: transparent;--mat-chip-selected-trailing-action-state-layer-color: transparent;--mat-chip-trailing-action-hover-state-layer-opacity: 0;--mat-chip-trailing-action-focus-state-layer-opacity: 0}.mat-mdc-standard-chip{--mdc-chip-disabled-label-text-color: #212121;--mdc-chip-elevated-container-color: rgb(224.4, 224.4, 224.4);--mdc-chip-elevated-selected-container-color: rgb(224.4, 224.4, 224.4);--mdc-chip-elevated-disabled-container-color: rgb(224.4, 224.4, 224.4);--mdc-chip-flat-disabled-selected-container-color: rgb(224.4, 224.4, 224.4);--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: #212121;--mdc-chip-selected-label-text-color: #212121;--mdc-chip-with-icon-icon-color: #212121;--mdc-chip-with-icon-disabled-icon-color: #212121;--mdc-chip-with-icon-selected-icon-color: #212121;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #212121;--mdc-chip-with-trailing-icon-trailing-icon-color: #212121}.mat-mdc-standard-chip{--mat-chip-selected-disabled-trailing-icon-color: #212121;--mat-chip-selected-trailing-icon-color: #212121}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary{--mdc-chip-disabled-label-text-color: white;--mdc-chip-elevated-container-color: #1b2535;--mdc-chip-elevated-selected-container-color: #1b2535;--mdc-chip-elevated-disabled-container-color: #1b2535;--mdc-chip-flat-disabled-selected-container-color: #1b2535;--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: white;--mdc-chip-selected-label-text-color: white;--mdc-chip-with-icon-icon-color: white;--mdc-chip-with-icon-disabled-icon-color: white;--mdc-chip-with-icon-selected-icon-color: white;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;--mdc-chip-with-trailing-icon-trailing-icon-color: white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary{--mat-chip-selected-disabled-trailing-icon-color: white;--mat-chip-selected-trailing-icon-color: white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent{--mdc-chip-disabled-label-text-color: black;--mdc-chip-elevated-container-color: #f2f2f7;--mdc-chip-elevated-selected-container-color: #f2f2f7;--mdc-chip-elevated-disabled-container-color: #f2f2f7;--mdc-chip-flat-disabled-selected-container-color: #f2f2f7;--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: black;--mdc-chip-selected-label-text-color: black;--mdc-chip-with-icon-icon-color: black;--mdc-chip-with-icon-disabled-icon-color: black;--mdc-chip-with-icon-selected-icon-color: black;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: black;--mdc-chip-with-trailing-icon-trailing-icon-color: black}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent{--mat-chip-selected-disabled-trailing-icon-color: black;--mat-chip-selected-trailing-icon-color: black}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn{--mdc-chip-disabled-label-text-color: white;--mdc-chip-elevated-container-color: #f44336;--mdc-chip-elevated-selected-container-color: #f44336;--mdc-chip-elevated-disabled-container-color: #f44336;--mdc-chip-flat-disabled-selected-container-color: #f44336;--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: white;--mdc-chip-selected-label-text-color: white;--mdc-chip-with-icon-icon-color: white;--mdc-chip-with-icon-disabled-icon-color: white;--mdc-chip-with-icon-selected-icon-color: white;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;--mdc-chip-with-trailing-icon-trailing-icon-color: white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn{--mat-chip-selected-disabled-trailing-icon-color: white;--mat-chip-selected-trailing-icon-color: white}.mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 32px}html{--mdc-switch-disabled-selected-icon-opacity: .38;--mdc-switch-disabled-track-opacity: .12;--mdc-switch-disabled-unselected-icon-opacity: .38;--mdc-switch-handle-height: 20px;--mdc-switch-handle-shape: 10px;--mdc-switch-handle-width: 20px;--mdc-switch-selected-icon-size: 18px;--mdc-switch-track-height: 14px;--mdc-switch-track-shape: 7px;--mdc-switch-track-width: 36px;--mdc-switch-unselected-icon-size: 18px;--mdc-switch-selected-focus-state-layer-opacity: .12;--mdc-switch-selected-hover-state-layer-opacity: .04;--mdc-switch-selected-pressed-state-layer-opacity: .1;--mdc-switch-unselected-focus-state-layer-opacity: .12;--mdc-switch-unselected-hover-state-layer-opacity: .04;--mdc-switch-unselected-pressed-state-layer-opacity: .1}html .mat-mdc-slide-toggle{--mat-switch-disabled-selected-handle-opacity: .38;--mat-switch-disabled-unselected-handle-opacity: .38;--mat-switch-unselected-handle-size: 20px;--mat-switch-selected-handle-size: 20px;--mat-switch-pressed-handle-size: 20px;--mat-switch-with-icon-handle-size: 20px;--mat-switch-selected-handle-horizontal-margin: 0;--mat-switch-selected-with-icon-handle-horizontal-margin: 0;--mat-switch-selected-pressed-handle-horizontal-margin: 0;--mat-switch-unselected-handle-horizontal-margin: 0;--mat-switch-unselected-with-icon-handle-horizontal-margin: 0;--mat-switch-unselected-pressed-handle-horizontal-margin: 0;--mat-switch-visible-track-opacity: 1;--mat-switch-hidden-track-opacity: 1;--mat-switch-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, .2, 1);--mat-switch-hidden-track-transition: transform 75ms 0ms cubic-bezier(.4, 0, .6, 1);--mat-switch-track-outline-width: 1px;--mat-switch-track-outline-color: transparent;--mat-switch-selected-track-outline-width: 1px;--mat-switch-selected-track-outline-color: transparent;--mat-switch-disabled-unselected-track-outline-width: 1px;--mat-switch-disabled-unselected-track-outline-color: transparent}html{--mdc-switch-selected-focus-state-layer-color: rgb(9.7875, 13.4125, 19.2125);--mdc-switch-selected-handle-color: rgb(9.7875, 13.4125, 19.2125);--mdc-switch-selected-hover-state-layer-color: rgb(9.7875, 13.4125, 19.2125);--mdc-switch-selected-pressed-state-layer-color: rgb(9.7875, 13.4125, 19.2125);--mdc-switch-selected-focus-handle-color: hsl(216.9230769231, 32.5%, -24.3137254902%);--mdc-switch-selected-hover-handle-color: hsl(216.9230769231, 32.5%, -24.3137254902%);--mdc-switch-selected-pressed-handle-color: hsl(216.9230769231, 32.5%, -24.3137254902%);--mdc-switch-selected-focus-track-color: rgb(61.425, 84.175, 120.575);--mdc-switch-selected-hover-track-color: rgb(61.425, 84.175, 120.575);--mdc-switch-selected-pressed-track-color: rgb(61.425, 84.175, 120.575);--mdc-switch-selected-track-color: rgb(61.425, 84.175, 120.575);--mdc-switch-disabled-selected-handle-color: #424242;--mdc-switch-disabled-selected-icon-color: #fff;--mdc-switch-disabled-selected-track-color: #424242;--mdc-switch-disabled-unselected-handle-color: #424242;--mdc-switch-disabled-unselected-icon-color: #fff;--mdc-switch-disabled-unselected-track-color: #424242;--mdc-switch-handle-surface-color: #fff;--mdc-switch-selected-icon-color: #fff;--mdc-switch-unselected-focus-handle-color: #212121;--mdc-switch-unselected-focus-state-layer-color: #424242;--mdc-switch-unselected-focus-track-color: #e0e0e0;--mdc-switch-unselected-handle-color: #616161;--mdc-switch-unselected-hover-handle-color: #212121;--mdc-switch-unselected-hover-state-layer-color: #424242;--mdc-switch-unselected-hover-track-color: #e0e0e0;--mdc-switch-unselected-icon-color: #fff;--mdc-switch-unselected-pressed-handle-color: #212121;--mdc-switch-unselected-pressed-state-layer-color: #424242;--mdc-switch-unselected-pressed-track-color: #e0e0e0;--mdc-switch-unselected-track-color: #e0e0e0;--mdc-switch-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mdc-switch-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12)}html{--mdc-switch-disabled-label-text-color: rgba(0, 0, 0, .38)}html .mat-mdc-slide-toggle{--mat-switch-label-text-color: rgba(0, 0, 0, .87)}html .mat-mdc-slide-toggle.mat-accent{--mdc-switch-selected-focus-state-layer-color: rgb(210.4285714286, 210.4285714286, 227.5714285714);--mdc-switch-selected-handle-color: rgb(210.4285714286, 210.4285714286, 227.5714285714);--mdc-switch-selected-hover-state-layer-color: rgb(210.4285714286, 210.4285714286, 227.5714285714);--mdc-switch-selected-pressed-state-layer-color: rgb(210.4285714286, 210.4285714286, 227.5714285714);--mdc-switch-selected-focus-handle-color: rgb(115.7142857143, 115.7142857143, 169.2857142857);--mdc-switch-selected-hover-handle-color: rgb(115.7142857143, 115.7142857143, 169.2857142857);--mdc-switch-selected-pressed-handle-color: rgb(115.7142857143, 115.7142857143, 169.2857142857);--mdc-switch-selected-focus-track-color: hsl(240, 23.8095238095%, 115.8823529412%);--mdc-switch-selected-hover-track-color: hsl(240, 23.8095238095%, 115.8823529412%);--mdc-switch-selected-pressed-track-color: hsl(240, 23.8095238095%, 115.8823529412%);--mdc-switch-selected-track-color: hsl(240, 23.8095238095%, 115.8823529412%)}html .mat-mdc-slide-toggle.mat-warn{--mdc-switch-selected-focus-state-layer-color: #e53935;--mdc-switch-selected-handle-color: #e53935;--mdc-switch-selected-hover-state-layer-color: #e53935;--mdc-switch-selected-pressed-state-layer-color: #e53935;--mdc-switch-selected-focus-handle-color: #b71c1c;--mdc-switch-selected-hover-handle-color: #b71c1c;--mdc-switch-selected-pressed-handle-color: #b71c1c;--mdc-switch-selected-focus-track-color: #e57373;--mdc-switch-selected-hover-track-color: #e57373;--mdc-switch-selected-pressed-track-color: #e57373;--mdc-switch-selected-track-color: #e57373}html{--mdc-switch-state-layer-size: 40px}html{--mdc-radio-disabled-selected-icon-opacity: .38;--mdc-radio-disabled-unselected-icon-opacity: .38;--mdc-radio-state-layer-size: 40px}.mat-mdc-radio-button.mat-primary{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #1b2535;--mdc-radio-selected-hover-icon-color: #1b2535;--mdc-radio-selected-icon-color: #1b2535;--mdc-radio-selected-pressed-icon-color: #1b2535}.mat-mdc-radio-button.mat-primary{--mat-radio-ripple-color: black;--mat-radio-checked-ripple-color: #1b2535;--mat-radio-disabled-label-color: rgba(0, 0, 0, .38);--mat-radio-label-text-color: rgba(0, 0, 0, .87)}.mat-mdc-radio-button.mat-accent{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #f2f2f7;--mdc-radio-selected-hover-icon-color: #f2f2f7;--mdc-radio-selected-icon-color: #f2f2f7;--mdc-radio-selected-pressed-icon-color: #f2f2f7}.mat-mdc-radio-button.mat-accent{--mat-radio-ripple-color: black;--mat-radio-checked-ripple-color: #f2f2f7;--mat-radio-disabled-label-color: rgba(0, 0, 0, .38);--mat-radio-label-text-color: rgba(0, 0, 0, .87)}.mat-mdc-radio-button.mat-warn{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #f44336;--mdc-radio-selected-hover-icon-color: #f44336;--mdc-radio-selected-icon-color: #f44336;--mdc-radio-selected-pressed-icon-color: #f44336}.mat-mdc-radio-button.mat-warn{--mat-radio-ripple-color: black;--mat-radio-checked-ripple-color: #f44336;--mat-radio-disabled-label-color: rgba(0, 0, 0, .38);--mat-radio-label-text-color: rgba(0, 0, 0, .87)}html{--mdc-radio-state-layer-size: 40px}html{--mat-radio-touch-target-display: block}html{--mdc-slider-active-track-height: 6px;--mdc-slider-active-track-shape: 9999px;--mdc-slider-handle-height: 20px;--mdc-slider-handle-shape: 50%;--mdc-slider-handle-width: 20px;--mdc-slider-inactive-track-height: 4px;--mdc-slider-inactive-track-shape: 9999px;--mdc-slider-with-overlap-handle-outline-width: 1px;--mdc-slider-with-tick-marks-active-container-opacity: .6;--mdc-slider-with-tick-marks-container-shape: 50%;--mdc-slider-with-tick-marks-container-size: 2px;--mdc-slider-with-tick-marks-inactive-container-opacity: .6;--mdc-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12)}html{--mat-slider-value-indicator-width: auto;--mat-slider-value-indicator-height: 32px;--mat-slider-value-indicator-caret-display: block;--mat-slider-value-indicator-border-radius: 4px;--mat-slider-value-indicator-padding: 0 12px;--mat-slider-value-indicator-text-transform: none;--mat-slider-value-indicator-container-transform: translateX(-50%)}html{--mdc-slider-handle-color: #1b2535;--mdc-slider-focus-handle-color: #1b2535;--mdc-slider-hover-handle-color: #1b2535;--mdc-slider-active-track-color: #1b2535;--mdc-slider-inactive-track-color: #1b2535;--mdc-slider-with-tick-marks-inactive-container-color: #1b2535;--mdc-slider-with-tick-marks-active-container-color: white;--mdc-slider-disabled-active-track-color: #000;--mdc-slider-disabled-handle-color: #000;--mdc-slider-disabled-inactive-track-color: #000;--mdc-slider-label-container-color: #000;--mdc-slider-label-label-text-color: #fff;--mdc-slider-with-overlap-handle-outline-color: #fff;--mdc-slider-with-tick-marks-disabled-container-color: #000}html{--mat-slider-ripple-color: #1b2535;--mat-slider-hover-state-layer-color: rgba(27, 37, 53, .05);--mat-slider-focus-state-layer-color: rgba(27, 37, 53, .2);--mat-slider-value-indicator-opacity: .6}html .mat-accent{--mdc-slider-handle-color: #f2f2f7;--mdc-slider-focus-handle-color: #f2f2f7;--mdc-slider-hover-handle-color: #f2f2f7;--mdc-slider-active-track-color: #f2f2f7;--mdc-slider-inactive-track-color: #f2f2f7;--mdc-slider-with-tick-marks-inactive-container-color: #f2f2f7;--mdc-slider-with-tick-marks-active-container-color: black}html .mat-accent{--mat-slider-ripple-color: #f2f2f7;--mat-slider-hover-state-layer-color: rgba(242, 242, 247, .05);--mat-slider-focus-state-layer-color: rgba(242, 242, 247, .2)}html .mat-warn{--mdc-slider-handle-color: #f44336;--mdc-slider-focus-handle-color: #f44336;--mdc-slider-hover-handle-color: #f44336;--mdc-slider-active-track-color: #f44336;--mdc-slider-inactive-track-color: #f44336;--mdc-slider-with-tick-marks-inactive-container-color: #f44336;--mdc-slider-with-tick-marks-active-container-color: white}html .mat-warn{--mat-slider-ripple-color: #f44336;--mat-slider-hover-state-layer-color: rgba(244, 67, 54, .05);--mat-slider-focus-state-layer-color: rgba(244, 67, 54, .2)}html{--mat-menu-container-shape: 4px;--mat-menu-divider-bottom-spacing: 0;--mat-menu-divider-top-spacing: 0;--mat-menu-item-spacing: 16px;--mat-menu-item-icon-size: 24px;--mat-menu-item-leading-spacing: 16px;--mat-menu-item-trailing-spacing: 16px;--mat-menu-item-with-icon-leading-spacing: 16px;--mat-menu-item-with-icon-trailing-spacing: 16px;--mat-menu-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-menu-item-label-text-color: rgba(0, 0, 0, .87);--mat-menu-item-icon-color: rgba(0, 0, 0, .87);--mat-menu-item-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-menu-item-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-menu-container-color: white;--mat-menu-divider-color: rgba(0, 0, 0, .12)}html{--mdc-list-list-item-container-shape: 0;--mdc-list-list-item-leading-avatar-shape: 50%;--mdc-list-list-item-container-color: transparent;--mdc-list-list-item-selected-container-color: transparent;--mdc-list-list-item-leading-avatar-color: transparent;--mdc-list-list-item-leading-icon-size: 24px;--mdc-list-list-item-leading-avatar-size: 40px;--mdc-list-list-item-trailing-icon-size: 24px;--mdc-list-list-item-disabled-state-layer-color: transparent;--mdc-list-list-item-disabled-state-layer-opacity: 0;--mdc-list-list-item-disabled-label-text-opacity: .38;--mdc-list-list-item-disabled-leading-icon-opacity: .38;--mdc-list-list-item-disabled-trailing-icon-opacity: .38}html{--mat-list-active-indicator-color: transparent;--mat-list-active-indicator-shape: 4px}html{--mdc-list-list-item-label-text-color: rgba(0, 0, 0, .87);--mdc-list-list-item-supporting-text-color: rgba(0, 0, 0, .54);--mdc-list-list-item-leading-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, .38);--mdc-list-list-item-trailing-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-disabled-label-text-color: black;--mdc-list-list-item-disabled-leading-icon-color: black;--mdc-list-list-item-disabled-trailing-icon-color: black;--mdc-list-list-item-hover-label-text-color: rgba(0, 0, 0, .87);--mdc-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-focus-label-text-color: rgba(0, 0, 0, .87);--mdc-list-list-item-hover-state-layer-color: black;--mdc-list-list-item-hover-state-layer-opacity: .04;--mdc-list-list-item-focus-state-layer-color: black;--mdc-list-list-item-focus-state-layer-opacity: .12}.mdc-list-item__start,.mdc-list-item__end{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #1b2535;--mdc-radio-selected-hover-icon-color: #1b2535;--mdc-radio-selected-icon-color: #1b2535;--mdc-radio-selected-pressed-icon-color: #1b2535}.mat-accent .mdc-list-item__start,.mat-accent .mdc-list-item__end{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #f2f2f7;--mdc-radio-selected-hover-icon-color: #f2f2f7;--mdc-radio-selected-icon-color: #f2f2f7;--mdc-radio-selected-pressed-icon-color: #f2f2f7}.mat-warn .mdc-list-item__start,.mat-warn .mdc-list-item__end{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #f44336;--mdc-radio-selected-hover-icon-color: #f44336;--mdc-radio-selected-icon-color: #f44336;--mdc-radio-selected-pressed-icon-color: #f44336}.mat-mdc-list-option{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: white;--mdc-checkbox-selected-focus-icon-color: #1b2535;--mdc-checkbox-selected-hover-icon-color: #1b2535;--mdc-checkbox-selected-icon-color: #1b2535;--mdc-checkbox-selected-pressed-icon-color: #1b2535;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #1b2535;--mdc-checkbox-selected-hover-state-layer-color: #1b2535;--mdc-checkbox-selected-pressed-state-layer-color: #1b2535;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}.mat-mdc-list-option.mat-accent{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: black;--mdc-checkbox-selected-focus-icon-color: #f2f2f7;--mdc-checkbox-selected-hover-icon-color: #f2f2f7;--mdc-checkbox-selected-icon-color: #f2f2f7;--mdc-checkbox-selected-pressed-icon-color: #f2f2f7;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #f2f2f7;--mdc-checkbox-selected-hover-state-layer-color: #f2f2f7;--mdc-checkbox-selected-pressed-state-layer-color: #f2f2f7;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}.mat-mdc-list-option.mat-warn{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: white;--mdc-checkbox-selected-focus-icon-color: #f44336;--mdc-checkbox-selected-hover-icon-color: #f44336;--mdc-checkbox-selected-icon-color: #f44336;--mdc-checkbox-selected-pressed-icon-color: #f44336;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #f44336;--mdc-checkbox-selected-hover-state-layer-color: #f44336;--mdc-checkbox-selected-pressed-state-layer-color: #f44336;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start{color:#1b2535}.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end{opacity:1}html{--mdc-list-list-item-one-line-container-height: 48px;--mdc-list-list-item-two-line-container-height: 64px;--mdc-list-list-item-three-line-container-height: 88px}html{--mat-list-list-item-leading-icon-start-space: 16px;--mat-list-list-item-leading-icon-end-space: 32px}.mdc-list-item__start,.mdc-list-item__end{--mdc-radio-state-layer-size: 40px}.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:56px}.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:72px}html{--mat-paginator-container-text-color: rgba(0, 0, 0, .87);--mat-paginator-container-background-color: white;--mat-paginator-enabled-icon-color: rgba(0, 0, 0, .54);--mat-paginator-disabled-icon-color: rgba(0, 0, 0, .12)}html{--mat-paginator-container-size: 56px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block}html{--mdc-secondary-navigation-tab-container-height: 48px}html{--mdc-tab-indicator-active-indicator-height: 2px;--mdc-tab-indicator-active-indicator-shape: 0}html{--mat-tab-header-divider-color: transparent;--mat-tab-header-divider-height: 0}.mat-mdc-tab-group,.mat-mdc-tab-nav-bar{--mdc-tab-indicator-active-indicator-color: #1b2535}.mat-mdc-tab-group,.mat-mdc-tab-nav-bar{--mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);--mat-tab-header-pagination-icon-color: black;--mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-label-text-color: #1b2535;--mat-tab-header-active-ripple-color: #1b2535;--mat-tab-header-inactive-ripple-color: #1b2535;--mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-focus-label-text-color: #1b2535;--mat-tab-header-active-hover-label-text-color: #1b2535;--mat-tab-header-active-focus-indicator-color: #1b2535;--mat-tab-header-active-hover-indicator-color: #1b2535}.mat-mdc-tab-group.mat-accent,.mat-mdc-tab-nav-bar.mat-accent{--mdc-tab-indicator-active-indicator-color: #f2f2f7}.mat-mdc-tab-group.mat-accent,.mat-mdc-tab-nav-bar.mat-accent{--mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);--mat-tab-header-pagination-icon-color: black;--mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-label-text-color: #f2f2f7;--mat-tab-header-active-ripple-color: #f2f2f7;--mat-tab-header-inactive-ripple-color: #f2f2f7;--mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-focus-label-text-color: #f2f2f7;--mat-tab-header-active-hover-label-text-color: #f2f2f7;--mat-tab-header-active-focus-indicator-color: #f2f2f7;--mat-tab-header-active-hover-indicator-color: #f2f2f7}.mat-mdc-tab-group.mat-warn,.mat-mdc-tab-nav-bar.mat-warn{--mdc-tab-indicator-active-indicator-color: #f44336}.mat-mdc-tab-group.mat-warn,.mat-mdc-tab-nav-bar.mat-warn{--mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);--mat-tab-header-pagination-icon-color: black;--mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-label-text-color: #f44336;--mat-tab-header-active-ripple-color: #f44336;--mat-tab-header-inactive-ripple-color: #f44336;--mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-focus-label-text-color: #f44336;--mat-tab-header-active-hover-label-text-color: #f44336;--mat-tab-header-active-focus-indicator-color: #f44336;--mat-tab-header-active-hover-indicator-color: #f44336}.mat-mdc-tab-group.mat-background-primary,.mat-mdc-tab-nav-bar.mat-background-primary{--mat-tab-header-with-background-background-color: #1b2535;--mat-tab-header-with-background-foreground-color: white}.mat-mdc-tab-group.mat-background-accent,.mat-mdc-tab-nav-bar.mat-background-accent{--mat-tab-header-with-background-background-color: #f2f2f7;--mat-tab-header-with-background-foreground-color: black}.mat-mdc-tab-group.mat-background-warn,.mat-mdc-tab-nav-bar.mat-background-warn{--mat-tab-header-with-background-background-color: #f44336;--mat-tab-header-with-background-foreground-color: white}.mat-mdc-tab-header{--mdc-secondary-navigation-tab-container-height: 48px}html{--mdc-checkbox-disabled-selected-checkmark-color: #fff;--mdc-checkbox-selected-focus-state-layer-opacity: .16;--mdc-checkbox-selected-hover-state-layer-opacity: .04;--mdc-checkbox-selected-pressed-state-layer-opacity: .16;--mdc-checkbox-unselected-focus-state-layer-opacity: .16;--mdc-checkbox-unselected-hover-state-layer-opacity: .04;--mdc-checkbox-unselected-pressed-state-layer-opacity: .16}html{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: black;--mdc-checkbox-selected-focus-icon-color: #f2f2f7;--mdc-checkbox-selected-hover-icon-color: #f2f2f7;--mdc-checkbox-selected-icon-color: #f2f2f7;--mdc-checkbox-selected-pressed-icon-color: #f2f2f7;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #f2f2f7;--mdc-checkbox-selected-hover-state-layer-color: #f2f2f7;--mdc-checkbox-selected-pressed-state-layer-color: #f2f2f7;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}html{--mat-checkbox-disabled-label-color: rgba(0, 0, 0, .38);--mat-checkbox-label-text-color: rgba(0, 0, 0, .87)}.mat-mdc-checkbox.mat-primary{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: white;--mdc-checkbox-selected-focus-icon-color: #1b2535;--mdc-checkbox-selected-hover-icon-color: #1b2535;--mdc-checkbox-selected-icon-color: #1b2535;--mdc-checkbox-selected-pressed-icon-color: #1b2535;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #1b2535;--mdc-checkbox-selected-hover-state-layer-color: #1b2535;--mdc-checkbox-selected-pressed-state-layer-color: #1b2535;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}.mat-mdc-checkbox.mat-warn{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: white;--mdc-checkbox-selected-focus-icon-color: #f44336;--mdc-checkbox-selected-hover-icon-color: #f44336;--mdc-checkbox-selected-icon-color: #f44336;--mdc-checkbox-selected-pressed-icon-color: #f44336;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #f44336;--mdc-checkbox-selected-hover-state-layer-color: #f44336;--mdc-checkbox-selected-pressed-state-layer-color: #f44336;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}html{--mdc-checkbox-state-layer-size: 40px}html{--mat-checkbox-touch-target-display: block}html{--mdc-text-button-container-shape: 4px;--mdc-text-button-keep-touch-target: false}html{--mdc-filled-button-container-shape: 4px;--mdc-filled-button-keep-touch-target: false}html{--mdc-protected-button-container-shape: 4px;--mdc-protected-button-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);--mdc-protected-button-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mdc-protected-button-focus-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);--mdc-protected-button-hover-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);--mdc-protected-button-pressed-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mdc-outlined-button-keep-touch-target: false;--mdc-outlined-button-outline-width: 1px;--mdc-outlined-button-container-shape: 4px}html{--mat-text-button-horizontal-padding: 8px;--mat-text-button-with-icon-horizontal-padding: 8px;--mat-text-button-icon-spacing: 8px;--mat-text-button-icon-offset: 0}html{--mat-filled-button-horizontal-padding: 16px;--mat-filled-button-icon-spacing: 8px;--mat-filled-button-icon-offset: -4px}html{--mat-protected-button-horizontal-padding: 16px;--mat-protected-button-icon-spacing: 8px;--mat-protected-button-icon-offset: -4px}html{--mat-outlined-button-horizontal-padding: 15px;--mat-outlined-button-icon-spacing: 8px;--mat-outlined-button-icon-offset: -4px}html{--mdc-text-button-label-text-color: black;--mdc-text-button-disabled-label-text-color: rgba(0, 0, 0, .38)}html{--mat-text-button-state-layer-color: black;--mat-text-button-disabled-state-layer-color: black;--mat-text-button-ripple-color: rgba(0, 0, 0, .1);--mat-text-button-hover-state-layer-opacity: .04;--mat-text-button-focus-state-layer-opacity: .12;--mat-text-button-pressed-state-layer-opacity: .12}html{--mdc-filled-button-container-color: white;--mdc-filled-button-label-text-color: black;--mdc-filled-button-disabled-container-color: rgba(0, 0, 0, .12);--mdc-filled-button-disabled-label-text-color: rgba(0, 0, 0, .38)}html{--mat-filled-button-state-layer-color: black;--mat-filled-button-disabled-state-layer-color: black;--mat-filled-button-ripple-color: rgba(0, 0, 0, .1);--mat-filled-button-hover-state-layer-opacity: .04;--mat-filled-button-focus-state-layer-opacity: .12;--mat-filled-button-pressed-state-layer-opacity: .12}html{--mdc-protected-button-container-color: white;--mdc-protected-button-label-text-color: black;--mdc-protected-button-disabled-container-color: rgba(0, 0, 0, .12);--mdc-protected-button-disabled-label-text-color: rgba(0, 0, 0, .38)}html{--mat-protected-button-state-layer-color: black;--mat-protected-button-disabled-state-layer-color: black;--mat-protected-button-ripple-color: rgba(0, 0, 0, .1);--mat-protected-button-hover-state-layer-opacity: .04;--mat-protected-button-focus-state-layer-opacity: .12;--mat-protected-button-pressed-state-layer-opacity: .12}html{--mdc-outlined-button-disabled-outline-color: rgba(0, 0, 0, .12);--mdc-outlined-button-disabled-label-text-color: rgba(0, 0, 0, .38);--mdc-outlined-button-label-text-color: black;--mdc-outlined-button-outline-color: rgba(0, 0, 0, .12)}html{--mat-outlined-button-state-layer-color: black;--mat-outlined-button-disabled-state-layer-color: black;--mat-outlined-button-ripple-color: rgba(0, 0, 0, .1);--mat-outlined-button-hover-state-layer-opacity: .04;--mat-outlined-button-focus-state-layer-opacity: .12;--mat-outlined-button-pressed-state-layer-opacity: .12}.mat-mdc-button.mat-primary{--mdc-text-button-label-text-color: #1b2535}.mat-mdc-button.mat-primary{--mat-text-button-state-layer-color: #1b2535;--mat-text-button-ripple-color: rgba(27, 37, 53, .1)}.mat-mdc-button.mat-accent{--mdc-text-button-label-text-color: #f2f2f7}.mat-mdc-button.mat-accent{--mat-text-button-state-layer-color: #f2f2f7;--mat-text-button-ripple-color: rgba(242, 242, 247, .1)}.mat-mdc-button.mat-warn{--mdc-text-button-label-text-color: #f44336}.mat-mdc-button.mat-warn{--mat-text-button-state-layer-color: #f44336;--mat-text-button-ripple-color: rgba(244, 67, 54, .1)}.mat-mdc-unelevated-button.mat-primary{--mdc-filled-button-container-color: #1b2535;--mdc-filled-button-label-text-color: white}.mat-mdc-unelevated-button.mat-primary{--mat-filled-button-state-layer-color: white;--mat-filled-button-ripple-color: rgba(255, 255, 255, .1)}.mat-mdc-unelevated-button.mat-accent{--mdc-filled-button-container-color: #f2f2f7;--mdc-filled-button-label-text-color: black}.mat-mdc-unelevated-button.mat-accent{--mat-filled-button-state-layer-color: black;--mat-filled-button-ripple-color: rgba(0, 0, 0, .1)}.mat-mdc-unelevated-button.mat-warn{--mdc-filled-button-container-color: #f44336;--mdc-filled-button-label-text-color: white}.mat-mdc-unelevated-button.mat-warn{--mat-filled-button-state-layer-color: white;--mat-filled-button-ripple-color: rgba(255, 255, 255, .1)}.mat-mdc-raised-button.mat-primary{--mdc-protected-button-container-color: #1b2535;--mdc-protected-button-label-text-color: white}.mat-mdc-raised-button.mat-primary{--mat-protected-button-state-layer-color: white;--mat-protected-button-ripple-color: rgba(255, 255, 255, .1)}.mat-mdc-raised-button.mat-accent{--mdc-protected-button-container-color: #f2f2f7;--mdc-protected-button-label-text-color: black}.mat-mdc-raised-button.mat-accent{--mat-protected-button-state-layer-color: black;--mat-protected-button-ripple-color: rgba(0, 0, 0, .1)}.mat-mdc-raised-button.mat-warn{--mdc-protected-button-container-color: #f44336;--mdc-protected-button-label-text-color: white}.mat-mdc-raised-button.mat-warn{--mat-protected-button-state-layer-color: white;--mat-protected-button-ripple-color: rgba(255, 255, 255, .1)}.mat-mdc-outlined-button.mat-primary{--mdc-outlined-button-label-text-color: #1b2535;--mdc-outlined-button-outline-color: rgba(0, 0, 0, .12)}.mat-mdc-outlined-button.mat-primary{--mat-outlined-button-state-layer-color: #1b2535;--mat-outlined-button-ripple-color: rgba(27, 37, 53, .1)}.mat-mdc-outlined-button.mat-accent{--mdc-outlined-button-label-text-color: #f2f2f7;--mdc-outlined-button-outline-color: rgba(0, 0, 0, .12)}.mat-mdc-outlined-button.mat-accent{--mat-outlined-button-state-layer-color: #f2f2f7;--mat-outlined-button-ripple-color: rgba(242, 242, 247, .1)}.mat-mdc-outlined-button.mat-warn{--mdc-outlined-button-label-text-color: #f44336;--mdc-outlined-button-outline-color: rgba(0, 0, 0, .12)}.mat-mdc-outlined-button.mat-warn{--mat-outlined-button-state-layer-color: #f44336;--mat-outlined-button-ripple-color: rgba(244, 67, 54, .1)}html{--mdc-text-button-container-height: 36px}html{--mdc-filled-button-container-height: 36px}html{--mdc-protected-button-container-height: 36px}html{--mdc-outlined-button-container-height: 36px}html{--mat-text-button-touch-target-display: block}html{--mat-filled-button-touch-target-display: block}html{--mat-protected-button-touch-target-display: block}html{--mat-outlined-button-touch-target-display: block}html{--mdc-icon-button-icon-size: 24px}html{--mdc-icon-button-icon-color: inherit;--mdc-icon-button-disabled-icon-color: rgba(0, 0, 0, .38)}html{--mat-icon-button-state-layer-color: black;--mat-icon-button-disabled-state-layer-color: black;--mat-icon-button-ripple-color: rgba(0, 0, 0, .1);--mat-icon-button-hover-state-layer-opacity: .04;--mat-icon-button-focus-state-layer-opacity: .12;--mat-icon-button-pressed-state-layer-opacity: .12}html .mat-mdc-icon-button.mat-primary{--mdc-icon-button-icon-color: #1b2535}html .mat-mdc-icon-button.mat-primary{--mat-icon-button-state-layer-color: #1b2535;--mat-icon-button-ripple-color: rgba(27, 37, 53, .1)}html .mat-mdc-icon-button.mat-accent{--mdc-icon-button-icon-color: #f2f2f7}html .mat-mdc-icon-button.mat-accent{--mat-icon-button-state-layer-color: #f2f2f7;--mat-icon-button-ripple-color: rgba(242, 242, 247, .1)}html .mat-mdc-icon-button.mat-warn{--mdc-icon-button-icon-color: #f44336}html .mat-mdc-icon-button.mat-warn{--mat-icon-button-state-layer-color: #f44336;--mat-icon-button-ripple-color: rgba(244, 67, 54, .1)}html{--mat-icon-button-touch-target-display: block}.mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 48px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:12px}html{--mdc-fab-container-shape: 50%;--mdc-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mdc-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12)}html{--mdc-fab-small-container-shape: 50%;--mdc-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mdc-fab-small-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-fab-small-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12)}html{--mdc-extended-fab-container-height: 48px;--mdc-extended-fab-container-shape: 24px;--mdc-extended-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mdc-extended-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-extended-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-extended-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12)}html{--mdc-fab-container-color: white}html{--mat-fab-foreground-color: black;--mat-fab-state-layer-color: black;--mat-fab-disabled-state-layer-color: black;--mat-fab-ripple-color: rgba(0, 0, 0, .1);--mat-fab-hover-state-layer-opacity: .04;--mat-fab-focus-state-layer-opacity: .12;--mat-fab-pressed-state-layer-opacity: .12;--mat-fab-disabled-state-container-color: rgba(0, 0, 0, .12);--mat-fab-disabled-state-foreground-color: rgba(0, 0, 0, .38)}html{--mdc-fab-small-container-color: white}html{--mat-fab-small-foreground-color: black;--mat-fab-small-state-layer-color: black;--mat-fab-small-disabled-state-layer-color: black;--mat-fab-small-ripple-color: rgba(0, 0, 0, .1);--mat-fab-small-hover-state-layer-opacity: .04;--mat-fab-small-focus-state-layer-opacity: .12;--mat-fab-small-pressed-state-layer-opacity: .12;--mat-fab-small-disabled-state-container-color: rgba(0, 0, 0, .12);--mat-fab-small-disabled-state-foreground-color: rgba(0, 0, 0, .38)}html .mat-mdc-fab.mat-primary{--mdc-fab-container-color: #1b2535}html .mat-mdc-fab.mat-primary{--mat-fab-foreground-color: white;--mat-fab-state-layer-color: white;--mat-fab-ripple-color: rgba(255, 255, 255, .1)}html .mat-mdc-fab.mat-accent{--mdc-fab-container-color: #f2f2f7}html .mat-mdc-fab.mat-accent{--mat-fab-foreground-color: black;--mat-fab-state-layer-color: black;--mat-fab-ripple-color: rgba(0, 0, 0, .1)}html .mat-mdc-fab.mat-warn{--mdc-fab-container-color: #f44336}html .mat-mdc-fab.mat-warn{--mat-fab-foreground-color: white;--mat-fab-state-layer-color: white;--mat-fab-ripple-color: rgba(255, 255, 255, .1)}html .mat-mdc-mini-fab.mat-primary{--mdc-fab-small-container-color: #1b2535}html .mat-mdc-mini-fab.mat-primary{--mat-fab-small-foreground-color: white;--mat-fab-small-state-layer-color: white;--mat-fab-small-ripple-color: rgba(255, 255, 255, .1)}html .mat-mdc-mini-fab.mat-accent{--mdc-fab-small-container-color: #f2f2f7}html .mat-mdc-mini-fab.mat-accent{--mat-fab-small-foreground-color: black;--mat-fab-small-state-layer-color: black;--mat-fab-small-ripple-color: rgba(0, 0, 0, .1)}html .mat-mdc-mini-fab.mat-warn{--mdc-fab-small-container-color: #f44336}html .mat-mdc-mini-fab.mat-warn{--mat-fab-small-foreground-color: white;--mat-fab-small-state-layer-color: white;--mat-fab-small-ripple-color: rgba(255, 255, 255, .1)}html{--mat-fab-touch-target-display: block}html{--mat-fab-small-touch-target-display: block}html{--mdc-snackbar-container-shape: 4px}html{--mdc-snackbar-container-color: #333333;--mdc-snackbar-supporting-text-color: rgba(255, 255, 255, .87)}html{--mat-snack-bar-button-color: rgb(105.275, 133.525, 178.725)}html{--mat-table-row-item-outline-width: 1px}html{--mat-table-background-color: white;--mat-table-header-headline-color: rgba(0, 0, 0, .87);--mat-table-row-item-label-text-color: rgba(0, 0, 0, .87);--mat-table-row-item-outline-color: rgba(0, 0, 0, .12)}html{--mat-table-header-container-height: 56px;--mat-table-footer-container-height: 52px;--mat-table-row-item-container-height: 52px}html{--mdc-circular-progress-active-indicator-width: 4px;--mdc-circular-progress-size: 48px}html{--mdc-circular-progress-active-indicator-color: #1b2535}html .mat-accent{--mdc-circular-progress-active-indicator-color: #f2f2f7}html .mat-warn{--mdc-circular-progress-active-indicator-color: #f44336}html{--mat-badge-container-shape: 50%;--mat-badge-container-size: unset;--mat-badge-small-size-container-size: unset;--mat-badge-large-size-container-size: unset;--mat-badge-legacy-container-size: 22px;--mat-badge-legacy-small-size-container-size: 16px;--mat-badge-legacy-large-size-container-size: 28px;--mat-badge-container-offset: -11px 0;--mat-badge-small-size-container-offset: -8px 0;--mat-badge-large-size-container-offset: -14px 0;--mat-badge-container-overlap-offset: -11px;--mat-badge-small-size-container-overlap-offset: -8px;--mat-badge-large-size-container-overlap-offset: -14px;--mat-badge-container-padding: 0;--mat-badge-small-size-container-padding: 0;--mat-badge-large-size-container-padding: 0}html{--mat-badge-background-color: #1b2535;--mat-badge-text-color: white;--mat-badge-disabled-state-background-color: #b9b9b9;--mat-badge-disabled-state-text-color: rgba(0, 0, 0, .38)}.mat-badge-accent{--mat-badge-background-color: #f2f2f7;--mat-badge-text-color: black}.mat-badge-warn{--mat-badge-background-color: #f44336;--mat-badge-text-color: white}html{--mat-bottom-sheet-container-shape: 4px}html{--mat-bottom-sheet-container-text-color: rgba(0, 0, 0, .87);--mat-bottom-sheet-container-background-color: white}html{--mat-legacy-button-toggle-height: 36px;--mat-legacy-button-toggle-shape: 2px;--mat-legacy-button-toggle-focus-state-layer-opacity: 1}html{--mat-standard-button-toggle-shape: 4px;--mat-standard-button-toggle-hover-state-layer-opacity: .04;--mat-standard-button-toggle-focus-state-layer-opacity: .12}html{--mat-legacy-button-toggle-text-color: rgba(0, 0, 0, .38);--mat-legacy-button-toggle-state-layer-color: rgba(0, 0, 0, .12);--mat-legacy-button-toggle-selected-state-text-color: rgba(0, 0, 0, .54);--mat-legacy-button-toggle-selected-state-background-color: #e0e0e0;--mat-legacy-button-toggle-disabled-state-text-color: rgba(0, 0, 0, .26);--mat-legacy-button-toggle-disabled-state-background-color: #eeeeee;--mat-legacy-button-toggle-disabled-selected-state-background-color: #bdbdbd}html{--mat-standard-button-toggle-text-color: rgba(0, 0, 0, .87);--mat-standard-button-toggle-background-color: white;--mat-standard-button-toggle-state-layer-color: black;--mat-standard-button-toggle-selected-state-background-color: #e0e0e0;--mat-standard-button-toggle-selected-state-text-color: rgba(0, 0, 0, .87);--mat-standard-button-toggle-disabled-state-text-color: rgba(0, 0, 0, .26);--mat-standard-button-toggle-disabled-state-background-color: white;--mat-standard-button-toggle-disabled-selected-state-text-color: rgba(0, 0, 0, .87);--mat-standard-button-toggle-disabled-selected-state-background-color: #bdbdbd;--mat-standard-button-toggle-divider-color: rgb(224.4, 224.4, 224.4)}html{--mat-standard-button-toggle-height: 48px}html{--mat-datepicker-calendar-container-shape: 4px;--mat-datepicker-calendar-container-touch-shape: 4px;--mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);--mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12)}html{--mat-datepicker-calendar-date-selected-state-text-color: white;--mat-datepicker-calendar-date-selected-state-background-color: #1b2535;--mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(27, 37, 53, .4);--mat-datepicker-calendar-date-today-selected-state-outline-color: white;--mat-datepicker-calendar-date-focus-state-background-color: rgba(27, 37, 53, .3);--mat-datepicker-calendar-date-hover-state-background-color: rgba(27, 37, 53, .3);--mat-datepicker-toggle-active-state-icon-color: #1b2535;--mat-datepicker-calendar-date-in-range-state-background-color: rgba(27, 37, 53, .2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);--mat-datepicker-toggle-icon-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-period-button-text-color: black;--mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, .12);--mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, .38);--mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(0, 0, 0, .18);--mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, .87);--mat-datepicker-calendar-date-outline-color: transparent;--mat-datepicker-calendar-date-disabled-state-text-color: rgba(0, 0, 0, .38);--mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, .24);--mat-datepicker-range-input-separator-color: rgba(0, 0, 0, .87);--mat-datepicker-range-input-disabled-state-separator-color: rgba(0, 0, 0, .38);--mat-datepicker-range-input-disabled-state-text-color: rgba(0, 0, 0, .38);--mat-datepicker-calendar-container-background-color: white;--mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, .87)}.mat-datepicker-content.mat-accent{--mat-datepicker-calendar-date-selected-state-text-color: black;--mat-datepicker-calendar-date-selected-state-background-color: #f2f2f7;--mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(242, 242, 247, .4);--mat-datepicker-calendar-date-today-selected-state-outline-color: black;--mat-datepicker-calendar-date-focus-state-background-color: rgba(242, 242, 247, .3);--mat-datepicker-calendar-date-hover-state-background-color: rgba(242, 242, 247, .3);--mat-datepicker-calendar-date-in-range-state-background-color: rgba(242, 242, 247, .2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032)}.mat-datepicker-content.mat-warn{--mat-datepicker-calendar-date-selected-state-text-color: white;--mat-datepicker-calendar-date-selected-state-background-color: #f44336;--mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(244, 67, 54, .4);--mat-datepicker-calendar-date-today-selected-state-outline-color: white;--mat-datepicker-calendar-date-focus-state-background-color: rgba(244, 67, 54, .3);--mat-datepicker-calendar-date-hover-state-background-color: rgba(244, 67, 54, .3);--mat-datepicker-calendar-date-in-range-state-background-color: rgba(244, 67, 54, .2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032)}.mat-datepicker-toggle-active.mat-accent{--mat-datepicker-toggle-active-state-icon-color: #f2f2f7}.mat-datepicker-toggle-active.mat-warn{--mat-datepicker-toggle-active-state-icon-color: #f44336}.mat-calendar-controls{--mat-icon-button-touch-target-display: none}.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:8px}html{--mat-divider-width: 1px}html{--mat-divider-color: rgba(0, 0, 0, .12)}html{--mat-expansion-container-shape: 4px;--mat-expansion-legacy-header-indicator-display: inline-block;--mat-expansion-header-indicator-display: none}html{--mat-expansion-container-background-color: white;--mat-expansion-container-text-color: rgba(0, 0, 0, .87);--mat-expansion-actions-divider-color: rgba(0, 0, 0, .12);--mat-expansion-header-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-expansion-header-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-expansion-header-disabled-state-text-color: rgba(0, 0, 0, .26);--mat-expansion-header-text-color: rgba(0, 0, 0, .87);--mat-expansion-header-description-color: rgba(0, 0, 0, .54);--mat-expansion-header-indicator-color: rgba(0, 0, 0, .54)}html{--mat-expansion-header-collapsed-state-height: 48px;--mat-expansion-header-expanded-state-height: 64px}html{--mat-icon-color: inherit}.mat-icon.mat-primary{--mat-icon-color: #1b2535}.mat-icon.mat-accent{--mat-icon-color: #f2f2f7}.mat-icon.mat-warn{--mat-icon-color: #f44336}html{--mat-sidenav-container-shape: 0;--mat-sidenav-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12);--mat-sidenav-container-width: auto}html{--mat-sidenav-container-divider-color: rgba(0, 0, 0, .12);--mat-sidenav-container-background-color: white;--mat-sidenav-container-text-color: rgba(0, 0, 0, .87);--mat-sidenav-content-background-color: #fafafa;--mat-sidenav-content-text-color: rgba(0, 0, 0, .87);--mat-sidenav-scrim-color: rgba(0, 0, 0, .6)}html{--mat-stepper-header-icon-foreground-color: white;--mat-stepper-header-selected-state-icon-background-color: #1b2535;--mat-stepper-header-selected-state-icon-foreground-color: white;--mat-stepper-header-done-state-icon-background-color: #1b2535;--mat-stepper-header-done-state-icon-foreground-color: white;--mat-stepper-header-edit-state-icon-background-color: #1b2535;--mat-stepper-header-edit-state-icon-foreground-color: white;--mat-stepper-container-color: white;--mat-stepper-line-color: rgba(0, 0, 0, .12);--mat-stepper-header-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-stepper-header-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-stepper-header-label-text-color: rgba(0, 0, 0, .54);--mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, .54);--mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, .87);--mat-stepper-header-error-state-label-text-color: #f44336;--mat-stepper-header-icon-background-color: rgba(0, 0, 0, .54);--mat-stepper-header-error-state-icon-foreground-color: #f44336;--mat-stepper-header-error-state-icon-background-color: transparent}html .mat-step-header.mat-accent{--mat-stepper-header-icon-foreground-color: black;--mat-stepper-header-selected-state-icon-background-color: #f2f2f7;--mat-stepper-header-selected-state-icon-foreground-color: black;--mat-stepper-header-done-state-icon-background-color: #f2f2f7;--mat-stepper-header-done-state-icon-foreground-color: black;--mat-stepper-header-edit-state-icon-background-color: #f2f2f7;--mat-stepper-header-edit-state-icon-foreground-color: black}html .mat-step-header.mat-warn{--mat-stepper-header-icon-foreground-color: white;--mat-stepper-header-selected-state-icon-background-color: #f44336;--mat-stepper-header-selected-state-icon-foreground-color: white;--mat-stepper-header-done-state-icon-background-color: #f44336;--mat-stepper-header-done-state-icon-foreground-color: white;--mat-stepper-header-edit-state-icon-background-color: #f44336;--mat-stepper-header-edit-state-icon-foreground-color: white}html{--mat-stepper-header-height: 72px}html{--mat-sort-arrow-color: rgb(117.3, 117.3, 117.3)}html{--mat-toolbar-container-background-color: whitesmoke;--mat-toolbar-container-text-color: rgba(0, 0, 0, .87)}.mat-toolbar.mat-primary{--mat-toolbar-container-background-color: #1b2535;--mat-toolbar-container-text-color: white}.mat-toolbar.mat-accent{--mat-toolbar-container-background-color: #f2f2f7;--mat-toolbar-container-text-color: black}.mat-toolbar.mat-warn{--mat-toolbar-container-background-color: #f44336;--mat-toolbar-container-text-color: white}html{--mat-toolbar-standard-height: 64px;--mat-toolbar-mobile-height: 56px}html{--mat-tree-container-background-color: white;--mat-tree-node-text-color: rgba(0, 0, 0, .87)}html{--mat-tree-node-min-height: 48px}html{--mat-timepicker-container-shape: 4px;--mat-timepicker-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-timepicker-container-background-color: white}:root{--primary-color: #1b2535;--primary-lighter-color: rgb(78.6375, 107.7625, 154.3625);--primary-darker-color: hsl(216.9230769231, 32.5%, -4.3137254902%);--accent-color: #f2f2f7;--accent-lighter-color: #f3f5f9;--accent-lightest-color: hsl(240, 23.8095238095%, 125.8823529412%);--accent-darker-color: rgb(178.8571428571, 178.8571428571, 208.1428571429);--warn-color: #f44336;--warn-lighter-color: #ef9a9a;--warn-darker-color: #d32f2f;--background-color: #f2f2f7;--border-color: #e1e1e1;--text-color: #4a5568}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-slide,.swiper-cube-shadow{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:\"\";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top,.swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress),.swiper-watch-progress .swiper-slide-visible{.swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ud-custom-field{display:block;width:100%}.ud-custom-field.mat-mdc-form-field,.ud-custom-field .mat-mdc-text-field-wrapper,.ud-custom-field .mat-mdc-form-field-wrapper,.ud-custom-field .mat-mdc-form-field-subscript-wrapper{width:100%;box-sizing:border-box}.ud-custom-field .mat-mdc-text-field-wrapper{background:var(--ud-field-bg)!important;transition:background .2s ease}.ud-custom-field:hover .mat-mdc-text-field-wrapper{background:var(--ud-field-bg-hover)!important}.ud-custom-field.mat-form-field-disabled{opacity:.6;cursor:not-allowed}.ud-custom-field.mat-form-field-disabled .mat-mdc-text-field-wrapper,.ud-custom-field.mat-form-field-disabled .mat-mdc-form-field-flex,.ud-custom-field.mat-form-field-disabled input,.ud-custom-field.mat-form-field-disabled .mat-mdc-select{cursor:not-allowed;pointer-events:none}.ud-custom-field .mat-mdc-form-field-flex{background:transparent;border-radius:var(--ud-field-radius)}.ud-custom-field .mat-mdc-form-field-infix,.ud-custom-field .mat-mdc-select-value{font-family:var(--ud-field-font);font-size:.925rem;color:var(--ud-field-text)}.ud-custom-field .mat-mdc-floating-label{font-family:var(--ud-field-font);font-size:.925rem;color:var(--ud-field-text-muted);font-weight:400}.ud-custom-field.mat-focused .mat-mdc-floating-label{color:var(--ud-field-border-focus)}.ud-custom-field .mdc-notched-outline__leading,.ud-custom-field .mdc-notched-outline__notch,.ud-custom-field .mdc-notched-outline__trailing{border-color:var(--ud-field-border)!important;transition:border-color .2s ease;background:transparent!important}.ud-custom-field .mdc-notched-outline__notch{border-left:none!important}.ud-custom-field.mat-focused .mdc-notched-outline__leading,.ud-custom-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--ud-field-border-focus)!important;border-width:1.5px!important}.ud-custom-field .mat-mdc-form-field-icon-prefix:after{display:none!important}.ud-custom-field .mat-icon[matPrefix]{color:var(--ud-field-text-muted);font-size:19px;width:19px;height:19px;margin-right:4px;transition:color .2s ease}.ud-custom-field.mat-focused .mat-icon[matPrefix]{color:var(--ud-field-border-focus)}.ud-custom-field .mat-mdc-chip.mat-mdc-standard-chip{background:var(--ud-navy-dim)!important;color:var(--ud-navy)!important;font-family:var(--ud-field-font);font-size:.78rem;font-weight:500;border:1px solid var(--ud-navy-mid);height:22px}.ud-custom-field .mat-mdc-chip.mat-mdc-standard-chip .mdc-evolution-chip__text-label{color:var(--ud-navy)!important;font-size:.78rem}.ud-custom-field.ud-chip-select .mat-mdc-form-field-infix{padding-top:.5rem;padding-bottom:0}.mat-mdc-chip.mat-mdc-standard-chip{background:var(--ud-navy-dim)!important;color:var(--ud-navy)!important;font-family:var(--ud-field-font);font-size:.78rem;font-weight:500;border:1px solid var(--ud-navy-mid);height:22px}.mat-mdc-chip.mat-mdc-standard-chip .mdc-evolution-chip__text-label{color:var(--ud-navy)!important;font-size:.78rem}:root{--ud-field-bg: #f4f5f7;--ud-field-bg-hover: #eff1f5;--ud-field-border: #c9cdd6;--ud-field-border-focus: #1b2535;--ud-field-radius: 6px;--ud-field-text: #1b2535;--ud-field-text-muted: #6b7585;--ud-field-font: \"DM Sans\", system-ui, sans-serif;--ud-navy: #1b2535;--ud-navy-dim: rgba(27, 37, 53, .08);--ud-navy-mid: rgba(27, 37, 53, .18)}html,body{margin:0}:host{--eu-navy: #1b2535;--eu-navy-soft: #253347;--eu-navy-dim: rgba(27, 37, 53, .08);--eu-navy-mid: rgba(27, 37, 53, .18);--eu-surface: #ffffff;--eu-bg: #f4f5f7;--eu-border: #e2e5ea;--eu-border-mid: #c9cdd6;--eu-text: #1b2535;--eu-muted: #6b7585;--eu-danger: var(--danger, #e53935);--eu-radius: 10px;--eu-radius-sm: 6px;--eu-shadow: 0 2px 12px rgba(27, 37, 53, .06), 0 1px 4px rgba(27, 37, 53, .04);--eu-shadow-btn: 0 4px 14px rgba(27, 37, 53, .22);font-family:DM Sans,system-ui,sans-serif}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px #fafafa inset!important;background-color:#fafafa!important}p{font:20px Roboto,Helvetica Neue,sans-serif}.w-max-content{width:max-content}.ud-text-theme-primary{color:#1b2535}.ud-text-theme-primary-darker{color:#0c1a27}.ud-text-primary,.ud-text-white{color:#f5f6f7}.ud-dashed-container{border:1px dashed #373f4c;border-radius:10px}.text-large{font-size:large}.text-small{font-size:small}.text-smaller{font-size:smaller}.bg-accent{background-color:var(--accent-color)}.bg-accent-lighter{background-color:var(--accent-lighter-color)}.bg-accent-lightest{background-color:var(--accent-lightest-color)}.pointer:hover{cursor:pointer;outline:1px solid var(--accent-color);background-color:var(--accent-lightest-color)}.custom-snackbar-container.mat-mdc-snack-bar-container{--mat-snack-bar-button-color: transparent;--mdc-snackbar-container-color: transparent !important;--mdc-snackbar-supporting-text-color: transparent;box-shadow:none!important;padding:0!important;margin:8px!important;background:transparent!important}.mat-mdc-snack-bar-container.custom-snackbar-container .mdc-snackbar__surface{background:transparent!important;background-color:transparent!important;box-shadow:none!important;padding:0!important}.mat-mdc-snack-bar-container.custom-snackbar-container .mat-mdc-snack-bar-label{padding:0!important;margin:0!important}.mat-mdc-snack-bar-container.custom-snackbar-container .mdc-snackbar__label{padding:0!important}.table-div .separate-filters{display:flex;flex-direction:column}.table-div .separate-filters .filter-dropdown{width:fit-content}.table-div .separate-filters .filters{display:flex;flex-direction:row;gap:8px;margin:0 24px 1rem}.table-div .separate-filters .filters .filter mat-icon{margin-right:0!important}.table-div mat-card.table-card{border-radius:10px!important;overflow:hidden;box-shadow:0 2px 12px #373f4c1a!important;background:#fff!important}.table-div mat-card.table-card mat-card-header.table-header{padding:14px 16px 14px 12px;background:var(--accent-lightest-color);border-bottom:1px solid var(--accent-color);min-height:65px}.table-div mat-card.table-card mat-card-header.table-header ::ng-deep .mat-mdc-card-header-text{display:none}.table-div mat-card.table-card mat-card-header.table-header .table-header-icon{color:var(--primary-color);font-size:20px;width:20px;height:20px}.table-div mat-card.table-card mat-card-header.table-header .table-title{margin-bottom:0;font-size:.9375rem;font-weight:600;letter-spacing:.01em;color:#373f4c}.table-div mat-card.table-card mat-card-content{padding:0}.table-div mat-card.table-card mat-card-content .no-data-found{display:flex;flex-direction:column;justify-content:center;align-items:center;height:140px;gap:8px;background:#fff}.table-div mat-card.table-card mat-card-content .no-data-found .no-data-icon{font-size:40px;width:40px;height:40px;color:var(--accent-darker-color);opacity:.45}.table-div mat-card.table-card mat-card-content .no-data-found .no-data-text{font-size:.875rem;color:#373f4c80;margin:0}.table-div mat-card.table-card mat-card-content .loading-container{display:flex;justify-content:center;align-items:center;padding:32px;background:#fff}.table-div mat-card.table-card mat-card-content mat-paginator{border-radius:0 0 10px 10px;background-color:#dde3ec!important;border-top:1px solid #c8c8d4}.table-div .action-buttons-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.table-div tr td,.table-div tr th{border-bottom:1px solid var(--accent-color);color:#373f4c;padding:10px 8px}.table-div tr th{background-color:#dde3ec;font-weight:600;font-size:.9rem;letter-spacing:.05em}.table-div tr th:first-of-type,.table-div tr td:first-of-type{padding-left:20px}.table-div tr th:last-of-type,.table-div tr td:last-of-type{padding-right:20px}table{width:100%}.mat-mdc-form-field{font-size:14px}.mat-mdc-form-field ::ng-deep .mat-mdc-text-field-wrapper{max-height:45px;padding-left:4px}.mat-mdc-form-field ::ng-deep .mat-mdc-text-field-wrapper [class^=mdc-notched-outline__]{border:none;border-bottom:1px solid #929293;border-radius:0}.mat-mdc-form-field ::ng-deep .mat-mdc-text-field-wrapper [class^=mdc-notched-outline__]:first-of-type{display:none}.mat-mdc-icon-button.mat-mdc-button-base{padding:10px}.spacer{flex:1 1 auto}.link{color:#459fff;font-weight:600;cursor:pointer}.filter{font-size:100%;border-top:.84375em solid rgba(0,0,0,0)}tr.detail-row{height:0}.element-row td{border-bottom-width:0}.element-detail{overflow:hidden;display:flex}.element-detail>img{max-height:100%}.element-symbol{font-weight:700;font-size:40px;line-height:normal}.element-description{padding:16px}.element-description-attribution{opacity:.5}.pills{display:flex;flex-direction:column;gap:16px;margin:8px 2px}::ng-deep .ud-actions-menu{border-radius:10px!important;box-shadow:0 4px 20px #1b25351a,0 1px 4px #1b25350f!important;border:1px solid rgba(27,37,53,.08);overflow:hidden;min-width:200px!important}::ng-deep .ud-actions-menu .mat-mdc-menu-content{padding:4px!important}::ng-deep .ud-actions-menu .ud-menu-item{display:flex;align-items:center;gap:0;height:40px;min-height:40px;padding:0 12px 0 0!important;border-radius:7px;margin:1px 0;position:relative;overflow:hidden;transition:background .15s ease}::ng-deep .ud-actions-menu .ud-menu-item ::ng-deep .mat-mdc-menu-item-text{display:flex}::ng-deep .ud-actions-menu .ud-menu-item:before{content:\"\";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 2px 2px 0;background:#1b2535;transform:scaleY(0);transform-origin:center;transition:transform .18s cubic-bezier(.4,0,.2,1)}::ng-deep .ud-actions-menu .ud-menu-item:hover:not([disabled]):before{transform:scaleY(1)}::ng-deep .ud-actions-menu .ud-menu-item:hover:not([disabled]){background:#1b25350d!important}::ng-deep .ud-actions-menu .ud-menu-item[disabled]{opacity:.38}::ng-deep .ud-actions-menu .ud-menu-item .ud-menu-item__icon-wrap{display:flex;align-items:center;justify-content:center;width:40px;flex-shrink:0}::ng-deep .ud-actions-menu .ud-menu-item .ud-menu-item__icon-wrap mat-icon{font-size:17px;width:17px;height:17px;color:#6b7585;transition:color .15s ease}::ng-deep .ud-actions-menu .ud-menu-item:hover:not([disabled]) .ud-menu-item__icon-wrap mat-icon{color:#1b2535}::ng-deep .ud-actions-menu .ud-menu-item .ud-menu-item__label{font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;font-weight:500;color:#1b2535;letter-spacing:.01em;white-space:nowrap}::ng-deep .ud-actions-menu .ud-menu-item .mdc-list-item__primary-text{display:none!important}.filter-button-trigger--active{background-color:#1b25350f!important;border-color:#1b2535!important;color:#1b2535!important;font-weight:600!important}.filter-button-trigger--active .filter-clear-icon{font-size:16px!important;width:16px!important;height:16px!important;border-radius:50%;transition:background .15s ease}.filter-button-trigger--active .filter-clear-icon:hover{background:#1b25351f}::ng-deep .custom-dropdown{min-width:280px!important;max-width:650px!important;width:auto!important;max-height:none!important;overflow:visible!important;border-radius:10px!important;box-shadow:0 4px 20px #1b25351a,0 1px 4px #1b25350f!important}::ng-deep .custom-dropdown .mat-mdc-menu-content{padding:14px;width:100%;box-sizing:border-box}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content{box-sizing:border-box}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content .boolean-content{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:200px;padding:4px 0}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content .boolean-content .boolean-label{font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;font-weight:500;color:#1b2535}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content .date-content{width:320px}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content .date-content ud-date-range-input{display:block;width:100%}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content .string-content{display:flex;gap:1rem}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content mat-form-field{width:100%}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content mat-form-field .mat-mdc-form-field{font-size:14px}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content mat-form-field input{width:100%;box-sizing:border-box}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content .number-content{display:flex;flex-direction:column;gap:8px;width:100%}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content .number-content ud-multi-select{width:100%}::ng-deep .custom-dropdown .mat-mdc-menu-content .dropdown-content .number-content .number-range-row{display:flex;gap:8px;width:100%}\n"], dependencies: [{ kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "pipe", type: ToObservablePipe, name: "toObservable" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: ToggleComponent, selector: "ud-toggle", inputs: ["controlName", "size", "label", "labelPosition", "ariaLabel"], outputs: ["onChange"] }, { kind: "component", type: DateRangeInputComponent, selector: "ud-date-range-input", inputs: ["startControlName", "endControlName", "label", "icon", "iconFontSet", "startPlaceholder", "endPlaceholder", "min", "max", "disabled", "hint"] }, { kind: "component", type: TextInputComponent, selector: "ud-text-input", inputs: ["controlName", "label", "placeholder", "type", "icon", "iconFontSet", "loading", "step", "min", "max", "disabled", "hint", "size", "clearable"] }, { kind: "component", type: MultiSelectComponent, selector: "ud-multi-select", inputs: ["controlName", "label", "icon", "iconFontSet", "options", "multiple", "maxChipsVisible", "moreText", "loading", "disabled", "hint"] }, { kind: "component", type: UdButtonComponent, selector: "ud-button", inputs: ["variant", "color", "size", "type", "icon", "iconPosition", "iconFontSet", "loading", "disabled", "fullWidth"] }], animations: [
|
|
1763
1767
|
trigger('detailExpand', [
|
|
1764
1768
|
state('collapsed, void', style({ height: '0px', minHeight: '0' })),
|
|
1765
1769
|
state('expanded', style({ height: '*' })),
|
|
@@ -1767,7 +1771,7 @@ class CustomTableComponent {
|
|
|
1767
1771
|
]),
|
|
1768
1772
|
] });
|
|
1769
1773
|
}
|
|
1770
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1774
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CustomTableComponent, decorators: [{
|
|
1771
1775
|
type: Component,
|
|
1772
1776
|
args: [{ selector: 'ud-table', animations: [
|
|
1773
1777
|
trigger('detailExpand', [
|
|
@@ -1905,10 +1909,10 @@ class DynamicComponentComponent {
|
|
|
1905
1909
|
this.componentRef.instance[key] = this.properties[key];
|
|
1906
1910
|
});
|
|
1907
1911
|
}
|
|
1908
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1909
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
1912
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1913
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: DynamicComponentComponent, isStandalone: true, selector: "ud-dynamic-component", inputs: { component: "component", properties: "properties" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div #container></div>\n", styles: [""] });
|
|
1910
1914
|
}
|
|
1911
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1915
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicComponentComponent, decorators: [{
|
|
1912
1916
|
type: Component,
|
|
1913
1917
|
args: [{ selector: 'ud-dynamic-component', template: "<div #container></div>\n" }]
|
|
1914
1918
|
}], ctorParameters: () => [], propDecorators: { component: [{
|
|
@@ -1927,10 +1931,10 @@ class EditViewSectionDirective {
|
|
|
1927
1931
|
constructor(templateRef) {
|
|
1928
1932
|
this.templateRef = templateRef;
|
|
1929
1933
|
}
|
|
1930
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1931
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
1934
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: EditViewSectionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1935
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: EditViewSectionDirective, isStandalone: true, selector: "[editViewSection]", inputs: { label: "label", icon: "icon" }, ngImport: i0 });
|
|
1932
1936
|
}
|
|
1933
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1937
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: EditViewSectionDirective, decorators: [{
|
|
1934
1938
|
type: Directive,
|
|
1935
1939
|
args: [{
|
|
1936
1940
|
selector: '[editViewSection]',
|
|
@@ -1957,10 +1961,10 @@ class EditViewComponent {
|
|
|
1957
1961
|
resolveLabel(label) {
|
|
1958
1962
|
return isObservable(label) ? label : of(label);
|
|
1959
1963
|
}
|
|
1960
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1961
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: EditViewComponent, isStandalone: true, selector: "ud-edit-view", inputs: { title: "title", loading: "loading", skeletonTitleHeight: "skeletonTitleHeight", skeletonBodyHeight: "skeletonBodyHeight" }, queries: [{ propertyName: "sections", predicate: EditViewSectionDirective }], ngImport: i0, template: "<div class=\"container\">\n <div class=\"header\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"loading col-6\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonTitleHeight }\" />\n } @else {\n <h4>{{ title }}</h4>\n }\n <ng-content select=\"[header-actions]\"></ng-content>\n </div>\n <div class=\"content\" [ngClass]=\"{ loading: loading }\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"col\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonBodyHeight }\" />\n } @else {\n @if (hasSections) {\n @for (sec of sectionsArray; track sec) {\n <div class=\"section\">\n @if (resolveLabel(sec.label) | async; as label) {\n <div class=\"section-header\">\n @if (sec.icon) {\n <mat-icon class=\"section-icon\">{{ sec.icon }}</mat-icon>\n }\n <span class=\"section-label\">{{ label }}</span>\n </div>\n }\n <ng-container [ngTemplateOutlet]=\"sec.templateRef\"></ng-container>\n </div>\n }\n }\n <ng-content select=\"[main]\"></ng-content>\n }\n </div>\n @if (!loading) {\n <ng-content select=\"[footer]\"></ng-content>\n }\n</div>\n", styles: ["html{--mat-ripple-color: rgba(0, 0, 0, .1)}html{--mat-option-selected-state-label-text-color: #1b2535;--mat-option-label-text-color: rgba(0, 0, 0, .87);--mat-option-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-option-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-option-selected-state-layer-color: rgba(0, 0, 0, .04)}.mat-accent{--mat-option-selected-state-label-text-color: #f2f2f7;--mat-option-label-text-color: rgba(0, 0, 0, .87);--mat-option-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-option-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-option-selected-state-layer-color: rgba(0, 0, 0, .04)}.mat-warn{--mat-option-selected-state-label-text-color: #f44336;--mat-option-label-text-color: rgba(0, 0, 0, .87);--mat-option-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-option-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-option-selected-state-layer-color: rgba(0, 0, 0, .04)}html{--mat-optgroup-label-text-color: rgba(0, 0, 0, .87)}html{--mat-full-pseudo-checkbox-selected-icon-color: #f2f2f7;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0}html{--mat-minimal-pseudo-checkbox-selected-checkmark-color: #f2f2f7;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}.mat-primary{--mat-full-pseudo-checkbox-selected-icon-color: #1b2535;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0}.mat-primary{--mat-minimal-pseudo-checkbox-selected-checkmark-color: #1b2535;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}.mat-accent{--mat-full-pseudo-checkbox-selected-icon-color: #f2f2f7;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0}.mat-accent{--mat-minimal-pseudo-checkbox-selected-checkmark-color: #f2f2f7;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}.mat-warn{--mat-full-pseudo-checkbox-selected-icon-color: #f44336;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0}.mat-warn{--mat-minimal-pseudo-checkbox-selected-checkmark-color: #f44336;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}html{--mat-app-background-color: #fafafa;--mat-app-text-color: rgba(0, 0, 0, .87);--mat-app-elevation-shadow-level-0: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-1: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-2: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-3: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-4: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-5: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 5px 8px 0px rgba(0, 0, 0, .14), 0px 1px 14px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-6: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-7: 0px 4px 5px -2px rgba(0, 0, 0, .2), 0px 7px 10px 1px rgba(0, 0, 0, .14), 0px 2px 16px 1px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-8: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-9: 0px 5px 6px -3px rgba(0, 0, 0, .2), 0px 9px 12px 1px rgba(0, 0, 0, .14), 0px 3px 16px 2px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-10: 0px 6px 6px -3px rgba(0, 0, 0, .2), 0px 10px 14px 1px rgba(0, 0, 0, .14), 0px 4px 18px 3px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-11: 0px 6px 7px -4px rgba(0, 0, 0, .2), 0px 11px 15px 1px rgba(0, 0, 0, .14), 0px 4px 20px 3px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-12: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-13: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 13px 19px 2px rgba(0, 0, 0, .14), 0px 5px 24px 4px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-14: 0px 7px 9px -4px rgba(0, 0, 0, .2), 0px 14px 21px 2px rgba(0, 0, 0, .14), 0px 5px 26px 4px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-15: 0px 8px 9px -5px rgba(0, 0, 0, .2), 0px 15px 22px 2px rgba(0, 0, 0, .14), 0px 6px 28px 5px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-16: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-17: 0px 8px 11px -5px rgba(0, 0, 0, .2), 0px 17px 26px 2px rgba(0, 0, 0, .14), 0px 6px 32px 5px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-18: 0px 9px 11px -5px rgba(0, 0, 0, .2), 0px 18px 28px 2px rgba(0, 0, 0, .14), 0px 7px 34px 6px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-19: 0px 9px 12px -6px rgba(0, 0, 0, .2), 0px 19px 29px 2px rgba(0, 0, 0, .14), 0px 7px 36px 6px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-20: 0px 10px 13px -6px rgba(0, 0, 0, .2), 0px 20px 31px 3px rgba(0, 0, 0, .14), 0px 8px 38px 7px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-21: 0px 10px 13px -6px rgba(0, 0, 0, .2), 0px 21px 33px 3px rgba(0, 0, 0, .14), 0px 8px 40px 7px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-22: 0px 10px 14px -6px rgba(0, 0, 0, .2), 0px 22px 35px 3px rgba(0, 0, 0, .14), 0px 8px 42px 7px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-23: 0px 11px 14px -7px rgba(0, 0, 0, .2), 0px 23px 36px 3px rgba(0, 0, 0, .14), 0px 9px 44px 8px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-24: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12)}html{--mdc-elevated-card-container-shape: 4px}html{--mdc-outlined-card-container-shape: 4px;--mdc-outlined-card-outline-width: 1px}html{--mdc-elevated-card-container-color: white;--mdc-elevated-card-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12)}html{--mdc-outlined-card-container-color: white;--mdc-outlined-card-outline-color: rgba(0, 0, 0, .12);--mdc-outlined-card-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12)}html{--mat-card-subtitle-text-color: rgba(0, 0, 0, .54)}html{--mdc-linear-progress-active-indicator-height: 4px;--mdc-linear-progress-track-height: 4px;--mdc-linear-progress-track-shape: 0}.mat-mdc-progress-bar{--mdc-linear-progress-active-indicator-color: #1b2535;--mdc-linear-progress-track-color: rgba(27, 37, 53, .25)}.mat-mdc-progress-bar.mat-accent{--mdc-linear-progress-active-indicator-color: #f2f2f7;--mdc-linear-progress-track-color: rgba(242, 242, 247, .25)}.mat-mdc-progress-bar.mat-warn{--mdc-linear-progress-active-indicator-color: #f44336;--mdc-linear-progress-track-color: rgba(244, 67, 54, .25)}html{--mdc-plain-tooltip-container-shape: 4px;--mdc-plain-tooltip-supporting-text-line-height: 16px}html{--mdc-plain-tooltip-container-color: #616161;--mdc-plain-tooltip-supporting-text-color: #fff}html{--mdc-filled-text-field-active-indicator-height: 1px;--mdc-filled-text-field-focus-active-indicator-height: 2px;--mdc-filled-text-field-container-shape: 4px}html{--mdc-outlined-text-field-outline-width: 1px;--mdc-outlined-text-field-focus-outline-width: 2px;--mdc-outlined-text-field-container-shape: 4px}html{--mdc-filled-text-field-caret-color: #1b2535;--mdc-filled-text-field-focus-active-indicator-color: #1b2535;--mdc-filled-text-field-focus-label-text-color: rgba(27, 37, 53, .87);--mdc-filled-text-field-container-color: rgb(244.8, 244.8, 244.8);--mdc-filled-text-field-disabled-container-color: rgb(249.9, 249.9, 249.9);--mdc-filled-text-field-label-text-color: rgba(0, 0, 0, .6);--mdc-filled-text-field-hover-label-text-color: rgba(0, 0, 0, .6);--mdc-filled-text-field-disabled-label-text-color: rgba(0, 0, 0, .38);--mdc-filled-text-field-input-text-color: rgba(0, 0, 0, .87);--mdc-filled-text-field-disabled-input-text-color: rgba(0, 0, 0, .38);--mdc-filled-text-field-input-text-placeholder-color: rgba(0, 0, 0, .6);--mdc-filled-text-field-error-hover-label-text-color: #f44336;--mdc-filled-text-field-error-focus-label-text-color: #f44336;--mdc-filled-text-field-error-label-text-color: #f44336;--mdc-filled-text-field-error-caret-color: #f44336;--mdc-filled-text-field-active-indicator-color: rgba(0, 0, 0, .42);--mdc-filled-text-field-disabled-active-indicator-color: rgba(0, 0, 0, .06);--mdc-filled-text-field-hover-active-indicator-color: rgba(0, 0, 0, .87);--mdc-filled-text-field-error-active-indicator-color: #f44336;--mdc-filled-text-field-error-focus-active-indicator-color: #f44336;--mdc-filled-text-field-error-hover-active-indicator-color: #f44336}html{--mdc-outlined-text-field-caret-color: #1b2535;--mdc-outlined-text-field-focus-outline-color: #1b2535;--mdc-outlined-text-field-focus-label-text-color: rgba(27, 37, 53, .87);--mdc-outlined-text-field-label-text-color: rgba(0, 0, 0, .6);--mdc-outlined-text-field-hover-label-text-color: rgba(0, 0, 0, .6);--mdc-outlined-text-field-disabled-label-text-color: rgba(0, 0, 0, .38);--mdc-outlined-text-field-input-text-color: rgba(0, 0, 0, .87);--mdc-outlined-text-field-disabled-input-text-color: rgba(0, 0, 0, .38);--mdc-outlined-text-field-input-text-placeholder-color: rgba(0, 0, 0, .6);--mdc-outlined-text-field-error-caret-color: #f44336;--mdc-outlined-text-field-error-focus-label-text-color: #f44336;--mdc-outlined-text-field-error-label-text-color: #f44336;--mdc-outlined-text-field-error-hover-label-text-color: #f44336;--mdc-outlined-text-field-outline-color: rgba(0, 0, 0, .38);--mdc-outlined-text-field-disabled-outline-color: rgba(0, 0, 0, .06);--mdc-outlined-text-field-hover-outline-color: rgba(0, 0, 0, .87);--mdc-outlined-text-field-error-focus-outline-color: #f44336;--mdc-outlined-text-field-error-hover-outline-color: #f44336;--mdc-outlined-text-field-error-outline-color: #f44336}html{--mat-form-field-focus-select-arrow-color: rgba(27, 37, 53, .87);--mat-form-field-disabled-input-text-placeholder-color: rgba(0, 0, 0, .38);--mat-form-field-state-layer-color: rgba(0, 0, 0, .87);--mat-form-field-error-text-color: #f44336;--mat-form-field-select-option-text-color: inherit;--mat-form-field-select-disabled-option-text-color: GrayText;--mat-form-field-leading-icon-color: unset;--mat-form-field-disabled-leading-icon-color: unset;--mat-form-field-trailing-icon-color: unset;--mat-form-field-disabled-trailing-icon-color: unset;--mat-form-field-error-focus-trailing-icon-color: unset;--mat-form-field-error-hover-trailing-icon-color: unset;--mat-form-field-error-trailing-icon-color: unset;--mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, .54);--mat-form-field-disabled-select-arrow-color: rgba(0, 0, 0, .38);--mat-form-field-hover-state-layer-opacity: .04;--mat-form-field-focus-state-layer-opacity: .08}.mat-mdc-form-field.mat-accent{--mdc-filled-text-field-caret-color: #f2f2f7;--mdc-filled-text-field-focus-active-indicator-color: #f2f2f7;--mdc-filled-text-field-focus-label-text-color: rgba(242, 242, 247, .87)}.mat-mdc-form-field.mat-accent{--mdc-outlined-text-field-caret-color: #f2f2f7;--mdc-outlined-text-field-focus-outline-color: #f2f2f7;--mdc-outlined-text-field-focus-label-text-color: rgba(242, 242, 247, .87)}.mat-mdc-form-field.mat-accent{--mat-form-field-focus-select-arrow-color: rgba(242, 242, 247, .87)}.mat-mdc-form-field.mat-warn{--mdc-filled-text-field-caret-color: #f44336;--mdc-filled-text-field-focus-active-indicator-color: #f44336;--mdc-filled-text-field-focus-label-text-color: rgba(244, 67, 54, .87)}.mat-mdc-form-field.mat-warn{--mdc-outlined-text-field-caret-color: #f44336;--mdc-outlined-text-field-focus-outline-color: #f44336;--mdc-outlined-text-field-focus-label-text-color: rgba(244, 67, 54, .87)}.mat-mdc-form-field.mat-warn{--mat-form-field-focus-select-arrow-color: rgba(244, 67, 54, .87)}html{--mat-form-field-container-height: 56px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 16px;--mat-form-field-filled-with-label-container-padding-top: 24px;--mat-form-field-filled-with-label-container-padding-bottom: 8px}html{--mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);--mat-select-disabled-trigger-text-color: rgba(0, 0, 0, .38);--mat-select-placeholder-text-color: rgba(0, 0, 0, .6);--mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);--mat-select-disabled-arrow-color: rgba(0, 0, 0, .38);--mat-select-focused-arrow-color: rgba(27, 37, 53, .87);--mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)}html .mat-mdc-form-field.mat-accent{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);--mat-select-disabled-trigger-text-color: rgba(0, 0, 0, .38);--mat-select-placeholder-text-color: rgba(0, 0, 0, .6);--mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);--mat-select-disabled-arrow-color: rgba(0, 0, 0, .38);--mat-select-focused-arrow-color: rgba(242, 242, 247, .87);--mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)}html .mat-mdc-form-field.mat-warn{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);--mat-select-disabled-trigger-text-color: rgba(0, 0, 0, .38);--mat-select-placeholder-text-color: rgba(0, 0, 0, .6);--mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);--mat-select-disabled-arrow-color: rgba(0, 0, 0, .38);--mat-select-focused-arrow-color: rgba(244, 67, 54, .87);--mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)}html{--mat-select-arrow-transform: translateY(-8px)}html{--mat-autocomplete-container-shape: 4px;--mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-autocomplete-background-color: white}html{--mdc-dialog-container-shape: 4px}html{--mat-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12);--mat-dialog-container-max-width: 80vw;--mat-dialog-container-small-max-width: 80vw;--mat-dialog-container-min-width: 0;--mat-dialog-actions-alignment: start;--mat-dialog-actions-padding: 8px;--mat-dialog-content-padding: 20px 24px;--mat-dialog-with-actions-content-padding: 20px 24px;--mat-dialog-headline-padding: 0 24px 9px}html{--mdc-dialog-container-color: white;--mdc-dialog-subhead-color: rgba(0, 0, 0, .87);--mdc-dialog-supporting-text-color: rgba(0, 0, 0, .6)}.mat-mdc-standard-chip{--mdc-chip-container-shape-radius: 16px;--mdc-chip-with-avatar-avatar-shape-radius: 14px;--mdc-chip-with-avatar-avatar-size: 28px;--mdc-chip-with-icon-icon-size: 18px;--mdc-chip-outline-width: 0;--mdc-chip-outline-color: transparent;--mdc-chip-disabled-outline-color: transparent;--mdc-chip-focus-outline-color: transparent;--mdc-chip-hover-state-layer-opacity: .04;--mdc-chip-with-avatar-disabled-avatar-opacity: 1;--mdc-chip-flat-selected-outline-width: 0;--mdc-chip-selected-hover-state-layer-opacity: .04;--mdc-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1;--mdc-chip-with-icon-disabled-icon-opacity: 1}.mat-mdc-standard-chip{--mat-chip-disabled-container-opacity: .4;--mat-chip-trailing-action-opacity: .54;--mat-chip-trailing-action-focus-opacity: 1;--mat-chip-trailing-action-state-layer-color: transparent;--mat-chip-selected-trailing-action-state-layer-color: transparent;--mat-chip-trailing-action-hover-state-layer-opacity: 0;--mat-chip-trailing-action-focus-state-layer-opacity: 0}.mat-mdc-standard-chip{--mdc-chip-disabled-label-text-color: #212121;--mdc-chip-elevated-container-color: rgb(224.4, 224.4, 224.4);--mdc-chip-elevated-selected-container-color: rgb(224.4, 224.4, 224.4);--mdc-chip-elevated-disabled-container-color: rgb(224.4, 224.4, 224.4);--mdc-chip-flat-disabled-selected-container-color: rgb(224.4, 224.4, 224.4);--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: #212121;--mdc-chip-selected-label-text-color: #212121;--mdc-chip-with-icon-icon-color: #212121;--mdc-chip-with-icon-disabled-icon-color: #212121;--mdc-chip-with-icon-selected-icon-color: #212121;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #212121;--mdc-chip-with-trailing-icon-trailing-icon-color: #212121}.mat-mdc-standard-chip{--mat-chip-selected-disabled-trailing-icon-color: #212121;--mat-chip-selected-trailing-icon-color: #212121}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary{--mdc-chip-disabled-label-text-color: white;--mdc-chip-elevated-container-color: #1b2535;--mdc-chip-elevated-selected-container-color: #1b2535;--mdc-chip-elevated-disabled-container-color: #1b2535;--mdc-chip-flat-disabled-selected-container-color: #1b2535;--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: white;--mdc-chip-selected-label-text-color: white;--mdc-chip-with-icon-icon-color: white;--mdc-chip-with-icon-disabled-icon-color: white;--mdc-chip-with-icon-selected-icon-color: white;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;--mdc-chip-with-trailing-icon-trailing-icon-color: white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary{--mat-chip-selected-disabled-trailing-icon-color: white;--mat-chip-selected-trailing-icon-color: white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent{--mdc-chip-disabled-label-text-color: black;--mdc-chip-elevated-container-color: #f2f2f7;--mdc-chip-elevated-selected-container-color: #f2f2f7;--mdc-chip-elevated-disabled-container-color: #f2f2f7;--mdc-chip-flat-disabled-selected-container-color: #f2f2f7;--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: black;--mdc-chip-selected-label-text-color: black;--mdc-chip-with-icon-icon-color: black;--mdc-chip-with-icon-disabled-icon-color: black;--mdc-chip-with-icon-selected-icon-color: black;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: black;--mdc-chip-with-trailing-icon-trailing-icon-color: black}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent{--mat-chip-selected-disabled-trailing-icon-color: black;--mat-chip-selected-trailing-icon-color: black}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn{--mdc-chip-disabled-label-text-color: white;--mdc-chip-elevated-container-color: #f44336;--mdc-chip-elevated-selected-container-color: #f44336;--mdc-chip-elevated-disabled-container-color: #f44336;--mdc-chip-flat-disabled-selected-container-color: #f44336;--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: white;--mdc-chip-selected-label-text-color: white;--mdc-chip-with-icon-icon-color: white;--mdc-chip-with-icon-disabled-icon-color: white;--mdc-chip-with-icon-selected-icon-color: white;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;--mdc-chip-with-trailing-icon-trailing-icon-color: white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn{--mat-chip-selected-disabled-trailing-icon-color: white;--mat-chip-selected-trailing-icon-color: white}.mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 32px}html{--mdc-switch-disabled-selected-icon-opacity: .38;--mdc-switch-disabled-track-opacity: .12;--mdc-switch-disabled-unselected-icon-opacity: .38;--mdc-switch-handle-height: 20px;--mdc-switch-handle-shape: 10px;--mdc-switch-handle-width: 20px;--mdc-switch-selected-icon-size: 18px;--mdc-switch-track-height: 14px;--mdc-switch-track-shape: 7px;--mdc-switch-track-width: 36px;--mdc-switch-unselected-icon-size: 18px;--mdc-switch-selected-focus-state-layer-opacity: .12;--mdc-switch-selected-hover-state-layer-opacity: .04;--mdc-switch-selected-pressed-state-layer-opacity: .1;--mdc-switch-unselected-focus-state-layer-opacity: .12;--mdc-switch-unselected-hover-state-layer-opacity: .04;--mdc-switch-unselected-pressed-state-layer-opacity: .1}html .mat-mdc-slide-toggle{--mat-switch-disabled-selected-handle-opacity: .38;--mat-switch-disabled-unselected-handle-opacity: .38;--mat-switch-unselected-handle-size: 20px;--mat-switch-selected-handle-size: 20px;--mat-switch-pressed-handle-size: 20px;--mat-switch-with-icon-handle-size: 20px;--mat-switch-selected-handle-horizontal-margin: 0;--mat-switch-selected-with-icon-handle-horizontal-margin: 0;--mat-switch-selected-pressed-handle-horizontal-margin: 0;--mat-switch-unselected-handle-horizontal-margin: 0;--mat-switch-unselected-with-icon-handle-horizontal-margin: 0;--mat-switch-unselected-pressed-handle-horizontal-margin: 0;--mat-switch-visible-track-opacity: 1;--mat-switch-hidden-track-opacity: 1;--mat-switch-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, .2, 1);--mat-switch-hidden-track-transition: transform 75ms 0ms cubic-bezier(.4, 0, .6, 1);--mat-switch-track-outline-width: 1px;--mat-switch-track-outline-color: transparent;--mat-switch-selected-track-outline-width: 1px;--mat-switch-selected-track-outline-color: transparent;--mat-switch-disabled-unselected-track-outline-width: 1px;--mat-switch-disabled-unselected-track-outline-color: transparent}html{--mdc-switch-selected-focus-state-layer-color: rgb(9.7875, 13.4125, 19.2125);--mdc-switch-selected-handle-color: rgb(9.7875, 13.4125, 19.2125);--mdc-switch-selected-hover-state-layer-color: rgb(9.7875, 13.4125, 19.2125);--mdc-switch-selected-pressed-state-layer-color: rgb(9.7875, 13.4125, 19.2125);--mdc-switch-selected-focus-handle-color: hsl(216.9230769231, 32.5%, -24.3137254902%);--mdc-switch-selected-hover-handle-color: hsl(216.9230769231, 32.5%, -24.3137254902%);--mdc-switch-selected-pressed-handle-color: hsl(216.9230769231, 32.5%, -24.3137254902%);--mdc-switch-selected-focus-track-color: rgb(61.425, 84.175, 120.575);--mdc-switch-selected-hover-track-color: rgb(61.425, 84.175, 120.575);--mdc-switch-selected-pressed-track-color: rgb(61.425, 84.175, 120.575);--mdc-switch-selected-track-color: rgb(61.425, 84.175, 120.575);--mdc-switch-disabled-selected-handle-color: #424242;--mdc-switch-disabled-selected-icon-color: #fff;--mdc-switch-disabled-selected-track-color: #424242;--mdc-switch-disabled-unselected-handle-color: #424242;--mdc-switch-disabled-unselected-icon-color: #fff;--mdc-switch-disabled-unselected-track-color: #424242;--mdc-switch-handle-surface-color: #fff;--mdc-switch-selected-icon-color: #fff;--mdc-switch-unselected-focus-handle-color: #212121;--mdc-switch-unselected-focus-state-layer-color: #424242;--mdc-switch-unselected-focus-track-color: #e0e0e0;--mdc-switch-unselected-handle-color: #616161;--mdc-switch-unselected-hover-handle-color: #212121;--mdc-switch-unselected-hover-state-layer-color: #424242;--mdc-switch-unselected-hover-track-color: #e0e0e0;--mdc-switch-unselected-icon-color: #fff;--mdc-switch-unselected-pressed-handle-color: #212121;--mdc-switch-unselected-pressed-state-layer-color: #424242;--mdc-switch-unselected-pressed-track-color: #e0e0e0;--mdc-switch-unselected-track-color: #e0e0e0;--mdc-switch-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mdc-switch-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12)}html{--mdc-switch-disabled-label-text-color: rgba(0, 0, 0, .38)}html .mat-mdc-slide-toggle{--mat-switch-label-text-color: rgba(0, 0, 0, .87)}html .mat-mdc-slide-toggle.mat-accent{--mdc-switch-selected-focus-state-layer-color: rgb(210.4285714286, 210.4285714286, 227.5714285714);--mdc-switch-selected-handle-color: rgb(210.4285714286, 210.4285714286, 227.5714285714);--mdc-switch-selected-hover-state-layer-color: rgb(210.4285714286, 210.4285714286, 227.5714285714);--mdc-switch-selected-pressed-state-layer-color: rgb(210.4285714286, 210.4285714286, 227.5714285714);--mdc-switch-selected-focus-handle-color: rgb(115.7142857143, 115.7142857143, 169.2857142857);--mdc-switch-selected-hover-handle-color: rgb(115.7142857143, 115.7142857143, 169.2857142857);--mdc-switch-selected-pressed-handle-color: rgb(115.7142857143, 115.7142857143, 169.2857142857);--mdc-switch-selected-focus-track-color: hsl(240, 23.8095238095%, 115.8823529412%);--mdc-switch-selected-hover-track-color: hsl(240, 23.8095238095%, 115.8823529412%);--mdc-switch-selected-pressed-track-color: hsl(240, 23.8095238095%, 115.8823529412%);--mdc-switch-selected-track-color: hsl(240, 23.8095238095%, 115.8823529412%)}html .mat-mdc-slide-toggle.mat-warn{--mdc-switch-selected-focus-state-layer-color: #e53935;--mdc-switch-selected-handle-color: #e53935;--mdc-switch-selected-hover-state-layer-color: #e53935;--mdc-switch-selected-pressed-state-layer-color: #e53935;--mdc-switch-selected-focus-handle-color: #b71c1c;--mdc-switch-selected-hover-handle-color: #b71c1c;--mdc-switch-selected-pressed-handle-color: #b71c1c;--mdc-switch-selected-focus-track-color: #e57373;--mdc-switch-selected-hover-track-color: #e57373;--mdc-switch-selected-pressed-track-color: #e57373;--mdc-switch-selected-track-color: #e57373}html{--mdc-switch-state-layer-size: 40px}html{--mdc-radio-disabled-selected-icon-opacity: .38;--mdc-radio-disabled-unselected-icon-opacity: .38;--mdc-radio-state-layer-size: 40px}.mat-mdc-radio-button.mat-primary{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #1b2535;--mdc-radio-selected-hover-icon-color: #1b2535;--mdc-radio-selected-icon-color: #1b2535;--mdc-radio-selected-pressed-icon-color: #1b2535}.mat-mdc-radio-button.mat-primary{--mat-radio-ripple-color: black;--mat-radio-checked-ripple-color: #1b2535;--mat-radio-disabled-label-color: rgba(0, 0, 0, .38);--mat-radio-label-text-color: rgba(0, 0, 0, .87)}.mat-mdc-radio-button.mat-accent{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #f2f2f7;--mdc-radio-selected-hover-icon-color: #f2f2f7;--mdc-radio-selected-icon-color: #f2f2f7;--mdc-radio-selected-pressed-icon-color: #f2f2f7}.mat-mdc-radio-button.mat-accent{--mat-radio-ripple-color: black;--mat-radio-checked-ripple-color: #f2f2f7;--mat-radio-disabled-label-color: rgba(0, 0, 0, .38);--mat-radio-label-text-color: rgba(0, 0, 0, .87)}.mat-mdc-radio-button.mat-warn{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #f44336;--mdc-radio-selected-hover-icon-color: #f44336;--mdc-radio-selected-icon-color: #f44336;--mdc-radio-selected-pressed-icon-color: #f44336}.mat-mdc-radio-button.mat-warn{--mat-radio-ripple-color: black;--mat-radio-checked-ripple-color: #f44336;--mat-radio-disabled-label-color: rgba(0, 0, 0, .38);--mat-radio-label-text-color: rgba(0, 0, 0, .87)}html{--mdc-radio-state-layer-size: 40px}html{--mat-radio-touch-target-display: block}html{--mdc-slider-active-track-height: 6px;--mdc-slider-active-track-shape: 9999px;--mdc-slider-handle-height: 20px;--mdc-slider-handle-shape: 50%;--mdc-slider-handle-width: 20px;--mdc-slider-inactive-track-height: 4px;--mdc-slider-inactive-track-shape: 9999px;--mdc-slider-with-overlap-handle-outline-width: 1px;--mdc-slider-with-tick-marks-active-container-opacity: .6;--mdc-slider-with-tick-marks-container-shape: 50%;--mdc-slider-with-tick-marks-container-size: 2px;--mdc-slider-with-tick-marks-inactive-container-opacity: .6;--mdc-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12)}html{--mat-slider-value-indicator-width: auto;--mat-slider-value-indicator-height: 32px;--mat-slider-value-indicator-caret-display: block;--mat-slider-value-indicator-border-radius: 4px;--mat-slider-value-indicator-padding: 0 12px;--mat-slider-value-indicator-text-transform: none;--mat-slider-value-indicator-container-transform: translateX(-50%)}html{--mdc-slider-handle-color: #1b2535;--mdc-slider-focus-handle-color: #1b2535;--mdc-slider-hover-handle-color: #1b2535;--mdc-slider-active-track-color: #1b2535;--mdc-slider-inactive-track-color: #1b2535;--mdc-slider-with-tick-marks-inactive-container-color: #1b2535;--mdc-slider-with-tick-marks-active-container-color: white;--mdc-slider-disabled-active-track-color: #000;--mdc-slider-disabled-handle-color: #000;--mdc-slider-disabled-inactive-track-color: #000;--mdc-slider-label-container-color: #000;--mdc-slider-label-label-text-color: #fff;--mdc-slider-with-overlap-handle-outline-color: #fff;--mdc-slider-with-tick-marks-disabled-container-color: #000}html{--mat-slider-ripple-color: #1b2535;--mat-slider-hover-state-layer-color: rgba(27, 37, 53, .05);--mat-slider-focus-state-layer-color: rgba(27, 37, 53, .2);--mat-slider-value-indicator-opacity: .6}html .mat-accent{--mdc-slider-handle-color: #f2f2f7;--mdc-slider-focus-handle-color: #f2f2f7;--mdc-slider-hover-handle-color: #f2f2f7;--mdc-slider-active-track-color: #f2f2f7;--mdc-slider-inactive-track-color: #f2f2f7;--mdc-slider-with-tick-marks-inactive-container-color: #f2f2f7;--mdc-slider-with-tick-marks-active-container-color: black}html .mat-accent{--mat-slider-ripple-color: #f2f2f7;--mat-slider-hover-state-layer-color: rgba(242, 242, 247, .05);--mat-slider-focus-state-layer-color: rgba(242, 242, 247, .2)}html .mat-warn{--mdc-slider-handle-color: #f44336;--mdc-slider-focus-handle-color: #f44336;--mdc-slider-hover-handle-color: #f44336;--mdc-slider-active-track-color: #f44336;--mdc-slider-inactive-track-color: #f44336;--mdc-slider-with-tick-marks-inactive-container-color: #f44336;--mdc-slider-with-tick-marks-active-container-color: white}html .mat-warn{--mat-slider-ripple-color: #f44336;--mat-slider-hover-state-layer-color: rgba(244, 67, 54, .05);--mat-slider-focus-state-layer-color: rgba(244, 67, 54, .2)}html{--mat-menu-container-shape: 4px;--mat-menu-divider-bottom-spacing: 0;--mat-menu-divider-top-spacing: 0;--mat-menu-item-spacing: 16px;--mat-menu-item-icon-size: 24px;--mat-menu-item-leading-spacing: 16px;--mat-menu-item-trailing-spacing: 16px;--mat-menu-item-with-icon-leading-spacing: 16px;--mat-menu-item-with-icon-trailing-spacing: 16px;--mat-menu-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-menu-item-label-text-color: rgba(0, 0, 0, .87);--mat-menu-item-icon-color: rgba(0, 0, 0, .87);--mat-menu-item-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-menu-item-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-menu-container-color: white;--mat-menu-divider-color: rgba(0, 0, 0, .12)}html{--mdc-list-list-item-container-shape: 0;--mdc-list-list-item-leading-avatar-shape: 50%;--mdc-list-list-item-container-color: transparent;--mdc-list-list-item-selected-container-color: transparent;--mdc-list-list-item-leading-avatar-color: transparent;--mdc-list-list-item-leading-icon-size: 24px;--mdc-list-list-item-leading-avatar-size: 40px;--mdc-list-list-item-trailing-icon-size: 24px;--mdc-list-list-item-disabled-state-layer-color: transparent;--mdc-list-list-item-disabled-state-layer-opacity: 0;--mdc-list-list-item-disabled-label-text-opacity: .38;--mdc-list-list-item-disabled-leading-icon-opacity: .38;--mdc-list-list-item-disabled-trailing-icon-opacity: .38}html{--mat-list-active-indicator-color: transparent;--mat-list-active-indicator-shape: 4px}html{--mdc-list-list-item-label-text-color: rgba(0, 0, 0, .87);--mdc-list-list-item-supporting-text-color: rgba(0, 0, 0, .54);--mdc-list-list-item-leading-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, .38);--mdc-list-list-item-trailing-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-disabled-label-text-color: black;--mdc-list-list-item-disabled-leading-icon-color: black;--mdc-list-list-item-disabled-trailing-icon-color: black;--mdc-list-list-item-hover-label-text-color: rgba(0, 0, 0, .87);--mdc-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-focus-label-text-color: rgba(0, 0, 0, .87);--mdc-list-list-item-hover-state-layer-color: black;--mdc-list-list-item-hover-state-layer-opacity: .04;--mdc-list-list-item-focus-state-layer-color: black;--mdc-list-list-item-focus-state-layer-opacity: .12}.mdc-list-item__start,.mdc-list-item__end{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #1b2535;--mdc-radio-selected-hover-icon-color: #1b2535;--mdc-radio-selected-icon-color: #1b2535;--mdc-radio-selected-pressed-icon-color: #1b2535}.mat-accent .mdc-list-item__start,.mat-accent .mdc-list-item__end{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #f2f2f7;--mdc-radio-selected-hover-icon-color: #f2f2f7;--mdc-radio-selected-icon-color: #f2f2f7;--mdc-radio-selected-pressed-icon-color: #f2f2f7}.mat-warn .mdc-list-item__start,.mat-warn .mdc-list-item__end{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #f44336;--mdc-radio-selected-hover-icon-color: #f44336;--mdc-radio-selected-icon-color: #f44336;--mdc-radio-selected-pressed-icon-color: #f44336}.mat-mdc-list-option{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: white;--mdc-checkbox-selected-focus-icon-color: #1b2535;--mdc-checkbox-selected-hover-icon-color: #1b2535;--mdc-checkbox-selected-icon-color: #1b2535;--mdc-checkbox-selected-pressed-icon-color: #1b2535;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #1b2535;--mdc-checkbox-selected-hover-state-layer-color: #1b2535;--mdc-checkbox-selected-pressed-state-layer-color: #1b2535;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}.mat-mdc-list-option.mat-accent{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: black;--mdc-checkbox-selected-focus-icon-color: #f2f2f7;--mdc-checkbox-selected-hover-icon-color: #f2f2f7;--mdc-checkbox-selected-icon-color: #f2f2f7;--mdc-checkbox-selected-pressed-icon-color: #f2f2f7;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #f2f2f7;--mdc-checkbox-selected-hover-state-layer-color: #f2f2f7;--mdc-checkbox-selected-pressed-state-layer-color: #f2f2f7;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}.mat-mdc-list-option.mat-warn{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: white;--mdc-checkbox-selected-focus-icon-color: #f44336;--mdc-checkbox-selected-hover-icon-color: #f44336;--mdc-checkbox-selected-icon-color: #f44336;--mdc-checkbox-selected-pressed-icon-color: #f44336;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #f44336;--mdc-checkbox-selected-hover-state-layer-color: #f44336;--mdc-checkbox-selected-pressed-state-layer-color: #f44336;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start{color:#1b2535}.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end{opacity:1}html{--mdc-list-list-item-one-line-container-height: 48px;--mdc-list-list-item-two-line-container-height: 64px;--mdc-list-list-item-three-line-container-height: 88px}html{--mat-list-list-item-leading-icon-start-space: 16px;--mat-list-list-item-leading-icon-end-space: 32px}.mdc-list-item__start,.mdc-list-item__end{--mdc-radio-state-layer-size: 40px}.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:56px}.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:72px}html{--mat-paginator-container-text-color: rgba(0, 0, 0, .87);--mat-paginator-container-background-color: white;--mat-paginator-enabled-icon-color: rgba(0, 0, 0, .54);--mat-paginator-disabled-icon-color: rgba(0, 0, 0, .12)}html{--mat-paginator-container-size: 56px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block}html{--mdc-secondary-navigation-tab-container-height: 48px}html{--mdc-tab-indicator-active-indicator-height: 2px;--mdc-tab-indicator-active-indicator-shape: 0}html{--mat-tab-header-divider-color: transparent;--mat-tab-header-divider-height: 0}.mat-mdc-tab-group,.mat-mdc-tab-nav-bar{--mdc-tab-indicator-active-indicator-color: #1b2535}.mat-mdc-tab-group,.mat-mdc-tab-nav-bar{--mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);--mat-tab-header-pagination-icon-color: black;--mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-label-text-color: #1b2535;--mat-tab-header-active-ripple-color: #1b2535;--mat-tab-header-inactive-ripple-color: #1b2535;--mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-focus-label-text-color: #1b2535;--mat-tab-header-active-hover-label-text-color: #1b2535;--mat-tab-header-active-focus-indicator-color: #1b2535;--mat-tab-header-active-hover-indicator-color: #1b2535}.mat-mdc-tab-group.mat-accent,.mat-mdc-tab-nav-bar.mat-accent{--mdc-tab-indicator-active-indicator-color: #f2f2f7}.mat-mdc-tab-group.mat-accent,.mat-mdc-tab-nav-bar.mat-accent{--mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);--mat-tab-header-pagination-icon-color: black;--mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-label-text-color: #f2f2f7;--mat-tab-header-active-ripple-color: #f2f2f7;--mat-tab-header-inactive-ripple-color: #f2f2f7;--mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-focus-label-text-color: #f2f2f7;--mat-tab-header-active-hover-label-text-color: #f2f2f7;--mat-tab-header-active-focus-indicator-color: #f2f2f7;--mat-tab-header-active-hover-indicator-color: #f2f2f7}.mat-mdc-tab-group.mat-warn,.mat-mdc-tab-nav-bar.mat-warn{--mdc-tab-indicator-active-indicator-color: #f44336}.mat-mdc-tab-group.mat-warn,.mat-mdc-tab-nav-bar.mat-warn{--mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);--mat-tab-header-pagination-icon-color: black;--mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-label-text-color: #f44336;--mat-tab-header-active-ripple-color: #f44336;--mat-tab-header-inactive-ripple-color: #f44336;--mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-focus-label-text-color: #f44336;--mat-tab-header-active-hover-label-text-color: #f44336;--mat-tab-header-active-focus-indicator-color: #f44336;--mat-tab-header-active-hover-indicator-color: #f44336}.mat-mdc-tab-group.mat-background-primary,.mat-mdc-tab-nav-bar.mat-background-primary{--mat-tab-header-with-background-background-color: #1b2535;--mat-tab-header-with-background-foreground-color: white}.mat-mdc-tab-group.mat-background-accent,.mat-mdc-tab-nav-bar.mat-background-accent{--mat-tab-header-with-background-background-color: #f2f2f7;--mat-tab-header-with-background-foreground-color: black}.mat-mdc-tab-group.mat-background-warn,.mat-mdc-tab-nav-bar.mat-background-warn{--mat-tab-header-with-background-background-color: #f44336;--mat-tab-header-with-background-foreground-color: white}.mat-mdc-tab-header{--mdc-secondary-navigation-tab-container-height: 48px}html{--mdc-checkbox-disabled-selected-checkmark-color: #fff;--mdc-checkbox-selected-focus-state-layer-opacity: .16;--mdc-checkbox-selected-hover-state-layer-opacity: .04;--mdc-checkbox-selected-pressed-state-layer-opacity: .16;--mdc-checkbox-unselected-focus-state-layer-opacity: .16;--mdc-checkbox-unselected-hover-state-layer-opacity: .04;--mdc-checkbox-unselected-pressed-state-layer-opacity: .16}html{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: black;--mdc-checkbox-selected-focus-icon-color: #f2f2f7;--mdc-checkbox-selected-hover-icon-color: #f2f2f7;--mdc-checkbox-selected-icon-color: #f2f2f7;--mdc-checkbox-selected-pressed-icon-color: #f2f2f7;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #f2f2f7;--mdc-checkbox-selected-hover-state-layer-color: #f2f2f7;--mdc-checkbox-selected-pressed-state-layer-color: #f2f2f7;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}html{--mat-checkbox-disabled-label-color: rgba(0, 0, 0, .38);--mat-checkbox-label-text-color: rgba(0, 0, 0, .87)}.mat-mdc-checkbox.mat-primary{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: white;--mdc-checkbox-selected-focus-icon-color: #1b2535;--mdc-checkbox-selected-hover-icon-color: #1b2535;--mdc-checkbox-selected-icon-color: #1b2535;--mdc-checkbox-selected-pressed-icon-color: #1b2535;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #1b2535;--mdc-checkbox-selected-hover-state-layer-color: #1b2535;--mdc-checkbox-selected-pressed-state-layer-color: #1b2535;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}.mat-mdc-checkbox.mat-warn{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: white;--mdc-checkbox-selected-focus-icon-color: #f44336;--mdc-checkbox-selected-hover-icon-color: #f44336;--mdc-checkbox-selected-icon-color: #f44336;--mdc-checkbox-selected-pressed-icon-color: #f44336;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #f44336;--mdc-checkbox-selected-hover-state-layer-color: #f44336;--mdc-checkbox-selected-pressed-state-layer-color: #f44336;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}html{--mdc-checkbox-state-layer-size: 40px}html{--mat-checkbox-touch-target-display: block}html{--mdc-text-button-container-shape: 4px;--mdc-text-button-keep-touch-target: false}html{--mdc-filled-button-container-shape: 4px;--mdc-filled-button-keep-touch-target: false}html{--mdc-protected-button-container-shape: 4px;--mdc-protected-button-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);--mdc-protected-button-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mdc-protected-button-focus-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);--mdc-protected-button-hover-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);--mdc-protected-button-pressed-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mdc-outlined-button-keep-touch-target: false;--mdc-outlined-button-outline-width: 1px;--mdc-outlined-button-container-shape: 4px}html{--mat-text-button-horizontal-padding: 8px;--mat-text-button-with-icon-horizontal-padding: 8px;--mat-text-button-icon-spacing: 8px;--mat-text-button-icon-offset: 0}html{--mat-filled-button-horizontal-padding: 16px;--mat-filled-button-icon-spacing: 8px;--mat-filled-button-icon-offset: -4px}html{--mat-protected-button-horizontal-padding: 16px;--mat-protected-button-icon-spacing: 8px;--mat-protected-button-icon-offset: -4px}html{--mat-outlined-button-horizontal-padding: 15px;--mat-outlined-button-icon-spacing: 8px;--mat-outlined-button-icon-offset: -4px}html{--mdc-text-button-label-text-color: black;--mdc-text-button-disabled-label-text-color: rgba(0, 0, 0, .38)}html{--mat-text-button-state-layer-color: black;--mat-text-button-disabled-state-layer-color: black;--mat-text-button-ripple-color: rgba(0, 0, 0, .1);--mat-text-button-hover-state-layer-opacity: .04;--mat-text-button-focus-state-layer-opacity: .12;--mat-text-button-pressed-state-layer-opacity: .12}html{--mdc-filled-button-container-color: white;--mdc-filled-button-label-text-color: black;--mdc-filled-button-disabled-container-color: rgba(0, 0, 0, .12);--mdc-filled-button-disabled-label-text-color: rgba(0, 0, 0, .38)}html{--mat-filled-button-state-layer-color: black;--mat-filled-button-disabled-state-layer-color: black;--mat-filled-button-ripple-color: rgba(0, 0, 0, .1);--mat-filled-button-hover-state-layer-opacity: .04;--mat-filled-button-focus-state-layer-opacity: .12;--mat-filled-button-pressed-state-layer-opacity: .12}html{--mdc-protected-button-container-color: white;--mdc-protected-button-label-text-color: black;--mdc-protected-button-disabled-container-color: rgba(0, 0, 0, .12);--mdc-protected-button-disabled-label-text-color: rgba(0, 0, 0, .38)}html{--mat-protected-button-state-layer-color: black;--mat-protected-button-disabled-state-layer-color: black;--mat-protected-button-ripple-color: rgba(0, 0, 0, .1);--mat-protected-button-hover-state-layer-opacity: .04;--mat-protected-button-focus-state-layer-opacity: .12;--mat-protected-button-pressed-state-layer-opacity: .12}html{--mdc-outlined-button-disabled-outline-color: rgba(0, 0, 0, .12);--mdc-outlined-button-disabled-label-text-color: rgba(0, 0, 0, .38);--mdc-outlined-button-label-text-color: black;--mdc-outlined-button-outline-color: rgba(0, 0, 0, .12)}html{--mat-outlined-button-state-layer-color: black;--mat-outlined-button-disabled-state-layer-color: black;--mat-outlined-button-ripple-color: rgba(0, 0, 0, .1);--mat-outlined-button-hover-state-layer-opacity: .04;--mat-outlined-button-focus-state-layer-opacity: .12;--mat-outlined-button-pressed-state-layer-opacity: .12}.mat-mdc-button.mat-primary{--mdc-text-button-label-text-color: #1b2535}.mat-mdc-button.mat-primary{--mat-text-button-state-layer-color: #1b2535;--mat-text-button-ripple-color: rgba(27, 37, 53, .1)}.mat-mdc-button.mat-accent{--mdc-text-button-label-text-color: #f2f2f7}.mat-mdc-button.mat-accent{--mat-text-button-state-layer-color: #f2f2f7;--mat-text-button-ripple-color: rgba(242, 242, 247, .1)}.mat-mdc-button.mat-warn{--mdc-text-button-label-text-color: #f44336}.mat-mdc-button.mat-warn{--mat-text-button-state-layer-color: #f44336;--mat-text-button-ripple-color: rgba(244, 67, 54, .1)}.mat-mdc-unelevated-button.mat-primary{--mdc-filled-button-container-color: #1b2535;--mdc-filled-button-label-text-color: white}.mat-mdc-unelevated-button.mat-primary{--mat-filled-button-state-layer-color: white;--mat-filled-button-ripple-color: rgba(255, 255, 255, .1)}.mat-mdc-unelevated-button.mat-accent{--mdc-filled-button-container-color: #f2f2f7;--mdc-filled-button-label-text-color: black}.mat-mdc-unelevated-button.mat-accent{--mat-filled-button-state-layer-color: black;--mat-filled-button-ripple-color: rgba(0, 0, 0, .1)}.mat-mdc-unelevated-button.mat-warn{--mdc-filled-button-container-color: #f44336;--mdc-filled-button-label-text-color: white}.mat-mdc-unelevated-button.mat-warn{--mat-filled-button-state-layer-color: white;--mat-filled-button-ripple-color: rgba(255, 255, 255, .1)}.mat-mdc-raised-button.mat-primary{--mdc-protected-button-container-color: #1b2535;--mdc-protected-button-label-text-color: white}.mat-mdc-raised-button.mat-primary{--mat-protected-button-state-layer-color: white;--mat-protected-button-ripple-color: rgba(255, 255, 255, .1)}.mat-mdc-raised-button.mat-accent{--mdc-protected-button-container-color: #f2f2f7;--mdc-protected-button-label-text-color: black}.mat-mdc-raised-button.mat-accent{--mat-protected-button-state-layer-color: black;--mat-protected-button-ripple-color: rgba(0, 0, 0, .1)}.mat-mdc-raised-button.mat-warn{--mdc-protected-button-container-color: #f44336;--mdc-protected-button-label-text-color: white}.mat-mdc-raised-button.mat-warn{--mat-protected-button-state-layer-color: white;--mat-protected-button-ripple-color: rgba(255, 255, 255, .1)}.mat-mdc-outlined-button.mat-primary{--mdc-outlined-button-label-text-color: #1b2535;--mdc-outlined-button-outline-color: rgba(0, 0, 0, .12)}.mat-mdc-outlined-button.mat-primary{--mat-outlined-button-state-layer-color: #1b2535;--mat-outlined-button-ripple-color: rgba(27, 37, 53, .1)}.mat-mdc-outlined-button.mat-accent{--mdc-outlined-button-label-text-color: #f2f2f7;--mdc-outlined-button-outline-color: rgba(0, 0, 0, .12)}.mat-mdc-outlined-button.mat-accent{--mat-outlined-button-state-layer-color: #f2f2f7;--mat-outlined-button-ripple-color: rgba(242, 242, 247, .1)}.mat-mdc-outlined-button.mat-warn{--mdc-outlined-button-label-text-color: #f44336;--mdc-outlined-button-outline-color: rgba(0, 0, 0, .12)}.mat-mdc-outlined-button.mat-warn{--mat-outlined-button-state-layer-color: #f44336;--mat-outlined-button-ripple-color: rgba(244, 67, 54, .1)}html{--mdc-text-button-container-height: 36px}html{--mdc-filled-button-container-height: 36px}html{--mdc-protected-button-container-height: 36px}html{--mdc-outlined-button-container-height: 36px}html{--mat-text-button-touch-target-display: block}html{--mat-filled-button-touch-target-display: block}html{--mat-protected-button-touch-target-display: block}html{--mat-outlined-button-touch-target-display: block}html{--mdc-icon-button-icon-size: 24px}html{--mdc-icon-button-icon-color: inherit;--mdc-icon-button-disabled-icon-color: rgba(0, 0, 0, .38)}html{--mat-icon-button-state-layer-color: black;--mat-icon-button-disabled-state-layer-color: black;--mat-icon-button-ripple-color: rgba(0, 0, 0, .1);--mat-icon-button-hover-state-layer-opacity: .04;--mat-icon-button-focus-state-layer-opacity: .12;--mat-icon-button-pressed-state-layer-opacity: .12}html .mat-mdc-icon-button.mat-primary{--mdc-icon-button-icon-color: #1b2535}html .mat-mdc-icon-button.mat-primary{--mat-icon-button-state-layer-color: #1b2535;--mat-icon-button-ripple-color: rgba(27, 37, 53, .1)}html .mat-mdc-icon-button.mat-accent{--mdc-icon-button-icon-color: #f2f2f7}html .mat-mdc-icon-button.mat-accent{--mat-icon-button-state-layer-color: #f2f2f7;--mat-icon-button-ripple-color: rgba(242, 242, 247, .1)}html .mat-mdc-icon-button.mat-warn{--mdc-icon-button-icon-color: #f44336}html .mat-mdc-icon-button.mat-warn{--mat-icon-button-state-layer-color: #f44336;--mat-icon-button-ripple-color: rgba(244, 67, 54, .1)}html{--mat-icon-button-touch-target-display: block}.mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 48px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:12px}html{--mdc-fab-container-shape: 50%;--mdc-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mdc-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12)}html{--mdc-fab-small-container-shape: 50%;--mdc-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mdc-fab-small-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-fab-small-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12)}html{--mdc-extended-fab-container-height: 48px;--mdc-extended-fab-container-shape: 24px;--mdc-extended-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mdc-extended-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-extended-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-extended-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12)}html{--mdc-fab-container-color: white}html{--mat-fab-foreground-color: black;--mat-fab-state-layer-color: black;--mat-fab-disabled-state-layer-color: black;--mat-fab-ripple-color: rgba(0, 0, 0, .1);--mat-fab-hover-state-layer-opacity: .04;--mat-fab-focus-state-layer-opacity: .12;--mat-fab-pressed-state-layer-opacity: .12;--mat-fab-disabled-state-container-color: rgba(0, 0, 0, .12);--mat-fab-disabled-state-foreground-color: rgba(0, 0, 0, .38)}html{--mdc-fab-small-container-color: white}html{--mat-fab-small-foreground-color: black;--mat-fab-small-state-layer-color: black;--mat-fab-small-disabled-state-layer-color: black;--mat-fab-small-ripple-color: rgba(0, 0, 0, .1);--mat-fab-small-hover-state-layer-opacity: .04;--mat-fab-small-focus-state-layer-opacity: .12;--mat-fab-small-pressed-state-layer-opacity: .12;--mat-fab-small-disabled-state-container-color: rgba(0, 0, 0, .12);--mat-fab-small-disabled-state-foreground-color: rgba(0, 0, 0, .38)}html .mat-mdc-fab.mat-primary{--mdc-fab-container-color: #1b2535}html .mat-mdc-fab.mat-primary{--mat-fab-foreground-color: white;--mat-fab-state-layer-color: white;--mat-fab-ripple-color: rgba(255, 255, 255, .1)}html .mat-mdc-fab.mat-accent{--mdc-fab-container-color: #f2f2f7}html .mat-mdc-fab.mat-accent{--mat-fab-foreground-color: black;--mat-fab-state-layer-color: black;--mat-fab-ripple-color: rgba(0, 0, 0, .1)}html .mat-mdc-fab.mat-warn{--mdc-fab-container-color: #f44336}html .mat-mdc-fab.mat-warn{--mat-fab-foreground-color: white;--mat-fab-state-layer-color: white;--mat-fab-ripple-color: rgba(255, 255, 255, .1)}html .mat-mdc-mini-fab.mat-primary{--mdc-fab-small-container-color: #1b2535}html .mat-mdc-mini-fab.mat-primary{--mat-fab-small-foreground-color: white;--mat-fab-small-state-layer-color: white;--mat-fab-small-ripple-color: rgba(255, 255, 255, .1)}html .mat-mdc-mini-fab.mat-accent{--mdc-fab-small-container-color: #f2f2f7}html .mat-mdc-mini-fab.mat-accent{--mat-fab-small-foreground-color: black;--mat-fab-small-state-layer-color: black;--mat-fab-small-ripple-color: rgba(0, 0, 0, .1)}html .mat-mdc-mini-fab.mat-warn{--mdc-fab-small-container-color: #f44336}html .mat-mdc-mini-fab.mat-warn{--mat-fab-small-foreground-color: white;--mat-fab-small-state-layer-color: white;--mat-fab-small-ripple-color: rgba(255, 255, 255, .1)}html{--mat-fab-touch-target-display: block}html{--mat-fab-small-touch-target-display: block}html{--mdc-snackbar-container-shape: 4px}html{--mdc-snackbar-container-color: #333333;--mdc-snackbar-supporting-text-color: rgba(255, 255, 255, .87)}html{--mat-snack-bar-button-color: rgb(105.275, 133.525, 178.725)}html{--mat-table-row-item-outline-width: 1px}html{--mat-table-background-color: white;--mat-table-header-headline-color: rgba(0, 0, 0, .87);--mat-table-row-item-label-text-color: rgba(0, 0, 0, .87);--mat-table-row-item-outline-color: rgba(0, 0, 0, .12)}html{--mat-table-header-container-height: 56px;--mat-table-footer-container-height: 52px;--mat-table-row-item-container-height: 52px}html{--mdc-circular-progress-active-indicator-width: 4px;--mdc-circular-progress-size: 48px}html{--mdc-circular-progress-active-indicator-color: #1b2535}html .mat-accent{--mdc-circular-progress-active-indicator-color: #f2f2f7}html .mat-warn{--mdc-circular-progress-active-indicator-color: #f44336}html{--mat-badge-container-shape: 50%;--mat-badge-container-size: unset;--mat-badge-small-size-container-size: unset;--mat-badge-large-size-container-size: unset;--mat-badge-legacy-container-size: 22px;--mat-badge-legacy-small-size-container-size: 16px;--mat-badge-legacy-large-size-container-size: 28px;--mat-badge-container-offset: -11px 0;--mat-badge-small-size-container-offset: -8px 0;--mat-badge-large-size-container-offset: -14px 0;--mat-badge-container-overlap-offset: -11px;--mat-badge-small-size-container-overlap-offset: -8px;--mat-badge-large-size-container-overlap-offset: -14px;--mat-badge-container-padding: 0;--mat-badge-small-size-container-padding: 0;--mat-badge-large-size-container-padding: 0}html{--mat-badge-background-color: #1b2535;--mat-badge-text-color: white;--mat-badge-disabled-state-background-color: #b9b9b9;--mat-badge-disabled-state-text-color: rgba(0, 0, 0, .38)}.mat-badge-accent{--mat-badge-background-color: #f2f2f7;--mat-badge-text-color: black}.mat-badge-warn{--mat-badge-background-color: #f44336;--mat-badge-text-color: white}html{--mat-bottom-sheet-container-shape: 4px}html{--mat-bottom-sheet-container-text-color: rgba(0, 0, 0, .87);--mat-bottom-sheet-container-background-color: white}html{--mat-legacy-button-toggle-height: 36px;--mat-legacy-button-toggle-shape: 2px;--mat-legacy-button-toggle-focus-state-layer-opacity: 1}html{--mat-standard-button-toggle-shape: 4px;--mat-standard-button-toggle-hover-state-layer-opacity: .04;--mat-standard-button-toggle-focus-state-layer-opacity: .12}html{--mat-legacy-button-toggle-text-color: rgba(0, 0, 0, .38);--mat-legacy-button-toggle-state-layer-color: rgba(0, 0, 0, .12);--mat-legacy-button-toggle-selected-state-text-color: rgba(0, 0, 0, .54);--mat-legacy-button-toggle-selected-state-background-color: #e0e0e0;--mat-legacy-button-toggle-disabled-state-text-color: rgba(0, 0, 0, .26);--mat-legacy-button-toggle-disabled-state-background-color: #eeeeee;--mat-legacy-button-toggle-disabled-selected-state-background-color: #bdbdbd}html{--mat-standard-button-toggle-text-color: rgba(0, 0, 0, .87);--mat-standard-button-toggle-background-color: white;--mat-standard-button-toggle-state-layer-color: black;--mat-standard-button-toggle-selected-state-background-color: #e0e0e0;--mat-standard-button-toggle-selected-state-text-color: rgba(0, 0, 0, .87);--mat-standard-button-toggle-disabled-state-text-color: rgba(0, 0, 0, .26);--mat-standard-button-toggle-disabled-state-background-color: white;--mat-standard-button-toggle-disabled-selected-state-text-color: rgba(0, 0, 0, .87);--mat-standard-button-toggle-disabled-selected-state-background-color: #bdbdbd;--mat-standard-button-toggle-divider-color: rgb(224.4, 224.4, 224.4)}html{--mat-standard-button-toggle-height: 48px}html{--mat-datepicker-calendar-container-shape: 4px;--mat-datepicker-calendar-container-touch-shape: 4px;--mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);--mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12)}html{--mat-datepicker-calendar-date-selected-state-text-color: white;--mat-datepicker-calendar-date-selected-state-background-color: #1b2535;--mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(27, 37, 53, .4);--mat-datepicker-calendar-date-today-selected-state-outline-color: white;--mat-datepicker-calendar-date-focus-state-background-color: rgba(27, 37, 53, .3);--mat-datepicker-calendar-date-hover-state-background-color: rgba(27, 37, 53, .3);--mat-datepicker-toggle-active-state-icon-color: #1b2535;--mat-datepicker-calendar-date-in-range-state-background-color: rgba(27, 37, 53, .2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);--mat-datepicker-toggle-icon-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-period-button-text-color: black;--mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, .12);--mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, .38);--mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(0, 0, 0, .18);--mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, .87);--mat-datepicker-calendar-date-outline-color: transparent;--mat-datepicker-calendar-date-disabled-state-text-color: rgba(0, 0, 0, .38);--mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, .24);--mat-datepicker-range-input-separator-color: rgba(0, 0, 0, .87);--mat-datepicker-range-input-disabled-state-separator-color: rgba(0, 0, 0, .38);--mat-datepicker-range-input-disabled-state-text-color: rgba(0, 0, 0, .38);--mat-datepicker-calendar-container-background-color: white;--mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, .87)}.mat-datepicker-content.mat-accent{--mat-datepicker-calendar-date-selected-state-text-color: black;--mat-datepicker-calendar-date-selected-state-background-color: #f2f2f7;--mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(242, 242, 247, .4);--mat-datepicker-calendar-date-today-selected-state-outline-color: black;--mat-datepicker-calendar-date-focus-state-background-color: rgba(242, 242, 247, .3);--mat-datepicker-calendar-date-hover-state-background-color: rgba(242, 242, 247, .3);--mat-datepicker-calendar-date-in-range-state-background-color: rgba(242, 242, 247, .2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032)}.mat-datepicker-content.mat-warn{--mat-datepicker-calendar-date-selected-state-text-color: white;--mat-datepicker-calendar-date-selected-state-background-color: #f44336;--mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(244, 67, 54, .4);--mat-datepicker-calendar-date-today-selected-state-outline-color: white;--mat-datepicker-calendar-date-focus-state-background-color: rgba(244, 67, 54, .3);--mat-datepicker-calendar-date-hover-state-background-color: rgba(244, 67, 54, .3);--mat-datepicker-calendar-date-in-range-state-background-color: rgba(244, 67, 54, .2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032)}.mat-datepicker-toggle-active.mat-accent{--mat-datepicker-toggle-active-state-icon-color: #f2f2f7}.mat-datepicker-toggle-active.mat-warn{--mat-datepicker-toggle-active-state-icon-color: #f44336}.mat-calendar-controls{--mat-icon-button-touch-target-display: none}.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:8px}html{--mat-divider-width: 1px}html{--mat-divider-color: rgba(0, 0, 0, .12)}html{--mat-expansion-container-shape: 4px;--mat-expansion-legacy-header-indicator-display: inline-block;--mat-expansion-header-indicator-display: none}html{--mat-expansion-container-background-color: white;--mat-expansion-container-text-color: rgba(0, 0, 0, .87);--mat-expansion-actions-divider-color: rgba(0, 0, 0, .12);--mat-expansion-header-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-expansion-header-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-expansion-header-disabled-state-text-color: rgba(0, 0, 0, .26);--mat-expansion-header-text-color: rgba(0, 0, 0, .87);--mat-expansion-header-description-color: rgba(0, 0, 0, .54);--mat-expansion-header-indicator-color: rgba(0, 0, 0, .54)}html{--mat-expansion-header-collapsed-state-height: 48px;--mat-expansion-header-expanded-state-height: 64px}html{--mat-icon-color: inherit}.mat-icon.mat-primary{--mat-icon-color: #1b2535}.mat-icon.mat-accent{--mat-icon-color: #f2f2f7}.mat-icon.mat-warn{--mat-icon-color: #f44336}html{--mat-sidenav-container-shape: 0;--mat-sidenav-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12);--mat-sidenav-container-width: auto}html{--mat-sidenav-container-divider-color: rgba(0, 0, 0, .12);--mat-sidenav-container-background-color: white;--mat-sidenav-container-text-color: rgba(0, 0, 0, .87);--mat-sidenav-content-background-color: #fafafa;--mat-sidenav-content-text-color: rgba(0, 0, 0, .87);--mat-sidenav-scrim-color: rgba(0, 0, 0, .6)}html{--mat-stepper-header-icon-foreground-color: white;--mat-stepper-header-selected-state-icon-background-color: #1b2535;--mat-stepper-header-selected-state-icon-foreground-color: white;--mat-stepper-header-done-state-icon-background-color: #1b2535;--mat-stepper-header-done-state-icon-foreground-color: white;--mat-stepper-header-edit-state-icon-background-color: #1b2535;--mat-stepper-header-edit-state-icon-foreground-color: white;--mat-stepper-container-color: white;--mat-stepper-line-color: rgba(0, 0, 0, .12);--mat-stepper-header-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-stepper-header-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-stepper-header-label-text-color: rgba(0, 0, 0, .54);--mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, .54);--mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, .87);--mat-stepper-header-error-state-label-text-color: #f44336;--mat-stepper-header-icon-background-color: rgba(0, 0, 0, .54);--mat-stepper-header-error-state-icon-foreground-color: #f44336;--mat-stepper-header-error-state-icon-background-color: transparent}html .mat-step-header.mat-accent{--mat-stepper-header-icon-foreground-color: black;--mat-stepper-header-selected-state-icon-background-color: #f2f2f7;--mat-stepper-header-selected-state-icon-foreground-color: black;--mat-stepper-header-done-state-icon-background-color: #f2f2f7;--mat-stepper-header-done-state-icon-foreground-color: black;--mat-stepper-header-edit-state-icon-background-color: #f2f2f7;--mat-stepper-header-edit-state-icon-foreground-color: black}html .mat-step-header.mat-warn{--mat-stepper-header-icon-foreground-color: white;--mat-stepper-header-selected-state-icon-background-color: #f44336;--mat-stepper-header-selected-state-icon-foreground-color: white;--mat-stepper-header-done-state-icon-background-color: #f44336;--mat-stepper-header-done-state-icon-foreground-color: white;--mat-stepper-header-edit-state-icon-background-color: #f44336;--mat-stepper-header-edit-state-icon-foreground-color: white}html{--mat-stepper-header-height: 72px}html{--mat-sort-arrow-color: rgb(117.3, 117.3, 117.3)}html{--mat-toolbar-container-background-color: whitesmoke;--mat-toolbar-container-text-color: rgba(0, 0, 0, .87)}.mat-toolbar.mat-primary{--mat-toolbar-container-background-color: #1b2535;--mat-toolbar-container-text-color: white}.mat-toolbar.mat-accent{--mat-toolbar-container-background-color: #f2f2f7;--mat-toolbar-container-text-color: black}.mat-toolbar.mat-warn{--mat-toolbar-container-background-color: #f44336;--mat-toolbar-container-text-color: white}html{--mat-toolbar-standard-height: 64px;--mat-toolbar-mobile-height: 56px}html{--mat-tree-container-background-color: white;--mat-tree-node-text-color: rgba(0, 0, 0, .87)}html{--mat-tree-node-min-height: 48px}html{--mat-timepicker-container-shape: 4px;--mat-timepicker-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-timepicker-container-background-color: white}:root{--primary-color: #1b2535;--primary-lighter-color: rgb(78.6375, 107.7625, 154.3625);--primary-darker-color: hsl(216.9230769231, 32.5%, -4.3137254902%);--accent-color: #f2f2f7;--accent-lighter-color: #f3f5f9;--accent-lightest-color: hsl(240, 23.8095238095%, 125.8823529412%);--accent-darker-color: rgb(178.8571428571, 178.8571428571, 208.1428571429);--warn-color: #f44336;--warn-lighter-color: #ef9a9a;--warn-darker-color: #d32f2f;--background-color: #f2f2f7;--border-color: #e1e1e1;--text-color: #4a5568}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-slide,.swiper-cube-shadow{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:\"\";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top,.swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress),.swiper-watch-progress .swiper-slide-visible{.swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ud-custom-field{display:block;width:100%}.ud-custom-field.mat-mdc-form-field,.ud-custom-field .mat-mdc-text-field-wrapper,.ud-custom-field .mat-mdc-form-field-wrapper,.ud-custom-field .mat-mdc-form-field-subscript-wrapper{width:100%;box-sizing:border-box}.ud-custom-field .mat-mdc-text-field-wrapper{background:var(--ud-field-bg)!important;transition:background .2s ease}.ud-custom-field:hover .mat-mdc-text-field-wrapper{background:var(--ud-field-bg-hover)!important}.ud-custom-field.mat-form-field-disabled{opacity:.6;cursor:not-allowed}.ud-custom-field.mat-form-field-disabled .mat-mdc-text-field-wrapper,.ud-custom-field.mat-form-field-disabled .mat-mdc-form-field-flex,.ud-custom-field.mat-form-field-disabled input,.ud-custom-field.mat-form-field-disabled .mat-mdc-select{cursor:not-allowed;pointer-events:none}.ud-custom-field .mat-mdc-form-field-flex{background:transparent;border-radius:var(--ud-field-radius)}.ud-custom-field .mat-mdc-form-field-infix,.ud-custom-field .mat-mdc-select-value{font-family:var(--ud-field-font);font-size:.925rem;color:var(--ud-field-text)}.ud-custom-field .mat-mdc-floating-label{font-family:var(--ud-field-font);font-size:.925rem;color:var(--ud-field-text-muted);font-weight:400}.ud-custom-field.mat-focused .mat-mdc-floating-label{color:var(--ud-field-border-focus)}.ud-custom-field .mdc-notched-outline__leading,.ud-custom-field .mdc-notched-outline__notch,.ud-custom-field .mdc-notched-outline__trailing{border-color:var(--ud-field-border)!important;transition:border-color .2s ease;background:transparent!important}.ud-custom-field .mdc-notched-outline__notch{border-left:none!important}.ud-custom-field.mat-focused .mdc-notched-outline__leading,.ud-custom-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--ud-field-border-focus)!important;border-width:1.5px!important}.ud-custom-field .mat-mdc-form-field-icon-prefix:after{display:none!important}.ud-custom-field .mat-icon[matPrefix]{color:var(--ud-field-text-muted);font-size:19px;width:19px;height:19px;margin-right:4px;transition:color .2s ease}.ud-custom-field.mat-focused .mat-icon[matPrefix]{color:var(--ud-field-border-focus)}.ud-custom-field .mat-mdc-chip.mat-mdc-standard-chip{background:var(--ud-navy-dim)!important;color:var(--ud-navy)!important;font-family:var(--ud-field-font);font-size:.78rem;font-weight:500;border:1px solid var(--ud-navy-mid);height:22px}.ud-custom-field .mat-mdc-chip.mat-mdc-standard-chip .mdc-evolution-chip__text-label{color:var(--ud-navy)!important;font-size:.78rem}.ud-custom-field.ud-chip-select .mat-mdc-form-field-infix{padding-top:.5rem;padding-bottom:0}.mat-mdc-chip.mat-mdc-standard-chip{background:var(--ud-navy-dim)!important;color:var(--ud-navy)!important;font-family:var(--ud-field-font);font-size:.78rem;font-weight:500;border:1px solid var(--ud-navy-mid);height:22px}.mat-mdc-chip.mat-mdc-standard-chip .mdc-evolution-chip__text-label{color:var(--ud-navy)!important;font-size:.78rem}:root{--ud-field-bg: #f4f5f7;--ud-field-bg-hover: #eff1f5;--ud-field-border: #c9cdd6;--ud-field-border-focus: #1b2535;--ud-field-radius: 6px;--ud-field-text: #1b2535;--ud-field-text-muted: #6b7585;--ud-field-font: \"DM Sans\", system-ui, sans-serif;--ud-navy: #1b2535;--ud-navy-dim: rgba(27, 37, 53, .08);--ud-navy-mid: rgba(27, 37, 53, .18)}html,body{margin:0}:host{--eu-navy: #1b2535;--eu-navy-soft: #253347;--eu-navy-dim: rgba(27, 37, 53, .08);--eu-navy-mid: rgba(27, 37, 53, .18);--eu-surface: #ffffff;--eu-bg: #f4f5f7;--eu-border: #e2e5ea;--eu-border-mid: #c9cdd6;--eu-text: #1b2535;--eu-muted: #6b7585;--eu-danger: var(--danger, #e53935);--eu-radius: 10px;--eu-radius-sm: 6px;--eu-shadow: 0 2px 12px rgba(27, 37, 53, .06), 0 1px 4px rgba(27, 37, 53, .04);--eu-shadow-btn: 0 4px 14px rgba(27, 37, 53, .22);font-family:DM Sans,system-ui,sans-serif}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px #fafafa inset!important;background-color:#fafafa!important}p{font:20px Roboto,Helvetica Neue,sans-serif}.w-max-content{width:max-content}.ud-text-theme-primary{color:#1b2535}.ud-text-theme-primary-darker{color:#0c1a27}.ud-text-primary,.ud-text-white{color:#f5f6f7}.ud-dashed-container{border:1px dashed #373f4c;border-radius:10px}.text-large{font-size:large}.text-small{font-size:small}.text-smaller{font-size:smaller}.bg-accent{background-color:var(--accent-color)}.bg-accent-lighter{background-color:var(--accent-lighter-color)}.bg-accent-lightest{background-color:var(--accent-lightest-color)}.pointer:hover{cursor:pointer;outline:1px solid var(--accent-color);background-color:var(--accent-lightest-color)}.custom-snackbar-container.mat-mdc-snack-bar-container{--mat-snack-bar-button-color: transparent;--mdc-snackbar-container-color: transparent !important;--mdc-snackbar-supporting-text-color: transparent;box-shadow:none!important;padding:0!important;margin:8px!important;background:transparent!important}.mat-mdc-snack-bar-container.custom-snackbar-container .mdc-snackbar__surface{background:transparent!important;background-color:transparent!important;box-shadow:none!important;padding:0!important}.mat-mdc-snack-bar-container.custom-snackbar-container .mat-mdc-snack-bar-label{padding:0!important;margin:0!important}.mat-mdc-snack-bar-container.custom-snackbar-container .mdc-snackbar__label{padding:0!important}.container{background:transparent;max-width:1080px}.container .header{height:auto;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--eu-border);position:relative}.container .header:after{content:\"\";position:absolute;bottom:-2px;left:0;width:48px;height:2px;background:var(--eu-navy)}.container .header h4{font-family:Sora,system-ui,sans-serif;font-size:1.35rem;font-weight:600;color:var(--eu-navy);letter-spacing:-.02em;margin:0;line-height:1.3}.container .content{background:transparent;border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}.container .content.loading{background:#f4f5f7;border:1px solid #e2e5eb;border-radius:10px;padding:1.5rem}.container .content .section{background:#fff;border:1px solid #e2e5eb;border-radius:10px;padding:1.5rem 2rem;box-shadow:0 1px 4px #0000000f;position:relative;overflow:hidden;animation:sectionReveal .35s ease both}.container .content .section:before{content:\"\";position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,var(--eu-navy) 0%,rgba(27,37,53,.15) 100%);border-radius:var(--eu-radius) 0 0 var(--eu-radius)}.container .content .section .section-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1.25rem;padding-bottom:.875rem;border-bottom:1px solid #f0f1f4}.container .content .section .section-header .section-icon{font-size:15px;width:15px;height:15px;color:#374151}.container .content .section .section-header .section-label{font-family:DM Sans,system-ui,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.1em;color:#374151;text-transform:uppercase}.container .content .section:nth-child(1){animation-delay:0s}.container .content .section:nth-child(2){animation-delay:.07s}.container .content .section:nth-child(3){animation-delay:.14s}.container .content .section:nth-child(4){animation-delay:.21s}@keyframes sectionReveal{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$2.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }] });
|
|
1964
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: EditViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1965
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: EditViewComponent, isStandalone: true, selector: "ud-edit-view", inputs: { title: "title", loading: "loading", skeletonTitleHeight: "skeletonTitleHeight", skeletonBodyHeight: "skeletonBodyHeight" }, queries: [{ propertyName: "sections", predicate: EditViewSectionDirective }], ngImport: i0, template: "<div class=\"container\">\n <div class=\"header\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"loading col-6\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonTitleHeight }\" />\n } @else {\n <h4>{{ title }}</h4>\n }\n <ng-content select=\"[header-actions]\"></ng-content>\n </div>\n <div class=\"content\" [ngClass]=\"{ loading: loading }\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"col\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonBodyHeight }\" />\n } @else {\n @if (hasSections) {\n @for (sec of sectionsArray; track sec) {\n <div class=\"section\">\n @if (resolveLabel(sec.label) | async; as label) {\n <div class=\"section-header\">\n @if (sec.icon) {\n <mat-icon class=\"section-icon\">{{ sec.icon }}</mat-icon>\n }\n <span class=\"section-label\">{{ label }}</span>\n </div>\n }\n <ng-container [ngTemplateOutlet]=\"sec.templateRef\"></ng-container>\n </div>\n }\n }\n <ng-content select=\"[main]\"></ng-content>\n }\n </div>\n @if (!loading) {\n <ng-content select=\"[footer]\"></ng-content>\n }\n</div>\n", styles: ["html{--mat-ripple-color: rgba(0, 0, 0, .1)}html{--mat-option-selected-state-label-text-color: #1b2535;--mat-option-label-text-color: rgba(0, 0, 0, .87);--mat-option-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-option-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-option-selected-state-layer-color: rgba(0, 0, 0, .04)}.mat-accent{--mat-option-selected-state-label-text-color: #f2f2f7;--mat-option-label-text-color: rgba(0, 0, 0, .87);--mat-option-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-option-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-option-selected-state-layer-color: rgba(0, 0, 0, .04)}.mat-warn{--mat-option-selected-state-label-text-color: #f44336;--mat-option-label-text-color: rgba(0, 0, 0, .87);--mat-option-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-option-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-option-selected-state-layer-color: rgba(0, 0, 0, .04)}html{--mat-optgroup-label-text-color: rgba(0, 0, 0, .87)}html{--mat-full-pseudo-checkbox-selected-icon-color: #f2f2f7;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0}html{--mat-minimal-pseudo-checkbox-selected-checkmark-color: #f2f2f7;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}.mat-primary{--mat-full-pseudo-checkbox-selected-icon-color: #1b2535;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0}.mat-primary{--mat-minimal-pseudo-checkbox-selected-checkmark-color: #1b2535;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}.mat-accent{--mat-full-pseudo-checkbox-selected-icon-color: #f2f2f7;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0}.mat-accent{--mat-minimal-pseudo-checkbox-selected-checkmark-color: #f2f2f7;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}.mat-warn{--mat-full-pseudo-checkbox-selected-icon-color: #f44336;--mat-full-pseudo-checkbox-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #fafafa;--mat-full-pseudo-checkbox-disabled-unselected-icon-color: #b0b0b0;--mat-full-pseudo-checkbox-disabled-selected-icon-color: #b0b0b0}.mat-warn{--mat-minimal-pseudo-checkbox-selected-checkmark-color: #f44336;--mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #b0b0b0}html{--mat-app-background-color: #fafafa;--mat-app-text-color: rgba(0, 0, 0, .87);--mat-app-elevation-shadow-level-0: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-1: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-2: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-3: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-4: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-5: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 5px 8px 0px rgba(0, 0, 0, .14), 0px 1px 14px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-6: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-7: 0px 4px 5px -2px rgba(0, 0, 0, .2), 0px 7px 10px 1px rgba(0, 0, 0, .14), 0px 2px 16px 1px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-8: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-9: 0px 5px 6px -3px rgba(0, 0, 0, .2), 0px 9px 12px 1px rgba(0, 0, 0, .14), 0px 3px 16px 2px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-10: 0px 6px 6px -3px rgba(0, 0, 0, .2), 0px 10px 14px 1px rgba(0, 0, 0, .14), 0px 4px 18px 3px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-11: 0px 6px 7px -4px rgba(0, 0, 0, .2), 0px 11px 15px 1px rgba(0, 0, 0, .14), 0px 4px 20px 3px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-12: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-13: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 13px 19px 2px rgba(0, 0, 0, .14), 0px 5px 24px 4px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-14: 0px 7px 9px -4px rgba(0, 0, 0, .2), 0px 14px 21px 2px rgba(0, 0, 0, .14), 0px 5px 26px 4px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-15: 0px 8px 9px -5px rgba(0, 0, 0, .2), 0px 15px 22px 2px rgba(0, 0, 0, .14), 0px 6px 28px 5px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-16: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-17: 0px 8px 11px -5px rgba(0, 0, 0, .2), 0px 17px 26px 2px rgba(0, 0, 0, .14), 0px 6px 32px 5px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-18: 0px 9px 11px -5px rgba(0, 0, 0, .2), 0px 18px 28px 2px rgba(0, 0, 0, .14), 0px 7px 34px 6px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-19: 0px 9px 12px -6px rgba(0, 0, 0, .2), 0px 19px 29px 2px rgba(0, 0, 0, .14), 0px 7px 36px 6px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-20: 0px 10px 13px -6px rgba(0, 0, 0, .2), 0px 20px 31px 3px rgba(0, 0, 0, .14), 0px 8px 38px 7px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-21: 0px 10px 13px -6px rgba(0, 0, 0, .2), 0px 21px 33px 3px rgba(0, 0, 0, .14), 0px 8px 40px 7px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-22: 0px 10px 14px -6px rgba(0, 0, 0, .2), 0px 22px 35px 3px rgba(0, 0, 0, .14), 0px 8px 42px 7px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-23: 0px 11px 14px -7px rgba(0, 0, 0, .2), 0px 23px 36px 3px rgba(0, 0, 0, .14), 0px 9px 44px 8px rgba(0, 0, 0, .12);--mat-app-elevation-shadow-level-24: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12)}html{--mdc-elevated-card-container-shape: 4px}html{--mdc-outlined-card-container-shape: 4px;--mdc-outlined-card-outline-width: 1px}html{--mdc-elevated-card-container-color: white;--mdc-elevated-card-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12)}html{--mdc-outlined-card-container-color: white;--mdc-outlined-card-outline-color: rgba(0, 0, 0, .12);--mdc-outlined-card-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12)}html{--mat-card-subtitle-text-color: rgba(0, 0, 0, .54)}html{--mdc-linear-progress-active-indicator-height: 4px;--mdc-linear-progress-track-height: 4px;--mdc-linear-progress-track-shape: 0}.mat-mdc-progress-bar{--mdc-linear-progress-active-indicator-color: #1b2535;--mdc-linear-progress-track-color: rgba(27, 37, 53, .25)}.mat-mdc-progress-bar.mat-accent{--mdc-linear-progress-active-indicator-color: #f2f2f7;--mdc-linear-progress-track-color: rgba(242, 242, 247, .25)}.mat-mdc-progress-bar.mat-warn{--mdc-linear-progress-active-indicator-color: #f44336;--mdc-linear-progress-track-color: rgba(244, 67, 54, .25)}html{--mdc-plain-tooltip-container-shape: 4px;--mdc-plain-tooltip-supporting-text-line-height: 16px}html{--mdc-plain-tooltip-container-color: #616161;--mdc-plain-tooltip-supporting-text-color: #fff}html{--mdc-filled-text-field-active-indicator-height: 1px;--mdc-filled-text-field-focus-active-indicator-height: 2px;--mdc-filled-text-field-container-shape: 4px}html{--mdc-outlined-text-field-outline-width: 1px;--mdc-outlined-text-field-focus-outline-width: 2px;--mdc-outlined-text-field-container-shape: 4px}html{--mdc-filled-text-field-caret-color: #1b2535;--mdc-filled-text-field-focus-active-indicator-color: #1b2535;--mdc-filled-text-field-focus-label-text-color: rgba(27, 37, 53, .87);--mdc-filled-text-field-container-color: rgb(244.8, 244.8, 244.8);--mdc-filled-text-field-disabled-container-color: rgb(249.9, 249.9, 249.9);--mdc-filled-text-field-label-text-color: rgba(0, 0, 0, .6);--mdc-filled-text-field-hover-label-text-color: rgba(0, 0, 0, .6);--mdc-filled-text-field-disabled-label-text-color: rgba(0, 0, 0, .38);--mdc-filled-text-field-input-text-color: rgba(0, 0, 0, .87);--mdc-filled-text-field-disabled-input-text-color: rgba(0, 0, 0, .38);--mdc-filled-text-field-input-text-placeholder-color: rgba(0, 0, 0, .6);--mdc-filled-text-field-error-hover-label-text-color: #f44336;--mdc-filled-text-field-error-focus-label-text-color: #f44336;--mdc-filled-text-field-error-label-text-color: #f44336;--mdc-filled-text-field-error-caret-color: #f44336;--mdc-filled-text-field-active-indicator-color: rgba(0, 0, 0, .42);--mdc-filled-text-field-disabled-active-indicator-color: rgba(0, 0, 0, .06);--mdc-filled-text-field-hover-active-indicator-color: rgba(0, 0, 0, .87);--mdc-filled-text-field-error-active-indicator-color: #f44336;--mdc-filled-text-field-error-focus-active-indicator-color: #f44336;--mdc-filled-text-field-error-hover-active-indicator-color: #f44336}html{--mdc-outlined-text-field-caret-color: #1b2535;--mdc-outlined-text-field-focus-outline-color: #1b2535;--mdc-outlined-text-field-focus-label-text-color: rgba(27, 37, 53, .87);--mdc-outlined-text-field-label-text-color: rgba(0, 0, 0, .6);--mdc-outlined-text-field-hover-label-text-color: rgba(0, 0, 0, .6);--mdc-outlined-text-field-disabled-label-text-color: rgba(0, 0, 0, .38);--mdc-outlined-text-field-input-text-color: rgba(0, 0, 0, .87);--mdc-outlined-text-field-disabled-input-text-color: rgba(0, 0, 0, .38);--mdc-outlined-text-field-input-text-placeholder-color: rgba(0, 0, 0, .6);--mdc-outlined-text-field-error-caret-color: #f44336;--mdc-outlined-text-field-error-focus-label-text-color: #f44336;--mdc-outlined-text-field-error-label-text-color: #f44336;--mdc-outlined-text-field-error-hover-label-text-color: #f44336;--mdc-outlined-text-field-outline-color: rgba(0, 0, 0, .38);--mdc-outlined-text-field-disabled-outline-color: rgba(0, 0, 0, .06);--mdc-outlined-text-field-hover-outline-color: rgba(0, 0, 0, .87);--mdc-outlined-text-field-error-focus-outline-color: #f44336;--mdc-outlined-text-field-error-hover-outline-color: #f44336;--mdc-outlined-text-field-error-outline-color: #f44336}html{--mat-form-field-focus-select-arrow-color: rgba(27, 37, 53, .87);--mat-form-field-disabled-input-text-placeholder-color: rgba(0, 0, 0, .38);--mat-form-field-state-layer-color: rgba(0, 0, 0, .87);--mat-form-field-error-text-color: #f44336;--mat-form-field-select-option-text-color: inherit;--mat-form-field-select-disabled-option-text-color: GrayText;--mat-form-field-leading-icon-color: unset;--mat-form-field-disabled-leading-icon-color: unset;--mat-form-field-trailing-icon-color: unset;--mat-form-field-disabled-trailing-icon-color: unset;--mat-form-field-error-focus-trailing-icon-color: unset;--mat-form-field-error-hover-trailing-icon-color: unset;--mat-form-field-error-trailing-icon-color: unset;--mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, .54);--mat-form-field-disabled-select-arrow-color: rgba(0, 0, 0, .38);--mat-form-field-hover-state-layer-opacity: .04;--mat-form-field-focus-state-layer-opacity: .08}.mat-mdc-form-field.mat-accent{--mdc-filled-text-field-caret-color: #f2f2f7;--mdc-filled-text-field-focus-active-indicator-color: #f2f2f7;--mdc-filled-text-field-focus-label-text-color: rgba(242, 242, 247, .87)}.mat-mdc-form-field.mat-accent{--mdc-outlined-text-field-caret-color: #f2f2f7;--mdc-outlined-text-field-focus-outline-color: #f2f2f7;--mdc-outlined-text-field-focus-label-text-color: rgba(242, 242, 247, .87)}.mat-mdc-form-field.mat-accent{--mat-form-field-focus-select-arrow-color: rgba(242, 242, 247, .87)}.mat-mdc-form-field.mat-warn{--mdc-filled-text-field-caret-color: #f44336;--mdc-filled-text-field-focus-active-indicator-color: #f44336;--mdc-filled-text-field-focus-label-text-color: rgba(244, 67, 54, .87)}.mat-mdc-form-field.mat-warn{--mdc-outlined-text-field-caret-color: #f44336;--mdc-outlined-text-field-focus-outline-color: #f44336;--mdc-outlined-text-field-focus-label-text-color: rgba(244, 67, 54, .87)}.mat-mdc-form-field.mat-warn{--mat-form-field-focus-select-arrow-color: rgba(244, 67, 54, .87)}html{--mat-form-field-container-height: 56px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 16px;--mat-form-field-filled-with-label-container-padding-top: 24px;--mat-form-field-filled-with-label-container-padding-bottom: 8px}html{--mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);--mat-select-disabled-trigger-text-color: rgba(0, 0, 0, .38);--mat-select-placeholder-text-color: rgba(0, 0, 0, .6);--mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);--mat-select-disabled-arrow-color: rgba(0, 0, 0, .38);--mat-select-focused-arrow-color: rgba(27, 37, 53, .87);--mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)}html .mat-mdc-form-field.mat-accent{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);--mat-select-disabled-trigger-text-color: rgba(0, 0, 0, .38);--mat-select-placeholder-text-color: rgba(0, 0, 0, .6);--mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);--mat-select-disabled-arrow-color: rgba(0, 0, 0, .38);--mat-select-focused-arrow-color: rgba(242, 242, 247, .87);--mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)}html .mat-mdc-form-field.mat-warn{--mat-select-panel-background-color: white;--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, .87);--mat-select-disabled-trigger-text-color: rgba(0, 0, 0, .38);--mat-select-placeholder-text-color: rgba(0, 0, 0, .6);--mat-select-enabled-arrow-color: rgba(0, 0, 0, .54);--mat-select-disabled-arrow-color: rgba(0, 0, 0, .38);--mat-select-focused-arrow-color: rgba(244, 67, 54, .87);--mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)}html{--mat-select-arrow-transform: translateY(-8px)}html{--mat-autocomplete-container-shape: 4px;--mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-autocomplete-background-color: white}html{--mdc-dialog-container-shape: 4px}html{--mat-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12);--mat-dialog-container-max-width: 80vw;--mat-dialog-container-small-max-width: 80vw;--mat-dialog-container-min-width: 0;--mat-dialog-actions-alignment: start;--mat-dialog-actions-padding: 8px;--mat-dialog-content-padding: 20px 24px;--mat-dialog-with-actions-content-padding: 20px 24px;--mat-dialog-headline-padding: 0 24px 9px}html{--mdc-dialog-container-color: white;--mdc-dialog-subhead-color: rgba(0, 0, 0, .87);--mdc-dialog-supporting-text-color: rgba(0, 0, 0, .6)}.mat-mdc-standard-chip{--mdc-chip-container-shape-radius: 16px;--mdc-chip-with-avatar-avatar-shape-radius: 14px;--mdc-chip-with-avatar-avatar-size: 28px;--mdc-chip-with-icon-icon-size: 18px;--mdc-chip-outline-width: 0;--mdc-chip-outline-color: transparent;--mdc-chip-disabled-outline-color: transparent;--mdc-chip-focus-outline-color: transparent;--mdc-chip-hover-state-layer-opacity: .04;--mdc-chip-with-avatar-disabled-avatar-opacity: 1;--mdc-chip-flat-selected-outline-width: 0;--mdc-chip-selected-hover-state-layer-opacity: .04;--mdc-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1;--mdc-chip-with-icon-disabled-icon-opacity: 1}.mat-mdc-standard-chip{--mat-chip-disabled-container-opacity: .4;--mat-chip-trailing-action-opacity: .54;--mat-chip-trailing-action-focus-opacity: 1;--mat-chip-trailing-action-state-layer-color: transparent;--mat-chip-selected-trailing-action-state-layer-color: transparent;--mat-chip-trailing-action-hover-state-layer-opacity: 0;--mat-chip-trailing-action-focus-state-layer-opacity: 0}.mat-mdc-standard-chip{--mdc-chip-disabled-label-text-color: #212121;--mdc-chip-elevated-container-color: rgb(224.4, 224.4, 224.4);--mdc-chip-elevated-selected-container-color: rgb(224.4, 224.4, 224.4);--mdc-chip-elevated-disabled-container-color: rgb(224.4, 224.4, 224.4);--mdc-chip-flat-disabled-selected-container-color: rgb(224.4, 224.4, 224.4);--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: #212121;--mdc-chip-selected-label-text-color: #212121;--mdc-chip-with-icon-icon-color: #212121;--mdc-chip-with-icon-disabled-icon-color: #212121;--mdc-chip-with-icon-selected-icon-color: #212121;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #212121;--mdc-chip-with-trailing-icon-trailing-icon-color: #212121}.mat-mdc-standard-chip{--mat-chip-selected-disabled-trailing-icon-color: #212121;--mat-chip-selected-trailing-icon-color: #212121}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary{--mdc-chip-disabled-label-text-color: white;--mdc-chip-elevated-container-color: #1b2535;--mdc-chip-elevated-selected-container-color: #1b2535;--mdc-chip-elevated-disabled-container-color: #1b2535;--mdc-chip-flat-disabled-selected-container-color: #1b2535;--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: white;--mdc-chip-selected-label-text-color: white;--mdc-chip-with-icon-icon-color: white;--mdc-chip-with-icon-disabled-icon-color: white;--mdc-chip-with-icon-selected-icon-color: white;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;--mdc-chip-with-trailing-icon-trailing-icon-color: white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary{--mat-chip-selected-disabled-trailing-icon-color: white;--mat-chip-selected-trailing-icon-color: white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent{--mdc-chip-disabled-label-text-color: black;--mdc-chip-elevated-container-color: #f2f2f7;--mdc-chip-elevated-selected-container-color: #f2f2f7;--mdc-chip-elevated-disabled-container-color: #f2f2f7;--mdc-chip-flat-disabled-selected-container-color: #f2f2f7;--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: black;--mdc-chip-selected-label-text-color: black;--mdc-chip-with-icon-icon-color: black;--mdc-chip-with-icon-disabled-icon-color: black;--mdc-chip-with-icon-selected-icon-color: black;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: black;--mdc-chip-with-trailing-icon-trailing-icon-color: black}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent{--mat-chip-selected-disabled-trailing-icon-color: black;--mat-chip-selected-trailing-icon-color: black}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn{--mdc-chip-disabled-label-text-color: white;--mdc-chip-elevated-container-color: #f44336;--mdc-chip-elevated-selected-container-color: #f44336;--mdc-chip-elevated-disabled-container-color: #f44336;--mdc-chip-flat-disabled-selected-container-color: #f44336;--mdc-chip-focus-state-layer-color: black;--mdc-chip-hover-state-layer-color: black;--mdc-chip-selected-hover-state-layer-color: black;--mdc-chip-focus-state-layer-opacity: .12;--mdc-chip-selected-focus-state-layer-color: black;--mdc-chip-selected-focus-state-layer-opacity: .12;--mdc-chip-label-text-color: white;--mdc-chip-selected-label-text-color: white;--mdc-chip-with-icon-icon-color: white;--mdc-chip-with-icon-disabled-icon-color: white;--mdc-chip-with-icon-selected-icon-color: white;--mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;--mdc-chip-with-trailing-icon-trailing-icon-color: white}.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn{--mat-chip-selected-disabled-trailing-icon-color: white;--mat-chip-selected-trailing-icon-color: white}.mat-mdc-chip.mat-mdc-standard-chip{--mdc-chip-container-height: 32px}html{--mdc-switch-disabled-selected-icon-opacity: .38;--mdc-switch-disabled-track-opacity: .12;--mdc-switch-disabled-unselected-icon-opacity: .38;--mdc-switch-handle-height: 20px;--mdc-switch-handle-shape: 10px;--mdc-switch-handle-width: 20px;--mdc-switch-selected-icon-size: 18px;--mdc-switch-track-height: 14px;--mdc-switch-track-shape: 7px;--mdc-switch-track-width: 36px;--mdc-switch-unselected-icon-size: 18px;--mdc-switch-selected-focus-state-layer-opacity: .12;--mdc-switch-selected-hover-state-layer-opacity: .04;--mdc-switch-selected-pressed-state-layer-opacity: .1;--mdc-switch-unselected-focus-state-layer-opacity: .12;--mdc-switch-unselected-hover-state-layer-opacity: .04;--mdc-switch-unselected-pressed-state-layer-opacity: .1}html .mat-mdc-slide-toggle{--mat-switch-disabled-selected-handle-opacity: .38;--mat-switch-disabled-unselected-handle-opacity: .38;--mat-switch-unselected-handle-size: 20px;--mat-switch-selected-handle-size: 20px;--mat-switch-pressed-handle-size: 20px;--mat-switch-with-icon-handle-size: 20px;--mat-switch-selected-handle-horizontal-margin: 0;--mat-switch-selected-with-icon-handle-horizontal-margin: 0;--mat-switch-selected-pressed-handle-horizontal-margin: 0;--mat-switch-unselected-handle-horizontal-margin: 0;--mat-switch-unselected-with-icon-handle-horizontal-margin: 0;--mat-switch-unselected-pressed-handle-horizontal-margin: 0;--mat-switch-visible-track-opacity: 1;--mat-switch-hidden-track-opacity: 1;--mat-switch-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, .2, 1);--mat-switch-hidden-track-transition: transform 75ms 0ms cubic-bezier(.4, 0, .6, 1);--mat-switch-track-outline-width: 1px;--mat-switch-track-outline-color: transparent;--mat-switch-selected-track-outline-width: 1px;--mat-switch-selected-track-outline-color: transparent;--mat-switch-disabled-unselected-track-outline-width: 1px;--mat-switch-disabled-unselected-track-outline-color: transparent}html{--mdc-switch-selected-focus-state-layer-color: rgb(9.7875, 13.4125, 19.2125);--mdc-switch-selected-handle-color: rgb(9.7875, 13.4125, 19.2125);--mdc-switch-selected-hover-state-layer-color: rgb(9.7875, 13.4125, 19.2125);--mdc-switch-selected-pressed-state-layer-color: rgb(9.7875, 13.4125, 19.2125);--mdc-switch-selected-focus-handle-color: hsl(216.9230769231, 32.5%, -24.3137254902%);--mdc-switch-selected-hover-handle-color: hsl(216.9230769231, 32.5%, -24.3137254902%);--mdc-switch-selected-pressed-handle-color: hsl(216.9230769231, 32.5%, -24.3137254902%);--mdc-switch-selected-focus-track-color: rgb(61.425, 84.175, 120.575);--mdc-switch-selected-hover-track-color: rgb(61.425, 84.175, 120.575);--mdc-switch-selected-pressed-track-color: rgb(61.425, 84.175, 120.575);--mdc-switch-selected-track-color: rgb(61.425, 84.175, 120.575);--mdc-switch-disabled-selected-handle-color: #424242;--mdc-switch-disabled-selected-icon-color: #fff;--mdc-switch-disabled-selected-track-color: #424242;--mdc-switch-disabled-unselected-handle-color: #424242;--mdc-switch-disabled-unselected-icon-color: #fff;--mdc-switch-disabled-unselected-track-color: #424242;--mdc-switch-handle-surface-color: #fff;--mdc-switch-selected-icon-color: #fff;--mdc-switch-unselected-focus-handle-color: #212121;--mdc-switch-unselected-focus-state-layer-color: #424242;--mdc-switch-unselected-focus-track-color: #e0e0e0;--mdc-switch-unselected-handle-color: #616161;--mdc-switch-unselected-hover-handle-color: #212121;--mdc-switch-unselected-hover-state-layer-color: #424242;--mdc-switch-unselected-hover-track-color: #e0e0e0;--mdc-switch-unselected-icon-color: #fff;--mdc-switch-unselected-pressed-handle-color: #212121;--mdc-switch-unselected-pressed-state-layer-color: #424242;--mdc-switch-unselected-pressed-track-color: #e0e0e0;--mdc-switch-unselected-track-color: #e0e0e0;--mdc-switch-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);--mdc-switch-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12)}html{--mdc-switch-disabled-label-text-color: rgba(0, 0, 0, .38)}html .mat-mdc-slide-toggle{--mat-switch-label-text-color: rgba(0, 0, 0, .87)}html .mat-mdc-slide-toggle.mat-accent{--mdc-switch-selected-focus-state-layer-color: rgb(210.4285714286, 210.4285714286, 227.5714285714);--mdc-switch-selected-handle-color: rgb(210.4285714286, 210.4285714286, 227.5714285714);--mdc-switch-selected-hover-state-layer-color: rgb(210.4285714286, 210.4285714286, 227.5714285714);--mdc-switch-selected-pressed-state-layer-color: rgb(210.4285714286, 210.4285714286, 227.5714285714);--mdc-switch-selected-focus-handle-color: rgb(115.7142857143, 115.7142857143, 169.2857142857);--mdc-switch-selected-hover-handle-color: rgb(115.7142857143, 115.7142857143, 169.2857142857);--mdc-switch-selected-pressed-handle-color: rgb(115.7142857143, 115.7142857143, 169.2857142857);--mdc-switch-selected-focus-track-color: hsl(240, 23.8095238095%, 115.8823529412%);--mdc-switch-selected-hover-track-color: hsl(240, 23.8095238095%, 115.8823529412%);--mdc-switch-selected-pressed-track-color: hsl(240, 23.8095238095%, 115.8823529412%);--mdc-switch-selected-track-color: hsl(240, 23.8095238095%, 115.8823529412%)}html .mat-mdc-slide-toggle.mat-warn{--mdc-switch-selected-focus-state-layer-color: #e53935;--mdc-switch-selected-handle-color: #e53935;--mdc-switch-selected-hover-state-layer-color: #e53935;--mdc-switch-selected-pressed-state-layer-color: #e53935;--mdc-switch-selected-focus-handle-color: #b71c1c;--mdc-switch-selected-hover-handle-color: #b71c1c;--mdc-switch-selected-pressed-handle-color: #b71c1c;--mdc-switch-selected-focus-track-color: #e57373;--mdc-switch-selected-hover-track-color: #e57373;--mdc-switch-selected-pressed-track-color: #e57373;--mdc-switch-selected-track-color: #e57373}html{--mdc-switch-state-layer-size: 40px}html{--mdc-radio-disabled-selected-icon-opacity: .38;--mdc-radio-disabled-unselected-icon-opacity: .38;--mdc-radio-state-layer-size: 40px}.mat-mdc-radio-button.mat-primary{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #1b2535;--mdc-radio-selected-hover-icon-color: #1b2535;--mdc-radio-selected-icon-color: #1b2535;--mdc-radio-selected-pressed-icon-color: #1b2535}.mat-mdc-radio-button.mat-primary{--mat-radio-ripple-color: black;--mat-radio-checked-ripple-color: #1b2535;--mat-radio-disabled-label-color: rgba(0, 0, 0, .38);--mat-radio-label-text-color: rgba(0, 0, 0, .87)}.mat-mdc-radio-button.mat-accent{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #f2f2f7;--mdc-radio-selected-hover-icon-color: #f2f2f7;--mdc-radio-selected-icon-color: #f2f2f7;--mdc-radio-selected-pressed-icon-color: #f2f2f7}.mat-mdc-radio-button.mat-accent{--mat-radio-ripple-color: black;--mat-radio-checked-ripple-color: #f2f2f7;--mat-radio-disabled-label-color: rgba(0, 0, 0, .38);--mat-radio-label-text-color: rgba(0, 0, 0, .87)}.mat-mdc-radio-button.mat-warn{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #f44336;--mdc-radio-selected-hover-icon-color: #f44336;--mdc-radio-selected-icon-color: #f44336;--mdc-radio-selected-pressed-icon-color: #f44336}.mat-mdc-radio-button.mat-warn{--mat-radio-ripple-color: black;--mat-radio-checked-ripple-color: #f44336;--mat-radio-disabled-label-color: rgba(0, 0, 0, .38);--mat-radio-label-text-color: rgba(0, 0, 0, .87)}html{--mdc-radio-state-layer-size: 40px}html{--mat-radio-touch-target-display: block}html{--mdc-slider-active-track-height: 6px;--mdc-slider-active-track-shape: 9999px;--mdc-slider-handle-height: 20px;--mdc-slider-handle-shape: 50%;--mdc-slider-handle-width: 20px;--mdc-slider-inactive-track-height: 4px;--mdc-slider-inactive-track-shape: 9999px;--mdc-slider-with-overlap-handle-outline-width: 1px;--mdc-slider-with-tick-marks-active-container-opacity: .6;--mdc-slider-with-tick-marks-container-shape: 50%;--mdc-slider-with-tick-marks-container-size: 2px;--mdc-slider-with-tick-marks-inactive-container-opacity: .6;--mdc-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12)}html{--mat-slider-value-indicator-width: auto;--mat-slider-value-indicator-height: 32px;--mat-slider-value-indicator-caret-display: block;--mat-slider-value-indicator-border-radius: 4px;--mat-slider-value-indicator-padding: 0 12px;--mat-slider-value-indicator-text-transform: none;--mat-slider-value-indicator-container-transform: translateX(-50%)}html{--mdc-slider-handle-color: #1b2535;--mdc-slider-focus-handle-color: #1b2535;--mdc-slider-hover-handle-color: #1b2535;--mdc-slider-active-track-color: #1b2535;--mdc-slider-inactive-track-color: #1b2535;--mdc-slider-with-tick-marks-inactive-container-color: #1b2535;--mdc-slider-with-tick-marks-active-container-color: white;--mdc-slider-disabled-active-track-color: #000;--mdc-slider-disabled-handle-color: #000;--mdc-slider-disabled-inactive-track-color: #000;--mdc-slider-label-container-color: #000;--mdc-slider-label-label-text-color: #fff;--mdc-slider-with-overlap-handle-outline-color: #fff;--mdc-slider-with-tick-marks-disabled-container-color: #000}html{--mat-slider-ripple-color: #1b2535;--mat-slider-hover-state-layer-color: rgba(27, 37, 53, .05);--mat-slider-focus-state-layer-color: rgba(27, 37, 53, .2);--mat-slider-value-indicator-opacity: .6}html .mat-accent{--mdc-slider-handle-color: #f2f2f7;--mdc-slider-focus-handle-color: #f2f2f7;--mdc-slider-hover-handle-color: #f2f2f7;--mdc-slider-active-track-color: #f2f2f7;--mdc-slider-inactive-track-color: #f2f2f7;--mdc-slider-with-tick-marks-inactive-container-color: #f2f2f7;--mdc-slider-with-tick-marks-active-container-color: black}html .mat-accent{--mat-slider-ripple-color: #f2f2f7;--mat-slider-hover-state-layer-color: rgba(242, 242, 247, .05);--mat-slider-focus-state-layer-color: rgba(242, 242, 247, .2)}html .mat-warn{--mdc-slider-handle-color: #f44336;--mdc-slider-focus-handle-color: #f44336;--mdc-slider-hover-handle-color: #f44336;--mdc-slider-active-track-color: #f44336;--mdc-slider-inactive-track-color: #f44336;--mdc-slider-with-tick-marks-inactive-container-color: #f44336;--mdc-slider-with-tick-marks-active-container-color: white}html .mat-warn{--mat-slider-ripple-color: #f44336;--mat-slider-hover-state-layer-color: rgba(244, 67, 54, .05);--mat-slider-focus-state-layer-color: rgba(244, 67, 54, .2)}html{--mat-menu-container-shape: 4px;--mat-menu-divider-bottom-spacing: 0;--mat-menu-divider-top-spacing: 0;--mat-menu-item-spacing: 16px;--mat-menu-item-icon-size: 24px;--mat-menu-item-leading-spacing: 16px;--mat-menu-item-trailing-spacing: 16px;--mat-menu-item-with-icon-leading-spacing: 16px;--mat-menu-item-with-icon-trailing-spacing: 16px;--mat-menu-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-menu-item-label-text-color: rgba(0, 0, 0, .87);--mat-menu-item-icon-color: rgba(0, 0, 0, .87);--mat-menu-item-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-menu-item-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-menu-container-color: white;--mat-menu-divider-color: rgba(0, 0, 0, .12)}html{--mdc-list-list-item-container-shape: 0;--mdc-list-list-item-leading-avatar-shape: 50%;--mdc-list-list-item-container-color: transparent;--mdc-list-list-item-selected-container-color: transparent;--mdc-list-list-item-leading-avatar-color: transparent;--mdc-list-list-item-leading-icon-size: 24px;--mdc-list-list-item-leading-avatar-size: 40px;--mdc-list-list-item-trailing-icon-size: 24px;--mdc-list-list-item-disabled-state-layer-color: transparent;--mdc-list-list-item-disabled-state-layer-opacity: 0;--mdc-list-list-item-disabled-label-text-opacity: .38;--mdc-list-list-item-disabled-leading-icon-opacity: .38;--mdc-list-list-item-disabled-trailing-icon-opacity: .38}html{--mat-list-active-indicator-color: transparent;--mat-list-active-indicator-shape: 4px}html{--mdc-list-list-item-label-text-color: rgba(0, 0, 0, .87);--mdc-list-list-item-supporting-text-color: rgba(0, 0, 0, .54);--mdc-list-list-item-leading-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, .38);--mdc-list-list-item-trailing-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-disabled-label-text-color: black;--mdc-list-list-item-disabled-leading-icon-color: black;--mdc-list-list-item-disabled-trailing-icon-color: black;--mdc-list-list-item-hover-label-text-color: rgba(0, 0, 0, .87);--mdc-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, .38);--mdc-list-list-item-focus-label-text-color: rgba(0, 0, 0, .87);--mdc-list-list-item-hover-state-layer-color: black;--mdc-list-list-item-hover-state-layer-opacity: .04;--mdc-list-list-item-focus-state-layer-color: black;--mdc-list-list-item-focus-state-layer-opacity: .12}.mdc-list-item__start,.mdc-list-item__end{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #1b2535;--mdc-radio-selected-hover-icon-color: #1b2535;--mdc-radio-selected-icon-color: #1b2535;--mdc-radio-selected-pressed-icon-color: #1b2535}.mat-accent .mdc-list-item__start,.mat-accent .mdc-list-item__end{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #f2f2f7;--mdc-radio-selected-hover-icon-color: #f2f2f7;--mdc-radio-selected-icon-color: #f2f2f7;--mdc-radio-selected-pressed-icon-color: #f2f2f7}.mat-warn .mdc-list-item__start,.mat-warn .mdc-list-item__end{--mdc-radio-disabled-selected-icon-color: black;--mdc-radio-disabled-unselected-icon-color: black;--mdc-radio-unselected-hover-icon-color: #212121;--mdc-radio-unselected-focus-icon-color: #212121;--mdc-radio-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-radio-unselected-pressed-icon-color: rgba(0, 0, 0, .54);--mdc-radio-selected-focus-icon-color: #f44336;--mdc-radio-selected-hover-icon-color: #f44336;--mdc-radio-selected-icon-color: #f44336;--mdc-radio-selected-pressed-icon-color: #f44336}.mat-mdc-list-option{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: white;--mdc-checkbox-selected-focus-icon-color: #1b2535;--mdc-checkbox-selected-hover-icon-color: #1b2535;--mdc-checkbox-selected-icon-color: #1b2535;--mdc-checkbox-selected-pressed-icon-color: #1b2535;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #1b2535;--mdc-checkbox-selected-hover-state-layer-color: #1b2535;--mdc-checkbox-selected-pressed-state-layer-color: #1b2535;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}.mat-mdc-list-option.mat-accent{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: black;--mdc-checkbox-selected-focus-icon-color: #f2f2f7;--mdc-checkbox-selected-hover-icon-color: #f2f2f7;--mdc-checkbox-selected-icon-color: #f2f2f7;--mdc-checkbox-selected-pressed-icon-color: #f2f2f7;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #f2f2f7;--mdc-checkbox-selected-hover-state-layer-color: #f2f2f7;--mdc-checkbox-selected-pressed-state-layer-color: #f2f2f7;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}.mat-mdc-list-option.mat-warn{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: white;--mdc-checkbox-selected-focus-icon-color: #f44336;--mdc-checkbox-selected-hover-icon-color: #f44336;--mdc-checkbox-selected-icon-color: #f44336;--mdc-checkbox-selected-pressed-icon-color: #f44336;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #f44336;--mdc-checkbox-selected-hover-state-layer-color: #f44336;--mdc-checkbox-selected-pressed-state-layer-color: #f44336;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start{color:#1b2535}.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end{opacity:1}html{--mdc-list-list-item-one-line-container-height: 48px;--mdc-list-list-item-two-line-container-height: 64px;--mdc-list-list-item-three-line-container-height: 88px}html{--mat-list-list-item-leading-icon-start-space: 16px;--mat-list-list-item-leading-icon-end-space: 32px}.mdc-list-item__start,.mdc-list-item__end{--mdc-radio-state-layer-size: 40px}.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:56px}.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:72px}html{--mat-paginator-container-text-color: rgba(0, 0, 0, .87);--mat-paginator-container-background-color: white;--mat-paginator-enabled-icon-color: rgba(0, 0, 0, .54);--mat-paginator-disabled-icon-color: rgba(0, 0, 0, .12)}html{--mat-paginator-container-size: 56px;--mat-paginator-form-field-container-height: 40px;--mat-paginator-form-field-container-vertical-padding: 8px;--mat-paginator-touch-target-display: block}html{--mdc-secondary-navigation-tab-container-height: 48px}html{--mdc-tab-indicator-active-indicator-height: 2px;--mdc-tab-indicator-active-indicator-shape: 0}html{--mat-tab-header-divider-color: transparent;--mat-tab-header-divider-height: 0}.mat-mdc-tab-group,.mat-mdc-tab-nav-bar{--mdc-tab-indicator-active-indicator-color: #1b2535}.mat-mdc-tab-group,.mat-mdc-tab-nav-bar{--mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);--mat-tab-header-pagination-icon-color: black;--mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-label-text-color: #1b2535;--mat-tab-header-active-ripple-color: #1b2535;--mat-tab-header-inactive-ripple-color: #1b2535;--mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-focus-label-text-color: #1b2535;--mat-tab-header-active-hover-label-text-color: #1b2535;--mat-tab-header-active-focus-indicator-color: #1b2535;--mat-tab-header-active-hover-indicator-color: #1b2535}.mat-mdc-tab-group.mat-accent,.mat-mdc-tab-nav-bar.mat-accent{--mdc-tab-indicator-active-indicator-color: #f2f2f7}.mat-mdc-tab-group.mat-accent,.mat-mdc-tab-nav-bar.mat-accent{--mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);--mat-tab-header-pagination-icon-color: black;--mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-label-text-color: #f2f2f7;--mat-tab-header-active-ripple-color: #f2f2f7;--mat-tab-header-inactive-ripple-color: #f2f2f7;--mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-focus-label-text-color: #f2f2f7;--mat-tab-header-active-hover-label-text-color: #f2f2f7;--mat-tab-header-active-focus-indicator-color: #f2f2f7;--mat-tab-header-active-hover-indicator-color: #f2f2f7}.mat-mdc-tab-group.mat-warn,.mat-mdc-tab-nav-bar.mat-warn{--mdc-tab-indicator-active-indicator-color: #f44336}.mat-mdc-tab-group.mat-warn,.mat-mdc-tab-nav-bar.mat-warn{--mat-tab-header-disabled-ripple-color: rgba(0, 0, 0, .38);--mat-tab-header-pagination-icon-color: black;--mat-tab-header-inactive-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-label-text-color: #f44336;--mat-tab-header-active-ripple-color: #f44336;--mat-tab-header-inactive-ripple-color: #f44336;--mat-tab-header-inactive-focus-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-inactive-hover-label-text-color: rgba(0, 0, 0, .6);--mat-tab-header-active-focus-label-text-color: #f44336;--mat-tab-header-active-hover-label-text-color: #f44336;--mat-tab-header-active-focus-indicator-color: #f44336;--mat-tab-header-active-hover-indicator-color: #f44336}.mat-mdc-tab-group.mat-background-primary,.mat-mdc-tab-nav-bar.mat-background-primary{--mat-tab-header-with-background-background-color: #1b2535;--mat-tab-header-with-background-foreground-color: white}.mat-mdc-tab-group.mat-background-accent,.mat-mdc-tab-nav-bar.mat-background-accent{--mat-tab-header-with-background-background-color: #f2f2f7;--mat-tab-header-with-background-foreground-color: black}.mat-mdc-tab-group.mat-background-warn,.mat-mdc-tab-nav-bar.mat-background-warn{--mat-tab-header-with-background-background-color: #f44336;--mat-tab-header-with-background-foreground-color: white}.mat-mdc-tab-header{--mdc-secondary-navigation-tab-container-height: 48px}html{--mdc-checkbox-disabled-selected-checkmark-color: #fff;--mdc-checkbox-selected-focus-state-layer-opacity: .16;--mdc-checkbox-selected-hover-state-layer-opacity: .04;--mdc-checkbox-selected-pressed-state-layer-opacity: .16;--mdc-checkbox-unselected-focus-state-layer-opacity: .16;--mdc-checkbox-unselected-hover-state-layer-opacity: .04;--mdc-checkbox-unselected-pressed-state-layer-opacity: .16}html{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: black;--mdc-checkbox-selected-focus-icon-color: #f2f2f7;--mdc-checkbox-selected-hover-icon-color: #f2f2f7;--mdc-checkbox-selected-icon-color: #f2f2f7;--mdc-checkbox-selected-pressed-icon-color: #f2f2f7;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #f2f2f7;--mdc-checkbox-selected-hover-state-layer-color: #f2f2f7;--mdc-checkbox-selected-pressed-state-layer-color: #f2f2f7;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}html{--mat-checkbox-disabled-label-color: rgba(0, 0, 0, .38);--mat-checkbox-label-text-color: rgba(0, 0, 0, .87)}.mat-mdc-checkbox.mat-primary{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: white;--mdc-checkbox-selected-focus-icon-color: #1b2535;--mdc-checkbox-selected-hover-icon-color: #1b2535;--mdc-checkbox-selected-icon-color: #1b2535;--mdc-checkbox-selected-pressed-icon-color: #1b2535;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #1b2535;--mdc-checkbox-selected-hover-state-layer-color: #1b2535;--mdc-checkbox-selected-pressed-state-layer-color: #1b2535;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}.mat-mdc-checkbox.mat-warn{--mdc-checkbox-disabled-selected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, .38);--mdc-checkbox-selected-checkmark-color: white;--mdc-checkbox-selected-focus-icon-color: #f44336;--mdc-checkbox-selected-hover-icon-color: #f44336;--mdc-checkbox-selected-icon-color: #f44336;--mdc-checkbox-selected-pressed-icon-color: #f44336;--mdc-checkbox-unselected-focus-icon-color: #212121;--mdc-checkbox-unselected-hover-icon-color: #212121;--mdc-checkbox-unselected-icon-color: rgba(0, 0, 0, .54);--mdc-checkbox-selected-focus-state-layer-color: #f44336;--mdc-checkbox-selected-hover-state-layer-color: #f44336;--mdc-checkbox-selected-pressed-state-layer-color: #f44336;--mdc-checkbox-unselected-focus-state-layer-color: black;--mdc-checkbox-unselected-hover-state-layer-color: black;--mdc-checkbox-unselected-pressed-state-layer-color: black}html{--mdc-checkbox-state-layer-size: 40px}html{--mat-checkbox-touch-target-display: block}html{--mdc-text-button-container-shape: 4px;--mdc-text-button-keep-touch-target: false}html{--mdc-filled-button-container-shape: 4px;--mdc-filled-button-keep-touch-target: false}html{--mdc-protected-button-container-shape: 4px;--mdc-protected-button-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);--mdc-protected-button-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);--mdc-protected-button-focus-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);--mdc-protected-button-hover-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);--mdc-protected-button-pressed-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mdc-outlined-button-keep-touch-target: false;--mdc-outlined-button-outline-width: 1px;--mdc-outlined-button-container-shape: 4px}html{--mat-text-button-horizontal-padding: 8px;--mat-text-button-with-icon-horizontal-padding: 8px;--mat-text-button-icon-spacing: 8px;--mat-text-button-icon-offset: 0}html{--mat-filled-button-horizontal-padding: 16px;--mat-filled-button-icon-spacing: 8px;--mat-filled-button-icon-offset: -4px}html{--mat-protected-button-horizontal-padding: 16px;--mat-protected-button-icon-spacing: 8px;--mat-protected-button-icon-offset: -4px}html{--mat-outlined-button-horizontal-padding: 15px;--mat-outlined-button-icon-spacing: 8px;--mat-outlined-button-icon-offset: -4px}html{--mdc-text-button-label-text-color: black;--mdc-text-button-disabled-label-text-color: rgba(0, 0, 0, .38)}html{--mat-text-button-state-layer-color: black;--mat-text-button-disabled-state-layer-color: black;--mat-text-button-ripple-color: rgba(0, 0, 0, .1);--mat-text-button-hover-state-layer-opacity: .04;--mat-text-button-focus-state-layer-opacity: .12;--mat-text-button-pressed-state-layer-opacity: .12}html{--mdc-filled-button-container-color: white;--mdc-filled-button-label-text-color: black;--mdc-filled-button-disabled-container-color: rgba(0, 0, 0, .12);--mdc-filled-button-disabled-label-text-color: rgba(0, 0, 0, .38)}html{--mat-filled-button-state-layer-color: black;--mat-filled-button-disabled-state-layer-color: black;--mat-filled-button-ripple-color: rgba(0, 0, 0, .1);--mat-filled-button-hover-state-layer-opacity: .04;--mat-filled-button-focus-state-layer-opacity: .12;--mat-filled-button-pressed-state-layer-opacity: .12}html{--mdc-protected-button-container-color: white;--mdc-protected-button-label-text-color: black;--mdc-protected-button-disabled-container-color: rgba(0, 0, 0, .12);--mdc-protected-button-disabled-label-text-color: rgba(0, 0, 0, .38)}html{--mat-protected-button-state-layer-color: black;--mat-protected-button-disabled-state-layer-color: black;--mat-protected-button-ripple-color: rgba(0, 0, 0, .1);--mat-protected-button-hover-state-layer-opacity: .04;--mat-protected-button-focus-state-layer-opacity: .12;--mat-protected-button-pressed-state-layer-opacity: .12}html{--mdc-outlined-button-disabled-outline-color: rgba(0, 0, 0, .12);--mdc-outlined-button-disabled-label-text-color: rgba(0, 0, 0, .38);--mdc-outlined-button-label-text-color: black;--mdc-outlined-button-outline-color: rgba(0, 0, 0, .12)}html{--mat-outlined-button-state-layer-color: black;--mat-outlined-button-disabled-state-layer-color: black;--mat-outlined-button-ripple-color: rgba(0, 0, 0, .1);--mat-outlined-button-hover-state-layer-opacity: .04;--mat-outlined-button-focus-state-layer-opacity: .12;--mat-outlined-button-pressed-state-layer-opacity: .12}.mat-mdc-button.mat-primary{--mdc-text-button-label-text-color: #1b2535}.mat-mdc-button.mat-primary{--mat-text-button-state-layer-color: #1b2535;--mat-text-button-ripple-color: rgba(27, 37, 53, .1)}.mat-mdc-button.mat-accent{--mdc-text-button-label-text-color: #f2f2f7}.mat-mdc-button.mat-accent{--mat-text-button-state-layer-color: #f2f2f7;--mat-text-button-ripple-color: rgba(242, 242, 247, .1)}.mat-mdc-button.mat-warn{--mdc-text-button-label-text-color: #f44336}.mat-mdc-button.mat-warn{--mat-text-button-state-layer-color: #f44336;--mat-text-button-ripple-color: rgba(244, 67, 54, .1)}.mat-mdc-unelevated-button.mat-primary{--mdc-filled-button-container-color: #1b2535;--mdc-filled-button-label-text-color: white}.mat-mdc-unelevated-button.mat-primary{--mat-filled-button-state-layer-color: white;--mat-filled-button-ripple-color: rgba(255, 255, 255, .1)}.mat-mdc-unelevated-button.mat-accent{--mdc-filled-button-container-color: #f2f2f7;--mdc-filled-button-label-text-color: black}.mat-mdc-unelevated-button.mat-accent{--mat-filled-button-state-layer-color: black;--mat-filled-button-ripple-color: rgba(0, 0, 0, .1)}.mat-mdc-unelevated-button.mat-warn{--mdc-filled-button-container-color: #f44336;--mdc-filled-button-label-text-color: white}.mat-mdc-unelevated-button.mat-warn{--mat-filled-button-state-layer-color: white;--mat-filled-button-ripple-color: rgba(255, 255, 255, .1)}.mat-mdc-raised-button.mat-primary{--mdc-protected-button-container-color: #1b2535;--mdc-protected-button-label-text-color: white}.mat-mdc-raised-button.mat-primary{--mat-protected-button-state-layer-color: white;--mat-protected-button-ripple-color: rgba(255, 255, 255, .1)}.mat-mdc-raised-button.mat-accent{--mdc-protected-button-container-color: #f2f2f7;--mdc-protected-button-label-text-color: black}.mat-mdc-raised-button.mat-accent{--mat-protected-button-state-layer-color: black;--mat-protected-button-ripple-color: rgba(0, 0, 0, .1)}.mat-mdc-raised-button.mat-warn{--mdc-protected-button-container-color: #f44336;--mdc-protected-button-label-text-color: white}.mat-mdc-raised-button.mat-warn{--mat-protected-button-state-layer-color: white;--mat-protected-button-ripple-color: rgba(255, 255, 255, .1)}.mat-mdc-outlined-button.mat-primary{--mdc-outlined-button-label-text-color: #1b2535;--mdc-outlined-button-outline-color: rgba(0, 0, 0, .12)}.mat-mdc-outlined-button.mat-primary{--mat-outlined-button-state-layer-color: #1b2535;--mat-outlined-button-ripple-color: rgba(27, 37, 53, .1)}.mat-mdc-outlined-button.mat-accent{--mdc-outlined-button-label-text-color: #f2f2f7;--mdc-outlined-button-outline-color: rgba(0, 0, 0, .12)}.mat-mdc-outlined-button.mat-accent{--mat-outlined-button-state-layer-color: #f2f2f7;--mat-outlined-button-ripple-color: rgba(242, 242, 247, .1)}.mat-mdc-outlined-button.mat-warn{--mdc-outlined-button-label-text-color: #f44336;--mdc-outlined-button-outline-color: rgba(0, 0, 0, .12)}.mat-mdc-outlined-button.mat-warn{--mat-outlined-button-state-layer-color: #f44336;--mat-outlined-button-ripple-color: rgba(244, 67, 54, .1)}html{--mdc-text-button-container-height: 36px}html{--mdc-filled-button-container-height: 36px}html{--mdc-protected-button-container-height: 36px}html{--mdc-outlined-button-container-height: 36px}html{--mat-text-button-touch-target-display: block}html{--mat-filled-button-touch-target-display: block}html{--mat-protected-button-touch-target-display: block}html{--mat-outlined-button-touch-target-display: block}html{--mdc-icon-button-icon-size: 24px}html{--mdc-icon-button-icon-color: inherit;--mdc-icon-button-disabled-icon-color: rgba(0, 0, 0, .38)}html{--mat-icon-button-state-layer-color: black;--mat-icon-button-disabled-state-layer-color: black;--mat-icon-button-ripple-color: rgba(0, 0, 0, .1);--mat-icon-button-hover-state-layer-opacity: .04;--mat-icon-button-focus-state-layer-opacity: .12;--mat-icon-button-pressed-state-layer-opacity: .12}html .mat-mdc-icon-button.mat-primary{--mdc-icon-button-icon-color: #1b2535}html .mat-mdc-icon-button.mat-primary{--mat-icon-button-state-layer-color: #1b2535;--mat-icon-button-ripple-color: rgba(27, 37, 53, .1)}html .mat-mdc-icon-button.mat-accent{--mdc-icon-button-icon-color: #f2f2f7}html .mat-mdc-icon-button.mat-accent{--mat-icon-button-state-layer-color: #f2f2f7;--mat-icon-button-ripple-color: rgba(242, 242, 247, .1)}html .mat-mdc-icon-button.mat-warn{--mdc-icon-button-icon-color: #f44336}html .mat-mdc-icon-button.mat-warn{--mat-icon-button-state-layer-color: #f44336;--mat-icon-button-ripple-color: rgba(244, 67, 54, .1)}html{--mat-icon-button-touch-target-display: block}.mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 48px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:12px}html{--mdc-fab-container-shape: 50%;--mdc-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mdc-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12)}html{--mdc-fab-small-container-shape: 50%;--mdc-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mdc-fab-small-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-fab-small-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12)}html{--mdc-extended-fab-container-height: 48px;--mdc-extended-fab-container-shape: 24px;--mdc-extended-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);--mdc-extended-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-extended-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);--mdc-extended-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12)}html{--mdc-fab-container-color: white}html{--mat-fab-foreground-color: black;--mat-fab-state-layer-color: black;--mat-fab-disabled-state-layer-color: black;--mat-fab-ripple-color: rgba(0, 0, 0, .1);--mat-fab-hover-state-layer-opacity: .04;--mat-fab-focus-state-layer-opacity: .12;--mat-fab-pressed-state-layer-opacity: .12;--mat-fab-disabled-state-container-color: rgba(0, 0, 0, .12);--mat-fab-disabled-state-foreground-color: rgba(0, 0, 0, .38)}html{--mdc-fab-small-container-color: white}html{--mat-fab-small-foreground-color: black;--mat-fab-small-state-layer-color: black;--mat-fab-small-disabled-state-layer-color: black;--mat-fab-small-ripple-color: rgba(0, 0, 0, .1);--mat-fab-small-hover-state-layer-opacity: .04;--mat-fab-small-focus-state-layer-opacity: .12;--mat-fab-small-pressed-state-layer-opacity: .12;--mat-fab-small-disabled-state-container-color: rgba(0, 0, 0, .12);--mat-fab-small-disabled-state-foreground-color: rgba(0, 0, 0, .38)}html .mat-mdc-fab.mat-primary{--mdc-fab-container-color: #1b2535}html .mat-mdc-fab.mat-primary{--mat-fab-foreground-color: white;--mat-fab-state-layer-color: white;--mat-fab-ripple-color: rgba(255, 255, 255, .1)}html .mat-mdc-fab.mat-accent{--mdc-fab-container-color: #f2f2f7}html .mat-mdc-fab.mat-accent{--mat-fab-foreground-color: black;--mat-fab-state-layer-color: black;--mat-fab-ripple-color: rgba(0, 0, 0, .1)}html .mat-mdc-fab.mat-warn{--mdc-fab-container-color: #f44336}html .mat-mdc-fab.mat-warn{--mat-fab-foreground-color: white;--mat-fab-state-layer-color: white;--mat-fab-ripple-color: rgba(255, 255, 255, .1)}html .mat-mdc-mini-fab.mat-primary{--mdc-fab-small-container-color: #1b2535}html .mat-mdc-mini-fab.mat-primary{--mat-fab-small-foreground-color: white;--mat-fab-small-state-layer-color: white;--mat-fab-small-ripple-color: rgba(255, 255, 255, .1)}html .mat-mdc-mini-fab.mat-accent{--mdc-fab-small-container-color: #f2f2f7}html .mat-mdc-mini-fab.mat-accent{--mat-fab-small-foreground-color: black;--mat-fab-small-state-layer-color: black;--mat-fab-small-ripple-color: rgba(0, 0, 0, .1)}html .mat-mdc-mini-fab.mat-warn{--mdc-fab-small-container-color: #f44336}html .mat-mdc-mini-fab.mat-warn{--mat-fab-small-foreground-color: white;--mat-fab-small-state-layer-color: white;--mat-fab-small-ripple-color: rgba(255, 255, 255, .1)}html{--mat-fab-touch-target-display: block}html{--mat-fab-small-touch-target-display: block}html{--mdc-snackbar-container-shape: 4px}html{--mdc-snackbar-container-color: #333333;--mdc-snackbar-supporting-text-color: rgba(255, 255, 255, .87)}html{--mat-snack-bar-button-color: rgb(105.275, 133.525, 178.725)}html{--mat-table-row-item-outline-width: 1px}html{--mat-table-background-color: white;--mat-table-header-headline-color: rgba(0, 0, 0, .87);--mat-table-row-item-label-text-color: rgba(0, 0, 0, .87);--mat-table-row-item-outline-color: rgba(0, 0, 0, .12)}html{--mat-table-header-container-height: 56px;--mat-table-footer-container-height: 52px;--mat-table-row-item-container-height: 52px}html{--mdc-circular-progress-active-indicator-width: 4px;--mdc-circular-progress-size: 48px}html{--mdc-circular-progress-active-indicator-color: #1b2535}html .mat-accent{--mdc-circular-progress-active-indicator-color: #f2f2f7}html .mat-warn{--mdc-circular-progress-active-indicator-color: #f44336}html{--mat-badge-container-shape: 50%;--mat-badge-container-size: unset;--mat-badge-small-size-container-size: unset;--mat-badge-large-size-container-size: unset;--mat-badge-legacy-container-size: 22px;--mat-badge-legacy-small-size-container-size: 16px;--mat-badge-legacy-large-size-container-size: 28px;--mat-badge-container-offset: -11px 0;--mat-badge-small-size-container-offset: -8px 0;--mat-badge-large-size-container-offset: -14px 0;--mat-badge-container-overlap-offset: -11px;--mat-badge-small-size-container-overlap-offset: -8px;--mat-badge-large-size-container-overlap-offset: -14px;--mat-badge-container-padding: 0;--mat-badge-small-size-container-padding: 0;--mat-badge-large-size-container-padding: 0}html{--mat-badge-background-color: #1b2535;--mat-badge-text-color: white;--mat-badge-disabled-state-background-color: #b9b9b9;--mat-badge-disabled-state-text-color: rgba(0, 0, 0, .38)}.mat-badge-accent{--mat-badge-background-color: #f2f2f7;--mat-badge-text-color: black}.mat-badge-warn{--mat-badge-background-color: #f44336;--mat-badge-text-color: white}html{--mat-bottom-sheet-container-shape: 4px}html{--mat-bottom-sheet-container-text-color: rgba(0, 0, 0, .87);--mat-bottom-sheet-container-background-color: white}html{--mat-legacy-button-toggle-height: 36px;--mat-legacy-button-toggle-shape: 2px;--mat-legacy-button-toggle-focus-state-layer-opacity: 1}html{--mat-standard-button-toggle-shape: 4px;--mat-standard-button-toggle-hover-state-layer-opacity: .04;--mat-standard-button-toggle-focus-state-layer-opacity: .12}html{--mat-legacy-button-toggle-text-color: rgba(0, 0, 0, .38);--mat-legacy-button-toggle-state-layer-color: rgba(0, 0, 0, .12);--mat-legacy-button-toggle-selected-state-text-color: rgba(0, 0, 0, .54);--mat-legacy-button-toggle-selected-state-background-color: #e0e0e0;--mat-legacy-button-toggle-disabled-state-text-color: rgba(0, 0, 0, .26);--mat-legacy-button-toggle-disabled-state-background-color: #eeeeee;--mat-legacy-button-toggle-disabled-selected-state-background-color: #bdbdbd}html{--mat-standard-button-toggle-text-color: rgba(0, 0, 0, .87);--mat-standard-button-toggle-background-color: white;--mat-standard-button-toggle-state-layer-color: black;--mat-standard-button-toggle-selected-state-background-color: #e0e0e0;--mat-standard-button-toggle-selected-state-text-color: rgba(0, 0, 0, .87);--mat-standard-button-toggle-disabled-state-text-color: rgba(0, 0, 0, .26);--mat-standard-button-toggle-disabled-state-background-color: white;--mat-standard-button-toggle-disabled-selected-state-text-color: rgba(0, 0, 0, .87);--mat-standard-button-toggle-disabled-selected-state-background-color: #bdbdbd;--mat-standard-button-toggle-divider-color: rgb(224.4, 224.4, 224.4)}html{--mat-standard-button-toggle-height: 48px}html{--mat-datepicker-calendar-container-shape: 4px;--mat-datepicker-calendar-container-touch-shape: 4px;--mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);--mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12)}html{--mat-datepicker-calendar-date-selected-state-text-color: white;--mat-datepicker-calendar-date-selected-state-background-color: #1b2535;--mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(27, 37, 53, .4);--mat-datepicker-calendar-date-today-selected-state-outline-color: white;--mat-datepicker-calendar-date-focus-state-background-color: rgba(27, 37, 53, .3);--mat-datepicker-calendar-date-hover-state-background-color: rgba(27, 37, 53, .3);--mat-datepicker-toggle-active-state-icon-color: #1b2535;--mat-datepicker-calendar-date-in-range-state-background-color: rgba(27, 37, 53, .2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);--mat-datepicker-toggle-icon-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-period-button-text-color: black;--mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, .12);--mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, .54);--mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, .38);--mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(0, 0, 0, .18);--mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, .87);--mat-datepicker-calendar-date-outline-color: transparent;--mat-datepicker-calendar-date-disabled-state-text-color: rgba(0, 0, 0, .38);--mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, .24);--mat-datepicker-range-input-separator-color: rgba(0, 0, 0, .87);--mat-datepicker-range-input-disabled-state-separator-color: rgba(0, 0, 0, .38);--mat-datepicker-range-input-disabled-state-text-color: rgba(0, 0, 0, .38);--mat-datepicker-calendar-container-background-color: white;--mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, .87)}.mat-datepicker-content.mat-accent{--mat-datepicker-calendar-date-selected-state-text-color: black;--mat-datepicker-calendar-date-selected-state-background-color: #f2f2f7;--mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(242, 242, 247, .4);--mat-datepicker-calendar-date-today-selected-state-outline-color: black;--mat-datepicker-calendar-date-focus-state-background-color: rgba(242, 242, 247, .3);--mat-datepicker-calendar-date-hover-state-background-color: rgba(242, 242, 247, .3);--mat-datepicker-calendar-date-in-range-state-background-color: rgba(242, 242, 247, .2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032)}.mat-datepicker-content.mat-warn{--mat-datepicker-calendar-date-selected-state-text-color: white;--mat-datepicker-calendar-date-selected-state-background-color: #f44336;--mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(244, 67, 54, .4);--mat-datepicker-calendar-date-today-selected-state-outline-color: white;--mat-datepicker-calendar-date-focus-state-background-color: rgba(244, 67, 54, .3);--mat-datepicker-calendar-date-hover-state-background-color: rgba(244, 67, 54, .3);--mat-datepicker-calendar-date-in-range-state-background-color: rgba(244, 67, 54, .2);--mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032)}.mat-datepicker-toggle-active.mat-accent{--mat-datepicker-toggle-active-state-icon-color: #f2f2f7}.mat-datepicker-toggle-active.mat-warn{--mat-datepicker-toggle-active-state-icon-color: #f44336}.mat-calendar-controls{--mat-icon-button-touch-target-display: none}.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size);padding:8px}html{--mat-divider-width: 1px}html{--mat-divider-color: rgba(0, 0, 0, .12)}html{--mat-expansion-container-shape: 4px;--mat-expansion-legacy-header-indicator-display: inline-block;--mat-expansion-header-indicator-display: none}html{--mat-expansion-container-background-color: white;--mat-expansion-container-text-color: rgba(0, 0, 0, .87);--mat-expansion-actions-divider-color: rgba(0, 0, 0, .12);--mat-expansion-header-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-expansion-header-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-expansion-header-disabled-state-text-color: rgba(0, 0, 0, .26);--mat-expansion-header-text-color: rgba(0, 0, 0, .87);--mat-expansion-header-description-color: rgba(0, 0, 0, .54);--mat-expansion-header-indicator-color: rgba(0, 0, 0, .54)}html{--mat-expansion-header-collapsed-state-height: 48px;--mat-expansion-header-expanded-state-height: 64px}html{--mat-icon-color: inherit}.mat-icon.mat-primary{--mat-icon-color: #1b2535}.mat-icon.mat-accent{--mat-icon-color: #f2f2f7}.mat-icon.mat-warn{--mat-icon-color: #f44336}html{--mat-sidenav-container-shape: 0;--mat-sidenav-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12);--mat-sidenav-container-width: auto}html{--mat-sidenav-container-divider-color: rgba(0, 0, 0, .12);--mat-sidenav-container-background-color: white;--mat-sidenav-container-text-color: rgba(0, 0, 0, .87);--mat-sidenav-content-background-color: #fafafa;--mat-sidenav-content-text-color: rgba(0, 0, 0, .87);--mat-sidenav-scrim-color: rgba(0, 0, 0, .6)}html{--mat-stepper-header-icon-foreground-color: white;--mat-stepper-header-selected-state-icon-background-color: #1b2535;--mat-stepper-header-selected-state-icon-foreground-color: white;--mat-stepper-header-done-state-icon-background-color: #1b2535;--mat-stepper-header-done-state-icon-foreground-color: white;--mat-stepper-header-edit-state-icon-background-color: #1b2535;--mat-stepper-header-edit-state-icon-foreground-color: white;--mat-stepper-container-color: white;--mat-stepper-line-color: rgba(0, 0, 0, .12);--mat-stepper-header-hover-state-layer-color: rgba(0, 0, 0, .04);--mat-stepper-header-focus-state-layer-color: rgba(0, 0, 0, .04);--mat-stepper-header-label-text-color: rgba(0, 0, 0, .54);--mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, .54);--mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, .87);--mat-stepper-header-error-state-label-text-color: #f44336;--mat-stepper-header-icon-background-color: rgba(0, 0, 0, .54);--mat-stepper-header-error-state-icon-foreground-color: #f44336;--mat-stepper-header-error-state-icon-background-color: transparent}html .mat-step-header.mat-accent{--mat-stepper-header-icon-foreground-color: black;--mat-stepper-header-selected-state-icon-background-color: #f2f2f7;--mat-stepper-header-selected-state-icon-foreground-color: black;--mat-stepper-header-done-state-icon-background-color: #f2f2f7;--mat-stepper-header-done-state-icon-foreground-color: black;--mat-stepper-header-edit-state-icon-background-color: #f2f2f7;--mat-stepper-header-edit-state-icon-foreground-color: black}html .mat-step-header.mat-warn{--mat-stepper-header-icon-foreground-color: white;--mat-stepper-header-selected-state-icon-background-color: #f44336;--mat-stepper-header-selected-state-icon-foreground-color: white;--mat-stepper-header-done-state-icon-background-color: #f44336;--mat-stepper-header-done-state-icon-foreground-color: white;--mat-stepper-header-edit-state-icon-background-color: #f44336;--mat-stepper-header-edit-state-icon-foreground-color: white}html{--mat-stepper-header-height: 72px}html{--mat-sort-arrow-color: rgb(117.3, 117.3, 117.3)}html{--mat-toolbar-container-background-color: whitesmoke;--mat-toolbar-container-text-color: rgba(0, 0, 0, .87)}.mat-toolbar.mat-primary{--mat-toolbar-container-background-color: #1b2535;--mat-toolbar-container-text-color: white}.mat-toolbar.mat-accent{--mat-toolbar-container-background-color: #f2f2f7;--mat-toolbar-container-text-color: black}.mat-toolbar.mat-warn{--mat-toolbar-container-background-color: #f44336;--mat-toolbar-container-text-color: white}html{--mat-toolbar-standard-height: 64px;--mat-toolbar-mobile-height: 56px}html{--mat-tree-container-background-color: white;--mat-tree-node-text-color: rgba(0, 0, 0, .87)}html{--mat-tree-node-min-height: 48px}html{--mat-timepicker-container-shape: 4px;--mat-timepicker-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12)}html{--mat-timepicker-container-background-color: white}:root{--primary-color: #1b2535;--primary-lighter-color: rgb(78.6375, 107.7625, 154.3625);--primary-darker-color: hsl(216.9230769231, 32.5%, -4.3137254902%);--accent-color: #f2f2f7;--accent-lighter-color: #f3f5f9;--accent-lightest-color: hsl(240, 23.8095238095%, 125.8823529412%);--accent-darker-color: rgb(178.8571428571, 178.8571428571, 208.1428571429);--warn-color: #f44336;--warn-lighter-color: #ef9a9a;--warn-darker-color: #d32f2f;--background-color: #f2f2f7;--border-color: #e1e1e1;--text-color: #4a5568}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-slide,.swiper-cube-shadow{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:\"\";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top,.swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress),.swiper-watch-progress .swiper-slide-visible{.swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ud-custom-field{display:block;width:100%}.ud-custom-field.mat-mdc-form-field,.ud-custom-field .mat-mdc-text-field-wrapper,.ud-custom-field .mat-mdc-form-field-wrapper,.ud-custom-field .mat-mdc-form-field-subscript-wrapper{width:100%;box-sizing:border-box}.ud-custom-field .mat-mdc-text-field-wrapper{background:var(--ud-field-bg)!important;transition:background .2s ease}.ud-custom-field:hover .mat-mdc-text-field-wrapper{background:var(--ud-field-bg-hover)!important}.ud-custom-field.mat-form-field-disabled{opacity:.6;cursor:not-allowed}.ud-custom-field.mat-form-field-disabled .mat-mdc-text-field-wrapper,.ud-custom-field.mat-form-field-disabled .mat-mdc-form-field-flex,.ud-custom-field.mat-form-field-disabled input,.ud-custom-field.mat-form-field-disabled .mat-mdc-select{cursor:not-allowed;pointer-events:none}.ud-custom-field .mat-mdc-form-field-flex{background:transparent;border-radius:var(--ud-field-radius)}.ud-custom-field .mat-mdc-form-field-infix,.ud-custom-field .mat-mdc-select-value{font-family:var(--ud-field-font);font-size:.925rem;color:var(--ud-field-text)}.ud-custom-field .mat-mdc-floating-label{font-family:var(--ud-field-font);font-size:.925rem;color:var(--ud-field-text-muted);font-weight:400}.ud-custom-field.mat-focused .mat-mdc-floating-label{color:var(--ud-field-border-focus)}.ud-custom-field .mdc-notched-outline__leading,.ud-custom-field .mdc-notched-outline__notch,.ud-custom-field .mdc-notched-outline__trailing{border-color:var(--ud-field-border)!important;transition:border-color .2s ease;background:transparent!important}.ud-custom-field .mdc-notched-outline__notch{border-left:none!important}.ud-custom-field.mat-focused .mdc-notched-outline__leading,.ud-custom-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--ud-field-border-focus)!important;border-width:1.5px!important}.ud-custom-field .mat-mdc-form-field-icon-prefix:after{display:none!important}.ud-custom-field .mat-icon[matPrefix]{color:var(--ud-field-text-muted);font-size:19px;width:19px;height:19px;margin-right:4px;transition:color .2s ease}.ud-custom-field.mat-focused .mat-icon[matPrefix]{color:var(--ud-field-border-focus)}.ud-custom-field .mat-mdc-chip.mat-mdc-standard-chip{background:var(--ud-navy-dim)!important;color:var(--ud-navy)!important;font-family:var(--ud-field-font);font-size:.78rem;font-weight:500;border:1px solid var(--ud-navy-mid);height:22px}.ud-custom-field .mat-mdc-chip.mat-mdc-standard-chip .mdc-evolution-chip__text-label{color:var(--ud-navy)!important;font-size:.78rem}.ud-custom-field.ud-chip-select .mat-mdc-form-field-infix{padding-top:.5rem;padding-bottom:0}.mat-mdc-chip.mat-mdc-standard-chip{background:var(--ud-navy-dim)!important;color:var(--ud-navy)!important;font-family:var(--ud-field-font);font-size:.78rem;font-weight:500;border:1px solid var(--ud-navy-mid);height:22px}.mat-mdc-chip.mat-mdc-standard-chip .mdc-evolution-chip__text-label{color:var(--ud-navy)!important;font-size:.78rem}:root{--ud-field-bg: #f4f5f7;--ud-field-bg-hover: #eff1f5;--ud-field-border: #c9cdd6;--ud-field-border-focus: #1b2535;--ud-field-radius: 6px;--ud-field-text: #1b2535;--ud-field-text-muted: #6b7585;--ud-field-font: \"DM Sans\", system-ui, sans-serif;--ud-navy: #1b2535;--ud-navy-dim: rgba(27, 37, 53, .08);--ud-navy-mid: rgba(27, 37, 53, .18)}html,body{margin:0}:host{--eu-navy: #1b2535;--eu-navy-soft: #253347;--eu-navy-dim: rgba(27, 37, 53, .08);--eu-navy-mid: rgba(27, 37, 53, .18);--eu-surface: #ffffff;--eu-bg: #f4f5f7;--eu-border: #e2e5ea;--eu-border-mid: #c9cdd6;--eu-text: #1b2535;--eu-muted: #6b7585;--eu-danger: var(--danger, #e53935);--eu-radius: 10px;--eu-radius-sm: 6px;--eu-shadow: 0 2px 12px rgba(27, 37, 53, .06), 0 1px 4px rgba(27, 37, 53, .04);--eu-shadow-btn: 0 4px 14px rgba(27, 37, 53, .22);font-family:DM Sans,system-ui,sans-serif}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px #fafafa inset!important;background-color:#fafafa!important}p{font:20px Roboto,Helvetica Neue,sans-serif}.w-max-content{width:max-content}.ud-text-theme-primary{color:#1b2535}.ud-text-theme-primary-darker{color:#0c1a27}.ud-text-primary,.ud-text-white{color:#f5f6f7}.ud-dashed-container{border:1px dashed #373f4c;border-radius:10px}.text-large{font-size:large}.text-small{font-size:small}.text-smaller{font-size:smaller}.bg-accent{background-color:var(--accent-color)}.bg-accent-lighter{background-color:var(--accent-lighter-color)}.bg-accent-lightest{background-color:var(--accent-lightest-color)}.pointer:hover{cursor:pointer;outline:1px solid var(--accent-color);background-color:var(--accent-lightest-color)}.custom-snackbar-container.mat-mdc-snack-bar-container{--mat-snack-bar-button-color: transparent;--mdc-snackbar-container-color: transparent !important;--mdc-snackbar-supporting-text-color: transparent;box-shadow:none!important;padding:0!important;margin:8px!important;background:transparent!important}.mat-mdc-snack-bar-container.custom-snackbar-container .mdc-snackbar__surface{background:transparent!important;background-color:transparent!important;box-shadow:none!important;padding:0!important}.mat-mdc-snack-bar-container.custom-snackbar-container .mat-mdc-snack-bar-label{padding:0!important;margin:0!important}.mat-mdc-snack-bar-container.custom-snackbar-container .mdc-snackbar__label{padding:0!important}.container{background:transparent;max-width:1080px}.container .header{height:auto;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--eu-border);position:relative}.container .header:after{content:\"\";position:absolute;bottom:-2px;left:0;width:48px;height:2px;background:var(--eu-navy)}.container .header h4{font-family:Sora,system-ui,sans-serif;font-size:1.35rem;font-weight:600;color:var(--eu-navy);letter-spacing:-.02em;margin:0;line-height:1.3}.container .content{background:transparent;border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}.container .content.loading{background:#f4f5f7;border:1px solid #e2e5eb;border-radius:10px;padding:1.5rem}.container .content .section{background:#fff;border:1px solid #e2e5eb;border-radius:10px;padding:1.5rem 2rem;box-shadow:0 1px 4px #0000000f;position:relative;overflow:hidden;animation:sectionReveal .35s ease both}.container .content .section:before{content:\"\";position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,var(--eu-navy) 0%,rgba(27,37,53,.15) 100%);border-radius:var(--eu-radius) 0 0 var(--eu-radius)}.container .content .section .section-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1.25rem;padding-bottom:.875rem;border-bottom:1px solid #f0f1f4}.container .content .section .section-header .section-icon{font-size:15px;width:15px;height:15px;color:#374151}.container .content .section .section-header .section-label{font-family:DM Sans,system-ui,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.1em;color:#374151;text-transform:uppercase}.container .content .section:nth-child(1){animation-delay:0s}.container .content .section:nth-child(2){animation-delay:.07s}.container .content .section:nth-child(3){animation-delay:.14s}.container .content .section:nth-child(4){animation-delay:.21s}@keyframes sectionReveal{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$2.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }] });
|
|
1962
1966
|
}
|
|
1963
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1967
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: EditViewComponent, decorators: [{
|
|
1964
1968
|
type: Component,
|
|
1965
1969
|
args: [{ selector: 'ud-edit-view', standalone: true, imports: [
|
|
1966
1970
|
CommonModule,
|
|
@@ -2001,10 +2005,10 @@ class SingularPipe {
|
|
|
2001
2005
|
transform(value) {
|
|
2002
2006
|
return value.includes('|') ? value.split('|')[0].trim() : value;
|
|
2003
2007
|
}
|
|
2004
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2005
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.
|
|
2008
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SingularPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2009
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: SingularPipe, isStandalone: true, name: "singular" });
|
|
2006
2010
|
}
|
|
2007
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2011
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SingularPipe, decorators: [{
|
|
2008
2012
|
type: Pipe,
|
|
2009
2013
|
args: [{
|
|
2010
2014
|
name: 'singular',
|
|
@@ -2118,15 +2122,15 @@ class AutocompleteComponent {
|
|
|
2118
2122
|
this.labelMap.clear();
|
|
2119
2123
|
this.options.forEach(o => this.labelMap.set(o.value, o.label));
|
|
2120
2124
|
}
|
|
2121
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2122
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2125
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2126
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: AutocompleteComponent, isStandalone: true, selector: "ud-autocomplete", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", icon: "icon", iconFontSet: "iconFontSet", options: "options", loading: "loading", disabled: "disabled", hint: "hint", size: "size" }, outputs: { searchChange: "searchChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"ud-input\"\n [class]=\"'ud-input--' + size\"\n [class.ud-input--focused]=\"focused\"\n [class.ud-input--disabled]=\"formControl.disabled\"\n [class.ud-input--error]=\"formControl.invalid && formControl.touched\">\n @if (label) {\n <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n }\n <div class=\"ud-input__wrapper\">\n @if (icon) {\n <mat-icon class=\"ud-input__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <input\n class=\"ud-input__field\"\n [id]=\"'ud-input-' + controlName\"\n [formControl]=\"searchControl\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder\"\n (focus)=\"focused = true; onFocus()\"\n (blur)=\"focused = false\" />\n @if (loading) {\n <mat-icon class=\"ud-input__suffix ud-input__loading\" fontSet=\"material-icons-outlined\">sync</mat-icon>\n }\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [displayWith]=\"displayFn\"\n class=\"ud-autocomplete-panel\"\n (optionSelected)=\"onOptionSelected($event.option.value)\">\n @for (option of filteredOptions; track option.value) {\n <mat-option [value]=\"option.value\">\n {{ option.label }}\n </mat-option>\n }\n </mat-autocomplete>\n </div>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-input--small .ud-input__wrapper{height:32px;border-radius:7px;padding:0 10px;gap:6px}.ud-input--small .ud-input__field{font-size:13px}.ud-input--small .ud-input__icon,.ud-input--small .ud-input__suffix{font-size:16px;width:16px;height:16px}.ud-input--medium .ud-input__wrapper{height:40px;border-radius:8px;padding:0 12px;gap:7px}.ud-input--medium .ud-input__field{font-size:14px}.ud-input--medium .ud-input__icon,.ud-input--medium .ud-input__suffix{font-size:18px;width:18px;height:18px}.ud-input--large .ud-input__wrapper{height:48px;border-radius:9px;padding:0 14px;gap:8px}.ud-input--large .ud-input__field{font-size:15px}.ud-input--large .ud-input__icon,.ud-input--large .ud-input__suffix{font-size:20px;width:20px;height:20px}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel{background:#fff!important;border-radius:10px!important;box-shadow:0 8px 24px #1b25351f,0 2px 8px #1b25350f!important;padding:6px 0!important;overflow-y:auto}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel .mat-mdc-option{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important;min-height:44px!important;padding:0 1.25rem!important;transition:background .12s ease}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background:#f4f5f7!important}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel .mat-mdc-option.mdc-list-item--selected{background:#1b25350d!important}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#1b2535!important;font-weight:600!important}::ng-deep div.mat-mdc-autocomplete-panel.ud-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }], viewProviders: [
|
|
2123
2127
|
{
|
|
2124
2128
|
provide: ControlContainer,
|
|
2125
2129
|
useFactory: () => inject(ControlContainer, { skipSelf: true }),
|
|
2126
2130
|
},
|
|
2127
2131
|
] });
|
|
2128
2132
|
}
|
|
2129
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2133
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
2130
2134
|
type: Component,
|
|
2131
2135
|
args: [{ selector: 'ud-autocomplete', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatIcon, MatAutocompleteModule], viewProviders: [
|
|
2132
2136
|
{
|
|
@@ -2188,10 +2192,10 @@ class DateInputComponent {
|
|
|
2188
2192
|
this.disabled ? this.control.disable() : this.control.enable();
|
|
2189
2193
|
}
|
|
2190
2194
|
}
|
|
2191
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2192
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2195
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2196
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: DateInputComponent, isStandalone: true, selector: "ud-date-input", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", icon: "icon", iconFontSet: "iconFontSet", min: "min", max: "max", disabled: "disabled", hint: "hint" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"ud-input\"\n [class.ud-input--focused]=\"focused\"\n [class.ud-input--disabled]=\"control.disabled\"\n [class.ud-input--error]=\"control.invalid && control.touched\">\n @if (label) {\n <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n }\n <div class=\"ud-input__wrapper\">\n @if (icon) {\n <mat-icon class=\"ud-input__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <input\n class=\"ud-input__field\"\n [id]=\"'ud-input-' + controlName\"\n [matDatepicker]=\"picker\"\n [formControlName]=\"controlName\"\n [placeholder]=\"placeholder\"\n [min]=\"min ?? null\"\n [max]=\"max ?? null\"\n (focus)=\"focused = true\"\n (blur)=\"focused = false\" />\n <mat-datepicker-toggle class=\"ud-datepicker-toggle\" [for]=\"picker\">\n <mat-icon matDatepickerToggleIcon fontSet=\"material-icons-outlined\">calendar_month</mat-icon>\n </mat-datepicker-toggle>\n <mat-datepicker #picker />\n </div>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-datepicker-toggle{flex-shrink:0;margin-right:-4px}.ud-datepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{width:32px;height:32px;padding:4px;color:#6b7585;transition:color .18s ease}.ud-datepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base:hover{color:#1b2535}::ng-deep .mat-datepicker-content{border-radius:14px!important;box-shadow:0 0 0 1px #1b25350f,0 4px 6px -2px #1b25350d,0 20px 48px -4px #1b253529!important;overflow:hidden!important;border:none!important}::ng-deep .mat-datepicker-content .mat-calendar{font-family:DM Sans,system-ui,sans-serif!important;width:308px!important}::ng-deep .mat-datepicker-content .mat-calendar-header{background:linear-gradient(160deg,#1b2535,#253347)!important;padding:16px 12px 14px!important}::ng-deep .mat-datepicker-content .mat-calendar-controls{margin:0!important;align-items:center!important}::ng-deep .mat-datepicker-content .mat-calendar-period-button{color:#fff!important;font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;font-weight:600!important;border-radius:6px!important;padding:6px 10px!important;opacity:1!important}::ng-deep .mat-datepicker-content .mat-calendar-period-button:hover{background:#ffffff1f!important}::ng-deep .mat-datepicker-content .mat-calendar-arrow{fill:#ffffff8c!important}::ng-deep .mat-datepicker-content .mat-calendar-previous-button,::ng-deep .mat-datepicker-content .mat-calendar-next-button{color:#ffffffbf!important;border-radius:6px!important}::ng-deep .mat-datepicker-content .mat-calendar-previous-button:hover,::ng-deep .mat-datepicker-content .mat-calendar-next-button:hover{background:#ffffff1f!important;color:#fff!important}::ng-deep .mat-datepicker-content .mat-calendar-content{background:#fff!important;padding:12px 16px 18px!important}::ng-deep .mat-datepicker-content .mat-calendar-table-header th{font-family:DM Sans,system-ui,sans-serif!important;font-size:.67rem!important;font-weight:700!important;color:#6b7585!important;text-transform:uppercase!important;letter-spacing:.09em!important;padding-bottom:10px!important}::ng-deep .mat-datepicker-content .mat-calendar-table-header-divider:after{background:#c9cdd6!important;margin:0!important}::ng-deep .mat-datepicker-content .mat-calendar-body-cell-content{font-family:DM Sans,system-ui,sans-serif!important;font-size:.82rem!important;font-weight:500!important;color:#1b2535!important;border-radius:6px!important;border:none!important;transition:background .12s ease,color .12s ease!important}::ng-deep .mat-datepicker-content .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background:#1b253512!important}::ng-deep .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected)>.mat-calendar-body-cell-content{border:1.5px solid #1b2535!important;background:transparent!important;color:#1b2535!important;font-weight:700!important}::ng-deep .mat-datepicker-content .mat-calendar-body-selected{background:#1b2535!important;color:#fff!important;border-radius:6px!important;box-shadow:0 2px 8px #1b253547!important}::ng-deep .mat-datepicker-content .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:inset 0 0 0 1.5px #fff6,0 2px 8px #1b253547!important}::ng-deep .mat-datepicker-content .mat-calendar-body-in-range:before{background:#1b253512!important;border-radius:0!important}::ng-deep .mat-datepicker-content .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range):before,::ng-deep .mat-datepicker-content .mat-calendar-body-range-start:after{background:#1b253512!important;border-radius:6px 0 0 6px!important}::ng-deep .mat-datepicker-content .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range):before,::ng-deep .mat-datepicker-content .mat-calendar-body-range-end:after{background:#1b253512!important;border-radius:0 6px 6px 0!important}::ng-deep .mat-datepicker-content .mat-calendar-body-disabled>.mat-calendar-body-cell-content{color:#c9cdd6!important;font-weight:400!important}::ng-deep .mat-datepicker-content .mat-calendar-body-label{font-family:DM Sans,system-ui,sans-serif!important;font-size:.7rem!important;font-weight:700!important;color:#6b7585!important;text-transform:uppercase!important;letter-spacing:.08em!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
|
|
2193
2197
|
}
|
|
2194
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2198
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
2195
2199
|
type: Component,
|
|
2196
2200
|
args: [{ selector: 'ud-date-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatIcon, MatDatepickerModule], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div\n class=\"ud-input\"\n [class.ud-input--focused]=\"focused\"\n [class.ud-input--disabled]=\"control.disabled\"\n [class.ud-input--error]=\"control.invalid && control.touched\">\n @if (label) {\n <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n }\n <div class=\"ud-input__wrapper\">\n @if (icon) {\n <mat-icon class=\"ud-input__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <input\n class=\"ud-input__field\"\n [id]=\"'ud-input-' + controlName\"\n [matDatepicker]=\"picker\"\n [formControlName]=\"controlName\"\n [placeholder]=\"placeholder\"\n [min]=\"min ?? null\"\n [max]=\"max ?? null\"\n (focus)=\"focused = true\"\n (blur)=\"focused = false\" />\n <mat-datepicker-toggle class=\"ud-datepicker-toggle\" [for]=\"picker\">\n <mat-icon matDatepickerToggleIcon fontSet=\"material-icons-outlined\">calendar_month</mat-icon>\n </mat-datepicker-toggle>\n <mat-datepicker #picker />\n </div>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-datepicker-toggle{flex-shrink:0;margin-right:-4px}.ud-datepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{width:32px;height:32px;padding:4px;color:#6b7585;transition:color .18s ease}.ud-datepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base:hover{color:#1b2535}::ng-deep .mat-datepicker-content{border-radius:14px!important;box-shadow:0 0 0 1px #1b25350f,0 4px 6px -2px #1b25350d,0 20px 48px -4px #1b253529!important;overflow:hidden!important;border:none!important}::ng-deep .mat-datepicker-content .mat-calendar{font-family:DM Sans,system-ui,sans-serif!important;width:308px!important}::ng-deep .mat-datepicker-content .mat-calendar-header{background:linear-gradient(160deg,#1b2535,#253347)!important;padding:16px 12px 14px!important}::ng-deep .mat-datepicker-content .mat-calendar-controls{margin:0!important;align-items:center!important}::ng-deep .mat-datepicker-content .mat-calendar-period-button{color:#fff!important;font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;font-weight:600!important;border-radius:6px!important;padding:6px 10px!important;opacity:1!important}::ng-deep .mat-datepicker-content .mat-calendar-period-button:hover{background:#ffffff1f!important}::ng-deep .mat-datepicker-content .mat-calendar-arrow{fill:#ffffff8c!important}::ng-deep .mat-datepicker-content .mat-calendar-previous-button,::ng-deep .mat-datepicker-content .mat-calendar-next-button{color:#ffffffbf!important;border-radius:6px!important}::ng-deep .mat-datepicker-content .mat-calendar-previous-button:hover,::ng-deep .mat-datepicker-content .mat-calendar-next-button:hover{background:#ffffff1f!important;color:#fff!important}::ng-deep .mat-datepicker-content .mat-calendar-content{background:#fff!important;padding:12px 16px 18px!important}::ng-deep .mat-datepicker-content .mat-calendar-table-header th{font-family:DM Sans,system-ui,sans-serif!important;font-size:.67rem!important;font-weight:700!important;color:#6b7585!important;text-transform:uppercase!important;letter-spacing:.09em!important;padding-bottom:10px!important}::ng-deep .mat-datepicker-content .mat-calendar-table-header-divider:after{background:#c9cdd6!important;margin:0!important}::ng-deep .mat-datepicker-content .mat-calendar-body-cell-content{font-family:DM Sans,system-ui,sans-serif!important;font-size:.82rem!important;font-weight:500!important;color:#1b2535!important;border-radius:6px!important;border:none!important;transition:background .12s ease,color .12s ease!important}::ng-deep .mat-datepicker-content .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background:#1b253512!important}::ng-deep .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected)>.mat-calendar-body-cell-content{border:1.5px solid #1b2535!important;background:transparent!important;color:#1b2535!important;font-weight:700!important}::ng-deep .mat-datepicker-content .mat-calendar-body-selected{background:#1b2535!important;color:#fff!important;border-radius:6px!important;box-shadow:0 2px 8px #1b253547!important}::ng-deep .mat-datepicker-content .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:inset 0 0 0 1.5px #fff6,0 2px 8px #1b253547!important}::ng-deep .mat-datepicker-content .mat-calendar-body-in-range:before{background:#1b253512!important;border-radius:0!important}::ng-deep .mat-datepicker-content .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range):before,::ng-deep .mat-datepicker-content .mat-calendar-body-range-start:after{background:#1b253512!important;border-radius:6px 0 0 6px!important}::ng-deep .mat-datepicker-content .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range):before,::ng-deep .mat-datepicker-content .mat-calendar-body-range-end:after{background:#1b253512!important;border-radius:0 6px 6px 0!important}::ng-deep .mat-datepicker-content .mat-calendar-body-disabled>.mat-calendar-body-cell-content{color:#c9cdd6!important;font-weight:400!important}::ng-deep .mat-datepicker-content .mat-calendar-body-label{font-family:DM Sans,system-ui,sans-serif!important;font-size:.7rem!important;font-weight:700!important;color:#6b7585!important;text-transform:uppercase!important;letter-spacing:.08em!important}\n"] }]
|
|
2197
2201
|
}], propDecorators: { controlName: [{
|
|
@@ -2248,10 +2252,10 @@ class TextareaComponent {
|
|
|
2248
2252
|
this.disabled ? this.control.disable() : this.control.enable();
|
|
2249
2253
|
}
|
|
2250
2254
|
}
|
|
2251
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2252
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2255
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2256
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TextareaComponent, isStandalone: true, selector: "ud-textarea", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", icon: "icon", iconFontSet: "iconFontSet", minRows: "minRows", maxRows: "maxRows", disabled: "disabled", hint: "hint" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"ud-input\"\n [class.ud-input--focused]=\"focused\"\n [class.ud-input--disabled]=\"control.disabled\"\n [class.ud-input--error]=\"control.invalid && control.touched\">\n @if (label) {\n <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n }\n <div class=\"ud-input__wrapper ud-textarea__wrapper\">\n @if (icon) {\n <mat-icon class=\"ud-input__icon ud-textarea__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <textarea\n class=\"ud-input__field ud-textarea__field\"\n [id]=\"'ud-input-' + controlName\"\n [formControlName]=\"controlName\"\n [placeholder]=\"placeholder\"\n cdkTextareaAutosize\n [cdkAutosizeMinRows]=\"minRows\"\n [cdkAutosizeMaxRows]=\"maxRows\"\n (focus)=\"focused = true\"\n (blur)=\"focused = false\"></textarea>\n </div>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-textarea__wrapper{height:auto;align-items:flex-start;padding-top:10px;padding-bottom:10px}.ud-textarea__icon{margin-top:1px}.ud-textarea__field{resize:none;line-height:1.6;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "directive", type: i2$4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
|
|
2253
2257
|
}
|
|
2254
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2258
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
2255
2259
|
type: Component,
|
|
2256
2260
|
args: [{ selector: 'ud-textarea', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatIcon, TextFieldModule], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div\n class=\"ud-input\"\n [class.ud-input--focused]=\"focused\"\n [class.ud-input--disabled]=\"control.disabled\"\n [class.ud-input--error]=\"control.invalid && control.touched\">\n @if (label) {\n <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n }\n <div class=\"ud-input__wrapper ud-textarea__wrapper\">\n @if (icon) {\n <mat-icon class=\"ud-input__icon ud-textarea__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <textarea\n class=\"ud-input__field ud-textarea__field\"\n [id]=\"'ud-input-' + controlName\"\n [formControlName]=\"controlName\"\n [placeholder]=\"placeholder\"\n cdkTextareaAutosize\n [cdkAutosizeMinRows]=\"minRows\"\n [cdkAutosizeMaxRows]=\"maxRows\"\n (focus)=\"focused = true\"\n (blur)=\"focused = false\"></textarea>\n </div>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-textarea__wrapper{height:auto;align-items:flex-start;padding-top:10px;padding-bottom:10px}.ud-textarea__icon{margin-top:1px}.ud-textarea__field{resize:none;line-height:1.6;padding:0}\n"] }]
|
|
2257
2261
|
}], propDecorators: { controlName: [{
|
|
@@ -2283,21 +2287,29 @@ class TimePickerComponent {
|
|
|
2283
2287
|
options;
|
|
2284
2288
|
disabled = false;
|
|
2285
2289
|
hint = '';
|
|
2286
|
-
|
|
2290
|
+
focused = false;
|
|
2291
|
+
matOptions = [];
|
|
2292
|
+
controlContainer = inject(ControlContainer);
|
|
2293
|
+
get control() {
|
|
2294
|
+
return this.controlContainer.control.get(this.controlName);
|
|
2295
|
+
}
|
|
2287
2296
|
ngOnInit() {
|
|
2288
|
-
this.
|
|
2297
|
+
this.matOptions = this.buildOptions();
|
|
2289
2298
|
}
|
|
2290
2299
|
ngOnChanges(changes) {
|
|
2300
|
+
if (changes['disabled']) {
|
|
2301
|
+
this.disabled ? this.control.disable() : this.control.enable();
|
|
2302
|
+
}
|
|
2291
2303
|
if (changes['intervalMinutes'] || changes['options']) {
|
|
2292
|
-
this.
|
|
2304
|
+
this.matOptions = this.buildOptions();
|
|
2293
2305
|
}
|
|
2294
2306
|
}
|
|
2295
2307
|
buildOptions() {
|
|
2296
2308
|
if (this.options?.length) {
|
|
2297
|
-
return this.options.map(o => {
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
});
|
|
2309
|
+
return this.options.map(o => ({
|
|
2310
|
+
value: o.value,
|
|
2311
|
+
label: o.label ?? this.formatTime(o.value),
|
|
2312
|
+
}));
|
|
2301
2313
|
}
|
|
2302
2314
|
const interval = this.intervalMinutes ?? 30;
|
|
2303
2315
|
const result = [];
|
|
@@ -2305,8 +2317,7 @@ class TimePickerComponent {
|
|
|
2305
2317
|
for (let m = 0; m < 60; m += interval) {
|
|
2306
2318
|
const d = new Date();
|
|
2307
2319
|
d.setHours(h, m, 0, 0);
|
|
2308
|
-
|
|
2309
|
-
result.push({ value: label, label });
|
|
2320
|
+
result.push({ value: new Date(d), label: this.formatTime(d) });
|
|
2310
2321
|
}
|
|
2311
2322
|
}
|
|
2312
2323
|
return result;
|
|
@@ -2314,12 +2325,12 @@ class TimePickerComponent {
|
|
|
2314
2325
|
formatTime(d) {
|
|
2315
2326
|
return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
|
|
2316
2327
|
}
|
|
2317
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2318
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2328
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2329
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TimePickerComponent, isStandalone: true, selector: "ud-time-picker", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", intervalMinutes: "intervalMinutes", options: "options", disabled: "disabled", hint: "hint" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"ud-input\"\n [class.ud-input--focused]=\"focused\"\n [class.ud-input--disabled]=\"control.disabled\"\n [class.ud-input--error]=\"control.invalid && control.touched\">\n @if (label) {\n <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n }\n <div class=\"ud-input__wrapper\">\n <mat-icon class=\"ud-input__icon\" fontSet=\"material-icons-outlined\">schedule</mat-icon>\n <input\n class=\"ud-input__field\"\n [id]=\"'ud-input-' + controlName\"\n [formControlName]=\"controlName\"\n [matTimepicker]=\"picker\"\n [placeholder]=\"placeholder\"\n (focus)=\"focused = true\"\n (blur)=\"focused = false\" />\n <mat-timepicker-toggle class=\"ud-timepicker-toggle\" [for]=\"picker\">\n <mat-icon matTimepickerToggleIcon fontSet=\"material-icons-outlined\">expand_more</mat-icon>\n </mat-timepicker-toggle>\n <mat-timepicker #picker [options]=\"matOptions\" />\n </div>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-timepicker-toggle{flex-shrink:0;margin-right:-4px}.ud-timepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{width:32px;height:32px;padding:4px;color:#6b7585;transition:color .18s ease}.ud-timepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base:hover{color:#1b2535}::ng-deep .mat-timepicker-panel{background:#fff!important;border-radius:10px!important;box-shadow:0 8px 24px #1b25351f,0 2px 8px #1b25350f!important;padding:6px 0!important;max-height:280px!important}::ng-deep .mat-timepicker-panel .mat-mdc-option{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important;min-height:44px!important;padding:0 1.25rem!important;transition:background .12s ease}::ng-deep .mat-timepicker-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background:#f4f5f7!important}::ng-deep .mat-timepicker-panel .mat-mdc-option.mdc-list-item--selected{background:#1b25350d!important}::ng-deep .mat-timepicker-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#1b2535!important;font-weight:600!important}::ng-deep .mat-timepicker-panel .mat-mdc-option .mdc-list-item__primary-text{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i2$5.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i2$5.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i2$5.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
|
|
2319
2330
|
}
|
|
2320
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2331
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TimePickerComponent, decorators: [{
|
|
2321
2332
|
type: Component,
|
|
2322
|
-
args: [{ selector: 'ud-time-picker', standalone: true, imports: [
|
|
2333
|
+
args: [{ selector: 'ud-time-picker', standalone: true, imports: [ReactiveFormsModule, MatIcon, MatTimepickerModule], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div\n class=\"ud-input\"\n [class.ud-input--focused]=\"focused\"\n [class.ud-input--disabled]=\"control.disabled\"\n [class.ud-input--error]=\"control.invalid && control.touched\">\n @if (label) {\n <label class=\"ud-input__label\" [for]=\"'ud-input-' + controlName\">{{ label }}</label>\n }\n <div class=\"ud-input__wrapper\">\n <mat-icon class=\"ud-input__icon\" fontSet=\"material-icons-outlined\">schedule</mat-icon>\n <input\n class=\"ud-input__field\"\n [id]=\"'ud-input-' + controlName\"\n [formControlName]=\"controlName\"\n [matTimepicker]=\"picker\"\n [placeholder]=\"placeholder\"\n (focus)=\"focused = true\"\n (blur)=\"focused = false\" />\n <mat-timepicker-toggle class=\"ud-timepicker-toggle\" [for]=\"picker\">\n <mat-icon matTimepickerToggleIcon fontSet=\"material-icons-outlined\">expand_more</mat-icon>\n </mat-timepicker-toggle>\n <mat-timepicker #picker [options]=\"matOptions\" />\n </div>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-timepicker-toggle{flex-shrink:0;margin-right:-4px}.ud-timepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{width:32px;height:32px;padding:4px;color:#6b7585;transition:color .18s ease}.ud-timepicker-toggle ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base:hover{color:#1b2535}::ng-deep .mat-timepicker-panel{background:#fff!important;border-radius:10px!important;box-shadow:0 8px 24px #1b25351f,0 2px 8px #1b25350f!important;padding:6px 0!important;max-height:280px!important}::ng-deep .mat-timepicker-panel .mat-mdc-option{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important;min-height:44px!important;padding:0 1.25rem!important;transition:background .12s ease}::ng-deep .mat-timepicker-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background:#f4f5f7!important}::ng-deep .mat-timepicker-panel .mat-mdc-option.mdc-list-item--selected{background:#1b25350d!important}::ng-deep .mat-timepicker-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text{color:#1b2535!important;font-weight:600!important}::ng-deep .mat-timepicker-panel .mat-mdc-option .mdc-list-item__primary-text{font-family:DM Sans,system-ui,sans-serif!important;font-size:.9rem!important;color:#1b2535!important}\n"] }]
|
|
2323
2334
|
}], propDecorators: { controlName: [{
|
|
2324
2335
|
type: Input,
|
|
2325
2336
|
args: [{ required: true }]
|
|
@@ -2429,10 +2440,10 @@ class PhoneInputComponent {
|
|
|
2429
2440
|
}
|
|
2430
2441
|
return newValue.length;
|
|
2431
2442
|
}
|
|
2432
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2433
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2443
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2444
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: PhoneInputComponent, isStandalone: true, selector: "ud-phone-input", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", disabled: "disabled", hint: "hint", size: "size" }, host: { properties: { "class.is-disabled": "this.isDisabled" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"ud-input\"\n [class]=\"'ud-input--' + size\"\n [class.ud-input--focused]=\"focused\"\n [class.ud-input--disabled]=\"disabled\">\n @if (label) {\n <label class=\"ud-input__label\" [for]=\"'ud-phone-' + controlName\">{{ label }}</label>\n }\n <div class=\"ud-input__wrapper ud-phone__wrapper\">\n <button\n type=\"button\"\n class=\"ud-country-btn\"\n [disabled]=\"disabled\"\n [matMenuTriggerFor]=\"countryMenu\">\n <span class=\"ud-country-label\">\n {{ countryCodeControl.value?.flag }}\n <span class=\"ud-country-code\">+{{ countryCodeControl.value?.code }}</span>\n </span>\n <mat-icon class=\"ud-country-chevron\">expand_more</mat-icon>\n </button>\n <span class=\"ud-phone-sep\"></span>\n <input\n class=\"ud-input__field\"\n [id]=\"'ud-phone-' + controlName\"\n type=\"tel\"\n [value]=\"displayValue\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder || '(000) 000-0000'\"\n (input)=\"onPhoneInput($event)\"\n (focus)=\"focused = true\"\n (blur)=\"focused = false\" />\n </div>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n\n<mat-menu #countryMenu=\"matMenu\">\n @for (c of countries; track c.country) {\n <button mat-menu-item (click)=\"selectCountry(c)\">\n <span class=\"ud-menu-flag\">{{ c.flag }}</span>\n <span class=\"ud-menu-name\">{{ c.country }}</span>\n <span class=\"ud-menu-code\">+{{ c.code }}</span>\n </button>\n }\n</mat-menu>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-input--small .ud-input__wrapper{height:32px;border-radius:7px;padding:0 10px;gap:6px}.ud-input--small .ud-input__field{font-size:13px}.ud-input--small .ud-country-btn{padding:0 6px 0 10px;border-radius:6px 0 0 6px}.ud-input--small .ud-country-label{font-size:13px}.ud-input--small .ud-country-code{font-size:12px}.ud-input--small .ud-phone-sep{height:14px}.ud-input--medium .ud-input__wrapper{height:40px;border-radius:8px;padding:0 12px;gap:7px}.ud-input--medium .ud-input__field{font-size:14px}.ud-input--medium .ud-country-btn{padding:0 6px 0 12px;border-radius:7px 0 0 7px}.ud-input--medium .ud-country-label{font-size:14px}.ud-input--medium .ud-country-code{font-size:13px}.ud-input--medium .ud-phone-sep{height:18px}.ud-input--large .ud-input__wrapper{height:48px;border-radius:9px;padding:0 14px;gap:8px}.ud-input--large .ud-input__field{font-size:15px}.ud-input--large .ud-country-btn{padding:0 6px 0 14px;border-radius:8px 0 0 8px}.ud-input--large .ud-country-label{font-size:15px}.ud-input--large .ud-country-code{font-size:14px}.ud-input--large .ud-phone-sep{height:22px}.ud-phone__wrapper{padding-left:0}.ud-country-btn{display:flex;align-items:center;gap:2px;background:none;border:none;padding:0 6px 0 12px;height:100%;cursor:pointer;color:#1b2535;transition:background .15s ease;border-radius:7px 0 0 7px;flex-shrink:0}.ud-country-btn:hover{background:#1b25350f}.ud-country-btn:disabled{cursor:not-allowed;opacity:.6}.ud-country-label{display:flex;align-items:center;gap:4px;font-family:DM Sans,system-ui,sans-serif;font-size:14px;line-height:1}.ud-country-code{font-size:13px;color:#6b7585;font-weight:500}.ud-country-chevron{font-size:16px!important;width:16px!important;height:16px!important;color:#6b7585;transition:transform .2s ease}.ud-phone-sep{display:inline-block;width:1px;height:18px;background:#d8dde6;margin:0 10px 0 4px;flex-shrink:0}.ud-menu-flag{font-size:1.1rem;line-height:1}.ud-menu-name{flex:1;color:#1b2535;font-family:DM Sans,system-ui,sans-serif}.ud-menu-code{color:#6b7585;font-size:.8rem;font-family:DM Sans,system-ui,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] });
|
|
2434
2445
|
}
|
|
2435
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2446
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PhoneInputComponent, decorators: [{
|
|
2436
2447
|
type: Component,
|
|
2437
2448
|
args: [{ selector: 'ud-phone-input', viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], imports: [ReactiveFormsModule, MatIcon, MatMenu, MatMenuItem, MatMenuTrigger], template: "<div\n class=\"ud-input\"\n [class]=\"'ud-input--' + size\"\n [class.ud-input--focused]=\"focused\"\n [class.ud-input--disabled]=\"disabled\">\n @if (label) {\n <label class=\"ud-input__label\" [for]=\"'ud-phone-' + controlName\">{{ label }}</label>\n }\n <div class=\"ud-input__wrapper ud-phone__wrapper\">\n <button\n type=\"button\"\n class=\"ud-country-btn\"\n [disabled]=\"disabled\"\n [matMenuTriggerFor]=\"countryMenu\">\n <span class=\"ud-country-label\">\n {{ countryCodeControl.value?.flag }}\n <span class=\"ud-country-code\">+{{ countryCodeControl.value?.code }}</span>\n </span>\n <mat-icon class=\"ud-country-chevron\">expand_more</mat-icon>\n </button>\n <span class=\"ud-phone-sep\"></span>\n <input\n class=\"ud-input__field\"\n [id]=\"'ud-phone-' + controlName\"\n type=\"tel\"\n [value]=\"displayValue\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder || '(000) 000-0000'\"\n (input)=\"onPhoneInput($event)\"\n (focus)=\"focused = true\"\n (blur)=\"focused = false\" />\n </div>\n @if (hint) {\n <span class=\"ud-input__hint\">{{ hint }}</span>\n }\n</div>\n\n<mat-menu #countryMenu=\"matMenu\">\n @for (c of countries; track c.country) {\n <button mat-menu-item (click)=\"selectCountry(c)\">\n <span class=\"ud-menu-flag\">{{ c.flag }}</span>\n <span class=\"ud-menu-name\">{{ c.country }}</span>\n <span class=\"ud-menu-code\">+{{ c.code }}</span>\n </button>\n }\n</mat-menu>\n", styles: [":host{display:block;width:100%}.ud-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-input__wrapper{display:flex;align-items:center;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:0 12px;gap:7px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-input--focused .ud-input__wrapper{border-color:#1b2535;box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-input--error .ud-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-input--error.ud-input--focused .ud-input__wrapper{border-color:#e53935}.ud-input--disabled .ud-input__wrapper{background:#f4f5f7;border-color:#e8eaef;cursor:not-allowed;opacity:.6}.ud-input__icon{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585;transition:color .18s ease;line-height:1}.ud-input--focused .ud-input__icon{color:#1b2535}.ud-input__field{flex:1;min-width:0;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:#2a3548;width:100%}.ud-input__field::placeholder{color:#9099a8}.ud-input__field:disabled{cursor:not-allowed;color:#9099a8}.ud-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-input__suffix{flex-shrink:0;font-size:18px;width:18px;height:18px;color:#6b7585}.ud-input__loading{animation:ud-fw-spin .8s linear infinite}@keyframes ud-fw-spin{to{transform:rotate(360deg)}}.ud-input--small .ud-input__wrapper{height:32px;border-radius:7px;padding:0 10px;gap:6px}.ud-input--small .ud-input__field{font-size:13px}.ud-input--small .ud-country-btn{padding:0 6px 0 10px;border-radius:6px 0 0 6px}.ud-input--small .ud-country-label{font-size:13px}.ud-input--small .ud-country-code{font-size:12px}.ud-input--small .ud-phone-sep{height:14px}.ud-input--medium .ud-input__wrapper{height:40px;border-radius:8px;padding:0 12px;gap:7px}.ud-input--medium .ud-input__field{font-size:14px}.ud-input--medium .ud-country-btn{padding:0 6px 0 12px;border-radius:7px 0 0 7px}.ud-input--medium .ud-country-label{font-size:14px}.ud-input--medium .ud-country-code{font-size:13px}.ud-input--medium .ud-phone-sep{height:18px}.ud-input--large .ud-input__wrapper{height:48px;border-radius:9px;padding:0 14px;gap:8px}.ud-input--large .ud-input__field{font-size:15px}.ud-input--large .ud-country-btn{padding:0 6px 0 14px;border-radius:8px 0 0 8px}.ud-input--large .ud-country-label{font-size:15px}.ud-input--large .ud-country-code{font-size:14px}.ud-input--large .ud-phone-sep{height:22px}.ud-phone__wrapper{padding-left:0}.ud-country-btn{display:flex;align-items:center;gap:2px;background:none;border:none;padding:0 6px 0 12px;height:100%;cursor:pointer;color:#1b2535;transition:background .15s ease;border-radius:7px 0 0 7px;flex-shrink:0}.ud-country-btn:hover{background:#1b25350f}.ud-country-btn:disabled{cursor:not-allowed;opacity:.6}.ud-country-label{display:flex;align-items:center;gap:4px;font-family:DM Sans,system-ui,sans-serif;font-size:14px;line-height:1}.ud-country-code{font-size:13px;color:#6b7585;font-weight:500}.ud-country-chevron{font-size:16px!important;width:16px!important;height:16px!important;color:#6b7585;transition:transform .2s ease}.ud-phone-sep{display:inline-block;width:1px;height:18px;background:#d8dde6;margin:0 10px 0 4px;flex-shrink:0}.ud-menu-flag{font-size:1.1rem;line-height:1}.ud-menu-name{flex:1;color:#1b2535;font-family:DM Sans,system-ui,sans-serif}.ud-menu-code{color:#6b7585;font-size:.8rem;font-family:DM Sans,system-ui,sans-serif}\n"] }]
|
|
2438
2449
|
}], propDecorators: { controlName: [{
|
|
@@ -2542,10 +2553,10 @@ class ModalComponent {
|
|
|
2542
2553
|
this.currentPictureIndex += 1;
|
|
2543
2554
|
}
|
|
2544
2555
|
}
|
|
2545
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2546
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: ModalComponent, isStandalone: true, selector: "ud-modal", inputs: { title: "title", eyebrow: "eyebrow", lede: "lede", bodyText: "bodyText", showClose: "showClose", showFooter: "showFooter", confirmLabel: "confirmLabel", cancelLabel: "cancelLabel", confirmDisabled: "confirmDisabled" }, outputs: { confirm: "confirm", cancel: "cancel" }, ngImport: i0, template: "<div class=\"ud-modal-shell\">\n <header class=\"ud-modal-header\">\n @if (eyebrow) {\n <p class=\"ud-modal-eyebrow\">{{ eyebrow | translate | capitalize }}</p>\n }\n @if (title) {\n <h3 class=\"ud-modal-title\">{{ title | translate | capitalize }}</h3>\n }\n @if (lede) {\n <p class=\"ud-modal-lede\">{{ lede | translate | capitalize }}</p>\n }\n </header>\n\n <div class=\"ud-modal-content\" mat-dialog-content>\n @if (pictureUrls && currentPictureIndex != undefined) {\n <div class=\"image-container\">\n <mat-icon class=\"arrow-picture-icon\" (click)=\"previous()\">keyboard_arrow_left</mat-icon>\n <img [src]=\"pictureUrls[currentPictureIndex]\" alt=\"Picture\" />\n <mat-icon class=\"arrow-picture-icon\" (click)=\"next()\">keyboard_arrow_right</mat-icon>\n </div>\n <div class=\"image-footer\">\n {{ currentPictureIndex + 1 }} {{ 'names.of' | translate }} {{ pictureUrls.length }}\n </div>\n } @else if (form) {\n <form [formGroup]=\"form\">\n <div class=\"modal-form-fields\">\n @for (formType of data.forms; track formType) {\n @switch (formType.type) {\n @case (modalInputType.INPUT) {\n <ud-text-input\n [controlName]=\"formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\"\n [type]=\"formType.inputType ?? 'text'\"\n [placeholder]=\"formType.placeholder ?? ''\" />\n }\n @case (modalInputType.PHONE) {\n <ud-phone-input\n [controlName]=\"formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\"\n [placeholder]=\"formType.placeholder ?? ''\" />\n }\n @case (modalInputType.TEXT_AREA) {\n <ud-textarea\n [controlName]=\"formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\"\n [placeholder]=\"formType.placeholder ?? ''\"\n [minRows]=\"formType.minRows ?? 3\"\n [maxRows]=\"formType.maxRows ?? 6\" />\n }\n @case (modalInputType.OPTIONS) {\n <ud-multi-select\n [controlName]=\"formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\"\n [options]=\"formType.availableOptions\"\n [multiple]=\"false\" />\n }\n @case (modalInputType.MULTI_SELECT) {\n <ud-multi-select\n [controlName]=\"formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\"\n [options]=\"formType.availableOptions\"\n [multiple]=\"true\" />\n }\n @case (modalInputType.AUTOCOMPLETE) {\n <ud-autocomplete\n [controlName]=\"formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\"\n [placeholder]=\"formType.placeholder ?? ''\"\n [options]=\"formType.availableOptions\" />\n }\n @case (modalInputType.DATERANGE) {\n <ud-date-range-input\n [startControlName]=\"'start' + formType.property\"\n [endControlName]=\"'end' + formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\" />\n }\n @case (modalInputType.DATETIME) {\n <ud-date-input\n [controlName]=\"formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\"\n [min]=\"formType.min\"\n [max]=\"formType.max\" />\n }\n @case (modalInputType.TIME) {\n <ud-time-picker\n [controlName]=\"formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\"\n [intervalMinutes]=\"formType.intervalMinutes ?? 30\"\n [options]=\"formType.availableOptions\" />\n }\n @case (modalInputType.CHIPS) {\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ formType.title | translate | singular | capitalize }}\n </mat-label>\n <mat-chip-grid #chipGrid [formControlName]=\"formType.property\">\n @for (option of formType.availableOptions; track option) {\n <mat-chip-row (removed)=\"formType.removeOption(option)\">\n {{ option }}\n <button matChipRemove>\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n <input\n placeholder=\"New option...\"\n [matChipInputFor]=\"chipGrid\"\n (matChipInputTokenEnd)=\"formType.addOption($event)\" />\n </mat-form-field>\n }\n }\n }\n </div>\n </form>\n } @else if (bodyText) {\n <p class=\"ud-modal-body-text\">{{ bodyText }}</p>\n } @else {\n <ng-content></ng-content>\n }\n </div>\n\n @if (showFooter) {\n <footer class=\"ud-modal-footer\">\n @if (data.delete) {\n <ud-button variant=\"stroked\" color=\"danger\" class=\"ud-modal-footer__delete\" (click)=\"onDelete()\">\n {{ data.deleteLabel ?? 'Delete' }}\n </ud-button>\n }\n @if (showClose) {\n <ud-button variant=\"stroked\" color=\"secondary\" (click)=\"close()\">\n {{ (cancelLabel ?? 'actions.close') | translate | capitalize }}\n </ud-button>\n }\n <ud-button\n [disabled]=\"!!(form && form.invalid) || confirmDisabled\"\n (click)=\"onAction()\">\n {{ (confirmLabel ?? (form ? 'actions.save' : 'actions.ok')) | translate | capitalize }}\n </ud-button>\n </footer>\n }\n</div>\n", styles: [".ud-modal-shell{display:flex;flex-direction:column;overflow:hidden;min-width:360px;width:100%}.ud-modal-header{position:relative;padding:28px 28px 18px;overflow:hidden}.ud-modal-header:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(27,37,53,.1),transparent 60%),radial-gradient(circle at 85% 10%,rgba(58,74,102,.07),transparent 55%);pointer-events:none}.ud-modal-eyebrow{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1b2535}.ud-modal-title{margin:0;font-size:22px;line-height:1.2;font-weight:600;color:#2a3548;letter-spacing:-.01em}.ud-modal-lede{margin:8px 0 0;color:#6b7585;font-size:13.5px;line-height:1.5;max-width:40ch}.ud-modal-content{padding:4px 28px 12px;max-height:60vh;overflow-y:auto}.ud-modal-content.mat-mdc-dialog-content{padding:4px 28px 12px;margin:0;max-height:60vh}.modal-form-fields{display:flex;flex-direction:column;gap:4px;padding-top:8px}ud-text-input,ud-textarea,ud-multi-select,ud-autocomplete,ud-date-input,ud-date-range-input,ud-time-picker,ud-phone-input,mat-form-field{display:block;width:100%}.ud-modal-body-text{margin:4px 0;font-size:14px;color:#4a5568;line-height:1.55}.image-container{display:flex;justify-content:space-between;align-items:center}.image-container .arrow-picture-icon{display:flex;justify-content:center;align-items:center;padding:1rem;font-size:2rem;cursor:pointer;background:#1b2535;color:#fff;border-radius:8px;transition:background .15s ease}.image-container .arrow-picture-icon:hover{background:#253347}.image-container img{width:100%;max-width:460px;border-radius:8px}.image-footer{display:flex;justify-content:center;align-items:center;padding:8px 0 0;font-size:13px;color:#6b7585}.ud-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 28px 24px;border-top:1px solid #e2e5ea;background:#fbfbfd}.ud-modal-footer__delete{margin-right:auto}\n"], dependencies: [{ kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "pipe", type: SingularPipe, name: "singular" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: TextInputComponent, selector: "ud-text-input", inputs: ["controlName", "label", "placeholder", "type", "icon", "iconFontSet", "loading", "step", "min", "max", "disabled", "hint", "size", "clearable"] }, { kind: "component", type: TextareaComponent, selector: "ud-textarea", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "minRows", "maxRows", "disabled", "hint"] }, { kind: "component", type: MultiSelectComponent, selector: "ud-multi-select", inputs: ["controlName", "label", "icon", "iconFontSet", "options", "multiple", "maxChipsVisible", "moreText", "loading", "disabled", "hint"] }, { kind: "component", type: AutocompleteComponent, selector: "ud-autocomplete", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "options", "loading", "disabled", "hint", "size"], outputs: ["searchChange"] }, { kind: "component", type: DateInputComponent, selector: "ud-date-input", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "min", "max", "disabled", "hint"] }, { kind: "component", type: DateRangeInputComponent, selector: "ud-date-range-input", inputs: ["startControlName", "endControlName", "label", "icon", "iconFontSet", "startPlaceholder", "endPlaceholder", "min", "max", "disabled", "hint"] }, { kind: "component", type: TimePickerComponent, selector: "ud-time-picker", inputs: ["controlName", "label", "placeholder", "intervalMinutes", "options", "disabled", "hint"] }, { kind: "component", type: PhoneInputComponent, selector: "ud-phone-input", inputs: ["controlName", "label", "placeholder", "disabled", "hint", "size"] }, { kind: "component", type: UdButtonComponent, selector: "ud-button", inputs: ["variant", "color", "size", "type", "icon", "iconPosition", "iconFontSet", "loading", "disabled", "fullWidth"] }] });
|
|
2556
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ModalComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: i1$4.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2557
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ModalComponent, isStandalone: true, selector: "ud-modal", inputs: { title: "title", eyebrow: "eyebrow", lede: "lede", bodyText: "bodyText", showClose: "showClose", showFooter: "showFooter", confirmLabel: "confirmLabel", cancelLabel: "cancelLabel", confirmDisabled: "confirmDisabled" }, outputs: { confirm: "confirm", cancel: "cancel" }, ngImport: i0, template: "<div class=\"ud-modal-shell\">\n <header class=\"ud-modal-header\">\n @if (eyebrow) {\n <p class=\"ud-modal-eyebrow\">{{ eyebrow | translate | capitalize }}</p>\n }\n @if (title) {\n <h3 class=\"ud-modal-title\">{{ title | translate | capitalize }}</h3>\n }\n @if (lede) {\n <p class=\"ud-modal-lede\">{{ lede | translate | capitalize }}</p>\n }\n </header>\n\n <div class=\"ud-modal-content\" mat-dialog-content>\n @if (pictureUrls && currentPictureIndex != undefined) {\n <div class=\"image-container\">\n <mat-icon class=\"arrow-picture-icon\" (click)=\"previous()\">keyboard_arrow_left</mat-icon>\n <img [src]=\"pictureUrls[currentPictureIndex]\" alt=\"Picture\" />\n <mat-icon class=\"arrow-picture-icon\" (click)=\"next()\">keyboard_arrow_right</mat-icon>\n </div>\n <div class=\"image-footer\">\n {{ currentPictureIndex + 1 }} {{ 'names.of' | translate }} {{ pictureUrls.length }}\n </div>\n } @else if (form) {\n <form [formGroup]=\"form\">\n <div class=\"modal-form-fields\">\n @for (formType of data.forms; track formType) {\n @switch (formType.type) {\n @case (modalInputType.INPUT) {\n <ud-text-input\n [controlName]=\"formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\"\n [type]=\"formType.inputType ?? 'text'\"\n [placeholder]=\"formType.placeholder ?? ''\" />\n }\n @case (modalInputType.PHONE) {\n <ud-phone-input\n [controlName]=\"formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\"\n [placeholder]=\"formType.placeholder ?? ''\" />\n }\n @case (modalInputType.TEXT_AREA) {\n <ud-textarea\n [controlName]=\"formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\"\n [placeholder]=\"formType.placeholder ?? ''\"\n [minRows]=\"formType.minRows ?? 3\"\n [maxRows]=\"formType.maxRows ?? 6\" />\n }\n @case (modalInputType.OPTIONS) {\n <ud-multi-select\n [controlName]=\"formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\"\n [options]=\"formType.availableOptions\"\n [multiple]=\"false\" />\n }\n @case (modalInputType.MULTI_SELECT) {\n <ud-multi-select\n [controlName]=\"formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\"\n [options]=\"formType.availableOptions\"\n [multiple]=\"true\" />\n }\n @case (modalInputType.AUTOCOMPLETE) {\n <ud-autocomplete\n [controlName]=\"formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\"\n [placeholder]=\"formType.placeholder ?? ''\"\n [options]=\"formType.availableOptions\" />\n }\n @case (modalInputType.DATERANGE) {\n <ud-date-range-input\n [startControlName]=\"'start' + formType.property\"\n [endControlName]=\"'end' + formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\" />\n }\n @case (modalInputType.DATETIME) {\n <ud-date-input\n [controlName]=\"formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\"\n [min]=\"formType.min\"\n [max]=\"formType.max\" />\n }\n @case (modalInputType.TIME) {\n <ud-time-picker\n [controlName]=\"formType.property\"\n [label]=\"formType.title | translate | singular | capitalize\"\n [intervalMinutes]=\"formType.intervalMinutes ?? 30\"\n [options]=\"formType.availableOptions\" />\n }\n @case (modalInputType.CHIPS) {\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ formType.title | translate | singular | capitalize }}\n </mat-label>\n <mat-chip-grid #chipGrid [formControlName]=\"formType.property\">\n @for (option of formType.availableOptions; track option) {\n <mat-chip-row (removed)=\"formType.removeOption(option)\">\n {{ option }}\n <button matChipRemove>\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n <input\n placeholder=\"New option...\"\n [matChipInputFor]=\"chipGrid\"\n (matChipInputTokenEnd)=\"formType.addOption($event)\" />\n </mat-form-field>\n }\n }\n }\n </div>\n </form>\n } @else if (bodyText) {\n <p class=\"ud-modal-body-text\">{{ bodyText }}</p>\n } @else {\n <ng-content></ng-content>\n }\n </div>\n\n @if (showFooter) {\n <footer class=\"ud-modal-footer\">\n @if (data.delete) {\n <ud-button variant=\"stroked\" color=\"danger\" class=\"ud-modal-footer__delete\" (click)=\"onDelete()\">\n {{ data.deleteLabel ?? 'Delete' }}\n </ud-button>\n }\n @if (showClose) {\n <ud-button variant=\"stroked\" color=\"secondary\" (click)=\"close()\">\n {{ (cancelLabel ?? 'actions.close') | translate | capitalize }}\n </ud-button>\n }\n <ud-button\n [disabled]=\"!!(form && form.invalid) || confirmDisabled\"\n (click)=\"onAction()\">\n {{ (confirmLabel ?? (form ? 'actions.save' : 'actions.ok')) | translate | capitalize }}\n </ud-button>\n </footer>\n }\n</div>\n", styles: [".ud-modal-shell{display:flex;flex-direction:column;overflow:hidden;min-width:360px;width:100%}.ud-modal-header{position:relative;padding:28px 28px 18px;overflow:hidden}.ud-modal-header:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(27,37,53,.1),transparent 60%),radial-gradient(circle at 85% 10%,rgba(58,74,102,.07),transparent 55%);pointer-events:none}.ud-modal-eyebrow{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1b2535}.ud-modal-title{margin:0;font-size:22px;line-height:1.2;font-weight:600;color:#2a3548;letter-spacing:-.01em}.ud-modal-lede{margin:8px 0 0;color:#6b7585;font-size:13.5px;line-height:1.5;max-width:40ch}.ud-modal-content{padding:4px 28px 12px;max-height:60vh;overflow-y:auto}.ud-modal-content.mat-mdc-dialog-content{padding:4px 28px 12px;margin:0;max-height:60vh}.modal-form-fields{display:flex;flex-direction:column;gap:4px;padding-top:8px}ud-text-input,ud-textarea,ud-multi-select,ud-autocomplete,ud-date-input,ud-date-range-input,ud-time-picker,ud-phone-input,mat-form-field{display:block;width:100%}.ud-modal-body-text{margin:4px 0;font-size:14px;color:#4a5568;line-height:1.55}.image-container{display:flex;justify-content:space-between;align-items:center}.image-container .arrow-picture-icon{display:flex;justify-content:center;align-items:center;padding:1rem;font-size:2rem;cursor:pointer;background:#1b2535;color:#fff;border-radius:8px;transition:background .15s ease}.image-container .arrow-picture-icon:hover{background:#253347}.image-container img{width:100%;max-width:460px;border-radius:8px}.image-footer{display:flex;justify-content:center;align-items:center;padding:8px 0 0;font-size:13px;color:#6b7585}.ud-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 28px 24px;border-top:1px solid #e2e5ea;background:#fbfbfd}.ud-modal-footer__delete{margin-right:auto}\n"], dependencies: [{ kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "pipe", type: SingularPipe, name: "singular" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: TextInputComponent, selector: "ud-text-input", inputs: ["controlName", "label", "placeholder", "type", "icon", "iconFontSet", "loading", "step", "min", "max", "disabled", "hint", "size", "clearable"] }, { kind: "component", type: TextareaComponent, selector: "ud-textarea", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "minRows", "maxRows", "disabled", "hint"] }, { kind: "component", type: MultiSelectComponent, selector: "ud-multi-select", inputs: ["controlName", "label", "icon", "iconFontSet", "options", "multiple", "maxChipsVisible", "moreText", "loading", "disabled", "hint"] }, { kind: "component", type: AutocompleteComponent, selector: "ud-autocomplete", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "options", "loading", "disabled", "hint", "size"], outputs: ["searchChange"] }, { kind: "component", type: DateInputComponent, selector: "ud-date-input", inputs: ["controlName", "label", "placeholder", "icon", "iconFontSet", "min", "max", "disabled", "hint"] }, { kind: "component", type: DateRangeInputComponent, selector: "ud-date-range-input", inputs: ["startControlName", "endControlName", "label", "icon", "iconFontSet", "startPlaceholder", "endPlaceholder", "min", "max", "disabled", "hint"] }, { kind: "component", type: TimePickerComponent, selector: "ud-time-picker", inputs: ["controlName", "label", "placeholder", "intervalMinutes", "options", "disabled", "hint"] }, { kind: "component", type: PhoneInputComponent, selector: "ud-phone-input", inputs: ["controlName", "label", "placeholder", "disabled", "hint", "size"] }, { kind: "component", type: UdButtonComponent, selector: "ud-button", inputs: ["variant", "color", "size", "type", "icon", "iconPosition", "iconFontSet", "loading", "disabled", "fullWidth"] }] });
|
|
2547
2558
|
}
|
|
2548
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2559
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ModalComponent, decorators: [{
|
|
2549
2560
|
type: Component,
|
|
2550
2561
|
args: [{ selector: 'ud-modal', imports: [
|
|
2551
2562
|
CapitalizePipe,
|
|
@@ -2609,10 +2620,10 @@ class SafePipe {
|
|
|
2609
2620
|
transform(url) {
|
|
2610
2621
|
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
|
|
2611
2622
|
}
|
|
2612
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2613
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.
|
|
2623
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SafePipe, deps: [{ token: i1$5.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
2624
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" });
|
|
2614
2625
|
}
|
|
2615
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2626
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SafePipe, decorators: [{
|
|
2616
2627
|
type: Pipe,
|
|
2617
2628
|
args: [{
|
|
2618
2629
|
name: 'safe',
|
|
@@ -2707,10 +2718,10 @@ class FileInputComponent {
|
|
|
2707
2718
|
dialogConfig.width = '50vw';
|
|
2708
2719
|
this.dialog.open(ModalComponent, dialogConfig);
|
|
2709
2720
|
}
|
|
2710
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2711
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2721
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FileInputComponent, deps: [{ token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
2722
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: FileInputComponent, isStandalone: true, selector: "ud-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, initialFiles: { classPropertyName: "initialFiles", publicName: "initialFiles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected" }, ngImport: i0, template: "<div class=\"mt-3\">\n <ngx-file-drop\n dropZoneLabel=\"Drop files here\"\n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [directory]=\"false\"\n (onFileDrop)=\"dropped($event)\">\n <ng-template\n ngx-file-drop-content-tmp\n let-openFileSelector=\"openFileSelector\">\n <div class=\"drop-stack\">\n <ud-button color=\"primary\" type=\"button\" [icon]=\"icon\" (click)=\"openFileSelector()\">\n <span class=\"text-wrap\">{{ label | translate | capitalize }}</span>\n </ud-button>\n <div class=\"drop-hint\">\n <mat-icon class=\"drop-hint__icon\" fontSet=\"material-icons-outlined\"\n >cloud_upload</mat-icon\n >\n <span class=\"drop-hint__text\">{{\n 'fileInput.orDropHere' | translate\n }}</span>\n </div>\n </div>\n </ng-template>\n </ngx-file-drop>\n <div class=\"mt-3\">\n @for (image of previewUrls; track $index) {\n <div\n class=\"d-flex justify-content-between align-items-center mb-2 p-1 file\">\n @if (image) {\n <div class=\"d-flex\">\n @if (image.substring(0, 30).includes('pdf')) {\n <iframe\n [src]=\"image | safe\"\n class=\"mr-3 border\"\n allowFullscreen></iframe>\n } @else {\n <img\n [src]=\"image\"\n alt=\"\"\n class=\"mr-3 border\"\n (click)=\"openImageDialog($index)\" />\n }\n </div>\n }\n <button mat-icon-button type=\"button\" (click)=\"removeFile($index)\">\n <mat-icon fontSet=\"material-icons-outlined\"> cancel</mat-icon>\n </button>\n </div>\n }\n </div>\n</div>\n", styles: [".cancel{padding:0;min-width:fit-content;height:fit-content;margin-left:-13px;margin-top:-12px}.cancel ::ng-deep .mat-button-wrapper{display:flex}.cancel ::ng-deep .mat-button-wrapper mat-icon{background:#fff;border-radius:20px}img,iframe{width:65px;height:65px;object-fit:cover;border-radius:10px;cursor:pointer}img:hover,iframe:hover{opacity:.6}.file{border:1px dashed #373f4c;border-radius:10px}.drop-stack{display:flex;flex-direction:column;align-items:flex-start}.drop-hint{display:flex;align-items:center;gap:8px;margin-top:10px;padding-left:2px;color:#373f4c8c;font-size:.78rem;font-weight:500;letter-spacing:.02em;-webkit-user-select:none;user-select:none;animation:drop-hint-in .42s cubic-bezier(.2,.8,.2,1) both}.drop-hint__icon{font-size:16px;width:16px;height:16px;color:#1b2535;opacity:.85;transition:transform .26s ease,opacity .26s ease}.drop-hint__text{line-height:1;font-style:italic}.drop-hint:hover .drop-hint__icon{transform:translateY(-1px);opacity:1}@keyframes drop-hint-in{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: NgxFileDropModule }, { kind: "component", type: i2$6.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i2$6.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: SafePipe, name: "safe" }, { kind: "component", type: UdButtonComponent, selector: "ud-button", inputs: ["variant", "color", "size", "type", "icon", "iconPosition", "iconFontSet", "loading", "disabled", "fullWidth"] }] });
|
|
2712
2723
|
}
|
|
2713
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2724
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FileInputComponent, decorators: [{
|
|
2714
2725
|
type: Component,
|
|
2715
2726
|
args: [{ selector: 'ud-file-input', imports: [
|
|
2716
2727
|
NgxFileDropModule,
|
|
@@ -2775,10 +2786,10 @@ class PillComponent {
|
|
|
2775
2786
|
get observableText() {
|
|
2776
2787
|
return typeof this.text === 'string' ? of(this.text) : this.text;
|
|
2777
2788
|
}
|
|
2778
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2779
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2789
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2790
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: PillComponent, isStandalone: true, selector: "ud-pill", inputs: { text: "text", type: "type" }, ngImport: i0, template: "<span class=\"pill\" [ngClass]=\"type\">\n {{ (observableText | async) ?? '' | capitalize }}\n</span>\n", styles: [".pill{display:inline-flex;align-items:center;padding:.375rem .75rem;border-radius:12px;font-size:.8125rem;font-weight:600;text-align:center;transition:all .2s ease;letter-spacing:.025em;white-space:nowrap}.pill.success{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#065f46;border:1.5px solid #6ee7b7;box-shadow:0 2px 8px #10b98126}.pill.success:hover{background:linear-gradient(135deg,#a7f3d0,#86efac);box-shadow:0 4px 12px #10b98133;transform:translateY(-1px)}.pill.warning{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;border:1.5px solid #fcd34d;box-shadow:0 2px 8px #f59e0b26}.pill.warning:hover{background:linear-gradient(135deg,#fde68a,#fcd34d);box-shadow:0 4px 12px #f59e0b33;transform:translateY(-1px)}.pill.danger{background:linear-gradient(135deg,#fecaca,#fca5a5);color:#991b1b;border:1.5px solid #f87171;box-shadow:0 2px 8px #ef444426}.pill.danger:hover{background:linear-gradient(135deg,#fca5a5,#f87171);box-shadow:0 4px 12px #ef444433;transform:translateY(-1px)}.pill.info{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af;border:1.5px solid #93c5fd;box-shadow:0 2px 8px #3b82f626}.pill.info:hover{background:linear-gradient(135deg,#bfdbfe,#93c5fd);box-shadow:0 4px 12px #3b82f633;transform:translateY(-1px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] });
|
|
2780
2791
|
}
|
|
2781
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2792
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PillComponent, decorators: [{
|
|
2782
2793
|
type: Component,
|
|
2783
2794
|
args: [{ selector: 'ud-pill', imports: [NgClass, AsyncPipe, CapitalizePipe], template: "<span class=\"pill\" [ngClass]=\"type\">\n {{ (observableText | async) ?? '' | capitalize }}\n</span>\n", styles: [".pill{display:inline-flex;align-items:center;padding:.375rem .75rem;border-radius:12px;font-size:.8125rem;font-weight:600;text-align:center;transition:all .2s ease;letter-spacing:.025em;white-space:nowrap}.pill.success{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#065f46;border:1.5px solid #6ee7b7;box-shadow:0 2px 8px #10b98126}.pill.success:hover{background:linear-gradient(135deg,#a7f3d0,#86efac);box-shadow:0 4px 12px #10b98133;transform:translateY(-1px)}.pill.warning{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;border:1.5px solid #fcd34d;box-shadow:0 2px 8px #f59e0b26}.pill.warning:hover{background:linear-gradient(135deg,#fde68a,#fcd34d);box-shadow:0 4px 12px #f59e0b33;transform:translateY(-1px)}.pill.danger{background:linear-gradient(135deg,#fecaca,#fca5a5);color:#991b1b;border:1.5px solid #f87171;box-shadow:0 2px 8px #ef444426}.pill.danger:hover{background:linear-gradient(135deg,#fca5a5,#f87171);box-shadow:0 4px 12px #ef444433;transform:translateY(-1px)}.pill.info{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af;border:1.5px solid #93c5fd;box-shadow:0 2px 8px #3b82f626}.pill.info:hover{background:linear-gradient(135deg,#bfdbfe,#93c5fd);box-shadow:0 4px 12px #3b82f633;transform:translateY(-1px)}\n"] }]
|
|
2784
2795
|
}], propDecorators: { text: [{
|
|
@@ -2792,10 +2803,10 @@ class ProgressBarComponent {
|
|
|
2792
2803
|
height = '20px';
|
|
2793
2804
|
borderRadius = '10px';
|
|
2794
2805
|
backgroundColor = '#e0e0e0';
|
|
2795
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2796
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2806
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2807
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ProgressBarComponent, isStandalone: true, selector: "ud-progress-bar", inputs: { value: "value", height: "height", borderRadius: "borderRadius", backgroundColor: "backgroundColor" }, ngImport: i0, template: "<div\n class=\"progress-container\"\n [style.height]=\"height\"\n [style.borderRadius]=\"borderRadius\"\n [style.backgroundColor]=\"backgroundColor\">\n <div\n class=\"progress-fill\"\n [style.width.%]=\"value\"\n [style.borderRadius]=\"borderRadius\"></div>\n</div>\n", styles: [".progress-container{width:100%;position:relative;overflow:hidden}.progress-fill{height:100%;transition:width .3s ease-in-out;background:var(--primary-color)}\n"] });
|
|
2797
2808
|
}
|
|
2798
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2809
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
2799
2810
|
type: Component,
|
|
2800
2811
|
args: [{ selector: 'ud-progress-bar', template: "<div\n class=\"progress-container\"\n [style.height]=\"height\"\n [style.borderRadius]=\"borderRadius\"\n [style.backgroundColor]=\"backgroundColor\">\n <div\n class=\"progress-fill\"\n [style.width.%]=\"value\"\n [style.borderRadius]=\"borderRadius\"></div>\n</div>\n", styles: [".progress-container{width:100%;position:relative;overflow:hidden}.progress-fill{height:100%;transition:width .3s ease-in-out;background:var(--primary-color)}\n"] }]
|
|
2801
2812
|
}], propDecorators: { value: [{
|
|
@@ -2848,10 +2859,10 @@ class KpiComponent {
|
|
|
2848
2859
|
KpiDataType = KpiDataType;
|
|
2849
2860
|
KpiProgressBarType = KpiProgressBarType;
|
|
2850
2861
|
KpiVariant = KpiVariant;
|
|
2851
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2852
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: KpiComponent, isStandalone: true, selector: "ud-kpi", inputs: { title: "title", subtitle: "subtitle", dataType: "dataType", data: "data", icon: "icon", iconColor: "iconColor", titleRef: "titleRef", loading: "loading", variant: "variant" }, ngImport: i0, template: "<div class=\"kpi-card\" [ngClass]=\"[iconColor, variant, loading ? 'is-loading' : '']\">\n\n <div class=\"kpi-body\">\n @if (loading) {\n <div class=\"skeleton-block skeleton-label\"></div>\n <div class=\"skeleton-block skeleton-value\"></div>\n <div class=\"skeleton-block skeleton-sub\"></div>\n } @else {\n\n <!-- filled-top / dark-card: header is the tinted strip -->\n @if (variant === KpiVariant.FILLED_TOP || variant === KpiVariant.DARK_CARD) {\n <div class=\"kpi-filled-header\">\n <div class=\"kpi-icon-wrap\">\n <mat-icon>{{ icon }}</mat-icon>\n </div>\n <div class=\"kpi-title-section\">\n <span class=\"kpi-label\">\n @if (titleRef) {\n <a [routerLink]=\"titleRef\">{{ title }}</a>\n } @else {\n {{ title }}\n }\n </span>\n @if (subtitle) {\n <span class=\"kpi-subtitle\">{{ subtitle }}</span>\n }\n </div>\n </div>\n <div class=\"kpi-content\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </div>\n } @else {\n <!-- Standard header (icon-badge, top-bar, minimal) -->\n <div class=\"kpi-header\">\n <div class=\"kpi-icon-wrap\">\n <mat-icon>{{ icon }}</mat-icon>\n </div>\n <div class=\"kpi-title-section\">\n <span class=\"kpi-label\">\n @if (titleRef) {\n <a [routerLink]=\"titleRef\">{{ title }}</a>\n } @else {\n {{ title }}\n }\n </span>\n @if (subtitle) {\n <span class=\"kpi-subtitle\">{{ subtitle }}</span>\n }\n </div>\n </div>\n <div class=\"kpi-content\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </div>\n }\n\n }\n </div>\n</div>\n\n<!-- Shared content template -->\n<ng-template #contentTpl>\n @switch (dataType) {\n @case (KpiDataType.PROGRESS_BAR) {\n <div class=\"progress-section\">\n @if (getProgressData().type === KpiProgressBarType.PERCENTAGE) {\n <div class=\"value-display\">\n <span class=\"kpi-value\">{{ getProgressData().data.value }}</span>\n <span class=\"value-unit\">%</span>\n </div>\n } @else if (getProgressData().type === KpiProgressBarType.DIVISION) {\n <div class=\"value-display\">\n <span class=\"kpi-value\">{{ getProgressData().data.value }}</span>\n <span class=\"value-separator\">/</span>\n <span class=\"value-max\">{{ getProgressData().data.max }}</span>\n </div>\n }\n <div class=\"progress-bar-track\">\n <div class=\"progress-bar-fill\" [style.width.%]=\"getProgressBarValue()\"></div>\n </div>\n <ud-progress-bar [value]=\"getProgressBarValue()\" style=\"display:none\"></ud-progress-bar>\n </div>\n }\n @case (KpiDataType.PILLS) {\n <div class=\"pills-section\">\n <div class=\"value-display\">\n <span class=\"kpi-value\">{{ getPillData().value }}</span>\n </div>\n <div class=\"pills-container\">\n @for (pill of getPillData().pills; track pill) {\n <ud-pill [text]=\"pill.value + ' ' + (pill.label | async | capitalize)\" [type]=\"pill.type\"></ud-pill>\n }\n </div>\n </div>\n }\n @case (KpiDataType.TEXT) {\n <div class=\"text-section\">\n <div class=\"value-display\">\n <span class=\"kpi-value\">{{ getTextData().value }}</span>\n @if (getTextData().unit) {\n <span class=\"value-unit\">{{ getTextData().unit }}</span>\n }\n </div>\n @if (getTextData().trend) {\n <div class=\"trend-chip\" [ngClass]=\"getTrendColor(getTextData().trend!.value)\">\n <mat-icon class=\"trend-icon\">{{ getTrendIcon(getTextData().trend!.value) }}</mat-icon>\n <span>\n {{ getTextData().trend!.value > 0 ? '+' : '' }}{{ getTextData().trend!.value }}%\n @if (getTextData().trend!.label) {\n <span class=\"trend-label\"> {{ getTextData().trend!.label }}</span>\n }\n </span>\n </div>\n }\n @if (getTextData().description) {\n <span class=\"kpi-description\">{{ getTextData().description }}</span>\n }\n <ng-content></ng-content>\n </div>\n }\n }\n</ng-template>\n", styles: ["@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}@keyframes glow-pulse{0%,to{box-shadow:0 0 #fff0}50%{box-shadow:0 0 24px 2px #ffffff0f}}:host{display:flex;flex-direction:column}.kpi-card{flex:1;box-sizing:border-box;font-family:DM Sans,system-ui,sans-serif;position:relative;display:flex;flex-direction:row;background:#fff;border-radius:12px;border:1px solid #e2e5ea;box-shadow:0 1px 3px #0000000f,0 1px 2px #0000000a;min-width:260px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}.kpi-card:hover:not(.is-loading){transform:translateY(-2px);box-shadow:0 6px 20px #0000001a,0 2px 6px #0000000f}.kpi-body{flex:1;display:flex;flex-direction:column;gap:.75rem;padding:1.25rem;min-width:0}.kpi-header{display:flex;align-items:flex-start;gap:.75rem}.kpi-icon-wrap{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#f4f5f7}.kpi-icon-wrap ::ng-deep mat-icon{font-size:20px;width:20px;height:20px;color:#1b2535}.kpi-title-section{display:flex;flex-direction:column;gap:.125rem;padding-top:.1rem}.kpi-label{font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#6b7585;line-height:1.4}.kpi-label a{color:#2563eb;text-decoration:none;transition:color .15s ease}.kpi-label a:hover{color:#1d4ed8;text-decoration:underline}.kpi-subtitle{font-size:.72rem;color:#868f9d;font-weight:400}.kpi-content{display:flex;flex-direction:column;gap:.5rem}.value-display{display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap}.kpi-value{font-size:2rem;font-weight:700;color:#1b2535;line-height:1.1;letter-spacing:-.02em}.value-unit{font-size:.9rem;color:#6b7585;font-weight:500}.value-separator{font-size:1.4rem;color:#e2e5ea;font-weight:600;line-height:1}.value-max{font-size:1.1rem;color:#6b7585;font-weight:600}.progress-section{display:flex;flex-direction:column;gap:.6rem}.progress-bar-track{width:100%;height:6px;background:#f4f5f7;border-radius:99px;overflow:hidden}.progress-bar-fill{height:100%;background:#1b2535;border-radius:99px;transition:width .5s cubic-bezier(.4,0,.2,1);min-width:4px}.pills-section{display:flex;flex-direction:column;gap:.6rem}.pills-container{display:flex;gap:.4rem;flex-wrap:wrap}.text-section{display:flex;flex-direction:column;gap:.45rem}.trend-chip{display:inline-flex;align-items:center;gap:.2rem;padding:.2rem .55rem .2rem .35rem;border-radius:99px;font-size:.72rem;font-weight:600;width:fit-content;line-height:1}.trend-chip .trend-icon{font-size:13px;width:13px;height:13px}.trend-chip .trend-label{font-weight:400;opacity:.8}.trend-chip.trend-up{background:#d1fae5;color:#065f46}.trend-chip.trend-up ::ng-deep mat-icon{color:#059669}.trend-chip.trend-down{background:#fee2e2;color:#991b1b}.trend-chip.trend-down ::ng-deep mat-icon{color:#dc2626}.trend-chip.trend-neutral{background:#f4f5f7;color:#6b7585}.trend-chip.trend-neutral ::ng-deep mat-icon{color:#6b7585}.kpi-description{font-size:.75rem;color:#6b7585;font-weight:400;line-height:1.5}.skeleton-block{border-radius:6px;background:linear-gradient(90deg,#f4f5f7 25%,#e8eaee,#f4f5f7 75%);background-size:800px 100%;animation:shimmer 1.4s infinite linear}.skeleton-label{height:10px;width:55%}.skeleton-value{height:32px;width:70%;margin-top:.25rem}.skeleton-sub{height:10px;width:40%}.kpi-card.minimal{border-color:transparent;box-shadow:none;background:transparent}.kpi-card.minimal:hover:not(.is-loading){transform:none;background:#f4f5f7;box-shadow:none}.kpi-card.minimal .kpi-icon-wrap{width:32px;height:32px;border-radius:0;background:transparent!important}.kpi-card.minimal .kpi-icon-wrap ::ng-deep mat-icon{font-size:28px;width:28px;height:28px;color:#6b7585}.kpi-card.minimal .kpi-label{font-size:.8rem;text-transform:none;letter-spacing:0;font-weight:500}.kpi-card.dark-card{background:#1b2535;border-color:transparent;box-shadow:0 4px 20px #00000040,0 1px 4px #0003;flex-direction:column}.kpi-card.dark-card:hover:not(.is-loading){transform:translateY(-2px);box-shadow:0 8px 30px #00000059,0 2px 8px #0003}.kpi-card.dark-card .kpi-body{padding:0;gap:0;flex-direction:column}.kpi-card.dark-card .kpi-filled-header{padding:1rem 1.25rem .875rem;background:#ffffff0f;border-bottom:1px solid rgba(255,255,255,.08)}.kpi-card.dark-card .kpi-content{padding:1rem 1.25rem 1.25rem;flex:1}.kpi-card.dark-card .kpi-icon-wrap{background:#ffffff1a!important;border-radius:10px;width:40px;height:40px}.kpi-card.dark-card .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px;color:#ffffffd9!important}.kpi-card.dark-card .kpi-label{color:#ffffff80}.kpi-card.dark-card .kpi-subtitle{color:#ffffff59}.kpi-card.dark-card .kpi-value{color:#fff}.kpi-card.dark-card .value-unit{color:#ffffff73}.kpi-card.dark-card .value-separator{color:#fff3}.kpi-card.dark-card .value-max{color:#ffffff73}.kpi-card.dark-card .kpi-description{color:#fff6}.kpi-card.dark-card .progress-bar-track{background:#ffffff1a}.kpi-card.dark-card .trend-chip.trend-up{background:#05966940;color:#6ee7b7}.kpi-card.dark-card .trend-chip.trend-down{background:#dc262640;color:#fca5a5}.kpi-card.dark-card .trend-chip.trend-neutral{background:#ffffff14;color:#ffffff80}.kpi-card.dark-card .trend-chip ::ng-deep mat-icon{color:inherit!important}.kpi-card.dark-card .skeleton-block{background:linear-gradient(90deg,#ffffff0f 25%,#ffffff1f,#ffffff0f 75%);background-size:800px 100%}.kpi-card.icon-badge .kpi-icon-wrap{width:48px;height:48px;border-radius:12px}.kpi-card.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{font-size:26px;width:26px;height:26px}.kpi-card.top-bar{border-top-width:3px}.kpi-card.top-bar .kpi-icon-wrap{width:44px;height:44px;border-radius:10px}.kpi-card.top-bar .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px}.kpi-card.filled-top{flex-direction:column}.kpi-card.filled-top .kpi-body{padding:0;gap:0;flex-direction:column}.kpi-card.filled-top .kpi-filled-header{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.25rem;border-radius:12px 12px 0 0}.kpi-card.filled-top .kpi-content{padding:1rem 1.25rem 1.25rem;flex:1}.kpi-card.filled-top .kpi-icon-wrap{width:40px;height:40px;border-radius:10px;background:#ffffff73;backdrop-filter:blur(4px)}.kpi-card.filled-top .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px}.kpi-card.filled-top .kpi-label{color:#1b2535bf}.kpi-card.filled-top .kpi-subtitle{color:#1b25358c}.kpi-card.purple.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5!important}.kpi-card.purple.dark-card .progress-bar-fill{background:#4f46e5}.kpi-card.purple.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#ede9fe,#d5ccfd)}.kpi-card.purple.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.top-bar{border-top-color:#4f46e5}.kpi-card.purple.top-bar .kpi-icon-wrap{background:#ede9fe}.kpi-card.purple.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.filled-top .kpi-filled-header{background:#ede9fe}.kpi-card.purple.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.accent-bar .kpi-icon-wrap{background:#ede9fe}.kpi-card.purple .progress-bar-fill{background:#4f46e5}.kpi-card.amber.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706!important}.kpi-card.amber.dark-card .progress-bar-fill{background:#d97706}.kpi-card.amber.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#fef3c7,#fdeda9)}.kpi-card.amber.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.top-bar{border-top-color:#d97706}.kpi-card.amber.top-bar .kpi-icon-wrap{background:#fef3c7}.kpi-card.amber.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.filled-top .kpi-filled-header{background:#fef3c7}.kpi-card.amber.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.accent-bar .kpi-icon-wrap{background:#fef3c7}.kpi-card.amber .progress-bar-fill{background:#d97706}.kpi-card.green.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#059669!important}.kpi-card.green.dark-card .progress-bar-fill{background:#059669}.kpi-card.green.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#d1fae5,#b5f7d5)}.kpi-card.green.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.top-bar{border-top-color:#059669}.kpi-card.green.top-bar .kpi-icon-wrap{background:#d1fae5}.kpi-card.green.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.filled-top .kpi-filled-header{background:#d1fae5}.kpi-card.green.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.accent-bar .kpi-icon-wrap{background:#d1fae5}.kpi-card.green .progress-bar-fill{background:#059669}.kpi-card.blue.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8!important}.kpi-card.blue.dark-card .progress-bar-fill{background:#1d4ed8}.kpi-card.blue.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#dbeafe,#bdd9fd)}.kpi-card.blue.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.top-bar{border-top-color:#1d4ed8}.kpi-card.blue.top-bar .kpi-icon-wrap{background:#dbeafe}.kpi-card.blue.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.filled-top .kpi-filled-header{background:#dbeafe}.kpi-card.blue.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.accent-bar .kpi-icon-wrap{background:#dbeafe}.kpi-card.blue .progress-bar-fill{background:#1d4ed8}.kpi-card.red.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626!important}.kpi-card.red.dark-card .progress-bar-fill{background:#dc2626}.kpi-card.red.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#fee2e2,#fdc4c4)}.kpi-card.red.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.top-bar{border-top-color:#dc2626}.kpi-card.red.top-bar .kpi-icon-wrap{background:#fee2e2}.kpi-card.red.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.filled-top .kpi-filled-header{background:#fee2e2}.kpi-card.red.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.accent-bar .kpi-icon-wrap{background:#fee2e2}.kpi-card.red .progress-bar-fill{background:#dc2626}.kpi-card.navy.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535!important}.kpi-card.navy.dark-card .progress-bar-fill{background:#1b2535}.kpi-card.navy.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#e8eaf0,#d5d9e4)}.kpi-card.navy.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.top-bar{border-top-color:#1b2535}.kpi-card.navy.top-bar .kpi-icon-wrap{background:#e8eaf0}.kpi-card.navy.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.filled-top .kpi-filled-header{background:#e8eaf0}.kpi-card.navy.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.accent-bar .kpi-icon-wrap{background:#e8eaf0}.kpi-card.navy .progress-bar-fill{background:#1b2535}@media (max-width: 1280px){.kpi-card{min-width:220px}}@media (max-width: 768px){.kpi-card{min-width:100%}}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ProgressBarComponent, selector: "ud-progress-bar", inputs: ["value", "height", "borderRadius", "backgroundColor"] }, { kind: "component", type: PillComponent, selector: "ud-pill", inputs: ["text", "type"] }] });
|
|
2862
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: KpiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2863
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: KpiComponent, isStandalone: true, selector: "ud-kpi", inputs: { title: "title", subtitle: "subtitle", dataType: "dataType", data: "data", icon: "icon", iconColor: "iconColor", titleRef: "titleRef", loading: "loading", variant: "variant" }, ngImport: i0, template: "<div class=\"kpi-card\" [ngClass]=\"[iconColor, variant, loading ? 'is-loading' : '']\">\n\n <div class=\"kpi-body\">\n @if (loading) {\n <div class=\"skeleton-block skeleton-label\"></div>\n <div class=\"skeleton-block skeleton-value\"></div>\n <div class=\"skeleton-block skeleton-sub\"></div>\n } @else {\n\n <!-- filled-top / dark-card: header is the tinted strip -->\n @if (variant === KpiVariant.FILLED_TOP || variant === KpiVariant.DARK_CARD) {\n <div class=\"kpi-filled-header\">\n <div class=\"kpi-icon-wrap\">\n <mat-icon>{{ icon }}</mat-icon>\n </div>\n <div class=\"kpi-title-section\">\n <span class=\"kpi-label\">\n @if (titleRef) {\n <a [routerLink]=\"titleRef\">{{ title }}</a>\n } @else {\n {{ title }}\n }\n </span>\n @if (subtitle) {\n <span class=\"kpi-subtitle\">{{ subtitle }}</span>\n }\n </div>\n </div>\n <div class=\"kpi-content\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </div>\n } @else {\n <!-- Standard header (icon-badge, top-bar, minimal) -->\n <div class=\"kpi-header\">\n <div class=\"kpi-icon-wrap\">\n <mat-icon>{{ icon }}</mat-icon>\n </div>\n <div class=\"kpi-title-section\">\n <span class=\"kpi-label\">\n @if (titleRef) {\n <a [routerLink]=\"titleRef\">{{ title }}</a>\n } @else {\n {{ title }}\n }\n </span>\n @if (subtitle) {\n <span class=\"kpi-subtitle\">{{ subtitle }}</span>\n }\n </div>\n </div>\n <div class=\"kpi-content\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </div>\n }\n\n }\n </div>\n</div>\n\n<!-- Shared content template -->\n<ng-template #contentTpl>\n @switch (dataType) {\n @case (KpiDataType.PROGRESS_BAR) {\n <div class=\"progress-section\">\n @if (getProgressData().type === KpiProgressBarType.PERCENTAGE) {\n <div class=\"value-display\">\n <span class=\"kpi-value\">{{ getProgressData().data.value }}</span>\n <span class=\"value-unit\">%</span>\n </div>\n } @else if (getProgressData().type === KpiProgressBarType.DIVISION) {\n <div class=\"value-display\">\n <span class=\"kpi-value\">{{ getProgressData().data.value }}</span>\n <span class=\"value-separator\">/</span>\n <span class=\"value-max\">{{ getProgressData().data.max }}</span>\n </div>\n }\n <div class=\"progress-bar-track\">\n <div class=\"progress-bar-fill\" [style.width.%]=\"getProgressBarValue()\"></div>\n </div>\n <ud-progress-bar [value]=\"getProgressBarValue()\" style=\"display:none\"></ud-progress-bar>\n </div>\n }\n @case (KpiDataType.PILLS) {\n <div class=\"pills-section\">\n <div class=\"value-display\">\n <span class=\"kpi-value\">{{ getPillData().value }}</span>\n </div>\n <div class=\"pills-container\">\n @for (pill of getPillData().pills; track pill) {\n <ud-pill [text]=\"pill.value + ' ' + (pill.label | async | capitalize)\" [type]=\"pill.type\"></ud-pill>\n }\n </div>\n </div>\n }\n @case (KpiDataType.TEXT) {\n <div class=\"text-section\">\n <div class=\"value-display\">\n <span class=\"kpi-value\">{{ getTextData().value }}</span>\n @if (getTextData().unit) {\n <span class=\"value-unit\">{{ getTextData().unit }}</span>\n }\n </div>\n @if (getTextData().trend) {\n <div class=\"trend-chip\" [ngClass]=\"getTrendColor(getTextData().trend!.value)\">\n <mat-icon class=\"trend-icon\">{{ getTrendIcon(getTextData().trend!.value) }}</mat-icon>\n <span>\n {{ getTextData().trend!.value > 0 ? '+' : '' }}{{ getTextData().trend!.value }}%\n @if (getTextData().trend!.label) {\n <span class=\"trend-label\"> {{ getTextData().trend!.label }}</span>\n }\n </span>\n </div>\n }\n @if (getTextData().description) {\n <span class=\"kpi-description\">{{ getTextData().description }}</span>\n }\n <ng-content></ng-content>\n </div>\n }\n }\n</ng-template>\n", styles: ["@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}@keyframes glow-pulse{0%,to{box-shadow:0 0 #fff0}50%{box-shadow:0 0 24px 2px #ffffff0f}}:host{display:flex;flex-direction:column}.kpi-card{flex:1;box-sizing:border-box;font-family:DM Sans,system-ui,sans-serif;position:relative;display:flex;flex-direction:row;background:#fff;border-radius:12px;border:1px solid #e2e5ea;box-shadow:0 1px 3px #0000000f,0 1px 2px #0000000a;min-width:260px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}.kpi-card:hover:not(.is-loading){transform:translateY(-2px);box-shadow:0 6px 20px #0000001a,0 2px 6px #0000000f}.kpi-body{flex:1;display:flex;flex-direction:column;gap:.75rem;padding:1.25rem;min-width:0}.kpi-header{display:flex;align-items:flex-start;gap:.75rem}.kpi-icon-wrap{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#f4f5f7}.kpi-icon-wrap ::ng-deep mat-icon{font-size:20px;width:20px;height:20px;color:#1b2535}.kpi-title-section{display:flex;flex-direction:column;gap:.125rem;padding-top:.1rem}.kpi-label{font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#6b7585;line-height:1.4}.kpi-label a{color:#2563eb;text-decoration:none;transition:color .15s ease}.kpi-label a:hover{color:#1d4ed8;text-decoration:underline}.kpi-subtitle{font-size:.72rem;color:#868f9d;font-weight:400}.kpi-content{display:flex;flex-direction:column;gap:.5rem}.value-display{display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap}.kpi-value{font-size:2rem;font-weight:700;color:#1b2535;line-height:1.1;letter-spacing:-.02em}.value-unit{font-size:.9rem;color:#6b7585;font-weight:500}.value-separator{font-size:1.4rem;color:#e2e5ea;font-weight:600;line-height:1}.value-max{font-size:1.1rem;color:#6b7585;font-weight:600}.progress-section{display:flex;flex-direction:column;gap:.6rem}.progress-bar-track{width:100%;height:6px;background:#f4f5f7;border-radius:99px;overflow:hidden}.progress-bar-fill{height:100%;background:#1b2535;border-radius:99px;transition:width .5s cubic-bezier(.4,0,.2,1);min-width:4px}.pills-section{display:flex;flex-direction:column;gap:.6rem}.pills-container{display:flex;gap:.4rem;flex-wrap:wrap}.text-section{display:flex;flex-direction:column;gap:.45rem}.trend-chip{display:inline-flex;align-items:center;gap:.2rem;padding:.2rem .55rem .2rem .35rem;border-radius:99px;font-size:.72rem;font-weight:600;width:fit-content;line-height:1}.trend-chip .trend-icon{font-size:13px;width:13px;height:13px}.trend-chip .trend-label{font-weight:400;opacity:.8}.trend-chip.trend-up{background:#d1fae5;color:#065f46}.trend-chip.trend-up ::ng-deep mat-icon{color:#059669}.trend-chip.trend-down{background:#fee2e2;color:#991b1b}.trend-chip.trend-down ::ng-deep mat-icon{color:#dc2626}.trend-chip.trend-neutral{background:#f4f5f7;color:#6b7585}.trend-chip.trend-neutral ::ng-deep mat-icon{color:#6b7585}.kpi-description{font-size:.75rem;color:#6b7585;font-weight:400;line-height:1.5}.skeleton-block{border-radius:6px;background:linear-gradient(90deg,#f4f5f7 25%,#e8eaee,#f4f5f7 75%);background-size:800px 100%;animation:shimmer 1.4s infinite linear}.skeleton-label{height:10px;width:55%}.skeleton-value{height:32px;width:70%;margin-top:.25rem}.skeleton-sub{height:10px;width:40%}.kpi-card.minimal{border-color:transparent;box-shadow:none;background:transparent}.kpi-card.minimal:hover:not(.is-loading){transform:none;background:#f4f5f7;box-shadow:none}.kpi-card.minimal .kpi-icon-wrap{width:32px;height:32px;border-radius:0;background:transparent!important}.kpi-card.minimal .kpi-icon-wrap ::ng-deep mat-icon{font-size:28px;width:28px;height:28px;color:#6b7585}.kpi-card.minimal .kpi-label{font-size:.8rem;text-transform:none;letter-spacing:0;font-weight:500}.kpi-card.dark-card{background:#1b2535;border-color:transparent;box-shadow:0 4px 20px #00000040,0 1px 4px #0003;flex-direction:column}.kpi-card.dark-card:hover:not(.is-loading){transform:translateY(-2px);box-shadow:0 8px 30px #00000059,0 2px 8px #0003}.kpi-card.dark-card .kpi-body{padding:0;gap:0;flex-direction:column}.kpi-card.dark-card .kpi-filled-header{padding:1rem 1.25rem .875rem;background:#ffffff0f;border-bottom:1px solid rgba(255,255,255,.08)}.kpi-card.dark-card .kpi-content{padding:1rem 1.25rem 1.25rem;flex:1}.kpi-card.dark-card .kpi-icon-wrap{background:#ffffff1a!important;border-radius:10px;width:40px;height:40px}.kpi-card.dark-card .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px;color:#ffffffd9!important}.kpi-card.dark-card .kpi-label{color:#ffffff80}.kpi-card.dark-card .kpi-subtitle{color:#ffffff59}.kpi-card.dark-card .kpi-value{color:#fff}.kpi-card.dark-card .value-unit{color:#ffffff73}.kpi-card.dark-card .value-separator{color:#fff3}.kpi-card.dark-card .value-max{color:#ffffff73}.kpi-card.dark-card .kpi-description{color:#fff6}.kpi-card.dark-card .progress-bar-track{background:#ffffff1a}.kpi-card.dark-card .trend-chip.trend-up{background:#05966940;color:#6ee7b7}.kpi-card.dark-card .trend-chip.trend-down{background:#dc262640;color:#fca5a5}.kpi-card.dark-card .trend-chip.trend-neutral{background:#ffffff14;color:#ffffff80}.kpi-card.dark-card .trend-chip ::ng-deep mat-icon{color:inherit!important}.kpi-card.dark-card .skeleton-block{background:linear-gradient(90deg,#ffffff0f 25%,#ffffff1f,#ffffff0f 75%);background-size:800px 100%}.kpi-card.icon-badge .kpi-icon-wrap{width:48px;height:48px;border-radius:12px}.kpi-card.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{font-size:26px;width:26px;height:26px}.kpi-card.top-bar{border-top-width:3px}.kpi-card.top-bar .kpi-icon-wrap{width:44px;height:44px;border-radius:10px}.kpi-card.top-bar .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px}.kpi-card.filled-top{flex-direction:column}.kpi-card.filled-top .kpi-body{padding:0;gap:0;flex-direction:column}.kpi-card.filled-top .kpi-filled-header{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.25rem;border-radius:12px 12px 0 0}.kpi-card.filled-top .kpi-content{padding:1rem 1.25rem 1.25rem;flex:1}.kpi-card.filled-top .kpi-icon-wrap{width:40px;height:40px;border-radius:10px;background:#ffffff73;backdrop-filter:blur(4px)}.kpi-card.filled-top .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px}.kpi-card.filled-top .kpi-label{color:#1b2535bf}.kpi-card.filled-top .kpi-subtitle{color:#1b25358c}.kpi-card.purple.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5!important}.kpi-card.purple.dark-card .progress-bar-fill{background:#4f46e5}.kpi-card.purple.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#ede9fe,#d5ccfd)}.kpi-card.purple.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.top-bar{border-top-color:#4f46e5}.kpi-card.purple.top-bar .kpi-icon-wrap{background:#ede9fe}.kpi-card.purple.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.filled-top .kpi-filled-header{background:#ede9fe}.kpi-card.purple.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.accent-bar .kpi-icon-wrap{background:#ede9fe}.kpi-card.purple .progress-bar-fill{background:#4f46e5}.kpi-card.amber.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706!important}.kpi-card.amber.dark-card .progress-bar-fill{background:#d97706}.kpi-card.amber.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#fef3c7,#fdeda9)}.kpi-card.amber.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.top-bar{border-top-color:#d97706}.kpi-card.amber.top-bar .kpi-icon-wrap{background:#fef3c7}.kpi-card.amber.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.filled-top .kpi-filled-header{background:#fef3c7}.kpi-card.amber.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.accent-bar .kpi-icon-wrap{background:#fef3c7}.kpi-card.amber .progress-bar-fill{background:#d97706}.kpi-card.green.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#059669!important}.kpi-card.green.dark-card .progress-bar-fill{background:#059669}.kpi-card.green.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#d1fae5,#b5f7d5)}.kpi-card.green.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.top-bar{border-top-color:#059669}.kpi-card.green.top-bar .kpi-icon-wrap{background:#d1fae5}.kpi-card.green.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.filled-top .kpi-filled-header{background:#d1fae5}.kpi-card.green.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.accent-bar .kpi-icon-wrap{background:#d1fae5}.kpi-card.green .progress-bar-fill{background:#059669}.kpi-card.blue.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8!important}.kpi-card.blue.dark-card .progress-bar-fill{background:#1d4ed8}.kpi-card.blue.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#dbeafe,#bdd9fd)}.kpi-card.blue.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.top-bar{border-top-color:#1d4ed8}.kpi-card.blue.top-bar .kpi-icon-wrap{background:#dbeafe}.kpi-card.blue.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.filled-top .kpi-filled-header{background:#dbeafe}.kpi-card.blue.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.accent-bar .kpi-icon-wrap{background:#dbeafe}.kpi-card.blue .progress-bar-fill{background:#1d4ed8}.kpi-card.red.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626!important}.kpi-card.red.dark-card .progress-bar-fill{background:#dc2626}.kpi-card.red.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#fee2e2,#fdc4c4)}.kpi-card.red.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.top-bar{border-top-color:#dc2626}.kpi-card.red.top-bar .kpi-icon-wrap{background:#fee2e2}.kpi-card.red.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.filled-top .kpi-filled-header{background:#fee2e2}.kpi-card.red.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.accent-bar .kpi-icon-wrap{background:#fee2e2}.kpi-card.red .progress-bar-fill{background:#dc2626}.kpi-card.navy.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535!important}.kpi-card.navy.dark-card .progress-bar-fill{background:#1b2535}.kpi-card.navy.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#e8eaf0,#d5d9e4)}.kpi-card.navy.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.top-bar{border-top-color:#1b2535}.kpi-card.navy.top-bar .kpi-icon-wrap{background:#e8eaf0}.kpi-card.navy.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.filled-top .kpi-filled-header{background:#e8eaf0}.kpi-card.navy.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.accent-bar .kpi-icon-wrap{background:#e8eaf0}.kpi-card.navy .progress-bar-fill{background:#1b2535}@media(max-width:1280px){.kpi-card{min-width:220px}}@media(max-width:768px){.kpi-card{min-width:100%}}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ProgressBarComponent, selector: "ud-progress-bar", inputs: ["value", "height", "borderRadius", "backgroundColor"] }, { kind: "component", type: PillComponent, selector: "ud-pill", inputs: ["text", "type"] }] });
|
|
2853
2864
|
}
|
|
2854
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2865
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: KpiComponent, decorators: [{
|
|
2855
2866
|
type: Component,
|
|
2856
2867
|
args: [{ selector: 'ud-kpi', imports: [
|
|
2857
2868
|
AsyncPipe,
|
|
@@ -2862,7 +2873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2862
2873
|
NgTemplateOutlet,
|
|
2863
2874
|
ProgressBarComponent,
|
|
2864
2875
|
PillComponent,
|
|
2865
|
-
], template: "<div class=\"kpi-card\" [ngClass]=\"[iconColor, variant, loading ? 'is-loading' : '']\">\n\n <div class=\"kpi-body\">\n @if (loading) {\n <div class=\"skeleton-block skeleton-label\"></div>\n <div class=\"skeleton-block skeleton-value\"></div>\n <div class=\"skeleton-block skeleton-sub\"></div>\n } @else {\n\n <!-- filled-top / dark-card: header is the tinted strip -->\n @if (variant === KpiVariant.FILLED_TOP || variant === KpiVariant.DARK_CARD) {\n <div class=\"kpi-filled-header\">\n <div class=\"kpi-icon-wrap\">\n <mat-icon>{{ icon }}</mat-icon>\n </div>\n <div class=\"kpi-title-section\">\n <span class=\"kpi-label\">\n @if (titleRef) {\n <a [routerLink]=\"titleRef\">{{ title }}</a>\n } @else {\n {{ title }}\n }\n </span>\n @if (subtitle) {\n <span class=\"kpi-subtitle\">{{ subtitle }}</span>\n }\n </div>\n </div>\n <div class=\"kpi-content\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </div>\n } @else {\n <!-- Standard header (icon-badge, top-bar, minimal) -->\n <div class=\"kpi-header\">\n <div class=\"kpi-icon-wrap\">\n <mat-icon>{{ icon }}</mat-icon>\n </div>\n <div class=\"kpi-title-section\">\n <span class=\"kpi-label\">\n @if (titleRef) {\n <a [routerLink]=\"titleRef\">{{ title }}</a>\n } @else {\n {{ title }}\n }\n </span>\n @if (subtitle) {\n <span class=\"kpi-subtitle\">{{ subtitle }}</span>\n }\n </div>\n </div>\n <div class=\"kpi-content\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </div>\n }\n\n }\n </div>\n</div>\n\n<!-- Shared content template -->\n<ng-template #contentTpl>\n @switch (dataType) {\n @case (KpiDataType.PROGRESS_BAR) {\n <div class=\"progress-section\">\n @if (getProgressData().type === KpiProgressBarType.PERCENTAGE) {\n <div class=\"value-display\">\n <span class=\"kpi-value\">{{ getProgressData().data.value }}</span>\n <span class=\"value-unit\">%</span>\n </div>\n } @else if (getProgressData().type === KpiProgressBarType.DIVISION) {\n <div class=\"value-display\">\n <span class=\"kpi-value\">{{ getProgressData().data.value }}</span>\n <span class=\"value-separator\">/</span>\n <span class=\"value-max\">{{ getProgressData().data.max }}</span>\n </div>\n }\n <div class=\"progress-bar-track\">\n <div class=\"progress-bar-fill\" [style.width.%]=\"getProgressBarValue()\"></div>\n </div>\n <ud-progress-bar [value]=\"getProgressBarValue()\" style=\"display:none\"></ud-progress-bar>\n </div>\n }\n @case (KpiDataType.PILLS) {\n <div class=\"pills-section\">\n <div class=\"value-display\">\n <span class=\"kpi-value\">{{ getPillData().value }}</span>\n </div>\n <div class=\"pills-container\">\n @for (pill of getPillData().pills; track pill) {\n <ud-pill [text]=\"pill.value + ' ' + (pill.label | async | capitalize)\" [type]=\"pill.type\"></ud-pill>\n }\n </div>\n </div>\n }\n @case (KpiDataType.TEXT) {\n <div class=\"text-section\">\n <div class=\"value-display\">\n <span class=\"kpi-value\">{{ getTextData().value }}</span>\n @if (getTextData().unit) {\n <span class=\"value-unit\">{{ getTextData().unit }}</span>\n }\n </div>\n @if (getTextData().trend) {\n <div class=\"trend-chip\" [ngClass]=\"getTrendColor(getTextData().trend!.value)\">\n <mat-icon class=\"trend-icon\">{{ getTrendIcon(getTextData().trend!.value) }}</mat-icon>\n <span>\n {{ getTextData().trend!.value > 0 ? '+' : '' }}{{ getTextData().trend!.value }}%\n @if (getTextData().trend!.label) {\n <span class=\"trend-label\"> {{ getTextData().trend!.label }}</span>\n }\n </span>\n </div>\n }\n @if (getTextData().description) {\n <span class=\"kpi-description\">{{ getTextData().description }}</span>\n }\n <ng-content></ng-content>\n </div>\n }\n }\n</ng-template>\n", styles: ["@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}@keyframes glow-pulse{0%,to{box-shadow:0 0 #fff0}50%{box-shadow:0 0 24px 2px #ffffff0f}}:host{display:flex;flex-direction:column}.kpi-card{flex:1;box-sizing:border-box;font-family:DM Sans,system-ui,sans-serif;position:relative;display:flex;flex-direction:row;background:#fff;border-radius:12px;border:1px solid #e2e5ea;box-shadow:0 1px 3px #0000000f,0 1px 2px #0000000a;min-width:260px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}.kpi-card:hover:not(.is-loading){transform:translateY(-2px);box-shadow:0 6px 20px #0000001a,0 2px 6px #0000000f}.kpi-body{flex:1;display:flex;flex-direction:column;gap:.75rem;padding:1.25rem;min-width:0}.kpi-header{display:flex;align-items:flex-start;gap:.75rem}.kpi-icon-wrap{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#f4f5f7}.kpi-icon-wrap ::ng-deep mat-icon{font-size:20px;width:20px;height:20px;color:#1b2535}.kpi-title-section{display:flex;flex-direction:column;gap:.125rem;padding-top:.1rem}.kpi-label{font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#6b7585;line-height:1.4}.kpi-label a{color:#2563eb;text-decoration:none;transition:color .15s ease}.kpi-label a:hover{color:#1d4ed8;text-decoration:underline}.kpi-subtitle{font-size:.72rem;color:#868f9d;font-weight:400}.kpi-content{display:flex;flex-direction:column;gap:.5rem}.value-display{display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap}.kpi-value{font-size:2rem;font-weight:700;color:#1b2535;line-height:1.1;letter-spacing:-.02em}.value-unit{font-size:.9rem;color:#6b7585;font-weight:500}.value-separator{font-size:1.4rem;color:#e2e5ea;font-weight:600;line-height:1}.value-max{font-size:1.1rem;color:#6b7585;font-weight:600}.progress-section{display:flex;flex-direction:column;gap:.6rem}.progress-bar-track{width:100%;height:6px;background:#f4f5f7;border-radius:99px;overflow:hidden}.progress-bar-fill{height:100%;background:#1b2535;border-radius:99px;transition:width .5s cubic-bezier(.4,0,.2,1);min-width:4px}.pills-section{display:flex;flex-direction:column;gap:.6rem}.pills-container{display:flex;gap:.4rem;flex-wrap:wrap}.text-section{display:flex;flex-direction:column;gap:.45rem}.trend-chip{display:inline-flex;align-items:center;gap:.2rem;padding:.2rem .55rem .2rem .35rem;border-radius:99px;font-size:.72rem;font-weight:600;width:fit-content;line-height:1}.trend-chip .trend-icon{font-size:13px;width:13px;height:13px}.trend-chip .trend-label{font-weight:400;opacity:.8}.trend-chip.trend-up{background:#d1fae5;color:#065f46}.trend-chip.trend-up ::ng-deep mat-icon{color:#059669}.trend-chip.trend-down{background:#fee2e2;color:#991b1b}.trend-chip.trend-down ::ng-deep mat-icon{color:#dc2626}.trend-chip.trend-neutral{background:#f4f5f7;color:#6b7585}.trend-chip.trend-neutral ::ng-deep mat-icon{color:#6b7585}.kpi-description{font-size:.75rem;color:#6b7585;font-weight:400;line-height:1.5}.skeleton-block{border-radius:6px;background:linear-gradient(90deg,#f4f5f7 25%,#e8eaee,#f4f5f7 75%);background-size:800px 100%;animation:shimmer 1.4s infinite linear}.skeleton-label{height:10px;width:55%}.skeleton-value{height:32px;width:70%;margin-top:.25rem}.skeleton-sub{height:10px;width:40%}.kpi-card.minimal{border-color:transparent;box-shadow:none;background:transparent}.kpi-card.minimal:hover:not(.is-loading){transform:none;background:#f4f5f7;box-shadow:none}.kpi-card.minimal .kpi-icon-wrap{width:32px;height:32px;border-radius:0;background:transparent!important}.kpi-card.minimal .kpi-icon-wrap ::ng-deep mat-icon{font-size:28px;width:28px;height:28px;color:#6b7585}.kpi-card.minimal .kpi-label{font-size:.8rem;text-transform:none;letter-spacing:0;font-weight:500}.kpi-card.dark-card{background:#1b2535;border-color:transparent;box-shadow:0 4px 20px #00000040,0 1px 4px #0003;flex-direction:column}.kpi-card.dark-card:hover:not(.is-loading){transform:translateY(-2px);box-shadow:0 8px 30px #00000059,0 2px 8px #0003}.kpi-card.dark-card .kpi-body{padding:0;gap:0;flex-direction:column}.kpi-card.dark-card .kpi-filled-header{padding:1rem 1.25rem .875rem;background:#ffffff0f;border-bottom:1px solid rgba(255,255,255,.08)}.kpi-card.dark-card .kpi-content{padding:1rem 1.25rem 1.25rem;flex:1}.kpi-card.dark-card .kpi-icon-wrap{background:#ffffff1a!important;border-radius:10px;width:40px;height:40px}.kpi-card.dark-card .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px;color:#ffffffd9!important}.kpi-card.dark-card .kpi-label{color:#ffffff80}.kpi-card.dark-card .kpi-subtitle{color:#ffffff59}.kpi-card.dark-card .kpi-value{color:#fff}.kpi-card.dark-card .value-unit{color:#ffffff73}.kpi-card.dark-card .value-separator{color:#fff3}.kpi-card.dark-card .value-max{color:#ffffff73}.kpi-card.dark-card .kpi-description{color:#fff6}.kpi-card.dark-card .progress-bar-track{background:#ffffff1a}.kpi-card.dark-card .trend-chip.trend-up{background:#05966940;color:#6ee7b7}.kpi-card.dark-card .trend-chip.trend-down{background:#dc262640;color:#fca5a5}.kpi-card.dark-card .trend-chip.trend-neutral{background:#ffffff14;color:#ffffff80}.kpi-card.dark-card .trend-chip ::ng-deep mat-icon{color:inherit!important}.kpi-card.dark-card .skeleton-block{background:linear-gradient(90deg,#ffffff0f 25%,#ffffff1f,#ffffff0f 75%);background-size:800px 100%}.kpi-card.icon-badge .kpi-icon-wrap{width:48px;height:48px;border-radius:12px}.kpi-card.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{font-size:26px;width:26px;height:26px}.kpi-card.top-bar{border-top-width:3px}.kpi-card.top-bar .kpi-icon-wrap{width:44px;height:44px;border-radius:10px}.kpi-card.top-bar .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px}.kpi-card.filled-top{flex-direction:column}.kpi-card.filled-top .kpi-body{padding:0;gap:0;flex-direction:column}.kpi-card.filled-top .kpi-filled-header{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.25rem;border-radius:12px 12px 0 0}.kpi-card.filled-top .kpi-content{padding:1rem 1.25rem 1.25rem;flex:1}.kpi-card.filled-top .kpi-icon-wrap{width:40px;height:40px;border-radius:10px;background:#ffffff73;backdrop-filter:blur(4px)}.kpi-card.filled-top .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px}.kpi-card.filled-top .kpi-label{color:#1b2535bf}.kpi-card.filled-top .kpi-subtitle{color:#1b25358c}.kpi-card.purple.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5!important}.kpi-card.purple.dark-card .progress-bar-fill{background:#4f46e5}.kpi-card.purple.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#ede9fe,#d5ccfd)}.kpi-card.purple.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.top-bar{border-top-color:#4f46e5}.kpi-card.purple.top-bar .kpi-icon-wrap{background:#ede9fe}.kpi-card.purple.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.filled-top .kpi-filled-header{background:#ede9fe}.kpi-card.purple.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.accent-bar .kpi-icon-wrap{background:#ede9fe}.kpi-card.purple .progress-bar-fill{background:#4f46e5}.kpi-card.amber.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706!important}.kpi-card.amber.dark-card .progress-bar-fill{background:#d97706}.kpi-card.amber.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#fef3c7,#fdeda9)}.kpi-card.amber.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.top-bar{border-top-color:#d97706}.kpi-card.amber.top-bar .kpi-icon-wrap{background:#fef3c7}.kpi-card.amber.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.filled-top .kpi-filled-header{background:#fef3c7}.kpi-card.amber.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.accent-bar .kpi-icon-wrap{background:#fef3c7}.kpi-card.amber .progress-bar-fill{background:#d97706}.kpi-card.green.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#059669!important}.kpi-card.green.dark-card .progress-bar-fill{background:#059669}.kpi-card.green.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#d1fae5,#b5f7d5)}.kpi-card.green.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.top-bar{border-top-color:#059669}.kpi-card.green.top-bar .kpi-icon-wrap{background:#d1fae5}.kpi-card.green.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.filled-top .kpi-filled-header{background:#d1fae5}.kpi-card.green.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.accent-bar .kpi-icon-wrap{background:#d1fae5}.kpi-card.green .progress-bar-fill{background:#059669}.kpi-card.blue.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8!important}.kpi-card.blue.dark-card .progress-bar-fill{background:#1d4ed8}.kpi-card.blue.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#dbeafe,#bdd9fd)}.kpi-card.blue.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.top-bar{border-top-color:#1d4ed8}.kpi-card.blue.top-bar .kpi-icon-wrap{background:#dbeafe}.kpi-card.blue.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.filled-top .kpi-filled-header{background:#dbeafe}.kpi-card.blue.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.accent-bar .kpi-icon-wrap{background:#dbeafe}.kpi-card.blue .progress-bar-fill{background:#1d4ed8}.kpi-card.red.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626!important}.kpi-card.red.dark-card .progress-bar-fill{background:#dc2626}.kpi-card.red.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#fee2e2,#fdc4c4)}.kpi-card.red.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.top-bar{border-top-color:#dc2626}.kpi-card.red.top-bar .kpi-icon-wrap{background:#fee2e2}.kpi-card.red.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.filled-top .kpi-filled-header{background:#fee2e2}.kpi-card.red.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.accent-bar .kpi-icon-wrap{background:#fee2e2}.kpi-card.red .progress-bar-fill{background:#dc2626}.kpi-card.navy.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535!important}.kpi-card.navy.dark-card .progress-bar-fill{background:#1b2535}.kpi-card.navy.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#e8eaf0,#d5d9e4)}.kpi-card.navy.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.top-bar{border-top-color:#1b2535}.kpi-card.navy.top-bar .kpi-icon-wrap{background:#e8eaf0}.kpi-card.navy.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.filled-top .kpi-filled-header{background:#e8eaf0}.kpi-card.navy.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.accent-bar .kpi-icon-wrap{background:#e8eaf0}.kpi-card.navy .progress-bar-fill{background:#1b2535}@media (max-width: 1280px){.kpi-card{min-width:220px}}@media (max-width: 768px){.kpi-card{min-width:100%}}\n"] }]
|
|
2876
|
+
], template: "<div class=\"kpi-card\" [ngClass]=\"[iconColor, variant, loading ? 'is-loading' : '']\">\n\n <div class=\"kpi-body\">\n @if (loading) {\n <div class=\"skeleton-block skeleton-label\"></div>\n <div class=\"skeleton-block skeleton-value\"></div>\n <div class=\"skeleton-block skeleton-sub\"></div>\n } @else {\n\n <!-- filled-top / dark-card: header is the tinted strip -->\n @if (variant === KpiVariant.FILLED_TOP || variant === KpiVariant.DARK_CARD) {\n <div class=\"kpi-filled-header\">\n <div class=\"kpi-icon-wrap\">\n <mat-icon>{{ icon }}</mat-icon>\n </div>\n <div class=\"kpi-title-section\">\n <span class=\"kpi-label\">\n @if (titleRef) {\n <a [routerLink]=\"titleRef\">{{ title }}</a>\n } @else {\n {{ title }}\n }\n </span>\n @if (subtitle) {\n <span class=\"kpi-subtitle\">{{ subtitle }}</span>\n }\n </div>\n </div>\n <div class=\"kpi-content\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </div>\n } @else {\n <!-- Standard header (icon-badge, top-bar, minimal) -->\n <div class=\"kpi-header\">\n <div class=\"kpi-icon-wrap\">\n <mat-icon>{{ icon }}</mat-icon>\n </div>\n <div class=\"kpi-title-section\">\n <span class=\"kpi-label\">\n @if (titleRef) {\n <a [routerLink]=\"titleRef\">{{ title }}</a>\n } @else {\n {{ title }}\n }\n </span>\n @if (subtitle) {\n <span class=\"kpi-subtitle\">{{ subtitle }}</span>\n }\n </div>\n </div>\n <div class=\"kpi-content\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n </div>\n }\n\n }\n </div>\n</div>\n\n<!-- Shared content template -->\n<ng-template #contentTpl>\n @switch (dataType) {\n @case (KpiDataType.PROGRESS_BAR) {\n <div class=\"progress-section\">\n @if (getProgressData().type === KpiProgressBarType.PERCENTAGE) {\n <div class=\"value-display\">\n <span class=\"kpi-value\">{{ getProgressData().data.value }}</span>\n <span class=\"value-unit\">%</span>\n </div>\n } @else if (getProgressData().type === KpiProgressBarType.DIVISION) {\n <div class=\"value-display\">\n <span class=\"kpi-value\">{{ getProgressData().data.value }}</span>\n <span class=\"value-separator\">/</span>\n <span class=\"value-max\">{{ getProgressData().data.max }}</span>\n </div>\n }\n <div class=\"progress-bar-track\">\n <div class=\"progress-bar-fill\" [style.width.%]=\"getProgressBarValue()\"></div>\n </div>\n <ud-progress-bar [value]=\"getProgressBarValue()\" style=\"display:none\"></ud-progress-bar>\n </div>\n }\n @case (KpiDataType.PILLS) {\n <div class=\"pills-section\">\n <div class=\"value-display\">\n <span class=\"kpi-value\">{{ getPillData().value }}</span>\n </div>\n <div class=\"pills-container\">\n @for (pill of getPillData().pills; track pill) {\n <ud-pill [text]=\"pill.value + ' ' + (pill.label | async | capitalize)\" [type]=\"pill.type\"></ud-pill>\n }\n </div>\n </div>\n }\n @case (KpiDataType.TEXT) {\n <div class=\"text-section\">\n <div class=\"value-display\">\n <span class=\"kpi-value\">{{ getTextData().value }}</span>\n @if (getTextData().unit) {\n <span class=\"value-unit\">{{ getTextData().unit }}</span>\n }\n </div>\n @if (getTextData().trend) {\n <div class=\"trend-chip\" [ngClass]=\"getTrendColor(getTextData().trend!.value)\">\n <mat-icon class=\"trend-icon\">{{ getTrendIcon(getTextData().trend!.value) }}</mat-icon>\n <span>\n {{ getTextData().trend!.value > 0 ? '+' : '' }}{{ getTextData().trend!.value }}%\n @if (getTextData().trend!.label) {\n <span class=\"trend-label\"> {{ getTextData().trend!.label }}</span>\n }\n </span>\n </div>\n }\n @if (getTextData().description) {\n <span class=\"kpi-description\">{{ getTextData().description }}</span>\n }\n <ng-content></ng-content>\n </div>\n }\n }\n</ng-template>\n", styles: ["@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}@keyframes glow-pulse{0%,to{box-shadow:0 0 #fff0}50%{box-shadow:0 0 24px 2px #ffffff0f}}:host{display:flex;flex-direction:column}.kpi-card{flex:1;box-sizing:border-box;font-family:DM Sans,system-ui,sans-serif;position:relative;display:flex;flex-direction:row;background:#fff;border-radius:12px;border:1px solid #e2e5ea;box-shadow:0 1px 3px #0000000f,0 1px 2px #0000000a;min-width:260px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}.kpi-card:hover:not(.is-loading){transform:translateY(-2px);box-shadow:0 6px 20px #0000001a,0 2px 6px #0000000f}.kpi-body{flex:1;display:flex;flex-direction:column;gap:.75rem;padding:1.25rem;min-width:0}.kpi-header{display:flex;align-items:flex-start;gap:.75rem}.kpi-icon-wrap{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#f4f5f7}.kpi-icon-wrap ::ng-deep mat-icon{font-size:20px;width:20px;height:20px;color:#1b2535}.kpi-title-section{display:flex;flex-direction:column;gap:.125rem;padding-top:.1rem}.kpi-label{font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#6b7585;line-height:1.4}.kpi-label a{color:#2563eb;text-decoration:none;transition:color .15s ease}.kpi-label a:hover{color:#1d4ed8;text-decoration:underline}.kpi-subtitle{font-size:.72rem;color:#868f9d;font-weight:400}.kpi-content{display:flex;flex-direction:column;gap:.5rem}.value-display{display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap}.kpi-value{font-size:2rem;font-weight:700;color:#1b2535;line-height:1.1;letter-spacing:-.02em}.value-unit{font-size:.9rem;color:#6b7585;font-weight:500}.value-separator{font-size:1.4rem;color:#e2e5ea;font-weight:600;line-height:1}.value-max{font-size:1.1rem;color:#6b7585;font-weight:600}.progress-section{display:flex;flex-direction:column;gap:.6rem}.progress-bar-track{width:100%;height:6px;background:#f4f5f7;border-radius:99px;overflow:hidden}.progress-bar-fill{height:100%;background:#1b2535;border-radius:99px;transition:width .5s cubic-bezier(.4,0,.2,1);min-width:4px}.pills-section{display:flex;flex-direction:column;gap:.6rem}.pills-container{display:flex;gap:.4rem;flex-wrap:wrap}.text-section{display:flex;flex-direction:column;gap:.45rem}.trend-chip{display:inline-flex;align-items:center;gap:.2rem;padding:.2rem .55rem .2rem .35rem;border-radius:99px;font-size:.72rem;font-weight:600;width:fit-content;line-height:1}.trend-chip .trend-icon{font-size:13px;width:13px;height:13px}.trend-chip .trend-label{font-weight:400;opacity:.8}.trend-chip.trend-up{background:#d1fae5;color:#065f46}.trend-chip.trend-up ::ng-deep mat-icon{color:#059669}.trend-chip.trend-down{background:#fee2e2;color:#991b1b}.trend-chip.trend-down ::ng-deep mat-icon{color:#dc2626}.trend-chip.trend-neutral{background:#f4f5f7;color:#6b7585}.trend-chip.trend-neutral ::ng-deep mat-icon{color:#6b7585}.kpi-description{font-size:.75rem;color:#6b7585;font-weight:400;line-height:1.5}.skeleton-block{border-radius:6px;background:linear-gradient(90deg,#f4f5f7 25%,#e8eaee,#f4f5f7 75%);background-size:800px 100%;animation:shimmer 1.4s infinite linear}.skeleton-label{height:10px;width:55%}.skeleton-value{height:32px;width:70%;margin-top:.25rem}.skeleton-sub{height:10px;width:40%}.kpi-card.minimal{border-color:transparent;box-shadow:none;background:transparent}.kpi-card.minimal:hover:not(.is-loading){transform:none;background:#f4f5f7;box-shadow:none}.kpi-card.minimal .kpi-icon-wrap{width:32px;height:32px;border-radius:0;background:transparent!important}.kpi-card.minimal .kpi-icon-wrap ::ng-deep mat-icon{font-size:28px;width:28px;height:28px;color:#6b7585}.kpi-card.minimal .kpi-label{font-size:.8rem;text-transform:none;letter-spacing:0;font-weight:500}.kpi-card.dark-card{background:#1b2535;border-color:transparent;box-shadow:0 4px 20px #00000040,0 1px 4px #0003;flex-direction:column}.kpi-card.dark-card:hover:not(.is-loading){transform:translateY(-2px);box-shadow:0 8px 30px #00000059,0 2px 8px #0003}.kpi-card.dark-card .kpi-body{padding:0;gap:0;flex-direction:column}.kpi-card.dark-card .kpi-filled-header{padding:1rem 1.25rem .875rem;background:#ffffff0f;border-bottom:1px solid rgba(255,255,255,.08)}.kpi-card.dark-card .kpi-content{padding:1rem 1.25rem 1.25rem;flex:1}.kpi-card.dark-card .kpi-icon-wrap{background:#ffffff1a!important;border-radius:10px;width:40px;height:40px}.kpi-card.dark-card .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px;color:#ffffffd9!important}.kpi-card.dark-card .kpi-label{color:#ffffff80}.kpi-card.dark-card .kpi-subtitle{color:#ffffff59}.kpi-card.dark-card .kpi-value{color:#fff}.kpi-card.dark-card .value-unit{color:#ffffff73}.kpi-card.dark-card .value-separator{color:#fff3}.kpi-card.dark-card .value-max{color:#ffffff73}.kpi-card.dark-card .kpi-description{color:#fff6}.kpi-card.dark-card .progress-bar-track{background:#ffffff1a}.kpi-card.dark-card .trend-chip.trend-up{background:#05966940;color:#6ee7b7}.kpi-card.dark-card .trend-chip.trend-down{background:#dc262640;color:#fca5a5}.kpi-card.dark-card .trend-chip.trend-neutral{background:#ffffff14;color:#ffffff80}.kpi-card.dark-card .trend-chip ::ng-deep mat-icon{color:inherit!important}.kpi-card.dark-card .skeleton-block{background:linear-gradient(90deg,#ffffff0f 25%,#ffffff1f,#ffffff0f 75%);background-size:800px 100%}.kpi-card.icon-badge .kpi-icon-wrap{width:48px;height:48px;border-radius:12px}.kpi-card.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{font-size:26px;width:26px;height:26px}.kpi-card.top-bar{border-top-width:3px}.kpi-card.top-bar .kpi-icon-wrap{width:44px;height:44px;border-radius:10px}.kpi-card.top-bar .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px}.kpi-card.filled-top{flex-direction:column}.kpi-card.filled-top .kpi-body{padding:0;gap:0;flex-direction:column}.kpi-card.filled-top .kpi-filled-header{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.25rem;border-radius:12px 12px 0 0}.kpi-card.filled-top .kpi-content{padding:1rem 1.25rem 1.25rem;flex:1}.kpi-card.filled-top .kpi-icon-wrap{width:40px;height:40px;border-radius:10px;background:#ffffff73;backdrop-filter:blur(4px)}.kpi-card.filled-top .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px}.kpi-card.filled-top .kpi-label{color:#1b2535bf}.kpi-card.filled-top .kpi-subtitle{color:#1b25358c}.kpi-card.purple.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5!important}.kpi-card.purple.dark-card .progress-bar-fill{background:#4f46e5}.kpi-card.purple.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#ede9fe,#d5ccfd)}.kpi-card.purple.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.top-bar{border-top-color:#4f46e5}.kpi-card.purple.top-bar .kpi-icon-wrap{background:#ede9fe}.kpi-card.purple.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.filled-top .kpi-filled-header{background:#ede9fe}.kpi-card.purple.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.accent-bar .kpi-icon-wrap{background:#ede9fe}.kpi-card.purple .progress-bar-fill{background:#4f46e5}.kpi-card.amber.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706!important}.kpi-card.amber.dark-card .progress-bar-fill{background:#d97706}.kpi-card.amber.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#fef3c7,#fdeda9)}.kpi-card.amber.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.top-bar{border-top-color:#d97706}.kpi-card.amber.top-bar .kpi-icon-wrap{background:#fef3c7}.kpi-card.amber.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.filled-top .kpi-filled-header{background:#fef3c7}.kpi-card.amber.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.accent-bar .kpi-icon-wrap{background:#fef3c7}.kpi-card.amber .progress-bar-fill{background:#d97706}.kpi-card.green.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#059669!important}.kpi-card.green.dark-card .progress-bar-fill{background:#059669}.kpi-card.green.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#d1fae5,#b5f7d5)}.kpi-card.green.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.top-bar{border-top-color:#059669}.kpi-card.green.top-bar .kpi-icon-wrap{background:#d1fae5}.kpi-card.green.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.filled-top .kpi-filled-header{background:#d1fae5}.kpi-card.green.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.accent-bar .kpi-icon-wrap{background:#d1fae5}.kpi-card.green .progress-bar-fill{background:#059669}.kpi-card.blue.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8!important}.kpi-card.blue.dark-card .progress-bar-fill{background:#1d4ed8}.kpi-card.blue.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#dbeafe,#bdd9fd)}.kpi-card.blue.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.top-bar{border-top-color:#1d4ed8}.kpi-card.blue.top-bar .kpi-icon-wrap{background:#dbeafe}.kpi-card.blue.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.filled-top .kpi-filled-header{background:#dbeafe}.kpi-card.blue.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.accent-bar .kpi-icon-wrap{background:#dbeafe}.kpi-card.blue .progress-bar-fill{background:#1d4ed8}.kpi-card.red.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626!important}.kpi-card.red.dark-card .progress-bar-fill{background:#dc2626}.kpi-card.red.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#fee2e2,#fdc4c4)}.kpi-card.red.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.top-bar{border-top-color:#dc2626}.kpi-card.red.top-bar .kpi-icon-wrap{background:#fee2e2}.kpi-card.red.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.filled-top .kpi-filled-header{background:#fee2e2}.kpi-card.red.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.accent-bar .kpi-icon-wrap{background:#fee2e2}.kpi-card.red .progress-bar-fill{background:#dc2626}.kpi-card.navy.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535!important}.kpi-card.navy.dark-card .progress-bar-fill{background:#1b2535}.kpi-card.navy.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#e8eaf0,#d5d9e4)}.kpi-card.navy.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.top-bar{border-top-color:#1b2535}.kpi-card.navy.top-bar .kpi-icon-wrap{background:#e8eaf0}.kpi-card.navy.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.filled-top .kpi-filled-header{background:#e8eaf0}.kpi-card.navy.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.accent-bar .kpi-icon-wrap{background:#e8eaf0}.kpi-card.navy .progress-bar-fill{background:#1b2535}@media(max-width:1280px){.kpi-card{min-width:220px}}@media(max-width:768px){.kpi-card{min-width:100%}}\n"] }]
|
|
2866
2877
|
}], propDecorators: { title: [{
|
|
2867
2878
|
type: Input
|
|
2868
2879
|
}], subtitle: [{
|
|
@@ -2891,10 +2902,10 @@ class SummaryViewComponent {
|
|
|
2891
2902
|
layout = 'text-left';
|
|
2892
2903
|
skeletonTitleHeight = '20px';
|
|
2893
2904
|
skeletonBodyHeight = '150px';
|
|
2894
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2895
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2905
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SummaryViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2906
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: SummaryViewComponent, isStandalone: true, selector: "ud-summary-view", inputs: { title: "title", actions: "actions", summaryFields: "summaryFields", loading: "loading", layout: "layout", skeletonTitleHeight: "skeletonTitleHeight", skeletonBodyHeight: "skeletonBodyHeight" }, ngImport: i0, template: "<div class=\"summary-view-container\">\n <div class=\"header\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"loading col-6\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonTitleHeight }\" />\n } @else {\n <h5 class=\"header-title\">{{ title }}</h5>\n }\n <div class=\"header-actions\">\n @for (action of actions; track action.label) {\n @if (action.isAuthorized) {\n @if (action.path) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n [routerLink]=\"action.path\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n } @else if (action.onClick) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n (click)=\"action.onClick!()\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n }\n }\n }\n <ng-content select=\"[header-actions]\" />\n </div>\n </div>\n <div\n class=\"content\"\n [ngClass]=\"{\n reverse: layout === 'text-right',\n 'flex-column': layout === 'text-top',\n }\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"col\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonBodyHeight }\" />\n } @else {\n @if (layout !== 'text-none') {\n <div [ngClass]=\"layout === 'text-top' || layout === 'text-all' ? 'col-12' : 'col-6'\">\n <div class=\"summary\" [ngClass]=\"{ 'summary-row-wrap': layout === 'text-top' || layout === 'text-all' }\">\n @for (summaryField of summaryFields; track $index) {\n <div class=\"summary-field\">\n @if (summaryField.label) {\n <span>{{ summaryField.label | capitalize }}</span>\n }\n <div class=\"summary-row\">\n <mat-icon matPrefix fontSet=\"material-icons-outlined\">\n {{ summaryField.icon }}\n </mat-icon>\n <mat-label>{{ summaryField.value }}</mat-label>\n </div>\n </div>\n }\n </div>\n </div>\n }\n @if (layout !== 'text-all') {\n <div\n class=\"content-body\"\n [ngClass]=\"{\n 'col-12': layout === 'text-none' || layout === 'text-top',\n 'col-6': layout !== 'text-none' && layout !== 'text-top',\n }\">\n <ng-content></ng-content>\n </div>\n }\n }\n </div>\n</div>\n", styles: [".summary-view-container{justify-self:center;width:100%;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #1b253512,0 4px 16px #1b253514;font-family:DM Sans,system-ui,sans-serif}.header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#1b2535;min-height:52px}.header .header-title{margin:0;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#fff;letter-spacing:.02em}.header .header-actions{display:flex;align-items:center;gap:8px}.header .header-actions ::ng-deep .ud-btn{border-color:#ffffff4d!important;color:#ffffffd9!important}.header .header-actions ::ng-deep .ud-btn:hover{background:#ffffff1a!important;border-color:#ffffff80!important;color:#fff!important}.header .header-actions ::ng-deep .ud-btn .mat-icon{color:inherit!important}.header .loading{padding:.5rem;border-radius:4px}.header .loading ::ng-deep .skeleton-loader{background:#ffffff1f!important;background-image:linear-gradient(90deg,#ffffff1f,#ffffff38,#ffffff1f 80px)!important}.content{display:flex;flex-wrap:wrap;background:#fff}.content:not(.flex-column):has(.content-body>*)>.col-6:first-child{border-right:1px solid #e8eaee}.content.reverse:has(.content-body>*)>.col-6:last-child{border-right:1px solid #e8eaee;border-left:none}.summary{display:flex;flex-direction:column;gap:0;padding:20px 24px}.summary.summary-row-wrap{flex-direction:row;flex-wrap:wrap;gap:.25rem;padding:16px 8px}.summary-field{display:flex;flex-direction:column;gap:3px;padding:10px 16px;border-radius:8px;transition:background .15s ease}.summary-field:hover{background:#f4f5f7}.summary-row-wrap .summary-field{padding:12px 16px;min-width:140px;border:1px solid #e8eaee}.summary-field span{font-family:DM Sans,system-ui,sans-serif;font-size:.65rem;font-weight:700;color:#6b7585;text-transform:uppercase;letter-spacing:.08em}.summary-row{display:flex;align-items:center;gap:6px}.summary-row mat-icon{height:16px;width:16px;min-width:16px;font-size:16px;color:#6b7585;flex-shrink:0}mat-label{font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#1b2535;line-height:1.3}.content-body:has(>*){background:#f4f5f7;padding:20px 24px}.flex-column>.content-body:has(>*){border-top:1px solid #e8eaee}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$2.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: UdButtonComponent, selector: "ud-button", inputs: ["variant", "color", "size", "type", "icon", "iconPosition", "iconFontSet", "loading", "disabled", "fullWidth"] }] });
|
|
2896
2907
|
}
|
|
2897
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2908
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SummaryViewComponent, decorators: [{
|
|
2898
2909
|
type: Component,
|
|
2899
2910
|
args: [{ selector: 'ud-summary-view', standalone: true, imports: [
|
|
2900
2911
|
CommonModule,
|
|
@@ -2929,10 +2940,10 @@ class UdStepContentDirective {
|
|
|
2929
2940
|
constructor(templateRef) {
|
|
2930
2941
|
this.templateRef = templateRef;
|
|
2931
2942
|
}
|
|
2932
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2933
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
2943
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: UdStepContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2944
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: UdStepContentDirective, isStandalone: true, selector: "[udStepContent]", ngImport: i0 });
|
|
2934
2945
|
}
|
|
2935
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2946
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: UdStepContentDirective, decorators: [{
|
|
2936
2947
|
type: Directive,
|
|
2937
2948
|
args: [{
|
|
2938
2949
|
selector: '[udStepContent]',
|
|
@@ -2974,10 +2985,10 @@ class UdStepperComponent {
|
|
|
2974
2985
|
reset() {
|
|
2975
2986
|
this._stepper.reset();
|
|
2976
2987
|
}
|
|
2977
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2978
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2988
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: UdStepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2989
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: UdStepperComponent, isStandalone: true, selector: "ud-stepper", inputs: { steps: "steps", linear: "linear", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange", stepChange: "stepChange" }, queries: [{ propertyName: "_contentTemplates", predicate: UdStepContentDirective }], viewQueries: [{ propertyName: "_stepper", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<mat-stepper\n class=\"ud-stepper\"\n [linear]=\"linear\"\n [selectedIndex]=\"selectedIndex\"\n (selectionChange)=\"onSelectionChange($event)\"\n #stepper>\n @for (step of steps; track step.label; let i = $index) {\n <mat-step [label]=\"step.label\" [completed]=\"step.completed ?? false\">\n <ng-template matStepContent>\n @if (contentList[i]) {\n <ng-container *ngTemplateOutlet=\"contentList[i].templateRef\" />\n }\n </ng-template>\n </mat-step>\n }\n</mat-stepper>\n", styles: [":host{display:block}::ng-deep .ud-stepper{background:transparent;font-family:DM Sans,system-ui,sans-serif}::ng-deep .ud-stepper .mat-step-header{border-radius:var(--eu-radius-sm, 6px);transition:background .18s ease;padding:.75rem 1rem}::ng-deep .ud-stepper .mat-step-header:hover{background:var(--eu-navy-dim, rgba(27, 37, 53, .08))!important}::ng-deep .ud-stepper .mat-step-header:focus-visible{outline:2px solid var(--eu-navy, #1b2535);outline-offset:2px}::ng-deep .ud-stepper .mat-step-header .mat-step-header-ripple,::ng-deep .ud-stepper .mat-step-header .mat-ripple{border-radius:var(--eu-radius-sm, 6px)}::ng-deep .ud-stepper .mat-step-icon{background:var(--eu-bg, #f4f5f7);color:var(--eu-muted, #6b7585);box-shadow:inset 0 0 0 2px var(--eu-border-mid, #c9cdd6);transition:background .18s ease,color .18s ease,box-shadow .18s ease;font-family:DM Sans,system-ui,sans-serif;font-weight:600}::ng-deep .ud-stepper .mat-step-icon.mat-step-icon-selected{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:none!important}::ng-deep .ud-stepper .mat-step-icon.mat-step-icon-state-done,::ng-deep .ud-stepper .mat-step-icon.mat-step-icon-state-edit{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:none!important}::ng-deep .ud-stepper .mat-step-label{color:var(--eu-muted, #6b7585);font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;font-weight:400;transition:color .18s ease,font-weight .18s ease}::ng-deep .ud-stepper .mat-step-label.mat-step-label-active{color:var(--eu-text, #1b2535)}::ng-deep .ud-stepper .mat-step-label.mat-step-label-selected{color:var(--eu-navy, #1b2535);font-weight:600}::ng-deep .ud-stepper .mat-stepper-horizontal-line{border-top-color:var(--eu-border, #e2e5ea)!important;margin:0!important}::ng-deep .ud-stepper .mat-stepper-vertical-line:before{border-left-color:var(--eu-border, #e2e5ea)!important}::ng-deep .ud-stepper .mat-horizontal-content-container{padding:1.5rem 2rem 2rem}::ng-deep .ud-stepper .mat-vertical-content-container{margin-left:36px;border-left:2px solid var(--eu-border, #e2e5ea);padding-left:1.25rem}::ng-deep .ud-stepper .mat-vertical-content{padding:1rem 0 1.5rem}::ng-deep .ud-stepper .mat-horizontal-stepper-content:not(.mat-horizontal-stepper-content-inactive){animation:ud-stepper-fade-in .2s ease}@keyframes ud-stepper-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i1$6.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "component", type: i1$6.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i1$6.MatStepContent, selector: "ng-template[matStepContent]" }, { kind: "ngmodule", type: MatIconModule }] });
|
|
2979
2990
|
}
|
|
2980
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2991
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: UdStepperComponent, decorators: [{
|
|
2981
2992
|
type: Component,
|
|
2982
2993
|
args: [{ selector: 'ud-stepper', standalone: true, imports: [NgTemplateOutlet, MatStepperModule, MatIconModule], template: "<mat-stepper\n class=\"ud-stepper\"\n [linear]=\"linear\"\n [selectedIndex]=\"selectedIndex\"\n (selectionChange)=\"onSelectionChange($event)\"\n #stepper>\n @for (step of steps; track step.label; let i = $index) {\n <mat-step [label]=\"step.label\" [completed]=\"step.completed ?? false\">\n <ng-template matStepContent>\n @if (contentList[i]) {\n <ng-container *ngTemplateOutlet=\"contentList[i].templateRef\" />\n }\n </ng-template>\n </mat-step>\n }\n</mat-stepper>\n", styles: [":host{display:block}::ng-deep .ud-stepper{background:transparent;font-family:DM Sans,system-ui,sans-serif}::ng-deep .ud-stepper .mat-step-header{border-radius:var(--eu-radius-sm, 6px);transition:background .18s ease;padding:.75rem 1rem}::ng-deep .ud-stepper .mat-step-header:hover{background:var(--eu-navy-dim, rgba(27, 37, 53, .08))!important}::ng-deep .ud-stepper .mat-step-header:focus-visible{outline:2px solid var(--eu-navy, #1b2535);outline-offset:2px}::ng-deep .ud-stepper .mat-step-header .mat-step-header-ripple,::ng-deep .ud-stepper .mat-step-header .mat-ripple{border-radius:var(--eu-radius-sm, 6px)}::ng-deep .ud-stepper .mat-step-icon{background:var(--eu-bg, #f4f5f7);color:var(--eu-muted, #6b7585);box-shadow:inset 0 0 0 2px var(--eu-border-mid, #c9cdd6);transition:background .18s ease,color .18s ease,box-shadow .18s ease;font-family:DM Sans,system-ui,sans-serif;font-weight:600}::ng-deep .ud-stepper .mat-step-icon.mat-step-icon-selected{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:none!important}::ng-deep .ud-stepper .mat-step-icon.mat-step-icon-state-done,::ng-deep .ud-stepper .mat-step-icon.mat-step-icon-state-edit{background:var(--eu-navy, #1b2535)!important;color:#fff!important;box-shadow:none!important}::ng-deep .ud-stepper .mat-step-label{color:var(--eu-muted, #6b7585);font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;font-weight:400;transition:color .18s ease,font-weight .18s ease}::ng-deep .ud-stepper .mat-step-label.mat-step-label-active{color:var(--eu-text, #1b2535)}::ng-deep .ud-stepper .mat-step-label.mat-step-label-selected{color:var(--eu-navy, #1b2535);font-weight:600}::ng-deep .ud-stepper .mat-stepper-horizontal-line{border-top-color:var(--eu-border, #e2e5ea)!important;margin:0!important}::ng-deep .ud-stepper .mat-stepper-vertical-line:before{border-left-color:var(--eu-border, #e2e5ea)!important}::ng-deep .ud-stepper .mat-horizontal-content-container{padding:1.5rem 2rem 2rem}::ng-deep .ud-stepper .mat-vertical-content-container{margin-left:36px;border-left:2px solid var(--eu-border, #e2e5ea);padding-left:1.25rem}::ng-deep .ud-stepper .mat-vertical-content{padding:1rem 0 1.5rem}::ng-deep .ud-stepper .mat-horizontal-stepper-content:not(.mat-horizontal-stepper-content-inactive){animation:ud-stepper-fade-in .2s ease}@keyframes ud-stepper-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
2983
2994
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { steps: [{
|
|
@@ -3031,10 +3042,10 @@ class TabsComponent {
|
|
|
3031
3042
|
};
|
|
3032
3043
|
}
|
|
3033
3044
|
}
|
|
3034
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3035
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3045
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3046
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TabsComponent, isStandalone: true, selector: "ud-tabs", inputs: { tabs: "tabs" }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabItems", predicate: ["tabItem"], descendants: true }], ngImport: i0, template: "<div class=\"tabs-container\">\n <div class=\"tab-track\">\n <div class=\"slider\" [ngStyle]=\"sliderStyle\"></div>\n @for (tab of tabs; track tab) {\n <div\n #tabItem\n class=\"tab-item\"\n [class.active]=\"tab.value === activeTab.value\"\n (click)=\"setActiveTab(tab)\">\n {{ (isObservable(tab.label) ? (tab.label | async) : tab.label) | capitalize }}\n </div>\n }\n </div>\n</div>\n", styles: [".tabs-container{width:100%}.tab-track{position:relative;display:flex;padding:3px;background:#ebebf0;border-radius:10px}.slider{position:absolute;top:3px;left:3px;height:calc(100% - 6px);background:#fff;border-radius:8px;box-shadow:0 1px 4px #0000001f,0 0 0 .5px #0000000f;transition:transform .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);pointer-events:none}.tab-item{position:relative;flex:1;padding:7px 12px;text-align:center;cursor:pointer;border-radius:8px;color:#6b7585;font-family:DM Sans,system-ui,sans-serif;font-weight:500;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1;-webkit-user-select:none;user-select:none;transition:color .2s ease}.tab-item:hover{color:#1b2535}.tab-item.active{color:#1b2535;font-weight:600}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] });
|
|
3036
3047
|
}
|
|
3037
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3048
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TabsComponent, decorators: [{
|
|
3038
3049
|
type: Component,
|
|
3039
3050
|
args: [{ selector: 'ud-tabs', imports: [NgStyle, AsyncPipe, CapitalizePipe], template: "<div class=\"tabs-container\">\n <div class=\"tab-track\">\n <div class=\"slider\" [ngStyle]=\"sliderStyle\"></div>\n @for (tab of tabs; track tab) {\n <div\n #tabItem\n class=\"tab-item\"\n [class.active]=\"tab.value === activeTab.value\"\n (click)=\"setActiveTab(tab)\">\n {{ (isObservable(tab.label) ? (tab.label | async) : tab.label) | capitalize }}\n </div>\n }\n </div>\n</div>\n", styles: [".tabs-container{width:100%}.tab-track{position:relative;display:flex;padding:3px;background:#ebebf0;border-radius:10px}.slider{position:absolute;top:3px;left:3px;height:calc(100% - 6px);background:#fff;border-radius:8px;box-shadow:0 1px 4px #0000001f,0 0 0 .5px #0000000f;transition:transform .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);pointer-events:none}.tab-item{position:relative;flex:1;padding:7px 12px;text-align:center;cursor:pointer;border-radius:8px;color:#6b7585;font-family:DM Sans,system-ui,sans-serif;font-weight:500;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1;-webkit-user-select:none;user-select:none;transition:color .2s ease}.tab-item:hover{color:#1b2535}.tab-item.active{color:#1b2535;font-weight:600}\n"] }]
|
|
3040
3051
|
}], propDecorators: { tabs: [{
|
|
@@ -3077,10 +3088,10 @@ class TelInputComponent {
|
|
|
3077
3088
|
get phoneNumber() {
|
|
3078
3089
|
return this.group.controls['phoneNumber'];
|
|
3079
3090
|
}
|
|
3080
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3081
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3091
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TelInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3092
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TelInputComponent, isStandalone: true, selector: "ud-tel-input", inputs: { group: "group", appearance: "appearance", width: "width", showIcon: "showIcon" }, ngImport: i0, template: "<div class=\"d-flex\">\n <mat-form-field class=\"select\" [ngStyle]=\"{ width: (2 * width) / 7 + 'px' }\">\n <mat-select [formControl]=\"$any(countryCode)\">\n <mat-select-trigger>\n {{ countryCode.value.flag }} +{{ countryCode.value.code }}\n </mat-select-trigger>\n @for (country of countries; track country) {\n <mat-option [value]=\"country\">\n <b>\n {{ country.flag }} {{ country.country }}\n <span class=\"text-secondary\">+{{ country.code }}</span>\n </b>\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n <mat-form-field\n [appearance]=\"appearance\"\n [ngStyle]=\"{ width: (5 * width) / 7 + 'px' }\">\n @if (showIcon) {\n <mat-icon matPrefix fontSet=\"material-icons-outlined\" class=\"mr-2\">\n phone\n </mat-icon>\n }\n <mat-label>{{ 'names.phone' | translate | capitalize }}</mat-label>\n <input\n matInput\n type=\"number\"\n [formControl]=\"$any(phoneNumber)\"\n placeholder=\"{{ 'names.phone' | translate | capitalize }}\" />\n @if (!phoneNumber.valid && phoneNumber.value !== '') {\n <mat-error class=\"text-break text-wrap\">\n {{ 'messages.validation.validPhoneNumber' | translate }}\n </mat-error>\n }\n </mat-form-field>\n</div>\n", styles: ["::ng-deep input,::ng-deep mat-label,::ng-deep mat-option,::ng-deep mat-select-trigger,::ng-deep .mat-select-min-line{font-size:13px!important}::ng-deep .cdk-overlay-pane{min-width:300px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: 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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }] });
|
|
3082
3093
|
}
|
|
3083
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3094
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TelInputComponent, decorators: [{
|
|
3084
3095
|
type: Component,
|
|
3085
3096
|
args: [{ selector: 'ud-tel-input', imports: [
|
|
3086
3097
|
MatFormField$1,
|
|
@@ -3138,10 +3149,10 @@ class PillToggleComponent {
|
|
|
3138
3149
|
this.control.setValue(value);
|
|
3139
3150
|
this.control.markAsTouched();
|
|
3140
3151
|
}
|
|
3141
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3142
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3152
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PillToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3153
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: PillToggleComponent, isStandalone: true, selector: "ud-pill-toggle", inputs: { controlName: "controlName", label: "label", options: "options", disabled: "disabled", hint: "hint" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-pill-toggle-field\" [class.is-disabled]=\"control.disabled\">\n @if (label) {\n <span class=\"ud-pill-toggle-label\">{{ label }}</span>\n }\n <div class=\"ud-pill-toggle-track\">\n @for (option of options; track option.value) {\n <button\n type=\"button\"\n class=\"ud-pill-toggle-option\"\n [class.selected]=\"control.value === option.value\"\n [disabled]=\"control.disabled\"\n (click)=\"select(option.value)\">\n {{ option.label }}\n </button>\n }\n </div>\n @if (hint) {\n <span class=\"ud-pill-toggle-hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-pill-toggle-field{display:flex;flex-direction:column;gap:5px;width:100%}.ud-pill-toggle-field.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.ud-pill-toggle-label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-pill-toggle-track{display:flex;gap:6px;flex-wrap:wrap;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:6px 10px;min-height:40px;align-items:center;box-sizing:border-box;transition:border-color .18s ease,background .18s ease}.ud-pill-toggle-track:focus-within{border-color:#1b2535;background:#fff;box-shadow:0 0 0 3px #1b253514}.ud-pill-toggle-hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-pill-toggle-option{display:inline-flex;align-items:center;padding:5px 14px;border-radius:6px;border:1px solid transparent;background:transparent;font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:400;color:#4b5566;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.ud-pill-toggle-option:hover:not([disabled]):not(.selected){background:#1b253512;color:#1b2535}.ud-pill-toggle-option.selected{background:#1b2535;color:#fff;border-color:#1b2535}.ud-pill-toggle-option.selected:hover:not([disabled]){background:#253347}.ud-pill-toggle-option[disabled]{cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
|
|
3143
3154
|
}
|
|
3144
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3155
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PillToggleComponent, decorators: [{
|
|
3145
3156
|
type: Component,
|
|
3146
3157
|
args: [{ selector: 'ud-pill-toggle', standalone: true, imports: [CommonModule, ReactiveFormsModule], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div class=\"ud-pill-toggle-field\" [class.is-disabled]=\"control.disabled\">\n @if (label) {\n <span class=\"ud-pill-toggle-label\">{{ label }}</span>\n }\n <div class=\"ud-pill-toggle-track\">\n @for (option of options; track option.value) {\n <button\n type=\"button\"\n class=\"ud-pill-toggle-option\"\n [class.selected]=\"control.value === option.value\"\n [disabled]=\"control.disabled\"\n (click)=\"select(option.value)\">\n {{ option.label }}\n </button>\n }\n </div>\n @if (hint) {\n <span class=\"ud-pill-toggle-hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-pill-toggle-field{display:flex;flex-direction:column;gap:5px;width:100%}.ud-pill-toggle-field.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.ud-pill-toggle-label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:#2a3548;line-height:1;padding-left:1px}.ud-pill-toggle-track{display:flex;gap:6px;flex-wrap:wrap;background:#f8fafc;border:1px solid #d8dde6;border-radius:8px;padding:6px 10px;min-height:40px;align-items:center;box-sizing:border-box;transition:border-color .18s ease,background .18s ease}.ud-pill-toggle-track:focus-within{border-color:#1b2535;background:#fff;box-shadow:0 0 0 3px #1b253514}.ud-pill-toggle-hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:#6b7585;line-height:1.3}.ud-pill-toggle-option{display:inline-flex;align-items:center;padding:5px 14px;border-radius:6px;border:1px solid transparent;background:transparent;font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:400;color:#4b5566;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.ud-pill-toggle-option:hover:not([disabled]):not(.selected){background:#1b253512;color:#1b2535}.ud-pill-toggle-option.selected{background:#1b2535;color:#fff;border-color:#1b2535}.ud-pill-toggle-option.selected:hover:not([disabled]){background:#253347}.ud-pill-toggle-option[disabled]{cursor:not-allowed;opacity:.5}\n"] }]
|
|
3147
3158
|
}], propDecorators: { controlName: [{
|
|
@@ -3192,10 +3203,10 @@ class ChipInputComponent {
|
|
|
3192
3203
|
this.control.setValue(updated);
|
|
3193
3204
|
this.control.markAsDirty();
|
|
3194
3205
|
}
|
|
3195
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3196
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3206
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ChipInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3207
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ChipInputComponent, isStandalone: true, selector: "ud-chip-input", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", icon: "icon", iconFontSet: "iconFontSet", disabled: "disabled", hint: "hint" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"ud-chip-input\"\n [class.ud-chip-input--focused]=\"focused\"\n [class.ud-chip-input--disabled]=\"control.disabled\"\n [class.ud-chip-input--error]=\"control.invalid && control.touched\">\n @if (label) {\n <label class=\"ud-chip-input__label\">{{ label }}</label>\n }\n <div class=\"ud-chip-input__wrapper\">\n @if (icon) {\n <mat-icon class=\"ud-chip-input__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <mat-chip-grid #chipGrid class=\"ud-chip-input__grid\" aria-label=\"Chip input\">\n @for (chip of chips; track chip; let i = $index) {\n <mat-chip-row class=\"ud-chip\" (removed)=\"removeChip(i)\">\n {{ chip }}\n <button matChipRemove aria-label=\"Remove chip\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input\n class=\"ud-chip-input__field\"\n [placeholder]=\"chips.length === 0 ? placeholder : ''\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [disabled]=\"control.disabled\"\n (matChipInputTokenEnd)=\"addChip($event)\"\n (focus)=\"focused = true\"\n (blur)=\"focused = false\" />\n </mat-chip-grid>\n </div>\n @if (hint) {\n <span class=\"ud-chip-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-chip-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-chip-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:var(--eu-text, #2a3548);line-height:1}.ud-chip-input__wrapper{display:flex;align-items:flex-start;gap:8px;background:#f8fafc;border:1px solid var(--eu-border-mid, #d8dde6);border-radius:8px;padding:6px 12px;min-height:40px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-chip-input--focused .ud-chip-input__wrapper{border-color:var(--eu-navy, #1b2535);box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-chip-input--error .ud-chip-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-chip-input--error.ud-chip-input--focused .ud-chip-input__wrapper{border-color:#e53935}.ud-chip-input--disabled .ud-chip-input__wrapper{background:var(--eu-bg, #f4f5f7);border-color:var(--eu-border-light, #e8eaef);cursor:not-allowed;opacity:.6}.ud-chip-input__icon{flex-shrink:0;color:var(--eu-muted, #6b7585);font-size:18px;width:18px;height:18px;margin-top:3px;line-height:1;transition:color .18s ease}.ud-chip-input--focused .ud-chip-input__icon{color:var(--eu-navy, #1b2535)}.ud-chip-input__grid{flex:1;min-width:0}:host ::ng-deep .ud-chip-input__grid .mdc-evolution-chip-set__chips{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;padding:0}.ud-chip-input__field{flex:1;min-width:80px;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:var(--eu-text, #2a3548);line-height:1;padding:2px 0}.ud-chip-input__field::placeholder{color:var(--eu-muted, #9099a8)}.ud-chip-input__field:disabled{cursor:not-allowed;color:var(--eu-muted, #9099a8)}:host ::ng-deep mat-chip-row.ud-chip{--mdc-chip-container-color: rgba(27, 37, 53, .07);--mdc-chip-label-text-color: var(--eu-text, #2a3548);--mdc-chip-label-text-font: \"DM Sans\", system-ui, sans-serif;--mdc-chip-label-text-size: 12px;--mdc-chip-label-text-weight: 500;--mdc-chip-container-shape-radius: 20px;--mdc-chip-with-trailing-icon-trailing-icon-color: var(--eu-muted, #6b7585);--mdc-chip-elevated-container-color: rgba(27, 37, 53, .07);height:24px;border:none}:host ::ng-deep mat-chip-row.ud-chip .mdc-evolution-chip__action--trailing{padding:0 4px}:host ::ng-deep mat-chip-row.ud-chip .mdc-evolution-chip__action--trailing .mat-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:var(--eu-muted, #6b7585);transition:color .15s ease}:host ::ng-deep mat-chip-row.ud-chip .mdc-evolution-chip__action--trailing:hover .mat-icon{color:var(--eu-navy, #1b2535)}.ud-chip-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:var(--eu-muted, #6b7585);line-height:1.3}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
|
|
3197
3208
|
}
|
|
3198
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3209
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ChipInputComponent, decorators: [{
|
|
3199
3210
|
type: Component,
|
|
3200
3211
|
args: [{ selector: 'ud-chip-input', standalone: true, imports: [ReactiveFormsModule, MatChipGrid, MatChipRow, MatChipInput, MatChipRemove, MatIcon], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div\n class=\"ud-chip-input\"\n [class.ud-chip-input--focused]=\"focused\"\n [class.ud-chip-input--disabled]=\"control.disabled\"\n [class.ud-chip-input--error]=\"control.invalid && control.touched\">\n @if (label) {\n <label class=\"ud-chip-input__label\">{{ label }}</label>\n }\n <div class=\"ud-chip-input__wrapper\">\n @if (icon) {\n <mat-icon class=\"ud-chip-input__icon\" [fontSet]=\"iconFontSet\">{{ icon }}</mat-icon>\n }\n <mat-chip-grid #chipGrid class=\"ud-chip-input__grid\" aria-label=\"Chip input\">\n @for (chip of chips; track chip; let i = $index) {\n <mat-chip-row class=\"ud-chip\" (removed)=\"removeChip(i)\">\n {{ chip }}\n <button matChipRemove aria-label=\"Remove chip\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input\n class=\"ud-chip-input__field\"\n [placeholder]=\"chips.length === 0 ? placeholder : ''\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [disabled]=\"control.disabled\"\n (matChipInputTokenEnd)=\"addChip($event)\"\n (focus)=\"focused = true\"\n (blur)=\"focused = false\" />\n </mat-chip-grid>\n </div>\n @if (hint) {\n <span class=\"ud-chip-input__hint\">{{ hint }}</span>\n }\n</div>\n", styles: [":host{display:block;width:100%}.ud-chip-input{display:flex;flex-direction:column;gap:5px;width:100%}.ud-chip-input__label{font-family:DM Sans,system-ui,sans-serif;font-size:13px;font-weight:500;color:var(--eu-text, #2a3548);line-height:1}.ud-chip-input__wrapper{display:flex;align-items:flex-start;gap:8px;background:#f8fafc;border:1px solid var(--eu-border-mid, #d8dde6);border-radius:8px;padding:6px 12px;min-height:40px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.ud-chip-input--focused .ud-chip-input__wrapper{border-color:var(--eu-navy, #1b2535);box-shadow:0 0 0 3px #1b253514;background:#fff}.ud-chip-input--error .ud-chip-input__wrapper{border-color:#e53935;box-shadow:0 0 0 3px #e539351a}.ud-chip-input--error.ud-chip-input--focused .ud-chip-input__wrapper{border-color:#e53935}.ud-chip-input--disabled .ud-chip-input__wrapper{background:var(--eu-bg, #f4f5f7);border-color:var(--eu-border-light, #e8eaef);cursor:not-allowed;opacity:.6}.ud-chip-input__icon{flex-shrink:0;color:var(--eu-muted, #6b7585);font-size:18px;width:18px;height:18px;margin-top:3px;line-height:1;transition:color .18s ease}.ud-chip-input--focused .ud-chip-input__icon{color:var(--eu-navy, #1b2535)}.ud-chip-input__grid{flex:1;min-width:0}:host ::ng-deep .ud-chip-input__grid .mdc-evolution-chip-set__chips{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;padding:0}.ud-chip-input__field{flex:1;min-width:80px;border:none;background:transparent;outline:none;font-family:DM Sans,system-ui,sans-serif;font-size:14px;color:var(--eu-text, #2a3548);line-height:1;padding:2px 0}.ud-chip-input__field::placeholder{color:var(--eu-muted, #9099a8)}.ud-chip-input__field:disabled{cursor:not-allowed;color:var(--eu-muted, #9099a8)}:host ::ng-deep mat-chip-row.ud-chip{--mdc-chip-container-color: rgba(27, 37, 53, .07);--mdc-chip-label-text-color: var(--eu-text, #2a3548);--mdc-chip-label-text-font: \"DM Sans\", system-ui, sans-serif;--mdc-chip-label-text-size: 12px;--mdc-chip-label-text-weight: 500;--mdc-chip-container-shape-radius: 20px;--mdc-chip-with-trailing-icon-trailing-icon-color: var(--eu-muted, #6b7585);--mdc-chip-elevated-container-color: rgba(27, 37, 53, .07);height:24px;border:none}:host ::ng-deep mat-chip-row.ud-chip .mdc-evolution-chip__action--trailing{padding:0 4px}:host ::ng-deep mat-chip-row.ud-chip .mdc-evolution-chip__action--trailing .mat-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:var(--eu-muted, #6b7585);transition:color .15s ease}:host ::ng-deep mat-chip-row.ud-chip .mdc-evolution-chip__action--trailing:hover .mat-icon{color:var(--eu-navy, #1b2535)}.ud-chip-input__hint{font-family:DM Sans,system-ui,sans-serif;font-size:12px;color:var(--eu-muted, #6b7585);line-height:1.3}\n"] }]
|
|
3201
3212
|
}], propDecorators: { controlName: [{
|
|
@@ -3237,17 +3248,27 @@ class CalendarComponent {
|
|
|
3237
3248
|
TIME_COL_W = 52;
|
|
3238
3249
|
dialog = inject(MatDialog);
|
|
3239
3250
|
elRef = inject(ElementRef);
|
|
3251
|
+
overlay = inject(Overlay);
|
|
3252
|
+
vcr = inject(ViewContainerRef);
|
|
3240
3253
|
// ── Drag state ─────────────────────────────────────────────────────────────
|
|
3241
3254
|
draggingSlot = null;
|
|
3242
3255
|
dragMoved = false;
|
|
3243
3256
|
dragTarget = null;
|
|
3244
3257
|
dragSlotDurationMin = 0;
|
|
3245
3258
|
dragStartPos = null;
|
|
3259
|
+
// ── Hover card state ───────────────────────────────────────────────────────
|
|
3260
|
+
hoverCardTpl = viewChild('hoverCard');
|
|
3261
|
+
hoverSlot = signal(null);
|
|
3262
|
+
hoverRef = null;
|
|
3263
|
+
hoverCloseTimer = null;
|
|
3246
3264
|
constructor() {
|
|
3247
3265
|
effect(() => {
|
|
3248
3266
|
this.activeView.set(this.defaultView());
|
|
3249
3267
|
}, { allowSignalWrites: true });
|
|
3250
3268
|
}
|
|
3269
|
+
ngOnDestroy() {
|
|
3270
|
+
this.disposeHoverCard();
|
|
3271
|
+
}
|
|
3251
3272
|
// ── Time axis ──────────────────────────────────────────────────────────────
|
|
3252
3273
|
timeSlots = computed(() => {
|
|
3253
3274
|
const slots = [];
|
|
@@ -3333,6 +3354,146 @@ class CalendarComponent {
|
|
|
3333
3354
|
slotsForDay(day) {
|
|
3334
3355
|
return this.slots().filter(s => this.isSameDay(s.start, day));
|
|
3335
3356
|
}
|
|
3357
|
+
// ── Overlap layout ───────────────────────────────────────────────────────────
|
|
3358
|
+
// Computes, per slot, the horizontal column placement so overlapping slots render
|
|
3359
|
+
// side-by-side instead of stacked on top of each other. Recomputed only when the
|
|
3360
|
+
// slots input changes.
|
|
3361
|
+
COL_GAP_PCT = 1.5;
|
|
3362
|
+
slotLayout = computed(() => {
|
|
3363
|
+
const map = new Map();
|
|
3364
|
+
const slots = [...this.slots()];
|
|
3365
|
+
// Group by calendar day (YYYY-M-D key).
|
|
3366
|
+
const byDay = new Map();
|
|
3367
|
+
for (const s of slots) {
|
|
3368
|
+
const key = `${s.start.getFullYear()}-${s.start.getMonth()}-${s.start.getDate()}`;
|
|
3369
|
+
const arr = byDay.get(key);
|
|
3370
|
+
if (arr)
|
|
3371
|
+
arr.push(s);
|
|
3372
|
+
else
|
|
3373
|
+
byDay.set(key, [s]);
|
|
3374
|
+
}
|
|
3375
|
+
for (const dayslots of byDay.values()) {
|
|
3376
|
+
// Sort by start, then end.
|
|
3377
|
+
dayslots.sort((a, b) => a.start.getTime() - b.start.getTime() || a.end.getTime() - b.end.getTime());
|
|
3378
|
+
// Build clusters of transitively-overlapping slots.
|
|
3379
|
+
let cluster = [];
|
|
3380
|
+
let clusterEnd = -Infinity;
|
|
3381
|
+
const flush = () => {
|
|
3382
|
+
if (cluster.length)
|
|
3383
|
+
this.layoutCluster(cluster, map);
|
|
3384
|
+
cluster = [];
|
|
3385
|
+
clusterEnd = -Infinity;
|
|
3386
|
+
};
|
|
3387
|
+
for (const s of dayslots) {
|
|
3388
|
+
if (cluster.length && s.start.getTime() >= clusterEnd)
|
|
3389
|
+
flush();
|
|
3390
|
+
cluster.push(s);
|
|
3391
|
+
clusterEnd = Math.max(clusterEnd, s.end.getTime());
|
|
3392
|
+
}
|
|
3393
|
+
flush();
|
|
3394
|
+
}
|
|
3395
|
+
return map;
|
|
3396
|
+
});
|
|
3397
|
+
layoutCluster(cluster, map) {
|
|
3398
|
+
// Greedy column assignment: first column whose last slot ends <= this start.
|
|
3399
|
+
const colEnds = [];
|
|
3400
|
+
const colOf = new Map();
|
|
3401
|
+
for (const s of cluster) {
|
|
3402
|
+
let col = colEnds.findIndex(end => end <= s.start.getTime());
|
|
3403
|
+
if (col === -1) {
|
|
3404
|
+
col = colEnds.length;
|
|
3405
|
+
colEnds.push(s.end.getTime());
|
|
3406
|
+
}
|
|
3407
|
+
else {
|
|
3408
|
+
colEnds[col] = s.end.getTime();
|
|
3409
|
+
}
|
|
3410
|
+
colOf.set(s.id, col);
|
|
3411
|
+
}
|
|
3412
|
+
const columns = colEnds.length;
|
|
3413
|
+
const widthPct = 100 / columns;
|
|
3414
|
+
for (const s of cluster) {
|
|
3415
|
+
const col = colOf.get(s.id);
|
|
3416
|
+
map.set(s.id, {
|
|
3417
|
+
leftPct: col * widthPct,
|
|
3418
|
+
widthPct: widthPct - (col < columns - 1 ? this.COL_GAP_PCT : 0),
|
|
3419
|
+
});
|
|
3420
|
+
}
|
|
3421
|
+
}
|
|
3422
|
+
slotLeft(slot) {
|
|
3423
|
+
return this.slotLayout().get(slot.id)?.leftPct ?? 0;
|
|
3424
|
+
}
|
|
3425
|
+
slotWidth(slot) {
|
|
3426
|
+
return this.slotLayout().get(slot.id)?.widthPct ?? 100;
|
|
3427
|
+
}
|
|
3428
|
+
// ── Density / tooltip ──────────────────────────────────────────────────────────
|
|
3429
|
+
slotDensity(slot) {
|
|
3430
|
+
const h = this.slotHeight(slot);
|
|
3431
|
+
if (h < 28)
|
|
3432
|
+
return 'compact';
|
|
3433
|
+
if (h < 46)
|
|
3434
|
+
return 'cozy';
|
|
3435
|
+
return 'comfortable';
|
|
3436
|
+
}
|
|
3437
|
+
slotDurationLabel(slot) {
|
|
3438
|
+
const min = Math.round((slot.end.getTime() - slot.start.getTime()) / 60000);
|
|
3439
|
+
if (min < 60)
|
|
3440
|
+
return `${min} min`;
|
|
3441
|
+
const h = Math.floor(min / 60);
|
|
3442
|
+
const m = min % 60;
|
|
3443
|
+
return m ? `${h} hr ${m} min` : `${h} hr`;
|
|
3444
|
+
}
|
|
3445
|
+
slotInitials(name) {
|
|
3446
|
+
return name
|
|
3447
|
+
.trim()
|
|
3448
|
+
.split(/\s+/)
|
|
3449
|
+
.slice(0, 2)
|
|
3450
|
+
.map(p => p[0]?.toUpperCase() ?? '')
|
|
3451
|
+
.join('');
|
|
3452
|
+
}
|
|
3453
|
+
// ── Rich hover card (CDK overlay) ──────────────────────────────────────────────
|
|
3454
|
+
openHoverCard(slot, anchor) {
|
|
3455
|
+
if (this.draggingSlot || !anchor)
|
|
3456
|
+
return;
|
|
3457
|
+
this.cancelHoverClose();
|
|
3458
|
+
this.disposeHoverCard();
|
|
3459
|
+
const tpl = this.hoverCardTpl();
|
|
3460
|
+
if (!tpl)
|
|
3461
|
+
return;
|
|
3462
|
+
const positionStrategy = this.overlay
|
|
3463
|
+
.position()
|
|
3464
|
+
.flexibleConnectedTo(anchor)
|
|
3465
|
+
.withPositions([
|
|
3466
|
+
{ originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: 8 },
|
|
3467
|
+
{ originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -8 },
|
|
3468
|
+
{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 },
|
|
3469
|
+
{ originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 },
|
|
3470
|
+
])
|
|
3471
|
+
.withPush(true)
|
|
3472
|
+
.withFlexibleDimensions(false);
|
|
3473
|
+
this.hoverRef = this.overlay.create({
|
|
3474
|
+
positionStrategy,
|
|
3475
|
+
scrollStrategy: this.overlay.scrollStrategies.reposition(),
|
|
3476
|
+
panelClass: 'ud-cal__hovercard-panel',
|
|
3477
|
+
});
|
|
3478
|
+
this.hoverSlot.set(slot);
|
|
3479
|
+
this.hoverRef.attach(new TemplatePortal(tpl, this.vcr));
|
|
3480
|
+
}
|
|
3481
|
+
closeHoverCard() {
|
|
3482
|
+
this.cancelHoverClose();
|
|
3483
|
+
this.hoverCloseTimer = setTimeout(() => this.disposeHoverCard(), 90);
|
|
3484
|
+
}
|
|
3485
|
+
cancelHoverClose() {
|
|
3486
|
+
if (this.hoverCloseTimer) {
|
|
3487
|
+
clearTimeout(this.hoverCloseTimer);
|
|
3488
|
+
this.hoverCloseTimer = null;
|
|
3489
|
+
}
|
|
3490
|
+
}
|
|
3491
|
+
disposeHoverCard() {
|
|
3492
|
+
this.cancelHoverClose();
|
|
3493
|
+
this.hoverRef?.dispose();
|
|
3494
|
+
this.hoverRef = null;
|
|
3495
|
+
this.hoverSlot.set(null);
|
|
3496
|
+
}
|
|
3336
3497
|
slotTop(slot) {
|
|
3337
3498
|
const startMinutes = slot.start.getHours() * 60 + slot.start.getMinutes();
|
|
3338
3499
|
const gridStart = this.minHour() * 60;
|
|
@@ -3387,6 +3548,7 @@ class CalendarComponent {
|
|
|
3387
3548
|
}
|
|
3388
3549
|
onSlotMouseDown(e, slot) {
|
|
3389
3550
|
e.stopPropagation();
|
|
3551
|
+
this.disposeHoverCard();
|
|
3390
3552
|
if (this.mode() === 'student' && !slot.booked) {
|
|
3391
3553
|
this.slotBooked.emit({ ...slot, booked: true });
|
|
3392
3554
|
return;
|
|
@@ -3634,12 +3796,12 @@ class CalendarComponent {
|
|
|
3634
3796
|
const b = parseInt(hex.slice(5, 7), 16);
|
|
3635
3797
|
return `rgba(${r},${g},${b},${alpha})`;
|
|
3636
3798
|
}
|
|
3637
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3638
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: CalendarComponent, isStandalone: true, selector: "ud-calendar", inputs: { slots: { classPropertyName: "slots", publicName: "slots", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, defaultView: { classPropertyName: "defaultView", publicName: "defaultView", isSignal: true, isRequired: false, transformFunction: null }, slotDuration: { classPropertyName: "slotDuration", publicName: "slotDuration", isSignal: true, isRequired: false, transformFunction: null }, minHour: { classPropertyName: "minHour", publicName: "minHour", isSignal: true, isRequired: false, transformFunction: null }, maxHour: { classPropertyName: "maxHour", publicName: "maxHour", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotAdded: "slotAdded", slotUpdated: "slotUpdated", slotRemoved: "slotRemoved", slotBooked: "slotBooked" }, host: { listeners: { "document:mousemove": "onDocMouseMove($event)", "document:mouseup": "onDocMouseUp($event)" } }, ngImport: i0, template: "<div class=\"ud-cal\" #calendarHost>\n\n <!-- Header -->\n <div class=\"ud-cal__header\">\n <div class=\"ud-cal__nav\">\n <ud-button variant=\"icon-only\" color=\"secondary\" size=\"sm\" icon=\"chevron_left\" (click)=\"navigate(-1)\" />\n <ud-button variant=\"icon-only\" color=\"secondary\" size=\"sm\" icon=\"chevron_right\" (click)=\"navigate(1)\" />\n <ud-button variant=\"stroked\" color=\"secondary\" size=\"sm\" (click)=\"goToday()\">Today</ud-button>\n </div>\n\n <span class=\"ud-cal__period\">{{ headerLabel() }}</span>\n\n <div class=\"ud-cal__header-right\">\n <div class=\"ud-cal__view-switcher\">\n @for (v of viewOptions; track v.id) {\n <button\n class=\"ud-cal__view-btn\"\n [class.ud-cal__view-btn--active]=\"activeView() === v.id\"\n (click)=\"switchView(v.id)\"\n type=\"button\">\n {{ v.label }}\n </button>\n }\n </div>\n @if (mode() === 'admin') {\n <ud-button variant=\"flat\" color=\"primary\" size=\"sm\" icon=\"add\" (click)=\"openAddModal()\">\n Add slot\n </ud-button>\n }\n </div>\n </div>\n\n <!-- \u2500\u2500 WEEK VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (activeView() === 'week') {\n <div class=\"ud-cal__week-scroll\">\n <div class=\"ud-cal__week-header\">\n <div class=\"ud-cal__time-gutter\"></div>\n @for (day of weekDays(); track day.toISOString()) {\n <div class=\"ud-cal__day-header\" [class.ud-cal__day-header--today]=\"isToday(day)\">\n <span class=\"ud-cal__day-name\">{{ dayLabel(day) }}</span>\n <span class=\"ud-cal__day-num\" [class.ud-cal__day-num--today]=\"isToday(day)\">{{ dayNum(day) }}</span>\n </div>\n }\n </div>\n <div class=\"ud-cal__week-grid\">\n <div class=\"ud-cal__time-col\">\n @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n <div class=\"ud-cal__time-cell\">\n @if (ts.label) {\n <span class=\"ud-cal__time-label\">{{ ts.label }}</span>\n }\n </div>\n }\n </div>\n @for (day of weekDays(); track day.toISOString()) {\n <div class=\"ud-cal__day-col\" [class.ud-cal__day-col--today]=\"isToday(day)\">\n @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n <div\n class=\"ud-cal__grid-cell\"\n [class.ud-cal__grid-cell--half]=\"ts.minute === 30\"\n (click)=\"onCellClick(day, ts.hour, ts.minute)\">\n </div>\n }\n @for (slot of slotsForDay(day); track slot.id) {\n <div\n class=\"ud-cal__slot\"\n [class.ud-cal__slot--booked]=\"slot.booked\"\n [class.ud-cal__slot--clickable]=\"mode() === 'admin' || (mode() === 'student' && !slot.booked)\"\n [class.ud-cal__slot--dragging]=\"draggingSlot?.id === slot.id && dragMoved\"\n [style.top.px]=\"slotTop(slot)\"\n [style.height.px]=\"slotHeight(slot)\"\n [style.background]=\"slotBg(slot)\"\n [style.color]=\"slotTextColor(slot)\"\n [style.border-color]=\"slotBorderColor(slot)\"\n (mousedown)=\"onSlotMouseDown($event, slot)\">\n <div class=\"ud-cal__slot-inner\">\n @if (slot.booked) {\n <mat-icon class=\"ud-cal__slot-lock\">lock</mat-icon>\n }\n @if (slot.title) {\n <span class=\"ud-cal__slot-title\">{{ slot.title }}</span>\n }\n </div>\n <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n @if (slot.booked && slot.bookedBy) {\n <span class=\"ud-cal__slot-booked-by\">{{ slot.bookedBy }}</span>\n }\n </div>\n }\n @if (draggingSlot && dragMoved && dragTarget && isSameDay(dragTarget.day, day)) {\n <div\n class=\"ud-cal__slot ud-cal__slot--drag-preview\"\n [style.top.px]=\"previewTop(dragTarget)\"\n [style.height.px]=\"previewHeight()\"\n [style.background]=\"slotBg(draggingSlot)\"\n [style.color]=\"slotTextColor(draggingSlot)\"\n [style.border-color]=\"slotBorderColor(draggingSlot)\">\n @if (draggingSlot.title) {\n <span class=\"ud-cal__slot-title\">{{ draggingSlot.title }}</span>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n\n <!-- \u2500\u2500 MONTH VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (activeView() === 'month') {\n <div class=\"ud-cal__month\">\n <div class=\"ud-cal__month-header\">\n @for (name of ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; track name) {\n <div class=\"ud-cal__month-day-name\">{{ name }}</div>\n }\n </div>\n <div class=\"ud-cal__month-grid\">\n @for (week of monthWeeks(); track $index) {\n @for (day of week; track day.toISOString()) {\n <div\n class=\"ud-cal__month-cell\"\n [class.ud-cal__month-cell--today]=\"isToday(day)\"\n [class.ud-cal__month-cell--other]=\"!isCurrentMonth(day)\"\n (click)=\"clickDay(day)\">\n <span class=\"ud-cal__month-num\" [class.ud-cal__month-num--today]=\"isToday(day)\">\n {{ dayNum(day) }}\n </span>\n <div class=\"ud-cal__month-dots\">\n @for (slot of slotsForDay(day).slice(0, 3); track slot.id) {\n <span\n class=\"ud-cal__month-dot\"\n [style.background]=\"slotBorderColor(slot)\"\n [title]=\"slot.title ?? formatSlotTime(slot)\">\n </span>\n }\n @if (slotsForDay(day).length > 3) {\n <span class=\"ud-cal__month-more\">+{{ slotsForDay(day).length - 3 }}</span>\n }\n </div>\n </div>\n }\n }\n </div>\n </div>\n }\n\n <!-- \u2500\u2500 DAY VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (activeView() === 'day') {\n <div class=\"ud-cal__week-scroll\">\n <div class=\"ud-cal__week-header\">\n <div class=\"ud-cal__time-gutter\"></div>\n <div class=\"ud-cal__day-header\" [class.ud-cal__day-header--today]=\"isToday(navDate())\">\n <span class=\"ud-cal__day-name\">{{ dayLabel(navDate()) }}</span>\n <span class=\"ud-cal__day-num\" [class.ud-cal__day-num--today]=\"isToday(navDate())\">{{ dayNum(navDate()) }}</span>\n </div>\n </div>\n <div class=\"ud-cal__week-grid\">\n <div class=\"ud-cal__time-col\">\n @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n <div class=\"ud-cal__time-cell\">\n @if (ts.label) {\n <span class=\"ud-cal__time-label\">{{ ts.label }}</span>\n }\n </div>\n }\n </div>\n <div class=\"ud-cal__day-col\" [class.ud-cal__day-col--today]=\"isToday(navDate())\">\n @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n <div\n class=\"ud-cal__grid-cell\"\n [class.ud-cal__grid-cell--half]=\"ts.minute === 30\"\n (click)=\"onCellClick(navDate(), ts.hour, ts.minute)\">\n </div>\n }\n @for (slot of slotsForDay(navDate()); track slot.id) {\n <div\n class=\"ud-cal__slot\"\n [class.ud-cal__slot--booked]=\"slot.booked\"\n [class.ud-cal__slot--clickable]=\"mode() === 'admin' || (mode() === 'student' && !slot.booked)\"\n [class.ud-cal__slot--dragging]=\"draggingSlot?.id === slot.id && dragMoved\"\n [style.top.px]=\"slotTop(slot)\"\n [style.height.px]=\"slotHeight(slot)\"\n [style.background]=\"slotBg(slot)\"\n [style.color]=\"slotTextColor(slot)\"\n [style.border-color]=\"slotBorderColor(slot)\"\n (mousedown)=\"onSlotMouseDown($event, slot)\">\n <div class=\"ud-cal__slot-inner\">\n @if (slot.booked) {\n <mat-icon class=\"ud-cal__slot-lock\">lock</mat-icon>\n }\n @if (slot.title) {\n <span class=\"ud-cal__slot-title\">{{ slot.title }}</span>\n }\n </div>\n <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n @if (slot.booked && slot.bookedBy) {\n <span class=\"ud-cal__slot-booked-by\">{{ slot.bookedBy }}</span>\n }\n </div>\n }\n @if (draggingSlot && dragMoved && dragTarget) {\n <div\n class=\"ud-cal__slot ud-cal__slot--drag-preview\"\n [style.top.px]=\"previewTop(dragTarget)\"\n [style.height.px]=\"previewHeight()\"\n [style.background]=\"slotBg(draggingSlot)\"\n [style.color]=\"slotTextColor(draggingSlot)\"\n [style.border-color]=\"slotBorderColor(draggingSlot)\">\n @if (draggingSlot.title) {\n <span class=\"ud-cal__slot-title\">{{ draggingSlot.title }}</span>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }\n\n</div>\n\n", styles: [":host{display:block;width:100%;font-family:DM Sans,system-ui,sans-serif}.ud-cal{position:relative;background:#fff;border:1px solid var(--eu-border-mid, #d8dde6);border-radius:12px;box-shadow:0 2px 8px #1b25350f;overflow:hidden}.ud-cal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--eu-border-light, #e8eaef);gap:12px;flex-wrap:wrap}.ud-cal__nav{display:flex;align-items:center;gap:4px}.ud-cal__period{flex:1;text-align:center;font-size:14px;font-weight:600;color:var(--eu-text, #2a3548);white-space:nowrap}.ud-cal__header-right{display:flex;align-items:center;gap:10px}.ud-cal__view-switcher{display:flex;align-items:center;background:var(--eu-bg, #f4f5f7);border-radius:8px;padding:3px;gap:2px}.ud-cal__view-btn{padding:4px 12px;border:none;border-radius:6px;background:transparent;font-family:DM Sans,system-ui,sans-serif;font-size:12px;font-weight:500;color:var(--eu-muted, #6b7585);cursor:pointer;transition:background .15s,color .15s}.ud-cal__view-btn--active{background:var(--eu-navy, #1b2535);color:#fff}.ud-cal__view-btn:not(.ud-cal__view-btn--active):hover{background:#1b253514;color:var(--eu-text, #2a3548)}.ud-cal__week-scroll{overflow-y:auto;max-height:580px}.ud-cal__week-header{position:sticky;top:0;z-index:10;display:flex;background:#fafbfc;border-bottom:1px solid var(--eu-border-light, #e8eaef);flex-shrink:0}.ud-cal__time-gutter{width:52px;flex-shrink:0;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-header{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;gap:2px;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-header:last-child{border-right:none}.ud-cal__day-header--today{background:#1b25350a}.ud-cal__day-name{font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);text-transform:uppercase;letter-spacing:.06em}.ud-cal__day-num{font-size:15px;font-weight:600;color:var(--eu-text, #2a3548)}.ud-cal__day-num--today{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--eu-navy, #1b2535);color:#fff;border-radius:50%;font-size:13px}.ud-cal__week-grid{display:flex}.ud-cal__time-col{width:52px;flex-shrink:0;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__time-cell{height:56px;position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding:0 6px}.ud-cal__time-label{font-size:10px;color:var(--eu-muted, #9099a8);font-weight:500;white-space:nowrap;margin-top:-6px}.ud-cal__day-col{flex:1;position:relative;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-col:last-child{border-right:none}.ud-cal__day-col--today{background:#1b253506}.ud-cal__grid-cell{height:56px;border-bottom:1px solid var(--eu-border-light, #e8eaef);transition:background .1s;cursor:pointer}.ud-cal__grid-cell--half{border-bottom-style:dashed;border-bottom-color:#d8dde673}.ud-cal__grid-cell:hover{background:#1b253508}.ud-cal__slot{position:absolute;left:3px;right:3px;border-left:3px solid;border-radius:6px;padding:3px 6px;display:flex;flex-direction:column;gap:1px;overflow:hidden;z-index:1;transition:filter .15s,transform .1s}.ud-cal__slot--clickable{cursor:grab}.ud-cal__slot--clickable:hover{filter:brightness(.93);transform:translate(1px)}.ud-cal__slot-inner{display:flex;align-items:center;gap:3px;overflow:hidden;min-width:0}.ud-cal__slot-title{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;min-width:0}.ud-cal__slot-time{font-size:10px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.ud-cal__slot--dragging{opacity:.3;pointer-events:none}.ud-cal__slot--drag-preview{pointer-events:none;opacity:.75;border-left-style:dashed;border-top:1px dashed currentColor;z-index:2}.ud-cal__slot--booked{background-image:repeating-linear-gradient(-45deg,transparent,transparent 4px,rgba(229,57,53,.07) 4px,rgba(229,57,53,.07) 8px)!important;cursor:not-allowed;border-top:1px solid rgba(229,57,53,.18)}.ud-cal__slot--booked:hover{filter:none!important;transform:none!important}.ud-cal__slot--booked .ud-cal__slot-title{text-decoration:line-through;text-decoration-color:#c6282866;text-decoration-thickness:1px;opacity:.9}.ud-cal__slot-lock{font-size:10px!important;width:10px!important;height:10px!important;line-height:10px!important;flex-shrink:0;opacity:.7}.ud-cal__slot-booked-by{font-size:9px;font-weight:500;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em;margin-top:1px}.ud-cal__month{display:flex;flex-direction:column}.ud-cal__month-header{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--eu-border-light, #e8eaef);background:#fafbfc}.ud-cal__month-day-name{text-align:center;padding:8px 4px;font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);text-transform:uppercase;letter-spacing:.06em;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__month-day-name:last-child{border-right:none}.ud-cal__month-grid{display:grid;grid-template-columns:repeat(7,1fr)}.ud-cal__month-cell{min-height:80px;padding:6px;border-right:1px solid var(--eu-border-light, #e8eaef);border-bottom:1px solid var(--eu-border-light, #e8eaef);cursor:pointer;transition:background .12s}.ud-cal__month-cell:nth-child(7n){border-right:none}.ud-cal__month-cell:hover{background:#1b253508}.ud-cal__month-cell--today{background:#1b25350a}.ud-cal__month-cell--other{opacity:.4}.ud-cal__month-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:12px;font-weight:600;color:var(--eu-text, #2a3548);border-radius:50%}.ud-cal__month-num--today{background:var(--eu-navy, #1b2535);color:#fff}.ud-cal__month-dots{display:flex;flex-wrap:wrap;align-items:center;gap:3px;margin-top:4px}.ud-cal__month-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.ud-cal__month-more{font-size:9px;font-weight:600;color:var(--eu-muted, #6b7585)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: UdButtonComponent, selector: "ud-button", inputs: ["variant", "color", "size", "type", "icon", "iconPosition", "iconFontSet", "loading", "disabled", "fullWidth"] }] });
|
|
3799
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3800
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CalendarComponent, isStandalone: true, selector: "ud-calendar", inputs: { slots: { classPropertyName: "slots", publicName: "slots", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, defaultView: { classPropertyName: "defaultView", publicName: "defaultView", isSignal: true, isRequired: false, transformFunction: null }, slotDuration: { classPropertyName: "slotDuration", publicName: "slotDuration", isSignal: true, isRequired: false, transformFunction: null }, minHour: { classPropertyName: "minHour", publicName: "minHour", isSignal: true, isRequired: false, transformFunction: null }, maxHour: { classPropertyName: "maxHour", publicName: "maxHour", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotAdded: "slotAdded", slotUpdated: "slotUpdated", slotRemoved: "slotRemoved", slotBooked: "slotBooked" }, host: { listeners: { "document:mousemove": "onDocMouseMove($event)", "document:mouseup": "onDocMouseUp($event)" } }, viewQueries: [{ propertyName: "hoverCardTpl", first: true, predicate: ["hoverCard"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ud-cal\" #calendarHost>\n\n <!-- Header -->\n <div class=\"ud-cal__header\">\n <div class=\"ud-cal__nav\">\n <ud-button variant=\"icon-only\" color=\"secondary\" size=\"sm\" icon=\"chevron_left\" (click)=\"navigate(-1)\" />\n <ud-button variant=\"icon-only\" color=\"secondary\" size=\"sm\" icon=\"chevron_right\" (click)=\"navigate(1)\" />\n <ud-button variant=\"stroked\" color=\"secondary\" size=\"sm\" (click)=\"goToday()\">Today</ud-button>\n </div>\n\n <span class=\"ud-cal__period\">{{ headerLabel() }}</span>\n\n <div class=\"ud-cal__header-right\">\n <div class=\"ud-cal__view-switcher\">\n @for (v of viewOptions; track v.id) {\n <button\n class=\"ud-cal__view-btn\"\n [class.ud-cal__view-btn--active]=\"activeView() === v.id\"\n (click)=\"switchView(v.id)\"\n type=\"button\">\n {{ v.label }}\n </button>\n }\n </div>\n @if (mode() === 'admin') {\n <ud-button variant=\"flat\" color=\"primary\" size=\"sm\" icon=\"add\" (click)=\"openAddModal()\">\n Add slot\n </ud-button>\n }\n </div>\n </div>\n\n <!-- \u2500\u2500 WEEK VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (activeView() === 'week') {\n <div class=\"ud-cal__week-scroll\">\n <div class=\"ud-cal__week-header\">\n <div class=\"ud-cal__time-gutter\"></div>\n @for (day of weekDays(); track day.toISOString()) {\n <div class=\"ud-cal__day-header\" [class.ud-cal__day-header--today]=\"isToday(day)\">\n <span class=\"ud-cal__day-name\">{{ dayLabel(day) }}</span>\n <span class=\"ud-cal__day-num\" [class.ud-cal__day-num--today]=\"isToday(day)\">{{ dayNum(day) }}</span>\n </div>\n }\n </div>\n <div class=\"ud-cal__week-grid\">\n <div class=\"ud-cal__time-col\">\n @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n <div class=\"ud-cal__time-cell\">\n @if (ts.label) {\n <span class=\"ud-cal__time-label\">{{ ts.label }}</span>\n }\n </div>\n }\n </div>\n @for (day of weekDays(); track day.toISOString()) {\n <div class=\"ud-cal__day-col\" [class.ud-cal__day-col--today]=\"isToday(day)\">\n @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n <div\n class=\"ud-cal__grid-cell\"\n [class.ud-cal__grid-cell--half]=\"ts.minute === 30\"\n (click)=\"onCellClick(day, ts.hour, ts.minute)\">\n </div>\n }\n @for (slot of slotsForDay(day); track slot.id) {\n <div\n class=\"ud-cal__slot\"\n [class]=\"'ud-cal__slot--' + slotDensity(slot)\"\n [class.ud-cal__slot--booked]=\"slot.booked\"\n [class.ud-cal__slot--clickable]=\"mode() === 'admin' || (mode() === 'student' && !slot.booked)\"\n [class.ud-cal__slot--dragging]=\"draggingSlot?.id === slot.id && dragMoved\"\n [style.top.px]=\"slotTop(slot)\"\n [style.height.px]=\"slotHeight(slot)\"\n [style.left.%]=\"slotLeft(slot)\"\n [style.width.%]=\"slotWidth(slot)\"\n [style.background]=\"slotBg(slot)\"\n [style.color]=\"slotTextColor(slot)\"\n [style.border-color]=\"slotBorderColor(slot)\"\n (mouseenter)=\"openHoverCard(slot, $event.currentTarget)\"\n (mouseleave)=\"closeHoverCard()\"\n (mousedown)=\"onSlotMouseDown($event, slot)\">\n <div class=\"ud-cal__slot-inner\">\n @if (slot.booked) {\n <mat-icon class=\"ud-cal__slot-lock\">lock</mat-icon>\n }\n @if (slot.title) {\n <span class=\"ud-cal__slot-title\">{{ slot.title }}</span>\n } @else if (slotDensity(slot) === 'compact') {\n <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n }\n </div>\n @if (slotDensity(slot) !== 'compact') {\n <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n }\n @if (slotDensity(slot) === 'comfortable' && slot.booked && slot.bookedBy) {\n <span class=\"ud-cal__slot-booked-by\">{{ slot.bookedBy }}</span>\n }\n </div>\n }\n @if (draggingSlot && dragMoved && dragTarget && isSameDay(dragTarget.day, day)) {\n <div\n class=\"ud-cal__slot ud-cal__slot--drag-preview\"\n [style.top.px]=\"previewTop(dragTarget)\"\n [style.height.px]=\"previewHeight()\"\n [style.background]=\"slotBg(draggingSlot)\"\n [style.color]=\"slotTextColor(draggingSlot)\"\n [style.border-color]=\"slotBorderColor(draggingSlot)\">\n @if (draggingSlot.title) {\n <span class=\"ud-cal__slot-title\">{{ draggingSlot.title }}</span>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n\n <!-- \u2500\u2500 MONTH VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (activeView() === 'month') {\n <div class=\"ud-cal__month\">\n <div class=\"ud-cal__month-header\">\n @for (name of ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; track name) {\n <div class=\"ud-cal__month-day-name\">{{ name }}</div>\n }\n </div>\n <div class=\"ud-cal__month-grid\">\n @for (week of monthWeeks(); track $index) {\n @for (day of week; track day.toISOString()) {\n <div\n class=\"ud-cal__month-cell\"\n [class.ud-cal__month-cell--today]=\"isToday(day)\"\n [class.ud-cal__month-cell--other]=\"!isCurrentMonth(day)\"\n (click)=\"clickDay(day)\">\n <span class=\"ud-cal__month-num\" [class.ud-cal__month-num--today]=\"isToday(day)\">\n {{ dayNum(day) }}\n </span>\n <div class=\"ud-cal__month-dots\">\n @for (slot of slotsForDay(day).slice(0, 3); track slot.id) {\n <span\n class=\"ud-cal__month-dot\"\n [style.background]=\"slotBorderColor(slot)\"\n [title]=\"slot.title ?? formatSlotTime(slot)\">\n </span>\n }\n @if (slotsForDay(day).length > 3) {\n <span class=\"ud-cal__month-more\">+{{ slotsForDay(day).length - 3 }}</span>\n }\n </div>\n </div>\n }\n }\n </div>\n </div>\n }\n\n <!-- \u2500\u2500 DAY VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (activeView() === 'day') {\n <div class=\"ud-cal__week-scroll\">\n <div class=\"ud-cal__week-header\">\n <div class=\"ud-cal__time-gutter\"></div>\n <div class=\"ud-cal__day-header\" [class.ud-cal__day-header--today]=\"isToday(navDate())\">\n <span class=\"ud-cal__day-name\">{{ dayLabel(navDate()) }}</span>\n <span class=\"ud-cal__day-num\" [class.ud-cal__day-num--today]=\"isToday(navDate())\">{{ dayNum(navDate()) }}</span>\n </div>\n </div>\n <div class=\"ud-cal__week-grid\">\n <div class=\"ud-cal__time-col\">\n @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n <div class=\"ud-cal__time-cell\">\n @if (ts.label) {\n <span class=\"ud-cal__time-label\">{{ ts.label }}</span>\n }\n </div>\n }\n </div>\n <div class=\"ud-cal__day-col\" [class.ud-cal__day-col--today]=\"isToday(navDate())\">\n @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n <div\n class=\"ud-cal__grid-cell\"\n [class.ud-cal__grid-cell--half]=\"ts.minute === 30\"\n (click)=\"onCellClick(navDate(), ts.hour, ts.minute)\">\n </div>\n }\n @for (slot of slotsForDay(navDate()); track slot.id) {\n <div\n class=\"ud-cal__slot\"\n [class]=\"'ud-cal__slot--' + slotDensity(slot)\"\n [class.ud-cal__slot--booked]=\"slot.booked\"\n [class.ud-cal__slot--clickable]=\"mode() === 'admin' || (mode() === 'student' && !slot.booked)\"\n [class.ud-cal__slot--dragging]=\"draggingSlot?.id === slot.id && dragMoved\"\n [style.top.px]=\"slotTop(slot)\"\n [style.height.px]=\"slotHeight(slot)\"\n [style.left.%]=\"slotLeft(slot)\"\n [style.width.%]=\"slotWidth(slot)\"\n [style.background]=\"slotBg(slot)\"\n [style.color]=\"slotTextColor(slot)\"\n [style.border-color]=\"slotBorderColor(slot)\"\n (mouseenter)=\"openHoverCard(slot, $event.currentTarget)\"\n (mouseleave)=\"closeHoverCard()\"\n (mousedown)=\"onSlotMouseDown($event, slot)\">\n <div class=\"ud-cal__slot-inner\">\n @if (slot.booked) {\n <mat-icon class=\"ud-cal__slot-lock\">lock</mat-icon>\n }\n @if (slot.title) {\n <span class=\"ud-cal__slot-title\">{{ slot.title }}</span>\n } @else if (slotDensity(slot) === 'compact') {\n <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n }\n </div>\n @if (slotDensity(slot) !== 'compact') {\n <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n }\n @if (slotDensity(slot) === 'comfortable' && slot.booked && slot.bookedBy) {\n <span class=\"ud-cal__slot-booked-by\">{{ slot.bookedBy }}</span>\n }\n </div>\n }\n @if (draggingSlot && dragMoved && dragTarget) {\n <div\n class=\"ud-cal__slot ud-cal__slot--drag-preview\"\n [style.top.px]=\"previewTop(dragTarget)\"\n [style.height.px]=\"previewHeight()\"\n [style.background]=\"slotBg(draggingSlot)\"\n [style.color]=\"slotTextColor(draggingSlot)\"\n [style.border-color]=\"slotBorderColor(draggingSlot)\">\n @if (draggingSlot.title) {\n <span class=\"ud-cal__slot-title\">{{ draggingSlot.title }}</span>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }\n\n</div>\n\n<!-- \u2500\u2500 Rich hover card (rendered in a CDK overlay) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #hoverCard>\n @if (hoverSlot(); as s) {\n <div\n class=\"ud-cal__hovercard\"\n [class.ud-cal__hovercard--booked]=\"s.booked\"\n [style.--hc-accent]=\"slotBorderColor(s)\"\n (mouseenter)=\"cancelHoverClose()\"\n (mouseleave)=\"closeHoverCard()\">\n <span class=\"ud-cal__hovercard-bar\"></span>\n <div class=\"ud-cal__hovercard-body\">\n <div class=\"ud-cal__hovercard-head\">\n <span class=\"ud-cal__hovercard-title\">{{ s.title || 'Untitled slot' }}</span>\n <span class=\"ud-cal__hovercard-pill\" [class.ud-cal__hovercard-pill--booked]=\"s.booked\">\n <span class=\"ud-cal__hovercard-pill-dot\"></span>\n {{ s.booked ? 'Booked' : 'Available' }}\n </span>\n </div>\n\n <div class=\"ud-cal__hovercard-row\">\n <mat-icon class=\"ud-cal__hovercard-ico\">schedule</mat-icon>\n <span class=\"ud-cal__hovercard-time\">{{ formatSlotTime(s) }}</span>\n <span class=\"ud-cal__hovercard-dur\">{{ slotDurationLabel(s) }}</span>\n </div>\n\n @if (s.booked && s.bookedBy) {\n <div class=\"ud-cal__hovercard-row ud-cal__hovercard-person\">\n <span class=\"ud-cal__hovercard-avatar\" [style.background]=\"slotBorderColor(s)\">\n {{ slotInitials(s.bookedBy) }}\n </span>\n <span class=\"ud-cal__hovercard-person-name\">{{ s.bookedBy }}</span>\n </div>\n }\n </div>\n </div>\n }\n</ng-template>\n\n", styles: [":host{display:block;width:100%;font-family:DM Sans,system-ui,sans-serif}.ud-cal{position:relative;background:#fff;border:1px solid var(--eu-border-mid, #d8dde6);border-radius:12px;box-shadow:0 2px 8px #1b25350f;overflow:hidden}.ud-cal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--eu-border-light, #e8eaef);gap:12px;flex-wrap:wrap}.ud-cal__nav{display:flex;align-items:center;gap:4px}.ud-cal__period{flex:1;text-align:center;font-size:14px;font-weight:600;color:var(--eu-text, #2a3548);white-space:nowrap}.ud-cal__header-right{display:flex;align-items:center;gap:10px}.ud-cal__view-switcher{display:flex;align-items:center;background:var(--eu-bg, #f4f5f7);border-radius:8px;padding:3px;gap:2px}.ud-cal__view-btn{padding:4px 12px;border:none;border-radius:6px;background:transparent;font-family:DM Sans,system-ui,sans-serif;font-size:12px;font-weight:500;color:var(--eu-muted, #6b7585);cursor:pointer;transition:background .15s,color .15s}.ud-cal__view-btn--active{background:var(--eu-navy, #1b2535);color:#fff}.ud-cal__view-btn:not(.ud-cal__view-btn--active):hover{background:#1b253514;color:var(--eu-text, #2a3548)}.ud-cal__week-scroll{overflow-y:auto;max-height:580px}.ud-cal__week-header{position:sticky;top:0;z-index:10;display:flex;background:#fafbfc;border-bottom:1px solid var(--eu-border-light, #e8eaef);flex-shrink:0}.ud-cal__time-gutter{width:52px;flex-shrink:0;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-header{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;gap:2px;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-header:last-child{border-right:none}.ud-cal__day-header--today{background:#1b25350a}.ud-cal__day-name{font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);text-transform:uppercase;letter-spacing:.06em}.ud-cal__day-num{font-size:15px;font-weight:600;color:var(--eu-text, #2a3548)}.ud-cal__day-num--today{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--eu-navy, #1b2535);color:#fff;border-radius:50%;font-size:13px}.ud-cal__week-grid{display:flex}.ud-cal__time-col{width:52px;flex-shrink:0;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__time-cell{height:56px;position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding:0 6px}.ud-cal__time-label{font-size:10px;color:var(--eu-muted, #9099a8);font-weight:500;white-space:nowrap;margin-top:-6px}.ud-cal__day-col{flex:1;position:relative;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-col:last-child{border-right:none}.ud-cal__day-col--today{background:#1b253506}.ud-cal__grid-cell{height:56px;border-bottom:1px solid var(--eu-border-light, #e8eaef);transition:background .1s;cursor:pointer}.ud-cal__grid-cell--half{border-bottom-style:dashed;border-bottom-color:#d8dde673}.ud-cal__grid-cell:hover{background:#1b253508}.ud-cal__slot{position:absolute;margin-left:2px;box-sizing:border-box;border-left:3px solid;border-radius:6px;padding:3px 6px;display:flex;flex-direction:column;gap:1px;overflow:hidden;z-index:1;transition:filter .15s,transform .1s}.ud-cal__slot--clickable{cursor:grab}.ud-cal__slot--clickable:hover{filter:brightness(.93);transform:translate(1px)}.ud-cal__slot--cozy{padding:2px 6px;gap:0}.ud-cal__slot--compact{padding:1px 6px;gap:0;flex-direction:row;align-items:center;justify-content:flex-start}.ud-cal__slot-inner{display:flex;align-items:center;gap:3px;overflow:hidden;min-width:0}.ud-cal__slot-title{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;min-width:0}.ud-cal__slot-time{font-size:10px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.ud-cal__slot--dragging{opacity:.3;pointer-events:none}.ud-cal__slot--drag-preview{left:3px;right:3px;margin-left:0;pointer-events:none;opacity:.75;border-left-style:dashed;border-top:1px dashed currentColor;z-index:2}.ud-cal__slot--booked{background-image:repeating-linear-gradient(-45deg,transparent,transparent 4px,rgba(229,57,53,.07) 4px,rgba(229,57,53,.07) 8px)!important;cursor:not-allowed;border-top:1px solid rgba(229,57,53,.18)}.ud-cal__slot--booked:hover{filter:none!important;transform:none!important}.ud-cal__slot--booked .ud-cal__slot-title{text-decoration:line-through;text-decoration-color:#c6282866;text-decoration-thickness:1px;opacity:.9}.ud-cal__slot-lock{font-size:10px!important;width:10px!important;height:10px!important;line-height:10px!important;flex-shrink:0;opacity:.7}.ud-cal__slot-booked-by{font-size:9px;font-weight:500;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em;margin-top:1px}.ud-cal__month{display:flex;flex-direction:column}.ud-cal__month-header{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--eu-border-light, #e8eaef);background:#fafbfc}.ud-cal__month-day-name{text-align:center;padding:8px 4px;font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);text-transform:uppercase;letter-spacing:.06em;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__month-day-name:last-child{border-right:none}.ud-cal__month-grid{display:grid;grid-template-columns:repeat(7,1fr)}.ud-cal__month-cell{min-height:80px;padding:6px;border-right:1px solid var(--eu-border-light, #e8eaef);border-bottom:1px solid var(--eu-border-light, #e8eaef);cursor:pointer;transition:background .12s}.ud-cal__month-cell:nth-child(7n){border-right:none}.ud-cal__month-cell:hover{background:#1b253508}.ud-cal__month-cell--today{background:#1b25350a}.ud-cal__month-cell--other{opacity:.4}.ud-cal__month-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:12px;font-weight:600;color:var(--eu-text, #2a3548);border-radius:50%}.ud-cal__month-num--today{background:var(--eu-navy, #1b2535);color:#fff}.ud-cal__month-dots{display:flex;flex-wrap:wrap;align-items:center;gap:3px;margin-top:4px}.ud-cal__month-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.ud-cal__month-more{font-size:9px;font-weight:600;color:var(--eu-muted, #6b7585)}.ud-cal__hovercard{--hc-accent: var(--eu-navy, #1b2535);position:relative;display:flex;min-width:208px;max-width:288px;background:#fff;border:1px solid var(--eu-border-light, #e8eaef);border-radius:12px;overflow:hidden;font-family:DM Sans,system-ui,sans-serif;box-shadow:0 1px 2px #1b25350d,0 14px 30px -10px #1b25353d;transform-origin:top left;animation:ud-cal-hovercard-in .17s cubic-bezier(.16,1,.3,1) both}.ud-cal__hovercard:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,color-mix(in srgb,var(--hc-accent) 6%,transparent),transparent 55%)}@keyframes ud-cal-hovercard-in{0%{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.ud-cal__hovercard-bar{width:4px;flex-shrink:0;background:var(--hc-accent)}.ud-cal__hovercard-body{position:relative;z-index:1;flex:1;min-width:0;padding:12px 14px 13px;display:flex;flex-direction:column;gap:9px}.ud-cal__hovercard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.ud-cal__hovercard-title{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--eu-text, #2a3548);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ud-cal__hovercard-pill{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;padding:3px 9px 3px 7px;border-radius:999px;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#10b98121;color:#0e9f6e}.ud-cal__hovercard-pill--booked{background:#e539351f;color:#d33730}.ud-cal__hovercard-pill-dot{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}.ud-cal__hovercard-row{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--eu-muted, #6b7585)}.ud-cal__hovercard-ico{font-size:16px!important;width:16px!important;height:16px!important;line-height:16px!important;color:var(--hc-accent);opacity:.9}.ud-cal__hovercard-time{color:var(--eu-text, #2a3548);font-weight:600;font-variant-numeric:tabular-nums}.ud-cal__hovercard-dur{margin-left:auto;font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);background:var(--eu-bg, #f4f5f7);border:1px solid var(--eu-border-light, #e8eaef);padding:1px 8px;border-radius:6px;white-space:nowrap}.ud-cal__hovercard-person{padding-top:8px;border-top:1px dashed var(--eu-border-light, #e8eaef)}.ud-cal__hovercard-avatar{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--hc-accent);color:#fff;font-size:9px;font-weight:700;letter-spacing:.03em;flex-shrink:0}.ud-cal__hovercard-person-name{color:var(--eu-text, #2a3548);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: UdButtonComponent, selector: "ud-button", inputs: ["variant", "color", "size", "type", "icon", "iconPosition", "iconFontSet", "loading", "disabled", "fullWidth"] }] });
|
|
3639
3801
|
}
|
|
3640
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3802
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
3641
3803
|
type: Component,
|
|
3642
|
-
args: [{ selector: 'ud-calendar', standalone: true, imports: [MatIcon, UdButtonComponent], template: "<div class=\"ud-cal\" #calendarHost>\n\n <!-- Header -->\n <div class=\"ud-cal__header\">\n <div class=\"ud-cal__nav\">\n <ud-button variant=\"icon-only\" color=\"secondary\" size=\"sm\" icon=\"chevron_left\" (click)=\"navigate(-1)\" />\n <ud-button variant=\"icon-only\" color=\"secondary\" size=\"sm\" icon=\"chevron_right\" (click)=\"navigate(1)\" />\n <ud-button variant=\"stroked\" color=\"secondary\" size=\"sm\" (click)=\"goToday()\">Today</ud-button>\n </div>\n\n <span class=\"ud-cal__period\">{{ headerLabel() }}</span>\n\n <div class=\"ud-cal__header-right\">\n <div class=\"ud-cal__view-switcher\">\n @for (v of viewOptions; track v.id) {\n <button\n class=\"ud-cal__view-btn\"\n [class.ud-cal__view-btn--active]=\"activeView() === v.id\"\n (click)=\"switchView(v.id)\"\n type=\"button\">\n {{ v.label }}\n </button>\n }\n </div>\n @if (mode() === 'admin') {\n <ud-button variant=\"flat\" color=\"primary\" size=\"sm\" icon=\"add\" (click)=\"openAddModal()\">\n Add slot\n </ud-button>\n }\n </div>\n </div>\n\n <!-- \u2500\u2500 WEEK VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (activeView() === 'week') {\n <div class=\"ud-cal__week-scroll\">\n <div class=\"ud-cal__week-header\">\n <div class=\"ud-cal__time-gutter\"></div>\n @for (day of weekDays(); track day.toISOString()) {\n <div class=\"ud-cal__day-header\" [class.ud-cal__day-header--today]=\"isToday(day)\">\n <span class=\"ud-cal__day-name\">{{ dayLabel(day) }}</span>\n <span class=\"ud-cal__day-num\" [class.ud-cal__day-num--today]=\"isToday(day)\">{{ dayNum(day) }}</span>\n </div>\n }\n </div>\n <div class=\"ud-cal__week-grid\">\n <div class=\"ud-cal__time-col\">\n @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n <div class=\"ud-cal__time-cell\">\n @if (ts.label) {\n <span class=\"ud-cal__time-label\">{{ ts.label }}</span>\n }\n </div>\n }\n </div>\n @for (day of weekDays(); track day.toISOString()) {\n <div class=\"ud-cal__day-col\" [class.ud-cal__day-col--today]=\"isToday(day)\">\n @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n <div\n class=\"ud-cal__grid-cell\"\n [class.ud-cal__grid-cell--half]=\"ts.minute === 30\"\n (click)=\"onCellClick(day, ts.hour, ts.minute)\">\n </div>\n }\n @for (slot of slotsForDay(day); track slot.id) {\n <div\n class=\"ud-cal__slot\"\n [class.ud-cal__slot--booked]=\"slot.booked\"\n [class.ud-cal__slot--clickable]=\"mode() === 'admin' || (mode() === 'student' && !slot.booked)\"\n [class.ud-cal__slot--dragging]=\"draggingSlot?.id === slot.id && dragMoved\"\n [style.top.px]=\"slotTop(slot)\"\n [style.height.px]=\"slotHeight(slot)\"\n [style.background]=\"slotBg(slot)\"\n [style.color]=\"slotTextColor(slot)\"\n [style.border-color]=\"slotBorderColor(slot)\"\n (mousedown)=\"onSlotMouseDown($event, slot)\">\n <div class=\"ud-cal__slot-inner\">\n @if (slot.booked) {\n <mat-icon class=\"ud-cal__slot-lock\">lock</mat-icon>\n }\n @if (slot.title) {\n <span class=\"ud-cal__slot-title\">{{ slot.title }}</span>\n }\n </div>\n <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n @if (slot.booked && slot.bookedBy) {\n <span class=\"ud-cal__slot-booked-by\">{{ slot.bookedBy }}</span>\n }\n </div>\n }\n @if (draggingSlot && dragMoved && dragTarget && isSameDay(dragTarget.day, day)) {\n <div\n class=\"ud-cal__slot ud-cal__slot--drag-preview\"\n [style.top.px]=\"previewTop(dragTarget)\"\n [style.height.px]=\"previewHeight()\"\n [style.background]=\"slotBg(draggingSlot)\"\n [style.color]=\"slotTextColor(draggingSlot)\"\n [style.border-color]=\"slotBorderColor(draggingSlot)\">\n @if (draggingSlot.title) {\n <span class=\"ud-cal__slot-title\">{{ draggingSlot.title }}</span>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n\n <!-- \u2500\u2500 MONTH VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (activeView() === 'month') {\n <div class=\"ud-cal__month\">\n <div class=\"ud-cal__month-header\">\n @for (name of ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; track name) {\n <div class=\"ud-cal__month-day-name\">{{ name }}</div>\n }\n </div>\n <div class=\"ud-cal__month-grid\">\n @for (week of monthWeeks(); track $index) {\n @for (day of week; track day.toISOString()) {\n <div\n class=\"ud-cal__month-cell\"\n [class.ud-cal__month-cell--today]=\"isToday(day)\"\n [class.ud-cal__month-cell--other]=\"!isCurrentMonth(day)\"\n (click)=\"clickDay(day)\">\n <span class=\"ud-cal__month-num\" [class.ud-cal__month-num--today]=\"isToday(day)\">\n {{ dayNum(day) }}\n </span>\n <div class=\"ud-cal__month-dots\">\n @for (slot of slotsForDay(day).slice(0, 3); track slot.id) {\n <span\n class=\"ud-cal__month-dot\"\n [style.background]=\"slotBorderColor(slot)\"\n [title]=\"slot.title ?? formatSlotTime(slot)\">\n </span>\n }\n @if (slotsForDay(day).length > 3) {\n <span class=\"ud-cal__month-more\">+{{ slotsForDay(day).length - 3 }}</span>\n }\n </div>\n </div>\n }\n }\n </div>\n </div>\n }\n\n <!-- \u2500\u2500 DAY VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (activeView() === 'day') {\n <div class=\"ud-cal__week-scroll\">\n <div class=\"ud-cal__week-header\">\n <div class=\"ud-cal__time-gutter\"></div>\n <div class=\"ud-cal__day-header\" [class.ud-cal__day-header--today]=\"isToday(navDate())\">\n <span class=\"ud-cal__day-name\">{{ dayLabel(navDate()) }}</span>\n <span class=\"ud-cal__day-num\" [class.ud-cal__day-num--today]=\"isToday(navDate())\">{{ dayNum(navDate()) }}</span>\n </div>\n </div>\n <div class=\"ud-cal__week-grid\">\n <div class=\"ud-cal__time-col\">\n @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n <div class=\"ud-cal__time-cell\">\n @if (ts.label) {\n <span class=\"ud-cal__time-label\">{{ ts.label }}</span>\n }\n </div>\n }\n </div>\n <div class=\"ud-cal__day-col\" [class.ud-cal__day-col--today]=\"isToday(navDate())\">\n @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n <div\n class=\"ud-cal__grid-cell\"\n [class.ud-cal__grid-cell--half]=\"ts.minute === 30\"\n (click)=\"onCellClick(navDate(), ts.hour, ts.minute)\">\n </div>\n }\n @for (slot of slotsForDay(navDate()); track slot.id) {\n <div\n class=\"ud-cal__slot\"\n [class.ud-cal__slot--booked]=\"slot.booked\"\n [class.ud-cal__slot--clickable]=\"mode() === 'admin' || (mode() === 'student' && !slot.booked)\"\n [class.ud-cal__slot--dragging]=\"draggingSlot?.id === slot.id && dragMoved\"\n [style.top.px]=\"slotTop(slot)\"\n [style.height.px]=\"slotHeight(slot)\"\n [style.background]=\"slotBg(slot)\"\n [style.color]=\"slotTextColor(slot)\"\n [style.border-color]=\"slotBorderColor(slot)\"\n (mousedown)=\"onSlotMouseDown($event, slot)\">\n <div class=\"ud-cal__slot-inner\">\n @if (slot.booked) {\n <mat-icon class=\"ud-cal__slot-lock\">lock</mat-icon>\n }\n @if (slot.title) {\n <span class=\"ud-cal__slot-title\">{{ slot.title }}</span>\n }\n </div>\n <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n @if (slot.booked && slot.bookedBy) {\n <span class=\"ud-cal__slot-booked-by\">{{ slot.bookedBy }}</span>\n }\n </div>\n }\n @if (draggingSlot && dragMoved && dragTarget) {\n <div\n class=\"ud-cal__slot ud-cal__slot--drag-preview\"\n [style.top.px]=\"previewTop(dragTarget)\"\n [style.height.px]=\"previewHeight()\"\n [style.background]=\"slotBg(draggingSlot)\"\n [style.color]=\"slotTextColor(draggingSlot)\"\n [style.border-color]=\"slotBorderColor(draggingSlot)\">\n @if (draggingSlot.title) {\n <span class=\"ud-cal__slot-title\">{{ draggingSlot.title }}</span>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }\n\n</div>\n\n", styles: [":host{display:block;width:100%;font-family:DM Sans,system-ui,sans-serif}.ud-cal{position:relative;background:#fff;border:1px solid var(--eu-border-mid, #d8dde6);border-radius:12px;box-shadow:0 2px 8px #1b25350f;overflow:hidden}.ud-cal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--eu-border-light, #e8eaef);gap:12px;flex-wrap:wrap}.ud-cal__nav{display:flex;align-items:center;gap:4px}.ud-cal__period{flex:1;text-align:center;font-size:14px;font-weight:600;color:var(--eu-text, #2a3548);white-space:nowrap}.ud-cal__header-right{display:flex;align-items:center;gap:10px}.ud-cal__view-switcher{display:flex;align-items:center;background:var(--eu-bg, #f4f5f7);border-radius:8px;padding:3px;gap:2px}.ud-cal__view-btn{padding:4px 12px;border:none;border-radius:6px;background:transparent;font-family:DM Sans,system-ui,sans-serif;font-size:12px;font-weight:500;color:var(--eu-muted, #6b7585);cursor:pointer;transition:background .15s,color .15s}.ud-cal__view-btn--active{background:var(--eu-navy, #1b2535);color:#fff}.ud-cal__view-btn:not(.ud-cal__view-btn--active):hover{background:#1b253514;color:var(--eu-text, #2a3548)}.ud-cal__week-scroll{overflow-y:auto;max-height:580px}.ud-cal__week-header{position:sticky;top:0;z-index:10;display:flex;background:#fafbfc;border-bottom:1px solid var(--eu-border-light, #e8eaef);flex-shrink:0}.ud-cal__time-gutter{width:52px;flex-shrink:0;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-header{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;gap:2px;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-header:last-child{border-right:none}.ud-cal__day-header--today{background:#1b25350a}.ud-cal__day-name{font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);text-transform:uppercase;letter-spacing:.06em}.ud-cal__day-num{font-size:15px;font-weight:600;color:var(--eu-text, #2a3548)}.ud-cal__day-num--today{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--eu-navy, #1b2535);color:#fff;border-radius:50%;font-size:13px}.ud-cal__week-grid{display:flex}.ud-cal__time-col{width:52px;flex-shrink:0;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__time-cell{height:56px;position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding:0 6px}.ud-cal__time-label{font-size:10px;color:var(--eu-muted, #9099a8);font-weight:500;white-space:nowrap;margin-top:-6px}.ud-cal__day-col{flex:1;position:relative;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-col:last-child{border-right:none}.ud-cal__day-col--today{background:#1b253506}.ud-cal__grid-cell{height:56px;border-bottom:1px solid var(--eu-border-light, #e8eaef);transition:background .1s;cursor:pointer}.ud-cal__grid-cell--half{border-bottom-style:dashed;border-bottom-color:#d8dde673}.ud-cal__grid-cell:hover{background:#1b253508}.ud-cal__slot{position:absolute;left:3px;right:3px;border-left:3px solid;border-radius:6px;padding:3px 6px;display:flex;flex-direction:column;gap:1px;overflow:hidden;z-index:1;transition:filter .15s,transform .1s}.ud-cal__slot--clickable{cursor:grab}.ud-cal__slot--clickable:hover{filter:brightness(.93);transform:translate(1px)}.ud-cal__slot-inner{display:flex;align-items:center;gap:3px;overflow:hidden;min-width:0}.ud-cal__slot-title{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;min-width:0}.ud-cal__slot-time{font-size:10px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.ud-cal__slot--dragging{opacity:.3;pointer-events:none}.ud-cal__slot--drag-preview{pointer-events:none;opacity:.75;border-left-style:dashed;border-top:1px dashed currentColor;z-index:2}.ud-cal__slot--booked{background-image:repeating-linear-gradient(-45deg,transparent,transparent 4px,rgba(229,57,53,.07) 4px,rgba(229,57,53,.07) 8px)!important;cursor:not-allowed;border-top:1px solid rgba(229,57,53,.18)}.ud-cal__slot--booked:hover{filter:none!important;transform:none!important}.ud-cal__slot--booked .ud-cal__slot-title{text-decoration:line-through;text-decoration-color:#c6282866;text-decoration-thickness:1px;opacity:.9}.ud-cal__slot-lock{font-size:10px!important;width:10px!important;height:10px!important;line-height:10px!important;flex-shrink:0;opacity:.7}.ud-cal__slot-booked-by{font-size:9px;font-weight:500;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em;margin-top:1px}.ud-cal__month{display:flex;flex-direction:column}.ud-cal__month-header{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--eu-border-light, #e8eaef);background:#fafbfc}.ud-cal__month-day-name{text-align:center;padding:8px 4px;font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);text-transform:uppercase;letter-spacing:.06em;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__month-day-name:last-child{border-right:none}.ud-cal__month-grid{display:grid;grid-template-columns:repeat(7,1fr)}.ud-cal__month-cell{min-height:80px;padding:6px;border-right:1px solid var(--eu-border-light, #e8eaef);border-bottom:1px solid var(--eu-border-light, #e8eaef);cursor:pointer;transition:background .12s}.ud-cal__month-cell:nth-child(7n){border-right:none}.ud-cal__month-cell:hover{background:#1b253508}.ud-cal__month-cell--today{background:#1b25350a}.ud-cal__month-cell--other{opacity:.4}.ud-cal__month-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:12px;font-weight:600;color:var(--eu-text, #2a3548);border-radius:50%}.ud-cal__month-num--today{background:var(--eu-navy, #1b2535);color:#fff}.ud-cal__month-dots{display:flex;flex-wrap:wrap;align-items:center;gap:3px;margin-top:4px}.ud-cal__month-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.ud-cal__month-more{font-size:9px;font-weight:600;color:var(--eu-muted, #6b7585)}\n"] }]
|
|
3804
|
+
args: [{ selector: 'ud-calendar', standalone: true, imports: [MatIcon, UdButtonComponent], template: "<div class=\"ud-cal\" #calendarHost>\n\n <!-- Header -->\n <div class=\"ud-cal__header\">\n <div class=\"ud-cal__nav\">\n <ud-button variant=\"icon-only\" color=\"secondary\" size=\"sm\" icon=\"chevron_left\" (click)=\"navigate(-1)\" />\n <ud-button variant=\"icon-only\" color=\"secondary\" size=\"sm\" icon=\"chevron_right\" (click)=\"navigate(1)\" />\n <ud-button variant=\"stroked\" color=\"secondary\" size=\"sm\" (click)=\"goToday()\">Today</ud-button>\n </div>\n\n <span class=\"ud-cal__period\">{{ headerLabel() }}</span>\n\n <div class=\"ud-cal__header-right\">\n <div class=\"ud-cal__view-switcher\">\n @for (v of viewOptions; track v.id) {\n <button\n class=\"ud-cal__view-btn\"\n [class.ud-cal__view-btn--active]=\"activeView() === v.id\"\n (click)=\"switchView(v.id)\"\n type=\"button\">\n {{ v.label }}\n </button>\n }\n </div>\n @if (mode() === 'admin') {\n <ud-button variant=\"flat\" color=\"primary\" size=\"sm\" icon=\"add\" (click)=\"openAddModal()\">\n Add slot\n </ud-button>\n }\n </div>\n </div>\n\n <!-- \u2500\u2500 WEEK VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (activeView() === 'week') {\n <div class=\"ud-cal__week-scroll\">\n <div class=\"ud-cal__week-header\">\n <div class=\"ud-cal__time-gutter\"></div>\n @for (day of weekDays(); track day.toISOString()) {\n <div class=\"ud-cal__day-header\" [class.ud-cal__day-header--today]=\"isToday(day)\">\n <span class=\"ud-cal__day-name\">{{ dayLabel(day) }}</span>\n <span class=\"ud-cal__day-num\" [class.ud-cal__day-num--today]=\"isToday(day)\">{{ dayNum(day) }}</span>\n </div>\n }\n </div>\n <div class=\"ud-cal__week-grid\">\n <div class=\"ud-cal__time-col\">\n @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n <div class=\"ud-cal__time-cell\">\n @if (ts.label) {\n <span class=\"ud-cal__time-label\">{{ ts.label }}</span>\n }\n </div>\n }\n </div>\n @for (day of weekDays(); track day.toISOString()) {\n <div class=\"ud-cal__day-col\" [class.ud-cal__day-col--today]=\"isToday(day)\">\n @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n <div\n class=\"ud-cal__grid-cell\"\n [class.ud-cal__grid-cell--half]=\"ts.minute === 30\"\n (click)=\"onCellClick(day, ts.hour, ts.minute)\">\n </div>\n }\n @for (slot of slotsForDay(day); track slot.id) {\n <div\n class=\"ud-cal__slot\"\n [class]=\"'ud-cal__slot--' + slotDensity(slot)\"\n [class.ud-cal__slot--booked]=\"slot.booked\"\n [class.ud-cal__slot--clickable]=\"mode() === 'admin' || (mode() === 'student' && !slot.booked)\"\n [class.ud-cal__slot--dragging]=\"draggingSlot?.id === slot.id && dragMoved\"\n [style.top.px]=\"slotTop(slot)\"\n [style.height.px]=\"slotHeight(slot)\"\n [style.left.%]=\"slotLeft(slot)\"\n [style.width.%]=\"slotWidth(slot)\"\n [style.background]=\"slotBg(slot)\"\n [style.color]=\"slotTextColor(slot)\"\n [style.border-color]=\"slotBorderColor(slot)\"\n (mouseenter)=\"openHoverCard(slot, $event.currentTarget)\"\n (mouseleave)=\"closeHoverCard()\"\n (mousedown)=\"onSlotMouseDown($event, slot)\">\n <div class=\"ud-cal__slot-inner\">\n @if (slot.booked) {\n <mat-icon class=\"ud-cal__slot-lock\">lock</mat-icon>\n }\n @if (slot.title) {\n <span class=\"ud-cal__slot-title\">{{ slot.title }}</span>\n } @else if (slotDensity(slot) === 'compact') {\n <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n }\n </div>\n @if (slotDensity(slot) !== 'compact') {\n <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n }\n @if (slotDensity(slot) === 'comfortable' && slot.booked && slot.bookedBy) {\n <span class=\"ud-cal__slot-booked-by\">{{ slot.bookedBy }}</span>\n }\n </div>\n }\n @if (draggingSlot && dragMoved && dragTarget && isSameDay(dragTarget.day, day)) {\n <div\n class=\"ud-cal__slot ud-cal__slot--drag-preview\"\n [style.top.px]=\"previewTop(dragTarget)\"\n [style.height.px]=\"previewHeight()\"\n [style.background]=\"slotBg(draggingSlot)\"\n [style.color]=\"slotTextColor(draggingSlot)\"\n [style.border-color]=\"slotBorderColor(draggingSlot)\">\n @if (draggingSlot.title) {\n <span class=\"ud-cal__slot-title\">{{ draggingSlot.title }}</span>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n\n <!-- \u2500\u2500 MONTH VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (activeView() === 'month') {\n <div class=\"ud-cal__month\">\n <div class=\"ud-cal__month-header\">\n @for (name of ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; track name) {\n <div class=\"ud-cal__month-day-name\">{{ name }}</div>\n }\n </div>\n <div class=\"ud-cal__month-grid\">\n @for (week of monthWeeks(); track $index) {\n @for (day of week; track day.toISOString()) {\n <div\n class=\"ud-cal__month-cell\"\n [class.ud-cal__month-cell--today]=\"isToday(day)\"\n [class.ud-cal__month-cell--other]=\"!isCurrentMonth(day)\"\n (click)=\"clickDay(day)\">\n <span class=\"ud-cal__month-num\" [class.ud-cal__month-num--today]=\"isToday(day)\">\n {{ dayNum(day) }}\n </span>\n <div class=\"ud-cal__month-dots\">\n @for (slot of slotsForDay(day).slice(0, 3); track slot.id) {\n <span\n class=\"ud-cal__month-dot\"\n [style.background]=\"slotBorderColor(slot)\"\n [title]=\"slot.title ?? formatSlotTime(slot)\">\n </span>\n }\n @if (slotsForDay(day).length > 3) {\n <span class=\"ud-cal__month-more\">+{{ slotsForDay(day).length - 3 }}</span>\n }\n </div>\n </div>\n }\n }\n </div>\n </div>\n }\n\n <!-- \u2500\u2500 DAY VIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (activeView() === 'day') {\n <div class=\"ud-cal__week-scroll\">\n <div class=\"ud-cal__week-header\">\n <div class=\"ud-cal__time-gutter\"></div>\n <div class=\"ud-cal__day-header\" [class.ud-cal__day-header--today]=\"isToday(navDate())\">\n <span class=\"ud-cal__day-name\">{{ dayLabel(navDate()) }}</span>\n <span class=\"ud-cal__day-num\" [class.ud-cal__day-num--today]=\"isToday(navDate())\">{{ dayNum(navDate()) }}</span>\n </div>\n </div>\n <div class=\"ud-cal__week-grid\">\n <div class=\"ud-cal__time-col\">\n @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n <div class=\"ud-cal__time-cell\">\n @if (ts.label) {\n <span class=\"ud-cal__time-label\">{{ ts.label }}</span>\n }\n </div>\n }\n </div>\n <div class=\"ud-cal__day-col\" [class.ud-cal__day-col--today]=\"isToday(navDate())\">\n @for (ts of timeSlots(); track ts.hour + ':' + ts.minute) {\n <div\n class=\"ud-cal__grid-cell\"\n [class.ud-cal__grid-cell--half]=\"ts.minute === 30\"\n (click)=\"onCellClick(navDate(), ts.hour, ts.minute)\">\n </div>\n }\n @for (slot of slotsForDay(navDate()); track slot.id) {\n <div\n class=\"ud-cal__slot\"\n [class]=\"'ud-cal__slot--' + slotDensity(slot)\"\n [class.ud-cal__slot--booked]=\"slot.booked\"\n [class.ud-cal__slot--clickable]=\"mode() === 'admin' || (mode() === 'student' && !slot.booked)\"\n [class.ud-cal__slot--dragging]=\"draggingSlot?.id === slot.id && dragMoved\"\n [style.top.px]=\"slotTop(slot)\"\n [style.height.px]=\"slotHeight(slot)\"\n [style.left.%]=\"slotLeft(slot)\"\n [style.width.%]=\"slotWidth(slot)\"\n [style.background]=\"slotBg(slot)\"\n [style.color]=\"slotTextColor(slot)\"\n [style.border-color]=\"slotBorderColor(slot)\"\n (mouseenter)=\"openHoverCard(slot, $event.currentTarget)\"\n (mouseleave)=\"closeHoverCard()\"\n (mousedown)=\"onSlotMouseDown($event, slot)\">\n <div class=\"ud-cal__slot-inner\">\n @if (slot.booked) {\n <mat-icon class=\"ud-cal__slot-lock\">lock</mat-icon>\n }\n @if (slot.title) {\n <span class=\"ud-cal__slot-title\">{{ slot.title }}</span>\n } @else if (slotDensity(slot) === 'compact') {\n <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n }\n </div>\n @if (slotDensity(slot) !== 'compact') {\n <span class=\"ud-cal__slot-time\">{{ formatSlotTime(slot) }}</span>\n }\n @if (slotDensity(slot) === 'comfortable' && slot.booked && slot.bookedBy) {\n <span class=\"ud-cal__slot-booked-by\">{{ slot.bookedBy }}</span>\n }\n </div>\n }\n @if (draggingSlot && dragMoved && dragTarget) {\n <div\n class=\"ud-cal__slot ud-cal__slot--drag-preview\"\n [style.top.px]=\"previewTop(dragTarget)\"\n [style.height.px]=\"previewHeight()\"\n [style.background]=\"slotBg(draggingSlot)\"\n [style.color]=\"slotTextColor(draggingSlot)\"\n [style.border-color]=\"slotBorderColor(draggingSlot)\">\n @if (draggingSlot.title) {\n <span class=\"ud-cal__slot-title\">{{ draggingSlot.title }}</span>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }\n\n</div>\n\n<!-- \u2500\u2500 Rich hover card (rendered in a CDK overlay) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #hoverCard>\n @if (hoverSlot(); as s) {\n <div\n class=\"ud-cal__hovercard\"\n [class.ud-cal__hovercard--booked]=\"s.booked\"\n [style.--hc-accent]=\"slotBorderColor(s)\"\n (mouseenter)=\"cancelHoverClose()\"\n (mouseleave)=\"closeHoverCard()\">\n <span class=\"ud-cal__hovercard-bar\"></span>\n <div class=\"ud-cal__hovercard-body\">\n <div class=\"ud-cal__hovercard-head\">\n <span class=\"ud-cal__hovercard-title\">{{ s.title || 'Untitled slot' }}</span>\n <span class=\"ud-cal__hovercard-pill\" [class.ud-cal__hovercard-pill--booked]=\"s.booked\">\n <span class=\"ud-cal__hovercard-pill-dot\"></span>\n {{ s.booked ? 'Booked' : 'Available' }}\n </span>\n </div>\n\n <div class=\"ud-cal__hovercard-row\">\n <mat-icon class=\"ud-cal__hovercard-ico\">schedule</mat-icon>\n <span class=\"ud-cal__hovercard-time\">{{ formatSlotTime(s) }}</span>\n <span class=\"ud-cal__hovercard-dur\">{{ slotDurationLabel(s) }}</span>\n </div>\n\n @if (s.booked && s.bookedBy) {\n <div class=\"ud-cal__hovercard-row ud-cal__hovercard-person\">\n <span class=\"ud-cal__hovercard-avatar\" [style.background]=\"slotBorderColor(s)\">\n {{ slotInitials(s.bookedBy) }}\n </span>\n <span class=\"ud-cal__hovercard-person-name\">{{ s.bookedBy }}</span>\n </div>\n }\n </div>\n </div>\n }\n</ng-template>\n\n", styles: [":host{display:block;width:100%;font-family:DM Sans,system-ui,sans-serif}.ud-cal{position:relative;background:#fff;border:1px solid var(--eu-border-mid, #d8dde6);border-radius:12px;box-shadow:0 2px 8px #1b25350f;overflow:hidden}.ud-cal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--eu-border-light, #e8eaef);gap:12px;flex-wrap:wrap}.ud-cal__nav{display:flex;align-items:center;gap:4px}.ud-cal__period{flex:1;text-align:center;font-size:14px;font-weight:600;color:var(--eu-text, #2a3548);white-space:nowrap}.ud-cal__header-right{display:flex;align-items:center;gap:10px}.ud-cal__view-switcher{display:flex;align-items:center;background:var(--eu-bg, #f4f5f7);border-radius:8px;padding:3px;gap:2px}.ud-cal__view-btn{padding:4px 12px;border:none;border-radius:6px;background:transparent;font-family:DM Sans,system-ui,sans-serif;font-size:12px;font-weight:500;color:var(--eu-muted, #6b7585);cursor:pointer;transition:background .15s,color .15s}.ud-cal__view-btn--active{background:var(--eu-navy, #1b2535);color:#fff}.ud-cal__view-btn:not(.ud-cal__view-btn--active):hover{background:#1b253514;color:var(--eu-text, #2a3548)}.ud-cal__week-scroll{overflow-y:auto;max-height:580px}.ud-cal__week-header{position:sticky;top:0;z-index:10;display:flex;background:#fafbfc;border-bottom:1px solid var(--eu-border-light, #e8eaef);flex-shrink:0}.ud-cal__time-gutter{width:52px;flex-shrink:0;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-header{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;gap:2px;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-header:last-child{border-right:none}.ud-cal__day-header--today{background:#1b25350a}.ud-cal__day-name{font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);text-transform:uppercase;letter-spacing:.06em}.ud-cal__day-num{font-size:15px;font-weight:600;color:var(--eu-text, #2a3548)}.ud-cal__day-num--today{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--eu-navy, #1b2535);color:#fff;border-radius:50%;font-size:13px}.ud-cal__week-grid{display:flex}.ud-cal__time-col{width:52px;flex-shrink:0;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__time-cell{height:56px;position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding:0 6px}.ud-cal__time-label{font-size:10px;color:var(--eu-muted, #9099a8);font-weight:500;white-space:nowrap;margin-top:-6px}.ud-cal__day-col{flex:1;position:relative;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__day-col:last-child{border-right:none}.ud-cal__day-col--today{background:#1b253506}.ud-cal__grid-cell{height:56px;border-bottom:1px solid var(--eu-border-light, #e8eaef);transition:background .1s;cursor:pointer}.ud-cal__grid-cell--half{border-bottom-style:dashed;border-bottom-color:#d8dde673}.ud-cal__grid-cell:hover{background:#1b253508}.ud-cal__slot{position:absolute;margin-left:2px;box-sizing:border-box;border-left:3px solid;border-radius:6px;padding:3px 6px;display:flex;flex-direction:column;gap:1px;overflow:hidden;z-index:1;transition:filter .15s,transform .1s}.ud-cal__slot--clickable{cursor:grab}.ud-cal__slot--clickable:hover{filter:brightness(.93);transform:translate(1px)}.ud-cal__slot--cozy{padding:2px 6px;gap:0}.ud-cal__slot--compact{padding:1px 6px;gap:0;flex-direction:row;align-items:center;justify-content:flex-start}.ud-cal__slot-inner{display:flex;align-items:center;gap:3px;overflow:hidden;min-width:0}.ud-cal__slot-title{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;min-width:0}.ud-cal__slot-time{font-size:10px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.ud-cal__slot--dragging{opacity:.3;pointer-events:none}.ud-cal__slot--drag-preview{left:3px;right:3px;margin-left:0;pointer-events:none;opacity:.75;border-left-style:dashed;border-top:1px dashed currentColor;z-index:2}.ud-cal__slot--booked{background-image:repeating-linear-gradient(-45deg,transparent,transparent 4px,rgba(229,57,53,.07) 4px,rgba(229,57,53,.07) 8px)!important;cursor:not-allowed;border-top:1px solid rgba(229,57,53,.18)}.ud-cal__slot--booked:hover{filter:none!important;transform:none!important}.ud-cal__slot--booked .ud-cal__slot-title{text-decoration:line-through;text-decoration-color:#c6282866;text-decoration-thickness:1px;opacity:.9}.ud-cal__slot-lock{font-size:10px!important;width:10px!important;height:10px!important;line-height:10px!important;flex-shrink:0;opacity:.7}.ud-cal__slot-booked-by{font-size:9px;font-weight:500;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em;margin-top:1px}.ud-cal__month{display:flex;flex-direction:column}.ud-cal__month-header{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--eu-border-light, #e8eaef);background:#fafbfc}.ud-cal__month-day-name{text-align:center;padding:8px 4px;font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);text-transform:uppercase;letter-spacing:.06em;border-right:1px solid var(--eu-border-light, #e8eaef)}.ud-cal__month-day-name:last-child{border-right:none}.ud-cal__month-grid{display:grid;grid-template-columns:repeat(7,1fr)}.ud-cal__month-cell{min-height:80px;padding:6px;border-right:1px solid var(--eu-border-light, #e8eaef);border-bottom:1px solid var(--eu-border-light, #e8eaef);cursor:pointer;transition:background .12s}.ud-cal__month-cell:nth-child(7n){border-right:none}.ud-cal__month-cell:hover{background:#1b253508}.ud-cal__month-cell--today{background:#1b25350a}.ud-cal__month-cell--other{opacity:.4}.ud-cal__month-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:12px;font-weight:600;color:var(--eu-text, #2a3548);border-radius:50%}.ud-cal__month-num--today{background:var(--eu-navy, #1b2535);color:#fff}.ud-cal__month-dots{display:flex;flex-wrap:wrap;align-items:center;gap:3px;margin-top:4px}.ud-cal__month-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.ud-cal__month-more{font-size:9px;font-weight:600;color:var(--eu-muted, #6b7585)}.ud-cal__hovercard{--hc-accent: var(--eu-navy, #1b2535);position:relative;display:flex;min-width:208px;max-width:288px;background:#fff;border:1px solid var(--eu-border-light, #e8eaef);border-radius:12px;overflow:hidden;font-family:DM Sans,system-ui,sans-serif;box-shadow:0 1px 2px #1b25350d,0 14px 30px -10px #1b25353d;transform-origin:top left;animation:ud-cal-hovercard-in .17s cubic-bezier(.16,1,.3,1) both}.ud-cal__hovercard:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,color-mix(in srgb,var(--hc-accent) 6%,transparent),transparent 55%)}@keyframes ud-cal-hovercard-in{0%{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.ud-cal__hovercard-bar{width:4px;flex-shrink:0;background:var(--hc-accent)}.ud-cal__hovercard-body{position:relative;z-index:1;flex:1;min-width:0;padding:12px 14px 13px;display:flex;flex-direction:column;gap:9px}.ud-cal__hovercard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.ud-cal__hovercard-title{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--eu-text, #2a3548);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ud-cal__hovercard-pill{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;padding:3px 9px 3px 7px;border-radius:999px;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#10b98121;color:#0e9f6e}.ud-cal__hovercard-pill--booked{background:#e539351f;color:#d33730}.ud-cal__hovercard-pill-dot{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}.ud-cal__hovercard-row{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--eu-muted, #6b7585)}.ud-cal__hovercard-ico{font-size:16px!important;width:16px!important;height:16px!important;line-height:16px!important;color:var(--hc-accent);opacity:.9}.ud-cal__hovercard-time{color:var(--eu-text, #2a3548);font-weight:600;font-variant-numeric:tabular-nums}.ud-cal__hovercard-dur{margin-left:auto;font-size:10px;font-weight:600;color:var(--eu-muted, #6b7585);background:var(--eu-bg, #f4f5f7);border:1px solid var(--eu-border-light, #e8eaef);padding:1px 8px;border-radius:6px;white-space:nowrap}.ud-cal__hovercard-person{padding-top:8px;border-top:1px dashed var(--eu-border-light, #e8eaef)}.ud-cal__hovercard-avatar{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--hc-accent);color:#fff;font-size:9px;font-weight:700;letter-spacing:.03em;flex-shrink:0}.ud-cal__hovercard-person-name{color:var(--eu-text, #2a3548);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
3643
3805
|
}], ctorParameters: () => [], propDecorators: { onDocMouseMove: [{
|
|
3644
3806
|
type: HostListener,
|
|
3645
3807
|
args: ['document:mousemove', ['$event']]
|
|
@@ -3686,8 +3848,8 @@ class UdButtonToggleComponent {
|
|
|
3686
3848
|
setDisabledState(isDisabled) {
|
|
3687
3849
|
this.disabled = isDisabled;
|
|
3688
3850
|
}
|
|
3689
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3690
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3851
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: UdButtonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3852
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: UdButtonToggleComponent, isStandalone: true, selector: "ud-button-toggle", inputs: { options: "options", size: "size", disabled: "disabled" }, providers: [
|
|
3691
3853
|
{
|
|
3692
3854
|
provide: NG_VALUE_ACCESSOR,
|
|
3693
3855
|
useExisting: forwardRef(() => UdButtonToggleComponent),
|
|
@@ -3695,7 +3857,7 @@ class UdButtonToggleComponent {
|
|
|
3695
3857
|
},
|
|
3696
3858
|
], usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-btn-toggle\" [class]=\"'ud-btn-toggle--' + size\" [class.ud-btn-toggle--disabled]=\"disabled\" role=\"group\">\n @for (option of options; track option.value; let first = $first; let last = $last) {\n <button\n type=\"button\"\n class=\"ud-btn-toggle__option\"\n [class.ud-btn-toggle__option--selected]=\"value === option.value\"\n [class.ud-btn-toggle__option--first]=\"first\"\n [class.ud-btn-toggle__option--last]=\"last\"\n [disabled]=\"disabled || null\"\n (click)=\"select(option)\">\n @if (option.icon) {\n <mat-icon class=\"ud-btn-toggle__icon\">{{ option.icon }}</mat-icon>\n }\n @if (option.label) {\n <span>{{ option.label }}</span>\n }\n </button>\n }\n</div>\n", styles: [":host{display:inline-block}.ud-btn-toggle{display:inline-flex;border-radius:var(--eu-radius-sm, 6px);border:1px solid var(--eu-border-mid, #c9cdd6);overflow:hidden;background:var(--eu-bg, #f4f5f7)}.ud-btn-toggle--disabled{opacity:.5;cursor:not-allowed}.ud-btn-toggle--disabled .ud-btn-toggle__option{cursor:not-allowed;pointer-events:none}.ud-btn-toggle__option{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;border:none;border-right:1px solid var(--eu-border-mid, #c9cdd6);background:transparent;font-family:DM Sans,system-ui,sans-serif;font-weight:500;color:var(--eu-muted, #6b7585);cursor:pointer;white-space:nowrap;transition:background .15s ease,color .15s ease,box-shadow .15s ease;outline:none}.ud-btn-toggle__option:last-child{border-right:none}.ud-btn-toggle__option:hover:not(:disabled):not(.ud-btn-toggle__option--selected){background:var(--eu-bg-hover, #eff1f5);color:var(--eu-navy, #1b2535)}.ud-btn-toggle__option:focus-visible{z-index:1;box-shadow:inset 0 0 0 2px #1b253559}.ud-btn-toggle__option--selected{background:var(--eu-navy, #1b2535);color:#fff}.ud-btn-toggle__option--selected:hover:not(:disabled){background:#253347}.ud-btn-toggle--sm .ud-btn-toggle__option{height:32px;padding:0 .75rem;font-size:.8rem}.ud-btn-toggle--md .ud-btn-toggle__option{height:40px;padding:0 1.1rem;font-size:.875rem}.ud-btn-toggle--lg .ud-btn-toggle__option{height:48px;padding:0 1.5rem;font-size:.95rem}.ud-btn-toggle__icon{font-size:1.1em!important;width:1.1em!important;height:1.1em!important;line-height:1!important;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
3697
3859
|
}
|
|
3698
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3860
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: UdButtonToggleComponent, decorators: [{
|
|
3699
3861
|
type: Component,
|
|
3700
3862
|
args: [{ selector: 'ud-button-toggle', standalone: true, imports: [CommonModule, FormsModule, MatIconModule], providers: [
|
|
3701
3863
|
{
|
|
@@ -3717,10 +3879,10 @@ class UdPreviewContainerComponent {
|
|
|
3717
3879
|
title = '';
|
|
3718
3880
|
icon;
|
|
3719
3881
|
padding = '24px';
|
|
3720
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3721
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3882
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: UdPreviewContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3883
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: UdPreviewContainerComponent, isStandalone: true, selector: "ud-preview-container", inputs: { title: "title", icon: "icon", padding: "padding" }, ngImport: i0, template: "<div class=\"preview-container\">\n <div class=\"section-title\">\n @if (icon) {\n <span class=\"material-icons\">{{ icon }}</span>\n }\n {{ title }}\n </div>\n <div class=\"section-content\" [style.padding]=\"padding\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block}.preview-container{background:#fff;border:1px solid #e1e4e8;border-radius:8px;margin-bottom:24px;overflow:hidden}.preview-container .section-title{padding:14px 20px;background:#f6f8fa;border-bottom:1px solid #e1e4e8;font-size:13px;font-weight:600;color:#374151;display:flex;align-items:center;gap:8px}.preview-container .section-title .material-icons{font-size:16px;color:#6c7086}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
3722
3884
|
}
|
|
3723
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3885
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: UdPreviewContainerComponent, decorators: [{
|
|
3724
3886
|
type: Component,
|
|
3725
3887
|
args: [{ selector: 'ud-preview-container', standalone: true, imports: [CommonModule], template: "<div class=\"preview-container\">\n <div class=\"section-title\">\n @if (icon) {\n <span class=\"material-icons\">{{ icon }}</span>\n }\n {{ title }}\n </div>\n <div class=\"section-content\" [style.padding]=\"padding\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block}.preview-container{background:#fff;border:1px solid #e1e4e8;border-radius:8px;margin-bottom:24px;overflow:hidden}.preview-container .section-title{padding:14px 20px;background:#f6f8fa;border-bottom:1px solid #e1e4e8;font-size:13px;font-weight:600;color:#374151;display:flex;align-items:center;gap:8px}.preview-container .section-title .material-icons{font-size:16px;color:#6c7086}\n"] }]
|
|
3726
3888
|
}], propDecorators: { title: [{
|
|
@@ -3805,8 +3967,8 @@ class ToggleOptionComponent {
|
|
|
3805
3967
|
setDisabledState(isDisabled) {
|
|
3806
3968
|
this.isDisabled = isDisabled;
|
|
3807
3969
|
}
|
|
3808
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3809
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3970
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ToggleOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3971
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ToggleOptionComponent, isStandalone: true, selector: "ud-toggle-option", inputs: { title: "title", description: "description", checked: "checked", controlName: "controlName", size: "size" }, outputs: { checkedChange: "checkedChange", toggle: "toggle" }, host: { properties: { "class.size-sm": "this.isSm", "class.size-md": "this.isMd", "class.size-lg": "this.isLg" } }, providers: [
|
|
3810
3972
|
{
|
|
3811
3973
|
provide: NG_VALUE_ACCESSOR,
|
|
3812
3974
|
useExisting: forwardRef(() => ToggleOptionComponent),
|
|
@@ -3819,7 +3981,7 @@ class ToggleOptionComponent {
|
|
|
3819
3981
|
},
|
|
3820
3982
|
] });
|
|
3821
3983
|
}
|
|
3822
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3984
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ToggleOptionComponent, decorators: [{
|
|
3823
3985
|
type: Component,
|
|
3824
3986
|
args: [{ selector: 'ud-toggle-option', standalone: true, imports: [CommonModule], providers: [
|
|
3825
3987
|
{
|